Task 16 — Dashboard upgrade
Depends on: 11, 13
Goal
pages/index.html shows the new stats payload. New sub-page for the price
timeline.
Scope
pages/index.html:
- Lens toggle (Historical / Current / Timeline) — controls
?lens= on every
fetch.
- Currency display (
stats.currency).
- Four cards: total cost, total requests, total tokens, active accounts.
- Account × Model matrix table (cell shows tokens above, cost below).
- Daily cost stacked bar chart (color = account).
- Daily token line chart (lines = input / cached / output / reasoning).
- Missing-pricing list.
New file pages/timeline.html:
- Per-model step chart of
input_per_mtok, output_per_mtok,
cached_input_per_mtok, reasoning_per_mtok over time.
- Hover reveals
sync_log_id and a JSON diff popover.
- New
/usage/timeline route returns
model_pricing_versions rows joined with pricing_sync_log.
Use Chart.js via CDN. No bundler.
Definition of Done
Task 16 — Dashboard upgrade
Depends on: 11, 13
Goal
pages/index.htmlshows the newstatspayload. New sub-page for the pricetimeline.
Scope
pages/index.html:?lens=on everyfetch.
stats.currency).New file
pages/timeline.html:input_per_mtok,output_per_mtok,cached_input_per_mtok,reasoning_per_mtokover time.sync_log_idand a JSON diff popover./usage/timelineroute returnsmodel_pricing_versionsrows joined withpricing_sync_log.Use Chart.js via CDN. No bundler.
Definition of Done
cleanly).
docs/tasks/16-dashboard.mddocs/design/