Repository navigation
Overview redesign: usage chart, spend, quotas, past-year heatmap - #384
Merged
Merged
Conversation
Lay out the overview as usage, spend and quota side by side, the past year, then the breakdown table, with placeholder components for the new parts. The metric chosen in the usage card lives on the page so it survives range changes. A day range (from one local midnight to the next) lets the past-year heatmap open a single day; the dashboard command takes an optional end. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Replace the six metric cards with one usage card. The six metrics sit side by side as tabs (three by two on a narrow page); each shows its figure and the change from the prior period with the same rules as before. The selected metric is drawn below as a large chart with a four-step axis, grid lines, date and time ticks, and a tooltip per slot that lists the top models for tokens and cost. Requests and traffic stack their two parts; cache hit rate and first-token percentiles are lines. The slot still in progress is drawn fainter, and a day range ends at that day's end rather than now. The cost qualifier (estimated, unpriced, no usage, still being priced) stays visible on the metric and in full in the detail line, not only on hover. The live range keeps tokens, cost and requests to ten minutes and labels the 24-hour metrics. The old card and sparkline components are removed; axis, tick and model ranking helpers are pure functions with tests. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Add the past-year card: one cell per day over 53 weeks (Monday on top, the current week on the right), cells that scale with the card width, month and weekday labels, and a Tokens / Cost / Requests switch. Cells are shaded in five levels cut at the quartiles of the days with usage; days before recording began are drawn as dashed "not recorded" cells. Four figures sit above the grid: the total, the daily average over days with usage, the busiest day and the current and longest streaks, with cost qualifiers (estimated, unpriced) always shown. Days covered by the selected range are outlined. Hovering or focusing a day shows its figures; clicking it or pressing Enter opens that day. The grid takes one tab stop and moves with the arrow keys. Data comes from the new UsageHistory endpoint, one bucket per day from the first day of the grid, matched to local dates by the moment twelve hours into each bucket so daylight-saving shifts do not move a day. The endpoint's type and table entries are written by hand until core ships it; the screenshot mocks answer it. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
- dashboard: fetch /quota alongside the rest; Dashboard.quotas is null when the read fails. - Distribution card ranks models, upstreams or keys by the selected metric (sums for tokens, cost, requests and traffic; each item's own cache hit rate and first-token P50), shows the top five with shares and a wash bar, says how many more there are, and opens Traffic filtered to the row. - Quotas and balances card lists enabled upstreams with subscription windows or a balance, reading them the way the Upstreams page does; it is absent when there is nothing to show. - The status line shows the current generation speed while requests are running. - Breakdown rows carry logos; models are matched to their vendor by name (modelGlyph). Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
… spend and breakdown Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
…etention are not clickable The cost tile wrote the qualifier marks at the big number's size, so an estimated, partly unpriced amount did not fit. They are now set small in front of the amount, and amounts from $1,000 drop the cents. The past-year heatmap keeps usage beyond the request retention, but the overview for a single day is computed from request rows. Days before the oldest row (detail_since_ms, new in UsageHistory) can no longer be opened; their tooltip says the day's details are past the retention period. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Pin core v0.84.0 (control API 55) and regenerate tw-api.ts, which replaces the hand-written UsageHistory type. UsageHistory joins the webview call allowlist on the Rust side. The UI kit notes describe the new usage chart and the heatmap instead of the old card sparklines. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this changes
The overview is rebuilt around one usage card and adds spend, quota and long-term views:
UsageHistory, core v0.84.0), with totals, daily average, busiest day and streaks. Days before recording started are drawn as not recorded. The selected range is outlined; clicking a day switches the overview to that day (a new day range with an end). Days older than the oldest request record cannot be opened./quota.Why
The overview was a grid of small cards and a table. The usage chart, the spend split and the remaining quota are what most people check, and the year view needs a history that outlives the request retention, which core now keeps.
How it was verified
pnpm typecheck,pnpm test(125 files, 1381 tests),cargo fmt --check,cargo clippy --all-targets -D warnings,cargo test --lib, and thets_bindingstest against v0.84.0.🤖 Generated with Claude Code