The console draws each worker's load as gauges on its detail page #569

Part of #527.

Scope

The worker's detail page in the console shows its latest CPU, memory and disk readings as gauges (bars) under the figures #534 prints, in the manner of macOS Activity Monitor's summary panels, instead of text alone.

In short

Today the detail page prints the load as text — 34% busy, 10 cores, 9.8 GiB of 32.0 GiB available, 112.4 GiB of 494.4 GiB free (F1). After this task each of those three figures also has a bar under it showing how full it is, coloured with the console's status colours (the memory pressure level colours the memory gauge on macOS). Only the latest reading is drawn: there is no history and no graph over time (a non-goal of #527, ADR 0028). If this goes wrong, a gauge shows a stale or empty bar for a figure that is unavailable.

Requested by the maintainer in the delivery session of #527 (option 1 of "gauges now, history later").

flowchart LR
  W["worker reads its load<br/>every 15 s"] --> V["the worker view's<br/>load block"]
  V --> P["detail page's Load panel"]
  P --> T["figures as text"]
  P --> G["gauges under the figures *"]

Technical spec

Facts

The gauge

One shape, drawn in CSS: an 8px track as wide as the fact row's value column (F13), capped at 20rem — the column is minmax(0, 1fr), so uncapped it would stretch to the panel's whole width and turn one line of text into a band — with a fill whose width is that column's percent. It sits in a line of its own under the figure it belongs to, left-aligned with it, so the figure keeps its own line and neither the label column nor the text reflows.

flowchart LR
  L["the view's load block"] --> LM["views/load-model.ts *<br/>loadGauges"]
  LM --> WD["views/worker-detail.ts *<br/>LoadFacts"]
  WD --> ST["status.tsx<br/>pressureStatus"]
  WD --> CSS["styles.css *<br/>the bar"]

• ui/src/views/load-model.ts gains loadGauges(load) (F2). It answers the fullness of CPU, memory and disk as whole 0–100 percents, and nothing for a figure the reading has no denominator for. Whole percents, rounded as the figure above it rounds (F18). Clamped to 0–100, because F5 leaves an odd memory or disk pair possible and the console revalidates no view: a reading that lands outside the bar is drawn at its end rather than past it, and a figure whose total is zero gets no gauge at all rather than Infinity%. It stays a pure function in the module the panel already reads, so the arithmetic has a test without a browser.
• LoadFacts draws the gauge under each of its CPU, Memory and Disk figures (F1), and leaves Swap, Pressure and Read exactly as they are. The card's row is a different component and does not change (F2).
• Colour. The bar's own classes are load-bar and load-bar-ok/-warn/-error/-idle. It must not reuse .status or .status-*: a .status is a word with a colour and the lane checks that every .status on a worker's page shows a non-empty word in its tone's colour (F16), and a bar has no word (F14). Memory takes the tone its pressure already prints (F4); CPU and disk stay --status-idle. The console takes thresholds from the worker and invents none, and F3 is the search that says there are none to take — a red CPU bar would mean something no line of this product says. Where memory has no pressure, which is every Linux worker (F4), its gauge is idle too, and the colour says nothing the words do not.
• Level inline, colour by class. The percent arrives as a --load-bar custom property on the bar; every colour comes from styles.css by tone class (F9, F13). That is the shape ADR 0011 §4 asks of anything drawn, and the reason styles.css cannot hold the level: it does not know the reading.
• Motion. transition: width var(--duration) on the fill. F11 is the measurement that says width is cheap enough that the compositor-only alternative is not worth its scaleX() trick, and F7 is why it barely moves at all: once every 15 seconds. --duration is 120ms and prefers-reduced-motion: reduce zeroes it document-wide, so reduced motion needs nothing new (F12). F14 forbids this today, so this change amends DESIGN.md's Motion section to say what it now allows, in the same PR.
• A gauge is never the only place its number is. It carries aria-hidden, takes no focus and has no accessible name: the figure above it is the text, in the same cell. That keeps the rule F14 states — a status shows a word — true without saying 69% twice to a screen reader, and keeps axe off the bar, which is a shape and not text.

Contract and event changes

None. The gauge reads the load block #533 already puts in the worker view and sends nothing back (F5). No event is new or changed.

Other code on the same state

• WorkerFacts' Load row (F2) reads the same load block and prints one line of text. It keeps doing that: this task's Scope is the detail page. If both were to draw gauges, loadGauges would be the one place either takes a percent from, which it is.
• attention-model.ts reads worker views for the RAM budget item and reads no load, and this task adds no attention item for load (F3: there is no threshold to warn at). Unchanged.
• workers-model.ts workersStats and busiestWorkers read the same views. Unchanged.
• pressureStatus (F4) is read by both the Pressure row's <Status> and the memory gauge. Both take the tone from it, so a pressure of warn colours the dot and the bar the same way in one read of the same field; neither one wins over the other because they cannot disagree.
• The 12 Load tests in ui/src/views/worker-detail.test.tsx (402-559) assert on the panel's text through loadPanel(). A gauge is a sibling of that text inside the same cell, so every one of them stays green and none needs narrowing.

