feat(dashboard): cost analytics panels — burn rate, token breakdown, cost by model

[OneStepAt4time]

What

Implements #3273 — Three new cost analytics panels for the Aegis dashboard.

New Components (dashboard/src/components/cost/)

Component	Type	Description
BurnRateChart	Line chart	Cost velocity over time (30 days default)
TokenBreakdownChart	Stacked bar	Input/output/cache-read/cache-write tokens per day
CostByModelChart	Horizontal bar	Total spend grouped by model

CostPage Integration

• New Cost Analytics section between Daily Spend and Model Breakdown
• Time range picker (7d / 30d / 90d) — inline button group
• Burn rate at full width, token + model charts side by side

Design

• Uses existing ChartFrame wrapper + recharts
• Dark-theme consistent (CSS vars, --color-accent-cyan/purple/success/warning)
• Loading / empty / error states on all panels
• aria-label on every section
• Responsive (1280px+)

Mock Data

All three panels ship with realistic mock data. Wire to real API once #3264 (cost tracking API) lands.

Test Evidence

• 15 new Vitest tests (render, empty state, loading, custom data, aria-labels)
• 27 total cost suite tests — all passing
• Build: clean, CostPage chunk 42.46 kB
• tsc --noEmit: zero new errors

Screenshots

To be added once CI renders the dashboard.

Done When

• 3 panels render with mock data
• Responsive layout (1280px+)
• Accessible (aria labels, keyboard nav)
• Matches existing dashboard design language
• Loading/error/empty states handled
• Tests pass

Refs: #3273, #3264, #3236

[aegis-gh-agent]

✅ Approved.

Clean dashboard addition — three well-structured cost analytics panels.

What's good:

• 3 components (BurnRateChart, TokenBreakdownChart, CostByModelChart) each self-contained with proper interfaces
• Consistent pattern across all three: loading state, empty state, default mock data, custom data prop
• Uses existing ChartFrame wrapper + recharts — no new dependencies
• Dark-theme consistent via CSS vars throughout
• aria-label on every section + aria-pressed on time range picker buttons
• Responsive grid layout (full-width burn rate, side-by-side token/model)
• TimeRangePicker is a clean reusable component
• 15 tests covering render, empty, loading, custom data, and aria-labels per component
• CostPage integration is minimal and clean

🟡 Non-blocking observations:

1. TimeRangePicker state exists but doesn't actually filter mock data yet — it's UI-only wiring for when the real API (#3264) connects. Fine for a mock-data PR, but the time range picker currently does nothing visible.
2. generateMockData() in BurnRateChart and TokenBreakdownChart uses Math.random() — tests won't be fully deterministic. Low risk since tests check structure, not data values, but worth noting for future reference.
3. Mock model names in CostByModelChart use future version numbers (claude-opus-4.7, gpt-5.4) — these will age. Not blocking.

CI fully green. Ready to merge pending approved-minor-bump label.

[aegis-gh-agent]

✅ Approved.

Review summary — PR #3275 (Cost Analytics Panels)

Gate checklist:

• ✅ CI: all checks green (lint, test, helm-smoke, CodeQL, Trivy, Gitleaks, dashboard-e2e)
• ✅ Mergeable, no conflicts, targets develop
• ✅ No secrets, no sensitive data
• ✅ 15 new Vitest tests across 3 test files — all passing
• ✅ 3 new components (BurnRateChart, TokenBreakdownChart, CostByModelChart) + TimeRangePicker
• ✅ Follows existing patterns: ChartFrame, recharts, CSS vars, dark-theme consistent
• ✅ Loading / empty / error states on all panels
• ✅ Accessibility: aria-label on sections, role="group" on time range picker, aria-pressed
• ✅ Conventional commit title (feat(dashboard):)
• ✅ Linked issues (#3273, #3264, #3236)
• ✅ Mock data clearly documented, TimeRangePicker state wired but charts on mock until API lands

Clean work, consistent with existing dashboard design language. Ready to merge.

[aegis-gh-agent]

✅ Approved — full diff reviewed.

Quality Gate Summary:

• ✅ CI: 17/17 checks green
• ✅ Targets develop, mergeable
• ✅ 15 new Vitest tests (render, empty, loading, custom data, aria-labels)
• ✅ Three clean components: BurnRateChart, TokenBreakdownChart, CostByModelChart
• ✅ Consistent with existing ChartFrame + recharts pattern
• ✅ Loading/empty/error states on all panels
• ✅ Accessibility: aria-labels, aria-pressed on time range picker
• ✅ Dark-theme CSS vars, responsive grid
• ✅ No secrets, no sensitive data
• ✅ Mock data clearly documented, pending real API (#3264)

No issues found. Clean dashboard addition.