From eb91279a3bca23047be11a6f568924cd5519c385 Mon Sep 17 00:00:00 2001
From: Codeman maintainer <noreply@anthropic.com>
Date: Sat, 7 Nov 2026 03:21:35 +0100
Subject: [PATCH] feat(local-model): a memory map and real colour in the
 chooser, the button first

The owner's verdict on the chooser: nice, but not nice enough, too much just
blue. He also wants "Run a local model" on top of the start screen, above
Run Claude Code.

The memory bar is now a map: the model, its context and the brief peaks side
by side on the track of what this Mac can give a model, each with its size in
a legend, and the verdict on the fit beside the figure. recommend() sends what
the need is made of as `Candidate.memory`.

Colour now carries meaning: green for good and tested, amber for tight, orange
for slow, teal for the context. Violet is the feature's own colour, on its
start screen button and its main action. Every row has a size tile and a speed
gauge scaled to the fastest row in the list. The light skins get deeper values
of the same colours, and the window is 40 px taller to hold it without
scrolling.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/local-model/recommend.ts       |   5 +
 src/types/local-model.ts           |   6 +
 src/web/public/i18n.js             |   9 +-
 src/web/public/index.html          |   6 +-
 src/web/public/local-model-ui.js   | 120 ++++++++---
 src/web/public/styles.css          | 308 +++++++++++++++++++++++------
 test/local-model-recommend.test.ts |   2 +
 test/local-model-ui.test.ts        |  87 ++++++--
 8 files changed, 432 insertions(+), 111 deletions(-)

