From 7209ab8fdc01fb87d5b975a03b36abb739b6b3ad Mon Sep 17 00:00:00 2001
From: Don Kackman <dkackman@gmail.com>
Date: Mon, 7 Sep 2026 20:46:41 -0500
Subject: [PATCH] Refactor UI components for improved styling and functionality

- Updated JobPage to enhance media display with improved link and image handling.
- Enhanced JobsPage with visual indicators for running jobs and refined layout.
- Modified ModelsPage to improve button styling and added last used indicators.
- Improved PromptsPage layout and added directory display for better context.
- Refined ServerPage styling for consistency and clarity.
- Enhanced WorkflowPage with better proof display and improved JSON toggle functionality.
- Updated WorkflowsPage to improve layout, filtering, and card display for workflows.
- Added tests for WorkflowsPage to ensure correct filtering and display of workflow data.
- Standardized font usage across components for consistency.
---
 ui/CLAUDE.md                                |  54 +++
 ui/e2e/chrome.spec.ts                       |  28 +-
 ui/e2e/smoke.spec.ts                        |  17 +-
 ui/src/App.svelte                           | 363 +++++++++-------
 ui/src/app.css                              | 327 +++++++++++----
 ui/src/lib/FolderGroups.svelte              |  12 +-
 ui/src/lib/KeyboardHelp.svelte              |   2 +-
 ui/src/lib/StatusPopover.svelte             |   3 +-
 ui/src/lib/editor/FlowView.svelte           |  17 +-
 ui/src/lib/editor/QuantizationEditor.svelte |   2 +-
 ui/src/lib/editor/StepEditor.svelte         |  13 +-
 ui/src/lib/pages/EditorPage.svelte          |   7 +-
 ui/src/lib/pages/GalleryPage.svelte         |  56 ++-
 ui/src/lib/pages/JobPage.svelte             |  43 +-
 ui/src/lib/pages/JobsPage.svelte            |  31 +-
 ui/src/lib/pages/ModelsPage.svelte          |  25 +-
 ui/src/lib/pages/PromptsPage.svelte         |  28 +-
 ui/src/lib/pages/ServerPage.svelte          |   6 +-
 ui/src/lib/pages/WorkflowPage.svelte        | 211 +++++++---
 ui/src/lib/pages/WorkflowsPage.svelte       | 441 +++++++++++++-------
 ui/src/lib/pages/WorkflowsPage.test.ts      |  28 +-
 ui/src/lib/schema/SchemaNode.svelte         |   2 +-
 22 files changed, 1165 insertions(+), 551 deletions(-)

diff --git a/ui/CLAUDE.md b/ui/CLAUDE.md
index 8198cb39..920679a4 100644
--- a/ui/CLAUDE.md
+++ b/ui/CLAUDE.md
@@ -21,4 +21,58 @@ job's files load from where they were written.
 `main.ts` before the first request); a page refetches on a switch by reading
 `workspace.current` inside its load effect.
 
+## Design system
+
+The look is "contact sheet", and it rests on two rules that `src/app.css`
+encodes. Follow them when adding UI.
+
+**Colour means machine state.** The greys are deliberately achromatic
+(equal-RGB, not blue-tinted slate) because this app's output is pictures and
+any chroma in the surrounding surfaces biases how a generated colour reads.
+So the chrome carries no accent: interactive elements are ink (`--accent` is
+the *interactive ink*, a near-black in light and a near-white in dark; the
+primary button is a solid ink fill, links are ink with an underline).
+`--live`, a darkroom safelight amber, is the one signal colour and marks only
+what is running, where keyboard focus is, and when VRAM is under pressure -
+never decoration. `--good` / `--bad` stay state colours too. Every token pair
+passes WCAG AA in both themes; keep it that way.
+
+**Mono is what the engine reads.** `--font-mono` for anything the engine
+resolves literally - a workflow or prompt name, a `variable:` / `asset:` /
+`prompt:` reference, a path, a seed, a run id, a measurement (add `.num` for
+tabular figures). `--font-sans` for anything written for a person -
+descriptions, hints, control labels. Headings are mono because they name
+things the engine resolves, and they are sentence case: no ALL-CAPS eyebrow
+labels and no tracked-out letter-spacing on small labels.
+
+Type scale is `--t-xs` .. `--t-xl` off a 15px base; radius says what a thing
+is (`--radius-frame` a picture, `--radius-2` a surface, 999px a chip) rather
+than being one global value. One filled button per view: the thing you came
+to do. `.quiet` is outlined, `.bare` is text-only.
+
+**Show the proof.** A list of things that produce images shows the images.
+The workflows catalog and the workflow page both read `api.gallery()` and
+match a workflow's name to an output entry's `folder` - a run writes to
+`<outputs>/<identity>/<run id>/` and the gallery reports that identity with
+the run id already stripped, so the match is direct equality. Proofs load
+separately from the listing so the catalog never waits on them, and a
+workflow that has never run gets no frame at all rather than a grey
+placeholder (a fresh workspace would otherwise be a wall of empty plates).
+Within a folder, workflows that have produced something sort first.
+
+Every picture in the app sits in the global `.frame` (app.css): the media
+fills it edge to edge, with no inner padding and no rounding of its own,
+which is what makes it read as a proof on a sheet rather than as another
+rounded card. Gallery tiles, a workflow's recent outputs and a job's results
+all use it; the catalog card's `.cardframe` is the one variant, because it
+is a banner inside a card rather than a free-standing frame. Set the size on
+the frame - the media inside always fills it.
+
+Where `--live` appears, and nowhere else: the header's running link and VRAM
+pressure, a running job's row and status chip, the job page's progress bar
+and current step, the flow view's active step, a model download in flight,
+and the focus ring. Resting meters (free disk, VRAM under pressure's
+threshold) stay `--muted`; selection is the user's state, not the machine's,
+so it reads as a heavier ink edge instead.
+
 See docs/SERVER.md.
diff --git a/ui/e2e/chrome.spec.ts b/ui/e2e/chrome.spec.ts
index e568251b..bcc43b03 100644
--- a/ui/e2e/chrome.spec.ts
+++ b/ui/e2e/chrome.spec.ts
@@ -1,20 +1,21 @@
 import { expect, test } from '@playwright/test'
 
