V5: build the usage page from Headroom + Ledger #86

V5 build: the usage page (live.setkernel.com/usage/, Access-gated).

Why

Raghav picked the usage page on 2026-11-04: build it from the best of B Headroom and A Ledger (prototypes in the org's coordination repository at docs/design/v5/usage/headroom/ and docs/design/v5/usage/ledger/). Headroom answers his daily phone question (is a seat close to a limit, should work move?); Ledger gives the month's per-seat, per-day record. Split from the live-page build so the usage page and the live page build in parallel in separate files.

Acceptance criteria

• The page opens with Headroom's "Needs a look" list in words (each line a link to its seat), or "Nothing needs a look", then Ledger's four month totals (fresh tokens, cache reads, dollars "at API prices, about", busiest seat).
• Then one row per seat (seats read from the data, not a fixed list), Headroom-style: a large 5-hour meter and a weekly meter with the alert threshold drawn as a tick, the reset time and when it was read, today, this month, and Ledger's per-seat sparkline. "over 80%"/"over 70%" with a triangle; "LIMIT HIT" with a stop shape at 100%; a stale reading is dashed and says when it was read; Codex says "no Claude limits", never 0%.
• Below the rows, Ledger's seat-by-day table for the month is shown on the page, not hidden behind "Show as table", with Ledger's one-line sticky strip (each seat's name and both percentages) once scrolled, and the 7/30-day trend toggle with today drawn apart as "so far". Below 1180 px the table becomes Ledger's card per seat and a day list of <details>, never a sideways-scrolling table. Headroom's separate stacked column chart is dropped.
• It reads the real data the prototypes' README names (setkernel-live src/usage.js days, the seat-limits view the page already reads for limit windows). Numbers with no source are hidden, never invented. Nothing from this page reaches the public page.
• Every state renders in light and dark at 375, 1440 and 2560 with no horizontal scroll on a phone. Fonts are the prototypes' self-hosted Google Fonts. Seat colours mark identity only, with the name beside them.
• The PR carries before and after screenshots at 375, 1440 and 2560, light and dark, for Raghav to look at before he merges. Existing tests pass; a test is added only where logic can silently break (threshold and stale rules), in an existing test file where one fits.

Files likely touched

• public/usage/**
• src/usage.js only if a figure is missing
• not public/index.html, public/app.js or public/style.css (the live-page build owns them)

Risk class

R3: every merge to setkernel-live's main deploys, and the page shows usage data. Two agent approvals after the last push, green checks, then Raghav merges after looking at the screenshots.