diff --git a/src/local-model/recommend.ts b/src/local-model/recommend.ts
index 54a747f4..1d3c84cf 100644
--- a/src/local-model/recommend.ts
+++ b/src/local-model/recommend.ts
@@ -295,6 +295,11 @@ function buildCandidate(
     ...(harness.row.slowFirstTurn ? { slowFirstTurn: true } : {}),
     needBytes: need,
     needGb: formatGb(need),
+    memory: {
+      modelBytes: model.bytes + model.overheadBytes,
+      contextBytes: model.heldBytesPerToken * ctx,
+      peakBytes: model.peakExtraBytes,
+    },
     downloadBytes: model.bytes,
     downloadGb: formatGb(model.bytes),
     budgetShare: round(need / budgetBytes, 3),
diff --git a/src/types/local-model.ts b/src/types/local-model.ts
index 5baa6903..16725a6e 100644
--- a/src/types/local-model.ts
+++ b/src/types/local-model.ts
@@ -481,6 +481,12 @@ export interface Candidate {
   needBytes: number;
   /** `needBytes` as decimal GB text, no unit. */
   needGb: string;
+  /**
+   * What `needBytes` is made of, for the chooser's memory map: the model (`bytes +
+   * overheadBytes`), its context in use (`heldBytesPerToken * context`) and the brief peaks
+   * (`peakExtraBytes`). The three add up to `needBytes`.
+   */
+  memory?: { modelBytes: number; contextBytes: number; peakBytes: number };
   /** The model download in bytes (`LocalModelEntry.bytes`). */
   downloadBytes: number;
   /** `downloadBytes` as decimal GB text, no unit. */
diff --git a/src/web/public/i18n.js b/src/web/public/i18n.js
index ac8622f7..f1362f5c 100644
--- a/src/web/public/i18n.js
+++ b/src/web/public/i18n.js
@@ -1435,9 +1435,12 @@
     estimated: '估算',
     'The selected model needs {share}% of the memory this Mac can give a model':
       '所选模型需要此 Mac 可分配给模型的内存的 {share}%',
-    'The model at its peak, with all {context} tokens of context in use':
-      '模型的峰值占用（{context} 个 Token 的上下文全部用满时）',
-    'What stays free': '剩余可用',
+    'The model': '模型',
+    'Context, {context} tokens': '上下文，{context} 个 Token',
+    'Brief peaks': '短时峰值',
+    'Stays free': '剩余可用',
+    'Good fit': '宽裕',
+    'Tight fit': '偏紧',
     'Models that fit this Mac': '此 Mac 装得下的模型',
     Speed: '速度',
     Download: '下载',
diff --git a/src/web/public/index.html b/src/web/public/index.html
index c3c502c0..ddcc162f 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -510,10 +510,9 @@
                it sits under them as a quiet link; settings-ui.js rewrites its
                contents on every state change and owns its inline display. -->
           <div class="welcome-actions">
-            <div class="welcome-cli-actions" id="welcomeCliActions"></div>
             <!-- A model that runs on the Mac the server runs on (local-model-ui.js).
-                 One button in the chip family, a sibling of the launcher slot and
-                 never inside it (renderWelcomeCliActions empties that slot on every
+                 The first thing on the start screen, above the launchers, in the size of
+                 the primary button. A sibling of the launcher slot and never inside it (renderWelcomeCliActions empties that slot on every
                  state change). Ships `hidden`: only that module reveals it, once the
                  server has answered for a Mac. It opens the chooser window
                  (#localModelModal) and the module writes its label through its own
@@ -522,6 +521,7 @@
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9.5 2.5v3.5M14.5 2.5v3.5M9.5 18v3.5M14.5 18v3.5M2.5 9.5H6M2.5 14.5H6M18 9.5h3.5M18 14.5h3.5"/></svg>
               <span class="welcome-label" id="welcomeLocalModelLabel">Run a local model</span>
             </button>
+            <div class="welcome-cli-actions" id="welcomeCliActions"></div>
             <button type="button" class="welcome-tunnel-link" id="welcomeTunnelBtn" style="display: none;" onclick="app.toggleTunnelFromWelcome()">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
               Cloudflare Tunnel
diff --git a/src/web/public/local-model-ui.js b/src/web/public/local-model-ui.js
index 19964c5f..e69dfa4e 100644
--- a/src/web/public/local-model-ui.js
+++ b/src/web/public/local-model-ui.js
@@ -14,7 +14,7 @@
  *
  * ## Three surfaces, one window
  *
- *  - Welcome screen: ONE button (`#welcomeLocalModelBtn`) under the launchers, in the chip
+ *  - Welcome screen: ONE large button (`#welcomeLocalModelBtn`) above the launchers, on the chip
  *    family. "Run a local model", or "Local model" once one is installed. Ships `hidden` and
  *    shows only once the server has answered for a Mac.
  *  - App Settings > Models: one row (`#localModelSettings`), the state in a few words, and a
@@ -324,6 +324,72 @@ function localModelBar({ share, role, label, kind, from }) {
   return bar;
 }
 
+/**
+ * The memory map: one bar for what this Mac can give a model, split into what the selected
+ * model takes of it. The track that stays is what stays free. A candidate without its parts
+ * (`memory`) gets one plain fill.
+ */
+function localModelMemoryBar(candidate, budgetBytes, last, label) {
+  const percent = (bytes) => (budgetBytes > 0 ? Math.max(0, (bytes / budgetBytes) * 100) : 0);
+  const parts = candidate.memory;
+  const bar = localModelBar({ share: candidate.budgetShare, role: 'meter', kind: 'memory', from: last.memory, label });
+  if (!parts) return bar;
+  const fills = [
+    ['model', parts.modelBytes],
+    ['context', parts.contextBytes],
+    ['peak', parts.peakBytes],
+  ];
+  bar.replaceChildren(
+    ...fills.map(([name, bytes]) => {
+      const to = Math.min(100, Math.round(percent(bytes) * 10) / 10);
+      const fill = localModelEl('div', `lm-bar-fill lm-part-${name}`);
+      fill.dataset.kind = `memory-${name}`;
+      fill.dataset.to = String(to);
+      const from = last[fill.dataset.kind];
+      fill.style.width = `${Number.isFinite(from) ? from : to}%`;
+      return fill;
+    })
+  );
+  return bar;
+}
+
+/** The legend under the memory map: a swatch, what it stands for and its size in whole GB. */
+function localModelMemoryParts(candidate, budgetBytes) {
+  const parts = candidate.memory;
+  if (!parts) return null;
+  const gb = (bytes) => localModelGb(String(Math.round(Math.max(0, bytes) / 1e9)));
+  const free = budgetBytes - parts.modelBytes - parts.contextBytes - parts.peakBytes;
+  const rows = [
+    ['model', localModelT('The model'), parts.modelBytes],
+    [
+      'context',
+      localModelT('Context, {context} tokens', { context: localModelCount(candidate.context) }),
+      parts.contextBytes,
+    ],
+    ['peak', localModelT('Brief peaks'), parts.peakBytes],
+    ['free', localModelT('Stays free'), free],
+  ];
+  const legend = localModelEl('div', 'lm-legend');
+  for (const [name, text, bytes] of rows) {
+    const item = localModelEl('span', 'lm-legend-item');
+    item.appendChild(localModelEl('span', `lm-swatch lm-part-${name}`));
+    item.appendChild(localModelEl('span', 'lm-legend-name', text));
+    item.appendChild(localModelEl('span', 'lm-legend-size', gb(bytes)));
+    legend.appendChild(item);
+  }
+  return legend;
+}
+
+/** The size tile of a model row: its billions of parameters, coloured by how large it is. */
+function localModelTile(candidate) {
+  const size = Number(candidate.paramsB);
+  if (!Number.isFinite(size) || size <= 0) return localModelEl('span', 'lm-tile');
+  const tone = size >= 30 ? 'large' : size >= 15 ? 'mid' : 'small';
+  const tile = localModelEl('span', `lm-tile lm-tile-${tone}`, `${Math.floor(size)}B`);
+  tile.setAttribute('aria-hidden', 'true');
+  return tile;
+}
+
 /**
  * One row of the confirm screen's table: what is fetched, how large it is, and under the name
  * a second line that says what it is (`note`) and, for a coding agent, the literal command of
@@ -944,8 +1010,8 @@ Object.assign(CodemanApp.prototype, {
     );
   },
 
-  /** One model row of the chooser: a radio with the name, the tag, the speed and the download. */
-  _localModelRow(candidate, { checked, tabStop }) {
+  /** One model row of the chooser: radio, size tile, name, tag, speed with its gauge, download. */
+  _localModelRow(candidate, { checked, tabStop, topSpeed }) {
     const row = localModelEl('div', 'lm-model');
     row.setAttribute('role', 'radio');
     row.setAttribute('aria-checked', checked ? 'true' : 'false');
@@ -954,6 +1020,7 @@ Object.assign(CodemanApp.prototype, {
     row.dataset.modelId = candidate.modelId;
     row.appendChild(localModelEl('span', 'lm-radio'));
     if (checked) row.classList.add('lm-model-on');
+    row.appendChild(localModelTile(candidate));
     row.appendChild(localModelEl('span', 'lm-model-name', String(candidate.modelLabel || candidate.modelId)));
     const tagSlot = localModelEl('span', 'lm-model-tag');
     const label = candidate.tag && typeof candidate.tag.label === 'string' ? candidate.tag.label : '';
@@ -961,10 +1028,23 @@ Object.assign(CodemanApp.prototype, {
       const tag = localModelEl('span', 'lm-tag', localModelT(label));
       // The tags of the row the window opens on take the accent. Every other tag is quiet.
       if (LOCAL_MODEL_ACCENT_TAGS.includes(candidate.tag.kind)) tag.classList.add('lm-tag-accent');
+      tag.classList.add(`lm-tag-${candidate.tag.kind}`);
       tagSlot.appendChild(tag);
     }
     row.appendChild(tagSlot);
-    row.appendChild(localModelEl('span', 'lm-model-speed', localModelSpeedText(candidate)));
+    const speed = localModelEl('span', 'lm-model-speed', localModelSpeedText(candidate));
+    const gauge = localModelEl(
+      'span',
+      `lm-gauge lm-gauge-${candidate.speed === 'slow' ? 'slow' : candidate.speed === 'ok' ? 'ok' : 'unknown'}`
+    );
+    const fast = Number(candidate.tokensPerSecond);
+    if (Number.isFinite(fast) && topSpeed > 0) {
+      const needle = localModelEl('span', 'lm-gauge-fill');
+      needle.style.width = `${Math.max(6, Math.round((fast / topSpeed) * 100))}%`;
+      gauge.appendChild(needle);
+    }
+    speed.appendChild(gauge);
+    row.appendChild(speed);
     row.appendChild(localModelEl('span', 'lm-model-size', localModelGb(candidate.downloadGb)));
     return row;
   },
@@ -989,29 +1069,22 @@ Object.assign(CodemanApp.prototype, {
     if (recommendation.budgetSource === 'estimated') {
       head.appendChild(localModelEl('span', 'lm-figure-aside', localModelT('estimated')));
     }
+    const fitWord =
+      candidate.fit === 'tight' ? localModelT('Tight fit') : candidate.fit === 'good' ? localModelT('Good fit') : '';
+    if (fitWord) head.appendChild(localModelEl('span', `lm-fit lm-fit-${candidate.fit}`, fitWord));
     meter.appendChild(head);
     const share = String(Math.round((Number.isFinite(candidate.budgetShare) ? candidate.budgetShare : 0) * 100));
+    // The bar is the model at its PEAK, split into what makes that peak.
     meter.appendChild(
-      localModelBar({
-        share: candidate.budgetShare,
-        role: 'meter',
-        kind: 'memory',
-        from: last.memory,
-        label: localModelT('The selected model needs {share}% of the memory this Mac can give a model', { share }),
-      })
-    );
-    const legend = localModelEl('div', 'lm-legend');
-    const context = localModelCount(candidate.context);
-    // The fill is the model at its PEAK. The installed line uses the same words for it.
-    legend.appendChild(
-      localModelEl(
-        'span',
-        '',
-        localModelT('The model at its peak, with all {context} tokens of context in use', { context })
+      localModelMemoryBar(
+        candidate,
+        Number(recommendation.budgetBytes),
+        last,
+        localModelT('The selected model needs {share}% of the memory this Mac can give a model', { share })
       )
     );
-    legend.appendChild(localModelEl('span', '', localModelT('What stays free')));
-    meter.appendChild(legend);
+    const legend = localModelMemoryParts(candidate, Number(recommendation.budgetBytes));
+    if (legend) meter.appendChild(legend);
     parts.push(meter);
 
     // The server's headline: its word for a pick it has run on a Mac like this one labels the
@@ -1035,9 +1108,10 @@ Object.assign(CodemanApp.prototype, {
     const group = localModelEl('div', 'lm-models');
     group.setAttribute('role', 'radiogroup');
     group.setAttribute('aria-labelledby', 'localModelListLabel');
+    const topSpeed = Math.max(0, ...candidates.map((row) => Number(row.tokensPerSecond) || 0));
     for (const row of candidates) {
       const checked = row === candidate;
-      const el = this._localModelRow(row, { checked, tabStop: checked });
+      const el = this._localModelRow(row, { checked, tabStop: checked, topSpeed });
       el.addEventListener('click', () => this.selectLocalModel(row.modelId));
       group.appendChild(el);
     }
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index e7fb7007..f23a4942 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -22327,31 +22327,55 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
    body scrolling between them. A click never moves the next button away.
    ═══════════════════════════════════════════════════════════════ */
 
-/* The welcome button: a second large button under the launchers, in the size
-   of the primary one, so a model on this Mac is offered as a main way in and
-   not as a footnote (the owner asked for it big and in the middle). It keeps
-   the chip's markup and the chip family's rules for everything it does not
-   restate here. */
+/* The feature's own colours. Violet is what the local model is known by, on
+   the start screen and in its window; the others carry meaning (green good,
+   amber tight, orange slow, teal the context). All of them are set here, once,
+   and the light skins get deeper values so they hold on a pale page. */
+:root {
+  --lm-violet: #a78bfa;
+  --lm-teal: #2dd4bf;
+  --lm-amber: #f5c451;
+  --lm-orange: #fb923c;
+  --lm-good: #4ade80;
+  --lm-cta-a: #8567f4;
+  --lm-cta-b: #6346e0;
+  --lm-cta-hover-a: #9479f7;
+  --lm-cta-hover-b: #7054ea;
+}
+
+html[data-skin='paper-gray'],
+html[data-skin='solarized-light'],
+html[data-skin='catppuccin-latte'],
+html[data-skin='rose-pine-dawn'] {
+  --lm-violet: #6d3fd8;
+  --lm-teal: #0b8378;
+  --lm-amber: #a86a00;
+  --lm-orange: #c2500f;
+  --lm-good: #16803c;
+}
+
+/* The welcome button: the first thing on the start screen, above the launchers,
+   in the size of the primary button and in the feature's violet. */
 .welcome-local-model {
-  margin-top: 1.1rem;
+  margin-bottom: 1.1rem;
   height: 46px;
   gap: 0.65rem;
   padding: 0 1.4rem 0 0.45rem;
-  border: 1px solid var(--accent);
+  border: 1px solid var(--lm-cta-a);
   border-radius: 23px;
-  background: var(--control-bg);
-  color: var(--accent);
+  background: linear-gradient(135deg, var(--lm-cta-a), var(--lm-cta-b));
+  color: #fff;
   font-size: 0.95rem;
   font-weight: 700;
   letter-spacing: 0.005em;
-  box-shadow: 0 8px 24px -14px rgba(var(--accent-rgb), 0.5);
+  box-shadow: 0 8px 24px -12px rgba(99, 70, 224, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 
 .welcome-local-model:hover,
 .welcome-local-model:focus-visible {
-  background: rgba(var(--accent-rgb), 0.12);
-  color: var(--accent);
-  border-color: var(--accent);
+  border-color: var(--lm-cta-hover-a);
+  background: linear-gradient(135deg, var(--lm-cta-hover-a), var(--lm-cta-hover-b));
+  color: #fff;
 }
 
 /* `.welcome-chip` is inline-flex, so `[hidden]` needs re-asserting or the
@@ -22368,7 +22392,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
   padding: 8px;
   box-sizing: border-box;
   border-radius: 50%;
-  background: rgba(var(--accent-rgb), 0.16);
+  background: rgba(255, 255, 255, 0.18);
 }
 
 /* The window: App Settings' chrome (`.modal`, `.modal-header`, the boxed
@@ -22380,7 +22404,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
   flex-direction: column;
   width: min(640px, 94vw);
   max-width: min(640px, 94vw);
-  height: min(600px, 88vh);
+  height: min(640px, 88vh);
   max-height: 88vh;
 }
 
@@ -22518,7 +22542,17 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 .lm-meter {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.6rem;
+  padding: 0.8rem 0.9rem 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--lm-violet) 22%, var(--border));
+  border-radius: 12px;
+  background:
+    linear-gradient(
+      120deg,
+      color-mix(in srgb, var(--lm-violet) 11%, transparent),
+      color-mix(in srgb, var(--lm-teal) 6%, transparent) 75%
+    ),
+    var(--bg-input);
 }
 
 .lm-meter-head {
@@ -22529,7 +22563,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-figure {
-  font-size: 1.06rem;
+  font-size: 1.12rem;
   font-weight: 680;
   letter-spacing: -0.012em;
   color: var(--text);
@@ -22547,40 +22581,103 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
   font-variant-numeric: tabular-nums;
 }
 
-.lm-bar {
-  height: 10px;
+/* How the selected model fits, in the colour of its verdict. */
+.lm-fit {
+  align-self: center;
+  margin-inline-start: auto;
+  padding: 0.12rem 0.55rem;
   border-radius: 999px;
-  background: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.lm-fit-good {
+  background: color-mix(in srgb, var(--lm-good) 16%, transparent);
+  color: var(--lm-good);
+}
+
+.lm-fit-tight {
+  background: color-mix(in srgb, var(--lm-amber) 16%, transparent);
+  color: var(--lm-amber);
+}
+
+/* The bar: the track is what this Mac can give a model. The memory map fills it
+   with three parts side by side; a download fills it with one. */
+.lm-bar {
+  display: flex;
+  gap: 2px;
+  height: 12px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-muted) 34%, transparent);
   overflow: hidden;
 }
 
 .lm-bar-fill {
+  flex: none;
   height: 100%;
-  border-radius: 999px;
-  background: var(--accent);
+  border-radius: 2px;
+  background: linear-gradient(90deg, var(--lm-violet), var(--lm-teal));
   transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.lm-part-model {
+  background: var(--lm-violet);
+}
+
+.lm-part-context {
+  background: var(--lm-teal);
+}
+
+/* The brief peaks are not held all the time, so they are striped. */
+.lm-part-peak {
+  background: repeating-linear-gradient(
+    -45deg,
+    var(--lm-amber) 0 3px,
+    color-mix(in srgb, var(--lm-amber) 45%, transparent) 3px 6px
+  );
+}
+
+.lm-part-free {
+  background: color-mix(in srgb, var(--text-muted) 34%, transparent);
+}
+
 .lm-legend {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  gap: 1rem;
-  font-size: 0.7rem;
+  gap: 0.25rem 0.9rem;
+  font-size: 0.72rem;
   line-height: 1.4;
   color: var(--text-dim);
 }
 
-.lm-legend > :last-child {
-  text-align: end;
+.lm-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  white-space: nowrap;
+}
+
+.lm-swatch {
+  flex-shrink: 0;
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+}
+
+.lm-legend-size {
+  font-weight: 620;
+  color: var(--text);
 }
 
 /* ── the models: one grid, so the numbers line up down the list ──── */
-/* Radio, name, tag, speed, download. The tag sits next to the name and takes
-   the room that is left, which pushes the two numbers to the right edge. */
+/* Radio, size tile, name, tag, speed, download. The tag sits next to the name
+   and takes the room that is left, which pushes the two numbers to the right. */
 .lm-list {
   display: grid;
-  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto auto;
-  column-gap: 0.9rem;
+  grid-template-columns: auto auto minmax(0, max-content) minmax(0, 1fr) auto auto;
+  column-gap: 0.75rem;
   row-gap: 0.1rem;
   /* A row's fill reaches into the window's padding, so what is IN a row lines
      up with every other line of the window on both edges. */
@@ -22613,7 +22710,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-caption-label {
-  grid-column: 1 / span 3;
+  grid-column: 1 / span 4;
 }
 
 /* The server's word for a pick it has run on a Mac like this one stands where
@@ -22630,8 +22727,8 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-model {
-  min-height: 2.35rem;
-  border-radius: 7px;
+  min-height: 2.6rem;
+  border-radius: 9px;
   cursor: pointer;
   transition: background var(--transition-smooth);
 }
@@ -22641,15 +22738,19 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-model:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--lm-violet);
   outline-offset: -2px;
 }
 
-/* Selected: the accent on the reading edge and a faint fill. Nothing else. */
+/* Selected: violet on the reading edge and a fill that fades out to the right. */
 .lm-model-on,
 .lm-model-on:hover {
-  border-inline-start-color: var(--accent);
-  background: rgba(var(--accent-rgb), 0.075);
+  border-inline-start-color: var(--lm-violet);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--lm-violet) 17%, transparent),
+    color-mix(in srgb, var(--lm-violet) 4%, transparent)
+  );
 }
 
 .lm-radio {
@@ -22661,8 +22762,38 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-model-on .lm-radio {
-  border-color: var(--accent);
-  background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px);
+  border-color: var(--lm-violet);
+  background: radial-gradient(circle, var(--lm-violet) 0 3px, transparent 3.5px);
+}
+
+/* The size tile: a model's billions of parameters, coloured by how large it is. */
+.lm-tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 34px;
+  height: 25px;
+  border-radius: 7px;
+  font-size: 0.68rem;
+  font-weight: 720;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.lm-tile-large {
+  background: color-mix(in srgb, var(--lm-violet) 20%, transparent);
+  color: var(--lm-violet);
+}
+
+.lm-tile-mid {
+  background: color-mix(in srgb, var(--lm-teal) 18%, transparent);
+  color: var(--lm-teal);
+}
+
+.lm-tile-small {
+  background: color-mix(in srgb, var(--text-muted) 22%, transparent);
+  color: var(--text-dim);
 }
 
 .lm-model-name {
@@ -22678,21 +22809,37 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
   justify-content: flex-start;
 }
 
-/* A tag is text with a hairline, not a coloured pill. The accent is for the
-   pick (and for a row that was run on a Mac like this one). */
+/* A tag says one thing about a row, in the colour of what it says. */
 .lm-tag {
-  padding: 0.05rem 0.42rem;
-  border: 1px solid var(--border-light);
+  padding: 0.08rem 0.45rem;
   border-radius: 5px;
+  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
   font-size: 0.66rem;
+  font-weight: 600;
   line-height: 1.5;
   color: var(--text-dim);
   white-space: nowrap;
 }
 
-.lm-tag-accent {
-  border-color: rgba(var(--accent-rgb), 0.5);
-  color: var(--accent);
+.lm-tag-tested,
+.lm-tag-best {
+  background: color-mix(in srgb, var(--lm-good) 15%, transparent);
+  color: var(--lm-good);
+}
+
+.lm-tag-tested::before {
+  content: '\2713\00a0';
+}
+
+.lm-tag-best-tight,
+.lm-tag-tight {
+  background: color-mix(in srgb, var(--lm-amber) 15%, transparent);
+  color: var(--lm-amber);
+}
+
+.lm-tag-slow {
+  background: color-mix(in srgb, var(--lm-orange) 15%, transparent);
+  color: var(--lm-orange);
 }
 
 .lm-model-speed,
@@ -22703,10 +22850,41 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-model-speed {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 3px;
   font-size: 0.76rem;
   color: var(--text-dim);
 }
 
+/* The speed at a glance: full is the fastest model in the list. */
+.lm-gauge {
+  display: block;
+  width: 64px;
+  height: 3px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-muted) 26%, transparent);
+  overflow: hidden;
+}
+
+.lm-gauge-fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--lm-good);
+}
+
+.lm-gauge-slow .lm-gauge-fill {
+  background: var(--lm-orange);
+}
+
+.lm-gauge-unknown {
+  background: none;
+  border-top: 1px dashed color-mix(in srgb, var(--text-muted) 55%, transparent);
+  height: 0;
+}
+
 .lm-model-size {
   font-size: 0.8rem;
   font-weight: 560;
@@ -22722,8 +22900,8 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 
   .lm-caption,
   .lm-model {
-    grid-template-columns: 14px 10.5rem minmax(0, 1fr) 8.6rem 4.4rem;
-    column-gap: 0.9rem;
+    grid-template-columns: 14px 34px 9.5rem minmax(0, 1fr) 7rem 4rem;
+    column-gap: 0.75rem;
   }
 
   .lm-model {
@@ -22758,7 +22936,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-select:focus-visible {
-  border-color: var(--accent);
+  border-color: var(--lm-violet);
 }
 
 .lm-runs-hint {
@@ -22895,8 +23073,8 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-step-done .lm-step-mark {
-  border-color: var(--accent);
-  background: var(--accent);
+  border-color: var(--lm-good);
+  background: var(--lm-good);
 }
 
 /* The check of a finished step, drawn from two borders in the page colour. */
@@ -22907,7 +23085,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
   top: 1px;
   width: 3px;
   height: 6px;
-  border: solid var(--accent-ink);
+  border: solid var(--bg-card);
   border-width: 0 1.5px 1.5px 0;
   transform: rotate(45deg);
 }
@@ -22919,8 +23097,8 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-step-now .lm-step-mark {
-  border-color: var(--accent);
-  background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px);
+  border-color: var(--lm-violet);
+  background: radial-gradient(circle, var(--lm-violet) 0 3px, transparent 3.5px);
 }
 
 .lm-step-stopped .lm-step-mark {
@@ -22947,7 +23125,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 }
 
 .lm-dot-on {
-  background: var(--green);
+  background: var(--lm-good);
 }
 
 .lm-state-text {
@@ -23035,7 +23213,7 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
 
 .lm-check input {
   margin: 0;
-  accent-color: var(--accent);
+  accent-color: var(--lm-violet);
 }
 
 /* ── the foot: one promise on the left, the action on the right ──── */
@@ -23081,21 +23259,21 @@ html[data-tile-anim="soft"] .tile-grid-ghosts.tile-grid-ghosts--release:not(.til
   font-weight: 700;
 }
 
-/* OG has no designed --accent-ink: the main action takes the deeper blue and
-   light text of that skin's own Run button, as `.welcome-primary` does. Keep
-   the two in step. */
-html[data-skin='og'] .local-model-window .wt-btn-primary.lm-btn {
-  border-color: rgba(96, 165, 250, 0.5);
-  background: linear-gradient(135deg, #1e4fb8 0%, #2563eb 100%);
+/* The main action is the feature's violet on every skin, like its start screen
+   button: white text on the same gradient, so no skin needs a rule of its own. */
+.local-model-window .wt-btn-primary.lm-btn {
+  border-color: var(--lm-cta-a);
+  background: linear-gradient(135deg, var(--lm-cta-a), var(--lm-cta-b));
   color: #fff;
 }
 
-html[data-skin='og'] .local-model-window .wt-btn-primary.lm-btn:hover:not(:disabled) {
-  background: linear-gradient(135deg, #2454a8 0%, #2d6cf0 100%);
+.local-model-window .wt-btn-primary.lm-btn:hover:not(:disabled) {
+  border-color: var(--lm-cta-hover-a);
+  background: linear-gradient(135deg, var(--lm-cta-hover-a), var(--lm-cta-hover-b));
 }
 
 .local-model-window .wt-btn.lm-btn:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--lm-violet);
   outline-offset: 2px;
 }
 
diff --git a/test/local-model-recommend.test.ts b/test/local-model-recommend.test.ts
index 71726247..6ad0eb40 100644
--- a/test/local-model-recommend.test.ts
+++ b/test/local-model-recommend.test.ts
@@ -516,6 +516,7 @@ describe('the MacBook Pro (Mac17,13: Apple M5 Pro, 48 GB)', () => {
       // 23,105,798,956 + 37,000 x 131,072 + 3,000,000,000 + 5,000,000,000.
       needBytes: 35_955_462_956,
       needGb: '36.0',
+      memory: { modelBytes: 26_105_798_956, contextBytes: 4_849_664_000, peakBytes: 5_000_000_000 },
       // What a Mac really downloads (the MLX build), not the 22.6 GB of the registry manifest.
       downloadBytes: 23_105_798_956,
       downloadGb: '23.1',
@@ -2059,6 +2060,7 @@ describe('the shape of the answer', () => {
       'installBytes',
       'installGb',
       'license',
+      'memory',
       'modelId',
       'modelLabel',
       'needBytes',
diff --git a/test/local-model-ui.test.ts b/test/local-model-ui.test.ts
index b577c4c4..e2b866ae 100644
--- a/test/local-model-ui.test.ts
+++ b/test/local-model-ui.test.ts
@@ -528,7 +528,7 @@ async function opened(page: Mounted, first: LocalModelStatus, verb?: ApiHandler)
 // ---------- The page ----------
 
 describe('the markup the module fills', () => {
-  it('ships one hidden button among the welcome launchers, and no card', () => {
+  it('ships one hidden button above the welcome launchers, and no card', () => {
     const button = REAL_DOCUMENT.getElementById('welcomeLocalModelBtn')!;
     expect(button.hidden).toBe(true);
     expect(button.tagName).toBe('BUTTON');
@@ -538,8 +538,9 @@ describe('the markup the module fills', () => {
     expect(button.parentElement?.classList.contains('welcome-actions')).toBe(true);
     expect(button.closest('#welcomeCliActions')).toBeNull();
     const order = [...button.parentElement!.children].map((el) => el.id);
-    expect(order.indexOf('welcomeLocalModelBtn')).toBeGreaterThan(order.indexOf('welcomeCliActions'));
-    expect(order.indexOf('welcomeLocalModelBtn')).toBeLessThan(order.indexOf('welcomeTunnelBtn'));
+    // First on the start screen: the owner wants it above Run Claude Code.
+    expect(order.indexOf('welcomeLocalModelBtn')).toBe(0);
+    expect(order.indexOf('welcomeLocalModelBtn')).toBeLessThan(order.indexOf('welcomeCliActions'));
     expect(button.getAttribute('onclick')).toBe('app.openLocalModelWindow()');
     expect(button.hasAttribute('data-i18n-skip')).toBe(true);
     // The read-only card of the first version is gone, with its styles.
@@ -833,10 +834,6 @@ describe('the chooser', () => {
     expect(texts(body, '.lm-hw')).toEqual(['Apple M5 Pro, 48 GB memory, 897 GB free']);
     // An estimate, in whole GB: "about 36 of 38", never "36.0 of 37.6".
     expect(texts(body, '.lm-figure')).toEqual(['About 36 of 38 GB of memory']);
-    expect(texts(body, '.lm-legend span')).toEqual([
-      'The model at its peak, with all 131,072 tokens of context in use',
-      'What stays free',
-    ]);
 
     const group = body.querySelector('[role="radiogroup"]')!;
     const label = page.document.getElementById(group.getAttribute('aria-labelledby')!)!;
@@ -1072,20 +1069,76 @@ describe('the memory bar', () => {
       'The selected model needs 96% of the memory this Mac can give a model'
     );
 
-    const expected: Array<[number, string, string, string]> = [
-      [1, '81', 'About 31 of 38 GB of memory', 'The model at its peak, with all 131,072 tokens of context in use'],
-      [4, '45', 'About 17 of 38 GB of memory', 'The model at its peak, with all 65,536 tokens of context in use'],
-      [0, '96', 'About 36 of 38 GB of memory', 'The model at its peak, with all 131,072 tokens of context in use'],
+    const expected: Array<[number, string, string]> = [
+      [1, '81', 'About 31 of 38 GB of memory'],
+      [4, '45', 'About 17 of 38 GB of memory'],
+      [0, '96', 'About 36 of 38 GB of memory'],
     ];
-    for (const [index, percent, figure, legend] of expected) {
+    for (const [index, percent, figure] of expected) {
       page.body.querySelectorAll<HTMLElement>('[role="radio"]')[index].click();
       expect(meter(page).getAttribute('aria-valuenow')).toBe(percent);
       expect(fill(page).style.width).toBe(`${percent}%`);
       expect(texts(page.body, '.lm-figure')).toEqual([figure]);
-      expect(texts(page.body, '.lm-legend span')[0]).toBe(legend);
     }
   });
 
+  it('splits the bar into what the model takes, and names each part with its size', async () => {
+    const page = mount();
+    const memory = { modelBytes: 26_105_798_956, contextBytes: 4_849_664_000, peakBytes: 5_000_000_000 };
+    await opened(
+      page,
+      status({
+        pick: candidate({ memory, fit: 'tight', budgetShare: 0.957, context: 131072 }),
+        alternatives: [],
+        budgetBytes: 37_580_963_840,
+      })
+    );
+    const fills = [...page.body.querySelectorAll<HTMLElement>('.lm-bar .lm-bar-fill')];
+    expect(fills.map((el) => el.dataset.kind)).toEqual(['memory-model', 'memory-context', 'memory-peak']);
+    expect(fills.map((el) => el.style.width)).toEqual(['69.5%', '12.9%', '13.3%']);
+    // The meter still says the whole share, for a screen reader.
+    expect(page.body.querySelector('.lm-bar')!.getAttribute('aria-valuenow')).toBe('96');
+    expect(texts(page.body, '.lm-legend-name')).toEqual([
+      'The model',
+      'Context, 131,072 tokens',
+      'Brief peaks',
+      'Stays free',
+    ]);
+    expect(texts(page.body, '.lm-legend-size')).toEqual(['26 GB', '5 GB', '5 GB', '2 GB']);
+    expect(texts(page.body, '.lm-fit')).toEqual(['Tight fit']);
+    expect(page.body.querySelector('.lm-fit')!.classList.contains('lm-fit-tight')).toBe(true);
+  });
+
+  it('gives every row a size tile and a speed gauge scaled to the fastest row', async () => {
+    const page = mount();
+    await opened(
+      page,
+      status({
+        pick: candidate({ paramsB: 35, tokensPerSecond: 80, speed: 'ok' }),
+        alternatives: [
+          candidate({ modelId: 'b:1', modelLabel: 'B', paramsB: 27.8, tokensPerSecond: 8, speed: 'slow' }),
+          candidate({ modelId: 'c:1', modelLabel: 'C', paramsB: 9, tokensPerSecond: undefined, speed: 'unknown' }),
+        ],
+      })
+    );
+    expect(texts(page.body, '.lm-tile')).toEqual(['35B', '27B', '9B']);
+    const tiles = [...page.body.querySelectorAll('.lm-tile')];
+    expect(tiles.map((el) => el.className)).toEqual([
+      'lm-tile lm-tile-large',
+      'lm-tile lm-tile-mid',
+      'lm-tile lm-tile-small',
+    ]);
+    const gauges = [...page.body.querySelectorAll('.lm-gauge')];
+    expect(gauges.map((el) => el.className)).toEqual([
+      'lm-gauge lm-gauge-ok',
+      'lm-gauge lm-gauge-slow',
+      'lm-gauge lm-gauge-unknown',
+    ]);
+    expect(gauges[0].querySelector<HTMLElement>('.lm-gauge-fill')!.style.width).toBe('100%');
+    expect(gauges[1].querySelector<HTMLElement>('.lm-gauge-fill')!.style.width).toBe('10%');
+    expect(gauges[2].querySelector('.lm-gauge-fill')).toBeNull();
+  });
+
   it('never runs past its track', async () => {
     const page = mount();
     await opened(page, status({ pick: candidate({ budgetShare: 1.2 }), alternatives: [] }));
@@ -1093,11 +1146,11 @@ describe('the memory bar', () => {
     expect(fill(page).style.width).toBe('100%');
   });
 
-  it('is one flat fill on a track, and stands still when motion is not wanted', () => {
+  it('moves on a width transition, without a glow, and stands still when motion is not wanted', () => {
     const bar = STYLES.match(/\.lm-bar-fill \{[^}]*\}/)![0];
-    expect(bar).toContain('background: var(--accent);');
-    expect(bar).not.toMatch(/gradient|box-shadow|animation/);
-    expect(STYLES).toMatch(/\.lm-bar \{[^}]*height: 10px;[^}]*border-radius: 999px;/);
+    expect(bar).toContain('transition: width');
+    expect(bar).not.toMatch(/box-shadow|animation/);
+    expect(STYLES).toMatch(/\.lm-bar \{[^}]*height: 12px;[^}]*border-radius: 999px;/);
     expect(STYLES).toMatch(/@media \(prefers-reduced-motion: reduce\) \{\s*\.lm-bar-fill,[^}]*transition: none;/);
   });
 });