From 8b461388a0a9c71317624f3e4c17b015d5a4c50c Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Wed, 14 Oct 2026 21:06:31 +0200
Subject: [PATCH 01/10] feat(ui): the console draws each worker's load as
 gauges on its detail page

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. Memory takes the
colour of the pressure it already prints; CPU and disk stay neutral because
the worker reports no limit for them that the console could judge them
against. Swap gains none: the wire sends swap used and no swap total.

The gauge is plain CSS rather than the charts library, because the string
render the Load tests already use draws an empty div from Recharts, so a
library gauge's fill could only be asserted in the browser lane. Moving the
fill's width costs 0.13ms of layout per change, measured, over a panel that
changes once every 15 seconds; the slide uses the existing --duration token,
which prefers-reduced-motion already zeroes.

Closes #569
---
 docs/CONSOLE.md                     |   6 +-
 docs/internal/DESIGN.md             |  14 ++-
 e2e/console/workers.spec.ts         | 130 ++++++++++++++++++++++++++++
 ui/src/styles.css                   |  46 ++++++++++
 ui/src/views/load-model.test.ts     |  60 ++++++++++++-
 ui/src/views/load-model.ts          |  26 ++++++
 ui/src/views/worker-detail.test.tsx |  95 ++++++++++++++++++++
 ui/src/views/worker-detail.tsx      |  79 ++++++++++++++---
 8 files changed, 440 insertions(+), 16 deletions(-)

diff --git a/docs/CONSOLE.md b/docs/CONSOLE.md
index e3cf328c..5d653883 100644
--- a/docs/CONSOLE.md
+++ b/docs/CONSOLE.md
@@ -171,7 +171,11 @@ Select a worker to open its page. It adds:
 - **Load**: how busy the machine is right now: CPU busy share and cores,
   memory available of total, swap used, memory pressure (`normal`, `warn` or
   `critical`, left out where the system does not report it), and disk free of
-  total. A part the worker could not read says `Unavailable`. **Read** says how
+  total. CPU, memory and disk each have a bar under the figure showing how full
+  it is, for scanning at a glance: the memory bar takes the colour of its
+  pressure, and the other two stay neutral because the worker reports no CPU or
+  disk limit for the console to judge them against. A part the worker could not
+  read says `Unavailable`, and has no bar. **Read** says how
   long ago the reading was taken, and it ticks up until the next one. A
   worker that sent no load says "Not reported.", and a disconnected one "No
   reading while disconnected."
diff --git a/docs/internal/DESIGN.md b/docs/internal/DESIGN.md
index 6f4d0e6c..d2ac412e 100644
--- a/docs/internal/DESIGN.md
+++ b/docs/internal/DESIGN.md
@@ -179,6 +179,15 @@ scale; never a value between.
   nothing is visible only in the picture. A chart can be focused, and the
   arrow keys step through it. Its focus ring goes round the whole chart, for
   keyboard focus only: a click on a chart draws none.
+- **Load gauges.** A figure of how full something is carries a bar in a line of
+  its own under it: 8px high, `--field` track, `max-width: 20rem`, square, and
+  never the accent. Its fill takes a status colour by class; its level arrives
+  inline, which the Content-Security-Policy allows for a style attribute. A gauge
+  is never the only place its number is, so it carries no accessible name and
+  takes no focus — the figure above it is the text. Colour is a second signal
+  here too: a gauge shades a level the console has a word for and nothing else,
+  so CPU and disk stay `--status-idle` until the worker sends a limit they can be
+  judged against.
 
 ## Layout
 
@@ -208,7 +217,10 @@ scale; never a value between.
 ## Motion
 
 Almost none. Colour changes on hover take 120ms (`--duration`). Nothing slides,
-fades or bounces, charts included. With `prefers-reduced-motion: reduce`, there
+fades or bounces, charts included. The one exception is a load gauge's fill: it
+takes 120ms (`--duration`) to reach a new level rather than jumping, because a
+new reading lands every 15 seconds and a jump reads as a glitch. Nothing else
+moves, and nothing ever loops. With `prefers-reduced-motion: reduce`, there
 are no transitions at all.
 
 ## Voice
diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index 2b68758a..99c19fd7 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -31,6 +31,12 @@ interface WorkerView {
     readonly android: { readonly running: number; readonly limit: number };
   };
   readonly leases: readonly { readonly deviceId: string; readonly grantedAt: number }[];
