diff --git a/docs/CONSOLE.md b/docs/CONSOLE.md
index e3cf328c..bf16ab0e 100644
--- a/docs/CONSOLE.md
+++ b/docs/CONSOLE.md
@@ -171,7 +171,13 @@ 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 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
   reading while disconnected."
diff --git a/docs/internal/DESIGN.md b/docs/internal/DESIGN.md
index 6f4d0e6c..9a25e544 100644
--- a/docs/internal/DESIGN.md
+++ b/docs/internal/DESIGN.md
@@ -179,6 +179,22 @@ 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.** 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: `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,
+  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
 
@@ -208,7 +224,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..7dc87dc5 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 {
@@ -31,6 +31,18 @@ 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 };
+  };
+}
+
+// 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 {
@@ -120,6 +132,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 }) });
@@ -444,6 +500,207 @@ 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: 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;
+        const wanted = before === undefined ? undefined : gaugePercents(before);
+        if (wanted === undefined) return false;
+        const painted = await paintedGauges(panel);
+        const now = (await workerList(daemon))[0]?.load;
+        // 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);
+      },
+      { 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("each memory pressure paints its gauge in that pressure's colour, 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 /);
+    // 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();
+    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: 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,
+        };
+      });
+
+    // 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 [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: 5_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 transitions its width over the document's duration token, and over none 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..9aa13c9e 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,63 @@ 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("%", ""));
+
+    // 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));
+    }
+  });
+
+  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..7220fc0b 100644
--- a/ui/src/views/load-model.ts
+++ b/ui/src/views/load-model.ts
@@ -30,6 +30,34 @@ 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 {
+  // 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 {
+  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..ed68ed70 100644
--- a/ui/src/views/worker-detail.test.tsx
+++ b/ui/src/views/worker-detail.test.tsx
@@ -557,3 +557,106 @@ 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;
+
+    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");
+  });
+
+  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", () => {
+    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..46eb0856 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,34 +331,36 @@ 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>
-        <dt>CPU</dt>
-        <dd>
-          {cpu === undefined ? (
-            "Unavailable"
-          ) : (
-            <>
-              {formatBusyPercent(cpu.busyPercent)} busy, {formatCores(cpu.cores)}
-              <Limit limited={cpu.limited} />
-            </>
-          )}
-        </dd>
-      </div>
-      <div>
-        <dt>Memory</dt>
-        <dd>
-          {memory === undefined ? (
-            "Unavailable"
-          ) : (
-            <>
-              {formatBytes(memory.availableBytes)} of {formatBytes(memory.totalBytes)} available
-              <Limit limited={memory.limited} />
-            </>
-          )}
-        </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>
@@ -372,14 +375,12 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
           </dd>
         </div>
       )}
-      <div>
-        <dt>Disk</dt>
-        <dd>
-          {disk === undefined
-            ? "Unavailable"
-            : `${formatBytes(disk.freeBytes)} of ${formatBytes(disk.totalBytes)} free`}
-        </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>
@@ -387,3 +388,49 @@ function LoadFacts({ now, worker }: { readonly worker: WorkerView; readonly now:
     </dl>
   );
 }
+
+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, label, part, tone = "idle" } = props;
+  return (
+    <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>
+  );
+}
+
+// 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: `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 (
+    <span
+      className={`load-bar load-bar-${tone}`}
+      aria-hidden="true"
+      style={{ "--load-bar": `${percent}%` } as CSSProperties}
+    >
+      <span className="load-bar-fill" />
+    </span>
+  );
+}