Console Usage view with utilisation and waiting charts #349

Part of #329.

Scope

After this PR, the console has a Usage view: a window picker (last hour, day, week), the figures as stat cards and tables, and two charts, utilisation and waiting over time, that update without a reload as the window moves. It follows the design guide, works at 360 px and in both colour schemes.

Technical spec

Modules touched

• ui/src/views/index.tsx — a Usage entry in VIEWS, path /usage.
• ui/src/views/usage.tsx and ui/src/views/usage-model.ts (pure, unit-tested) — the view and its model. The model turns one usage.get answer into the stat-card rows, the table rows and the two chart series; the view renders them with StatCards, Panel, the shared table from ui/src/table.tsx, and a chart built on ui/src/charts.tsx.
• ui/src/charts.tsx — the chart takes a bucketed series with any width and formats the axis by bucketMs, which MinuteChart assumes to be a minute today; the accessible table beside it does the same.
• Data: a variant of useLiveResource in ui/src/live/live-context.tsx that refetches /v1/stats?since=<window> every 15 seconds while on screen and never more often; an event marks the resource stale for the next tick, not a fetch of its own; the window is in the URL's search (?window=1h|24h|7d) through useSearch, default 24h.
• partial renders as a note above the figures with coversFrom.
• On a worker the per-worker table has one row, itself; on a gateway one per worker. The per-requester table shows the label beside the id.
• e2e/console/usage.spec.ts — Playwright, on the fake driver.
• docs/CONSOLE.md — the view. docs/internal/DESIGN.md if a token or rule is added.

Contract and event changes

• None. The view reads GET /v1/stats and the existing event stream.

Rules in play

• architecture.md rule 1: the model is pure and the view reads one route.
• testing.md rule 1: each Playwright test title is a claim about what is on screen.
• docs/internal/DESIGN.md: charts have their numbers in an accessible table, animation off, colour by class; tables stack under 768 px; no horizontal scroll at 360 px; contrast AA in both schemes.

Tests

• the usage model turns an answer into stat cards for requests, grants by source, wait p95, held p50, peak utilisation and rejections
• the usage model turns the series into a utilisation chart series of slots used over max and a waiting chart series of requests waiting per bucket
• the usage model formats the window and the partial note from coversFrom
• the Usage resource refetches on the 15-second tick and not on the one-second tick, and an event does not start a fetch before the next tick
• the chart formats the axis by bucket width for one-minute, fifteen-minute and one-hour buckets
• (console) the Usage tab shows the figures for the last 24 hours by default and the picker switches to the last hour and the last week
• (console) after a lease is granted while the view is open, the request count rises within 15 seconds without a reload
• (console) the utilisation and waiting charts render with their accessible tables, and every number in a chart appears as text
• (console) at 360 px the view has no horizontal scroll and the tables stack
• (console) the view passes the axe check in light and dark schemes
• (console) on a gateway with two workers, the per-worker table has two rows; on a single host it has one

Done when

• On the fake driver, after a scripted run, the Usage view shows the figures and both charts for the chosen window, matching simlock stats --json for that window.
• Taking a lease while the view is open raises the counts within 15 seconds without a reload.
• The view works at 360 px with no horizontal scroll, in light and dark schemes, and passes the console lane's axe check.
• On a gateway the per-worker table has one row per worker; on a worker it has one row.
• docs/CONSOLE.md describes the view and its window picker.

Out of scope

• Explicit start and end dates in the console; the three fixed windows only. The CLI and the route cover arbitrary windows.
• Any chart beyond utilisation and waiting.

Depends on

• GET /v1/stats and the simlock stats --csv ledger #348
• Gateway: remote agents lease and reach physical devices on workers #442

Approval

• Approved for delivery

Written by an agent.