feat: add animated totals/averages to dashboard chart card headers

[impoiler]

Summary

Adds aggregate totals and a weighted average latency metric to each dashboard chart card header, giving users an at-a-glance summary of the data currently displayed in each chart.

Changes

• Replaced the single headerActions prop on ChartCard with separate controls, legend, and total/totalLabel props, and extracted a Header sub-component and TotalChip sub-component to render them in a structured layout (title row → total + controls row → legend row).
• Each dashboard tab (Overview, MCP, Provider Usage, Model Rankings) now computes its own aggregate value via useMemo:
  • Request Volume, Token Usage, Model Usage, MCP Tool Calls, MCP Top Tools, Provider Token Usage → sum of counts/tokens across all buckets.
  • Cost (MCP, Overview, Provider) → sum of total_cost across buckets, respecting the active model/provider filter.
  • Latency (Overview, Provider) → request-count-weighted average of avg_latency across buckets.
• Totals are rendered using NumberFlow with COMPACT_NUMBER_FORMAT for counts, currency formatting for costs, and a fixed two-decimal ms suffix for latency averages.
• Y-axis tick formatters across logVolumeChart, mcpVolumeChart, mcpTopToolsChart, and modelUsageChart switched from v.toLocaleString() to the shared formatTokens utility, and axis widths were normalised to 44px.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

cd ui
pnpm i
pnpm build

1. Open the dashboard and navigate to the Overview, MCP, Provider Usage, and Model Rankings tabs.
2. Verify each chart card header shows a labelled total (e.g. "Total 1.2k", "Total $0.04", "Avg 312.50ms").
3. Change the model or provider filter on Cost / Model Usage / Provider charts and confirm the displayed total updates to reflect the filtered data.
4. Toggle between bar and area chart types and confirm the total remains consistent.
5. Verify the loading skeleton state still renders correctly without the total chip.

Screenshots/Recordings

Screen Recording 2026-05-14 at 6.52.34 PM.mov (uploaded via Graphite)

Breaking changes

• No

The headerActions prop on ChartCard has been removed and replaced with controls, legend, total, and totalLabel. Any consumers outside this PR that pass headerActions will need to be updated.

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refactors the dashboard chart system by updating the ChartCard component API to standardize metric display, standardizing numeric formatting across charts, and integrating aggregated metric computations into multiple dashboard tabs.

Changes

Dashboard Chart Component and Metric Refactoring

Layer / File(s)	Summary
ChartCard Component Refactoring ui/app/workspace/dashboard/components/charts/chartCard.tsx	ChartCard props updated to replace headerActions with controls, legend, total, and totalLabel. New internal Header helper composes title, conditional actions row, legend area, and optional TotalChip with consistent data-testid identifiers across loading and non-loading render paths.
Chart Formatter Standardization ui/app/workspace/dashboard/components/charts/logVolumeChart.tsx, mcpTopToolsChart.tsx, mcpVolumeChart.tsx, modelUsageChart.tsx	Multiple chart components updated to import and use shared formatTokens utility for Y-axis and X-axis tick formatting, replacing inline toLocaleString() calls. YAxis widths adjusted for improved spacing.
MCPTab Chart Integration ui/app/workspace/dashboard/components/mcpTab.tsx	MCPTab computes memoized aggregates for Tool Calls volume, Cost (USD formatted), and Top Tools counts. ChartCard components wired with new total, legend, and controls props using NumberFlow formatting.
ModelRankingsTab Total Aggregation ui/app/workspace/dashboard/components/modelRankingsTab.tsx	ModelRankingsTab computes grandTotal memoized aggregate across all model buckets and passes it to Top Models ChartCard via the new total prop with NumberFlow compact formatting.
OverviewTab Comprehensive Refactoring ui/app/workspace/dashboard/components/overviewTab.tsx	All five chart cards (Request Volume, Token Usage, Cost, Model Usage, Latency) refactored to compute memoized metrics (totals, weighted averages) and render via NumberFlow with conditional currency or precision formatting. Legends and controls moved to dedicated props with tooltip-driven rendering for multi-model scenarios.
ProviderUsageTab Comprehensive Refactoring ui/app/workspace/dashboard/components/providerUsageTab.tsx	All three provider-specific chart cards (Cost, Token, Latency) refactored to compute memoized per-provider metrics and aggregates. Wired through new ChartCard props with NumberFlow formatting, including weighted-average latency and conditional legend rendering for multi-provider vs. single-provider modes.

---

🎯 3 (Moderate) | ⏱️ ~22 minutes

---

🐰 A dashboard fair with metrics bright,
Charts now speak with unified might,
Totals flow and legends gleam,
Controls dance in harmony's beam,
One API to rule them all—what a dream! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 9.09% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding animated totals and averages to dashboard chart card headers, which is the primary feature introduced across all modified files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description covers all major required template sections including summary, changes, type of change, affected areas, testing steps, breaking changes, and a checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 05-14-feat_adds_total_count_in_the_dashboard_charts_for_quick_overview

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[impoiler]

• feat: add tooltip with full precision values to chart card totals and consolidate number formatting utilities #3501
• feat: add animated totals/averages to dashboard chart card headers #3499 👈 (View in Graphite)
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 4/5

Safe to merge; changes are confined to dashboard UI presentation logic with no backend or data-fetching impact.

The aggregate and weighted-average computations are correct against the TypeScript types, filter-aware cost totals match the by_model/by_provider field shapes in the histogram bucket types, and edge cases (all-zero buckets, null data) are handled. The only items worth cleaning up are two now-unused exported constants in chartUtils.ts and a minor type-imprecision in chartCard.tsx.

No files require special attention; ui/app/workspace/dashboard/utils/chartUtils.ts has two dead exports that should be removed as a follow-up.

