feat(usage): show cost by token type, speed, and model detail

[t3dotgg]

The Usage tab showed one cost total, provider rows, and a model table with only Cost, Share, and Tokens. You could not see what Fast and Ultrafast cost, which token types the money went to, or anything about one model on its own. Unpriced usage was only a percent behind an info icon.

Builds on #15101, which made Fast and Ultrafast cost what they bill.

What changed

• Cost by type and Cost by speed. Two part-to-whole bars replace a wall of numbers. Speed only shows when Fast or Ultrafast was used, with the premium (what those speeds cost above standard rates) beside it. The Tokens view shows tokens by type instead. The server computes the dollar split, because clients do not have the rates. A provider-reported cost is split in proportion to list rates. Cost that cannot be split shows as Other.
• Breakdown is a ranked list. Each model gets a thin share bar under its name. Clicking a row opens the model: cost, tokens, cost per 1M tokens, cache hit rate, its own trend chart, and its type and speed mix. Unpriced models offer Set price there, which opens the existing price form with the model added.
• Mobile shows the same two cost bars. It does not have the model dialog yet.

Colors are neutral steps, so the mixes never borrow a provider's color. Adjacent segments clear the 15 ΔE separation floor in light and dark, and every segment has a labeled legend value.

Screenshots

Synthetic Codex and Claude transcripts, 30 days, dark mode. Same data before and after.

Before

After

A model's detail

An unpriced model

420px wide

Wire format

UsageBucket gets four optional fields: categoryCostUsd, fastCostUsd, ultrafastCostUsd, and speedPremiumUsd. They are fields, not a new bucket key, so bucket keys and merge dedupe do not change. Zero values are omitted and the new figures are rounded to micro-dollars. The contract version stays at 6: old clients ignore the fields, and buckets from old servers merge as standard-speed Other cost. The model dialog re-runs the client merge on that model's buckets, so it needs no extra data.

On 30 days of real Codex and Claude history (115 buckets), the category split sums exactly to the total cost, and the bucket payload grows from 42 KB to 51 KB before websocket deflate.

Verification

• Focused tests: pricing split and premium, proportional split of reported cost, bucket accumulation, old-server merge, mixed unpriced cells, and cache hit and $/1M math.
• vp test run for the usage tests in server, web, shared, and mobile. tsc --noEmit for contracts, shared, server, web, and mobile. Lint and format on changed files.
• Headless screenshots against a dev server reading synthetic transcripts, at 1440px and 420px.
• Keyboard focus on a model row, checked in a headless browser: the row takes the hover fill (:focus-visible on the row button) instead of a focus ring.

Created with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

⚠️ The thread fixture changed, so impact percentages are not directly comparable to the main baseline.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	—	4.9 KiB	—	6.8 KiB	✅
Codex	Thread snapshot wire	—	3.7 KiB	—	4.9 KiB	✅
Codex	Live turn WebSocket wire	—	1.1 KiB	—	2.0 KiB	✅
Codex	Live turn WebSocket decoded	—	20.4 KiB	—	29.3 KiB	✅
Codex	Live turn messages	—	1	—	8	✅
Claude	Total thread wire	—	4.9 KiB	—	6.8 KiB	✅
Claude	Thread snapshot wire	—	3.7 KiB	—	4.9 KiB	✅
Claude	Live turn WebSocket wire	—	1.2 KiB	—	2.0 KiB	✅
Claude	Live turn WebSocket decoded	—	20.8 KiB	—	29.3 KiB	✅
Claude	Live turn messages	—	2	—	8	✅

Baseline: 408ff8a · PR result: a6497dc · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 106.1 KiB
• Claude decoded thread snapshot: 106.4 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is an XL cross-layer feature that adds new server-side cost calculations, optional usage payload fields, mobile/web breakdowns, and an interactive model-detail workflow. Its behavior runs on the normal usage path and is broader than a small, isolated UI addition.

No code changes detected at a6497dc. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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