Rules in play

• docs/internal/agent-rules/coding.md — the body is the spec; a gap is an Assumption: line.
• docs/internal/agent-rules/testing.md — the unit seam cannot see a painted width (F10), so the tests split by what each can actually prove.
• docs/internal/agent-rules/documentation.md — docs/CONSOLE.md and docs/internal/DESIGN.md are both changed by this and both are written for their own reader.
• docs/internal/DESIGN.md — Status colours, Shape and Motion (F14). Motion is amended by this task, not worked around.

Tests

The seams are loadGauges directly, WorkerDetail through renderToStaticMarkup with a now prop (where the 12 Load tests already sit), and the browser lane for anything painted. Model them on ui/src/views/worker-detail.test.tsx and e2e/console/workers.spec.ts ("on a single host, a card shows its Load row and the detail shows the Load panel with an age that ticks").

• loadGauges answers each figure's fullness as a whole percent — 34 busy, 9.8 of 32.0 GiB available, 112.4 of 494.4 GiB free answers 34, 69, 77
• a gauge's percent rounds the same way the busy share above it does, so a CPU reading of 34.4 draws a 34 under the words 34% busy
• loadGauges clamps both ends. Full: 137% busy answers 100; negative free bytes answer 100; negative available answers 100. Empty: −4% busy answers 0; free equal to total answers 0; available above total answers 0 — used there is negative, so the bar is empty, never full
• loadGauges answers nothing for a figure with no denominator: a zero memory or disk total, or a part the reading does not carry
• the Load panel draws one gauge in each of its CPU, Memory and Disk rows and none in Swap, Pressure or Read
• the Load panel draws no gauge in a row that says Unavailable, and prints a figure whose total is zero with its number and no gauge
• the Load panel colours the memory gauge with its pressure — normal, warn and critical ok, warn and error — and idle where the view has no pressure
• the Load panel keeps the CPU and disk gauges idle at any level, including a full disk
• a gauge carries no accessible name, so the panel says each figure's number once
• the Load panel draws no gauge at all where it says Not reported. or No reading while disconnected., since those two answer instead of drawing figures
• the worker's card prints its Load row as one line of text with no gauge, as today

In the browser lane:

• a worker's detail draws a bar under each of its CPU, memory and disk figures that the reading carries, and each fill's width is that figure's percent of its track, within a pixel — measured against simlock worker list --json beside it, retrying until both the reading and the fill have settled: the reading turns over every 15 s (F7) and the fill eases for 120 ms (F12), so a measurement taken in either window compares a bar to the wrong figure
• a gauge's track is capped at 20rem rather than filling its value column, and the bar sits under its figure, left-aligned with it, not beside it — measured on a page wide enough that the two differ
• each fill's colour is its own tone class's status token, resolved in the page, and never the accent, in both themes — and all four tones are painted by the real component in both themes: the test answers the page's own read of /v1/workers with memory.pressure set to normal, warn and critical in turn and once removed, every other field left as the daemon sent it, so no tone rule survives being deleted, swapped, dark-only overridden, or painted with the accent
• a fill's computed transition is its width over the document's --duration, in every browser the lane runs, and zero under emulated prefers-reduced-motion: reduce — the second half guarded to Chromium, the only engine F17 verified, the way the lane's keyboard tests already branch on browserName

A live Linux worker still never reports a pressure (F4), so the lane's pressure levels arrive through that route rather than through the kernel — the page's own read of the route it reads, one field changed. Which pressure reaches which tone class remains the unit test's claim as well; the lane now proves the whole chain in both themes without a macOS-only machine.

Done when

• Every test above is green.
• pnpm test:console --project=chromium is green: the diff touches ui/.
• On this machine (macOS, so the worker reports pressure), a worker's page shows a bar under CPU, memory and disk; the memory bar is the same colour as its normal pressure square; the other two are neutral. warn and critical are covered in the lane by the route above — the level is the kernel's own and no command arranges them on a healthy machine.
• The fill's transition is its width over --duration, and 0s under reduced motion: the lane test named above. A 120 ms ease is not something to settle by eye.
• docs/CONSOLE.md and docs/internal/DESIGN.md say what the panel and the design guide now do, with no claim left false about the old behaviour.

Out of scope

• A gauge on the worker's card, or anywhere but the detail page's Load panel.
• A gauge for swap. The wire sends swapUsedBytes and no swap total (F5), so there is nothing to divide by, and an invented one would be a wire change.
• A CPU or disk threshold, or any colour those two could earn from a level (F3). That is a wire change of its own.
• A graph over time, or any history kept by the worker or gateway.
• Any change to the wire shape or the protocol.

Depends on

• The console shows each worker's load on its card and detail page #534

Written by an agent.