-test('the status strip carries worker state and docs, off the nav row', async ({
+test('worker state and docs sit on the nav row, in one header row', async ({
   page,
 }) => {
   await page.goto('/')
-  const strip = page.locator('header .statusbar')
-  await expect(strip).toBeVisible()
-  // worker state renders in the strip (fixture worker is idle at start)
-  await expect(strip).toContainText(/idle|GB/)
-  // docs links moved down out of the nav row
+  // One header row: the state the old second row carried now sits at the
+  // right of the nav, so no page spends a strip on the word "idle"
+  const row = page.locator('header .navrow')
+  await expect(row).toHaveCount(1)
+  const state = page.locator('header .state')
+  await expect(state).toBeVisible()
+  // worker state renders there (fixture worker is idle at start)
+  await expect(state).toContainText(/idle|GB/)
   await expect(
-    strip.getByRole('link', { name: 'documentation on GitHub' }),
-  ).toBeVisible()
-  await expect(
-    page.locator('header .navrow').getByRole('link', { name: 'Workflows' }),
+    state.getByRole('link', { name: 'documentation on GitHub' }),
   ).toBeVisible()
+  await expect(row.getByRole('link', { name: 'Workflows' })).toBeVisible()
 })
 
 test('? opens the shortcuts overlay; Escape closes it; typing ? in a field does not', async ({
@@ -85,8 +86,11 @@ test('the status popover traps focus and returns it to its trigger button', asyn
 
 test('tab order walks the nav row in reading order', async ({ page }) => {
   await page.goto('/')
-  // From the top of the document, Tab lands on the nav links in their
-  // visual order - the baseline "rational tab order" check on the chrome
+  // From the top of the document, Tab lands on the header's links in their
+  // visual order - the baseline "rational tab order" check on the chrome.
+  // The wordmark is the first stop: it is a link home.
+  await page.keyboard.press('Tab')
+  await expect(page.locator('header .brand')).toBeFocused()
   await page.keyboard.press('Tab')
   await expect(
     page.getByRole('link', { name: 'Workflows' }).first(),
diff --git a/ui/e2e/smoke.spec.ts b/ui/e2e/smoke.spec.ts
index 552d1f3e..7e331f79 100644
--- a/ui/e2e/smoke.spec.ts
+++ b/ui/e2e/smoke.spec.ts
@@ -14,18 +14,23 @@ test('workflow browser lists, describes and filters', async ({ page }) => {
   await expect(page.getByRole('link', { name: /^z-image / })).toHaveCount(0)
 })
 
-test('workflow page shows JSON and a run form', async ({ page }) => {
+test('workflow page leads with the run form and reveals JSON on request', async ({
+  page,
+}) => {
   await page.goto('/#/workflows/models/z-image')
   await expect(
     page.getByRole('heading', { name: 'models/z-image' }),
   ).toBeVisible()
-  // JSON is shown by default via Monaco
-  await expect(page.locator('.monaco-editor').first()).toBeVisible({
-    timeout: 20_000,
-  })
   // the variables form renders with defaults as placeholders
   await expect(page.getByLabel('num_inference_steps')).toBeVisible()
   await expect(page.getByRole('button', { name: /Run/ })).toBeEnabled()
+  // the definition is collapsed by default - this page is for setting
+  // variables and running, not for reading the file
+  await expect(page.locator('.monaco-editor')).toHaveCount(0)
+  await page.getByRole('button', { name: 'show JSON' }).click()
+  await expect(page.locator('.monaco-editor').first()).toBeVisible({
+    timeout: 20_000,
+  })
 })
 
 test('editor opens a workflow with introspected arguments', async ({
@@ -307,6 +312,8 @@ test('editor flags a dangling reference without asking the server', async ({
 test('the theme toggle re-themes an open Monaco editor', async ({ page }) => {
   // Playwright's default colour scheme is light, so "system" starts light
   await page.goto('/#/workflows/models/z-image')
+  // the definition is collapsed by default, so ask for it first
+  await page.getByRole('button', { name: 'show JSON' }).click()
   const editor = page.locator('.monaco-editor').first()
   await expect(editor).toBeVisible({ timeout: 20_000 })
   await expect(editor).toHaveClass(/\bvs\b/)
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 712152a4..05d64142 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -120,11 +120,19 @@
 
 <svelte:window onkeydown={onKeydown} />
 
+<!-- One row. The old second row spent ~30px of every page saying "idle";
+     the state it carries now sits at the right of the nav, where the
+     running job is a link to that job rather than a word. Primary
+     destinations (the daily work) are separated by a rule from the
+     reference pages, which are demoted but not hidden in a menu. -->
 <header>
   <div class="navrow">
-    <span class="brand">diffusers<span class="accent">-workflow</span></span>
+    <a class="brand plain" href="#/workflows"
+      >diffusers<span class="dim">-workflow</span></a
+    >
     <nav>
       <a
+        class="plain"
         href="#/workflows"
         class:active={route.parts[0] === 'workflows'}
         title="Workflows"
@@ -132,6 +140,7 @@
         <Layers size={15} /><span class="navlabel">Workflows</span>
       </a>
       <a
+        class="plain"
         href="#/prompts"
         class:active={route.parts[0] === 'prompts' ||
           route.parts[0] === 'prompt-edit'}
@@ -139,13 +148,16 @@
       >
         <MessageSquareText size={15} /><span class="navlabel">Prompts</span>
       </a>
-      <a href="#/jobs" class:active={route.parts[0] === 'jobs'} title="Jobs">
+      <a
+        class="plain"
+        href="#/jobs"
+        class:active={route.parts[0] === 'jobs'}
+        title="Jobs"
+      >
         <ListTodo size={15} /><span class="navlabel">Jobs</span>
       </a>
-      <a href="#/edit" class:active={route.parts[0] === 'edit'} title="Editor">
-        <SquarePen size={15} /><span class="navlabel">Editor</span>
-      </a>
       <a
+        class="plain"
         href="#/gallery"
         class:active={route.parts[0] === 'gallery'}
         title="Gallery"
@@ -153,6 +165,16 @@
         <Images size={15} /><span class="navlabel">Gallery</span>
       </a>
       <a
+        class="plain"
+        href="#/edit"
+        class:active={route.parts[0] === 'edit'}
+        title="Editor"
+      >
+        <SquarePen size={15} /><span class="navlabel">Editor</span>
+      </a>
+      <span class="navrule" aria-hidden="true"></span>
+      <a
+        class="plain second"
         href="#/models"
         class:active={route.parts[0] === 'models'}
         title="Models"
@@ -160,6 +182,7 @@
         <Database size={15} /><span class="navlabel">Models</span>
       </a>
       <a
+        class="plain second"
         href="#/schema"
         class:active={route.parts[0] === 'schema'}
         title="Schema"
@@ -167,6 +190,7 @@
         <ListTree size={15} /><span class="navlabel">Schema</span>
       </a>
       <a
+        class="plain second"
         href="#/server"
         class:active={route.parts[0] === 'server'}
         title="Server"
@@ -174,85 +198,102 @@
         <Server size={15} /><span class="navlabel">Server</span>
       </a>
     </nav>
-    <button
-      class="quiet icon themebtn"
-      onclick={(e) => {
-        e.stopPropagation()
-        tokenOpen = !tokenOpen
-      }}
-      title="API token"
-      aria-label="API token"
-      aria-expanded={tokenOpen}
-    >
-      <KeyRound size={15} />
-    </button>
-    <TokenPopover bind:open={tokenOpen} />
-    <button
-      class="quiet icon themebtn"
-      onclick={cycleTheme}
-      title="theme: {theme} - click to change"
-      aria-label="theme: {theme} - click to change"
-    >
-      {#if theme === 'light'}<Sun size={15} />{:else if theme === 'dark'}<Moon
-          size={15}
-        />{:else}<MonitorCog size={15} />{/if}
-    </button>
-  </div>
-  <div class="statusbar">
-    <button
-      class="statusbtn"
-      class:runningnow={currentJob !== null}
-      class:muted={currentJob === null}
-      onclick={(e) => {
-        e.stopPropagation()
-        statusOpen = !statusOpen
-      }}
-      title="server & worker status"
-      aria-label="server & worker status"
-      aria-expanded={statusOpen}
-    >
-      {#if currentJob}<span class="pulse-dot"></span>running{:else}idle{/if}
-    </button>
-    <StatusPopover bind:open={statusOpen} {health} {memory} />
-    <span class="flex"></span>
-    {#if memory?.info?.gpu_available}
-      <span class="vram muted">
-        {memory.info.gpu_device_name} · {gb(
-          memory.info.gpu_memory_allocated_mb ?? 0,
-        )} /
-        {gb(memory.info.gpu_memory_total_mb ?? 0)} GB
-      </span>
-    {/if}
-    {#if vramPct !== null}
-      <div class="meter" title="VRAM allocated">
-        <div
-          class="fill"
-          class:hot={vramPct > 75}
-          class:critical={vramPct > 92}
-          style:width={vramPct + '%'}
-        ></div>
-      </div>
-    {/if}
-    <a
-      class="helplink"
-      href="https://github.com/dkackman/diffusers-workflow#documentation"
-      target="_blank"
-      rel="noopener"
-      title="documentation on GitHub"
-      aria-label="documentation on GitHub"
-    >
-      <BookOpen size={14} />
-    </a>
-    <a
-      class="helplink"
-      href="/docs"
-      target="_blank"
-      rel="noopener"
-      title="interactive API reference (OpenAPI)"
-      aria-label="interactive API reference (OpenAPI)"
-    >
-      <Braces size={14} />
-    </a>
+
+    <div class="state">
+      {#if currentJob}
+        <!-- The one thing worth pinning to every page: what the GPU is
+             doing, and a way straight to it -->
+        <a class="plain live" href="#/jobs/{currentJob}" title="go to the job">
+          <span class="pulse-dot"></span>running
+        </a>
+      {/if}
+      {#if vramPct !== null}
+        <button
+          class="bare vram"
+          onclick={(e) => {
+            e.stopPropagation()
+            statusOpen = !statusOpen
+          }}
+          title={memory?.info?.gpu_device_name
+            ? `${memory.info.gpu_device_name} - ${gb(memory.info.gpu_memory_allocated_mb ?? 0)} of ${gb(memory.info.gpu_memory_total_mb ?? 0)} GB allocated`
+            : 'VRAM allocated'}
+          aria-label="server & worker status"
+          aria-expanded={statusOpen}
+        >
+          <span class="meter">
+            <span
+              class="fill"
+              class:hot={vramPct > 75}
+              class:critical={vramPct > 92}
+              style:width={vramPct + '%'}
+            ></span>
+          </span>
+          <span class="num vramtext"
+            >{gb(memory?.info?.gpu_memory_allocated_mb ?? 0)}/{gb(
+              memory?.info?.gpu_memory_total_mb ?? 0,
+            )} GB</span
+          >
+        </button>
+      {:else}
+        <button
+          class="bare"
+          class:muted={currentJob === null}
+          onclick={(e) => {
+            e.stopPropagation()
+            statusOpen = !statusOpen
+          }}
+          title="server & worker status"
+          aria-label="server & worker status"
+          aria-expanded={statusOpen}
+        >
+          {currentJob ? 'status' : 'idle'}
+        </button>
+      {/if}
+      <StatusPopover bind:open={statusOpen} {health} {memory} />
+      <button
+        class="bare icon"
+        onclick={(e) => {
+          e.stopPropagation()
+          tokenOpen = !tokenOpen
+        }}
+        title="API token"
+        aria-label="API token"
+        aria-expanded={tokenOpen}
+      >
+        <KeyRound size={15} />
+      </button>
+      <TokenPopover bind:open={tokenOpen} />
+      <button
+        class="bare icon"
+        onclick={cycleTheme}
+        title="theme: {theme} - click to change"
+        aria-label="theme: {theme} - click to change"
+      >
+        {#if theme === 'light'}<Sun size={15} />{:else if theme === 'dark'}<Moon
+            size={15}
+          />{:else}<MonitorCog size={15} />{/if}
+      </button>
+      <a
+        class="plain helplink"
+        href="https://github.com/dkackman/diffusers-workflow#documentation"
+        target="_blank"
+        rel="noopener"
+        title="documentation on GitHub"
+        aria-label="documentation on GitHub"
+      >
+        <BookOpen size={15} />
+      </a>
+      <a
+        class="plain helplink"
+        href="/docs"
+        target="_blank"
+        rel="noopener"
+        title="interactive API reference (OpenAPI)"
+        aria-label="interactive API reference (OpenAPI)"
+      >
+        <Braces size={15} />
+      </a>
+    </div>
   </div>
 </header>
 
@@ -301,117 +342,126 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 0.5rem 1.5rem;
-    padding: 0.7rem 1.2rem 0.5rem;
-  }
-  .statusbar {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 0.6rem 1rem;
-    padding: 0.25rem 1.2rem;
-    border-top: 1px solid var(--line);
-    font-size: 0.8rem;
-    min-height: 1.6rem;
-  }
-  .statusbtn {
-    background: none;
-    border: 0;
-    padding: 0.1rem 0.4rem;
-    margin-left: -0.4rem;
-    font-size: 0.8rem;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    border-radius: var(--radius-1);
-  }
-  .statusbtn:hover {
-    background: var(--panel-2);
-    color: var(--ink);
-    filter: none;
-  }
-  .statusbar .flex {
-    flex: 1;
+    gap: 0.5rem 1.4rem;
+    padding: 0.55rem 1.2rem;
   }
   .brand {
+    font-family: var(--font-mono);
     font-weight: 700;
-    font-size: 1rem;
+    font-size: 0.95rem;
+    letter-spacing: -0.02em;
+    color: var(--ink);
   }
-  .accent {
-    color: var(--accent);
+  .brand .dim {
+    color: var(--muted);
+    font-weight: 500;
   }
   nav {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem 1.1rem;
+    align-items: center;
+    gap: 0.4rem 1.05rem;
     flex: 1;
   }
+  /* Separates the daily work from the reference pages without hiding the
+     reference pages behind a menu */
+  .navrule {
+    width: 1px;
+    align-self: stretch;
+    margin: 0.1rem 0;
+    background: var(--line);
+  }
   nav a {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     color: var(--muted);
+    font-size: var(--t-sm);
     font-weight: 600;
-    padding: 0.2rem 0;
+    padding: 0.15rem 0;
     border-bottom: 2px solid transparent;
+    white-space: nowrap;
+  }
+  nav a.second {
+    font-weight: 500;
   }
   nav a:hover {
     color: var(--ink);
   }
   nav a.active {
-    color: var(--accent);
-    border-bottom-color: var(--accent);
+    color: var(--ink);
+    border-bottom-color: var(--ink);
   }
-  .helplink {
-    display: inline-flex;
+  .state {
+    position: relative;
+    display: flex;
     align-items: center;
-    color: var(--muted);
-    padding: 0.2rem;
+    gap: 0.3rem;
+    font-size: var(--t-sm);
   }
-  .helplink:hover {
-    color: var(--ink);
+  .state :global(button) {
+    padding: 0.25rem 0.45rem;
+  }
+  .state :global(button.icon) {
+    display: inline-flex;
   }
-  .runningnow {
+  /* The signal colour, earning its keep: the GPU is busy */
+  .live {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
-    color: var(--accent);
+    gap: 0.4rem;
+    color: var(--live);
     font-weight: 600;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-1);
+    background: color-mix(in srgb, var(--live) 12%, transparent);
   }
   .vram {
-    max-width: 22ch;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .themebtn {
     display: inline-flex;
-    padding: 0.3rem 0.45rem;
+    align-items: center;
+    gap: 0.45rem;
+  }
+  .vramtext {
+    font-size: var(--t-xs);
+    white-space: nowrap;
   }
   .meter {
-    width: 90px;
-    height: 6px;
+    display: block;
+    width: 54px;
+    height: 5px;
     border-radius: 3px;
     background: var(--panel-2);
     overflow: hidden;
+    flex: none;
   }
   .meter .fill {
+    display: block;
     height: 100%;
-    background: var(--accent);
+    background: var(--muted);
     transition: width 0.4s ease;
   }
+  /* Pressure is machine state, so it takes the signal colour */
   .meter .fill.hot {
-    background: var(--warn);
+    background: var(--live);
   }
   .meter .fill.critical {
     background: var(--bad);
   }
+  .helplink {
+    display: inline-flex;
+    align-items: center;
+    color: var(--muted);
+    padding: 0.25rem;
+    border-radius: var(--radius-1);
+  }
+  .helplink:hover {
+    color: var(--ink);
+    background: var(--panel-2);
+  }
   main {
-    max-width: 1100px;
+    max-width: 1180px;
     margin: 0 auto;
-    padding: 1.2rem;
+    padding: 1.6rem 1.2rem 4rem;
   }
   main.wide {
     max-width: 1560px;
@@ -420,7 +470,7 @@
   /* Below the nav's natural width the header wraps to a second row rather
      than overflowing - a sticky header does not pin horizontally, so any
      document-level scroll would slide it off screen */
-  @media (max-width: 900px) {
+  @media (max-width: 1080px) {
     .navrow {
       gap: 0.5rem 1rem;
     }
@@ -428,27 +478,30 @@
       order: 3;
       flex-basis: 100%;
     }
+    .state {
+      margin-left: auto;
+    }
+    .vramtext {
+      display: none;
+    }
   }
   /* Icons alone below the small breakpoint: eight labelled links do not fit
      a phone, and each keeps its title for the tooltip */
   @media (max-width: 640px) {
     .navrow {
-      padding: 0.6rem 0.8rem 0.5rem;
-    }
-    .statusbar {
-      padding: 0.25rem 0.8rem;
+      padding: 0.5rem 0.8rem;
     }
     main {
-      padding: 0.8rem;
+      padding: 1rem 0.8rem 3rem;
     }
     .navlabel {
       display: none;
     }
     nav {
-      gap: 0.4rem 1.3rem;
+      gap: 0.4rem 1.25rem;
     }
-    .vram {
-      max-width: 14ch;
+    .meter {
+      display: none;
     }
   }
 </style>
diff --git a/ui/src/app.css b/ui/src/app.css
index 4de95a4e..b2e375ac 100644
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -1,70 +1,117 @@
+/* Contact sheet.
+ *
+ * This app's whole output is pictures, so the chrome is achromatic on
+ * purpose: any chroma in the surfaces around an image biases how you read
+ * the colour the model actually produced. Greys here are equal-RGB rather
+ * than the usual blue-tinted slate, and the generated images are meant to
+ * be the only saturated thing on screen.
+ *
+ * Colour therefore means one thing: machine state. `--live` (a darkroom
+ * safelight amber) marks what is running, where focus is, and when VRAM is
+ * under pressure. It is never decoration. Interactive elements are ink -
+ * the primary button is a solid ink fill, links are ink with an underline -
+ * so nothing in the chrome competes with the work.
+ *
+ * Type carries the other rule: anything the ENGINE reads literally (a
+ * workflow name, a `variable:` reference, a path, a seed, a run id, a
+ * measurement) is set in --font-mono; anything written for a PERSON is set
+ * in --font-sans. That is why headings are mono - they name things the
+ * engine resolves - and descriptions are not.
+ *
+ * `--accent` is kept as the name for "interactive ink" because 50-odd rules
+ * across the app already reference it; `--live` is the state colour those
+ * rules must NOT use.
+ */
 :root {
-  --bg: #14181b;
-  --panel: #1c2226;
-  --panel-2: #232b30;
-  --line: #2e383e;
-  --ink: #e4eaed;
-  --muted: #8fa0a8;
-  --accent: #4cb8cc;
-  --accent-ink: #0b2b31;
-  --good: #63b784;
-  --bad: #e07a6a;
-  --warn: #d9a84e;
-  font-family:
-    system-ui,
-    -apple-system,
-    'Segoe UI',
-    sans-serif;
-  color-scheme: dark;
+  /* the sheet: paper, neutral, so colour is judged honestly */
+  --bg: #f7f7f7;
+  --panel: #ffffff;
+  --panel-2: #ededed;
+  --line: #dcdcdc;
+  --ink: #1c1c1c;
+  --muted: #6b6b6b;
+  --accent: #1c1c1c;
+  --accent-ink: #ffffff;
+  --live: #a85b00;
+  --good: #2f6b3f;
+  --bad: #a33224;
+  --warn: #a85b00;
+  color-scheme: light;
 }
 
-:root[data-theme='dark'] {
-  --bg: #14181b;
-  --panel: #1c2226;
-  --panel-2: #232b30;
-  --line: #2e383e;
-  --ink: #e4eaed;
-  --muted: #8fa0a8;
-  --accent: #4cb8cc;
-  --accent-ink: #0b2b31;
-  --good: #63b784;
-  --bad: #e07a6a;
-  --warn: #d9a84e;
-  color-scheme: dark;
+/* the darkroom */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --bg: #131313;
+    --panel: #1b1b1b;
+    --panel-2: #242424;
+    --line: #333333;
+    --ink: #e8e8e8;
+    --muted: #9a9a9a;
+    --accent: #e8e8e8;
+    --accent-ink: #131313;
+    --live: #e8a33d;
+    --good: #6fbf87;
+    --bad: #e3796a;
+    --warn: #e8a33d;
+    color-scheme: dark;
+  }
 }
 
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme='dark']) {
-    --bg: #f2f5f6;
-    --panel: #ffffff;
-    --panel-2: #eaeff1;
-    --line: #d5dde0;
-    --ink: #1c2428;
-    --muted: #5b6a72;
-    --accent: #0b7285;
-    --accent-ink: #ffffff;
-    --good: #2b7a4b;
-    --bad: #b34031;
-    --warn: #9a6a12;
-    color-scheme: light;
-  }
+:root[data-theme='dark'] {
+  --bg: #131313;
+  --panel: #1b1b1b;
+  --panel-2: #242424;
+  --line: #333333;
+  --ink: #e8e8e8;
+  --muted: #9a9a9a;
+  --accent: #e8e8e8;
+  --accent-ink: #131313;
+  --live: #e8a33d;
+  --good: #6fbf87;
+  --bad: #e3796a;
+  --warn: #e8a33d;
+  color-scheme: dark;
 }
 
 :root[data-theme='light'] {
-  --bg: #f2f5f6;
+  --bg: #f7f7f7;
   --panel: #ffffff;
-  --panel-2: #eaeff1;
-  --line: #d5dde0;
-  --ink: #1c2428;
-  --muted: #5b6a72;
-  --accent: #0b7285;
+  --panel-2: #ededed;
+  --line: #dcdcdc;
+  --ink: #1c1c1c;
+  --muted: #6b6b6b;
+  --accent: #1c1c1c;
   --accent-ink: #ffffff;
-  --good: #2b7a4b;
-  --bad: #b34031;
-  --warn: #9a6a12;
+  --live: #a85b00;
+  --good: #2f6b3f;
+  --bad: #a33224;
+  --warn: #a85b00;
   color-scheme: light;
 }
 
+/* Two families, both from system stacks - the server runs on localhost and
+   may be offline, so a webfont CDN is not available to us. */
+:root {
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
+    Inter, system-ui, sans-serif;
+  --font-mono:
+    ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Roboto Mono',
+    monospace;
+
+  /* ~1.25 from a 15px base. Prose sits at --t-base; the old 14px body was
+     below comfortable reading size for the descriptions this app shows. */
+  --t-xs: 0.733rem;
+  --t-sm: 0.867rem;
+  --t-base: 1rem;
+  --t-md: 1.2rem;
+  --t-lg: 1.6rem;
+  --t-xl: 2.2rem;
+
+  font-family: var(--font-sans);
+}
+
 /* Layout tokens. Spacing steps and radii for all new CSS; existing rules
    migrate as their files are touched. Container-query breakpoints cannot
    read custom properties, so the scale is a convention instead:
@@ -76,6 +123,11 @@
   --space-3: 0.7rem;
   --space-4: 1rem;
   --space-5: 1.5rem;
+
+  /* Radius says what kind of thing something is rather than being one
+     global value: a picture is nearly square-cornered, a surface is
+     rounded, a chip is a pill. */
+  --radius-frame: 3px;
   --radius-1: 6px;
   --radius-2: 8px;
 }
@@ -96,8 +148,11 @@ textarea,
     filter 0.15s ease,
     opacity 0.15s ease;
 }
+/* Focus is machine state - where the keyboard is - so it gets the signal
+   colour rather than the interactive ink, which would be invisible against
+   an ink button. */
 :focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--live);
   outline-offset: 1px;
 }
 
@@ -112,10 +167,10 @@ textarea,
 }
 .pulse-dot {
   display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--live);
   animation: dw-pulse 1.6s ease-in-out infinite;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -127,29 +182,47 @@ body {
   margin: 0;
   background: var(--bg);
   color: var(--ink);
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: 15px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
 }
 a {
   color: var(--accent);
   text-decoration: none;
 }
+/* Prose links keep an underline: with interactive elements set in ink
+   rather than a colour, the underline is what makes them links. Links that
+   are already unmistakably controls (nav items, cards, icon buttons) opt
+   out with .plain. */
+a:not(.plain):not(.chip):not(.panel):hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* One filled button per view: the thing you came to do. Everything else is
+   .quiet (outlined) or .bare (text). */
 button {
   background: var(--accent);
   color: var(--accent-ink);
-  border: 0;
-  border-radius: 6px;
-  padding: 0.45rem 0.9rem;
-  font-size: 0.9rem;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-1);
+  padding: 0.4rem 0.9rem;
+  font-family: inherit;
+  font-size: var(--t-sm);
   font-weight: 600;
   cursor: pointer;
 }
 button:hover {
-  filter: brightness(1.1);
+  filter: brightness(1.35);
+}
+:root[data-theme='dark'] button:hover,
+:root:not([data-theme='light']) button:hover {
+  filter: brightness(0.85);
 }
 button:disabled {
-  opacity: 0.45;
+  opacity: 0.4;
   cursor: default;
+  filter: none;
 }
 button.quiet {
   background: transparent;
@@ -157,43 +230,88 @@ button.quiet {
   border: 1px solid var(--line);
   font-weight: 500;
 }
+button.quiet:hover {
+  color: var(--ink);
+  border-color: var(--muted);
+  filter: none;
+}
+button.bare {
+  background: transparent;
+  color: var(--muted);
+  border-color: transparent;
+  font-weight: 500;
+}
+button.bare:hover {
+  color: var(--ink);
+  background: var(--panel-2);
+  filter: none;
+}
 input,
 textarea,
 select {
   background: var(--panel-2);
   color: var(--ink);
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--radius-1);
   padding: 0.4rem 0.6rem;
-  font-size: 0.9rem;
+  font-size: var(--t-sm);
   width: 100%;
   font-family: inherit;
 }
 input:focus,
 textarea:focus {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--live);
   outline-offset: -1px;
 }
+/* A checkbox or radio left alone paints in the browser's own blue, which is
+   exactly the chroma this design keeps off the screen - and it would be the
+   only blue in the app. Checked controls take the interactive ink instead;
+   the browser picks a contrasting mark. */
+input[type='checkbox'],
+input[type='radio'] {
+  accent-color: var(--accent);
+}
 code,
 pre {
-  font-family: ui-monospace, 'Cascadia Code', monospace;
-  font-size: 0.85em;
+  font-family: var(--font-mono);
+  font-size: 0.87em;
 }
 pre {
   background: var(--panel-2);
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--radius-1);
   padding: 0.8rem;
   overflow-x: auto;
   margin: 0;
 }
-h1 {
-  font-size: 1.25rem;
+
+/* Headings name things the engine resolves, so they are mono - sentence
+   case and tight, never tracked out or capitalised into a label. */
+h1,
+h2,
+h3 {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
   margin: 0;
 }
+h1 {
+  font-size: var(--t-lg);
+}
 h2 {
-  font-size: 1rem;
-  margin: 0 0 0.6rem;
+  font-size: var(--t-md);
+  margin: 0 0 var(--space-3);
+}
+h3 {
+  font-size: var(--t-base);
+}
+
+/* Machine values line up when they are figures in a column - measurements,
+   sizes, counts, durations. */
+.num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
 }
 
 /* Every panel is a query container, so the label/field grids nested inside
@@ -205,28 +323,28 @@ h2 {
 .panel {
   background: var(--panel);
   border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 1rem;
+  border-radius: var(--radius-2);
+  padding: var(--space-4);
   container-type: inline-size;
 }
 .chip {
   display: inline-block;
   padding: 0.1rem 0.55rem;
   border-radius: 999px;
-  font-size: 0.75rem;
+  font-size: var(--t-xs);
   font-weight: 600;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.01em;
 }
 input.ref,
 textarea.ref {
-  color: var(--accent);
-  font-family: ui-monospace, 'Cascadia Code', monospace;
-  font-size: 0.85rem;
+  font-family: var(--font-mono);
+  font-size: var(--t-sm);
 }
 button.danger:hover,
 a.danger:hover {
   border-color: var(--bad);
   color: var(--bad);
+  background: transparent;
   filter: none;
 }
 .panel.error-edge {
@@ -243,15 +361,15 @@ a.danger:hover {
   color: var(--muted);
 }
 .chip.running {
-  background: var(--accent);
-  color: var(--accent-ink);
+  background: var(--live);
+  color: var(--panel);
 }
 .chip.succeeded {
-  background: color-mix(in srgb, var(--good) 22%, transparent);
+  background: color-mix(in srgb, var(--good) 20%, transparent);
   color: var(--good);
 }
 .chip.failed {
-  background: color-mix(in srgb, var(--bad) 22%, transparent);
+  background: color-mix(in srgb, var(--bad) 20%, transparent);
   color: var(--bad);
 }
 .chip.cancelled {
@@ -261,3 +379,38 @@ a.danger:hover {
 .muted {
   color: var(--muted);
 }
+
+/* Prose stays inside a comfortable measure wherever it runs long. */
+.prose {
+  max-width: 68ch;
+}
+
+/* A contact-sheet frame. Every place the app shows something a workflow
+   produced - a catalog card's proof, a workflow's recent outputs, a job's
+   results, a gallery tile - uses this, so a picture reads the same wherever
+   it turns up. The picture fills the frame edge to edge: no inner padding
+   and no rounding on the image itself, which is what makes it read as a
+   proof on a sheet rather than as another rounded card. Set the size on
+   the frame; the media inside always fills it. */
+.frame {
+  display: block;
+  position: relative;
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-frame);
+  overflow: hidden;
+}
+.frame > img,
+.frame > video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+/* The frame is only ever the picture, so any interactive frame gets its
+   affordance from the border rather than from a colour wash over it */
+a.frame:hover,
+button.frame:hover {
+  border-color: var(--ink);
+  filter: none;
+}
diff --git a/ui/src/lib/FolderGroups.svelte b/ui/src/lib/FolderGroups.svelte
index 9560656d..3b0fe29f 100644
--- a/ui/src/lib/FolderGroups.svelte
+++ b/ui/src/lib/FolderGroups.svelte
@@ -101,9 +101,11 @@
     opacity: 1;
   }
   .groupnew:hover {
-    color: var(--accent);
+    color: var(--ink);
     border-color: var(--line);
   }
+  /* A folder name is a path segment the engine resolves, so it is mono
+     like every other name in the app */
   .group {
     display: flex;
     align-items: center;
@@ -111,8 +113,10 @@
     background: none;
     border: none;
     color: var(--muted);
+    font-family: var(--font-mono);
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: var(--t-sm);
+    letter-spacing: -0.01em;
     padding: 0;
     margin: 0;
     cursor: pointer;
@@ -121,8 +125,12 @@
     color: var(--ink);
     filter: none;
   }
+  /* Cards are deliberately not equal height - one that has produced
+     something carries a picture and one that has not does not - so rows
+     align to the top rather than stretching the short ones */
   .grid {
     display: grid;
+    align-items: start;
     gap: 0.6rem;
   }
 </style>
diff --git a/ui/src/lib/KeyboardHelp.svelte b/ui/src/lib/KeyboardHelp.svelte
index 62a3a36f..18ff6a07 100644
--- a/ui/src/lib/KeyboardHelp.svelte
+++ b/ui/src/lib/KeyboardHelp.svelte
@@ -61,7 +61,7 @@
     color: var(--muted);
   }
   kbd {
-    font-family: ui-monospace, 'Cascadia Code', monospace;
+    font-family: var(--font-mono);
     font-size: 0.8rem;
     border: 1px solid var(--line);
     border-bottom-width: 2px;
diff --git a/ui/src/lib/StatusPopover.svelte b/ui/src/lib/StatusPopover.svelte
index 6131a59f..73f42b0b 100644
--- a/ui/src/lib/StatusPopover.svelte
+++ b/ui/src/lib/StatusPopover.svelte
@@ -107,8 +107,7 @@
     font-weight: 600;
     color: var(--muted);
     font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    text-transform: none;
   }
   dd {
     margin: 0;
diff --git a/ui/src/lib/editor/FlowView.svelte b/ui/src/lib/editor/FlowView.svelte
index 360331cb..7299f932 100644
--- a/ui/src/lib/editor/FlowView.svelte
+++ b/ui/src/lib/editor/FlowView.svelte
@@ -133,7 +133,7 @@
       feed. A step with more than one incoming arrow multiplies its inputs
       together (CLAUDE.md's cartesian-product gotcha) - its border is
       highlighted and the multiplier is noted.{#if showsRun}
-        A finished step is outlined in green, the one running now in the accent
+        A finished step is outlined in green, the one running now in amber
         colour.{/if}{#if onselect}
         Click a step to jump to it in the form view.{/if}
     </p>
@@ -217,7 +217,7 @@
     gap: var(--space-2);
   }
   .hint code {
-    font-family: ui-monospace, 'Cascadia Code', monospace;
+    font-family: var(--font-mono);
     font-size: 0.78rem;
   }
   .scrollarea {
@@ -242,7 +242,7 @@
     font-size: 10px;
     fill: var(--muted);
     text-anchor: middle;
-    font-family: ui-monospace, 'Cascadia Code', monospace;
+    font-family: var(--font-mono);
   }
   .node.clickable {
     cursor: pointer;
@@ -269,8 +269,9 @@
     stroke: var(--good);
     stroke-width: 2;
   }
+  /* The step running right now - machine state, so the signal colour */
   .node.active .box {
-    stroke: var(--accent);
+    stroke: var(--live);
     stroke-width: 2.5;
     animation: dw-pulse 1.6s ease-in-out infinite;
   }
@@ -287,19 +288,17 @@
   .stepkind {
     font-size: 10px;
     fill: var(--accent);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+    text-transform: none;
   }
   .stepdetail {
     font-size: 10px;
     fill: var(--muted);
-    font-family: ui-monospace, 'Cascadia Code', monospace;
+    font-family: var(--font-mono);
   }
   .entrytag {
     font-size: 9px;
     fill: var(--good);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+    text-transform: none;
   }
   .fanlabel {
     font-size: 10px;
diff --git a/ui/src/lib/editor/QuantizationEditor.svelte b/ui/src/lib/editor/QuantizationEditor.svelte
index cf937bb0..45886ca6 100644
--- a/ui/src/lib/editor/QuantizationEditor.svelte
+++ b/ui/src/lib/editor/QuantizationEditor.svelte
@@ -69,7 +69,7 @@
     gap: 0.4rem;
   }
   .ctype {
-    font-family: ui-monospace, monospace;
+    font-family: var(--font-mono);
     font-size: 0.8rem;
   }
 </style>
diff --git a/ui/src/lib/editor/StepEditor.svelte b/ui/src/lib/editor/StepEditor.svelte
index b2b48baf..1d3ebf2c 100644
--- a/ui/src/lib/editor/StepEditor.svelte
+++ b/ui/src/lib/editor/StepEditor.svelte
@@ -624,8 +624,7 @@
   }
   h3 {
     font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    text-transform: none;
     color: var(--muted);
     margin: 1rem 0 0.5rem;
   }
@@ -637,8 +636,7 @@
   summary {
     cursor: pointer;
     font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    text-transform: none;
     color: var(--muted);
     font-weight: 600;
     user-select: none;
@@ -698,7 +696,7 @@
     margin-top: 0.8rem;
   }
   .raw textarea {
-    font-family: ui-monospace, monospace;
+    font-family: var(--font-mono);
     font-size: 0.82rem;
   }
   .error {
@@ -758,8 +756,7 @@
   }
   .digestsection {
     font-size: 0.7rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    text-transform: none;
     flex: none;
     width: 90px;
   }
@@ -773,7 +770,7 @@
     z-index: 1;
   }
   .flowchip {
-    font-family: ui-monospace, 'Cascadia Code', monospace;
+    font-family: var(--font-mono);
     font-size: 0.72rem;
     padding: 0.05rem 0.5rem;
     border-radius: 999px;
diff --git a/ui/src/lib/pages/EditorPage.svelte b/ui/src/lib/pages/EditorPage.svelte
index 22937f96..5ab14a66 100644
--- a/ui/src/lib/pages/EditorPage.svelte
+++ b/ui/src/lib/pages/EditorPage.svelte
@@ -787,8 +787,7 @@
   .wfidlabel {
     color: var(--muted);
     font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
+    text-transform: none;
   }
   /* Reads as a title until you reach for it, rather than as an unexplained
      text box sitting next to a breadcrumb */
@@ -825,7 +824,7 @@
     min-width: 0;
   }
   .pathchip {
-    font-family: ui-monospace, 'Cascadia Code', monospace;
+    font-family: var(--font-mono);
     font-size: 0.8rem;
     padding: 0.25rem 0.6rem;
     max-width: 100%;
@@ -882,7 +881,7 @@
     margin-top: 0.8rem;
   }
   .filefoot .path {
-    font-family: ui-monospace, 'Cascadia Code', monospace;
+    font-family: var(--font-mono);
     font-size: 0.8rem;
     min-width: 0;
   }
diff --git a/ui/src/lib/pages/GalleryPage.svelte b/ui/src/lib/pages/GalleryPage.svelte
index 833eda39..2ac8375e 100644
--- a/ui/src/lib/pages/GalleryPage.svelte
+++ b/ui/src/lib/pages/GalleryPage.svelte
@@ -261,7 +261,7 @@
 <div class="head">
   <h1>Gallery</h1>
   <WorkspacePicker />
-  <span class="muted">{files.length} files</span>
+  <span class="num muted">{files.length} files</span>
   <input class="filter" placeholder="filter…" bind:value={filter} />
 </div>
 
@@ -345,8 +345,8 @@
 {#if selected}
   <div class="detail panel">
     <div class="bar">
-      <strong>{selected.name}</strong>
-      <span class="muted">{mb(selected.size)} · {day(selected.mtime)}</span>
+      <strong class="selname">{selected.name}</strong>
+      <span class="num muted">{mb(selected.size)} · {day(selected.mtime)}</span>
       <span class="flex"></span>
       {#if embeddedWorkflow}
         <button
@@ -453,8 +453,8 @@
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
-    gap: 0.4rem 1rem;
-    margin-bottom: 1rem;
+    gap: 0.4rem 0.8rem;
+    margin-bottom: var(--space-4);
   }
   .filter {
     max-width: 220px;
@@ -479,11 +479,15 @@
   }
   .pick {
     position: absolute;
-    top: 0.55rem;
-    left: 0.55rem;
+    top: 0.4rem;
+    left: 0.4rem;
     z-index: 1;
     margin: 0;
+    width: auto;
     cursor: pointer;
+    /* It now sits over the picture rather than over a padded panel, so it
+       needs its own ground to stay findable against a dark output */
+    outline: 2px solid var(--panel);
     /* Out of the way until it is wanted: hovering the tile, focusing the
        box itself, or any selection existing at all brings it back */
     opacity: 0;
@@ -493,34 +497,41 @@
   .pick:checked {
     opacity: 1;
   }
+  /* Selected is the user's own state, not the machine's, so it reads as a
+     heavier ink edge rather than taking the signal colour */
   .cellwrap.picked .cell {
-    border-color: var(--accent);
+    border-color: var(--ink);
+    box-shadow: inset 0 0 0 1px var(--ink);
   }
+  /* A frame with a caption strip under it, like the catalog's cards: the
+     picture bleeds to the edges and the label sits below the rule rather
+     than floating on a padded card */
   .cell {
     flex: 1;
     min-width: 0;
     background: var(--panel);
     border: 1px solid var(--line);
-    border-radius: 8px;
-    padding: 0.4rem;
+    border-radius: var(--radius-2);
+    padding: 0;
+    overflow: hidden;
     cursor: pointer;
     display: flex;
     flex-direction: column;
-    gap: 0.3rem;
     color: var(--muted);
     font-weight: 500;
-    font-size: 0.75rem;
+    font-size: var(--t-xs);
+    text-align: left;
     /* A folder of thousands of outputs still renders every cell's DOM node
        (no true windowing library is in the project's dependencies yet),
        but content-visibility skips layout/paint for cells scrolled out of
        view, which is most of the win for cheap. contain-intrinsic-size
        keeps scrollbar height stable before a cell has ever been measured. */
     content-visibility: auto;
-    contain-intrinsic-size: 150px 190px;
+    contain-intrinsic-size: 150px 180px;
   }
   .cell:hover,
   .cell.active {
-    border-color: var(--accent);
+    border-color: var(--ink);
     filter: none;
   }
   .cell img,
@@ -528,15 +539,21 @@
     width: 100%;
     aspect-ratio: 1;
     object-fit: cover;
-    border-radius: 5px;
     display: block;
   }
   .audio {
     aspect-ratio: 1;
     display: grid;
     place-items: center;
+    font-family: var(--font-mono);
+    background: var(--panel-2);
   }
+  /* The file's own name, which is what the engine wrote and what you would
+     type to reference it */
   .caption {
+    font-family: var(--font-mono);
+    padding: 0.35rem 0.5rem 0.4rem;
+    border-top: 1px solid var(--line);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -554,6 +571,12 @@
     gap: 0.4rem 0.8rem;
     margin-bottom: 0.7rem;
   }
+  /* The path the engine wrote, and what you would type to reference it */
+  .selname {
+    font-family: var(--font-mono);
+    font-size: var(--t-sm);
+    overflow-wrap: anywhere;
+  }
   .flex {
     flex: 1;
   }
@@ -575,7 +598,8 @@
   .body img,
   .body video {
     max-width: min(480px, 100%);
-    border-radius: 6px;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-frame);
   }
   .meta {
     display: flex;
diff --git a/ui/src/lib/pages/JobPage.svelte b/ui/src/lib/pages/JobPage.svelte
index 0fd029be..a2006cc0 100644
--- a/ui/src/lib/pages/JobPage.svelte
+++ b/ui/src/lib/pages/JobPage.svelte
@@ -257,14 +257,21 @@
         <div class="media">
           {#each group.files as file (file)}
             {#if isImage(file)}
-              <a href={fileUrl(file)} target="_blank"
+              <a
+                class="frame plain"
+                href={fileUrl(file)}
+                target="_blank"
+                title={file.split('/').pop()}
                 ><img src={fileUrl(file)} alt={file.split('/').pop()} /></a
               >
             {:else if isVideo(file)}
-              <!-- svelte-ignore a11y_media_has_caption -->
-              <video src={fileUrl(file)} controls loop></video>
+              <span class="frame">
+                <!-- svelte-ignore a11y_media_has_caption -->
+                <video src={fileUrl(file)} controls loop></video>
+              </span>
             {:else}
-              <a href={fileUrl(file)} target="_blank">{file.split('/').pop()}</a
+              <a class="filelink" href={fileUrl(file)} target="_blank"
+                >{file.split('/').pop()}</a
               >
             {/if}
           {/each}
@@ -348,9 +355,11 @@
     background: var(--good);
     border-color: var(--good);
   }
+  /* The step the worker is on right now - machine state, so it takes the
+     signal colour rather than the interactive ink */
   .dot.active {
-    background: var(--accent);
-    border-color: var(--accent);
+    background: var(--live);
+    border-color: var(--live);
     animation: dw-pulse 1.6s ease-in-out infinite;
   }
   @media (prefers-reduced-motion: reduce) {
@@ -368,7 +377,7 @@
   }
   .fill {
     height: 100%;
-    background: var(--accent);
+    background: var(--live);
     transition: width 0.3s;
   }
   .count {
@@ -378,21 +387,27 @@
   .media {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.7rem;
+    gap: var(--space-2);
+    align-items: flex-start;
   }
-  .media img,
-  .media video {
+  /* What the run produced, framed the way the catalog and the gallery
+     frame it - the picture flush to its edges, no rounding of its own */
+  .media :global(.frame) {
     max-width: min(340px, 100%);
-    border-radius: 6px;
-    display: block;
+  }
+  .media :global(.frame > video) {
+    height: auto;
+  }
+  .media a.filelink {
+    font-family: var(--font-mono);
+    font-size: var(--t-sm);
   }
   .error {
     color: var(--bad);
   }
   .stephead {
     font-size: 0.78rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    text-transform: none;
     margin: var(--space-3) 0 var(--space-2);
   }
   .stephead:first-of-type {
diff --git a/ui/src/lib/pages/JobsPage.svelte b/ui/src/lib/pages/JobsPage.svelte
index ffbe29ab..921d38f3 100644
--- a/ui/src/lib/pages/JobsPage.svelte
+++ b/ui/src/lib/pages/JobsPage.svelte
@@ -113,8 +113,9 @@
   <div class="panel list">
     {#each visible as job (job.id)}
       <a
-        class="row"
+        class="row plain"
         class:historical={job.historical}
+        class:runningnow={job.status === 'running'}
         href={'#/jobs/' + job.id}
         title={job.historical
           ? 'finished before this server started - loaded from history'
@@ -184,6 +185,15 @@
     margin: 0;
     flex: 1;
   }
+  /* The job the worker is on right now, marked the way it is marked in the
+     header: the one row you came to the page to find */
+  .row.runningnow {
+    background: color-mix(in srgb, var(--live) 10%, transparent);
+    box-shadow: inset 2px 0 0 var(--live);
+  }
+  .row.runningnow:hover {
+    background: color-mix(in srgb, var(--live) 16%, transparent);
+  }
   .head select {
     max-width: 150px;
   }
@@ -218,10 +228,6 @@
       grid-template-columns: auto minmax(0, 1fr);
       gap: 0.2rem 0.7rem;
     }
-    .started,
-    .dur {
-      font-size: 0.85rem;
-    }
   }
   .row:hover {
     background: var(--panel-2);
@@ -229,7 +235,10 @@
   .row.historical {
     opacity: 0.72;
   }
+  /* A workflow name is what the engine resolved to run this job */
   .name {
+    font-family: var(--font-mono);
+    font-size: var(--t-sm);
     font-weight: 600;
     display: inline-flex;
     align-items: center;
@@ -238,8 +247,15 @@
     min-width: 0;
     overflow-wrap: anywhere;
   }
+  .started,
+  .dur {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--t-xs);
+  }
   .qpos {
-    font-size: 0.72rem;
+    font-family: var(--font-mono);
+    font-size: var(--t-xs);
     color: var(--muted);
     border: 1px solid var(--line);
     border-radius: 4px;
@@ -247,7 +263,8 @@
     font-variant-numeric: tabular-nums;
   }
   .wschip {
-    font-size: 0.72rem;
+    font-family: var(--font-mono);
+    font-size: var(--t-xs);
     border: 1px solid var(--line);
     border-radius: 4px;
     padding: 0 0.3rem;
diff --git a/ui/src/lib/pages/ModelsPage.svelte b/ui/src/lib/pages/ModelsPage.svelte
index 11123313..00d2b0f8 100644
--- a/ui/src/lib/pages/ModelsPage.svelte
+++ b/ui/src/lib/pages/ModelsPage.svelte
@@ -220,7 +220,7 @@
         </span>
       {:else}
         <button
-          class="withicon"
+          class="quiet withicon"
           onclick={startDiffusersUpdate}
           title="install the latest diffusers from GitHub - new model pipelines usually land there before a release. The worker restarts when idle so the next job uses it"
         >
@@ -341,7 +341,7 @@
               <span class="sizenum">{size(repo.size_on_disk)}</span>
             </td>
             <td class="num muted">{repo.nb_files}</td>
-            <td class="muted">{day(repo.last_accessed)}</td>
+            <td class="muted lastused">{day(repo.last_accessed)}</td>
             <td>
               <button
                 class="quiet icon danger"
@@ -364,7 +364,7 @@
                 </td>
                 <td class="num muted">{size(revision.size_on_disk)}</td>
                 <td></td>
-                <td class="muted">{day(revision.last_modified)}</td>
+                <td class="muted lastused">{day(revision.last_modified)}</td>
                 <td></td>
               </tr>
             {/each}
@@ -439,7 +439,7 @@
   .diskbar > span {
     display: block;
     height: 100%;
-    background: var(--accent);
+    background: var(--muted);
     opacity: 0.7;
   }
   .warn {
@@ -490,6 +490,8 @@
     font-size: 0.82rem;
   }
   .dlrepo {
+    font-family: var(--font-mono);
+    font-size: var(--t-sm);
     font-weight: 500;
   }
   .dlbar {
@@ -500,10 +502,12 @@
     overflow: hidden;
     display: inline-block;
   }
+  /* A download in flight - the machine working, so the signal colour, the
+     same as a running job and a filling progress bar */
   .dlbar > span {
     display: block;
     height: 100%;
-    background: var(--accent);
+    background: var(--live);
   }
   .dlnum {
     font-variant-numeric: tabular-nums;
@@ -522,8 +526,7 @@
     font-weight: 600;
     color: var(--muted);
     font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
+    text-transform: none;
     padding: 0.4rem 0.5rem;
     border-bottom: 1px solid var(--line);
   }
@@ -537,9 +540,17 @@
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
+  /* A repo id is what you paste into a workflow for the engine to resolve */
   .repo {
+    font-family: var(--font-mono);
+    font-size: var(--t-sm);
     font-weight: 500;
   }
+  .lastused {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--t-xs);
+  }
   .badge {
     font-size: 0.7rem;
     color: var(--muted);
diff --git a/ui/src/lib/pages/PromptsPage.svelte b/ui/src/lib/pages/PromptsPage.svelte
index ee9e1977..24dc251c 100644
--- a/ui/src/lib/pages/PromptsPage.svelte
+++ b/ui/src/lib/pages/PromptsPage.svelte
@@ -47,9 +47,9 @@
 
 <div class="head">
   <h1>Prompts</h1>
-  <span class="muted">{promptDir}</span>
+  <span class="flex"></span>
   <input placeholder="filter…" bind:value={filter} class="filter" />
-  <a class="newlink" href="#/prompt-edit" title="new prompt"
+  <a class="newlink plain" href="#/prompt-edit" title="new prompt"
     ><Plus size={15} /></a
   >
 </div>
@@ -131,6 +131,12 @@
   <p class="muted">Nothing matches "{filter}".</p>
 {/if}
 
+{#if promptDir}
+  <p class="dir muted">
+    read from <span class="path">{promptDir}</span>
+  </p>
+{/if}
+
 <style>
   .origin {
     font-size: 0.75rem;
@@ -139,8 +145,22 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.4rem 1rem;
-    margin-bottom: 1rem;
+    gap: 0.4rem 0.8rem;
+    margin-bottom: var(--space-4);
+  }
+  .head .flex {
+    flex: 1;
+  }
+  /* An absolute path is worth knowing and not worth the slot beside the
+     title - and as one unbreakable token it was pushing the page sideways
+     on a phone */
+  .dir {
+    margin-top: 2.5rem;
+    font-size: var(--t-xs);
+  }
+  .path {
+    font-family: var(--font-mono);
+    word-break: break-all;
   }
   .filter {
     max-width: 220px;
diff --git a/ui/src/lib/pages/ServerPage.svelte b/ui/src/lib/pages/ServerPage.svelte
index 0121fc7f..89e61783 100644
--- a/ui/src/lib/pages/ServerPage.svelte
+++ b/ui/src/lib/pages/ServerPage.svelte
@@ -467,8 +467,7 @@
     font-weight: 600;
     color: var(--muted);
     font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    text-transform: none;
   }
   dd {
     margin: 0;
@@ -511,8 +510,7 @@
   th {
     text-align: left;
     font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    text-transform: none;
     color: var(--muted);
     font-weight: 600;
     padding: 0.2rem 0.5rem 0.2rem 0;
diff --git a/ui/src/lib/pages/WorkflowPage.svelte b/ui/src/lib/pages/WorkflowPage.svelte
index 0e22ca8c..846be49b 100644
--- a/ui/src/lib/pages/WorkflowPage.svelte
+++ b/ui/src/lib/pages/WorkflowPage.svelte
@@ -8,7 +8,7 @@
   import { loadPromptLibrary, promptLibrary } from '../promptlib.svelte'
   import { PROMPT_LIST_ID } from '../prompts'
   import { notify } from '../toast'
-  import type { WorkflowDefinition } from '../types'
+  import type { GalleryFile, WorkflowDefinition } from '../types'
 
   let { name }: { name: string } = $props()
 
@@ -22,7 +22,15 @@
   let overrides = $state<Record<string, string>>({})
   let error = $state('')
   let submitting = $state(false)
-  let showJson = $state(true)
+  /** Collapsed by default: this page is where you set variables and run,
+   * and a 520px read-only editor between the form and the rest of the page
+   * pushed the actual work off the screen. The editor is one click away,
+   * and Edit opens the real one. */
+  let showJson = $state(false)
+  /** What this workflow has already made, newest first - the same proof the
+   * catalog card shows, in the place where you decide whether to run it
+   * again. */
+  let proofs = $state<GalleryFile[]>([])
 
   $effect(() => {
     overrides = {}
@@ -40,6 +48,26 @@
       .catch((e) => (error = e.message))
   })
 
+  $effect(() => {
+    // A run writes to <outputs>/<identity>/<run id>/, and the gallery
+    // reports that identity as `folder`, so this workflow's name matches
+    // its outputs directly. Loaded separately from the definition so the
+    // page is usable before it answers.
+    const wanted = name
+    proofs = []
+    api
+      .gallery()
+      .then((result) => {
+        if (wanted !== name) return
+        proofs = result.files
+          .filter((file) => file.folder === wanted)
+          .slice(0, 6)
+      })
+      .catch(() => {
+        /* the page reads fine without them */
+      })
+  })
+
   const variables = $derived(Object.entries(workflow?.variables ?? {}))
 
   function newFrom() {
@@ -84,20 +112,24 @@
   }
 </script>
 
+<a href="#/workflows" class="back muted">← workflows</a>
+
+<!-- One filled button: Run, the thing you came here to do. Everything else
+     is outlined or bare, and Delete is pushed out of reach of Run rather
+     than sitting beside it. -->
 <div class="head">
-  <a href="#/workflows" class="muted">← workflows</a>
   <h1>{name}</h1>
-  <button
-    class="quiet"
-    onclick={() => (showJson = !showJson)}
-    title={showJson
-      ? 'hide the workflow definition'
-      : 'show the workflow definition'}
-  >
-    {showJson ? 'hide' : 'show'} JSON
-  </button>
+  {#if !writable}
+    <span
+      class="readonly muted"
+      title={`read-only: this workflow comes from the ${origin} directory. Saving an edit writes a copy instead of overwriting it`}
+    >
+      {origin || 'read-only'}, read-only
+    </span>
+  {/if}
+  <span class="flex"></span>
   <a
-    class="editlink withicon"
+    class="plain editlink"
     href={'#/edit/' + name.split('/').map(encodeURIComponent).join('/')}
     title="open this workflow in the editor"
   >
@@ -111,28 +143,8 @@
   >
     <Copy size={14} />New from
   </button>
-  <span class="spacer"></span>
-  {#if !writable}
-    <span
-      class="readonly muted"
-      title={`read-only: this workflow comes from the ${origin} directory. Saving an edit writes a copy instead of overwriting it`}
-    >
-      read-only{origin ? ` (${origin})` : ''}
-    </span>
-  {/if}
-  <DownloadLink href={api.workflowDownloadUrl(name)} />
-  {#if writable}
-    <button
-      class="quiet icon danger"
-      onclick={remove}
-      title="delete this workflow file from disk"
-      aria-label="delete this workflow file from disk"
-    >
-      <Trash2 size={14} />
-    </button>
-  {/if}
   <button
-    class="withicon"
+    class="withicon run"
     onclick={run}
     disabled={submitting || !workflow}
     title="queue this workflow with the variables below"
@@ -151,16 +163,41 @@
 
 {#if workflow}
   {#if workflow.description}
-    <p class="muted desc">{workflow.description}</p>
+    <p class="muted desc prose">{workflow.description}</p>
   {/if}
+
+  <!-- What it made last time, before you decide to make another -->
+  {#if proofs.length}
+    <div class="proofs">
+      {#each proofs as proof (proof.name)}
+        <a
+          class="plain frame proof"
+          href="#/gallery"
+          title="{proof.label} — open the gallery"
+        >
+          {#if proof.kind === 'image'}
+            <img
+              src={api.galleryThumbnailUrl(proof.name)}
+              alt={proof.label}
+              loading="lazy"
+            />
+          {:else}
+            <video src={proof.url} muted playsinline preload="metadata"></video>
+          {/if}
+        </a>
+      {/each}
+    </div>
+  {/if}
+
   {#if variables.length}
     <div class="panel">
-      <h2>
-        Variables
-        <span class="muted"
-          >(blank = workflow default · type prompt: to use a stored prompt)</span
-        >
-      </h2>
+      <!-- The heading names a thing the engine resolves, so it is mono; the
+           hint is written for a person, so it is not -->
+      <h2>Variables</h2>
+      <p class="hint muted">
+        Leave a field blank to use the workflow's own default. Type
+        <code>prompt:</code> to pull in a stored prompt.
+      </p>
       <VariablesForm
         mode="override"
         variables={workflow.variables ?? {}}
@@ -172,6 +209,33 @@
     <p class="muted">This workflow defines no variables.</p>
   {/if}
 
+  <!-- The definition, the file and the destructive action all live below
+       the work, in that order of how often anyone wants them -->
+  <div class="foot">
+    <button
+      class="bare"
+      onclick={() => (showJson = !showJson)}
+      aria-expanded={showJson}
+      title={showJson
+        ? 'hide the workflow definition'
+        : 'show the workflow definition'}
+    >
+      {showJson ? 'hide' : 'show'} JSON
+    </button>
+    <DownloadLink href={api.workflowDownloadUrl(name)} />
+    <span class="flex"></span>
+    {#if writable}
+      <button
+        class="bare danger withicon"
+        onclick={remove}
+        title="delete this workflow file from disk"
+        aria-label="delete this workflow file from disk"
+      >
+        <Trash2 size={14} />Delete
+      </button>
+    {/if}
+  </div>
+
   {#if showJson}
     <div class="json">
       <JsonEditor
@@ -184,47 +248,84 @@
 {/if}
 
 <style>
+  .back {
+    display: inline-block;
+    font-size: var(--t-sm);
+    margin-bottom: var(--space-3);
+  }
   .readonly {
-    font-size: 0.85em;
+    font-family: var(--font-mono);
+    font-size: var(--t-xs);
     align-self: center;
   }
-
   .head {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.4rem 1rem;
-    margin-bottom: 1rem;
+    gap: 0.4rem 0.6rem;
+    margin-bottom: var(--space-4);
   }
   .head h1 {
+    word-break: break-word;
+  }
+  .head .flex {
     flex: 1;
   }
   .editlink {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: var(--t-sm);
     font-weight: 600;
+    padding: 0.4rem 0.5rem;
   }
   .withicon {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
   }
-  a.withicon {
-    gap: 0.3rem;
+  .run {
+    padding: 0.45rem 1.1rem;
   }
-  .spacer {
-    width: 0.8rem;
+
+  /* The proofs: contact-sheet frames, sized so a row of them reads at a
+     glance without taking the page over */
+  .proofs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
   }
-  .icon {
-    display: inline-flex;
-    padding: 0.4rem 0.5rem;
+  /* .frame carries the look; this only says how big a proof is here */
+  .proof {
+    width: 116px;
+    aspect-ratio: 1;
+  }
+
+  .foot {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-5);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--line);
+    font-size: var(--t-sm);
+  }
+  .foot .flex {
+    flex: 1;
   }
   .json {
-    margin-top: 1rem;
+    margin-top: var(--space-3);
   }
   .error {
     color: var(--bad);
   }
   .desc {
-    margin: -0.5rem 0 1rem;
-    max-width: 75ch;
+    margin: 0 0 var(--space-4);
+  }
+  .hint {
+    margin: -0.4rem 0 var(--space-3);
+    font-size: var(--t-sm);
   }
 </style>
diff --git a/ui/src/lib/pages/WorkflowsPage.svelte b/ui/src/lib/pages/WorkflowsPage.svelte
index 08e414aa..ad8df86b 100644
--- a/ui/src/lib/pages/WorkflowsPage.svelte
+++ b/ui/src/lib/pages/WorkflowsPage.svelte
@@ -10,6 +10,7 @@
   import {
     WORKFLOW_SHAPES,
     WORKFLOW_TRAITS,
+    type GalleryFile,
     type WorkflowCost,
     type WorkflowShape,
     type WorkflowTrait,
@@ -44,6 +45,11 @@
   let traits = $state<WorkflowTrait[]>([])
   let error = $state('')
   let loaded = $state(false)
+  /** The newest output each workflow has produced, by workflow identity.
+   * A run writes to <outputs>/<identity>/<run id>/, and the gallery listing
+   * reports that identity as an entry's `folder` already stripped of the
+   * run id - so a workflow's name matches its folder directly. */
+  let proofs = $state<Record<string, GalleryFile>>({})
 
   $effect(() => {
     // Read inside the effect so switching workspaces refetches the listing
@@ -59,6 +65,33 @@
       .catch((e) => (error = e.message))
   })
 
+  $effect(() => {
+    void workspace.current
+    // Deliberately not awaited with the listing: the catalog is useful the
+    // moment names arrive, and the proofs fill in behind it. A workspace
+    // with no outputs yet simply never populates this.
+    api
+      .gallery()
+      .then((result) => {
+        // Entries arrive newest first, so the first one seen for a folder
+        // is that workflow's latest. Images win over video because only
+        // images have a thumbnail endpoint; a video-only workflow falls
+        // back to its video, which renders its first frame.
+        const latest: Record<string, GalleryFile> = {}
+        for (const file of result.files) {
+          if (!file.folder) continue
+          const held = latest[file.folder]
+          if (!held) latest[file.folder] = file
+          else if (held.kind !== 'image' && file.kind === 'image')
+            latest[file.folder] = file
+        }
+        proofs = latest
+      })
+      .catch(() => {
+        /* the catalog reads fine without proofs */
+      })
+  })
+
   // Only the shapes and traits the listing actually has: the vocabulary is
   // fixed, but a workspace holding no video has no use for a `shot` option
   const shapesPresent = $derived(
@@ -94,6 +127,19 @@
     }),
   )
 
+  /** Within a folder, workflows that have produced something come first,
+   * then alphabetical as before. Two reasons, and both matter: the ones you
+   * have actually used are the ones you come back to, and only those carry
+   * a picture - so grouping them keeps the taller cards together instead of
+   * punching holes through an otherwise even grid. */
+  const ordered = $derived(
+    [...visible].sort((left, right) => {
+      const leftRun = proofs[left] ? 0 : 1
+      const rightRun = proofs[right] ? 0 : 1
+      return leftRun - rightRun || left.localeCompare(right)
+    }),
+  )
+
   const filterActive = $derived(
     filter !== '' || shape !== '' || traits.length > 0,
   )
@@ -104,15 +150,30 @@
     minutes < 1 ? '<1 min' : `~${Number(minutes.toFixed(2))} min`
 
   /** The one measurement a card shows: the first the maintainer recorded.
-   * '~3 min · 22 GB (RTX 4090)', with the accelerator dropped when the entry
-   * did not name one. */
+   * '~3 min · 22 GB', with the accelerator moved to the tooltip - the card
+   * has room for the numbers, not for the hardware they came from. */
   const formatCost = (cost?: WorkflowCost[] | null) => {
     const measured = cost?.[0]
     if (!measured) return ''
-    const where = measured.name ? ` (${measured.name})` : ''
     return `${formatMinutes(measured.minutes)} · ${Number(
-      measured.vram_gb.toFixed(2),
-    )} GB${where}`
+      measured.vram_gb.toFixed(1),
+    )} GB VRAM`
+  }
+
+  /** Everything the card does not have room to print, so hovering it still
+   * answers "what is this and what does it need". */
+  const cardTitle = (name: string, detail?: Detail) => {
+    const lines = [name]
+    if (detail?.description) lines.push(detail.description)
+    if (detail?.traits?.length) lines.push(detail.traits.join(', '))
+    if (detail?.cost?.[0]) {
+      const measured = detail.cost[0]
+      const where = measured.name ?? measured.device
+      lines.push(`measured on ${where}`)
+    }
+    if (detail?.writable === false)
+      lines.push(`read-only, from the ${detail.origin} directory`)
+    return lines.join('\n')
   }
 
   const href = (name: string) =>
@@ -121,29 +182,46 @@
 
 <div class="head">
   <h1>Workflows</h1>
+  <span class="count num muted">{workflows.length}</span>
   <WorkspacePicker />
-  <span class="muted">{workflowDir}</span>
-  <div class="filters">
-    <select bind:value={shape} class="shape" aria-label="shape">
-      <option value="">any shape</option>
-      {#each shapesPresent as value (value)}
-        <option {value}>{value}</option>
-      {/each}
-    </select>
-    <input placeholder="filter…" bind:value={filter} class="filter" />
-  </div>
-  <a class="newlink" href="#/edit" title="new workflow"><Plus size={15} /></a>
+  <span class="flex"></span>
+  <input placeholder="filter…" bind:value={filter} class="filter" />
+  <a class="newlink plain" href="#/edit" title="new workflow"
+    ><Plus size={15} /></a
+  >
 </div>
 
 {#if error}
   <p class="muted">Could not load workflows: {error}</p>
 {/if}
 
+<!-- Shape is what people choose by, so the vocabulary is visible rather
+     than folded into a select nobody opens -->
+{#if shapesPresent.length}
+  <div class="shapes" role="group" aria-label="filter by shape">
+    <button
+      class="shapebtn"
+      class:on={shape === ''}
+      aria-pressed={shape === ''}
+      onclick={() => (shape = '')}>all</button
+    >
+    {#each shapesPresent as value (value)}
+      <button
+        class="shapebtn"
+        class:on={shape === value}
+        aria-pressed={shape === value}
+        onclick={() => (shape = shape === value ? '' : value)}
+        title="show only workflows that make {value}">{value}</button
+      >
+    {/each}
+  </div>
+{/if}
+
 {#if traitsPresent.length}
   <div class="chips">
     {#each traitsPresent as trait (trait)}
       <button
-        class="chip"
+        class="traitchip"
         class:on={traits.includes(trait)}
         aria-pressed={traits.includes(trait)}
         onclick={() => toggleTrait(trait)}
@@ -161,66 +239,73 @@
 </HintBar>
 
 <FolderGroups
-  names={visible}
+  names={ordered}
   collapseKey="collapsed-folders"
   {filterActive}
   newHref="#/edit"
+  minColumn="200px"
   onnewingroup={(group) => sessionStorage.setItem('dw-editor-folder', group)}
 >
   {#snippet card(name)}
     {@const detail = details[name]}
-    <a
-      class="card panel"
-      href={href(name)}
-      title={detail?.description || undefined}
-    >
-      <span class="cardtop">
-        <span class="cardname">{leafOf(name)}</span>
-      </span>
-      {#if detail?.shape || detail?.traits?.length}
-        <span class="cardbadges muted">
-          {#if detail?.shape}<span
-              class="badge"
-              title="what this workflow makes">{detail.shape}</span
-            >{/if}
-          {#each detail?.traits ?? [] as trait (trait)}<span
-              class="badge trait"
-              title="trait: {trait}">{trait}</span
-            >{/each}
+    {@const proof = proofs[name]}
+    <a class="card" href={href(name)} title={cardTitle(name, detail)}>
+      <!-- The proof: what this workflow actually made last time. In a tool
+           whose entire output is pictures, the picture is the description.
+           A workflow that has never run gets no frame at all rather than a
+           grey placeholder - a fresh workspace would otherwise be a wall of
+           empty plates, and the extra height is worth spending only where
+           there is something to look at. Card height ends up saying which
+           workflows you have actually used. -->
+      {#if proof}
+        <span class="cardframe">
+          {#if proof.kind === 'image'}
+            <img
+              src={api.galleryThumbnailUrl(proof.name)}
+              alt=""
+              loading="lazy"
+              decoding="async"
+            />
+          {:else}
+            <video src={proof.url} muted playsinline preload="metadata"></video>
+          {/if}
         </span>
       {/if}
-      <span class="cardmeta muted">
-        {#if detail?.configures}<span
-            class="configures"
-            title="a tuned configuration of {detail.configures}"
-            >configures {leafOf(detail.configures)}</span
-          >{/if}
-        {#if detail?.writable === false}<span
-            title="read-only: from the {detail.origin} directory"
-            >{detail.origin}</span
-          >{/if}
-        {#if detail?.kinds.includes('image')}<Image size={13} />{/if}
-        {#if detail?.kinds.includes('video')}<Film size={13} />{/if}
-        {#if detail?.kinds.includes('audio')}<Music size={13} />{/if}
-        {#if (detail?.steps ?? 0) > 1}<span
-            title="{detail.steps} steps run in sequence"
-            >{detail.steps} steps</span
-          >{/if}
-        {#if detail?.variables}<span
-            title="{detail.variables} variables to tweak"
-            >{detail.variables} vars</span
-          >{/if}
-        {#if detail?.cost?.length}<span
-            class="cost"
-            title="measured on {detail.cost[0].name ?? detail.cost[0].device}"
-            >{formatCost(detail.cost)}</span
-          >{/if}
+      <span class="caption">
+        <span class="cardname">{leafOf(name)}</span>
+        <span class="cardmeta muted">
+          {#if detail?.shape}<span class="shape">{detail.shape}</span>{/if}
+          {#if detail?.kinds.includes('image')}<Image size={12} />{/if}
+          {#if detail?.kinds.includes('video')}<Film size={12} />{/if}
+          {#if detail?.kinds.includes('audio')}<Music size={12} />{/if}
+          <span class="flex"></span>
+          {#if (detail?.steps ?? 0) > 1}
+            <span class="num">{detail?.steps} steps</span>
+          {:else if detail?.variables}
+            <span class="num">{detail.variables} vars</span>
+          {/if}
+        </span>
+        <!-- A measured run is the most concrete thing on the card - what it
+             will cost you to press Run - so it gets its own line instead of
+             competing for the meta row's leftovers -->
+        {#if detail?.cost?.length}
+          <span class="cost num muted">{formatCost(detail.cost)}</span>
+        {/if}
+        {#if detail?.summary || detail?.description}
+          <span class="carddesc muted"
+            >{detail.summary || detail.description}</span
+          >
+        {/if}
+        {#if detail?.configures || detail?.writable === false}
+          <span class="cardfoot muted">
+            {#if detail?.configures}configures {leafOf(
+                detail.configures,
+              )}{/if}{#if detail?.configures && detail?.writable === false}
+              ·
+            {/if}{#if detail?.writable === false}{detail.origin}, read-only{/if}
+          </span>
+        {/if}
       </span>
-      {#if detail?.summary || detail?.description}
-        <span class="carddesc muted"
-          >{detail.summary || detail.description}</span
-        >
-      {/if}
     </a>
   {/snippet}
 </FolderGroups>
@@ -231,7 +316,15 @@
     No workflows yet — the + above creates the first one.
   </Empty>
 {:else if loaded && visible.length === 0}
-  <p class="muted">Nothing matches "{filter}".</p>
+  <p class="muted">Nothing matches those filters.</p>
+{/if}
+
+<!-- Where the files live is worth knowing and not worth the subtitle slot
+     beside the title, which is the best position on the page -->
+{#if workflowDir}
+  <p class="dir muted">
+    read from <span class="path">{workflowDir}</span>
+  </p>
 {/if}
 
 <style>
@@ -239,133 +332,183 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.4rem 1rem;
-    margin-bottom: 1rem;
+    gap: 0.4rem 0.8rem;
+    margin-bottom: var(--space-4);
   }
-  .filters {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    margin-left: auto;
+  .head .flex {
+    flex: 1;
+  }
+  .count {
+    font-size: var(--t-sm);
   }
   .filter {
     max-width: 220px;
   }
-  .shape {
-    font-size: 0.8rem;
+  .newlink {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.4rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-1);
+    color: var(--muted);
   }
+  .newlink:hover {
+    border-color: var(--ink);
+    color: var(--ink);
+  }
+
+  /* Shape: the primary cut through the catalog, so it reads as a row of
+     choices rather than a set of tags */
+  .shapes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.2rem;
+    margin-bottom: var(--space-2);
+    border-bottom: 1px solid var(--line);
+    padding-bottom: var(--space-2);
+  }
+  .shapebtn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-1);
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: var(--t-sm);
+    font-weight: 500;
+    padding: 0.2rem 0.55rem;
+    cursor: pointer;
+  }
+  .shapebtn:hover {
+    color: var(--ink);
+    background: var(--panel-2);
+    filter: none;
+  }
+  .shapebtn.on {
+    background: var(--ink);
+    color: var(--panel);
+    border-color: var(--ink);
+    font-weight: 600;
+  }
+
+  /* Traits narrow further, so they are quieter than shape and read as a
+     second-order refinement */
   .chips {
     display: flex;
     flex-wrap: wrap;
     gap: 0.3rem;
-    margin-bottom: 0.8rem;
+    margin-bottom: var(--space-4);
   }
-  /* A chip narrows the listing the page already holds - no refetch, so the
-     selected set reads as part of the filter row rather than a mode */
-  .chip {
+  .traitchip {
     background: none;
     border: 1px solid var(--line);
     border-radius: 999px;
     color: var(--muted);
-    font-size: 0.72rem;
+    font-size: var(--t-xs);
     font-weight: 500;
-    padding: 0.1rem 0.5rem;
+    padding: 0.05rem 0.5rem;
     cursor: pointer;
   }
-  .chip:hover {
+  .traitchip:hover {
     color: var(--ink);
+    border-color: var(--muted);
     filter: none;
   }
-  .chip.on {
-    border-color: var(--accent);
-    color: var(--accent);
+  .traitchip.on {
+    background: var(--ink);
+    border-color: var(--ink);
+    color: var(--panel);
   }
-  .newlink {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.4rem;
+
+  /* A frame on a contact sheet: the picture bleeds to the top edge, the
+     caption is a separate strip below it */
+  .card {
+    display: flex;
+    flex-direction: column;
+    color: var(--ink);
+    background: var(--panel);
     border: 1px solid var(--line);
-    border-radius: 6px;
-    color: var(--muted);
+    border-radius: var(--radius-2);
+    overflow: hidden;
   }
-  .newlink:hover {
-    border-color: var(--accent);
-    color: var(--accent);
+  .card:hover {
+    border-color: var(--ink);
   }
-  .card {
-    color: var(--ink);
-    font-weight: 600;
-    padding: 0.7rem 0.9rem;
+  /* A banner across the top of a card rather than a free-standing frame:
+     the card's own border surrounds it, so it contributes only the rule
+     that separates the picture from its caption */
+  .cardframe {
+    display: block;
+    aspect-ratio: 4 / 3;
+    background: var(--panel-2);
+    border-bottom: 1px solid var(--line);
+    overflow: hidden;
+  }
+  .cardframe img,
+  .cardframe video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .caption {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: 0.2rem;
+    padding: 0.55rem 0.7rem 0.65rem;
   }
-  .card:hover {
-    border-color: var(--accent);
+  .cardname {
+    font-family: var(--font-mono);
+    font-size: var(--t-sm);
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  .cardtop {
+  .cardmeta {
     display: flex;
     align-items: center;
-    width: 100%;
+    gap: 0.35rem;
+    font-size: var(--t-xs);
   }
-  .cardname {
+  .cardmeta .flex {
     flex: 1;
+    min-width: 0.4rem;
+  }
+  .shape {
+    font-family: var(--font-mono);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 0.95rem;
+  }
+  .cost {
+    font-size: var(--t-xs);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .carddesc {
-    font-weight: 400;
-    font-size: 0.78rem;
-    line-height: 1.35;
+    font-size: var(--t-xs);
+    line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
-  /* Marks a model config as a tuned instance of a template rather than a
-     pattern to copy - the one distinction the two-tree catalog turns on */
-  .configures {
-    border: 1px solid currentColor;
-    border-radius: 3px;
-    padding: 0 0.25rem;
-    opacity: 0.75;
-    white-space: nowrap;
-  }
-
-  /* shape and traits: what the catalog is chosen by, so they sit with the
-     kind icons rather than in the description */
-  .badge {
-    border: 1px solid currentColor;
-    border-radius: 3px;
-    padding: 0 0.25rem;
-    opacity: 0.75;
-    white-space: nowrap;
-  }
-  .badge.trait {
-    opacity: 0.6;
-  }
-  .cost {
+  .cardfoot {
+    font-size: var(--t-xs);
+    opacity: 0.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  /* Shape and traits on a row of their own: sharing the meta line with the
-     origin, icons and counts wrapped at a different point on every card */
-  .cardbadges {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.3rem;
-    font-size: 0.7rem;
-    font-weight: 500;
+  .dir {
+    margin-top: 2.5rem;
+    font-size: var(--t-xs);
   }
-  .cardmeta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.35rem;
-    font-size: 0.72rem;
-    font-weight: 500;
+  .path {
+    font-family: var(--font-mono);
+    word-break: break-all;
   }
 </style>
diff --git a/ui/src/lib/pages/WorkflowsPage.test.ts b/ui/src/lib/pages/WorkflowsPage.test.ts
index b509ce73..7bec0931 100644
--- a/ui/src/lib/pages/WorkflowsPage.test.ts
+++ b/ui/src/lib/pages/WorkflowsPage.test.ts
@@ -4,6 +4,7 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from '@testing-library/svelte'
 import { afterEach, beforeEach, expect, it, vi } from 'vitest'
 // Hoisted above the imports so the static import of the component below -
@@ -40,6 +41,11 @@ vi.mock('../api', () => ({
     // WorkspacePicker mounts with the page; a listing that never lands
     // leaves it hidden, which is what a single-workspace server shows
     listWorkspaces: vi.fn(() => new Promise(() => {})),
+    // The proof thumbnails load beside the listing. These tests are about
+    // the catalog's text, so the gallery answers empty and every card
+    // renders in its no-output form.
+    gallery: vi.fn(() => Promise.resolve({ files: [] })),
+    galleryThumbnailUrl: (name: string) => `/api/gallery/${name}/thumbnail`,
   },
 }))
 
@@ -102,13 +108,18 @@ it('narrows the list to one shape', async () => {
   await renderPage('tti')
   expect(card('shot')).toBeTruthy()
 
-  await fireEvent.change(screen.getByLabelText('shape'), {
-    target: { value: 'shot' },
-  })
+  // Shape is a row of buttons rather than a select, so the vocabulary is
+  // visible without opening anything
+  const shapes = screen.getByRole('group', { name: 'filter by shape' })
+  await fireEvent.click(within(shapes).getByRole('button', { name: 'shot' }))
 
   await waitFor(() => expect(card('tti')).toBeNull())
   expect(card('shot')).toBeTruthy()
   expect(card('flux-dev')).toBeNull()
+
+  // and pressing the active one again clears the filter
+  await fireEvent.click(within(shapes).getByRole('button', { name: 'shot' }))
+  await waitFor(() => expect(card('tti')).toBeTruthy())
 })
 
 it('ANDs two traits together rather than widening', async () => {
@@ -131,10 +142,11 @@ it('ANDs two traits together rather than widening', async () => {
 it('shows the measured cost and omits it when nothing was measured', async () => {
   await renderPage('tti')
 
-  expect(screen.getByText('~3 min · 22 GB (RTX 4090)')).toBeTruthy()
-  // Under a minute reads as a bound, and an entry naming no accelerator
-  // drops the parenthetical rather than showing an empty one
-  expect(screen.getByText('<1 min · 0.5 GB')).toBeTruthy()
+  // The accelerator it was measured on moves to the card's tooltip - the
+  // caption has room for the numbers, not for the hardware
+  expect(screen.getByText('~3 min · 22 GB VRAM')).toBeTruthy()
+  // Under a minute reads as a bound rather than a rounded zero
+  expect(screen.getByText('<1 min · 0.5 GB VRAM')).toBeTruthy()
   // cost: null - the card says nothing rather than guessing
   expect(card('tti')?.textContent).not.toContain('min')
 })
@@ -154,7 +166,7 @@ it('keeps a fractional measurement rather than rounding it away', async () => {
     },
   }
   await renderPage('half')
-  expect(screen.getByText('~1.5 min · 8 GB')).toBeTruthy()
+  expect(screen.getByText('~1.5 min · 8 GB VRAM')).toBeTruthy()
 })
 
 it('shows the summary rather than the whole description', async () => {
diff --git a/ui/src/lib/schema/SchemaNode.svelte b/ui/src/lib/schema/SchemaNode.svelte
index 5cdaec2d..6c09d997 100644
--- a/ui/src/lib/schema/SchemaNode.svelte
+++ b/ui/src/lib/schema/SchemaNode.svelte
@@ -216,7 +216,7 @@
     flex-shrink: 0;
   }
   .name {
-    font-family: var(--mono, ui-monospace, monospace);
+    font-family: var(--font-mono);
     font-weight: 600;
   }
   .req {