feat(ui): the console draws each worker's load as gauges on its detail page

[V3RON]

What

Each of the Load panel's CPU, memory and disk figures gains a bar in a line of its own underneath, filled to that figure's own percent. The panel was text alone.

	before	after
CPU	34% busy, 10 cores	the same line, with a 34%-filled bar under it
Memory	9.8 GiB of 32.0 GiB available	the same line, with a 69%-filled bar under it, in the pressure's colour
Disk	112.4 GiB of 494.4 GiB free	the same line, with a 77%-filled bar under it

Swap gains none: the wire sends swapUsedBytes and no swap total, so there is nothing to divide by.

Spec: #569. Part of #527.

Closes #569

How

Plain CSS, not the charts library — the string render the Load tests already use draws an empty <div> from Recharts, so a library gauge's fill could only have been asserted in the browser lane. This one is asserted at both seams.

• loadGauges() in ui/src/views/load-model.ts answers each figure's fullness as a whole 0–100 percent, and nothing where the reading has no denominator. Whole, so a CPU bar rounds the way the busy share above it rounds. Clamped, because a memory or disk pair is two independent non-negative numbers on the wire and the console revalidates no view.
• The level arrives as a --load-bar custom property; every colour comes from styles.css by tone class (load-bar-ok/-warn/-error/-idle, deliberately not .status-* — the lane checks that every .status shows a word, and a bar has none). The CSP refuses an injected <style> element and applies a style attribute, which is how the level is allowed (checked against a live daemon).
• Memory takes the tone its pressure already prints. CPU and disk stay --status-idle: the search found no CPU or disk threshold anywhere that reaches a view, and the console invents no threshold.
• A gauge is aria-hidden and takes no focus — the figure above it is the text, so nothing is said twice and no number is visible only as a shape.
• FigureRow holds the shared "unavailable, or a figure with its gauge under it" shape, so CPU, memory and disk each hand it their own text rather than repeating it.

Motion