+  readonly load?: {
+    readonly readAt: number;
+    readonly cpu?: { readonly busyPercent: number; readonly cores: number };
+    readonly memory?: { readonly availableBytes: number; readonly totalBytes: number };
+    readonly disk?: { readonly freeBytes: number; readonly totalBytes: number };
+  };
 }
 
 interface Status {
@@ -444,6 +450,130 @@ test.describe("the workers views", () => {
     await expect(fact(panel, "Memory")).toContainText("available");
   });
 
+  test("a worker's detail draws a bar under each figure, filled to that figure's own percent", async ({
+    daemon,
+    page,
+  }) => {
+    const [host] = await workerList(daemon);
+    await openConsole(page, daemon);
+    const shown = card(page, host?.id ?? "");
+    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
+    await shown.getByRole("link", { name: host?.id ?? "" }).click();
+
+    const panel = page.getByRole("region", { name: "Load", exact: true });
+    // why: the worker's reading turns over every 15 s, so this measures around it and retries when
+    // it changes mid-measurement — otherwise the bar and the figure compared are different readings.
+    await waitFor(
+      async () => {
+        const before = (await workerList(daemon))[0]?.load;
+        if (before?.cpu === undefined || before.memory === undefined || before.disk === undefined)
+          return false;
+        const painted = await panel.locator(".load-bar").evaluateAll((bars) =>
+          bars.map((bar) => {
+            const fill = bar.firstElementChild as HTMLElement;
+            return {
+              track: bar.getBoundingClientRect().width,
+              fill: fill.getBoundingClientRect().width,
+            };
+          }),
+        );
+        const after = (await workerList(daemon))[0]?.load;
+        if (JSON.stringify(before) !== JSON.stringify(after)) return false;
+
+        const whole = (percent: number) => Math.round(Math.min(100, Math.max(0, percent)));
+        const wanted = [
+          whole(before.cpu.busyPercent),
+          whole((1 - before.memory.availableBytes / before.memory.totalBytes) * 100),
+          whole((1 - before.disk.freeBytes / before.disk.totalBytes) * 100),
+        ];
+        return (
+          painted.length === wanted.length &&
+          painted.every((bar, index) => {
+            const expected = (bar.track * wanted[index]) / 100;
+            return Math.abs(bar.fill - expected) <= 1;
+          })
+        );
+      },
+      { interval: 500, timeout: 40_000, label: () => "the fill to match the figure" },
+    );
+  });
+
+  test("a load gauge's fill takes its colour from the stylesheet and never the accent, in both themes", async ({
+    daemon,
+    page,
+  }) => {
+    const [host] = await workerList(daemon);
+    await openConsole(page, daemon);
+    const shown = card(page, host?.id ?? "");
+    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
+    await shown.getByRole("link", { name: host?.id ?? "" }).click();
+    const panel = page.getByRole("region", { name: "Load", exact: true });
+    await expect(panel.locator(".load-bar").first()).toBeVisible();
+
+    for (const colorScheme of ["light", "dark"] as const) {
+      await page.emulateMedia({ colorScheme });
+      const { accent, tones } = await readStatuses(page);
+      const fills = await panel.locator(".load-bar").evaluateAll((bars) =>
+        bars.map((bar) => ({
+          tone: /load-bar-(\w+)/.exec(bar.className)?.[1] ?? "",
+          colour: getComputedStyle(bar.firstElementChild as HTMLElement).backgroundColor,
+        })),
+      );
+
+      expect(fills.length).toBeGreaterThan(0);
+      for (const fill of fills) {
+        const context = `${fill.tone} gauge in ${colorScheme}`;
+        expect(fill.tone, context).not.toBe("");
+        expect(fill.colour, context).toBe(
+          tones[TONES.indexOf(fill.tone as (typeof TONES)[number])],
+        );
+        expect(fill.colour, context).not.toBe(accent);
+      }
+    }
+  });
+
+  test("a load gauge's fill slides to a new level over --duration, and not at all under reduced motion", async ({
+    browserName,
+    daemon,
+    page,
+  }) => {
+    const [host] = await workerList(daemon);
+    await openConsole(page, daemon);
+    const shown = card(page, host?.id ?? "");
+    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
+    await shown.getByRole("link", { name: host?.id ?? "" }).click();
+
+    const panel = page.getByRole("region", { name: "Load", exact: true });
+    const fill = panel.locator(".load-bar-fill").first();
+    await expect(fill).toBeVisible();
+    // why: the stylesheet moves the fill's width over the document's own duration token, which is
+    // what `prefers-reduced-motion: reduce` already sets to zero. Both sides are read back as
+    // computed values and compared as milliseconds: a browser writes the token's `120ms` as `.12s`.
+    const asMs = (value: string) =>
+      value.trim().endsWith("ms") ? Number.parseFloat(value) : Number.parseFloat(value) * 1_000;
+    await expect
+      .poll(async () => {
+        const style = await fill.evaluate((element) => {
+          const computed = getComputedStyle(element);
+          return {
+            duration: computed.transitionDuration,
+            property: computed.transitionProperty,
+            token: getComputedStyle(document.documentElement).getPropertyValue("--duration").trim(),
+          };
+        });
+        return style.property === "width" && asMs(style.duration) === asMs(style.token);
+      })
+      .toBe(true);
+
+    if (browserName === "chromium") {
+      // why: emulated in Chromium alone — it is the one engine whose reduced-motion emulation was
+      // verified on the machine that wrote this test, and a guard must not hide a real failure in
+      // the other two.
+      await page.emulateMedia({ reducedMotion: "reduce" });
+      await expect(fill).toHaveCSS("transition-duration", "0s");
+    }
+  });
+
   test("a disconnected worker's Load row says No reading while disconnected within a second", async ({
     page,
   }) => {
diff --git a/ui/src/styles.css b/ui/src/styles.css
index df9eb27b..56bb7f05 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -986,6 +986,52 @@ input[aria-invalid="true"] {
   margin-bottom: var(--space-3);
 }
 
+/* Load gauges: how full one machine figure is, as a bar in a line of its own under the figure
+ * it belongs to. Every colour comes from here by class, so both themes apply (ADR 0011 §4); only
+ * the level arrives inline, which the Content-Security-Policy allows (style-src governs style
+ * elements, not style attributes). A gauge only shades what its figure already says, so it is
+ * square, quiet, and never the accent. */
+
+.load-figure {
+  display: grid;
+  gap: var(--space-1);
+}
+
+/* why: the bar stops where a reading is readable rather than filling the panel — a full-width
+ * band would outweigh the one line of text it shades. */
+.load-bar {
+  display: block;
+  height: 8px;
+  max-width: 20rem;
+  background: var(--field);
+}
+
+/* why: a new reading lands every 15 seconds, so the fill slides to its level over --duration
+ * rather than jumping; --duration is already zero under `prefers-reduced-motion: reduce`. Moving
+ * the width costs 0.13ms of layout per change, measured, and no long task either way. */
+.load-bar-fill {
+  display: block;
+  height: 100%;
+  width: var(--load-bar, 0%);
+  transition: width var(--duration);
+}
+
+.load-bar-ok .load-bar-fill {
+  background: var(--status-ok);
+}
+
+.load-bar-warn .load-bar-fill {
+  background: var(--status-warn);
+}
+
+.load-bar-error .load-bar-fill {
+  background: var(--status-error);
+}
+
+.load-bar-idle .load-bar-fill {
+  background: var(--status-idle);
+}
+
 /* Tables: a row per item, in a panel. Headers are labels, rows are roomy, numbers sit right.
  * Under 768px each row stacks into labelled lines, so the page never scrolls sideways. */
 
diff --git a/ui/src/views/load-model.test.ts b/ui/src/views/load-model.test.ts
index 9c1f7e4b..ccdb2247 100644
--- a/ui/src/views/load-model.test.ts
+++ b/ui/src/views/load-model.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { formatBusyPercent, formatBytes, formatCores, loadSummary } from "./load-model";
+import { formatBusyPercent, formatBytes, formatCores, loadGauges, loadSummary } from "./load-model";
 
 const MIB = 1024 ** 2;
 const GIB = 1024 ** 3;
@@ -64,3 +64,61 @@ describe("the card summary", () => {
     expect(loadSummary(noDisk)).toBe("CPU 34% · memory 9.8 of 32.0 GiB · disk unavailable");
   });
 });
+
+describe("how full each figure is", () => {
+  it("answers each figure's fullness as a whole percent", () => {
+    expect(loadGauges(FULL)).toEqual({ cpu: 34, disk: 77, memory: 69 });
+  });
+
+  it("rounds a gauge's percent the way the figure above it does", () => {
+    const shown = (percent: number) => Number(formatBusyPercent(percent).replace("%", ""));
+
+    for (const busyPercent of [34.4, 34.5, 0.5, 99.5]) {
+      const cpu = { busyPercent, cores: 10, limited: false };
+
+      expect(loadGauges({ ...FULL, cpu }).cpu).toBe(shown(busyPercent));
+    }
+  });
+
+  it("fills the bar for a figure at or over its own total and empties it for one with nothing used", () => {
+    const full = loadGauges({
+      ...FULL,
+      cpu: { busyPercent: 100, cores: 10, limited: false },
+      disk: { freeBytes: 0, totalBytes: 100 * GIB },
+      memory: { ...FULL.memory, availableBytes: 0 },
+    });
+    const over = loadGauges({
+      cpu: { busyPercent: 137, cores: 10, limited: false },
+      disk: { freeBytes: -20 * GIB, totalBytes: 100 * GIB },
+      memory: { ...FULL.memory, availableBytes: -5 * GIB },
+      readAt: 0,
+    });
+    const empty = loadGauges({
+      ...FULL,
+      cpu: { busyPercent: -4, cores: 10, limited: false },
+      disk: { freeBytes: 100 * GIB, totalBytes: 100 * GIB },
+      memory: { ...FULL.memory, availableBytes: 34 * GIB, totalBytes: 32 * GIB },
+    });
+
+    expect(full).toEqual({ cpu: 100, disk: 100, memory: 100 });
+    expect(over).toEqual({ cpu: 100, disk: 100, memory: 100 });
+    expect(empty).toEqual({ cpu: 0, disk: 0, memory: 0 });
+  });
+
+  it("answers nothing for a figure the reading gives no denominator for", () => {
+    const { cpu: _cpu, ...noCpu } = FULL;
+    const { memory: _memory, ...noMemory } = FULL;
+    const { disk: _disk, ...noDisk } = FULL;
+    const zeroTotals = {
+      ...FULL,
+      disk: { freeBytes: 12 * GIB, totalBytes: 0 },
+      memory: { ...FULL.memory, totalBytes: 0 },
+    };
+
+    expect(loadGauges(noCpu)).toEqual({ disk: 77, memory: 69 });
+    expect(loadGauges(noMemory)).toEqual({ cpu: 34, disk: 77 });
+    expect(loadGauges(noDisk)).toEqual({ cpu: 34, memory: 69 });
+    expect(loadGauges(zeroTotals)).toEqual({ cpu: 34 });
+    expect(loadGauges({ readAt: 0 })).toEqual({});
+  });
+});
diff --git a/ui/src/views/load-model.ts b/ui/src/views/load-model.ts
index c3910b95..a5507d8b 100644
--- a/ui/src/views/load-model.ts
+++ b/ui/src/views/load-model.ts
@@ -30,6 +30,32 @@ export function formatCores(cores: number): string {
   return `${figure} ${cores === 1 ? "core" : "cores"}`;
 }
 
+export interface LoadGauges {
+  readonly cpu?: number | undefined;
+  readonly disk?: number | undefined;
+  readonly memory?: number | undefined;
+}
+
+export function loadGauges(load: WorkerLoad): LoadGauges {
+  const { cpu, disk, memory } = load;
+  return {
+    ...(cpu !== undefined && { cpu: clampPercent(cpu.busyPercent) }),
+    ...(memory !== undefined && {
+      memory: usedPercent(memory.availableBytes, memory.totalBytes),
+    }),
+    ...(disk !== undefined && { disk: usedPercent(disk.freeBytes, disk.totalBytes) }),
+  };
+}
+
+function clampPercent(percent: number): number {
+  return Math.round(Math.min(100, Math.max(0, percent)));
+}
+
+function usedPercent(available: number, total: number): number | undefined {
+  if (!(total > 0)) return undefined;
+  return clampPercent((1 - available / total) * 100);
+}
+
 export function loadSummary(load: WorkerLoad): string {
   const { cpu, disk, memory } = load;
   const cpuPart =
diff --git a/ui/src/views/worker-detail.test.tsx b/ui/src/views/worker-detail.test.tsx
index 5ed3bc05..4f37d37c 100644
--- a/ui/src/views/worker-detail.test.tsx
+++ b/ui/src/views/worker-detail.test.tsx
@@ -557,3 +557,98 @@ describe("a worker's page shows its load", () => {
     expect(html.match(/<span class="muted">\(limit\)<\/span>/g)).toHaveLength(2);
   });
 });
