Why
ccusage-dashboard (#3236) exposes 9 cost analytics panels. Aegis dashboard has zero cost visibility. Enterprise users need session burn rate, token breakdowns, and per-model cost tracking.
What
Design and implement 3 dashboard panels:
- Session Burn Rate — cost over time chart (line chart, USD on Y axis, time on X). Shows spending velocity per session.
- Token Breakdown — stacked bar chart: input tokens, output tokens, cache-read, cache-write per session. Toggle by time range.
- Cost by Model — horizontal bar chart: total USD grouped by model (claude-3-opus, gpt-4o, gemini-pro, etc.).
Backend API (#3264) provides the data. This issue covers the frontend panels only — mock data is fine for initial implementation, wire to real API once #3264 ships.
Design references
Done when
- 3 panels render with mock data
- Responsive layout (works on 1280px+ screens)
- Accessible (aria labels, keyboard nav, screen reader)
- Matches existing dashboard design language
- Loading/error/empty states handled
Priority: P2 — enterprise differentiator
Depends on: #3264 (cost tracking API — for real data)
Refs: #3236
Why
ccusage-dashboard (#3236) exposes 9 cost analytics panels. Aegis dashboard has zero cost visibility. Enterprise users need session burn rate, token breakdowns, and per-model cost tracking.
What
Design and implement 3 dashboard panels:
Backend API (#3264) provides the data. This issue covers the frontend panels only — mock data is fine for initial implementation, wire to real API once #3264 ships.
Design references
Done when
Priority: P2 — enterprise differentiator
Depends on: #3264 (cost tracking API — for real data)
Refs: #3236