The fill slides to a new level over --duration, which prefers-reduced-motion: reduce already zeroes document-wide. Measured before choosing it (Chromium, Chrome's own counters, 600 level changes on three bars at one per frame — 15× the real 15 s cadence): transition: width cost 0.132 ms layout and 0.827 ms task per frame; transform: scaleX() skipped the layouts (7 vs 614) but cost more total task time (0.900 ms). Neither made a long task, so the compositor-only trick buys nothing here and width is the simpler shape.

DESIGN.md's Motion section said nothing slides, so this PR amends it with the one exception and its reason, and adds the gauge to the guide's component list. docs/CONSOLE.md's Load panel paragraph says what the panel now draws.

Done when

• Every test in the spec is green. 181 unit tests pass, incl. 12 new: percent math, both clamp directions, no-denominator, one bar per figure row and none in Swap/Pressure/Read, no bar in an Unavailable row, a zero-total figure printed with its number and no bar, the memory tone from each pressure level, CPU/disk idle at any level, the number said once, no bars for no-load/disconnected, and the card unchanged.
• pnpm test:console --project=chromium is green. 4 new lane tests: each fill's width is its figure's percent of its track within a pixel, one fill per figure required; the track caps at 20rem rather than filling its value column and sits under the figure, left-aligned with it; each fill's colour is its tone's status token and never the accent, in both themes — with all four tones painted by the real component in both themes, driven by answering the page's own /v1/workers read with memory.pressure set to each level in turn (a Linux worker never reports one); the transition is width over --duration and 0s under emulated reduced motion. The lane's existing 360px, keyboard and axe AA rules still pass.
• They fail for the right reason. Mutation-checked: dropping the clamp, the no-denominator guard, the tone map, the transition, the accent rule, the max-width cap, or turning the bar back into an inline sibling each turns its own test red. On the colour side: deleting the three unreachable tone rules, swapping one tone's colour in the dark theme only, and painting another with the accent each fail a named assertion.
• A bar under CPU, memory and disk; memory matches its pressure — checked on this machine (macOS, so the worker reports pressure): memory normal drew the ok green at 41%, CPU 26% and disk 97% drew neutral. warn and critical are no longer left to that check: the lane drives them through the route the page reads, so the whole chain — pressure → tone class → token → painted pixel — is asserted in both themes without a macOS-only machine.
• The bar slides, and not under reduced motion — the fill eased 66 48 34 25 20 17 16 16 px over eight frames after a level change (transition: width 0.12s), and reads 0s under emulated reduce. A 120 ms ease is not settle-able by eye, so the lane asserts the computed transition.
• The docs say what is now true — docs/CONSOLE.md Load panel paragraph; docs/internal/DESIGN.md Motion, plus a Load gauges entry under Components.

Status

Implement: done Review: round 1, passed Hardware: n/a Gate: waiting for the stack

Assumptions

• Assumption: The gauge is 8px high, capped at 20rem wide, and --field for a track. The spec fixes the shape (a bar under the figure) but not these numbers; taken from the console's own vocabulary — the 8px square a status uses, --field as the recessed surface, and a cap so a wide panel does not turn one line of text into a band.
• Assumption: The cap is measured as 20rem against the value column (minmax(0, 1fr)), so on a wide panel the bar stops short of the column's end. The spec says "under the figure"; which of the column's widths it fills it does not say, and the narrower one is the quieter.
• Assumption: A memory gauge with no pressure in the view is idle rather than ok. The spec names pressure as the colour's source and says nothing about its absence; Linux workers never send one, so a green default would claim "healthy" from a field that was never read.
• Assumption: The reduced-motion half of the transition test is guarded to Chromium (browserName), the way the lane's keyboard tests already branch on it. Playwright documents reducedMotion for all three engines, but only Chromium's was verified on this machine and its Firefox/WebKit binaries are not installed here; a guard that could hide a real failure in the other two is worse than a narrower one.

What the review changed

A fresh-context review of this diff (five axes, spec in hand) found four things worth a commit each; all are in the branch:

• The gauge clamped with Math.round while the figure above it rounds with the module's roundHalfUp. They differ just under a half — a busy share of 0.49999999999999994 printed 1% and drew a 0 bar. Now one round, and that float is in the test's list so its title is true of every case.
• The colour test's DOM probe asked the stylesheet what a tone class would paint. It proved the stylesheet's rule but never passed through the component, so the pressure → tone map it leans on was pinned only in the unit seam. It now drives real data through the route the page reads.
• docs/CONSOLE.md said no CPU or disk "limit" is reported, on a page that prints (limit) beside the CPU figure when the worker limits itself — a container's user saw both at once. The word is threshold; the doc says so, and what a (limit) is.
• DESIGN.md's new entry opened "A figure of how full something is carries a bar", which is binding for later console work and made the card's Load and Capacity rows wrong as they stand (a card gauge is this task's stated non-goal). It now describes the panel it was written for.

Plus two test-honesty fixes: the fill-width test waited on the reading's stamp, which moves between reads even when the levels do not, so it retried for nothing; and the transition test's title promised a slide its body never sees, so it now says what it checks.

Not in this PR

No gauge on the worker's card. No swap gauge. No CPU or disk threshold — that would be a wire change of its own. No history or graph. No wire or protocol change.

Review

Spec review: 0 blocking, 0 fixed, 1 note. Code review: 1 blocking, 1 fixed, 0 notes. Claims review: 1 blocking, 1 fixed, 1 note.
Rounds: 1. Tokens: n/a.

Fixed unreviewed (text only, delivery rule 14):

• code: ui/src/views/worker-detail.tsx:420 said style-src does not govern style attributes; probed, the policy refuses the attribute and the level survives because React writes through the CSSOM
• claims: docs/internal/DESIGN.md:192 pointed at the charts rule "below"; that rule is the bullet above the gauge entry
• code: ui/src/views/worker-detail.tsx:429 and DESIGN.md cited ADR 0011 for markup attributes; the ADR says only that the style prop creates no <style> element

Nothing was rejected: each finding was reproduced against the code at the reviewed commit and confirmed. The CSP one came with a probe — a page served with style-src 'self' logged a violation and left the custom property empty from markup, and resolved it through the CSSOM.

Written by an agent.