Important Files Changed

Filename	Overview
ui/app/workspace/dashboard/components/charts/chartCard.tsx	Refactored to accept separate controls, legend, total, and totalLabel props; extracted TotalChip and Header sub-components. Minor type imprecision in hasActionRow boolean coercion.
ui/app/workspace/dashboard/components/overviewTab.tsx	Adds five useMemo aggregations (volume, tokens, cost, model usage, latency weighted avg); data type access patterns confirmed correct against CostHistogramBucket and ModelHistogramBucket types.
ui/app/workspace/dashboard/components/providerUsageTab.tsx	Adds provider cost, token, and latency aggregations; weighted average latency uses total_requests as weight per ProviderLatencyStats, correctly handles empty/filtered buckets.
ui/app/workspace/dashboard/components/mcpTab.tsx	Adds MCP volume, cost, and top-tools totals; all field accesses match MCPHistogramBucket, MCPCostHistogramBucket, and MCPTopTool types.
ui/app/workspace/dashboard/components/modelRankingsTab.tsx	Adds grandTotal summing all-model request counts across time buckets; sums the full models list (including models rolled into "Other" by the chart), giving a true aggregate total.
ui/app/workspace/dashboard/components/charts/logVolumeChart.tsx	Y-axis tick formatter switched from toLocaleString() to shared formatTokens utility; axis width normalised to 44px. Correct for count data.
ui/app/workspace/dashboard/components/charts/mcpVolumeChart.tsx	Same tick formatter and axis-width normalisation as logVolumeChart; no logical changes.
ui/app/workspace/dashboard/components/charts/mcpTopToolsChart.tsx	Tick formatter switched to formatTokens; no other logic changes.
ui/app/workspace/dashboard/components/charts/modelUsageChart.tsx	Tick formatter switched to formatTokens; axis width normalised to 44px; no other changes.

Comments Outside Diff (1)

1. ui/app/workspace/dashboard/utils/chartUtils.ts, line 110-113 (link)

   CHART_HEADER_ACTIONS_CLASS and CHART_HEADER_CONTROLS_CLASS are no longer imported by any of the tab components after this PR removed all headerActions usages. They are dead exports now and can be removed to keep the module tidy.

_{Reviews (1): Last reviewed commit: "feat: adds total count in the dashboard ..." | Re-trigger Greptile}

[coderabbitai]

🧹 Nitpick comments (1)

ui/app/workspace/dashboard/components/overviewTab.tsx (1)

228-279: 💤 Low value

Consider extracting legend rendering into separate components.

The Cost and Model Usage legends contain 4 levels of nested conditionals, which makes the JSX harder to scan. Consider extracting CostLegend and ModelUsageLegend components to improve readability and testability.

Example:

<CostLegend 
  selectedModel={costModel}
  models={costModels}
/>

This would move the conditional logic into dedicated, testable components.

Also applies to: 303-354

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/app/workspace/dashboard/components/overviewTab.tsx` around lines 228 -
279, The JSX in the legend block is deeply nested and hard to read; extract the
conditional rendering into a dedicated component (e.g., CostLegend) and do the
same for the model-usage legend (e.g., ModelUsageLegend). Move the current logic
that branches on costModel === "all", costModels, the
Tooltip/TooltipTrigger/TooltipContent structure, getModelColor usage, and the
CHART_HEADER_LEGEND_CLASS wrapper into the new CostLegend component which
accepts props (selectedModel: costModel, models: costModels, getModelColor) and
returns the same markup; then replace the inline legend JSX in overviewTab.tsx
with <CostLegend .../> (and similarly extract ModelUsageLegend for the other
block), keeping all keys and aria/test ids (data-testid="cost-legend-trigger",
"cost-legend-more-trigger", "cost-legend-single-trigger") intact so behavior and
tests remain unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@ui/app/workspace/dashboard/components/overviewTab.tsx`:
- Around line 228-279: The JSX in the legend block is deeply nested and hard to
read; extract the conditional rendering into a dedicated component (e.g.,
CostLegend) and do the same for the model-usage legend (e.g., ModelUsageLegend).
Move the current logic that branches on costModel === "all", costModels, the
Tooltip/TooltipTrigger/TooltipContent structure, getModelColor usage, and the
CHART_HEADER_LEGEND_CLASS wrapper into the new CostLegend component which
accepts props (selectedModel: costModel, models: costModels, getModelColor) and
returns the same markup; then replace the inline legend JSX in overviewTab.tsx
with <CostLegend .../> (and similarly extract ModelUsageLegend for the other
block), keeping all keys and aria/test ids (data-testid="cost-legend-trigger",
"cost-legend-more-trigger", "cost-legend-single-trigger") intact so behavior and
tests remain unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 18d3621f-c443-4f18-b61f-c0fe7edc69bb

📥 Commits

Reviewing files that changed from the base of the PR and between 8be492f and cb00051.

📒 Files selected for processing (9)

• ui/app/workspace/dashboard/components/charts/chartCard.tsx
• ui/app/workspace/dashboard/components/charts/logVolumeChart.tsx
• ui/app/workspace/dashboard/components/charts/mcpTopToolsChart.tsx
• ui/app/workspace/dashboard/components/charts/mcpVolumeChart.tsx
• ui/app/workspace/dashboard/components/charts/modelUsageChart.tsx
• ui/app/workspace/dashboard/components/mcpTab.tsx
• ui/app/workspace/dashboard/components/modelRankingsTab.tsx
• ui/app/workspace/dashboard/components/overviewTab.tsx
• ui/app/workspace/dashboard/components/providerUsageTab.tsx

[akshaydeo]

Merge activity

• May 14, 2:27 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 14, 2:27 PM UTC: @akshaydeo merged this pull request with Graphite.