Documentation Index
Fetch the complete documentation index at: https://mintlify.com/astrxnomo/financial-analytics-agent/llms.txt
Use this file to discover all available pages before exploring further.
When the agent calls an analytics tool, the eve framework emits a tool result part in the message stream. The chat renderer in app/_components/agent-chat.tsx passes that part — carrying a name, an input, and an output — to FinanceToolSlot, which crossfades a loading skeleton into the fully rendered chart once the output arrives. ToolResult (the inner memo in tool-result/index.tsx) inspects name, casts output to the correct TypeScript type, and delegates to the matching Recharts component. Every chart is co-located in app/_components/tool-result/ and shares a common palette, formatter library, and panel shell.
Chart components
TrendChart (trend-chart.tsx)
Renders the output of get_trend. The chart form adapts to the data shape:
- Single period, single series: renders a standalone KPI tile (a formatted dollar figure in a muted card) — a one-dot line communicates nothing.
- Single period, multi-department: renders a bar chart with one bar per department, each colored from
SERIES.
- Multiple periods, single series: renders a
LineChart with a single stroke and no dots.
- Multiple periods, multi-department: renders a
LineChart with one Line per department, each in its own SERIES color, plus a Legend.
The chart title reflects the metric label ("Revenue" or "Expense") and a scope suffix (e.g. " — Engineering, Marketing") so the heading never silently implies “all departments” when only specific ones were queried.
BudgetChart (budget-chart.tsx)
Renders the output of get_budget_status. Displays a grouped BarChart with two bars per department: one for budget (series color 1) and one for actual spend (series color 2). When a department’s actual exceeds its budget, that bar is recolored to CRITICAL (a CSS custom property for alert red) both in the chart and in the tooltip. A subtitle line reads “N of 5 over budget” (or “All departments within budget”) so the headline is visible without hovering.
The chart caption always names the exact month the data covers — the tool only covers one month, and the caption makes that explicit so a question about “this year” can never be misread as an annual total.
CategoryBreakdownChart (category-breakdown-chart.tsx)
Renders the output of get_category_breakdown. Like TrendChart, the form adapts to the data shape:
- Single period: renders a
PieChart in donut form — a stacked area with only one column along the time axis would be meaningless.
- Multiple periods: renders a stacked
AreaChart, one Area per category in SERIES order, with fillOpacity: 0.35.
Categories are ranked by their total across the requested range. Only the top CATEGORY_BREAKDOWN_TOP_N (currently 8) receive named, colored areas; any remaining categories are folded into an “Other” band rendered in MUTED. Below the chart, an OtherNote component lists the exact categories that “Other” contains so viewers know what the band represents.
CashflowChart (cashflow-chart.tsx)
Renders the output of get_cashflow. Uses a Recharts ComposedChart to overlay two Bar series (income and expense) with a Line for cumulative net. The chart title includes the ending cumulative net figure (e.g. "Cash flow — cumulative net $1,234,567") so the overall position is readable before hovering.
AnomalyList (anomaly-list.tsx)
Renders the output of get_anomalies. Unlike the other components, this is a table rather than a chart — anomalies are individual transactions, not aggregated series. Each row shows date, department, category, transaction amount (in CRITICAL red), category average, and the σ deviation label computed by fmtSigma. The scope suffix in the heading reflects any departments or categories filters that were applied to the tool call.
An empty result renders an EmptyState with the message “No anomalies found in this range.”
SummaryTiles (summary-tiles.tsx)
Renders the output of get_summary as three KPI tiles side by side: Income, Expense, and Net. The Net tile carries a TrendingUpIcon (green) when the net is positive and a TrendingDownIcon (red) when negative. The tile caption spans the full date range of the query (from to to).
The same file also exports DataOverviewTiles for get_data_overview, which renders a similar four-tile layout for row counts (transactions, budget rows, departments, categories). The distinct visual language — integers rather than currency, no color tones — signals that this is dataset metadata, not financial results.
ProfitabilityChart (profitability-chart.tsx)
Renders the output of get_profitability. Displays a grouped BarChart with an Income bar and an Expense bar per department. Rows are sorted most-profitable-first by the analytics library, so the highest-net department appears first without any client-side re-sort.
A dedicated ProfitTooltip shows Income, Expense, Net (in green or red by sign), and Margin when the department booked revenue. When margin is null (a cost-center department), the margin row is omitted from the tooltip entirely — a null renders nothing rather than a misleading 0%, because 0% would wrongly imply break-even.
Shared palette (app/_components/charts.ts)
All chart components import their colors and formatters from charts.ts, which maps to CSS custom properties defined in app/globals.css. This means all charts automatically respect the active theme (light or dark) without any per-chart media query.
| Export | Purpose |
|---|
SERIES | Array of 8 categorical colors (--chart-series-1 … --chart-series-8) |
CRITICAL | Alert red (--chart-critical) for over-budget and anomaly amounts |
GOOD | Success green (--chart-good) for positive net figures |
GRID | Faint grid line color (--chart-grid) |
AXIS | Axis line and cursor stroke color (--chart-axis) |
MUTED | Muted tick and “Other” band color (--chart-muted) |
fmtMoney | USD currency formatter (no decimals) using Intl.NumberFormat |
fmtDate | Short date formatter ("Jan 1, 2025", UTC-anchored to prevent off-by-one) |
fmtMonth | Short month+year formatter ("Jan 2025", UTC-anchored) |
fmtSigma | Computes σ deviation label from (amount, mean, stdDev) |
monthRange | Returns "Jan 2025 – Jun 2025" (or a single month) from an array of period strings |
metricLabel | Maps "income" → "Revenue", "expense" → "Expense" for chart titles |
scopeSuffix | Builds " — Engineering, Cloud Infrastructure" suffixes for chart titles |
Panel primitives (panel.tsx)
Every chart is wrapped in a panel shell that provides a consistent report-style card border and background. panel.tsx exports:
| Export | Purpose |
|---|
Panel | Root card shell — rounded border, bg-card/40 background |
ChartHeader | Title + optional caption + optional action slot (right-aligned) |
EmptyState | Dashed-border empty state with a SearchXIcon and a message string |
LegendSwatch | Inline colored square + label for manual legends |
ChartPanel | Compact view + expand-to-dialog wrapper |
ChartPanel is the workhorse for all chart components (as opposed to Panel, which is used for non-chart results like SummaryTiles and AnomalyList). It renders the chart twice via a render prop — once at "compact" size inline in the chat, and once at "large" size inside a Dialog that opens when the user clicks the expand button. The expand button is passed as the action prop to render, so each chart places it in its own ChartHeader row rather than floating it over the chart area.
Edge case handling
Charts degrade gracefully when the data shape doesn’t support the default form:
- Single-period
get_trend: A one-dot line chart is not readable. A single month with no department breakdown renders as a KPI tile; a single month with multiple departments renders as a grouped bar chart.
- Single-period
get_category_breakdown: A stacked area chart with only one column along the time axis communicates nothing. A single period renders as a donut PieChart instead.
- Empty result: Every chart component checks for an empty array and renders an
EmptyState rather than a broken or blank chart.
ToolResult entry point (index.tsx)
index.tsx is the only file outside the tool-result/ folder that imports from it. It exports four things:
| Export | Purpose |
|---|
ToolResult | Memoized component — dispatches by name to the right chart |
isFinanceTool | Returns true if name is in the TOOL_NAMES set |
ToolResultSkeleton | Fixed-height pulse placeholder shown while a tool call is in flight |
FinanceToolSlot | Crossfades skeleton → chart using AnimatePresence + layout |
TOOL_NAMES is a Set containing all eight tool name strings. isFinanceTool lets AgentMessage decide whether to render a tool result slot without importing any chart component directly.
To add a new chart, create a file under app/_components/tool-result/, add the tool name to TOOL_NAMES in index.tsx, and add a case to the ToolResult switch. You’ll also need entries in finance.types.ts (type), finance.ts (SQL query), agent/tools/<name>.ts (tool), and app/api/finance/<name-kebab>/route.ts (REST route).