+
+describe("the Load gauges", () => {
+  const htmlAt = (worker: WorkerView, now = NOW) =>
+    renderToStaticMarkup(<WorkerDetail id="wrk_1" workers={[worker]} now={now} />);
+  const panelOf = (worker: WorkerView) => loadPanel(htmlAt(worker));
+  const bar = (tone: string, percent: number) =>
+    `<span class="load-bar load-bar-${tone}" aria-hidden="true" style="--load-bar:${percent}%"><span class="load-bar-fill"></span></span>`;
+  const row = (html: string, label: string) => {
+    const start = html.indexOf(`<dt>${label}</dt>`);
+    if (start === -1) throw new Error(`the panel has no ${label} row`);
+    const next = html.indexOf("<dt>", start + 1);
+    return html.slice(start, next === -1 ? undefined : next);
+  };
+
+  it("a worker's detail draws one gauge in each of its CPU, Memory and Disk rows and none in Swap, Pressure or Read", () => {
+    const panel = panelOf({ ...RUNNING, load: LOAD });
+
+    expect(row(panel, "CPU")).toContain(bar("idle", 34));
+    expect(row(panel, "Memory")).toContain(bar("ok", 69));
+    expect(row(panel, "Disk")).toContain(bar("idle", 77));
+    for (const label of ["Swap", "Pressure", "Read"]) {
+      expect(row(panel, label)).not.toContain("load-bar");
+    }
+    expect(panel.match(/class="load-bar /g)).toHaveLength(3);
+  });
+
+  it("a worker's detail draws no gauge in the row of a figure that says Unavailable", () => {
+    const { cpu: _cpu, ...noCpu } = LOAD;
+    const { memory: _memory, ...noMemory } = LOAD;
+    const { disk: _disk, ...noDisk } = LOAD;
+    const zeroTotal = {
+      ...LOAD,
+      memory: { ...LOAD.memory, availableBytes: 12 * GIB, totalBytes: 0 },
+    };
+
+    expect(row(panelOf({ ...RUNNING, load: noCpu }), "CPU")).toContain("Unavailable");
+    expect(row(panelOf({ ...RUNNING, load: noCpu }), "CPU")).not.toContain("load-bar");
+    expect(row(panelOf({ ...RUNNING, load: noMemory }), "Memory")).not.toContain("load-bar");
+    expect(row(panelOf({ ...RUNNING, load: noDisk }), "Disk")).not.toContain("load-bar");
+    expect(row(panelOf({ ...RUNNING, load: zeroTotal }), "Memory")).not.toContain("load-bar");
+  });
+
+  it("a worker's detail colours the memory gauge with its pressure, and idle where the view has none", () => {
+    type Memory = NonNullable<NonNullable<WorkerView["load"]>["memory"]>;
+    const { pressure: _pressure, ...noPressure } = LOAD.memory;
+    const memoryBar = (memory: Memory) =>
+      row(panelOf({ ...RUNNING, load: { ...LOAD, memory } }), "Memory");
+
+    expect(memoryBar(LOAD.memory)).toContain(bar("ok", 69));
+    expect(memoryBar({ ...LOAD.memory, pressure: "warn" })).toContain(bar("warn", 69));
+    expect(memoryBar({ ...LOAD.memory, pressure: "critical" })).toContain(bar("error", 69));
+    expect(memoryBar(noPressure)).toContain(bar("idle", 69));
+  });
+
+  it("a worker's detail keeps the CPU and disk gauges idle at any level, a full disk included", () => {
+    const panel = panelOf({
+      ...RUNNING,
+      load: {
+        ...LOAD,
+        cpu: { busyPercent: 99, cores: 10, limited: false },
+        disk: { freeBytes: 0, totalBytes: 494.4 * GIB },
+      },
+    });
+
+    expect(row(panel, "CPU")).toContain(bar("idle", 99));
+    expect(row(panel, "Disk")).toContain(bar("idle", 100));
+  });
+
+  it("a worker's detail says each figure's number once, the gauge carrying none of its own", () => {
+    const panel = text(htmlAt({ ...RUNNING, load: LOAD }));
+
+    expect(loadPanel(panel).match(/34%/g)).toHaveLength(1);
+    expect(loadPanel(panel)).not.toContain("69%");
+    expect(loadPanel(panel)).not.toContain("77%");
+    const gauges = panelOf({ ...RUNNING, load: LOAD }).match(
+      /class="load-bar load-bar-\w+" aria-hidden="true"/g,
+    );
+
+    expect(gauges).toHaveLength(3);
+  });
+
+  it("a worker's detail draws no gauge at all where it says Not reported. or No reading while disconnected.", () => {
+    expect(panelOf(RUNNING)).not.toContain("load-bar");
+    expect(panelOf({ ...RUNNING, connection: "disconnected", load: LOAD })).not.toContain(
+      "load-bar",
+    );
+  });
+
+  it("the worker's card prints its Load row as one line of text with no gauge", () => {
+    const card = renderToStaticMarkup(<WorkerFacts worker={{ ...RUNNING, load: LOAD }} />);
+
+    expect(text(card)).toContain("Load CPU 34% · memory 9.8 of 32.0 GiB · disk 112.4 GiB free");
+    expect(card).not.toContain("load-bar");
+  });
+});
diff --git a/ui/src/views/worker-detail.tsx b/ui/src/views/worker-detail.tsx
index 851742d9..75cfc831 100644
--- a/ui/src/views/worker-detail.tsx
+++ b/ui/src/views/worker-detail.tsx
@@ -1,10 +1,11 @@
+import type { CSSProperties, ReactNode } from "react";
 import { Id, PageHeader, Panel } from "../layout";
 import { formatDuration } from "../live/time";
 import { Link } from "../router";
-import { deviceStateStatus, installStatus, pressureStatus, Status } from "../status";
+import { deviceStateStatus, installStatus, pressureStatus, Status, type Tone } from "../status";
 import { type Column, DataTable } from "../table";
 import { WorkerLeases } from "./leases";
-import { formatBusyPercent, formatBytes, formatCores } from "./load-model";
+import { formatBusyPercent, formatBytes, formatCores, loadGauges } from "./load-model";
 import { WorkerFacts } from "./worker-facts";
 import {
   platformName,
@@ -330,6 +331,11 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
   if (load === undefined) return <p className="muted">Not reported.</p>;
   const { cpu, disk, memory } = load;
   const age = formatDuration(Math.ceil((now - load.readAt) / 1000) * 1000);
+  const gauges = loadGauges(load);
+  // why: a gauge only shades the figure beside it. The console takes thresholds from the daemon
+  // and invents none, so CPU and disk have no level to be wrong at and stay in the neutral tone;
+  // memory has one the worker sends — its pressure — and takes that tone.
+  const memoryTone = memory?.pressure === undefined ? "idle" : pressureStatus(memory.pressure).tone;
   return (
     <dl className="facts">
       <div>
@@ -338,10 +344,15 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
           {cpu === undefined ? (
             "Unavailable"
           ) : (
-            <>
-              {formatBusyPercent(cpu.busyPercent)} busy, {formatCores(cpu.cores)}
-              <Limit limited={cpu.limited} />
-            </>
+            <Gauged
+              figure={
+                <>
+                  {formatBusyPercent(cpu.busyPercent)} busy, {formatCores(cpu.cores)}
+                  <Limit limited={cpu.limited} />
+                </>
+              }
+              gauge={gauges.cpu}
+            />
           )}
         </dd>
       </div>
@@ -351,10 +362,16 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
           {memory === undefined ? (
             "Unavailable"
           ) : (
-            <>
-              {formatBytes(memory.availableBytes)} of {formatBytes(memory.totalBytes)} available
-              <Limit limited={memory.limited} />
-            </>
+            <Gauged
+              figure={
+                <>
+                  {formatBytes(memory.availableBytes)} of {formatBytes(memory.totalBytes)} available
+                  <Limit limited={memory.limited} />
+                </>
+              }
+              gauge={gauges.memory}
+              tone={memoryTone}
+            />
           )}
         </dd>
       </div>
@@ -375,9 +392,14 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
       <div>
         <dt>Disk</dt>
         <dd>
-          {disk === undefined
-            ? "Unavailable"
-            : `${formatBytes(disk.freeBytes)} of ${formatBytes(disk.totalBytes)} free`}
+          {disk === undefined ? (
+            "Unavailable"
+          ) : (
+            <Gauged
+              figure={`${formatBytes(disk.freeBytes)} of ${formatBytes(disk.totalBytes)} free`}
+              gauge={gauges.disk}
+            />
+          )}
         </dd>
       </div>
       <div>
@@ -387,3 +409,34 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
     </dl>
   );
 }
+
+function Gauged(props: {
+  readonly figure: ReactNode;
+  readonly gauge?: number | undefined;
+  readonly tone?: Tone;
+}) {
+  const { figure, gauge, tone = "idle" } = props;
+  return (
+    <span className="load-figure">
+      <span>{figure}</span>
+      {gauge === undefined ? null : <LoadGauge percent={gauge} tone={tone} />}
+    </span>
+  );
+}
+
+// why: a gauge is never the only place its number is -- the figure above it is the text, so it
+// carries no accessible name of its own (`aria-hidden`) and takes no focus. Its colour comes from
+// the stylesheet by class, so both themes apply; only its level arrives inline, which the
+// Content-Security-Policy allows (`style-src` governs style elements, not style attributes).
+function LoadGauge(props: { readonly percent: number; readonly tone: Tone }) {
+  const { percent, tone } = props;
+  return (
+    <span
+      className={`load-bar load-bar-${tone}`}
+      aria-hidden="true"
+      style={{ "--load-bar": `${percent}%` } as CSSProperties}
+    >
+      <span className="load-bar-fill" />
+    </span>
+  );
+}

From 69195ade21603a97fcfc64d10071b83fe4dce228 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Wed, 14 Oct 2026 21:37:18 +0200
Subject: [PATCH 02/10] feat(ui): the gauge takes the shape its spec check
 asked for

The spec check on #569 found three gaps this commit closes in code:

- LoadFacts grew to cyclomatic 11, so the three figure rows' shared
  "unavailable, or a figure with a gauge under it" shape moves to
  FigureRow, which each of CPU, memory and disk hands its own text to.
- Nothing proved the bar is under its figure rather than beside it, or
  that it caps rather than filling the value column; the new lane test
  measures both on a page wide enough for the two to differ.
- The fill's own 120 ms ease could land a measurement between two levels,
  so the percent test now waits for the reading and the fill to settle
  together instead of only for the reading.

Closes #569
---
 e2e/console/workers.spec.ts    | 119 +++++++++++++++++++++++++--------
 ui/src/views/worker-detail.tsx | 104 +++++++++++++---------------
 2 files changed, 137 insertions(+), 86 deletions(-)

diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index 99c19fd7..f895aaf9 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -126,6 +126,50 @@ function fact(scope: Locator, label: string): Locator {
   return scope.locator("dt", { hasText: label }).locator("xpath=following-sibling::dd[1]");
 }
 
+interface PaintedGauge {
+  readonly track: number;
+  readonly fill: number;
+  readonly sliding: boolean;
+}
+
+// why: taken from the worker's own reading rather than from the page, so the console cannot agree
+// with itself; there is no expected level until the reading holds a figure for each of the three.
+function gaugePercents(load: NonNullable<WorkerView["load"]>): readonly number[] | undefined {
+  const { cpu, disk, memory } = load;
+  if (cpu === undefined || disk === undefined || memory === undefined) return undefined;
+  const whole = (percent: number) => Math.round(Math.min(100, Math.max(0, percent)));
+  return [
+    whole(cpu.busyPercent),
+    whole((1 - memory.availableBytes / memory.totalBytes) * 100),
+    whole((1 - disk.freeBytes / disk.totalBytes) * 100),
+  ];
+}
+
+function paintedGauges(panel: Locator): Promise<readonly PaintedGauge[]> {
+  return panel.locator(".load-bar").evaluateAll((bars) =>
+    bars.map((bar) => {
+      const fill = bar.firstElementChild as HTMLElement;
+      // why: the fill's own 120 ms ease means a width read mid-slide sits between two levels, so
+      // this asks the browser whether a transition is still running and reports it with the width.
+      return {
+        track: bar.getBoundingClientRect().width,
+        fill: fill.getBoundingClientRect().width,
+        sliding: fill.getAnimations().some((animation) => animation.playState === "running"),
+      };
+    }),
+  );
+}
+
+function fillsMatch(painted: readonly PaintedGauge[], percents: readonly number[]): boolean {
+  return (
+    painted.length === percents.length &&
+    painted.every((bar, index) => {
+      const percent = percents[index] ?? -1;
+      return Math.abs(bar.fill - (bar.track * percent) / 100) <= 1;
+    })
+  );
+}
+
 /** A device's row in a worker's device table. */
 function deviceRow(page: Page, id: string): Locator {
   return page.getByRole("row").filter({ has: page.getByRole("cell", { name: id, exact: true }) });
@@ -461,43 +505,60 @@ test.describe("the workers views", () => {
     await shown.getByRole("link", { name: host?.id ?? "" }).click();
 
     const panel = page.getByRole("region", { name: "Load", exact: true });
-    // why: the worker's reading turns over every 15 s, so this measures around it and retries when
-    // it changes mid-measurement — otherwise the bar and the figure compared are different readings.
+    // why: both the worker's reading (every 15 s) and the fill's own 120 ms slide can move between
+    // two measurements, so this measures around both and retries until the fill has settled at the
+    // level the reading implies — otherwise the bar and the figure compared are not the same pair.
     await waitFor(
       async () => {
         const before = (await workerList(daemon))[0]?.load;
-        if (before?.cpu === undefined || before.memory === undefined || before.disk === undefined)
-          return false;
-        const painted = await panel.locator(".load-bar").evaluateAll((bars) =>
-          bars.map((bar) => {
-            const fill = bar.firstElementChild as HTMLElement;
-            return {
-              track: bar.getBoundingClientRect().width,
-              fill: fill.getBoundingClientRect().width,
-            };
-          }),
-        );
-        const after = (await workerList(daemon))[0]?.load;
-        if (JSON.stringify(before) !== JSON.stringify(after)) return false;
-
-        const whole = (percent: number) => Math.round(Math.min(100, Math.max(0, percent)));
-        const wanted = [
-          whole(before.cpu.busyPercent),
-          whole((1 - before.memory.availableBytes / before.memory.totalBytes) * 100),
-          whole((1 - before.disk.freeBytes / before.disk.totalBytes) * 100),
-        ];
-        return (
-          painted.length === wanted.length &&
-          painted.every((bar, index) => {
-            const expected = (bar.track * wanted[index]) / 100;
-            return Math.abs(bar.fill - expected) <= 1;
-          })
-        );
+        const wanted = before === undefined ? undefined : gaugePercents(before);
+        if (wanted === undefined) return false;
+        const painted = await paintedGauges(panel);
+        const now = (await workerList(daemon))[0]?.load;
+        if (JSON.stringify(before) !== JSON.stringify(now)) return false;
+        if (painted.some((bar) => bar.sliding)) return false;
+        return fillsMatch(painted, wanted);
       },
       { interval: 500, timeout: 40_000, label: () => "the fill to match the figure" },
     );
   });
 
+  test("a load gauge sits in a line of its own under its figure, capped rather than full width", async ({
+    daemon,
+    page,
+  }) => {
+    const [host] = await workerList(daemon);
+    await openConsole(page, daemon);
+    const shown = card(page, host?.id ?? "");
+    await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
+    await shown.getByRole("link", { name: host?.id ?? "" }).click();
+
+    const panel = page.getByRole("region", { name: "Load", exact: true });
+    const row = fact(panel, "Memory");
+    await expect(row.locator(".load-bar")).toBeVisible();
+    // why: the viewport is 1280 wide, so the value column is far wider than the cap; a bar that
+    // filled its column instead of capping, or sat beside the text instead of under it, fails here.
+    const geometry = await row.evaluate((cell) => {
+      const figure = cell.querySelector(".load-figure > span") as HTMLElement;
+      const bar = cell.querySelector(".load-bar") as HTMLElement;
+      const text = figure.getBoundingClientRect();
+      const track = bar.getBoundingClientRect();
+      return {
+        column: cell.getBoundingClientRect().width,
+        left: track.left - text.left,
+        root: Number.parseFloat(getComputedStyle(document.documentElement).fontSize),
+        top: track.top,
+        track: track.width,
+        textBottom: text.bottom,
+      };
+    });
+
+    expect(geometry.track).toBeCloseTo(20 * geometry.root, 0);
+    expect(geometry.track).toBeLessThan(geometry.column - 100);
+    expect(geometry.top).toBeGreaterThanOrEqual(geometry.textBottom);
+    expect(geometry.left).toBeCloseTo(0, 0);
+  });
+
   test("a load gauge's fill takes its colour from the stylesheet and never the accent, in both themes", async ({
     daemon,
     page,
diff --git a/ui/src/views/worker-detail.tsx b/ui/src/views/worker-detail.tsx
index 75cfc831..79f401cf 100644
--- a/ui/src/views/worker-detail.tsx
+++ b/ui/src/views/worker-detail.tsx
@@ -338,43 +338,29 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
   const memoryTone = memory?.pressure === undefined ? "idle" : pressureStatus(memory.pressure).tone;
   return (
     <dl className="facts">
-      <div>
-        <dt>CPU</dt>
-        <dd>
-          {cpu === undefined ? (
-            "Unavailable"
-          ) : (
-            <Gauged
-              figure={
-                <>
-                  {formatBusyPercent(cpu.busyPercent)} busy, {formatCores(cpu.cores)}
-                  <Limit limited={cpu.limited} />
-                </>
-              }
-              gauge={gauges.cpu}
-            />
-          )}
-        </dd>
-      </div>
-      <div>
-        <dt>Memory</dt>
-        <dd>
-          {memory === undefined ? (
-            "Unavailable"
-          ) : (
-            <Gauged
-              figure={
-                <>
-                  {formatBytes(memory.availableBytes)} of {formatBytes(memory.totalBytes)} available
-                  <Limit limited={memory.limited} />
-                </>
-              }
-              gauge={gauges.memory}
-              tone={memoryTone}
-            />
-          )}
-        </dd>
-      </div>
+      <FigureRow
+        label="CPU"
+        part={cpu}
+        gauge={gauges.cpu}
+        figure={(part) => (
+          <>
+            {formatBusyPercent(part.busyPercent)} busy, {formatCores(part.cores)}
+            <Limit limited={part.limited} />
+          </>
+        )}
+      />
+      <FigureRow
+        label="Memory"
+        part={memory}
+        gauge={gauges.memory}
+        tone={memoryTone}
+        figure={(part) => (
+          <>
+            {formatBytes(part.availableBytes)} of {formatBytes(part.totalBytes)} available
+            <Limit limited={part.limited} />
+          </>
+        )}
+      />
       {memory === undefined ? null : (
         <div>
           <dt>Swap</dt>
@@ -389,19 +375,12 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
           </dd>
         </div>
       )}
-      <div>
-        <dt>Disk</dt>
-        <dd>
-          {disk === undefined ? (
-            "Unavailable"
-          ) : (
-            <Gauged
-              figure={`${formatBytes(disk.freeBytes)} of ${formatBytes(disk.totalBytes)} free`}
-              gauge={gauges.disk}
-            />
-          )}
-        </dd>
-      </div>
+      <FigureRow
+        label="Disk"
+        part={disk}
+        gauge={gauges.disk}
+        figure={(part) => `${formatBytes(part.freeBytes)} of ${formatBytes(part.totalBytes)} free`}
+      />
       <div>
         <dt>Read</dt>
         <dd>{age} ago</dd>
@@ -410,17 +389,28 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
   );
 }
 
-function Gauged(props: {
-  readonly figure: ReactNode;
+function FigureRow<Part extends object>(props: {
+  readonly figure: (part: Part) => ReactNode;
   readonly gauge?: number | undefined;
+  readonly label: string;
+  readonly part: Part | undefined;
   readonly tone?: Tone;
 }) {
-  const { figure, gauge, tone = "idle" } = props;
+  const { figure, gauge, label, part, tone = "idle" } = props;
   return (
-    <span className="load-figure">
-      <span>{figure}</span>
-      {gauge === undefined ? null : <LoadGauge percent={gauge} tone={tone} />}
-    </span>
+    <div>
+      <dt>{label}</dt>
+      <dd>
+        {part === undefined ? (
+          "Unavailable"
+        ) : (
+          <span className="load-figure">
+            <span>{figure(part)}</span>
+            {gauge === undefined ? null : <LoadGauge percent={gauge} tone={tone} />}
+          </span>
+        )}
+      </dd>
+    </div>
   );
 }
 

From ec3d830c995145aef28ccf584af31e7d368c8b83 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Wed, 14 Oct 2026 22:30:54 +0200
Subject: [PATCH 03/10] test(ui): the gauge's other three tone colours are
 checked too

CI runs the console lane on Linux, and only macOS reports a memory pressure,
so a live worker can only ever paint the idle tone there. Deleting the ok,
warn and error rules from the stylesheet left the suite green. The colour
test now asks the stylesheet what each of the four tone classes would paint,
in both themes, and still never the accent.

It checks the colour rule only. Which pressure reaches which class is the
unit test's, and no healthy machine can be made to report warn or critical.

Closes #569
---
 e2e/console/workers.spec.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index f895aaf9..cc2ea23a 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -580,6 +580,24 @@ test.describe("the workers views", () => {
           colour: getComputedStyle(bar.firstElementChild as HTMLElement).backgroundColor,
         })),
       );
+      // why: CI is Linux, and only macOS reports a pressure, so a live worker can only ever paint
+      // the idle tone here. These ask the stylesheet what the other three would paint, so a tone
+      // rule cannot be deleted with the suite green; they check the colour rule only.
+      const drawn = await page.evaluate(() => {
+        const probe = document.createElement("span");
+        probe.className = "load-bar";
+        const seen = ["ok", "warn", "error", "idle"].map((tone) => {
+          probe.className = `load-bar load-bar-${tone}`;
+          const fill = document.createElement("span");
+          fill.className = "load-bar-fill";
+          probe.append(fill);
+          document.body.append(probe);
+          const colour = getComputedStyle(fill).backgroundColor;
+          probe.remove();
+          return colour;
+        });
+        return seen;
+      });
 
       expect(fills.length).toBeGreaterThan(0);
       for (const fill of fills) {
@@ -590,6 +608,12 @@ test.describe("the workers views", () => {
         );
         expect(fill.colour, context).not.toBe(accent);
       }
+
+      for (const [index, tone] of TONES.entries()) {
+        const context = `${tone} gauge rule in ${colorScheme}`;
+        expect(drawn[index], context).toBe(tones[index]);
+        expect(drawn[index], context).not.toBe(accent);
+      }
     }
   });
 

From e6cb2cee36f68debefcb7dfa0cccd520209b866e Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 08:34:34 +0200
Subject: [PATCH 04/10] fix(ui): a gauge's percent rounds the way its figure
 rounds

The gauge clamped with Math.round while the figure above it rounds with the
module's own roundHalfUp. The two differ just under a half: a busy share of
0.49999999999999994 printed 1% and drew a 0 bar. No reading will ever be that
number, but the spec says the two round identically and a near-copy of the
canonical helper sat beside it.

The test's list now includes that float, so its title is true of every case it
runs and the pair of roundings is told apart by a named assertion.

Found by the code review.

Closes #569
---
 ui/src/views/load-model.test.ts | 4 +++-
 ui/src/views/load-model.ts      | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/load-model.test.ts b/ui/src/views/load-model.test.ts
index ccdb2247..9aa13c9e 100644
--- a/ui/src/views/load-model.test.ts
+++ b/ui/src/views/load-model.test.ts
@@ -73,7 +73,9 @@ describe("how full each figure is", () => {
   it("rounds a gauge's percent the way the figure above it does", () => {
     const shown = (percent: number) => Number(formatBusyPercent(percent).replace("%", ""));
 
-    for (const busyPercent of [34.4, 34.5, 0.5, 99.5]) {
+    // why: the last is the float just under a half, where the two roundings part company — the only
+    // input that tells this pair of roundings apart, so the title holds for every case here.
+    for (const busyPercent of [34.4, 34.5, 0.5, 99.5, 0.49999999999999994]) {
       const cpu = { busyPercent, cores: 10, limited: false };
 
       expect(loadGauges({ ...FULL, cpu }).cpu).toBe(shown(busyPercent));
diff --git a/ui/src/views/load-model.ts b/ui/src/views/load-model.ts
index a5507d8b..7220fc0b 100644
--- a/ui/src/views/load-model.ts
+++ b/ui/src/views/load-model.ts
@@ -48,7 +48,9 @@ export function loadGauges(load: WorkerLoad): LoadGauges {
 }
 
 function clampPercent(percent: number): number {
-  return Math.round(Math.min(100, Math.max(0, percent)));
+  // why: the same round as the figures above the gauge, not Math.round — the two differ just under
+  // a half, where the text would say 1% and the bar would draw 0.
+  return roundHalfUp(Math.min(100, Math.max(0, percent)), 0);
 }
 
 function usedPercent(available: number, total: number): number | undefined {

From 41a0395cd8d4d3506210c28eae554290d0fdd73f Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 08:34:41 +0200
Subject: [PATCH 05/10] test(ui): name the zero-total figure's case as its own
 claim
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One test was titled for a figure that says Unavailable and also carried a
Memory row that says "12.0 GiB of 0 B available" — a figure shown with its
number and no gauge, which is a different promise and was named by no title.
It now has its own, and asserts the number survives as well as the bar's
absence.

Found by the code review.

Closes #569
---
 ui/src/views/worker-detail.test.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/src/views/worker-detail.test.tsx b/ui/src/views/worker-detail.test.tsx
index 4f37d37c..ed68ed70 100644
--- a/ui/src/views/worker-detail.test.tsx
+++ b/ui/src/views/worker-detail.test.tsx
@@ -587,16 +587,24 @@ describe("the Load gauges", () => {
     const { cpu: _cpu, ...noCpu } = LOAD;
     const { memory: _memory, ...noMemory } = LOAD;
     const { disk: _disk, ...noDisk } = LOAD;
-    const zeroTotal = {
-      ...LOAD,
-      memory: { ...LOAD.memory, availableBytes: 12 * GIB, totalBytes: 0 },
-    };
 
     expect(row(panelOf({ ...RUNNING, load: noCpu }), "CPU")).toContain("Unavailable");
     expect(row(panelOf({ ...RUNNING, load: noCpu }), "CPU")).not.toContain("load-bar");
     expect(row(panelOf({ ...RUNNING, load: noMemory }), "Memory")).not.toContain("load-bar");
     expect(row(panelOf({ ...RUNNING, load: noDisk }), "Disk")).not.toContain("load-bar");
-    expect(row(panelOf({ ...RUNNING, load: zeroTotal }), "Memory")).not.toContain("load-bar");
+  });
+
+  it("a worker's detail prints a figure whose total is zero without a gauge", () => {
+    // why: a reading that cannot be divided has no percent to draw, but its number is still the
+    // worker's own and still belongs on the page.
+    const zeroTotal = {
+      ...LOAD,
+      memory: { ...LOAD.memory, availableBytes: 12 * GIB, totalBytes: 0 },
+    };
+    const panel = panelOf({ ...RUNNING, load: zeroTotal });
+
+    expect(row(panel, "Memory")).toContain("available");
+    expect(row(panel, "Memory")).not.toContain("load-bar");
   });
 
   it("a worker's detail colours the memory gauge with its pressure, and idle where the view has none", () => {

From c872e1e23f42f2d5ec08d684c6e61d2fad33e51a Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 08:36:25 +0200
Subject: [PATCH 06/10] test(e2e): the paint test reaches every gauge colour,
 in both themes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only macOS reports a memory pressure, so a worker in CI — Linux — can only ever
paint the idle gauge. The colour test closed that with a probe: it built a
load-bar in the page and asked the stylesheet what each tone class would paint.
That proved the stylesheet's rule, but never passed through the component, so
the tone map it leans on was proven only in the unit seam.

This answers the page's own read of /v1/workers with memory.pressure set to each
of the four states and every other field left as the daemon sent it, so the real
component paints each tone, in both themes, and no tone rule — or accent
substitute — survives being changed. Verified: a dark-only swap of one tone's
colour, and painting another with the accent, each fail a named assertion.

Two smaller things from the same review. The fill-width test waited for the
reading's own stamp to hold still, which moves between two reads even when the
levels do not, so it retried for nothing; it now compares the levels themselves.
And the transition test's title promised a slide to a new level, which its body
never sees — it reads the stylesheet's transition back, so that is what it says.

Closes #569
---
 e2e/console/workers.spec.ts | 120 ++++++++++++++++++++++++------------
 1 file changed, 81 insertions(+), 39 deletions(-)

diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index cc2ea23a..ba357a96 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -1,4 +1,4 @@
-import type { Locator, Page } from "@playwright/test";
+import type { Locator, Page, Route } from "@playwright/test";
 
 import { waitFor } from "../helpers/wait.js";
 import {
@@ -39,6 +39,12 @@ interface WorkerView {
   };
 }
 
+// why: the test rewrites one field of this route's own answer, so it names the one path it touches
+// rather than the whole view; everything else passes through as the daemon sent it.
+interface WorkerPayload {
+  load?: { memory?: { pressure?: string } } | undefined;
+}
+
 interface Status {
   readonly devices: readonly {
     readonly id: string;
@@ -515,7 +521,12 @@ test.describe("the workers views", () => {
         if (wanted === undefined) return false;
         const painted = await paintedGauges(panel);
         const now = (await workerList(daemon))[0]?.load;
-        if (JSON.stringify(before) !== JSON.stringify(now)) return false;
+        // why: what has to hold still is the level, not the reading — a fresh sample that rounds to
+        // the same percents is the same pair of figures and bars. The reading's own stamp moves
+        // between two reads even when nothing in it does, so comparing it here only ever costs
+        // retries.
+        const since = now === undefined ? undefined : gaugePercents(now);
+        if (since === undefined || JSON.stringify(wanted) !== JSON.stringify(since)) return false;
         if (painted.some((bar) => bar.sliding)) return false;
         return fillsMatch(painted, wanted);
       },
@@ -559,7 +570,7 @@ test.describe("the workers views", () => {
     expect(geometry.left).toBeCloseTo(0, 0);
   });
 
-  test("a load gauge's fill takes its colour from the stylesheet and never the accent, in both themes", async ({
+  test("each memory pressure paints its gauge in that pressure's colour, and never the accent, in both themes", async ({
     daemon,
     page,
   }) => {
@@ -567,57 +578,88 @@ test.describe("the workers views", () => {
     await openConsole(page, daemon);
     const shown = card(page, host?.id ?? "");
     await expect(fact(shown, "Load")).toHaveText(/^CPU .*memory .*disk /);
+    // why: only macOS reports a memory pressure, so a Linux lane can never see a warn or critical
+    // gauge from a live reading. This answers the page's own read of the worker list with one field
+    // of the reading changed and every other field left as the daemon sent it, so what is painted
+    // is the real component's doing. The list is read again per request, so the reading stays as
+    // fresh as the daemon's own.
+    let pressure: string | undefined;
+    await page.route(
+      (url) => url.pathname === "/v1/workers",
+      async (route: Route) => {
+        const response = await route.fetch();
+        const listed = (await response.json()) as { workers: WorkerPayload[] };
+        for (const worker of listed.workers) {
+          const memory = worker.load?.memory;
+          if (memory === undefined) continue;
+          if (pressure === undefined) delete memory.pressure;
+          else memory.pressure = pressure;
+        }
+        await route.fulfill({ json: listed, response });
+      },
+    );
     await shown.getByRole("link", { name: host?.id ?? "" }).click();
+
     const panel = page.getByRole("region", { name: "Load", exact: true });
     await expect(panel.locator(".load-bar").first()).toBeVisible();
-
-    for (const colorScheme of ["light", "dark"] as const) {
-      await page.emulateMedia({ colorScheme });
-      const { accent, tones } = await readStatuses(page);
-      const fills = await panel.locator(".load-bar").evaluateAll((bars) =>
+    const memory = fact(panel, "Memory");
+    const paintedFills = () =>
+      panel.locator(".load-bar").evaluateAll((bars) =>
         bars.map((bar) => ({
           tone: /load-bar-(\w+)/.exec(bar.className)?.[1] ?? "",
           colour: getComputedStyle(bar.firstElementChild as HTMLElement).backgroundColor,
         })),
       );
-      // why: CI is Linux, and only macOS reports a pressure, so a live worker can only ever paint
-      // the idle tone here. These ask the stylesheet what the other three would paint, so a tone
-      // rule cannot be deleted with the suite green; they check the colour rule only.
-      const drawn = await page.evaluate(() => {
-        const probe = document.createElement("span");
-        probe.className = "load-bar";
-        const seen = ["ok", "warn", "error", "idle"].map((tone) => {
-          probe.className = `load-bar load-bar-${tone}`;
-          const fill = document.createElement("span");
-          fill.className = "load-bar-fill";
-          probe.append(fill);
-          document.body.append(probe);
-          const colour = getComputedStyle(fill).backgroundColor;
-          probe.remove();
-          return colour;
-        });
-        return seen;
+    // why: the page polls every second, so each level shows within about that. The memory gauge is
+    // identified by its own row, so a tone read here cannot be a leftover of the last level.
+    const memoryFill = () =>
+      memory.evaluate((cell) => {
+        const bar = cell.querySelector(".load-bar") as HTMLElement;
+        return {
+          tone: /load-bar-(\w+)/.exec(bar.className)?.[1] ?? "",
+          colour: getComputedStyle(bar.firstElementChild as HTMLElement).backgroundColor,
+        };
       });
 
-      expect(fills.length).toBeGreaterThan(0);
-      for (const fill of fills) {
-        const context = `${fill.tone} gauge in ${colorScheme}`;
-        expect(fill.tone, context).not.toBe("");
-        expect(fill.colour, context).toBe(
-          tones[TONES.indexOf(fill.tone as (typeof TONES)[number])],
-        );
-        expect(fill.colour, context).not.toBe(accent);
-      }
+    // why: the four levels are the four tone rules, so each one is seen in each theme by the real
+    // component; a rule deleted, swapped or given the accent fails a named assertion here.
+    for (const colorScheme of ["light", "dark"] as const) {
+      await page.emulateMedia({ colorScheme });
+      const { accent, tones } = await readStatuses(page);
 
-      for (const [index, tone] of TONES.entries()) {
-        const context = `${tone} gauge rule in ${colorScheme}`;
-        expect(drawn[index], context).toBe(tones[index]);
-        expect(drawn[index], context).not.toBe(accent);
+      for (const [level, tone] of [
+        ["normal", "ok"],
+        ["warn", "warn"],
+        ["critical", "error"],
+        [undefined, "idle"],
+      ] as const) {
+        pressure = level;
+        const want = tones[TONES.indexOf(tone)];
+        await expect
+          .poll(() => memoryFill(), {
+            timeout: 10_000,
+            message: `the ${level ?? "absent"} pressure to paint the ${tone} gauge in ${colorScheme}`,
+          })
+          .toEqual({ tone, colour: want });
+        expect(want, `the ${tone} gauge in ${colorScheme}`).not.toBe(accent);
+
+        // why: every gauge on the panel, not only the one driven above: each must show the colour of
+        // the tone class it carries, so none is painted by a stray inline colour or by the accent.
+        const fills = await paintedFills();
+        expect(fills.length).toBeGreaterThan(1);
+        for (const fill of fills) {
+          const context = `${fill.tone} gauge in ${colorScheme}`;
+          expect(fill.tone, context).not.toBe("");
+          expect(fill.colour, context).toBe(
+            tones[TONES.indexOf(fill.tone as (typeof TONES)[number])],
+          );
+          expect(fill.colour, context).not.toBe(accent);
+        }
       }
     }
   });
 
-  test("a load gauge's fill slides to a new level over --duration, and not at all under reduced motion", async ({
+  test("a load gauge's fill transitions its width over the document's duration token, and over none under reduced motion", async ({
     browserName,
     daemon,
     page,

From ddccf214d46a8c3c56b6a3630716ae1e92683261 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 08:36:33 +0200
Subject: [PATCH 07/10] docs: the gauge's docs stop claiming what the panel
 contradicts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CONSOLE.md said CPU and disk stay neutral because no CPU or disk "limit" is
reported, on a page that prints "(limit)" beside the CPU figure whenever the
worker limits itself — a container's user saw both at once. The console invents
no thresholds, so the word is threshold; the doc says so, and says what a
"(limit)" is instead. It also now says the memory bar is neutral where no
pressure is reported, which is every Linux worker.

DESIGN.md's new entry opened "A figure of how full something is carries a bar",
which is binding for later console work and makes the worker card's Load and
Capacity rows wrong as they stand — and a card gauge is this task's stated
non-goal. It now describes the panel it was written for and says so.

Found by the code review.

Closes #569
---
 docs/CONSOLE.md         |  6 ++++--
 docs/internal/DESIGN.md | 20 +++++++++++---------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/CONSOLE.md b/docs/CONSOLE.md
index 5d653883..bf16ab0e 100644
--- a/docs/CONSOLE.md
+++ b/docs/CONSOLE.md
@@ -173,8 +173,10 @@ Select a worker to open its page. It adds:
   `critical`, left out where the system does not report it), and disk free of
   total. CPU, memory and disk each have a bar under the figure showing how full
   it is, for scanning at a glance: the memory bar takes the colour of its
-  pressure, and the other two stay neutral because the worker reports no CPU or
-  disk limit for the console to judge them against. A part the worker could not
+  pressure, and is itself neutral where no pressure is reported. The other two
+  stay neutral because the worker sends no CPU or disk threshold for the console
+  to judge them against — a `(limit)` beside a figure is the worker's own limit
+  on that figure, not a level to be judged against. A part the worker could not
   read says `Unavailable`, and has no bar. **Read** says how
   long ago the reading was taken, and it ticks up until the next one. A
   worker that sent no load says "Not reported.", and a disconnected one "No
diff --git a/docs/internal/DESIGN.md b/docs/internal/DESIGN.md
index d2ac412e..905e9f6b 100644
--- a/docs/internal/DESIGN.md
+++ b/docs/internal/DESIGN.md
@@ -179,15 +179,17 @@ scale; never a value between.
   nothing is visible only in the picture. A chart can be focused, and the
   arrow keys step through it. Its focus ring goes round the whole chart, for
   keyboard focus only: a click on a chart draws none.
-- **Load gauges.** A figure of how full something is carries a bar in a line of
-  its own under it: 8px high, `--field` track, `max-width: 20rem`, square, and
-  never the accent. Its fill takes a status colour by class; its level arrives
-  inline, which the Content-Security-Policy allows for a style attribute. A gauge
-  is never the only place its number is, so it carries no accessible name and
-  takes no focus — the figure above it is the text. Colour is a second signal
-  here too: a gauge shades a level the console has a word for and nothing else,
-  so CPU and disk stay `--status-idle` until the worker sends a limit they can be
-  judged against.
+- **Load gauges.** On a worker's page, each of the Load panel's CPU, memory and
+  disk figures carries a bar in a line of its own under it: 8px high, `--field`
+  track, `max-width: 20rem`, square, and never the accent. Its fill takes a
+  status colour by class; its level arrives inline, which the
+  Content-Security-Policy allows for a style attribute. A gauge is never the only
+  place its number is, so it carries no accessible name and takes no focus — the
+  figure above it is the text. Colour is a second signal here too: a gauge shades
+  a level the console has a word for and nothing else, so CPU and disk stay
+  `--status-idle` until the worker sends a threshold they can be judged against.
+  A gauge belongs to this panel alone: the worker's card prints the same load as
+  one line of text, and charts are drawn by their own rule below.
 
 ## Layout
 

From 1bad5103aa05bfeb624933d310600a7734a822a0 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 08:41:41 +0200
Subject: [PATCH 08/10] test(e2e): keep the eight paint rounds inside the
 lane's test timeout

Closes #569
---
 e2e/console/workers.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/console/workers.spec.ts b/e2e/console/workers.spec.ts
index ba357a96..7dc87dc5 100644
--- a/e2e/console/workers.spec.ts
+++ b/e2e/console/workers.spec.ts
@@ -637,7 +637,7 @@ test.describe("the workers views", () => {
         const want = tones[TONES.indexOf(tone)];
         await expect
           .poll(() => memoryFill(), {
-            timeout: 10_000,
+            timeout: 5_000,
             message: `the ${level ?? "absent"} pressure to paint the ${tone} gauge in ${colorScheme}`,
           })
           .toEqual({ tone, colour: want });

From cc1df93bb815ec3426c6a889add0d94bee11fb91 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 10:16:17 +0200
Subject: [PATCH 09/10] fix(ui): say why an inline gauge level survives the
 CSP, and where the charts rule is
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The review probed the claim rather than reading it: a page served with
`style-src 'self'` drops the whole style attribute, so the custom property
arrives empty, while the same level set through the CSSOM resolves. The gauge
works because React writes styles through the CSSOM — which is what ADR 0011
says — and not because style attributes sit outside `style-src`, which is what
the comment and DESIGN.md both said. The distinction is not academic here: the
unit seam renders the gauge with `renderToStaticMarkup`, and that markup is
exactly what the policy refuses, so only this component's own render paints a
bar. Both now say the reason, and the guide adds the consequence the reviewer
named: a gauge is drawn by the console's code, never by server-rendered output.

The gauge entry also pointed at the charts rule "below" it. That rule is the
bullet ten lines above, so the pointer sent a reader away from the answer.
---
 docs/internal/DESIGN.md        | 19 +++++++++++--------
 ui/src/views/worker-detail.tsx |  6 ++++--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/docs/internal/DESIGN.md b/docs/internal/DESIGN.md
index 905e9f6b..2f48df98 100644
--- a/docs/internal/DESIGN.md
+++ b/docs/internal/DESIGN.md
@@ -182,14 +182,17 @@ scale; never a value between.
 - **Load gauges.** On a worker's page, each of the Load panel's CPU, memory and
   disk figures carries a bar in a line of its own under it: 8px high, `--field`
   track, `max-width: 20rem`, square, and never the accent. Its fill takes a
-  status colour by class; its level arrives inline, which the
-  Content-Security-Policy allows for a style attribute. A gauge is never the only
-  place its number is, so it carries no accessible name and takes no focus — the
-  figure above it is the text. Colour is a second signal here too: a gauge shades
-  a level the console has a word for and nothing else, so CPU and disk stay
-  `--status-idle` until the worker sends a threshold they can be judged against.
-  A gauge belongs to this panel alone: the worker's card prints the same load as
-  one line of text, and charts are drawn by their own rule below.
+  status colour by class; its level arrives inline, which survives
+  `style-src 'self'` only because React writes styles through the CSSOM — the
+  same level written into markup is refused by the policy (ADR 0011), so a gauge
+  is drawn by the console's own code and never by server-rendered output. A gauge
+  is never the only place its number is, so it carries no accessible name and
+  takes no focus — the figure above it is the text. Colour is a second signal
+  here too: a gauge shades a level the console has a word for and nothing else,
+  so CPU and disk stay `--status-idle` until the worker sends a threshold they
+  can be judged against. A gauge belongs to this panel alone: the worker's card
+  prints the same load as one line of text, and charts are drawn by their own
+  rule above.
 
 ## Layout
 
diff --git a/ui/src/views/worker-detail.tsx b/ui/src/views/worker-detail.tsx
index 79f401cf..5eaaf855 100644
--- a/ui/src/views/worker-detail.tsx
+++ b/ui/src/views/worker-detail.tsx
@@ -416,8 +416,10 @@ function FigureRow<Part extends object>(props: {
 
 // why: a gauge is never the only place its number is -- the figure above it is the text, so it
 // carries no accessible name of its own (`aria-hidden`) and takes no focus. Its colour comes from
-// the stylesheet by class, so both themes apply; only its level arrives inline, which the
-// Content-Security-Policy allows (`style-src` governs style elements, not style attributes).
+// the stylesheet by class, so both themes apply. Only its level arrives inline, and that survives
+// the daemon's `style-src 'self'` because React writes styles through the CSSOM, which the policy
+// does not govern -- the same level in markup is refused and the bar comes out empty, as ADR 0011
+// notes. So a gauge is drawn by this component and never by server-rendered markup.
 function LoadGauge(props: { readonly percent: number; readonly tone: Tone }) {
   const { percent, tone } = props;
   return (

From 27f96fd26079e1aa7ebf21c91e0d8f9ff284c633 Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymon@chmal.it>
Date: Thu, 15 Oct 2026 10:26:07 +0200
Subject: [PATCH 10/10] docs(ui): ADR 0011 allows the style prop, and says
 nothing about style attributes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fix that replaced one unsupported CSP claim wrapped the replacement in
another: it cited ADR 0011 for markup style attributes being refused and the
bar coming out empty. The ADR says neither. It states one thing — React's
`style` prop is allowed because it creates no `<style>` element — and is silent
on attributes, so citing it for what the policy does to markup puts a claim in
the ADR that its authors never wrote. The attribution now stops where the ADR
does, and the comment says outright not to read the policy's behaviour into it.

What the probe did establish stays: a level written into a style attribute is
refused by `style-src 'self'` and the bar comes out empty; the same level set
through the CSSOM resolves, because the policy does not reach there. That is
observed here, not sourced from the ADR, and the comment now keeps the two
apart. Same correction in the design guide's gauge entry.
---
 docs/internal/DESIGN.md        | 10 ++++++----
 ui/src/views/worker-detail.tsx | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/docs/internal/DESIGN.md b/docs/internal/DESIGN.md
index 2f48df98..9a25e544 100644
--- a/docs/internal/DESIGN.md
+++ b/docs/internal/DESIGN.md
@@ -182,10 +182,12 @@ scale; never a value between.
 - **Load gauges.** On a worker's page, each of the Load panel's CPU, memory and
   disk figures carries a bar in a line of its own under it: 8px high, `--field`
   track, `max-width: 20rem`, square, and never the accent. Its fill takes a
-  status colour by class; its level arrives inline, which survives
-  `style-src 'self'` only because React writes styles through the CSSOM — the
-  same level written into markup is refused by the policy (ADR 0011), so a gauge
-  is drawn by the console's own code and never by server-rendered output. A gauge
+  status colour by class; its level arrives inline: `style-src 'self'` refuses a
+  style attribute in markup, and the level arrives anyway because React writes
+  styles through the CSSOM, where the policy does not reach. ADR 0011 allows the
+  `style` prop because it creates no `<style>` element — it says nothing about
+  the attribute. So a
+  gauge is drawn by the console's own code and never by server-rendered output. A gauge
   is never the only place its number is, so it carries no accessible name and
   takes no focus — the figure above it is the text. Colour is a second signal
   here too: a gauge shades a level the console has a word for and nothing else,
diff --git a/ui/src/views/worker-detail.tsx b/ui/src/views/worker-detail.tsx
index 5eaaf855..46eb0856 100644
--- a/ui/src/views/worker-detail.tsx
+++ b/ui/src/views/worker-detail.tsx
@@ -416,10 +416,12 @@ function FigureRow<Part extends object>(props: {
 
 // why: a gauge is never the only place its number is -- the figure above it is the text, so it
 // carries no accessible name of its own (`aria-hidden`) and takes no focus. Its colour comes from
-// the stylesheet by class, so both themes apply. Only its level arrives inline, and that survives
-// the daemon's `style-src 'self'` because React writes styles through the CSSOM, which the policy
-// does not govern -- the same level in markup is refused and the bar comes out empty, as ADR 0011
-// notes. So a gauge is drawn by this component and never by server-rendered markup.
+// the stylesheet by class, so both themes apply. Only its level arrives inline: `style-src 'self'`
+// refuses a style attribute written into markup, which would leave the bar empty, and the level
+// still arrives because React writes it through the CSSOM, where the policy does not reach. ADR
+// 0011 is what allows this prop at all (it creates no <style> element); it says nothing about the
+// attribute, so do not read this policy's behaviour into it. A gauge is drawn by this component,
+// never by server-rendered markup.
 function LoadGauge(props: { readonly percent: number; readonly tone: Tone }) {
   const { percent, tone } = props;
   return (