npm - mlx-bun - Versions diffs - 0.0.10 → 0.0.11 - Mend

mlx-bun 0.0.10 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/README.md +66 -21
package/THIRD_PARTY_LICENSES.md +1 -0
package/docs/archive/mlx-bun-lab-report.html +275 -0
package/docs/archive/wwdc-mlx-bun.html +848 -0
package/docs/design/audio-input-plan.md +356 -0
package/docs/design/batching-perf-path.md +58 -35
package/docs/design/batching-v2-plan.md +23 -9
package/docs/design/bucketing-stage.md +2 -1
package/docs/design/compat-cli-surface-design.md +4 -3
package/docs/design/decode-speed-program.md +172 -0
package/docs/design/docs-reorg-plan.md +1 -1
package/docs/design/dspark-serving-program.md +371 -0
package/docs/design/dspark-speculative-decoding.md +167 -5
package/docs/design/faithful-l1-consolidation.md +310 -0
package/docs/design/generic-model-support.md +8 -5
package/docs/design/grammar-spec-batching-integration.md +301 -0
package/docs/design/minicpm5-decode-megakernel.md +16 -11
package/docs/design/mlx-lm-tool-parity-plan.md +11 -1
package/docs/design/omlx-adoption-map.md +14 -6
package/docs/design/orpo-training.md +34 -30
package/docs/design/paged-kv-cache.md +214 -0
package/docs/design/parallel-slots.md +82 -49
package/docs/design/parity-tier-dag.md +43 -33
package/docs/design/repo-cleanup-plan.md +189 -0
package/docs/design/runtime-isolation.md +19 -3
package/docs/design/segmented-backward-training.md +3 -2
package/docs/design/ssd-kv-cold-tier.md +130 -0
package/docs/design/structured-output.md +484 -0
package/docs/design/the-dreaming-master-plan.md +2 -3
package/docs/design/turboquant-kv.md +235 -0
package/docs/design/unified-engine-frontier-plan.md +774 -0
package/docs/design/web-chat-beat-matrix.md +315 -0
package/docs/design/web-chat-redesign.md +1112 -0
package/docs/investigations/dspark-handoff.md +182 -16
package/docs/investigations/lab-build-journal.md +2 -2
package/docs/investigations/openwiki-evaluation.md +249 -0
package/docs/planning/IDEAS.md +14 -0
package/docs/planning/PRODUCT_ROADMAP.md +2 -3
package/docs/planning/chat-ui-vision-memory-first.md +199 -0
package/docs/planning/chat-ui-vision.md +50 -0
package/docs/planning/memory-docs-and-dag-plan.md +15 -6
package/docs/planning/release-notes-v0.0.11.md +239 -0
package/docs/reference/cli.md +35 -16
package/docs/reference/distribution.md +13 -6
package/docs/reference/embedding.md +35 -14
package/docs/reference/features-matrix.md +97 -0
package/docs/reference/library-api.md +30 -9
package/docs/reference/memory.md +26 -6
package/docs/reference/models.md +11 -1
package/docs/reference/orpo-quickstart.md +3 -4
package/docs/reference/server-api.md +634 -22
package/docs/reference/server-config.md +250 -121
package/docs/reference/training.md +14 -15
package/package.json +5 -3
package/src/anthropic.ts +13 -0
package/src/audio/conformer.ts +647 -0
package/src/audio/decode.ts +133 -0
package/src/audio/features.ts +202 -0
package/src/audio/transcode.ts +67 -0
package/src/cli.ts +356 -105
package/src/config.ts +49 -2
package/src/download.ts +40 -0
package/src/eval/README.md +7 -6
package/src/eval/kl.ts +59 -3
package/src/eval/quality-db.ts +2 -2
package/src/eval/runner.ts +3 -3
package/src/expert-offload.ts +15 -2
package/src/flags.ts +13 -0
package/src/generate.ts +330 -24
package/src/grammar.ts +585 -0
package/src/hub-rest.ts +242 -0
package/src/kv-store.ts +442 -88
package/src/lora.ts +8 -0
package/src/md-modules.d.ts +42 -0
package/src/media-fetch.ts +284 -0
package/src/memory/rest.ts +245 -0
package/src/memory/vault.ts +74 -0
package/src/mlx/array.ts +106 -19
package/src/mlx/autograd.ts +2 -2
package/src/mlx/ffi.ts +27 -3
package/src/mlx/metal-kernel.ts +7 -4
package/src/mlx/ops.ts +153 -23
package/src/mlx/turboquant-ops.ts +831 -0
package/src/mlx/turboquant-tables.ts +237 -0
package/src/model/batched-mask.ts +62 -1
package/src/model/batched-quant.ts +206 -0
package/src/model/batched-rotating-quant.ts +346 -0
package/src/model/batched-rotating.ts +46 -1
package/src/model/compiled-decode.ts +4 -15
package/src/model/factory.ts +10 -4
package/src/model/gemma4-base.ts +363 -39
package/src/model/gemma4.ts +122 -33
package/src/model/generated/gemma4-12b.ts +9 -13
package/src/model/generated/gemma4-26b.ts +10 -5
package/src/model/generated/gemma4-e4b.ts +14 -9
package/src/model/minicpm5.ts +58 -102
package/src/model/paged-kv.ts +253 -0
package/src/model/qwen3-delta.ts +76 -15
package/src/model/qwen3-moe.ts +404 -0
package/src/model/qwen3.ts +9 -8
package/src/model/qwen3_5.ts +88 -23
package/src/model/support.ts +12 -1
package/src/model/universal/dense.ts +40 -5
package/src/model/universal/rope.ts +36 -21
package/src/pi-web.ts +1299 -82
package/src/preflight.ts +27 -8
package/src/prompt-cache.ts +293 -33
package/src/quantize/quantizer.ts +16 -1
package/src/registry.ts +57 -2
package/src/serve/batch-scheduler.ts +965 -72
package/src/serve/generation-gateway.ts +214 -11
package/src/serve/isolate.ts +417 -0
package/src/serve/lane-registry.ts +44 -0
package/src/serve/session-search.ts +326 -0
package/src/server.ts +1380 -135
package/src/spec/assistant-source.ts +150 -0
package/src/spec/deepspec-source.ts +143 -0
package/src/spec/dflash-source.ts +124 -0
package/src/spec/dspark/ab-stats.ts +136 -0
package/src/spec/dspark/calibration.ts +112 -0
package/src/spec/dspark/deepspec-module.ts +801 -0
package/src/spec/dspark/generate-dflash.ts +72 -20
package/src/spec/dspark/loader.ts +23 -0
package/src/spec/dspark/module-dflash.ts +278 -36
package/src/spec/dspark/quantize-drafter.ts +91 -0
package/src/spec/generate.ts +59 -25
package/src/spec/ngram-source.ts +132 -0
package/src/spec/serve-loop.ts +536 -0
package/src/spec/source.ts +93 -0
package/src/spec/two-model.ts +171 -0
package/src/ssd-cache.ts +107 -35
package/src/tokenizer.ts +288 -2
package/src/tool-approvals.ts +131 -0
package/src/tool-call.ts +408 -20
package/src/train/flash-cce.ts +2 -2
package/src/train/job.ts +0 -2
package/src/train/trainer.ts +1 -4
package/src/vision/prompt.ts +217 -48
package/src/web/app.html +1184 -1789
package/src/web/app.js +5667 -0
package/src/web/icon.svg +13 -0
package/src/web/manifest.webmanifest +24 -0
package/src/web/src/adapters-panel.ts +288 -0
package/src/web/src/api.ts +57 -0
package/src/web/src/assistant.ts +485 -0
package/src/web/src/chat.ts +1050 -0
package/src/web/src/composer.ts +959 -0
package/src/web/src/dataset.ts +132 -0
package/src/web/src/finetune.ts +267 -0
package/src/web/src/hub.ts +428 -0
package/src/web/src/main.ts +98 -0
package/src/web/src/markdown.ts +0 -0
package/src/web/src/memory-panel.ts +572 -0
package/src/web/src/model-picker.ts +159 -0
package/src/web/src/palette.ts +346 -0
package/src/web/src/protocol.ts +62 -0
package/src/web/src/quantize.ts +167 -0
package/src/web/src/rag.ts +274 -0
package/src/web/src/sessions.ts +469 -0
package/src/web/src/shell.ts +804 -0
package/src/web/src/status.ts +252 -0
package/src/web/src/ui-catalog.ts +92 -0
package/src/web/sw.js +71 -0
package/src/web/vendor/README.md +61 -0
package/src/web/vendor/hljs-LICENSE +29 -0
package/src/web/vendor/hljs-theme.css +59 -0
package/src/web/vendor/hljs.js +26 -0
package/src/model/fused-decode-kernel.ts +0 -312
package/src/model/fused-geglu-kernel.ts +0 -198
package/src/model/fused-mlp-kernel.ts +0 -169
package/src/model/fused-swiglu-kernel.ts +0 -240
package/src/model/steel-linear-kernel.ts +0 -96
package/src/status-page.html +0 -497

package/src/web/app.html CHANGED Viewed

@@ -21,6 +21,7 @@
     --dimmer:#515154;
     --hairline:rgba(255,255,255,.14);
     --hairline-soft:rgba(255,255,255,.07);
+    --hairline-strong:rgba(255,255,255,.28);
     --card:rgba(255,255,255,.045);
     --card-hover:rgba(255,255,255,.08);
     --card-2:rgba(255,255,255,.025);
@@ -30,6 +31,47 @@
     --ease:cubic-bezier(.22,.61,.21,1);
     --nav-h:60px;
     --mono:"SF Mono",ui-monospace,Menlo,Monaco,monospace;
+    /* bloom radial-gradient stop opacities — separate tokens so the light
+       theme can dial them down (the gradient identity/positions/colors stay
+       identical, only intensity changes — plan §7 "keep the gradient identity") */
+    --bloom-a:.13; --bloom-b:.16; --bloom-c:.10;
+    --overlay-scrim:rgba(0,0,0,.55);
+    --overlay-panel:rgba(22,22,24,.96);
+    --popover-panel:rgba(30,30,34,.98);
+    /* Code/log/tool-output surfaces (pre blocks, .logbox, edit textarea)
+       deliberately stay dark-chrome in BOTH themes — the conventional
+       "code block keeps its own dark surface" pattern (GitHub, VS Code
+       light themes, etc.), so monospace content keeps consistent contrast
+       regardless of the surrounding chat theme.
+       These MUST be opaque: the original rgba(0,0,0,.45) composited to
+       mid-GRAY over the light theme's white page, washing out the
+       near-white code ink + #86868b hljs comments (2026-07-06 visual QA).
+       Opaque values render identically over any page background. */
+    --code-bg:#121214; --code-bg-soft:#1a1a1d; --code-ink:#f5f5f7;
+    --nav-bg:rgba(0,0,0,.62);
+    --scrollbar-thumb:rgba(255,255,255,.12); --scrollbar-thumb-hover:rgba(255,255,255,.22);
+  }
+  /* ─── light theme: tasteful equivalents, same gradient identity ───
+     Applied via [data-theme="light"] on <html> (explicit user choice,
+     persisted to localStorage) OR by prefers-color-scheme:light when the
+     user's choice is "auto" (default — see initTheme()). */
+  [data-theme="light"]{
+    --bg:#f4f4f6;
+    --ink:#1d1d1f;
+    --dim:#6e6e73;
+    --dimmer:#a1a1a6;
+    --hairline:rgba(0,0,0,.12);
+    --hairline-soft:rgba(0,0,0,.06);
+    --hairline-strong:rgba(0,0,0,.28);
+    --card:rgba(0,0,0,.035);
+    --card-hover:rgba(0,0,0,.065);
+    --card-2:rgba(0,0,0,.02);
+    --bloom-a:.09; --bloom-b:.10; --bloom-c:.07;
+    --overlay-scrim:rgba(0,0,0,.28);
+    --overlay-panel:rgba(255,255,255,.97);
+    --popover-panel:rgba(255,255,255,.98);
+    --nav-bg:rgba(255,255,255,.72);
+    --scrollbar-thumb:rgba(0,0,0,.14); --scrollbar-thumb-hover:rgba(0,0,0,.26);
   }
   *{box-sizing:border-box;margin:0;padding:0}
   html,body{height:100%}
@@ -42,11 +84,11 @@
   ::selection{background:rgba(10,132,255,.4)}
   .num{font-variant-numeric:tabular-nums}
   code,.mono{font-family:var(--mono)}
-  code{font-size:.86em;background:rgba(255,255,255,.08);padding:2px 8px;border-radius:6px}
+  code{font-size:.86em;background:rgba(127,127,127,.16);padding:2px 8px;border-radius:6px}
   a{color:inherit}
   ::-webkit-scrollbar{width:10px;height:10px}
-  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px;border:2px solid transparent;background-clip:content-box}
-  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);background-clip:content-box}
+  ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px;border:2px solid transparent;background-clip:content-box}
+  ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:content-box}
   ::-webkit-scrollbar-track{background:transparent}
   /* gradient text helpers (lifted from status/chat pages) */
@@ -60,25 +102,44 @@
   /* ─── ambient blooms behind everything ─── */
   .bloom{position:fixed;inset:-25%;pointer-events:none;z-index:0;
     background:
-      radial-gradient(55vw 42vh at 12% 6%, rgba(255,159,10,.13), transparent 68%),
-      radial-gradient(60vw 48vh at 88% 24%, rgba(94,92,230,.16), transparent 68%),
-      radial-gradient(50vw 40vh at 30% 96%, rgba(10,132,255,.10), transparent 68%);
+      radial-gradient(55vw 42vh at 12% 6%, rgba(255,159,10,var(--bloom-a)), transparent 68%),
+      radial-gradient(60vw 48vh at 88% 24%, rgba(94,92,230,var(--bloom-b)), transparent 68%),
+      radial-gradient(50vw 40vh at 30% 96%, rgba(10,132,255,var(--bloom-c)), transparent 68%);
     filter:blur(74px);
     transition:opacity 1.2s var(--ease);
   }
+  /* Ambient bloom is a slow continuous drift, gated behind
+     prefers-reduced-motion (plan §7): with no explicit opacity set inline
+     by the route dimmer, it just sits static — no keyframe loop to begin
+     with, so the only "animation" to guard is the opacity transition
+     above, which is a one-shot per-route dim, not a decorative loop. The
+     shimmer/pulse/blink loops below are the actual ambient animations. */
+  @media (prefers-reduced-motion:reduce){
+    .bloom{transition:none}
+  }
   /* ═══════════════════ top navigation ═══════════════════ */
   nav{
     position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;
     display:flex;align-items:center;gap:18px;padding:0 22px;
     border-bottom:1px solid var(--hairline);
-    background:rgba(0,0,0,.62);backdrop-filter:saturate(180%) blur(22px);
+    background:var(--nav-bg);backdrop-filter:saturate(180%) blur(22px);
     -webkit-backdrop-filter:saturate(180%) blur(22px);
   }
   nav .brand{font-size:18px;font-weight:700;letter-spacing:-.02em;text-decoration:none;
     white-space:nowrap;flex:0 0 auto}
   nav .tabs{display:flex;gap:2px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
   nav .tabs::-webkit-scrollbar{display:none}
+  /* Scroll-edge fades (2026-07-06 jank fix): the tab row scrolls with its
+     scrollbar hidden, so a clipped "Build Datase" read as broken/overlapped.
+     JS (updateTabFades) toggles .fade-r/.fade-l per scroll position so a
+     soft fade signals "more tabs this way" only when actually clipped. */
+  nav .tabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);
+    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
+  nav .tabs.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000);
+    mask-image:linear-gradient(90deg,transparent,#000 34px,#000)}
+  nav .tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
+    mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
   nav .tab{
     appearance:none;background:none;border:none;cursor:pointer;
     color:var(--dim);font:600 14px/1 inherit;letter-spacing:-.01em;
@@ -89,7 +150,43 @@
   nav .right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
   nav .model{font:12px var(--mono);color:var(--dim);
     background:var(--card);border:1px solid var(--hairline);border-radius:8px;padding:5px 10px;
-    max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    appearance:none;-webkit-appearance:none;cursor:pointer;transition:color .18s var(--ease),border-color .18s var(--ease)}
+  nav .model:hover{color:var(--ink);border-color:var(--hairline-strong)}
+  /* Model picker anchor + popover (plan §5.6) — same positioning/transition
+     language as #chat-sampling-wrap/.samplepop, anchored below-left instead
+     of above-right since the nav sits at the top of the page. */
+  #nav-model-wrap{position:relative;display:inline-flex}
+  #nav-model-wrap #model-pop{top:calc(100% + 9px);bottom:auto;left:0;right:auto;width:340px}
+  /* Model picker rows — same list-row language as the adapter table, one
+     row per /library entry with its own fit verdict + restart command
+     (model-picker.ts; no in-process swap exists, see docs/reference/cli.md). */
+  .mp-row{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:10px;
+    border:1px solid transparent;margin-bottom:4px;transition:background .12s}
+  .mp-row:last-child{margin-bottom:0}
+  .mp-row.serving{border-color:rgba(48,209,88,.35);background:rgba(48,209,88,.06)}
+  .mp-fit-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:4px}
+  .mp-fit-dot.green{background:var(--green);box-shadow:0 0 7px var(--green)}
+  .mp-fit-dot.yellow{background:var(--yellow);box-shadow:0 0 7px var(--yellow)}
+  .mp-fit-dot.red{background:var(--red)}
+  .mp-main{flex:1 1 auto;min-width:0}
+  .mp-name{font-size:12.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .mp-meta{font-size:10.5px;color:var(--dimmer);margin-top:2px}
+  .mp-meta b{color:var(--dim);font-variant-numeric:tabular-nums}
+  .mp-serving-tag{font:10px var(--mono);color:var(--green);letter-spacing:.03em;margin-top:2px}
+  .mp-cmd{display:flex;align-items:center;gap:6px;margin-top:6px;background:var(--code-bg-soft);border-radius:7px;
+    padding:5px 8px;overflow-x:auto}
+  .mp-cmd code{font:11px var(--mono);color:var(--ink);white-space:nowrap}
+  .mp-cmd button{appearance:none;cursor:pointer;background:var(--card);border:1px solid var(--hairline);
+    color:var(--dim);border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:600;flex:0 0 auto;white-space:nowrap}
+  .mp-cmd button:hover{color:var(--ink);border-color:var(--hairline-strong)}
+  .mp-empty{color:var(--dim);font-size:12px;padding:10px 4px;line-height:1.5}
+  .mp-foot-note{font-size:10.5px;color:var(--dimmer);line-height:1.4;margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline-soft)}
+  /* "Browse models…" entry -> Model Hub panel (plan §9 Phase 3) */
+  .mp-browse-hub{display:block;width:100%;appearance:none;cursor:pointer;background:var(--card);
+    border:1px solid var(--hairline);color:var(--ink);border-radius:8px;padding:8px 10px;
+    font-size:12px;font-weight:600;margin-top:8px;text-align:center;transition:border-color .18s var(--ease),background .18s var(--ease)}
+  .mp-browse-hub:hover{border-color:var(--hairline-strong);background:var(--card-hover)}
   .pill{display:inline-flex;align-items:center;gap:8px;
     border:1px solid var(--hairline);border-radius:999px;padding:6px 13px;
     font-size:12.5px;font-weight:600;color:var(--dim);letter-spacing:.01em;white-space:nowrap}
@@ -100,7 +197,7 @@
   #chat-think{display:none;cursor:pointer;gap:7px;padding:5px 11px;font-size:12px;user-select:none;-webkit-user-select:none;
     transition:color .22s var(--ease),border-color .22s var(--ease)}
   #chat-think .dot{width:7px;height:7px}
-  #chat-think:hover{border-color:rgba(255,255,255,.28)}
+  #chat-think:hover{border-color:var(--hairline-strong)}
   #chat-think.think-on{color:var(--ink)}
   #chat-think.think-on .dot{background:var(--blue);box-shadow:0 0 11px var(--blue)}
   .pill.bad .dot{background:var(--red);box-shadow:0 0 11px var(--red)}
@@ -109,18 +206,35 @@
   #chat-sampling-wrap{position:relative;display:inline-flex}
   #chat-sampling{cursor:pointer;gap:6px;padding:5px 11px;font-size:12px;user-select:none;-webkit-user-select:none;
     transition:color .22s var(--ease),border-color .22s var(--ease)}
-  #chat-sampling:hover{border-color:rgba(255,255,255,.28);color:var(--ink)}
-  #chat-sampling.on{color:var(--ink);border-color:rgba(255,255,255,.28)}
+  #chat-sampling:hover{border-color:var(--hairline-strong);color:var(--ink)}
+  #chat-sampling.on{color:var(--ink);border-color:var(--hairline-strong)}
   #chat-sampling.dirty .dot{background:var(--blue);box-shadow:0 0 11px var(--blue)}
+  /* Distinct one-shot-armed dot state (task brief item 2) — orange/amber
+     reads as "temporary/pending" against the plain blue "overridden"
+     state, matching the same semantic the orange dot already carries
+     elsewhere (.pill.warn) rather than inventing a new color meaning. */
+  #chat-sampling.armed .dot{background:var(--orange);box-shadow:0 0 11px var(--orange);animation:pulse-armed 1.6s var(--ease) infinite}
+  @media (prefers-reduced-motion:reduce){#chat-sampling.armed .dot{animation:none}}
+  @keyframes pulse-armed{0%,100%{opacity:1}50%{opacity:.45}}
   #chat-sampling .dot{width:7px;height:7px}
   .samplepop{position:absolute;bottom:calc(100% + 9px);right:0;z-index:40;width:300px;
-    background:rgba(30,30,34,.98);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:13px 14px;
+    max-height:min(70vh,560px);overflow-y:auto;
+    background:var(--popover-panel);border:1px solid var(--hairline);border-radius:13px;padding:13px 14px;
     backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
-    box-shadow:0 18px 50px rgba(0,0,0,.7);display:none;
+    box-shadow:0 18px 50px rgba(0,0,0,.35);display:none;
     transform:translateY(4px);opacity:0;transition:opacity .16s var(--ease),transform .16s var(--ease)}
   .samplepop.open{display:block;transform:translateY(0);opacity:1}
   .samplepop h4{font-size:12px;font-weight:600;color:var(--dim);letter-spacing:.02em;
-    text-transform:uppercase;margin:0 0 10px}
+    text-transform:uppercase;margin:0}
+  .samp-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
+  .samp-oneshot-chip{font:10.5px/1 var(--mono);color:var(--orange);background:rgba(255,159,10,.12);
+    border:1px solid rgba(255,159,10,.3);border-radius:999px;padding:3px 8px;letter-spacing:.01em;white-space:nowrap}
+  .samp-scope-row{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding-bottom:11px;border-bottom:1px solid var(--hairline-soft)}
+  .samp-scope-row label{font-size:12.5px;color:var(--ink);width:74px;flex:0 0 auto}
+  .samp-scope-row select{flex:1 1 auto;background:var(--card);border:1px solid var(--hairline);border-radius:7px;
+    color:var(--ink);font-size:12px;padding:5px 8px;cursor:pointer;appearance:none;-webkit-appearance:none;
+    transition:border-color .18s var(--ease)}
+  .samp-scope-row select:hover,.samp-scope-row select:focus{border-color:var(--hairline-strong)}
   .samprow{display:flex;align-items:center;gap:9px;margin:0 0 11px}
   .samprow label{font-size:12.5px;color:var(--ink);width:74px;flex:0 0 auto}
   .samprow input[type=range]{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:4px;margin:0;
@@ -132,27 +246,119 @@
   .samprow input[type=range]:focus::-webkit-slider-thumb{background:var(--blue)}
   .samp-val{width:40px;flex:0 0 auto;text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink)}
   .samp-val.auto{color:var(--dimmer)}
+  .samp-num{width:74px;flex:0 0 auto;text-align:right;background:var(--card);border:1px solid var(--hairline);
+    border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:11.5px;padding:3px 6px}
+  .samp-num.auto{color:var(--dimmer)}
   .samppop-foot{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
   .samppop-foot .note{font-size:10.5px;color:var(--dimmer);line-height:1.3;flex:1 1 auto;padding-right:8px}
   .samppop-foot button{appearance:none;cursor:pointer;background:var(--card);border:1px solid var(--hairline);
     color:var(--dim);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;flex:0 0 auto;
     transition:color .18s var(--ease),border-color .18s var(--ease)}
-  .samppop-foot button:hover{color:var(--ink);border-color:rgba(255,255,255,.28)}
+  .samppop-foot button:hover{color:var(--ink);border-color:var(--hairline-strong)}
+  /* Advanced sampling disclosure — collapsed by default, same visual language
+     as the primary rows so it doesn't read as a separate control system. */
+  .samp-adv{margin:2px 0 12px}
+  .samp-adv > summary{cursor:pointer;font-size:11.5px;font-weight:600;color:var(--dim);letter-spacing:.02em;
+    text-transform:uppercase;list-style:none;padding:2px 0 8px;user-select:none;-webkit-user-select:none}
+  .samp-adv > summary::-webkit-details-marker{display:none}
+  .samp-adv > summary::before{content:"▸ ";display:inline-block;transition:transform .15s var(--ease)}
+  .samp-adv[open] > summary::before{transform:rotate(90deg)}
+  .samp-adv > summary:hover{color:var(--ink)}
+  .samp-adv .seed-row{display:flex;align-items:center;gap:9px;margin:0 0 4px}
+  .samp-adv .seed-row label{font-size:12.5px;color:var(--ink);width:74px;flex:0 0 auto}
+  .samp-adv .seed-row input[type=text]{flex:1 1 auto;background:var(--card);border:1px solid var(--hairline);
+    border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:12px;padding:5px 8px}
+  .samp-adv .seed-row input[type=text]::placeholder{color:var(--dimmer)}
+  /* System prompt pill + popover (plan §9 Phase 2) — same chrome as
+     #chat-sampling-wrap/.samplepop, just to its left in the hint row. */
+  #chat-sysprompt-wrap{position:relative;display:inline-flex}
+  #chat-sysprompt{cursor:pointer;gap:6px;padding:5px 11px;font-size:12px;user-select:none;-webkit-user-select:none;
+    transition:color .22s var(--ease),border-color .22s var(--ease)}
+  #chat-sysprompt:hover{border-color:var(--hairline-strong);color:var(--ink)}
+  #chat-sysprompt.on{color:var(--ink);border-color:var(--hairline-strong)}
+  #chat-sysprompt.dirty .dot{background:var(--purple);box-shadow:0 0 11px var(--purple)}
+  #chat-sysprompt .dot{width:7px;height:7px}
+  .sysprompt-pop{width:320px}
+  #sysprompt-text{width:100%;resize:vertical;min-height:80px;background:var(--card);
+    border:1px solid var(--hairline);border-radius:9px;color:var(--ink);
+    font:12.5px/1.5 inherit;padding:9px 10px;margin:0 0 6px}
+  #sysprompt-text::placeholder{color:var(--dimmer)}
+  #sysprompt-text:focus{outline:none;border-color:var(--hairline-strong)}
+  .sysprompt-foot-row{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
+  .sysprompt-foot-row .note{font-size:10.5px;color:var(--dimmer)}
+  .sysprompt-foot-row button,.sysprompt-preset-row button{appearance:none;cursor:pointer;background:var(--card);
+    border:1px solid var(--hairline);color:var(--dim);border-radius:8px;padding:5px 11px;font-size:11.5px;
+    font-weight:600;flex:0 0 auto;transition:color .18s var(--ease),border-color .18s var(--ease)}
+  .sysprompt-foot-row button:hover,.sysprompt-preset-row button:hover{color:var(--ink);border-color:var(--hairline-strong)}
+  .sysprompt-presets{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline-soft)}
+  .sysprompt-preset-row{display:flex;align-items:center;gap:6px;margin:0 0 6px}
+  #sysprompt-preset-select{flex:1 1 auto;min-width:0;max-width:none;appearance:none;-webkit-appearance:none;
+    cursor:pointer;background:var(--card);text-overflow:ellipsis}
   #nav-download{color:var(--ink);font-family:var(--mono);font-size:11.5px;font-weight:500}
   #nav-download .dot{background:var(--orange);box-shadow:0 0 11px var(--orange);animation:dlpulse 1.4s ease-in-out infinite}
   @keyframes dlpulse{0%,100%{opacity:.4}50%{opacity:1}}
-  .hf-gear{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
+  .hf-gear,.icon-btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
     width:34px;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--hairline);
     color:var(--dim);flex:0 0 auto;transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)}
-  .hf-gear:hover{color:var(--ink);background:var(--card-hover);border-color:rgba(255,255,255,.28)}
+  .hf-gear:hover,.icon-btn:hover{color:var(--ink);background:var(--card-hover);border-color:var(--hairline-strong)}
   .hf-gear.saved{color:var(--green);border-color:rgba(48,209,88,.4)}
+  /* mobile drawer hamburger — chat route only, hidden ≥760px via the
+     media query beside #chat-sidebar above */
+  #chat-hamburger{align-items:center;justify-content:center;gap:3px}
+  /* theme toggle: 3-way auto/dark/light segmented control, nav-pill sized */
+  #theme-toggle{display:inline-flex;border:1px solid var(--hairline);border-radius:10px;overflow:hidden;flex:0 0 auto}
+  #theme-toggle button{appearance:none;cursor:pointer;background:transparent;border:none;color:var(--dim);
+    padding:0 9px;height:34px;font-size:13px;line-height:1;transition:color .18s var(--ease),background .18s var(--ease)}
+  #theme-toggle button:not(:last-child){border-right:1px solid var(--hairline)}
+  #theme-toggle button:hover{color:var(--ink);background:var(--card-hover)}
+  #theme-toggle button.active{color:var(--ink);background:var(--card-hover)}
+  #theme-toggle button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
+  /* Auto's ◐ icon only appears when the text label hides at narrow widths
+     (see the 900px media block) — never both, never neither. */
+  #theme-toggle .tt-icon{display:none}
+  /* Developer toggle (plan §8/§9 Phase 2): a small switch, same nav-pill
+     sizing language as #theme-toggle, showing/hiding the Quantize/Fine-tune/
+     Build Dataset/Status/Curves/Routes tabs. aria-pressed reflects state
+     (kept in sync by shell.ts's applyDeveloperMode). */
+  #nav-developer{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
+    border:1px solid var(--hairline);border-radius:10px;background:transparent;color:var(--dim);
+    padding:0 10px;height:34px;font-size:12.5px;font-weight:600;letter-spacing:.01em;flex:0 0 auto;
+    transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
+  #nav-developer:hover{color:var(--ink);background:var(--card-hover);border-color:var(--hairline-strong)}
+  #nav-developer:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
+  #nav-developer .nd-dot{width:8px;height:8px;border-radius:50%;background:var(--dimmer);flex:0 0 auto;
+    transition:background .18s var(--ease)}
+  #nav-developer .nd-dot.on{background:var(--green)}
+  #nav-developer[aria-checked="true"]{color:var(--ink)}
+  /* ─── keyboard shortcut sheet (Cmd/Ctrl+/) ─── */
+  #shortcut-overlay{position:fixed;inset:0;z-index:210;display:none;align-items:flex-start;justify-content:center;
+    background:var(--overlay-scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:calc(var(--nav-h) + 24px) 20px 20px}
+  #shortcut-overlay.open{display:flex;animation:fade .2s var(--ease)}
+  #shortcut-modal{width:min(480px,100%);max-height:min(76vh,620px);overflow-y:auto;background:var(--overlay-panel);
+    border:1px solid var(--hairline);border-radius:20px;padding:22px 26px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
+  .sk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
+  .sk-title{font-size:18px;font-weight:700;letter-spacing:-.02em}
+  .sk-close{appearance:none;background:none;border:none;cursor:pointer;color:var(--dim);font-size:16px;
+    width:30px;height:30px;border-radius:8px;transition:color .2s,background .2s}
+  .sk-close:hover{color:var(--ink);background:var(--card-hover)}
+  .sk-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;
+    border-bottom:1px solid var(--hairline-soft)}
+  .sk-row:last-child{border-bottom:none}
+  .sk-desc{font-size:13.5px;color:var(--ink)}
+  .sk-keys{display:flex;gap:5px;flex:0 0 auto}
+  .sk-key{font:600 11.5px var(--mono);color:var(--ink);background:var(--card);border:1px solid var(--hairline);
+    border-radius:6px;padding:3px 8px;min-width:20px;text-align:center}
   /* ─── HF settings overlay ─── */
   #hf-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
-    background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:calc(var(--nav-h) + 24px) 20px 20px}
+    background:var(--overlay-scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:calc(var(--nav-h) + 24px) 20px 20px}
   #hf-overlay.open{display:flex;animation:fade .3s var(--ease)}
-  #hf-modal{width:min(460px,100%);background:rgba(22,22,24,.96);border:1px solid var(--hairline);border-radius:20px;
-    padding:24px 26px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
+  #hf-modal{width:min(460px,100%);background:var(--overlay-panel);border:1px solid var(--hairline);border-radius:20px;
+    padding:24px 26px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
   .hf-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
   .hf-modal-title{font-size:20px;font-weight:700;letter-spacing:-.02em}
   .hf-modal-sub{font-size:13.5px;color:var(--dim);margin-bottom:20px;line-height:1.5}
@@ -160,12 +366,213 @@
     width:30px;height:30px;border-radius:8px;transition:color .2s,background .2s}
   .hf-close:hover{color:var(--ink);background:var(--card-hover)}
+  /* ─── Settings modal sections (plan §5.4/§6.5) ─── */
+  .settings-section{margin:0 0 20px;padding:0 0 20px;border-bottom:1px solid var(--hairline-soft)}
+  .settings-section:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
+  .settings-h{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
+  .settings-toggle-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);
+    cursor:pointer;font-weight:500;margin-bottom:8px}
+  .settings-toggle-row input{width:auto;margin:0;accent-color:var(--blue)}
+  .settings-note{font-size:12px;color:var(--orange);margin:8px 0 0;line-height:1.5}
+  #settings-approvals-list{margin-top:12px}
+  .settings-approvals-empty{font-size:12.5px;color:var(--dimmer)}
+  .settings-approval-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;
+    border-top:1px solid var(--hairline-soft)}
+  .settings-approval-row:first-child{border-top:none}
+  .settings-approval-row .satool{font:600 12.5px var(--mono);color:var(--ink);flex:1 1 auto}
+  .settings-approval-row .saforget{appearance:none;cursor:pointer;background:none;border:1px solid var(--hairline);
+    color:var(--dim);border-radius:7px;padding:3px 9px;font-size:11.5px;font-weight:600;flex:0 0 auto;
+    transition:color .18s var(--ease),border-color .18s var(--ease)}
+  .settings-approval-row .saforget:hover{color:var(--red);border-color:rgba(255,69,58,.4)}
   /* ─── inline push-to-hub panel (in done-step cards) ─── */
   .pushpanel{margin-top:14px;border-top:1px solid var(--hairline-soft);padding-top:14px}
   .pushpanel .field{margin-bottom:12px}
   .pushpanel label.chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);cursor:pointer;font-weight:500}
   .pushpanel label.chk input{width:auto;margin:0;accent-color:var(--blue)}
+  /* ─── Memory panel (plan §5.5/§9 Phase 2) — a full-height overlay beside
+     chat, same drawer/overlay language as the mobile sidebar and the HF
+     modal: fixed, scrimmed, focus-trapped, Escape closes. Sidebar entry
+     is a quiet row (not a nav tab) — see #chat-memory-entry markup. ─── */
+  #mem-overlay{position:fixed;inset:var(--nav-h) 0 0 0;z-index:150;display:none;justify-content:flex-end;
+    background:var(--overlay-scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
+  #mem-overlay.open{display:flex;animation:fade .22s var(--ease)}
+  #mem-panel{width:min(480px,100%);height:100%;background:var(--overlay-panel);border-left:1px solid var(--hairline);
+    display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.4)}
+  .mem-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--hairline-soft);flex:0 0 auto}
+  .mem-head h2{font-size:16px;font-weight:700;letter-spacing:-.01em;flex:1 1 auto}
+  .mem-close{appearance:none;background:none;border:none;cursor:pointer;color:var(--dim);font-size:15px;
+    width:30px;height:30px;border-radius:8px;transition:color .2s,background .2s;flex:0 0 auto}
+  .mem-close:hover{color:var(--ink);background:var(--card-hover)}
+  .mem-back{appearance:none;background:none;border:none;cursor:pointer;color:var(--dim);font-size:13px;
+    display:none;align-items:center;gap:4px;padding:4px 2px;flex:0 0 auto}
+  .mem-back:hover{color:var(--ink)}
+  .mem-back.show{display:inline-flex}
+  /* status strip: article count · last synthesis · git state */
+  .mem-status{display:flex;gap:16px;padding:12px 18px;border-bottom:1px solid var(--hairline-soft);flex:0 0 auto;flex-wrap:wrap}
+  .mem-stat{font-size:11.5px;color:var(--dim)}
+  .mem-stat b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
+  .mem-body{flex:1 1 auto;overflow-y:auto;padding:14px 18px 24px}
+  /* no-vault state (consent already declined earlier, or panel opened directly) */
+  .mem-empty{text-align:center;color:var(--dim);padding:50px 18px;font-size:13.5px;line-height:1.6}
+  .mem-empty .mcta{margin-top:16px}
+  /* search + list */
+  #mem-search{width:100%;background:var(--card);border:1px solid var(--hairline);border-radius:10px;
+    color:var(--ink);font-size:12.5px;padding:9px 12px;outline:none;transition:border-color .2s;margin-bottom:14px}
+  #mem-search:focus{border-color:rgba(10,132,255,.5)}
+  #mem-search::placeholder{color:var(--dimmer)}
+  .mem-sec{margin-bottom:16px}
+  .mem-sec:last-child{margin-bottom:0}
+  .mem-sec-title{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);
+    margin-bottom:7px;display:flex;align-items:center;gap:6px}
+  .mem-art{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;cursor:pointer;
+    border:1px solid transparent;transition:background .12s,border-color .12s}
+  .mem-art:hover{background:var(--card)}
+  .mem-art-name{font-size:13px;color:var(--ink);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .mem-art-excerpt{font-size:11px;color:var(--dim);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .mem-art-ico{font-size:12px;color:var(--dimmer);flex:0 0 auto}
+  .mem-list-empty{color:var(--dim);font-size:12.5px;padding:8px 10px;line-height:1.5}
+  /* article view */
+  .mem-art-head{margin-bottom:12px}
+  .mem-art-title{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
+  .mem-art-tabs{display:flex;gap:6px;margin:10px 0 14px}
+  .mem-art-tab{font:600 11.5px/1 inherit;color:var(--dim);background:var(--card);border:1px solid var(--hairline);
+    border-radius:999px;padding:6px 13px;cursor:pointer;transition:all .18s var(--ease)}
+  .mem-art-tab:hover{color:var(--ink)}
+  .mem-art-tab.active{color:var(--ink);border-color:var(--hairline-strong);background:var(--card-hover)}
+  .mem-article-render{font-size:13.5px;line-height:1.65;color:var(--ink)}
+  .mem-article-render h1,.mem-article-render h2,.mem-article-render h3{font-weight:700;margin:16px 0 7px;letter-spacing:-.01em}
+  .mem-article-render h1:first-child,.mem-article-render h2:first-child{margin-top:0}
+  .mem-article-render p{margin:0 0 10px}
+  .mem-article-render ul,.mem-article-render ol{margin:0 0 10px;padding-left:22px}
+  .mem-article-render code{font-family:var(--mono);font-size:.86em;background:rgba(127,127,127,.18);padding:2px 7px;border-radius:6px}
+  .mem-article-render pre{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--hairline-soft);border-radius:12px;
+    padding:12px 14px;overflow-x:auto;margin:10px 0;font:12px/1.6 var(--mono)}
+  .mem-article-render a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(100,210,255,.34)}
+  /* links line (inbound/outbound) */
+  .mem-links{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline-soft)}
+  .mem-links-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px}
+  .mem-links-row .lbl{color:var(--dimmer);flex:0 0 auto;font-weight:600;letter-spacing:.03em}
+  .mem-link-chip{font-size:12px;color:var(--dim);background:var(--card);border:1px solid var(--hairline);
+    border-radius:999px;padding:4px 11px;cursor:pointer;transition:all .15s var(--ease)}
+  .mem-link-chip:hover{color:var(--ink);border-color:var(--hairline-strong)}
+  /* history / diff (code-panel visual language, matching .tool pre / .approval pre) */
+  .mem-hist-entry{display:flex;align-items:baseline;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;
+    border:1px solid transparent;transition:background .12s}
+  .mem-hist-entry:hover{background:var(--card)}
+  .mem-hist-entry.active{background:var(--card);border-color:var(--hairline)}
+  .mem-hist-subject{font-size:13px;color:var(--ink);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .mem-hist-date{font-size:11px;color:var(--dimmer);font-variant-numeric:tabular-nums;flex:0 0 auto}
+  .mem-hist-hash{font:11px var(--mono);color:var(--dimmer);flex:0 0 auto}
+  .mem-diff{background:var(--code-bg-soft);border-radius:9px;padding:11px 13px;overflow-x:auto;margin-top:10px;
+    font:11.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:420px;overflow-y:auto}
+  .mem-diff .diffadd{color:var(--green)}
+  .mem-diff .diffdel{color:var(--red)}
+  .mem-diff .diffctx{color:var(--dim)}
+  .mem-diff .diffhunk{color:var(--cyan)}
+  /* sidebar entry to the panel (quiet, count-bearing — not a nav tab) */
+  #chat-memory-entry{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;cursor:pointer;
+    border:1px solid transparent;color:var(--dim);font-size:12.5px;transition:background .12s,color .12s;margin-top:auto}
+  #chat-memory-entry:hover{background:var(--card);color:var(--ink)}
+  #chat-memory-entry .mi{font-size:13px;flex:0 0 auto;color:var(--purple)}
+  #chat-memory-entry .mt{flex:1 1 auto}
+  #chat-memory-entry .mcount{font:11px var(--mono);color:var(--dimmer);background:var(--card);border-radius:999px;padding:2px 8px;flex:0 0 auto}
+  /* ─── Adapter routing table (plan §5.6/§9 Phase 2) — same right-side
+     overlay/panel/head/body chrome as the Memory panel (mem-overlay/
+     mem-panel/mem-head/mem-body), new top-level ids since it's a distinct
+     panel opened from the composer instead of the sidebar. ─── */
+  #adapters-overlay{position:fixed;inset:var(--nav-h) 0 0 0;z-index:150;display:none;justify-content:flex-end;
+    background:var(--overlay-scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
+  #adapters-overlay.open{display:flex;animation:fade .22s var(--ease)}
+  #adapters-panel{width:min(520px,100%);height:100%;background:var(--overlay-panel);border-left:1px solid var(--hairline);
+    display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.4)}
+  #adapters-body{flex:1 1 auto;overflow-y:auto;padding:14px 18px 24px}
+  .ad-empty{text-align:center;color:var(--dim);padding:50px 18px;font-size:13.5px;line-height:1.6}
+  .ad-sec-title{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);margin:0 0 9px}
+  .ad-note{font-size:11.5px;color:var(--dim);line-height:1.5;margin:0 0 16px}
+  .ad-row{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:12px;
+    border:1px solid var(--hairline-soft);margin-bottom:9px;transition:border-color .15s var(--ease)}
+  .ad-row.incompatible{opacity:.55}
+  .ad-row.selected{border-color:rgba(10,132,255,.5);background:rgba(10,132,255,.06)}
+  .ad-row-main{flex:1 1 auto;min-width:0}
+  .ad-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+  .ad-row-id{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .ad-badge{font:10.5px var(--mono);letter-spacing:.02em;padding:2px 8px;border-radius:999px;border:1px solid var(--hairline);color:var(--dim);white-space:nowrap}
+  .ad-badge.mounted{color:var(--green);border-color:rgba(48,209,88,.4)}
+  .ad-badge.selected{color:var(--blue);border-color:rgba(10,132,255,.4)}
+  .ad-meta{font-size:11.5px;color:var(--dimmer);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
+  .ad-meta b{color:var(--dim);font-weight:600;font-variant-numeric:tabular-nums}
+  .ad-why{font-size:11px;color:var(--dimmer);margin-top:4px;font-style:italic}
+  .ad-actions{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;align-items:center}
+  .ad-actions button{appearance:none;cursor:pointer;background:var(--card);border:1px solid var(--hairline);
+    color:var(--dim);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;white-space:nowrap;
+    transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
+  .ad-actions button:hover:not(:disabled){color:var(--ink);border-color:var(--hairline-strong)}
+  .ad-actions button:disabled{opacity:.4;cursor:default}
+  .ad-actions button.primary{color:var(--ink);border-color:rgba(10,132,255,.5);background:rgba(10,132,255,.1)}
+  .ad-actions label.ad-stack-chk{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dimmer);cursor:pointer;white-space:nowrap}
+  .ad-actions label.ad-stack-chk input{width:auto;margin:0;accent-color:var(--blue)}
+  .ad-stack-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;
+    background:var(--card);border:1px solid var(--hairline);margin-bottom:14px}
+  .ad-stack-bar .lbl{font-size:11.5px;color:var(--dim);flex:0 0 auto}
+  .ad-stack-bar .expr{font:12px var(--mono);color:var(--ink);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  /* ─── Model Hub (plan §9 Phase 3, beat-matrix Axis 3) — same right-side
+     overlay/panel/head/body chrome as Memory + Adapters (mem-overlay/
+     mem-panel/mem-head/mem-body), new top-level ids since it's a distinct
+     panel opened from the model picker instead of the sidebar/composer. ─── */
+  #hub-overlay{position:fixed;inset:var(--nav-h) 0 0 0;z-index:150;display:none;justify-content:flex-end;
+    background:var(--overlay-scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
+  #hub-overlay.open{display:flex;animation:fade .22s var(--ease)}
+  #hub-panel{width:min(480px,100%);height:100%;background:var(--overlay-panel);border-left:1px solid var(--hairline);
+    display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.4)}
+  #hub-body{flex:1 1 auto;overflow-y:auto;padding:14px 18px 24px}
+  .hub-sec{margin-bottom:20px}
+  .hub-sec:last-child{margin-bottom:0}
+  #hub-search-input{width:100%;background:var(--card);border:1px solid var(--hairline);border-radius:10px;
+    color:var(--ink);font-size:12.5px;padding:9px 12px;outline:none;transition:border-color .2s;margin-bottom:10px}
+  #hub-search-input:focus{border-color:rgba(10,132,255,.5)}
+  #hub-search-input::placeholder{color:var(--dimmer)}
+  .hub-search-body{min-height:0}
+  .hub-empty{color:var(--dim);font-size:12.5px;padding:10px 4px;line-height:1.5}
+  /* row language shared by Downloaded + Search results */
+  .hub-row{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:12px;
+    border:1px solid var(--hairline-soft);margin-bottom:8px;transition:border-color .15s var(--ease)}
+  .hub-row:last-child{margin-bottom:0}
+  .hub-fit-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
+  .hub-fit-dot.green{background:var(--green);box-shadow:0 0 7px var(--green)}
+  .hub-fit-dot.yellow{background:var(--yellow);box-shadow:0 0 7px var(--yellow)}
+  .hub-fit-dot.red{background:var(--red)}
+  .hub-row-main{flex:1 1 auto;min-width:0}
+  .hub-row-name{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .hub-row-meta{font-size:11px;color:var(--dimmer);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .hub-row-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}
+  .hub-row-actions button{appearance:none;cursor:pointer;background:var(--card);border:1px solid var(--hairline);
+    color:var(--dim);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;white-space:nowrap;
+    transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
+  .hub-row-actions button:hover:not(:disabled){color:var(--ink);border-color:rgba(10,132,255,.5);background:rgba(10,132,255,.08)}
+  .hub-row-actions button:disabled{opacity:.5;cursor:default}
+  .hub-dl-tag{font:11px var(--mono);color:var(--blue);white-space:nowrap}
+  .hub-dl-tag.done{color:var(--green)}
+  .hub-dl-tag.error{color:var(--red)}
+  /* restart-command strip (POST /api/hub/serve's honest restart_required
+     outcome) — same code-panel visual language as .mp-cmd, but persistent
+     (not a toast) since it needs to stay put long enough to copy. */
+  .hub-restart-strip{display:none}
+  .hub-restart-strip.show{display:block;margin-bottom:16px;padding:12px 14px;border-radius:12px;
+    background:rgba(10,132,255,.08);border:1px solid rgba(10,132,255,.3)}
+  .hub-restart-note{font-size:12px;color:var(--ink);line-height:1.5;margin-bottom:8px}
+  .hub-cmd{display:flex;align-items:center;gap:8px;background:var(--code-bg-soft);border-radius:8px;
+    padding:7px 10px;overflow-x:auto}
+  .hub-cmd code{font:12px var(--mono);color:var(--ink);white-space:nowrap;flex:1 1 auto}
+  .hub-copy-btn{appearance:none;cursor:pointer;background:var(--card);border:1px solid var(--hairline);
+    color:var(--dim);border-radius:6px;padding:3px 9px;font-size:11px;font-weight:600;flex:0 0 auto;white-space:nowrap}
+  .hub-copy-btn:hover{color:var(--ink);border-color:var(--hairline-strong)}
+  .hub-offline-note{font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:4px;padding-top:14px;border-top:1px solid var(--hairline-soft)}
   /* ═══════════════════ app shell / routing ═══════════════════ */
   #app{position:fixed;inset:var(--nav-h) 0 0 0;z-index:1}
   section[data-route]{display:none;position:absolute;inset:0}
@@ -190,7 +597,19 @@
   [data-reveal]{opacity:0;transform:translateY(22px);
     transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
   .lit [data-reveal]{opacity:1;transform:none}
-  @media (prefers-reduced-motion:reduce){[data-reveal]{transition:none;opacity:1;transform:none}*{scroll-behavior:auto}}
+  @media (prefers-reduced-motion:reduce){
+    [data-reveal]{transition:none;opacity:1;transform:none}
+    *{scroll-behavior:auto}
+    /* Ambient/decorative infinite-loop animations (plan §7): shimmer
+       skeleton sweep, download-pulse dot, streaming cursor blink, running-
+       tool status dot. These loop forever by design and carry no state —
+       freezing them (not hiding) keeps the element visible+legible without
+       motion. One-shot transitions (fade-in on route change, toast slide-in,
+       popover open) are left alone; they're brief and convey state change,
+       not ambient decoration. */
+    #nav-download .dot,.shimmer,.cursor,.tool.running .sdot{animation:none!important}
+    .shimmer{color:inherit!important;background:var(--card)}
+  }
   /* ─── cards ─── */
   .grid{display:grid;gap:14px}
@@ -293,8 +712,8 @@
     background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .5s var(--ease)}
   .progressbar.green i{background:linear-gradient(90deg,#a8ff9e,var(--green))}
   .progmeta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim);margin-top:8px}
-  .logbox{margin-top:18px;background:rgba(0,0,0,.42);border:1px solid var(--hairline-soft);border-radius:14px;
-    padding:14px 16px;max-height:340px;overflow-y:auto;font:11.5px/1.55 var(--mono);color:var(--dim);white-space:pre-wrap;word-break:break-word}
+  .logbox{margin-top:18px;background:var(--code-bg-soft);border:1px solid var(--hairline-soft);border-radius:14px;
+    padding:14px 16px;max-height:340px;overflow-y:auto;font:11.5px/1.55 var(--mono);color:rgba(245,245,247,.7);white-space:pre-wrap;word-break:break-word}
   .logbox:empty::before{content:"waiting for output…";color:var(--dimmer)}
   /* shimmer skeletons */
@@ -305,13 +724,33 @@
   /* toasts */
   #toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;
     display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
-  .toast{background:rgba(30,30,32,.92);backdrop-filter:blur(20px);border:1px solid var(--hairline);
-    border-radius:13px;padding:12px 18px;font-size:14px;font-weight:500;box-shadow:0 16px 50px rgba(0,0,0,.6);
+  .toast{background:var(--overlay-panel);backdrop-filter:blur(20px);border:1px solid var(--hairline);
+    border-radius:13px;padding:12px 18px;font-size:14px;font-weight:500;box-shadow:0 16px 50px rgba(0,0,0,.35);
     animation:toastIn .4s var(--ease);max-width:min(560px,90vw)}
   .toast.err{border-color:rgba(255,69,58,.5)}
   .toast.ok{border-color:rgba(48,209,88,.5)}
   @keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
+  /* App-aware assistant spotlight (plan §6.6, §9 Phase 3, beat matrix Axis
+     12) — NEVER-HIJACK overlay: pointer-events:none on the whole thing (the
+     highlighted control stays clickable straight through the ring/popover),
+     no focus trap, transform/opacity-only animation, auto-dismiss handled
+     in assistant.ts. Positioned in fixed viewport coordinates by JS
+     (getBoundingClientRect of the target), not CSS layout. */
+  #assistant-spotlight{position:fixed;inset:0;z-index:95;pointer-events:none;
+    opacity:0;transform:scale(.98);transition:opacity .22s var(--ease),transform .22s var(--ease)}
+  #assistant-spotlight.show{opacity:1;transform:none}
+  #assistant-spotlight .asr-ring{position:fixed;border-radius:12px;
+    box-shadow:0 0 0 3px var(--blue),0 0 0 9999px rgba(0,0,0,.32),0 0 24px rgba(10,132,255,.5);
+    transition:left .22s var(--ease),top .22s var(--ease),width .22s var(--ease),height .22s var(--ease)}
+  #assistant-spotlight .asr-pop{position:fixed;max-width:min(320px,80vw);background:var(--overlay-panel);
+    backdrop-filter:blur(20px);border:1px solid var(--hairline);border-radius:12px;padding:10px 14px;
+    font-size:13px;line-height:1.4;box-shadow:0 16px 50px rgba(0,0,0,.35)}
+  @media (prefers-reduced-motion:reduce){
+    #assistant-spotlight{transition:opacity .01ms;transform:none}
+    #assistant-spotlight .asr-ring{transition:none}
+  }
   /* empty state */
   .empty{text-align:center;color:var(--dim);padding:60px 20px}
   .empty h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
@@ -328,10 +767,18 @@
     background:var(--card);border:1px solid var(--hairline);color:var(--ink);font-size:13.5px;font-weight:600;
     transition:background .15s,border-color .15s}
   #chat-new:hover{background:var(--card-hover);border-color:rgba(10,132,255,.5)}
+  /* Session search — trivial client-side substring filter over titles
+     (plan §5.7 / §9 Phase 1 item 4). No server change: SessionListItem
+     carries no preview text today, so title-only is the honest scope. */
+  #chat-sess-search{width:100%;background:var(--card);border:1px solid var(--hairline);border-radius:10px;
+    color:var(--ink);font-size:12.5px;padding:8px 11px;outline:none;transition:border-color .2s}
+  #chat-sess-search:focus{border-color:rgba(10,132,255,.5)}
+  #chat-sess-search::placeholder{color:var(--dimmer)}
   .sesslist{display:flex;flex-direction:column;gap:2px;margin-top:4px}
   .sess{position:relative;padding:9px 50px 9px 11px;border-radius:10px;cursor:pointer;border:1px solid transparent}
   .sess:hover{background:var(--card)}
   .sess.active{background:var(--card);border-color:var(--hairline)}
+  .sess.sess-hidden{display:none}
   .sess .stitle{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .sess .smeta{font-size:11px;color:var(--dim);margin-top:2px;display:flex;gap:5px;align-items:center;white-space:nowrap}
   .sess .sbtn{position:absolute;top:7px;width:20px;height:20px;border:none;background:transparent;color:var(--dim);
@@ -342,7 +789,26 @@
   .sess .sfork:hover{background:var(--card-hover);color:var(--ink);opacity:1}
   .sess .sdel:hover{background:rgba(255,69,58,.18);color:var(--red);opacity:1}
   .sessempty{color:var(--dim);font-size:12px;padding:8px 11px;line-height:1.5}
-  @media (max-width:760px){#chat-sidebar{display:none}}
+  /* ─── mobile drawer (plan §5.7/§7/§9 Phase 1): the sidebar becomes a
+     slide-over panel on narrow viewports instead of vanishing outright. ─── */
+  #chat-hamburger{display:none}
+  @media (max-width:760px){
+    #chat-hamburger{display:inline-flex}
+    #chat-sidebar{
+      position:fixed;top:var(--nav-h);bottom:0;left:0;width:min(84vw,320px);z-index:120;
+      border-right:1px solid var(--hairline);
+      transform:translateX(-100%);transition:transform .28s var(--ease);
+      box-shadow:0 0 0 rgba(0,0,0,0);
+    }
+    #chat-sidebar.drawer-open{transform:translateX(0);box-shadow:24px 0 60px rgba(0,0,0,.45)}
+    #chat-drawer-backdrop{display:none;position:fixed;inset:var(--nav-h) 0 0 0;z-index:110;
+      background:var(--overlay-scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
+    #chat-drawer-backdrop.open{display:block;animation:fade .2s var(--ease)}
+  }
+  @media (max-width:760px) and (prefers-reduced-motion:reduce){
+    #chat-sidebar{transition:none}
+  }
   #chat-scroll{flex:1;overflow-y:auto}
   #chat-thread{max-width:840px;margin:0 auto;padding:30px 22px 16px;display:flex;flex-direction:column;gap:18px}
   .msg{display:flex;flex-direction:column;gap:6px;max-width:90%}
@@ -354,41 +820,88 @@
   .msg.assistant .bubble{background:var(--card);border:1px solid var(--hairline)}
   .msg .meta{font-size:11.5px;color:var(--dimmer);font-variant-numeric:tabular-nums}
   .msg .meta b{color:var(--green);font-weight:600}
+  /* Message actions (plan §5.2): a quiet hover/focus row under each message,
+     same visual language as the code-block copy button (.cbcopy) — dim by
+     default, brightens on hover, never shouts. Kept visible via :focus-within
+     too so keyboard users can tab to the buttons without hovering. */
+  .msg-actions{display:flex;gap:6px;opacity:0;transition:opacity .15s;margin-top:2px}
+  .msg:hover .msg-actions,.msg:focus-within .msg-actions,.msg-actions.pinned{opacity:1}
+  .msg.user .msg-actions{align-self:flex-end}
+  .maction{font:11px/1 var(--mono);color:var(--dim);background:transparent;border:1px solid var(--hairline);
+    border-radius:6px;padding:4px 9px;cursor:pointer;transition:color .15s,border-color .15s}
+  .maction:hover{color:var(--ink);border-color:var(--dim)}
+  .maction:disabled{opacity:.4;cursor:default}
+  .maction:disabled:hover{color:var(--dim);border-color:var(--hairline)}
+  /* Edit-and-resend as sibling branch: ChatGPT/Claude's `< i/n >` linear
+     toggle (plan §5.2 explicitly rules out a tree view this phase). Only
+     rendered on the LAST user message, and only when count > 1. */
+  .sib-toggle{display:flex;align-items:center;gap:5px;font:11px/1 var(--mono);color:var(--dimmer)}
+  .sib-toggle button{background:transparent;border:1px solid var(--hairline);border-radius:6px;color:var(--dim);
+    cursor:pointer;padding:2px 7px;line-height:1.4}
+  .sib-toggle button:hover:not(:disabled){color:var(--ink);border-color:var(--dim)}
+  .sib-toggle button:disabled{opacity:.35;cursor:default}
+  .msg-edit-box{width:100%;box-sizing:border-box;background:var(--card-2);border:1px solid var(--hairline);
+    border-radius:10px;padding:9px 11px;color:var(--ink);font:inherit;line-height:1.5;resize:vertical;min-height:44px}
+  .msg-edit-actions{display:flex;gap:8px;margin-top:6px;justify-content:flex-end}
   .thinkbox{margin:0 0 12px;border:1px solid rgba(10,132,255,.18);border-radius:12px;background:rgba(10,132,255,.06);overflow:hidden}
   .thinkbox summary{cursor:pointer;padding:7px 10px;font-size:12px;font-weight:600;color:var(--dim);user-select:none}
   .thinkbody{padding:0 12px 10px;color:var(--dim);font-size:.92em;white-space:pre-wrap}
-  /* markdown-ish rendering inside bubbles */
-  .bubble p{margin:0 0 10px}.bubble p:last-child{margin-bottom:0}
-  .bubble ul,.bubble ol{margin:0 0 10px;padding-left:22px}
-  .bubble li{margin:3px 0}
-  .bubble strong{font-weight:700;color:var(--ink)}
-  .bubble em{font-style:italic}
-  .bubble code{font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.10);padding:2px 7px;border-radius:6px}
-  .bubble pre{background:rgba(0,0,0,.45);border:1px solid var(--hairline-soft);border-radius:12px;
+  /* markdown-ish rendering — shared by chat bubbles AND the memory panel's
+     article view (.mem-article-render renders vault/Reference docs through
+     the same mdToHtml; without this scope the panel's code fences lost
+     their header chrome — "shCopy" mash, 2026-07-07 visual QA). */
+  :is(.bubble,.mem-article-render) p{margin:0 0 10px}:is(.bubble,.mem-article-render) p:last-child{margin-bottom:0}
+  :is(.bubble,.mem-article-render) ul,:is(.bubble,.mem-article-render) ol{margin:0 0 10px;padding-left:22px}
+  :is(.bubble,.mem-article-render) li{margin:3px 0}
+  :is(.bubble,.mem-article-render) strong{font-weight:700;color:var(--ink)}
+  :is(.bubble,.mem-article-render) em{font-style:italic}
+  :is(.bubble,.mem-article-render) code{font-family:var(--mono);font-size:.86em;background:rgba(127,127,127,.18);padding:2px 7px;border-radius:6px}
+  :is(.bubble,.mem-article-render) pre{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--hairline-soft);border-radius:12px;
     padding:13px 15px;overflow-x:auto;margin:10px 0;font:12.5px/1.6 var(--mono)}
-  .bubble pre code{background:none;padding:0;font-size:inherit}
-  .bubble h1,.bubble h2,.bubble h3,.bubble h4,.bubble h5,.bubble h6{font-weight:700;margin:14px 0 7px;letter-spacing:-.01em;line-height:1.3}
-  .bubble h1{font-size:1.28em}.bubble h2{font-size:1.16em}.bubble h3{font-size:1.06em}
-  .bubble h4,.bubble h5,.bubble h6{font-size:1em;color:var(--dim)}
-  .bubble h1:first-child,.bubble h2:first-child,.bubble h3:first-child{margin-top:0}
-  .bubble a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(100,210,255,.34)}
-  .bubble a:hover{border-bottom-color:var(--cyan)}
-  .bubble del{opacity:.55}
-  .bubble blockquote{margin:9px 0;padding:3px 14px;border-left:3px solid var(--hairline);color:var(--dim)}
-  .bubble blockquote p:last-child{margin-bottom:0}
-  .bubble hr{border:none;border-top:1px solid var(--hairline);margin:15px 0}
-  .bubble li.task{list-style:none;margin-left:-18px}
-  .bubble li.task input{margin-right:7px;accent-color:var(--blue);vertical-align:-1px}
-  .bubble .md-tablewrap{overflow-x:auto;margin:11px 0}
-  .bubble table.md-table{width:100%;border-collapse:collapse;font-size:.92em}
-  .bubble table.md-table th,.bubble table.md-table td{border:1px solid var(--hairline-soft);padding:6px 11px;text-align:left}
-  .bubble table.md-table th{background:rgba(255,255,255,.05);font-weight:600;color:var(--ink)}
-  .bubble .codeblock{margin:11px 0;border:1px solid var(--hairline-soft);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.45)}
-  .bubble .cbhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 9px 5px 13px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--hairline-soft)}
-  .bubble .cblang{font:11px/1 var(--mono);color:var(--dim);letter-spacing:.02em}
-  .bubble .cbcopy{font:11px/1 var(--mono);color:var(--dim);background:transparent;border:1px solid var(--hairline);border-radius:6px;padding:4px 10px;cursor:pointer;transition:color .15s,border-color .15s}
-  .bubble .cbcopy:hover{color:var(--ink);border-color:var(--dim)}
-  .bubble .codeblock pre{margin:0;border:none;border-radius:0;background:transparent}
+  :is(.bubble,.mem-article-render) pre code{background:none;padding:0;font-size:inherit;color:inherit}
+  :is(.bubble,.mem-article-render) h1,:is(.bubble,.mem-article-render) h2,:is(.bubble,.mem-article-render) h3,:is(.bubble,.mem-article-render) h4,:is(.bubble,.mem-article-render) h5,:is(.bubble,.mem-article-render) h6{font-weight:700;margin:14px 0 7px;letter-spacing:-.01em;line-height:1.3}
+  :is(.bubble,.mem-article-render) h1{font-size:1.28em}:is(.bubble,.mem-article-render) h2{font-size:1.16em}:is(.bubble,.mem-article-render) h3{font-size:1.06em}
+  :is(.bubble,.mem-article-render) h4,:is(.bubble,.mem-article-render) h5,:is(.bubble,.mem-article-render) h6{font-size:1em;color:var(--dim)}
+  :is(.bubble,.mem-article-render) h1:first-child,:is(.bubble,.mem-article-render) h2:first-child,:is(.bubble,.mem-article-render) h3:first-child{margin-top:0}
+  :is(.bubble,.mem-article-render) a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(100,210,255,.34)}
+  :is(.bubble,.mem-article-render) a:hover{border-bottom-color:var(--cyan)}
+  :is(.bubble,.mem-article-render) del{opacity:.55}
+  :is(.bubble,.mem-article-render) blockquote{margin:9px 0;padding:3px 14px;border-left:3px solid var(--hairline);color:var(--dim)}
+  :is(.bubble,.mem-article-render) blockquote p:last-child{margin-bottom:0}
+  :is(.bubble,.mem-article-render) hr{border:none;border-top:1px solid var(--hairline);margin:15px 0}
+  :is(.bubble,.mem-article-render) li.task{list-style:none;margin-left:-18px}
+  :is(.bubble,.mem-article-render) li.task input{margin-right:7px;accent-color:var(--blue);vertical-align:-1px}
+  :is(.bubble,.mem-article-render) .md-tablewrap{overflow-x:auto;margin:11px 0}
+  :is(.bubble,.mem-article-render) table.md-table{width:100%;border-collapse:collapse;font-size:.92em}
+  :is(.bubble,.mem-article-render) table.md-table th,:is(.bubble,.mem-article-render) table.md-table td{border:1px solid var(--hairline-soft);padding:6px 11px;text-align:left}
+  :is(.bubble,.mem-article-render) table.md-table th{background:rgba(255,255,255,.05);font-weight:600;color:var(--ink)}
+  :is(.bubble,.mem-article-render) .codeblock{margin:11px 0;border:1px solid var(--hairline-soft);border-radius:12px;overflow:hidden;background:var(--code-bg);color:var(--code-ink)}
+  :is(.bubble,.mem-article-render) .cbhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 9px 5px 13px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--hairline-soft)}
+  :is(.bubble,.mem-article-render) .cblang{font:11px/1 var(--mono);color:rgba(245,245,247,.65);letter-spacing:.02em}
+  :is(.bubble,.mem-article-render) .cbcopy{font:11px/1 var(--mono);color:rgba(245,245,247,.65);background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px 10px;cursor:pointer;transition:color .15s,border-color .15s}
+  :is(.bubble,.mem-article-render) .cbcopy:hover{color:var(--code-ink);border-color:rgba(255,255,255,.4)}
+  :is(.bubble,.mem-article-render) .codeblock pre{margin:0;border:none;border-radius:0;background:transparent;color:inherit}
+  /* Canvas v1 (plan §9 Phase 3, beat matrix Axis 2): Preview|Source toggle
+     for html/svg fences, sharing .cbhead with the existing lang tag + Copy
+     button. .cbhead keeps lang pinned left; the toggle+copy group sits
+     right via margin-left:auto on the first right-side element instead of
+     space-between, since space-between with 3 children would push the
+     toggle to the dead center of the bar. */
+  :is(.bubble,.mem-article-render) .cbhead{justify-content:flex-start}
+  :is(.bubble,.mem-article-render) .cbtoggle{display:inline-flex;gap:2px;margin-left:auto;padding:2px;border-radius:7px;background:rgba(255,255,255,.05)}
+  :is(.bubble,.mem-article-render) .cbview{font:11px/1 var(--mono);color:rgba(245,245,247,.55);background:transparent;border:none;
+    border-radius:5px;padding:4px 9px;cursor:pointer;transition:color .15s,background .15s}
+  :is(.bubble,.mem-article-render) .cbview:hover{color:var(--code-ink)}
+  :is(.bubble,.mem-article-render) .cbview.active{color:var(--code-ink);background:rgba(255,255,255,.14)}
+  /* has-canvas keeps Copy visually last, right after the toggle group. */
+  :is(.bubble,.mem-article-render) .codeblock.has-canvas .cbcopy{margin-left:2px}
+  :is(.bubble,.mem-article-render) .cbcanvas{position:relative;background:#fff}
+  :is(.bubble,.mem-article-render) .cbframe{display:block;width:100%;height:420px;min-height:160px;max-height:80vh;
+    border:none;resize:vertical;overflow:auto;background:#fff}
+  /* No layout shift on toggle: pre and cbcanvas are simply swapped via
+     [hidden] — the codeblock's own border/rounding stays put, and the
+     iframe's own default height (420px) plus resize:vertical means the
+     block doesn't jump when Preview first opens vs. later re-opens. */
   .cursor{display:inline-block;width:8px;height:17px;vertical-align:-3px;border-radius:2px;
     background:linear-gradient(180deg,var(--pink),var(--purple));animation:blink 1s steps(2) infinite}
   @keyframes blink{50%{opacity:0}}
@@ -412,8 +925,8 @@
   .tool.open .tbody{display:block}
   .tool .blk{margin-bottom:10px}.tool .blk:last-child{margin-bottom:0}
   .tool .blbl{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);margin-bottom:5px}
-  .tool pre{background:rgba(0,0,0,.4);border-radius:9px;padding:10px 12px;overflow-x:auto;
-    font:12px/1.55 var(--mono);color:var(--dim);white-space:pre-wrap;word-break:break-word;max-height:260px;overflow-y:auto}
+  .tool pre{background:var(--code-bg-soft);border-radius:9px;padding:10px 12px;overflow-x:auto;
+    font:12px/1.55 var(--mono);color:rgba(245,245,247,.7);white-space:pre-wrap;word-break:break-word;max-height:260px;overflow-y:auto}
   /* approval dialog */
   .approval{margin:12px 0;border:1px solid rgba(255,159,10,.45);border-radius:16px;overflow:hidden;
@@ -424,7 +937,7 @@
   .approval .ahead .at{font-weight:700;font-size:14px}
   .approval .ahead .as{font:12px var(--mono);color:var(--orange);margin-left:auto}
   .approval .abody{padding:13px 16px}
-  .approval pre{background:rgba(0,0,0,.45);border-radius:10px;padding:12px 14px;overflow-x:auto;
+  .approval pre{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:12px 14px;overflow-x:auto;
     font:12.5px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto}
   .approval .diffadd{color:var(--green)}
   .approval .diffdel{color:var(--red)}
@@ -432,6 +945,71 @@
   .approval .resolved{padding:11px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
   .approval .resolved.allow{color:var(--green)}
   .approval .resolved.deny{color:var(--red)}
+  /* Editable arguments (plan §5.4/§6.5, LM Studio's pattern): pre-filled
+     with the proposed args JSON; the diff (edit/write only) stays above as
+     a read-only visual aid so large content edits don't only exist as raw
+     JSON. Approve re-parses the textarea and ships the edited object. */
+  .approval .a-diff{margin-bottom:10px}
+  .approval textarea.a-args{width:100%;background:var(--code-bg);color:var(--code-ink);border:1px solid var(--hairline);
+    border-radius:10px;padding:12px 14px;font:12.5px/1.6 var(--mono);resize:vertical;min-height:64px;max-height:280px}
+  .approval textarea.a-args:focus{outline:none;border-color:var(--orange)}
+  .approval .a-argerr{margin-top:8px;font-size:12px;color:var(--red)}
+  .approval .a-always{display:flex;align-items:center;gap:9px;padding:0 16px 13px;font-size:12.5px;
+    color:var(--dim);cursor:pointer;font-weight:500}
+  .approval .a-always input{width:auto;margin:0;accent-color:var(--orange)}
+  /* ─── memory provenance chip (plan §5.4.2) — deliberately NOT the wrench
+     tool-card language: a citation, not a shell command. Quiet by default
+     (small pill, one line), expands to a lightweight card on click. ─── */
+  .memchip{margin:10px 0;border:1px solid rgba(191,90,242,.3);border-radius:999px;overflow:hidden;
+    background:rgba(191,90,242,.07);max-width:fit-content;transition:border-radius .18s var(--ease)}
+  .memchip.open{border-radius:14px;max-width:none}
+  .memchip.fail{border-color:rgba(255,69,58,.45);background:rgba(255,69,58,.06)}
+  .memchip.fail .mcicon{color:var(--red)}
+  .memchip .mchead{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;user-select:none}
+  .memchip .mcicon{font-size:12.5px;flex:0 0 auto;color:var(--purple)}
+  .memchip .mclabel{font-size:12.5px;color:var(--dim);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .memchip .mclabel b{color:var(--ink);font-weight:600}
+  .memchip .mccaret{color:var(--dimmer);font-size:11px;transition:transform .2s var(--ease);flex:0 0 auto}
+  .memchip.open .mccaret{transform:rotate(90deg)}
+  .memchip .mcbody{display:none;border-top:1px solid rgba(191,90,242,.2);padding:11px 14px 12px}
+  .memchip.open .mcbody{display:block}
+  .memchip .mcbody pre{background:var(--code-bg-soft);border-radius:9px;padding:9px 11px;overflow-x:auto;
+    font:11.5px/1.5 var(--mono);color:rgba(245,245,247,.7);white-space:pre-wrap;word-break:break-word;max-height:200px;overflow-y:auto;margin-bottom:8px}
+  .memchip .mcopen{font:11px/1 var(--mono);color:var(--purple);background:transparent;border:1px solid rgba(191,90,242,.4);
+    border-radius:6px;padding:5px 10px;cursor:pointer;transition:background .15s}
+  .memchip .mcopen:hover{background:rgba(191,90,242,.14)}
+  /* ─── Chat-with-files RAG v1 Sources panel (plan §9 Phase 3, beat matrix
+     Axis 5) — deliberately close to the memchip's citation language above:
+     a collapsed "Sources · K" line under the reply that expands to
+     filename+snippet per retrieved chunk, plus [n] markers in the reply
+     text rendered as small round citation buttons that jump to their row. */
+  .sources{margin-top:11px;border:1px solid var(--hairline-soft);border-radius:12px;overflow:hidden;
+    background:rgba(255,255,255,.03)}
+  .sources summary{list-style:none;display:flex;align-items:center;gap:7px;padding:8px 13px;
+    cursor:pointer;user-select:none;font-size:12.5px;font-weight:600;color:var(--dim)}
+  .sources summary::-webkit-details-marker{display:none}
+  .sources summary::before{content:"›";display:inline-block;color:var(--dimmer);
+    transition:transform .2s var(--ease)}
+  .sources[open] summary::before{transform:rotate(90deg)}
+  .src-list{border-top:1px solid var(--hairline-soft);padding:9px 13px 11px;display:flex;flex-direction:column;gap:10px}
+  .src-row{border-radius:9px;padding:7px 9px;transition:background .5s var(--ease)}
+  .src-row.pulse{background:rgba(10,132,255,.16)}
+  .src-n{font:700 11px var(--mono);color:var(--blue);margin-right:7px}
+  .src-meta{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
+  .src-file{font-size:12.5px;font-weight:600;color:var(--ink)}
+  .src-range{font:11px var(--mono);color:var(--dimmer)}
+  .src-snippet{margin-top:4px;font-size:12px;line-height:1.5;color:var(--dim);white-space:pre-wrap;word-break:break-word}
+  /* [n] citation markers rendered inline in the assistant's reply text
+     (markdown.ts's linkifyCitations) — small round buttons, never full-size
+     links, so they read as footnote markers rather than ordinary hyperlinks. */
+  :is(.bubble) .cite-mark{display:inline-flex;align-items:center;justify-content:center;
+    min-width:16px;height:16px;padding:0 4px;margin:0 1px;border-radius:999px;border:none;
+    background:rgba(10,132,255,.18);color:var(--blue);font:700 10px var(--mono);
+    cursor:pointer;vertical-align:2px;line-height:1;transition:background .15s}
+  :is(.bubble) .cite-mark:hover{background:rgba(10,132,255,.3)}
+  @media (prefers-reduced-motion:reduce){.src-row{transition:none}.sources summary::before{transition:none}}
   /* chat hello / starters */
   #chat-hello{max-width:840px;margin:6vh auto 0;padding:0 22px;text-align:center}
@@ -440,21 +1018,58 @@
   #chat-hello .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
   .chip{border:1px solid var(--hairline);background:var(--card);color:var(--dim);border-radius:999px;
     padding:9px 16px;font-size:13.5px;cursor:pointer;transition:all .25s var(--ease)}
-  .chip:hover{color:var(--ink);border-color:rgba(255,255,255,.32);background:var(--card-hover)}
+  .chip:hover{color:var(--ink);border-color:var(--hairline-strong);background:var(--card-hover)}
+  /* memory consent card (plan §5.1/§9 Phase 2) — one-line, skippable, in the
+     hero. Never auto-creates the vault; a plain hairline card, not a modal,
+     so it reads as an offer, not an interruption. */
+  #chat-consent{display:none;align-items:center;gap:12px;text-align:left;margin:22px auto 0;max-width:640px;
+    border:1px solid var(--hairline);background:var(--card);border-radius:14px;padding:13px 16px}
+  #chat-consent.show{display:flex}
+  #chat-consent .cc-icon{font-size:18px;flex:0 0 auto}
+  #chat-consent .cc-text{flex:1 1 auto;font-size:13px;color:var(--dim);line-height:1.5}
+  #chat-consent .cc-text b{color:var(--ink);font-weight:600}
+  #chat-consent .cc-actions{display:flex;gap:8px;flex:0 0 auto}
   /* chat composer */
   #chat-foot{flex:0 0 auto;border-top:1px solid var(--hairline);padding:14px 22px 16px;
-    background:rgba(0,0,0,.4);backdrop-filter:blur(16px)}
+    background:var(--card-2);backdrop-filter:blur(16px)}
   .composer{max-width:840px;margin:0 auto}
   .queuebar{display:none;max-width:840px;margin:0 auto 10px;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
   .queuebar .qtag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline);
     border-radius:999px;padding:4px 11px;background:var(--card)}
   .queuebar .qtag b{color:var(--ink);font-weight:600}
   .inputrow{display:flex;gap:10px;align-items:flex-end}
-  #chat-box{flex:1;background:var(--card);border:1px solid var(--hairline);border-radius:16px;
+  #chat-box-wrap{position:relative;flex:1;min-width:0}
+  #chat-box{width:100%;background:var(--card);border:1px solid var(--hairline);border-radius:16px;
     color:var(--ink);font:15px/1.5 inherit;padding:13px 16px;resize:none;outline:none;
-    max-height:200px;min-height:50px;transition:border-color .25s}
+    max-height:200px;min-height:50px;transition:border-color .25s;box-sizing:border-box}
   #chat-box:focus{border-color:rgba(10,132,255,.5)}
+  /* Unified "#" retrieval mention picker (plan §5.2/§9 Phase 2) — same
+     floating-panel chrome as .samplepop, anchored above the textarea it
+     types into instead of a pill. Zero layout shift: absolutely positioned,
+     hidden by default, never reflows the composer underneath it. */
+  .mentionpop{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:40;
+    max-height:min(46vh,320px);overflow-y:auto;
+    background:var(--popover-panel);border:1px solid var(--hairline);border-radius:13px;padding:6px;
+    backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
+    box-shadow:0 18px 50px rgba(0,0,0,.35);display:none;
+    transform:translateY(4px);opacity:0;transition:opacity .14s var(--ease),transform .14s var(--ease)}
+  .mentionpop.open{display:block;transform:translateY(0);opacity:1}
+  .mention-sec-title{font-size:10.5px;font-weight:600;color:var(--dimmer);letter-spacing:.04em;
+    text-transform:uppercase;padding:7px 9px 4px}
+  .mention-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer}
+  .mention-row:hover,.mention-row.active{background:var(--card-hover)}
+  .mention-ico{font-size:12px;color:var(--dimmer);flex:0 0 auto}
+  .mention-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    font-size:13px;color:var(--ink)}
+  .mention-tag{flex:0 0 auto;font-size:10px;color:var(--dimmer);text-transform:uppercase;letter-spacing:.03em}
+  .mention-empty{padding:10px 9px;font-size:12px;color:var(--dim)}
+  /* Pulse a file's attach-chip when it's selected from the mention picker
+     (the file is already attached — this is the only feedback needed). */
+  .attach-chip.pulse{animation:chippulse .5s var(--ease) 2}
+  @keyframes chippulse{0%,100%{box-shadow:0 0 0 rgba(10,132,255,0)}50%{box-shadow:0 0 0 3px rgba(10,132,255,.45)}}
+  @media (prefers-reduced-motion:reduce){.attach-chip.pulse{animation:none}}
   #chat-send{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff;
     border:none;border-radius:14px;height:50px;padding:0 22px;font:600 14px inherit;cursor:pointer;transition:filter .2s}
   #chat-send:hover{filter:brightness(1.14)}
@@ -462,9 +1077,43 @@
   #chat-stop{display:none;background:var(--card);border:1px solid var(--hairline);color:var(--ink);
     border-radius:14px;height:50px;padding:0 20px;font:600 14px inherit;cursor:pointer}
   #chat-stop:hover{background:var(--card-hover)}
-  .chat-hint{max-width:840px;margin:8px auto 0;font-size:11.5px;color:var(--dimmer);display:flex;justify-content:space-between;gap:10px}
-  .chat-hint .hint-right{display:flex;gap:12px;align-items:center}
-  #chat-context{font:11px/1 var(--mono);letter-spacing:.01em;white-space:nowrap}
+  /* Wrap + shrink rules (2026-07-06 jank fix): without flex-wrap/min-width:0
+     the right pill cluster overflowed past the viewport edge at tablet
+     widths ("no adapter" clipped). The status line ellipsizes first; the
+     pills wrap to a second row before anything leaves the screen. */
+  .chat-hint{max-width:840px;margin:8px auto 0;font-size:11.5px;color:var(--dimmer);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
+  .chat-hint #chat-status-line{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .chat-hint .hint-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;min-width:0}
+  /* Native <select> in .pill clothes: reset the UA appearance and draw our
+     own chevron — the stock arrow collided with the label text ("no adaptɘr"
+     glyph pile-up), and long adapter ids now ellipsize instead of overflow. */
+  #chat-adapter{appearance:none;-webkit-appearance:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    padding-right:27px;cursor:pointer;
+    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23909098' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat:no-repeat;background-position:right 11px center}
+  /* perf strip — always-visible, quiet: replaces the old bare #chat-tps text
+     with tok/s + TTFT + context-fill + (server-driven only) a lane badge. */
+  #chat-perf{max-width:840px;margin:8px auto 0;display:flex;align-items:center;gap:14px;
+    font:11px/1 var(--mono);letter-spacing:.01em;color:var(--dimmer);flex-wrap:wrap}
+  #chat-perf .pf-item{white-space:nowrap}
+  #chat-perf .pf-item b{color:var(--ink);font-weight:600}
+  #chat-perf .pf-lane{display:none;align-items:center;gap:5px;border:1px solid var(--hairline);
+    border-radius:999px;padding:2px 9px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
+  #chat-perf .pf-lane .dot{width:6px;height:6px;border-radius:50%;background:var(--dimmer)}
+  #chat-perf .pf-lane.serial .dot{background:var(--dim)}
+  #chat-perf .pf-lane.spec .dot{background:var(--blue);box-shadow:0 0 8px var(--blue)}
+  #chat-perf .pf-lane.batched .dot{background:var(--green);box-shadow:0 0 8px var(--green)}
+  /* adapter chip — upgraded presentation over the bare <select>: current
+     selection + specialty line, options grayed by /v1/adapters/available's
+     compatible flag rather than hidden outright. */
+  #chat-adapter option:disabled{color:var(--dimmer);font-style:italic}
+  /* "manage adapters" gear beside the quick-switch <select> — opens the
+     routing table (#adapters-overlay), same pill sizing as #chat-think. */
+  #adapters-manage{appearance:none;-webkit-appearance:none;cursor:pointer;display:inline-flex;align-items:center;
+    justify-content:center;width:27px;height:27px;border-radius:999px;background:var(--card);
+    border:1px solid var(--hairline);color:var(--dim);font-size:12.5px;line-height:1;flex:0 0 auto;
+    transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
+  #adapters-manage:hover{color:var(--ink);background:var(--card-hover);border-color:var(--hairline-strong)}
   /* attach (+) button + attachment chips */
   #chat-attach-btn{flex:0 0 auto;width:50px;height:50px;border-radius:14px;background:var(--card);
     border:1px solid var(--hairline);color:var(--ink);font-size:23px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
@@ -477,6 +1126,14 @@
   .attach-chip .att-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
   .attach-chip .att-x{border:none;background:transparent;color:var(--dim);cursor:pointer;font-size:12px;line-height:1;padding:0 2px}
   .attach-chip .att-x:hover{color:var(--red)}
+  /* Chat-with-files RAG v1 (plan §9 Phase 3, beat matrix Axis 5): shown on
+     text-file chips once the attached set is large enough that only the
+     most relevant chunks get sent per turn instead of the whole file
+     (composer.ts's shouldRetrieve threshold) — transparency principle, the
+     mode switch must be visible on the chip, not just in prompt content
+     the user never sees. */
+  .attach-chip .att-tag{flex:0 0 auto;font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
+    color:var(--purple);background:rgba(191,90,242,.14);border-radius:999px;padding:2px 7px}
   .composer.dragover{outline:2px dashed var(--blue);outline-offset:6px;border-radius:14px}
   .msg-atts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
   .msg-att-img{max-width:220px;max-height:220px;border-radius:10px;display:block}
@@ -485,7 +1142,10 @@
   /* loss chart */
   .chartcard{margin-top:20px}
-  .chart-wrap{position:relative;background:rgba(0,0,0,.32);border:1px solid var(--hairline-soft);border-radius:14px;padding:14px;margin-top:6px}
+  /* the chart's SVG gridlines are hardcoded white-on-dark (drawChart()), so
+     the wrap keeps the always-dark code-panel surface for contrast rather
+     than following the chat theme — same rationale as .bubble pre above. */
+  .chart-wrap{position:relative;background:var(--code-bg-soft);border:1px solid var(--hairline-soft);border-radius:14px;padding:14px;margin-top:6px}
   .chart-legend{display:flex;gap:18px;font-size:12px;color:var(--dim);margin-bottom:8px}
   .chart-legend .lg{display:inline-flex;align-items:center;gap:7px}
   .chart-legend .sw{width:14px;height:3px;border-radius:2px}
@@ -493,84 +1153,341 @@
   .chart-stats .cs b{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
   .chart-stats .cs span{font-size:20px;font-weight:700;letter-spacing:-.02em}
+  /* Tablet band (2026-07-06 jank fix): with up to 7 tabs (fewer once the
+     plan §8 Developer toggle is off — see nav .tab[data-dev] above) +
+     hamburger + shortcuts + theme toggle + gear + conn pill, the tab row
+     can overflow well above the 900px cutoff — tighten tab padding first
+     so fewer widths need the scroll-fade at all. */
+  @media (max-width:1160px){
+    nav{gap:12px}
+    nav .tab{padding:8px 9px;font-size:13px}
+  }
   @media (max-width:900px){
     .hpgrid{grid-template-columns:1fr}
     nav .model{display:none}
     .wrap{padding:34px 18px 100px}
     nav{gap:12px;padding:0 16px}
+    /* Icon-only theme toggle a bit earlier than 560px — the nav is already
+       tight here (hamburger + shortcuts + toggle + hf-gear + conn pill) and
+       "Auto" as a text label isn't worth the horizontal cost at this width.
+       The ◐ tt-icon stands in so the Auto button never renders as an empty
+       sliver (2026-07-06 QA finding). */
+    #theme-toggle button{padding:0 7px;font-size:15px}
+    #theme-toggle .tt-label{display:none}
+    #theme-toggle .tt-icon{display:inline}
+    /* Developer toggle: dot-only past this width, same reasoning as the
+       theme toggle above — "Developer" as a text label costs more than
+       the dot alone conveys once the row is already tight. */
+    #nav-developer span:not(.nd-dot){display:none}
+    #nav-developer{padding:0;width:34px;justify-content:center}
+  }
+  @media (max-width:760px){
+    /* Touch band (2026-07-06 QA): a keyboard-shortcut sheet button is dead
+       weight on touch viewports, and the nav needs its width back. */
+    #nav-shortcuts{display:none}
+    /* The conn pill collapses to its status dot (title keeps the text for
+       long-press/hover); "live · localhost" was clipping at the viewport
+       edge at 375px. */
+    #nav-conn #nav-conn-text{display:none}
+    #nav-conn{padding:6px 9px}
+    /* Keep a scrollable strip of tabs alive — flex shrank them to 0 width
+       at phone sizes, silently removing Quantize/Status navigation. The
+       scroll-fade masks signal the rest. With the Developer toggle off
+       (the fresh-browser default) this row can be just the single Chat
+       tab — min-width still holds so the fade-mask math in
+       updateTabFades() never divides against a zero-width strip. */
+    nav .tabs{min-width:96px}
   }
   @media (max-width:560px){
     nav .brand{font-size:16px}
     nav .tab{padding:8px 10px;font-size:13px}
+    nav .right{gap:6px}
+    .icon-btn,.hf-gear{width:30px;height:30px}
+    /* Phones follow the system theme (Auto is the default); the explicit
+       3-way toggle returns ≥560px. Freeing its ~110px is what keeps the
+       tab strip + status dot inside a 375px viewport (2026-07-06 QA). */
+    #theme-toggle{display:none}
   }
 </style>
+<!-- Vendored syntax-highlighting theme (src/web/vendor/hljs-theme.css, hand-derived
+     from the design tokens above — see that file's header). No CDN; served by
+     src/server.ts alongside this page. -->
+<link rel="stylesheet" href="/assets/hljs.css">
+<!-- PWA installability (plan §9 Phase 3, beat-matrix Axis 10): manifest +
+     inline SVG icon (src/web/manifest.webmanifest, src/web/icon.svg — no
+     binary PNGs, per the hygiene gate; some browsers won't render an SVG
+     app icon and that's an accepted tradeoff, see features-matrix.md).
+     theme-color matches the app's --bg token so the OS chrome doesn't
+     flash a mismatched color on launch. -->
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="icon" href="/assets/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/assets/icon.svg">
+<meta name="theme-color" content="#000000">
 </head>
 <body>
 <div class="bloom" id="bloom"></div>
 <!-- ═══════════════════ TOP NAV ═══════════════════ -->
 <nav>
+  <!-- Mobile drawer trigger — chat route only (CSS keeps it hidden ≥760px
+       and JS keeps it hidden off the chat route, since there is no
+       sidebar to open elsewhere). aria-controls/expanded kept in sync by
+       the drawer open/close functions. -->
+  <button class="icon-btn" id="chat-hamburger" title="Open recent chats" aria-label="Open recent chats"
+          aria-controls="chat-sidebar" aria-expanded="false">
+    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+  </button>
   <a class="brand grad g-hero" href="#/chat">mlx-bun</a>
   <div class="tabs" id="tabs">
     <a class="tab" href="#/chat" data-tab="chat">Chat</a>
-    <a class="tab" href="#/quantize" data-tab="quantize">Quantize</a>
-    <a class="tab" href="#/finetune" data-tab="finetune">Fine-tune</a>
-    <a class="tab" href="#/dataset" data-tab="dataset">Build Dataset</a>
-    <a class="tab" href="#/status" data-tab="status">Status</a>
-    <a class="tab" href="/curves" data-tab="curves">Curves</a>
-    <a class="tab" href="#/routes" data-tab="routes">Routes</a>
+    <a class="tab" href="#/quantize" data-tab="quantize" data-dev>Quantize</a>
+    <a class="tab" href="#/finetune" data-tab="finetune" data-dev>Fine-tune</a>
+    <a class="tab" href="#/dataset" data-tab="dataset" data-dev>Build Dataset</a>
+    <a class="tab" href="#/status" data-tab="status" data-dev>Status</a>
+    <!-- Full-page link (not hash-routed), so the active-tab highlight logic
+         can never mark it — web-ui-pass-plan.md #19, cosmetic-only per the
+         plan. aria-label spells out that it leaves the SPA rather than
+         leaving the tab looking silently broken. -->
+    <a class="tab" href="/curves" data-tab="curves" data-dev aria-label="Curve designer (opens a separate page)">Curves</a>
+    <a class="tab" href="#/routes" data-tab="routes" data-dev>Routes</a>
   </div>
   <div class="right">
+    <!-- Developer toggle (plan §8/§9 Phase 2): collapses Quantize/Fine-tune/
+         Build Dataset/Status/Curves/Routes behind one switch. State + the
+         one-time existing-user default live in shell.ts's
+         initDeveloperToggle/isDeveloperMode. -->
+    <button id="nav-developer" data-spotlight="developer-toggle" type="button" role="switch" aria-checked="false"
+            title="Show developer tools (Quantize, Fine-tune, Build Dataset, Status, Curves, Routes)"
+            aria-label="Toggle developer tools">
+      <span class="nd-dot" id="nav-developer-dot" aria-hidden="true"></span><span>Developer</span>
+    </button>
+    <button class="icon-btn" id="nav-shortcuts" title="Keyboard shortcuts (Cmd/Ctrl+/)" aria-label="Keyboard shortcuts"
+            aria-haspopup="dialog" aria-controls="shortcut-overlay" aria-expanded="false">
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"></rect><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h12"></path></svg>
+    </button>
+    <!-- 3-way theme toggle (plan §7): auto follows prefers-color-scheme,
+         dark/light are explicit user overrides — all persisted to
+         localStorage by setTheme() below. -->
+    <div id="theme-toggle" role="group" aria-label="Theme">
+      <button type="button" data-theme-choice="auto" title="Match system theme" aria-label="Auto theme"><span class="tt-icon" aria-hidden="true">◐</span><span class="tt-label">Auto</span></button>
+      <button type="button" data-theme-choice="dark" title="Dark theme" aria-label="Dark theme">🌙</button>
+      <button type="button" data-theme-choice="light" title="Light theme" aria-label="Light theme">☀️</button>
+    </div>
     <button class="hf-gear" id="nav-hf" title="Hugging Face token settings" aria-label="Hugging Face settings">
       <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
     </button>
-    <span class="model" id="nav-model" title="active model">connecting…</span>
+    <!-- Model picker (plan §5.6/§9 Phase 2): #nav-model was a dead <span>
+         with no click handler; now opens a popover of downloaded models
+         with a per-row /fit-shaped verdict (model-picker.ts). Wrapped for
+         position:relative anchoring, same pattern as #chat-sampling-wrap. -->
+    <span id="nav-model-wrap">
+      <button class="model" id="nav-model" data-spotlight="model-picker" type="button" title="active model — click to browse downloaded models"
+              aria-haspopup="dialog" aria-controls="model-pop" aria-expanded="false">connecting…</button>
+      <div id="model-pop" class="samplepop" role="dialog" aria-label="Downloaded models">
+        <h4>Downloaded models</h4>
+        <div id="model-pop-body"></div>
+      </div>
+    </span>
     <span class="pill" id="nav-conn"><span class="dot"></span><span id="nav-conn-text">connecting…</span></span>
     <span class="pill" id="nav-download" style="display:none" title="A more capable model is downloading in the background"><span class="dot"></span><span id="nav-download-text"></span></span>
   </div>
 </nav>
-<!-- ═══════════════════ HF SETTINGS OVERLAY ═══════════════════ -->
+<!-- ═══════════════════ SETTINGS OVERLAY ═══════════════════
+     (was "HF settings" — widened in place for the Agent tools section,
+     plan §5.4/§6.5/§9 Phase 2. Same ids/behavior for the HF piece; nothing
+     about push-to-hub or the hf-* wiring changed.) -->
 <div id="hf-overlay">
-  <div id="hf-modal">
+  <div id="hf-modal" role="dialog" aria-modal="true" aria-labelledby="hf-modal-title-el">
     <div class="hf-modal-head">
-      <div class="hf-modal-title">Hugging Face</div>
+      <div class="hf-modal-title" id="hf-modal-title-el">Settings</div>
       <button class="hf-close" id="hf-close" aria-label="Close">✕</button>
     </div>
-    <p class="hf-modal-sub" id="hf-state">Checking for a saved token…</p>
-    <div class="field" style="margin-bottom:10px">
-      <label>Write token</label>
-      <input type="password" id="hf-token-input" placeholder="hf_…" autocomplete="off" spellcheck="false">
-      <div class="hint">A <strong>write</strong> token from huggingface.co/settings/tokens. Stored locally at <code>~/.mlx-bun/hf.json</code> — never sent anywhere but your own Hub pushes.</div>
+    <!-- Agent tools (plan §5.4/§6.5): the codingTools opt-in + the durable
+         always-allow list. Lives above Hugging Face since it's the more
+         chat-relevant setting. -->
+    <div class="settings-section">
+      <h3 class="settings-h">Agent tools</h3>
+      <label class="chk settings-toggle-row" for="settings-coding-tools">
+        <input type="checkbox" id="settings-coding-tools">
+        <span>Let the agent touch files on this machine</span>
+      </label>
+      <div class="hint">
+        Off by default. When on, the chat assistant can run shell commands and
+        edit or create files — each one asks first, in the chat, unless you
+        choose "always allow" for that action. Nothing runs without your
+        review the first time.
+      </div>
+      <p class="settings-note" id="settings-coding-tools-note" style="display:none"></p>
+      <div id="settings-approvals-list"></div>
     </div>
-    <div id="hf-settings-msg"></div>
-    <div class="btnrow" style="margin-top:14px">
-      <button class="btn primary sm" id="hf-save">Save token</button>
+    <div class="settings-section">
+      <h3 class="settings-h">Hugging Face</h3>
+      <p class="hf-modal-sub" id="hf-state">Checking for a saved token…</p>
+      <div class="field" style="margin-bottom:10px">
+        <label>Write token</label>
+        <input type="password" id="hf-token-input" placeholder="hf_…" autocomplete="off" spellcheck="false">
+        <div class="hint">A <strong>write</strong> token from huggingface.co/settings/tokens. Stored locally at <code>~/.mlx-bun/hf.json</code> — never sent anywhere but your own Hub pushes.</div>
+      </div>
+      <div id="hf-settings-msg"></div>
+      <div class="btnrow" style="margin-top:14px">
+        <button class="btn primary sm" id="hf-save">Save token</button>
+      </div>
     </div>
   </div>
 </div>
+<!-- ═══════════════════ KEYBOARD SHORTCUT SHEET ═══════════════════ -->
+<div id="shortcut-overlay">
+  <div id="shortcut-modal" role="dialog" aria-modal="true" aria-labelledby="sk-modal-title">
+    <div class="sk-head">
+      <div class="sk-title" id="sk-modal-title">Keyboard shortcuts</div>
+      <button class="sk-close" id="sk-close" aria-label="Close">✕</button>
+    </div>
+    <div class="sk-row"><span class="sk-desc">Show this shortcut sheet</span><span class="sk-keys"><span class="sk-key" id="sk-mod-label">⌘</span><span class="sk-key">/</span></span></div>
+    <div class="sk-row"><span class="sk-desc">New chat</span><span class="sk-keys"><span class="sk-key sk-mod"></span><span class="sk-key">Shift</span><span class="sk-key">O</span></span></div>
+    <div class="sk-row"><span class="sk-desc">Focus the composer</span><span class="sk-keys"><span class="sk-key">Shift</span><span class="sk-key">Esc</span></span></div>
+    <div class="sk-row"><span class="sk-desc">Copy last response</span><span class="sk-keys"><span class="sk-key sk-mod"></span><span class="sk-key">Shift</span><span class="sk-key">C</span></span></div>
+    <div class="sk-row"><span class="sk-desc">Send message</span><span class="sk-keys"><span class="sk-key">Enter</span></span></div>
+    <div class="sk-row"><span class="sk-desc">New line in composer</span><span class="sk-keys"><span class="sk-key">Shift</span><span class="sk-key">Enter</span></span></div>
+    <div class="sk-row"><span class="sk-desc">Close popover / drawer / sheet</span><span class="sk-keys"><span class="sk-key">Esc</span></span></div>
+  </div>
+</div>
+<!-- ═══════════════════ MEMORY PANEL ═══════════════════ (plan §5.5/§9 Phase 2)
+     Full-height overlay beside chat, same drawer/overlay language as the HF
+     modal and mobile sidebar: fixed, scrimmed, focus-trapped, Escape closes.
+     All content rendered client-side by memory-panel.ts from the
+     /api/memory/* REST wrappers — no new WS frames. -->
+<div id="mem-overlay">
+  <div id="mem-panel" role="dialog" aria-modal="true" aria-labelledby="mem-title">
+    <div class="mem-head">
+      <button class="mem-back" id="mem-back" type="button" aria-label="Back to article list">‹ Back</button>
+      <h2 id="mem-title">Memory</h2>
+      <button class="mem-close" id="mem-close" aria-label="Close memory panel">✕</button>
+    </div>
+    <div class="mem-status" id="mem-status"></div>
+    <div class="mem-body" id="mem-body"></div>
+  </div>
+</div>
+<!-- ═══════════════════ ADAPTER ROUTING TABLE ═══════════════════ (plan §5.6/§9 Phase 2)
+     Same right-side overlay/panel chrome as the Memory panel (fixed,
+     scrimmed, focus-trapped, Escape closes) — the deep adapter surface
+     opened from the composer's ⚙ button beside #chat-adapter. Reads the
+     same /v1/adapters + /v1/adapters/available list state the quick
+     <select> uses (adapters-panel.ts), never a second fetch owner. -->
+<div id="adapters-overlay">
+  <div id="adapters-panel" role="dialog" aria-modal="true" aria-labelledby="adapters-title">
+    <div class="mem-head">
+      <h2 id="adapters-title">Adapters</h2>
+      <button class="mem-close" id="adapters-close" aria-label="Close adapter routing table">✕</button>
+    </div>
+    <div class="mem-body" id="adapters-body"></div>
+  </div>
+</div>
+<!-- ═══════════════════ MODEL HUB ═══════════════════ (plan §9 Phase 3, beat-matrix Axis 3)
+     Same right-side overlay/panel/head/body chrome as the Memory + Adapters
+     panels (fixed, scrimmed, focus-trapped, Escape closes). Opened from the
+     model picker popover's "Browse models…" action (hub.ts registers the
+     open callback via shell.ts's setOpenHubFromModelPicker). Three sections:
+     Downloaded (from /api/hub/local), Search Hugging Face (/api/hub/search),
+     and a quiet offline footer note. NEVER auto-downloads, NEVER
+     auto-serves — every action here is an explicit click. -->
+<div id="hub-overlay">
+  <div id="hub-panel" role="dialog" aria-modal="true" aria-labelledby="hub-title">
+    <div class="mem-head">
+      <h2 id="hub-title">Model Hub</h2>
+      <button class="mem-close" id="hub-close" aria-label="Close Model Hub">✕</button>
+    </div>
+    <div class="mem-body" id="hub-body">
+      <div id="hub-restart-strip" class="hub-restart-strip"></div>
+      <div class="hub-sec">
+        <div class="mem-sec-title">Downloaded</div>
+        <div id="hub-local-body"></div>
+      </div>
+      <div class="hub-sec">
+        <div class="mem-sec-title">Search Hugging Face</div>
+        <input type="search" id="hub-search-input" placeholder="Search MLX models…" aria-label="Search Hugging Face for MLX models" autocomplete="off">
+        <div id="hub-search-body" class="hub-search-body">
+          <div class="hub-empty">Type to search Hugging Face for MLX models.</div>
+        </div>
+      </div>
+      <p class="hub-offline-note" id="hub-offline-note" style="display:none">
+        You're offline (or Hugging Face is unreachable) — search needs a network connection,
+        but your downloaded models still work fully offline.
+      </p>
+    </div>
+  </div>
+</div>
+<!-- Mobile drawer backdrop (chat sidebar only — see #chat-sidebar CSS) -->
+<div id="chat-drawer-backdrop"></div>
 <div id="app">
   <!-- ═══════════════════ CHAT ═══════════════════ -->
   <section data-route="chat" id="s-chat">
     <aside id="chat-sidebar">
-      <button id="chat-new" title="Start a new chat (or type /new)">＋&nbsp; New chat</button>
+      <button id="chat-new" data-spotlight="new-chat" title="Start a new chat (or type /new)">＋&nbsp; New chat</button>
+      <input type="search" id="chat-sess-search" data-spotlight="session-search" placeholder="Search chats…" aria-label="Search chats" autocomplete="off">
       <div id="chat-sessions" class="sesslist"></div>
+      <!-- Memory panel entry (plan §5.5) — quiet, chat-adjacent, NOT a nav
+           tab: memory is the product, not a dev tool. Hidden entirely until
+           the first /api/memory/status poll resolves (see memory-panel.ts),
+           so it never flashes "0 articles" before a real vault is known to
+           exist or not exist. -->
+      <button id="chat-memory-entry" data-spotlight="memory-entry" type="button" style="display:none"
+              aria-haspopup="dialog" aria-controls="mem-overlay" aria-expanded="false">
+        <span class="mi" aria-hidden="true">◆</span>
+        <span class="mt">Memory</span>
+        <span class="mcount" id="chat-memory-count">—</span>
+      </button>
     </aside>
     <div id="chat-main">
     <div id="chat-scroll">
       <div id="chat-hello">
         <h1>Local. Private. <span class="grad g-hero">Yours.</span></h1>
         <p id="chat-hello-sub">A full pi agent on this machine — local model, local tools, zero cloud. Every token below is generated here.</p>
-        <div class="chips">
+        <div class="chips" id="chat-hello-chips">
           <button class="chip" data-q="What is mlx-bun and what can it do?">What is mlx-bun?</button>
           <button class="chip" data-q="How do I load a bigger or different model?">Load a bigger model</button>
           <button class="chip" data-q="Is this really private? Where does my data go?">Is this private?</button>
           <button class="chip" data-q="What can you help me with right now?">What can you do?</button>
         </div>
+        <!-- Memory consent card (plan §5.1/§9 Phase 2): first run only (no
+             vault + never dismissed, see memory-panel.ts's isConsentDismissed).
+             NEVER auto-creates the vault — this is the only path that calls
+             POST /api/memory/init. Hidden by default; shown by
+             maybeShowConsentCard() after the first status poll. -->
+        <div id="chat-consent" role="group" aria-label="Memory setup">
+          <span class="cc-icon" aria-hidden="true">◆</span>
+          <span class="cc-text">Let mlx-bun remember what matters? Creates a local, git-tracked vault you can open anytime.</span>
+          <span class="cc-actions">
+            <button class="btn ghost sm" id="chat-consent-skip" type="button">Skip</button>
+            <button class="btn primary sm" id="chat-consent-yes" type="button">Set up memory</button>
+          </span>
+        </div>
       </div>
-      <div id="chat-thread"></div>
+      <!-- aria-live is a coarse approximation: it announces at the container
+           level (whole finished messages / completed blocks), not per-token
+           on the live tail — announcing every streamed delta would spam a
+           screen reader with one interruption per token. aria-atomic=false
+           so only the newly-appended content is announced, not the whole
+           growing thread each time. -->
+      <!-- data-ui-chrome="content" excludes the whole rendered conversation
+           (model/user/tool text, links, citations) from captureUiSnapshot
+           (assistant.ts) — that snapshot is re-served to the model verbatim
+           as trusted "current UI state" via get_current_app_context, and an
+           `a[href]` inside a rendered message is untrusted content, not app
+           chrome (see isAgentChrome's doc comment). -->
+      <div id="chat-thread" role="log" aria-live="polite" aria-atomic="false" data-ui-chrome="content"></div>
     </div>
     <div id="chat-foot">
       <div class="queuebar" id="chat-queue"></div>
@@ -579,18 +1496,78 @@
         <div class="inputrow">
           <button id="chat-attach-btn" class="iconbtn" title="Attach files or images" aria-label="Attach files">＋</button>
           <input type="file" id="chat-file-input" multiple style="display:none">
-          <textarea id="chat-box" rows="1" placeholder="Message the local agent…  (Enter to send · Shift+Enter for newline)"></textarea>
+          <div id="chat-box-wrap">
+            <!-- Keep the placeholder SHORT: the Enter/Shift+Enter AND "#"
+                 hints live in the chat-hint status line below (and the Cmd+/
+                 sheet). A long placeholder wraps to two lines at phone/tablet
+                 widths inside this single-row box and clips against the
+                 border (2026-07-06 jank; re-introduced + re-fixed 07-07). -->
+            <textarea id="chat-box" data-spotlight="composer" rows="1" placeholder="Message the local agent…"></textarea>
+            <!-- Unified "#" retrieval mention (plan §5.2/§9 Phase 2): typing
+                 "#" opens this picker over both attached files and vault
+                 articles as one gesture (composer.ts's initMentionPicker).
+                 role=listbox for the arrow-key/Enter contract; content is
+                 built entirely client-side by renderMentionListHtml(). -->
+            <div id="chat-mention-pop" class="mentionpop" role="listbox" aria-label="Attach a file or recall a memory"></div>
+          </div>
           <button id="chat-stop" title="Abort the current turn">Stop</button>
-          <button id="chat-send">Send</button>
+          <button id="chat-send" data-spotlight="send">Send</button>
         </div>
         <div class="chat-hint">
           <span id="chat-status-line">Enter to send · Shift+Enter for a new line · type while it streams to steer</span>
           <span class="hint-right">
+            <!-- Per-chat system prompt + presets v1 (plan §9 Phase 2, beat
+                 matrix Axis 4): same pill+popover chrome as #chat-sampling
+                 (setSysPromptPopoverClose registers with shell.ts's
+                 closeTopOverlay the same way). The dot lights up whenever a
+                 custom prompt is active — the user must always SEE it's
+                 shaping replies (trust rule), never a silent setting. -->
+            <span id="chat-sysprompt-wrap">
+              <span id="chat-sysprompt" data-spotlight="prompt-pill" class="pill" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false"
+                    title="System prompt (shapes how the assistant replies in this chat)"><span class="dot"></span>Prompt</span>
+              <div id="chat-sysprompt-pop" class="samplepop sysprompt-pop" role="dialog" aria-label="System prompt">
+                <h4>System prompt</h4>
+                <textarea id="sysprompt-text" rows="6" maxlength="4000"
+                  placeholder="e.g. Answer in French. Keep replies under 3 sentences. Prefer Python over JS."
+                  aria-label="Custom system prompt"></textarea>
+                <div class="sysprompt-foot-row">
+                  <span class="note" id="sysprompt-count">0 / 4000</span>
+                  <button id="sysprompt-clear" type="button">Clear</button>
+                </div>
+                <span class="note">Layered on top of the built-in assistant prompt — it doesn't replace mlx-bun's own
+                  identity/tool guidance. Takes effect on your next message (not retroactively).</span>
+                <div class="sysprompt-presets">
+                  <h4>Presets</h4>
+                  <div class="sysprompt-preset-row">
+                    <select id="sysprompt-preset-select" class="pill" aria-label="Saved presets">
+                      <option value="">— presets —</option>
+                    </select>
+                    <button id="sysprompt-preset-save" type="button" title="Save the current prompt + sampling as a named preset">Save</button>
+                    <button id="sysprompt-preset-delete" type="button" title="Delete the selected preset">Delete</button>
+                  </div>
+                  <span class="note">A preset bundles this system prompt with the current Sampling settings — applying one sets both at once.</span>
+                </div>
+              </div>
+            </span>
             <span id="chat-sampling-wrap">
-              <span id="chat-sampling" class="pill" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false"
+              <span id="chat-sampling" data-spotlight="sampling-pill" class="pill" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false"
                     title="Sampling controls (temperature · top_p · top_k)"><span class="dot"></span>Sampling</span>
               <div id="chat-sampling-pop" class="samplepop" role="dialog" aria-label="Sampling controls">
-                <h4>Sampling</h4>
+                <div class="samp-head-row">
+                  <h4>Sampling</h4>
+                  <span id="samp-oneshot-chip" class="samp-oneshot-chip" style="display:none">next msg only</span>
+                </div>
+                <!-- Per-message sampling scope (plan §9 Phase 3, beat matrix Axis 4):
+                     "this session" (default) behaves exactly as today; "next message
+                     only" arms a one-shot override consumed by the next completed
+                     turn (composer.ts's pushSampling/clearOneShotArmed). -->
+                <div class="samp-scope-row">
+                  <label for="samp-scope">Apply</label>
+                  <select id="samp-scope" aria-label="Sampling scope">
+                    <option value="session">this session</option>
+                    <option value="next_turn">next message only</option>
+                  </select>
+                </div>
                 <div class="samprow">
                   <label for="samp-temp">Temperature</label>
                   <input id="samp-temp" type="range" min="0" max="2" step="0.05" aria-label="Temperature">
@@ -606,20 +1583,83 @@
                   <input id="samp-topk" type="range" min="0" max="100" step="1" aria-label="top_k">
                   <output id="samp-topk-val" class="samp-val auto">off</output>
                 </div>
+                <details class="samp-adv" id="samp-advanced">
+                  <summary>Advanced</summary>
+                  <div class="samprow">
+                    <label for="samp-minp">min_p</label>
+                    <input id="samp-minp" type="range" min="0" max="0.5" step="0.01" aria-label="min_p">
+                    <output id="samp-minp-val" class="samp-val auto">off</output>
+                  </div>
+                  <div class="samprow">
+                    <label for="samp-xtcp">XTC prob</label>
+                    <input id="samp-xtcp" type="range" min="0" max="1" step="0.01" aria-label="XTC probability">
+                    <output id="samp-xtcp-val" class="samp-val auto">off</output>
+                  </div>
+                  <div class="samprow">
+                    <label for="samp-xtct">XTC thresh</label>
+                    <input id="samp-xtct" type="range" min="0" max="1" step="0.01" aria-label="XTC threshold">
+                    <output id="samp-xtct-val" class="samp-val auto">off</output>
+                  </div>
+                  <div class="samprow">
+                    <label for="samp-reppen">repetition</label>
+                    <input id="samp-reppen" type="range" min="1" max="2" step="0.01" aria-label="repetition penalty">
+                    <output id="samp-reppen-val" class="samp-val auto">off</output>
+                  </div>
+                  <div class="samprow">
+                    <label for="samp-repctx">rep. window</label>
+                    <input id="samp-repctx" type="range" min="0" max="1024" step="16" aria-label="repetition context size">
+                    <output id="samp-repctx-val" class="samp-val auto">off</output>
+                  </div>
+                  <div class="samprow">
+                    <label for="samp-prespen">presence</label>
+                    <input id="samp-prespen" type="range" min="-2" max="2" step="0.05" aria-label="presence penalty">
+                    <output id="samp-prespen-val" class="samp-val auto">off</output>
+                  </div>
+                  <div class="samprow">
+                    <label for="samp-freqpen">frequency</label>
+                    <input id="samp-freqpen" type="range" min="-2" max="2" step="0.05" aria-label="frequency penalty">
+                    <output id="samp-freqpen-val" class="samp-val auto">off</output>
+                  </div>
+                  <div class="seed-row">
+                    <label for="samp-seed">seed</label>
+                    <input id="samp-seed" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="random" aria-label="seed">
+                  </div>
+                </details>
                 <div class="samppop-foot">
-                  <span class="note">Sliders default to the recommended value — temperature follows the thinking toggle. Reset returns to defaults.</span>
+                  <span class="note" id="samp-foot-note">Sliders default to this model's recommended values — temperature also follows the thinking toggle. Reset returns everything to defaults.</span>
                   <button id="samp-reset" type="button">Reset</button>
                 </div>
               </div>
             </span>
-            <select id="chat-adapter" class="pill" title="LoRA adapter for this chat (none = base model)">
+            <select id="chat-adapter" data-spotlight="adapter-select" class="pill" title="LoRA adapter for this chat (none = base model)">
               <option value="">no adapter</option>
             </select>
+            <!-- Adapter routing table entry (plan §5.6/§9 Phase 2): the
+                 quick-switch <select> above stays the fast path; this opens
+                 the deep three-state surface (available/loaded/selected,
+                 RAM cost, stacking) — same adapter list state, not a
+                 second source of truth (see adapters-panel.ts). -->
+            <button id="adapters-manage" type="button" title="Manage adapters — routing table, RAM cost, stacking"
+                    aria-haspopup="dialog" aria-controls="adapters-overlay" aria-expanded="false">⚙</button>
             <span id="chat-think" class="pill" role="button" tabindex="0" title="Toggle the model's reasoning"><span class="dot"></span>Thinking</span>
-            <span id="chat-context" title="Context window in use — auto-compacts before it fills"></span>
-            <span id="chat-tps"></span>
           </span>
         </div>
+        <!-- Perf strip: replaces the old bare #chat-tps dim text (plan §5.2,
+             §6.4) with tok/s, TTFT, context-fill, and a server-driven lane
+             badge, always visible (not a popover) — "speed is ambient, not a
+             stat you look up". Context-fill absorbs the old #chat-context
+             span's job (single source of the "how full is my context"
+             reading, no longer duplicated between the hint row and here). -->
+        <div id="chat-perf">
+          <span class="pf-item" id="pf-tps" title="Decode speed for the current/last turn"></span>
+          <span class="pf-item" id="pf-ttft" title="Time to first token"></span>
+          <span class="pf-item" id="pf-fill" title="Context window in use — auto-compacts before it fills"></span>
+          <!-- Lane badge: server-driven only (never client-inferred, plan §2.3
+               risk #5). Hidden until a turn_end frame actually carries `lane`
+               (wave-1 backend work landed the field — src/serve/lane-registry.ts,
+               pi-web.ts turn_end — so this fills in for real turns, not a stub). -->
+          <span class="pf-lane" id="pf-lane"><span class="dot"></span><span id="pf-lane-label"></span></span>
+        </div>
       </div>
     </div>
     </div>
@@ -642,7 +1682,7 @@
         <div class="field">
           <label>Model id or path</label>
           <div id="q-drop">
-            <input type="text" id="q-model" placeholder="mlx-community/Qwen3-8B-bf16" autocomplete="off">
+            <input type="text" id="q-model" data-spotlight="quantize-source" placeholder="mlx-community/Qwen3-8B-bf16" autocomplete="off">
           </div>
           <input type="file" id="q-folder" webkitdirectory directory style="display:none">
           <div class="hint">Anything on huggingface.co, an absolute path to a local snapshot, or <strong>choose / drop a folder</strong> below — we read its <code>config.json</code> and find the snapshot on disk.</div>
@@ -736,7 +1776,7 @@
         <div class="field">
           <label>Model directory / path</label>
           <div id="f-drop">
-            <input type="text" id="f-model" placeholder="/abs/path/to/model  or  mlx-community/Qwen3-8B-4bit" autocomplete="off">
+            <input type="text" id="f-model" data-spotlight="finetune-base" placeholder="/abs/path/to/model  or  mlx-community/Qwen3-8B-4bit" autocomplete="off">
           </div>
           <input type="file" id="f-folder" webkitdirectory directory style="display:none">
           <div class="hint">An OptiQ quant or any supported local model works — type a path/repo id, or <strong>choose / drop a folder</strong> below.</div>
@@ -797,6 +1837,14 @@
             <div class="field"><label>LR schedule</label>
               <select id="f-orpo-sched"><option value="cosine">cosine (recommended)</option><option value="constant">constant</option></select></div>
           </div>
+          <div class="field" style="margin-bottom:18px">
+            <label>SFT scope</label>
+            <div class="seg" id="f-orpo-scope">
+              <button data-v="full" class="on">full</button>
+              <button data-v="response">response</button>
+            </div>
+            <div class="hint">full = paper/TRL chosen-NLL over the whole sequence; response = pre-2026-07 response-only.</div>
+          </div>
         </div>
         <div class="hpgrid">
@@ -1033,6 +2081,13 @@
   </section>
   <!-- ═══════════════════ ROUTES ═══════════════════ -->
+  <!-- web-ui-pass-plan.md #17: /dag 404s outside a repo checkout (readFileSync
+       on a repo-relative doc, absent from compiled binaries/npm installs).
+       shell.ts's initRoutesProbe() HEAD-checks /dag at boot: on success this
+       iframe renders as-is; on 404 it hides the Routes tab and swaps this
+       section's innerHTML for a graceful note instead of a raw 404 iframe.
+       Could instead embed the artifact server-side like /curves' fallback
+       does — that's server.ts territory, out of scope this wave. -->
   <section data-route="routes" id="s-routes">
     <iframe src="/dag" title="Training · inference route map"
             style="width:100%;height:100%;border:0;display:block"></iframe>
@@ -1042,1696 +2097,36 @@
 <div id="toasts"></div>
-<script>
-/* ════════════════════════════════════════════════════════════════════
-   SHARED HELPERS
-   ════════════════════════════════════════════════════════════════════ */
-const $ = (id) => document.getElementById(id);
-const gb = (b) => b == null ? "—" : (b / 2 ** 30).toFixed(2) + " GB";
-const mb = (b) => b == null ? "—" : (b / 2 ** 20).toFixed(1) + " MB";
-const num = (n) => n == null ? "—" : Math.round(n).toLocaleString();
-const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
-/** Build a DOM node quickly. */
-function el(tag, cls, parent) {
-  const e = document.createElement(tag);
-  if (cls) e.className = cls;
-  if (parent) parent.appendChild(e);
-  return e;
-}
-/** Toast notification. kind: "" | "ok" | "err". */
-function toast(msg, kind = "", ms = 4200) {
-  const t = el("div", "toast " + kind, $("toasts"));
-  t.textContent = msg;
-  setTimeout(() => { t.style.transition = "opacity .4s,transform .4s"; t.style.opacity = "0"; t.style.transform = "translateY(10px)"; setTimeout(() => t.remove(), 420); }, ms);
-}
-/** Fetch JSON with graceful error handling. Throws on !ok. */
-async function api(path, opts) {
-  const r = await fetch(path, {
-    headers: { "content-type": "application/json" },
-    ...opts,
-    ...(opts && opts.body ? { body: typeof opts.body === "string" ? opts.body : JSON.stringify(opts.body) } : {}),
-  });
-  const text = await r.text();
-  let data;
-  try { data = text ? JSON.parse(text) : {}; } catch { data = { ok: false, error: text.slice(0, 400) || ("HTTP " + r.status) }; }
-  if (!r.ok && data.ok === undefined) data = { ok: false, error: data.error || data.message || ("HTTP " + r.status) };
-  return data;
-}
-/**
- * Wraps an EventSource over /api/jobs/:id/stream and dispatches typed events.
- * Server → client line protocol (JSON per `data:` line):
- *   {type:"log",  line}
- *   {type:"stage", stage, progress, message, output_dir?, adapter_path?}
- *   {type:"metric", kind:"train"|"val", step, loss, lr?, tps?, progress?, message?}
- *   {type:"done"}  {type:"failed", error}
- * Returns the EventSource so callers can .close().
- */
-function jobStream(jobId, handlers) {
-  const es = new EventSource("/api/jobs/" + encodeURIComponent(jobId) + "/stream");
-  es.onmessage = (ev) => {
-    let e; try { e = JSON.parse(ev.data); } catch { return; }
-    const fn = handlers[e.type];
-    if (fn) fn(e);
-  };
-  es.addEventListener("end", () => es.close());
-  es.onerror = () => { if (handlers.error) handlers.error(); };
-  return es;
-}
-/** Allow only safe link targets (http/https/mailto/anchor/relative). */
-function mdSafeUrl(u) {
-  const s = String(u).trim();
-  return /^(https?:\/\/|mailto:|#|\/|\.{1,2}\/)/i.test(s) ? s : null;
-}
-/** Inline markdown → HTML. Escapes first, then shields code spans from
- *  further markup so backticked text is never mangled or unsafe. */
-function mdInline(t) {
-  const codes = [];
-  // Pull code spans out first (any run of backticks), then escape the rest.
-  t = String(t).replace(/(`+)([\s\S]+?)\1/g, (_m, _ticks, c) => {
-    codes.push(c.replace(/^ | $/g, ""));
-    return "\u0000C" + (codes.length - 1) + "\u0000";
-  });
-  let s = esc(t);
-  // [text](url "title") — title optional and ignored.
-  s = s.replace(/\[([^\]]+)\]\(\s*([^)\s]+)(?:\s+&quot;[^)]*&quot;)?\s*\)/g, (m, text, url) => {
-    const safe = mdSafeUrl(url);
-    return safe ? '<a href="' + safe + '" target="_blank" rel="noopener noreferrer">' + text + "</a>" : m;
-  });
-  s = s
-    .replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>")
-    .replace(/\*\*([^*]+?)\*\*/g, "<strong>$1</strong>")
-    .replace(/(^|[^_\w])__([^_]+?)__(?![\w])/g, "$1<strong>$2</strong>")
-    .replace(/(^|[^*\w])\*([^*\s][^*]*?)\*/g, "$1<em>$2</em>")
-    .replace(/(^|[^_\w])_([^_\s][^_]*?)_(?![\w])/g, "$1<em>$2</em>")
-    .replace(/~~([^~]+?)~~/g, "<del>$1</del>");
-  // Autolink bare URLs that markdown didn't already wrap.
-  s = s.replace(/(^|[\s(])(https?:\/\/[^\s<)]+[^\s<).,;:!?'"])/g,
-    (_m, pre, url) => pre + '<a href="' + url + '" target="_blank" rel="noopener noreferrer">' + url + "</a>");
-  return s.replace(/\u0000C(\d+)\u0000/g, (_m, i) => "<code>" + esc(codes[+i]) + "</code>");
-}
-function mdCodeBlock(lang, code) {
-  return '<div class="codeblock"><div class="cbhead"><span class="cblang">' + esc(lang || "") +
-    '</span><button class="cbcopy" type="button">Copy</button></div>' +
-    "<pre><code>" + esc(code) + "</code></pre></div>";
-}
-function mdTableSep(s) { return /^[\s|:-]+$/.test(s) && /-/.test(s) && /\|/.test(s); }
-function mdSplitRow(s) { return s.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim()); }
-function mdBlockStart(s) {
-  return /^\s*(`{3,}|~{3,})/.test(s) || /^(#{1,6})\s/.test(s) || /^\s*>/.test(s) ||
-    /^\s*[-*+]\s+/.test(s) || /^\s*\d+[.)]\s+/.test(s) || /^\s*([-*_])\s*(\1\s*){2,}$/.test(s);
-}
-/** Safe markdown renderer: code fences (w/ copy), headings, lists, task
- *  lists, tables, blockquotes, rules, links, emphasis, inline code. */
-function mdToHtml(src) {
-  const lines = String(src).replace(/\r\n?/g, "\n").split("\n");
-  let html = "", i = 0, list = null;
-  const closeList = () => { if (list) { html += "</" + list + ">"; list = null; } };
-  while (i < lines.length) {
-    const ln = lines[i];
-    // fenced code block
-    const fence = ln.match(/^\s*(`{3,}|~{3,})\s*([\w+#.-]*)/);
-    if (fence) {
-      closeList();
-      const tick = fence[1][0], lang = fence[2] || "", buf = [];
-      const closeRe = new RegExp("^\\s*" + (tick === "`" ? "`{3,}" : "~{3,}") + "\\s*$");
-      i++;
-      while (i < lines.length && !closeRe.test(lines[i])) { buf.push(lines[i]); i++; }
-      i++; // consume closing fence (or run off the end mid-stream)
-      html += mdCodeBlock(lang, buf.join("\n"));
-      continue;
-    }
-    // GFM table: a row with pipes followed by a separator row
-    if (ln.includes("|") && i + 1 < lines.length && mdTableSep(lines[i + 1])) {
-      closeList();
-      const header = mdSplitRow(ln);
-      const aligns = mdSplitRow(lines[i + 1]).map((c) => {
-        const l = c.startsWith(":"), r = c.endsWith(":");
-        return l && r ? "center" : r ? "right" : l ? "left" : "";
-      });
-      i += 2;
-      const rows = [];
-      while (i < lines.length && lines[i].includes("|") && lines[i].trim() !== "") { rows.push(mdSplitRow(lines[i])); i++; }
-      const al = (k) => (aligns[k] ? ' style="text-align:' + aligns[k] + '"' : "");
-      let tbl = '<div class="md-tablewrap"><table class="md-table"><thead><tr>';
-      header.forEach((c, k) => { tbl += "<th" + al(k) + ">" + mdInline(c) + "</th>"; });
-      tbl += "</tr></thead><tbody>";
-      rows.forEach((r) => {
-        tbl += "<tr>";
-        for (let k = 0; k < header.length; k++) tbl += "<td" + al(k) + ">" + mdInline(r[k] || "") + "</td>";
-        tbl += "</tr>";
-      });
-      html += tbl + "</tbody></table></div>";
-      continue;
-    }
-    // heading
-    const h = ln.match(/^(#{1,6})\s+(.*)$/);
-    if (h) { closeList(); const n = h[1].length; html += "<h" + n + ">" + mdInline(h[2].replace(/\s+#+\s*$/, "")) + "</h" + n + ">"; i++; continue; }
-    // horizontal rule
-    if (/^\s*([-*_])\s*(\1\s*){2,}$/.test(ln)) { closeList(); html += "<hr>"; i++; continue; }
-    // blockquote (consecutive '>' lines, rendered recursively)
-    if (/^\s*>/.test(ln)) {
-      closeList();
-      const buf = [];
-      while (i < lines.length && /^\s*>/.test(lines[i])) { buf.push(lines[i].replace(/^\s*>\s?/, "")); i++; }
-      html += "<blockquote>" + mdToHtml(buf.join("\n")) + "</blockquote>";
-      continue;
-    }
-    // task list / unordered / ordered list items
-    const task = ln.match(/^\s*[-*+]\s+\[([ xX])\]\s+(.*)$/);
-    const ul = ln.match(/^\s*[-*+]\s+(.*)$/);
-    const ol = ln.match(/^\s*\d+[.)]\s+(.*)$/);
-    if (task) {
-      if (list !== "ul") { closeList(); html += "<ul>"; list = "ul"; }
-      html += '<li class="task"><input type="checkbox" disabled' + (task[1].toLowerCase() === "x" ? " checked" : "") + "> " + mdInline(task[2]) + "</li>";
-      i++; continue;
-    }
-    if (ul) { if (list !== "ul") { closeList(); html += "<ul>"; list = "ul"; } html += "<li>" + mdInline(ul[1]) + "</li>"; i++; continue; }
-    if (ol) { if (list !== "ol") { closeList(); html += "<ol>"; list = "ol"; } html += "<li>" + mdInline(ol[1]) + "</li>"; i++; continue; }
-    if (ln.trim() === "") { closeList(); i++; continue; }
-    // paragraph: merge following plain lines (soft breaks → <br>)
-    closeList();
-    const para = [ln];
-    i++;
-    while (i < lines.length && lines[i].trim() !== "" && !mdBlockStart(lines[i])) { para.push(lines[i]); i++; }
-    html += "<p>" + para.map(mdInline).join("<br>") + "</p>";
-  }
-  closeList();
-  return html;
-}
-/** Render a step indicator into a container. names[], current index. */
-function renderSteps(container, names, cur) {
-  container.innerHTML = names.map((n, i) => {
-    const cls = i === cur ? "cur" : (i < cur ? "done" : "");
-    const arrow = i < names.length - 1 ? '<span class="arrow">→</span>' : "";
-    return '<span class="s ' + cls + '"><span class="n">' + (i + 1) + "</span>" + esc(n) + "</span>" + arrow;
-  }).join("");
-}
-/* ════════════════════════════════════════════════════════════════════
-   HUGGING FACE — shared token settings + push-to-hub flow
-   ════════════════════════════════════════════════════════════════════ */
-/** Reflect saved-token state on the nav gear. */
-async function refreshHfGear() {
-  try {
-    const d = await api("/api/settings/hf-token");
-    const saved = !!(d && d.ok && d.hasToken);
-    $("nav-hf").classList.toggle("saved", saved);
-    $("nav-hf").title = saved ? "Hugging Face token saved · click to replace" : "Hugging Face token settings";
-    return saved;
-  } catch { return false; }
-}
-/* — the nav settings modal — */
-function openHfSettings() {
-  const ov = $("hf-overlay"); ov.classList.add("open");
-  $("hf-token-input").value = ""; $("hf-settings-msg").innerHTML = "";
-  $("hf-state").textContent = "Checking for a saved token…";
-  api("/api/settings/hf-token").then((d) => {
-    const saved = !!(d && d.ok && d.hasToken);
-    $("hf-state").innerHTML = saved
-      ? 'A write token is <strong>saved</strong>. Enter a new one below to replace it.'
-      : 'No token saved yet. Add a write token to push models and datasets to the Hub.';
-  }).catch(() => { $("hf-state").textContent = "Could not reach the server."; });
-  setTimeout(() => $("hf-token-input").focus(), 50);
-}
-function closeHfSettings() { $("hf-overlay").classList.remove("open"); }
-async function saveHfToken() {
-  const token = $("hf-token-input").value.trim();
-  const msg = $("hf-settings-msg");
-  if (!token) { msg.innerHTML = '<div class="flash err">Enter a token first.</div>'; return; }
-  const btn = $("hf-save"); btn.disabled = true;
-  const d = await api("/api/settings/hf-token", { method: "POST", body: { token } }).catch(() => ({ ok: false, error: "request failed" }));
-  btn.disabled = false;
-  if (!d.ok) { msg.innerHTML = '<div class="flash err">' + esc(d.error || "could not save token") + "</div>"; return; }
-  msg.innerHTML = '<div class="flash ok">Token saved to <code>~/.mlx-bun/hf.json</code>.</div>';
-  $("hf-token-input").value = "";
-  refreshHfGear();
-  toast("Hugging Face token saved", "ok");
-}
-/**
- * Shared push-to-hub flow, rendered inline inside a done-step card.
- *   pushToHub(panelEl, { kind, job_id?, source_path? })
- * kind: "quantize" | "finetune" | "dataset". Posts to /api/{kind}/push.
- * Walks: ensure token → repo_id + private → POST → success/error flash.
- */
-async function pushToHub(panel, { kind, job_id, source_path }) {
-  panel.innerHTML = '<div class="pushpanel"><div class="flash"><span class="shimmer">checking Hugging Face token…</span></div></div>';
-  const wrap = panel.firstChild;
-  let hasToken = false;
-  try { const s = await api("/api/settings/hf-token"); hasToken = !!(s && s.ok && s.hasToken); } catch {}
-  const renderForm = () => {
-    wrap.innerHTML =
-      (!hasToken
-        ? '<div class="field"><label>Hugging Face write token</label>' +
-          '<input type="password" class="p-token" placeholder="hf_…" autocomplete="off" spellcheck="false">' +
-          '<div class="hint">A <strong>write</strong> token from huggingface.co/settings/tokens. Stored locally at <code>~/.mlx-bun/hf.json</code>.</div></div>'
-        : "") +
-      '<div class="field"><label>Repository id</label>' +
-        '<input type="text" class="p-repo" placeholder="you/my-' + esc(kind === "dataset" ? "dataset" : "model") + '" autocomplete="off"></div>' +
-      '<div class="field"><label class="chk"><input type="checkbox" class="p-priv">Private repository</label></div>' +
-      '<div class="p-msg"></div>' +
-      '<div class="btnrow" style="margin-top:6px"><button class="btn primary sm p-go">' +
-        (hasToken ? "Push" : "Save token &amp; push") + "</button></div>";
-    wrap.querySelector(".p-go").onclick = go;
-    const focusEl = wrap.querySelector(hasToken ? ".p-repo" : ".p-token");
-    if (focusEl) focusEl.focus();
-  };
-  async function go() {
-    const msg = wrap.querySelector(".p-msg");
-    const repo = (wrap.querySelector(".p-repo").value || "").trim();
-    const priv = wrap.querySelector(".p-priv").checked;
-    if (!repo) { msg.innerHTML = '<div class="flash err">Enter a repository id (e.g. <code>you/my-model</code>).</div>'; return; }
-    const btn = wrap.querySelector(".p-go"); btn.disabled = true;
-    if (!hasToken) {
-      const token = (wrap.querySelector(".p-token").value || "").trim();
-      if (!token) { msg.innerHTML = '<div class="flash err">Enter a write token first.</div>'; btn.disabled = false; return; }
-      const sv = await api("/api/settings/hf-token", { method: "POST", body: { token } }).catch(() => ({ ok: false, error: "request failed" }));
-      if (!sv.ok) { msg.innerHTML = '<div class="flash err">' + esc(sv.error || "could not save token") + "</div>"; btn.disabled = false; return; }
-      hasToken = true; refreshHfGear();
-    }
-    msg.innerHTML = '<div class="flash"><span class="shimmer">pushing to ' + esc(repo) + "…</span></div>";
-    const body = { repo_id: repo, private: priv };
-    if (job_id != null) body.job_id = job_id;
-    if (source_path != null) body.source_path = source_path;
-    const d = await api("/api/" + kind + "/push", { method: "POST", body }).catch(() => ({ ok: false, error: "request failed" }));
-    btn.disabled = false;
-    if (!d.ok) { msg.innerHTML = '<div class="flash err">' + esc(d.error || "push failed") + "</div>"; return; }
-    const url = d.url || ("https://huggingface.co/" + repo);
-    wrap.innerHTML = '<div class="flash ok">Pushed to <a href="' + esc(url) + '" target="_blank" rel="noopener" style="text-decoration:underline">' + esc(url) + "</a></div>";
-    toast("Pushed to Hugging Face", "ok");
-  }
-  renderForm();
-}
-/* wire the nav gear + modal once at boot */
-(function initHfSettings() {
-  $("nav-hf").onclick = openHfSettings;
-  $("hf-close").onclick = closeHfSettings;
-  $("hf-save").onclick = saveHfToken;
-  $("hf-overlay").addEventListener("click", (e) => { if (e.target === $("hf-overlay")) closeHfSettings(); });
-  $("hf-token-input").addEventListener("keydown", (e) => { if (e.key === "Enter") saveHfToken(); });
-  document.addEventListener("keydown", (e) => { if (e.key === "Escape" && $("hf-overlay").classList.contains("open")) closeHfSettings(); });
-  refreshHfGear();
-})();
-/* ════════════════════════════════════════════════════════════════════
-   ROUTER  — toggles section[data-route]; lazily inits each controller.
-   ════════════════════════════════════════════════════════════════════ */
-const ROUTES = ["chat", "quantize", "finetune", "dataset", "status", "routes"];
-const inited = {};
-const controllers = {}; // name -> { init, enter, leave }
-function currentRoute() {
-  const h = (location.hash || "").replace(/^#\/?/, "").split("?")[0];
-  return ROUTES.includes(h) ? h : "chat";
-}
-function router() {
-  const route = currentRoute();
-  document.querySelectorAll("section[data-route]").forEach((s) => {
-    const on = s.dataset.route === route;
-    if (on && !s.classList.contains("active")) {
-      s.classList.add("active");
-      const c = controllers[route];
-      if (c) { if (!inited[route]) { inited[route] = true; c.init && c.init(); } c.enter && c.enter(); }
-    } else if (!on && s.classList.contains("active")) {
-      s.classList.remove("active");
-      const c = controllers[s.dataset.route];
-      if (c && c.leave) c.leave();
-    }
-  });
-  document.querySelectorAll("nav .tab").forEach((t) => t.classList.toggle("active", t.dataset.tab === route));
-  // dim the ambient bloom slightly in the chat workspace so text reads cleanly
-  $("bloom").style.opacity = route === "chat" ? "0.55" : "1";
-}
-window.addEventListener("hashchange", router);
-/* ════════════════════════════════════════════════════════════════════
-   GLOBAL CONNECTION PILL + MODEL ID  (polled lightly, always on)
-   ════════════════════════════════════════════════════════════════════ */
-let activeModelId = null;
-function setConn(state, text) {
-  const p = $("nav-conn");
-  p.className = "pill " + (state || "");
-  $("nav-conn-text").textContent = text;
-}
-let defaultHelloSub = null;
-async function pollIdentity() {
-  try {
-    const [models, dl] = await Promise.all([
-      fetch("/v1/models").then((r) => r.json()),
-      fetch("/downloads").then((r) => r.json()).catch(() => ({ downloads: [] })),
-    ]);
-    activeModelId = models.data && models.data[0] ? models.data[0].id : null;
-    $("nav-model").textContent = activeModelId || "no model";
-    setConn("ok", "live · localhost");
-    updateDownloadIndicator((dl && dl.downloads) || []);
-  } catch {
-    $("nav-model").textContent = "server unreachable";
-    setConn("bad", "unreachable — retrying");
-  }
-}
-/** Surface a background model download — the "bigger model arriving while you
- *  chat on the starter" case — as a live nav pill plus a download-aware
- *  greeting in the empty chat state. Hidden when nothing else is downloading. */
-function updateDownloadIndicator(downloads) {
-  const sub = $("chat-hello-sub");
-  if (sub && defaultHelloSub === null) defaultHelloSub = sub.textContent;
-  const incoming = downloads.find((d) => d.state === "active" && d.repoId !== activeModelId);
-  const pill = $("nav-download");
-  if (incoming) {
-    const pct = incoming.totalBytes ? Math.floor((incoming.receivedBytes / incoming.totalBytes) * 100) : 0;
-    const name = incoming.repoId.split("/").pop();
-    $("nav-download-text").textContent = "↓ " + name + " · " + pct + "%";
-    pill.style.display = "";
-    if (sub) sub.textContent = "You're on a small, fast starter model so you can chat right now — a more capable one (" + name + ") is downloading and takes over next launch. Ask me anything, or about mlx-bun itself.";
-  } else {
-    pill.style.display = "none";
-    if (sub && defaultHelloSub !== null) sub.textContent = defaultHelloSub;
-  }
-}
-/* ════════════════════════════════════════════════════════════════════
-   CHAT CONTROLLER  — full pi agent over WebSocket /ws/chat
-   ════════════════════════════════════════════════════════════════════ */
-controllers.chat = (() => {
-  let ws = null, connected = false, reconnectTimer = null, manualClose = false;
-  let curAssistant = null;      // { bubble, cursor, meta, tools:Map, text, t0, tFirst, tokens }
-  let turnActive = false;
-  // This connection's active session path (from `sessions` frames). Each
-  // connect gets a fresh server session; on a transient reconnect we re-open
-  // our own session so a blip doesn't strand us on a blank one.
-  let currentSessionPath = null, pendingResumePath = null;
-  const thread = () => $("chat-thread");
-  function wsUrl() {
-    const proto = location.protocol === "https:" ? "wss:" : "ws:";
-    return proto + "//" + location.host + "/ws/chat";
-  }
-  function connect() {
-    manualClose = false;
-    // Remember our session across this (re)connect: if we were already in a
-    // session, re-open it once the new connection is ready (the server starts
-    // each connection on a fresh session by default).
-    pendingResumePath = currentSessionPath;
-    try { ws = new WebSocket(wsUrl()); } catch { scheduleReconnect(); return; }
-    ws.onopen = () => { connected = true; setChatStatus("connected"); };
-    ws.onclose = () => { connected = false; setChatStatus("disconnected"); if (!manualClose) scheduleReconnect(); };
-    ws.onerror = () => { setChatStatus("error"); };
-    ws.onmessage = (ev) => { let m; try { m = JSON.parse(ev.data); } catch { return; } handle(m); };
-  }
-  function scheduleReconnect() {
-    clearTimeout(reconnectTimer);
-    reconnectTimer = setTimeout(() => { if (currentRoute() === "chat") connect(); }, 2200);
-  }
-  function send(obj) { if (ws && ws.readyState === 1) { ws.send(JSON.stringify(obj)); return true; } return false; }
-  function setChatStatus(s) {
-    const line = $("chat-status-line");
-    if (s === "connected") line.textContent = "connected · type to send · Shift+Enter for newline";
-    else if (s === "disconnected") line.textContent = "reconnecting to agent…";
-    else if (s === "error") line.textContent = "connection error — retrying";
-  }
-  /* — message + tool DOM construction — */
-  function addUserMsg(text, atts) {
-    const m = el("div", "msg user", thread());
-    el("div", "who", m).textContent = "you";
-    const bubble = el("div", "bubble", m);
-    if (atts && atts.length) {
-      const wrap = el("div", "msg-atts", bubble);
-      for (const a of atts) {
-        if (a.kind === "image") {
-          const im = el("img", "msg-att-img", wrap);
-          im.src = "data:" + a.mimeType + ";base64," + a.data; im.alt = a.name;
-        } else {
-          el("span", "msg-att-file", wrap).textContent = "📎 " + a.name;
-        }
-      }
-    }
-    if (text) el("div", "msg-text", bubble).textContent = text;
-    stick(true);
-  }
-  function startAssistant() {
-    $("chat-hello").style.display = "none";
-    const m = el("div", "msg assistant", thread());
-    el("div", "who", m).textContent = "local agent";
-    const bubble = el("div", "bubble", m);
-    const thinkBox = el("details", "thinkbox", bubble);
-    thinkBox.open = false; // collapsed by default; the reasoning stays tucked behind "Thinking" — click to expand
-    el("summary", "", thinkBox).textContent = "Thinking";
-    const thinkBody = el("div", "thinkbody", thinkBox);
-    thinkBox.style.display = "none";
-    const textNode = el("span", "atext", bubble);
-    const cursor = el("span", "cursor", bubble);
-    const meta = el("div", "meta", m);
-    curAssistant = { m, bubble, thinkBox, thinkBody, textNode, cursor, meta, tools: new Map(), text: "", thinking: "", t0: performance.now(), tFirst: 0, tokens: 0 };
-    stick(true);
-  }
-  function ensureAssistant() { if (!curAssistant) startAssistant(); }
-  function appendDelta(delta) {
-    ensureAssistant();
-    const a = curAssistant;
-    if (!a.tFirst) a.tFirst = performance.now();
-    a.tokens++;
-    a.text += delta;
-    a.textNode.innerHTML = mdToHtml(a.text);
-    updateTps();
-    if (atBottom()) stick();
-  }
-  function appendThinkingDelta(delta) {
-    ensureAssistant();
-    const a = curAssistant;
-    if (!a.tFirst) a.tFirst = performance.now();
-    a.tokens++;
-    a.thinking += delta;
-    a.thinkBody.textContent = a.thinking;
-    a.thinkBox.style.display = a.thinking.trim() ? "" : "none";
-    updateTps();
-    if (atBottom()) stick();
-  }
-  /* tool card lifecycle */
-  function toolCard(callId, tool, args) {
-    ensureAssistant();
-    const a = curAssistant;
-    let t = a.tools.get(callId);
-    if (t) return t;
-    const wrap = el("div", "tool running open", a.bubble);
-    wrap.innerHTML =
-      '<div class="thead"><div class="ticon">⚙</div>' +
-      '<span class="tname">' + esc(tool || "tool") + '</span>' +
-      '<span class="targs">' + esc(argSummary(args)) + '</span>' +
-      '<span class="tstat"><span class="sdot"></span><span class="slabel">running</span></span>' +
-      '<span class="caret">›</span></div>' +
-      '<div class="tbody">' +
-        '<div class="blk"><div class="blbl">arguments</div><pre class="aargs">' + esc(prettyArgs(args)) + '</pre></div>' +
-        '<div class="blk tresult" style="display:none"><div class="blbl">result</div><pre class="ares"></pre></div>' +
-      '</div>';
-    wrap.querySelector(".thead").addEventListener("click", () => wrap.classList.toggle("open"));
-    t = { wrap, res: wrap.querySelector(".ares"), resBlk: wrap.querySelector(".tresult"), label: wrap.querySelector(".slabel"), chunks: "" };
-    a.tools.set(callId, t);
-    stick();
-    return t;
-  }
-  function toolUpdate(callId, chunk) {
-    const t = curAssistant && curAssistant.tools.get(callId);
-    if (!t) return;
-    t.chunks += chunk;
-    t.resBlk.style.display = "";
-    t.res.textContent = t.chunks.slice(-8000);
-    if (atBottom()) stick();
-  }
-  function toolEnd(callId, ok, result) {
-    const t = curAssistant && curAssistant.tools.get(callId);
-    if (!t) return;
-    t.wrap.classList.remove("running");
-    t.wrap.classList.add(ok ? "ok" : "fail");
-    t.label.textContent = ok ? "done" : "failed";
-    const body = result != null ? (typeof result === "string" ? result : JSON.stringify(result, null, 2)) : t.chunks;
-    if (body) { t.resBlk.style.display = ""; t.res.textContent = String(body).slice(-12000); }
-    if (!ok) t.wrap.classList.add("open");
-  }
-  /* approval dialog */
-  function approvalCard(callId, tool, args) {
-    ensureAssistant();
-    const a = curAssistant;
-    const wrap = el("div", "approval", a.bubble);
-    const isBash = /bash|shell|exec|run/i.test(tool || "");
-    const isEdit = /edit|write|patch|create/i.test(tool || "");
-    let preview;
-    if (isBash) {
-      preview = '<pre>' + esc(args && (args.command || args.cmd || args.script) || prettyArgs(args)) + '</pre>';
-    } else if (isEdit) {
-      preview = '<pre>' + diffView(args) + '</pre>';
-    } else {
-      preview = '<pre>' + esc(prettyArgs(args)) + '</pre>';
-    }
-    wrap.innerHTML =
-      '<div class="ahead"><div class="ai">⚠</div><div class="at">Approval required</div>' +
-      '<div class="as">' + esc(tool || "tool") + '</div></div>' +
-      '<div class="abody"><div class="blbl" style="margin-bottom:7px">' +
-        (isBash ? "command" : isEdit ? "proposed change" : "arguments") + '</div>' + preview + '</div>' +
-      '<div class="actions">' +
-        '<button class="btn ghost sm a-deny">Deny</button>' +
-        '<button class="btn primary sm a-allow">Allow</button></div>';
-    const resolve = (decision) => {
-      send({ type: "approval", callId, decision });
-      wrap.querySelector(".actions").remove();
-      const r = el("div", "resolved " + (decision === "allow" ? "allow" : "deny"), wrap);
-      r.textContent = decision === "allow" ? "✓ allowed" : "✕ denied";
-    };
-    wrap.querySelector(".a-allow").onclick = () => resolve("allow");
-    wrap.querySelector(".a-deny").onclick = () => resolve("deny");
-    stick(true);
-  }
-  function diffView(args) {
-    // Best-effort diff-ish view for edit/write tools.
-    if (!args) return "";
-    if (args.old_string != null || args.new_string != null) {
-      const o = String(args.old_string ?? "").split("\n").map((l) => '<span class="diffdel">- ' + esc(l) + "</span>").join("\n");
-      const n = String(args.new_string ?? "").split("\n").map((l) => '<span class="diffadd">+ ' + esc(l) + "</span>").join("\n");
-      return (args.file_path ? esc(args.file_path) + "\n\n" : "") + o + (o && n ? "\n" : "") + n;
-    }
-    if (args.content != null) {
-      return (args.file_path ? esc(args.file_path) + "\n\n" : "") +
-        String(args.content).split("\n").map((l) => '<span class="diffadd">+ ' + esc(l) + "</span>").join("\n");
-    }
-    return esc(prettyArgs(args));
-  }
-  function argSummary(args) {
-    if (!args) return "";
-    if (typeof args === "string") return args.slice(0, 120);
-    if (args.command || args.cmd) return String(args.command || args.cmd).slice(0, 120);
-    if (args.file_path || args.path) return String(args.file_path || args.path).slice(0, 120);
-    if (args.query || args.url || args.location) return String(args.query || args.url || args.location).slice(0, 120);
-    const s = JSON.stringify(args); return s.length > 120 ? s.slice(0, 117) + "…" : s;
-  }
-  function prettyArgs(args) {
-    if (args == null) return "";
-    if (typeof args === "string") return args;
-    try { return JSON.stringify(args, null, 2); } catch { return String(args); }
-  }
-  function showAgentError(message) {
-    const m = el("div", "msg assistant", thread());
-    el("div", "who", m).textContent = "local agent";
-    const bubble = el("div", "bubble", m);
-    bubble.innerHTML = '<strong style="color:var(--red)">Agent error</strong><br>' + esc(message || "unknown error");
-    stick(true);
-  }
-  function endTurn() {
-    turnActive = false;
-    if (curAssistant) {
-      curAssistant.cursor.remove();
-      if (!curAssistant.text && !curAssistant.thinking && curAssistant.tools.size === 0) curAssistant.m.remove();
-    }
-    curAssistant = null;
-    $("chat-send").disabled = false;
-    $("chat-stop").style.display = "none";
-    renderQueue({});
-  }
-  function updateTps() {
-    const a = curAssistant; if (!a) return;
-    const secs = (performance.now() - (a.tFirst || a.t0)) / 1000;
-    if (a.tokens > 1 && secs > 0) $("chat-tps").innerHTML = "<b style='color:var(--green)'>" + (a.tokens / secs).toFixed(1) + " tok/s</b>";
-  }
-  function finalizeMeta() {
-    const a = curAssistant; if (!a) return;
-    const secs = (performance.now() - (a.tFirst || a.t0)) / 1000;
-    if (a.tokens > 1 && secs > 0)
-      a.meta.innerHTML = "<b>" + (a.tokens / secs).toFixed(1) + " tok/s</b> · " + a.tokens +
-        " tokens · first token " + Math.round((a.tFirst - a.t0)) + "ms";
-  }
-  function renderQueue(q) {
-    const bar = $("chat-queue");
-    const parts = [];
-    if (q.steering) parts.push('<span class="qtag">steering: <b>' + esc(String(q.steering).slice(0, 60)) + "</b></span>");
-    if (q.followUp) parts.push('<span class="qtag">queued: <b>' + esc(String(q.followUp).slice(0, 60)) + "</b></span>");
-    bar.innerHTML = parts.join("");
-    bar.style.display = parts.length ? "flex" : "none";
-  }
-  /* — context-window indicator — */
-  function fmtTok(n) {
-    if (n == null) return "—";
-    if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
-    if (n >= 1e3) return (n / 1e3).toFixed(n >= 1e4 ? 0 : 1) + "k";
-    return String(n);
-  }
-  function renderContext(m) {
-    const node = $("chat-context");
-    if (!node || !m.contextWindow) return;
-    const pct = m.percent;
-    const pctStr = pct == null ? "" : " (" + Math.round(pct) + "%)";
-    node.textContent = "Context " + fmtTok(m.tokens) + " / " + fmtTok(m.contextWindow) + pctStr;
-    node.style.color = pct == null ? "var(--dimmer)" : pct >= 85 ? "var(--orange)" : pct >= 70 ? "var(--yellow)" : "var(--dimmer)";
-  }
-  /* — recent-chats sidebar + transcript replay — */
-  function relTime(ms) {
-    if (!ms) return "";
-    const s = (Date.now() - ms) / 1000;
-    if (s < 60) return "just now";
-    if (s < 3600) return Math.floor(s / 60) + "m ago";
-    if (s < 86400) return Math.floor(s / 3600) + "h ago";
-    if (s < 604800) return Math.floor(s / 86400) + "d ago";
-    try { return new Date(ms).toLocaleDateString(); } catch { return ""; }
-  }
-  function newChat() {
-    if (!send({ type: "new_session" })) { toast("Not connected to the agent yet.", "err"); return; }
-    $("chat-box").focus();
-  }
-  function renderSessions(items, activePath) {
-    const box = $("chat-sessions");
-    if (!items || !items.length) { box.innerHTML = '<div class="sessempty">No saved chats yet. Your conversations are saved locally here.</div>'; return; }
-    box.innerHTML = "";
-    for (const s of items) {
-      const row = el("div", "sess" + (s.path === activePath ? " active" : ""), box);
-      row.innerHTML =
-        '<div class="stitle">' + esc(s.title || "New chat") + '</div>' +
-        '<div class="smeta"><span>' + esc(relTime(s.modified)) + '</span>' +
-          (s.messageCount ? '<span>· ' + s.messageCount + ' msg' + (s.messageCount === 1 ? '' : 's') + '</span>' : '') +
-          (s.forked ? '<span>· forked</span>' : '') + '</div>' +
-        '<button class="sbtn sfork" title="New chat from here">⑂</button>' +
-        '<button class="sbtn sdel" title="Delete chat">✕</button>';
-      row.addEventListener("click", () => send({ type: "open_session", path: s.path }));
-      row.querySelector(".sfork").addEventListener("click", (e) => { e.stopPropagation(); send({ type: "fork_session", path: s.path }); });
-      row.querySelector(".sdel").addEventListener("click", (e) => { e.stopPropagation(); send({ type: "delete_session", path: s.path }); });
-    }
-  }
-  /** Render a finished assistant turn from replayed history (no streaming). */
-  function renderAssistantStatic(item) {
-    const m = el("div", "msg assistant", thread());
-    el("div", "who", m).textContent = "local agent";
-    const bubble = el("div", "bubble", m);
-    if (item.thinking && item.thinking.trim()) {
-      const tb = el("details", "thinkbox", bubble); tb.open = false;
-      el("summary", "", tb).textContent = "Thinking";
-      el("div", "thinkbody", tb).textContent = item.thinking;
-    }
-    if (item.text) { const tn = el("span", "atext", bubble); tn.innerHTML = mdToHtml(item.text); }
-    for (const t of (item.tools || [])) {
-      const wrap = el("div", "tool ok", bubble);   // collapsed; click to expand
-      wrap.innerHTML =
-        '<div class="thead"><div class="ticon">⚙</div>' +
-        '<span class="tname">' + esc(t.name || "tool") + '</span>' +
-        '<span class="targs">' + esc(argSummary(t.args)) + '</span>' +
-        '<span class="tstat"><span class="sdot"></span><span class="slabel">done</span></span>' +
-        '<span class="caret">›</span></div>' +
-        '<div class="tbody">' +
-          '<div class="blk"><div class="blbl">arguments</div><pre class="aargs">' + esc(prettyArgs(t.args)) + '</pre></div>' +
-          (t.result ? '<div class="blk tresult"><div class="blbl">result</div><pre class="ares">' + esc(String(t.result).slice(-12000)) + '</pre></div>' : '') +
-        '</div>';
-      wrap.querySelector(".thead").addEventListener("click", () => wrap.classList.toggle("open"));
-    }
-  }
-  /** Authoritative thread rebuild from a server `history` frame. */
-  function renderHistory(items) {
-    turnActive = false;
-    curAssistant = null;
-    $("chat-send").disabled = false;
-    $("chat-stop").style.display = "none";
-    renderQueue({});
-    thread().innerHTML = "";
-    if (!items || !items.length) { $("chat-hello").style.display = ""; return; }
-    $("chat-hello").style.display = "none";
-    for (const it of items) {
-      if (it.role === "user") addUserMsg(it.text);
-      else renderAssistantStatic(it);
-    }
-    stick(true);
-  }
-  /* — server → client dispatch — */
-  function handle(m) {
-    switch (m.type) {
-      case "ready":
-        $("nav-model").textContent = m.model || activeModelId || "no model"; activeModelId = m.model || activeModelId;
-        visionCapable = !!m.vision; updateAttachHint();
-        thinkingCapable = !!m.thinking; updateThinkingToggle();
-        if (thinkingCapable) send({ type: "set_thinking", enabled: thinkingOn });
-        refreshAdapters();
-        // Reconnect: re-open the session we were in (fresh load has none).
-        if (pendingResumePath) { send({ type: "open_session", path: pendingResumePath }); pendingResumePath = null; }
-        break;
-      case "history": renderHistory(m.items); break;
-      case "sessions": currentSessionPath = m.activePath || null; renderSessions(m.items, m.activePath); break;
-      case "context": renderContext(m); break;
-      case "turn_start": turnActive = true; startAssistant(); $("chat-send").disabled = true; $("chat-stop").style.display = "block"; break;
-      case "text_delta": appendDelta(m.delta || ""); break;
-      case "thinking_delta": appendThinkingDelta(m.delta || ""); break;
-      case "tool_start": toolCard(m.callId, m.tool, m.args); break;
-      case "tool_approval_request": approvalCard(m.callId, m.tool, m.args); break;
-      case "tool_update": toolUpdate(m.callId, m.chunk || ""); break;
-      case "tool_end": toolEnd(m.callId, m.ok, m.result); break;
-      case "turn_end": finalizeMeta(); endTurn(); break;
-      case "queue_update": renderQueue(m); break;
-      case "error": showAgentError(m.message || "agent error"); toast(m.message || "agent error", "err"); if (turnActive) endTurn(); break;
-    }
-  }
-  /* — composer — */
-  /* — attachments (files + images) — */
-  let attachments = [];       // { id, kind:"image"|"text", name, mimeType, data, text, truncated }
-  let visionCapable = false;  // from the `ready` frame; gates image attachments
-  let thinkingCapable = false; // from `ready`; gates the reasoning toggle
-  let thinkingOn = true;       // default on: with tools (read/web_search) the reasoning step gives the small model far better tool judgment (answers math/writing itself, only searches when needed). The thinking box defaults collapsed. Users can toggle it off.
-  // Per-request sampling. Each field is either a user override (a number) or
-  // null = "use the recommended default" (resolved server-side). The recommended
-  // TEMPERATURE tracks the thinking toggle (0.7 off ↔ 0.9 on); top_p/top_k recs
-  // are fixed mirrors of the server defaults (display only). The placeholder in
-  // each input shows the live recommended value when the field isn't overridden.
-  const sampling = { temperature: null, top_p: null, top_k: null };
-  const SAMP_REC = { topP: 0.95, topK: 0 }; // fixed recommended top_p / top_k (server genDefaults)
-  function recTemp() { return thinkingOn ? 0.9 : 0.7; } // mirrors server toOptions defaultTemp
-  let attachSeq = 0;
-  const MAX_TEXT_BYTES = 256 * 1024;
-  const TEXT_EXTS = /\.(txt|md|markdown|csv|tsv|json|jsonl|ya?ml|toml|ini|cfg|conf|log|xml|html?|css|scss|js|mjs|cjs|ts|tsx|jsx|py|rs|go|java|c|h|cpp|hpp|cc|cs|rb|php|sh|bash|zsh|fish|sql|swift|kt|lua|r|jl|tex|svg|env|gitignore|dockerfile|makefile)$/i;
-  function isTextFile(f) {
-    if (f.type.startsWith("text/")) return true;
-    if (/(json|xml|javascript|yaml|x-sh|x-toml|csv|markdown)/i.test(f.type)) return true;
-    return TEXT_EXTS.test(f.name || "");
-  }
-  function readDataUrl(file) {
-    return new Promise((res, rej) => {
-      const r = new FileReader(); r.onerror = rej;
-      r.onload = () => { const s = String(r.result); const i = s.indexOf(","); res(i >= 0 ? s.slice(i + 1) : s); };
-      r.readAsDataURL(file);
-    });
-  }
-  function readText(file) {
-    return new Promise((res, rej) => { const r = new FileReader(); r.onerror = rej; r.onload = () => res(String(r.result)); r.readAsText(file); });
-  }
-  async function addFiles(files) {
-    for (const f of files) {
-      if (f.type.startsWith("image/")) {
-        if (!visionCapable) { toast("This model can't see images — switch to the 12B for vision.", "err"); continue; }
-        try { attachments.push({ id: ++attachSeq, kind: "image", name: f.name || "image", mimeType: f.type, data: await readDataUrl(f) }); }
-        catch { toast("Couldn't read " + (f.name || "image"), "err"); }
-      } else if (isTextFile(f)) {
-        try {
-          let text = await readText(f); const truncated = text.length > MAX_TEXT_BYTES; if (truncated) text = text.slice(0, MAX_TEXT_BYTES);
-          attachments.push({ id: ++attachSeq, kind: "text", name: f.name || "file", text, truncated });
-        } catch { toast("Couldn't read " + (f.name || "file"), "err"); }
-      } else {
-        toast("Unsupported file type: " + (f.name || "file"), "err");
-      }
-    }
-    renderAttachments();
-  }
-  function renderAttachments() {
-    const box = $("chat-attach");
-    box.innerHTML = "";
-    box.style.display = attachments.length ? "flex" : "none";
-    for (const a of attachments) {
-      const chip = el("div", "attach-chip", box);
-      if (a.kind === "image") { const im = el("img", "", chip); im.src = "data:" + a.mimeType + ";base64," + a.data; im.alt = a.name; }
-      else el("span", "att-ico", chip).textContent = "📄";
-      el("span", "att-name", chip).textContent = a.name + (a.truncated ? " (truncated)" : "");
-      const x = el("button", "att-x", chip); x.type = "button"; x.textContent = "✕";
-      x.onclick = () => { attachments = attachments.filter((z) => z.id !== a.id); renderAttachments(); };
-    }
-  }
-  function clearAttachments() { attachments = []; renderAttachments(); }
-  /** Prepend text-file contents to the message the model sees (UI shows chips). */
-  function buildMessageText(userText) {
-    const files = attachments.filter((a) => a.kind === "text");
-    if (!files.length) return userText;
-    let pre = "";
-    for (const a of files) pre += "Attached file: " + a.name + "\n```\n" + a.text + "\n```\n\n";
-    return pre + userText;
-  }
-  function updateAttachHint() {
-    const btn = $("chat-attach-btn");
-    if (btn) btn.title = visionCapable ? "Attach files or images" : "Attach files (this model can't see images)";
-  }
-  // — LoRA adapter selector. Pi-native: app.html lists + mounts adapters, then
-  //   tells pi-web which one is active; the before_provider_request hook injects
-  //   it into every provider request. Default "" = none (base model). —
-  async function refreshAdapters() {
-    const sel = $("chat-adapter");
-    if (!sel) return;
-    let list = [];
-    try { const d = await api("/v1/adapters/available"); list = (d && d.adapters) || []; } catch {}
-    const cur = sel.value;
-    sel.innerHTML = '<option value="">no adapter</option>' + list.map((a) =>
-      `<option value="${a.id}" data-path="${a.path}">${a.id}${a.rank ? " · r" + a.rank : ""}</option>`).join("");
-    if (cur && list.some((a) => a.id === cur)) sel.value = cur; // keep prior selection
-  }
-  async function onSelectAdapter(sel) {
-    const id = sel.value;
-    if (!id) { send({ type: "set_adapter", id: null }); return; } // none → base model
-    const opt = sel.options[sel.selectedIndex];
-    const path = opt && opt.getAttribute("data-path");
-    if (path) { // auto-load on select; mount() is idempotent server-side
-      const r = await api("/v1/adapters", { method: "POST", body: { id, path } });
-      if (r && (r.error || r.ok === false)) {
-        if (typeof toast === "function") toast("adapter: " + (r.error || "mount failed"), "err");
-        sel.value = ""; send({ type: "set_adapter", id: null }); return;
-      }
-    }
-    send({ type: "set_adapter", id });
-  }
-  function updateThinkingToggle() {
-    const b = $("chat-think");
-    if (!b) return;
-    b.style.display = thinkingCapable ? "inline-flex" : "none"; // only for thinking-capable models
-    b.classList.toggle("think-on", thinkingOn);
-    b.title = thinkingOn ? "Reasoning on — click to answer directly" : "Reasoning off — click to let the model think";
-    b.setAttribute("aria-pressed", String(thinkingOn));
-    refreshSamplingRecs(); // recommended temperature follows the thinking state
-  }
-  /* — sampling controls — */
-  // Each row is a slider + a live value readout. A field is "auto" (null
-  // override → the server uses its mode-aware default; temperature's default
-  // follows the thinking toggle) until the user drags it, which records an
-  // explicit override. Reset returns every field to auto.
-  const SAMP_FIELDS = [
-    { id: "samp-temp", field: "temperature", valId: "samp-temp-val", rec: () => recTemp(), fmt: (v) => v.toFixed(2) },
-    { id: "samp-topp", field: "top_p", valId: "samp-topp-val", rec: () => SAMP_REC.topP, fmt: (v) => v.toFixed(2) },
-    { id: "samp-topk", field: "top_k", valId: "samp-topk-val", rec: () => SAMP_REC.topK, fmt: (v) => (v >= 1 ? String(Math.round(v)) : "off") },
-  ];
-  // Sync every slider + readout to current state: an overridden field shows its
-  // set value (bright readout); an auto field shows the recommended value
-  // (dimmed) and tracks it live — e.g. temperature when the thinking toggle
-  // flips. Called on thinking-toggle flips, popover open, and reset.
-  function refreshSamplingRecs() {
-    for (const f of SAMP_FIELDS) {
-      const slider = $(f.id), val = $(f.valId); if (!slider || !val) continue;
-      const over = sampling[f.field];
-      const v = over != null ? over : f.rec();
-      slider.value = String(v);
-      val.textContent = f.fmt(v);
-      val.classList.toggle("auto", over == null);
-    }
-  }
-  // User dragged a slider → record the explicit override, brighten the readout,
-  // and push the whole sampling state to the server.
-  function onSlide(f) {
-    const slider = $(f.id); if (!slider) return;
-    const v = Number(slider.value);
-    sampling[f.field] = v;
-    const val = $(f.valId); if (val) { val.textContent = f.fmt(v); val.classList.remove("auto"); }
-    updateSamplingUi();
-    send({ type: "set_sampling", temperature: sampling.temperature, top_p: sampling.top_p, top_k: sampling.top_k });
-  }
-  // The pill shows a lit dot whenever any field is overridden.
-  function updateSamplingUi() {
-    const dirty = sampling.temperature != null || sampling.top_p != null || sampling.top_k != null;
-    const pill = $("chat-sampling");
-    if (pill) { pill.classList.toggle("dirty", dirty); pill.title = dirty
-      ? "Sampling overridden — click to edit or reset" : "Sampling controls (temperature · top_p · top_k)"; }
-  }
-  function resetSampling() {
-    sampling.temperature = null; sampling.top_p = null; sampling.top_k = null;
-    refreshSamplingRecs(); updateSamplingUi();
-    send({ type: "set_sampling", temperature: null, top_p: null, top_k: null });
-  }
-  function initSampling() {
-    const pill = $("chat-sampling"), pop = $("chat-sampling-pop");
-    if (!pill || !pop) return;
-    const setOpen = (open) => {
-      pop.classList.toggle("open", open);
-      pill.classList.toggle("on", open);
-      pill.setAttribute("aria-expanded", String(open));
-      if (open) refreshSamplingRecs();
-    };
-    const toggle = () => setOpen(!pop.classList.contains("open"));
-    pill.onclick = (e) => { e.stopPropagation(); toggle(); };
-    pill.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); } });
-    pop.addEventListener("click", (e) => e.stopPropagation());
-    // Click-away / Escape closes the popover.
-    document.addEventListener("click", () => setOpen(false));
-    document.addEventListener("keydown", (e) => { if (e.key === "Escape") setOpen(false); });
-    for (const f of SAMP_FIELDS) {
-      const e = $(f.id); if (!e) continue;
-      e.addEventListener("input", () => onSlide(f));
-    }
-    const reset = $("samp-reset"); if (reset) reset.onclick = (e) => { e.stopPropagation(); resetSampling(); };
-    updateSamplingUi(); refreshSamplingRecs();
-  }
-  /* — composer — */
-  function submit() {
-    const box = $("chat-box");
-    const text = box.value.trim();
-    // Client-side slash commands for session control (not sent to the model).
-    const cmd = text.toLowerCase();
-    if (cmd === "/reload" || cmd === "/new" || cmd === "/clear") {
-      box.value = ""; box.style.height = "auto"; clearAttachments(); newChat();
-      return;
-    }
-    if (!text && attachments.length === 0) return;
-    if (!connected) { toast("Not connected to the agent yet — reconnecting.", "err"); return; }
-    const imgs = attachments.filter((a) => a.kind === "image").map((a) => ({ data: a.data, mimeType: a.mimeType }));
-    const combined = buildMessageText(text);
-    addUserMsg(text, attachments);
-    box.value = ""; box.style.height = "auto";
-    const frame = imgs.length ? { text: combined, images: imgs } : { text: combined };
-    // A composer submission is always a new user turn. If the model is still
-    // streaming, the server passes it to pi with streamingBehavior:"followUp"
-    // so it becomes the next turn instead of steering/mutating the current one.
-    send({ type: "prompt", ...frame });
-    clearAttachments();
-  }
-  const scroll = () => $("chat-scroll");
-  const atBottom = () => scroll().scrollHeight - scroll().scrollTop - scroll().clientHeight < 90;
-  function stick(force) { if (force || atBottom()) scroll().scrollTop = scroll().scrollHeight; }
-  return {
-    init() {
-      $("chat-send").onclick = submit;
-      $("chat-new").onclick = newChat;
-      $("chat-stop").onclick = () => { send({ type: "abort" }); $("chat-stop").style.display = "none"; };
-      const thinkToggle = () => { thinkingOn = !thinkingOn; updateThinkingToggle(); send({ type: "set_thinking", enabled: thinkingOn }); };
-      $("chat-think").onclick = thinkToggle;
-      $("chat-think").addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); thinkToggle(); } });
-      const adapterSel = $("chat-adapter");
-      if (adapterSel) adapterSel.onchange = () => onSelectAdapter(adapterSel);
-      initSampling();
-      refreshAdapters();
-      const box = $("chat-box");
-      box.addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } });
-      box.addEventListener("input", () => { box.style.height = "auto"; box.style.height = Math.min(box.scrollHeight, 200) + "px"; });
-      document.querySelectorAll("#chat-hello .chip").forEach((c) =>
-        c.addEventListener("click", () => { $("chat-box").value = c.dataset.q; submit(); }));
-      // Attachments: + button, file picker, clipboard paste, drag-and-drop.
-      $("chat-attach-btn").onclick = () => $("chat-file-input").click();
-      $("chat-file-input").addEventListener("change", (e) => { addFiles([...e.target.files]); e.target.value = ""; });
-      box.addEventListener("paste", (e) => {
-        const items = e.clipboardData && e.clipboardData.items;
-        if (!items) return;
-        const files = [];
-        for (const it of items) if (it.kind === "file") { const f = it.getAsFile(); if (f) files.push(f); }
-        if (files.length) { e.preventDefault(); addFiles(files); }
-      });
-      const composer = document.querySelector("#s-chat .composer");
-      if (composer) {
-        ["dragenter", "dragover"].forEach((ev) => composer.addEventListener(ev, (e) => { e.preventDefault(); composer.classList.add("dragover"); }));
-        ["dragleave", "drop"].forEach((ev) => composer.addEventListener(ev, (e) => {
-          e.preventDefault();
-          if (ev === "drop" && e.dataTransfer && e.dataTransfer.files.length) addFiles([...e.dataTransfer.files]);
-          if (ev === "drop" || !composer.contains(e.relatedTarget)) composer.classList.remove("dragover");
-        }));
-      }
-      // Delegated copy buttons for rendered code blocks (the thread element
-      // is stable even though its contents re-render on every token).
-      thread().addEventListener("click", (e) => {
-        const btn = e.target.closest && e.target.closest(".cbcopy");
-        if (!btn) return;
-        const code = btn.closest(".codeblock")?.querySelector("code");
-        if (!code || !navigator.clipboard) return;
-        navigator.clipboard.writeText(code.textContent).then(() => {
-          btn.textContent = "Copied"; setTimeout(() => { btn.textContent = "Copy"; }, 1200);
-        }).catch(() => {});
-      });
-    },
-    enter() { if (!ws || ws.readyState > 1) connect(); $("chat-box").focus(); },
-    leave() { /* keep WS warm; closing on every nav would drop in-flight turns */ },
-  };
-})();
-/* ════════════════════════════════════════════════════════════════════
-   QUANTIZE CONTROLLER  — 4-step wizard
-   ════════════════════════════════════════════════════════════════════ */
-controllers.quantize = (() => {
-  const STEPS = ["Source", "Configure", "Run", "Done"];
-  let step = 0, bits = 4, gs = 64, mode = "uniform", bpw = 5, jobId = null, es = null, log = [];
-  function show(n) {
-    step = n;
-    document.querySelectorAll("[data-qstep]").forEach((d) => d.style.display = (+d.dataset.qstep === n) ? "" : "none");
-    renderSteps($("q-steps"), STEPS, n);
-  }
-  function seg(container, onPick) {
-    container.querySelectorAll("button").forEach((b) =>
-      b.addEventListener("click", () => {
-        container.querySelectorAll("button").forEach((x) => x.classList.remove("on"));
-        b.classList.add("on"); onPick(b.dataset.v, b);
-      }));
-  }
-  // --- OS folder picker / drag-drop → real on-disk snapshot path ---
-  // The browser can't reveal an absolute path, and the HF cache uses symlinked
-  // snapshots over a blobs/ store — so we DON'T read any files. We only take the
-  // picked folder's NAME (which encodes the repo id) and let the server
-  // reconstruct the snapshot path it owns. No upload, no "config.json" hunt.
-  async function resolveByName(name, relPath) {
-    if (!name && !relPath) return;
-    const out = $("q-inspect-out");
-    out.innerHTML = '<div class="flash"><span class="shimmer">locating on disk…</span></div>';
-    const d = await api("/api/quantize/resolve-folder", { method: "POST", body: { folder_name: name || "", rel_path: relPath || "" } })
-      .catch(() => ({ ok: false, error: "request failed" }));
-    if (!d.ok) { out.innerHTML = '<div class="flash err">' + esc(d.error || "could not locate this folder on the server") + "</div>"; return; }
-    $("q-model").value = d.path;
-    inspect();
-  }
-  async function pickFolder() {
-    // Native OS folder dialog with no "upload N files" prompt; we only read the
-    // folder's .name, never its contents.
-    if (window.showDirectoryPicker) {
-      try {
-        const handle = await window.showDirectoryPicker({ id: "mlx-models", mode: "read" });
-        return resolveByName(handle.name);
-      } catch (e) { return; } // user cancelled / denied
-    }
-    $("q-folder").click(); // fallback for browsers without the File System Access API
-  }
-  async function inspect() {
-    const id = $("q-model").value.trim();
-    if (!id) { toast("Enter a model id or path first.", "err"); return; }
-    const out = $("q-inspect-out");
-    out.innerHTML = '<div class="flash"><span class="shimmer">inspecting…</span></div>';
-    const btn = $("q-inspect"); btn.disabled = true;
-    const d = await api("/api/quantize/inspect", { method: "POST", body: { model_id: id } }).catch(() => ({ ok: false, error: "request failed" }));
-    btn.disabled = false;
-    if (!d.ok) { out.innerHTML = '<div class="flash err">' + esc(d.error || "could not inspect this model") + "</div>"; return; }
-    const supported = d.support === "supported" || d.support === true || d.support === "ok";
-    const cls = supported ? "ok" : (d.support === "untested" ? "warn" : "err");
-    out.innerHTML =
-      '<div class="flash ' + cls + '"><strong>' + esc(d.arch || d.model_id || id) + "</strong>" +
-      (d.size_gb != null ? " · " + esc(d.size_gb) + " GB" : "") +
-      " · " + (supported ? "supported" : esc(d.support || "unknown architecture")) + "</div>" +
-      '<div class="btnrow"><button class="btn primary" id="q-continue">Continue</button></div>';
-    $("q-continue").onclick = () => show(1);
-  }
-  async function submit() {
-    const id = $("q-model").value.trim();
-    const btn = $("q-submit"); btn.disabled = true;
-    const body = { model_id: id, bits, group_size: gs };
-    if (mode === "mixed") { body.target_bpw = bpw; body.candidate_bits = [4, 8]; }
-    const d = await api("/api/quantize/submit", { method: "POST", body })
-      .catch(() => ({ ok: false, error: "request failed" }));
-    btn.disabled = false;
-    if (!d.ok) { toast(d.error || "could not start quantize", "err"); return; }
-    jobId = d.job_id || null;
-    $("q-push-panel").innerHTML = "";
-    $("q-out").textContent = d.output_dir || "";
-    log = []; $("q-log").textContent = ""; $("q-bar").style.width = "0%"; $("q-pct").textContent = "0%"; $("q-msg").textContent = "Starting…";
-    show(2);
-    attach(d.job_id);
-  }
-  function attach(jobId) {
-    if (es) es.close();
-    es = jobStream(jobId, {
-      log: (e) => { log.push(e.line); $("q-log").textContent = log.slice(-200).join("\n"); $("q-log").scrollTop = $("q-log").scrollHeight; },
-      stage: (e) => {
-        if (e.progress != null) { const p = Math.round(e.progress * 100); $("q-bar").style.width = p + "%"; $("q-pct").textContent = p + "%"; }
-        if (e.message) $("q-msg").textContent = e.message;
-        if (e.stage === "done") { if (e.output_dir) $("q-out").textContent = e.output_dir; finish(); }
-      },
-      done: () => finish(),
-      failed: (e) => { $("q-msg").textContent = "Failed: " + (e.error || "unknown error"); toast(e.error || "quantize failed", "err"); es && es.close(); },
-    });
-  }
-  function finish() { $("q-bar").style.width = "100%"; $("q-pct").textContent = "100%"; es && es.close(); show(3); }
-  return {
-    init() {
-      show(0);
-      $("q-inspect").onclick = inspect;
-      $("q-model").addEventListener("keydown", (e) => { if (e.key === "Enter") inspect(); });
-      // OS folder dialog (native; resolves by folder name, no upload)
-      $("q-browse").onclick = pickFolder;
-      $("q-folder").addEventListener("change", (e) => {
-        const f = e.target.files[0]; e.target.value = "";
-        if (f) resolveByName((f.webkitRelativePath || f.name).split("/")[0], f.webkitRelativePath || "");
-      });
-      // drag a folder onto the box — use the directory entry's NAME (no read)
-      const drop = $("q-drop");
-      const hi = (on) => { drop.style.outline = on ? "2px dashed var(--blue)" : ""; drop.style.outlineOffset = on ? "4px" : ""; };
-      ["dragenter", "dragover"].forEach((ev) => drop.addEventListener(ev, (e) => { e.preventDefault(); hi(true); }));
-      ["dragleave", "drop"].forEach((ev) => drop.addEventListener(ev, (e) => {
-        e.preventDefault(); hi(false);
-        if (ev !== "drop" || !e.dataTransfer) return;
-        for (const it of [...(e.dataTransfer.items || [])]) {
-          const en = it.webkitGetAsEntry && it.webkitGetAsEntry();
-          if (en && en.isDirectory) return resolveByName(en.name);
-        }
-        const f = e.dataTransfer.files && e.dataTransfer.files[0];
-        if (f) resolveByName((f.webkitRelativePath || f.name).split("/")[0]);
-      }));
-      seg($("q-bits"), (v) => { bits = +v; $("q-bits-hint").textContent = v === "4"
-        ? "4-bit · ~4× smaller than bf16 · the recommended default for local serving."
-        : "8-bit · ~2× smaller than bf16 · highest fidelity quant."; });
-      seg($("q-gs"), (v) => { gs = +v; });
-      seg($("q-mode"), (v) => { mode = v; $("q-bpw-field").style.display = v === "mixed" ? "" : "none"; });
-      $("q-bpw").addEventListener("input", (e) => { bpw = +e.target.value; $("q-bpw-val").textContent = bpw.toFixed(1); });
-      document.querySelectorAll("#s-quantize [data-qback]").forEach((b) => b.onclick = () => show(step - 1));
-      $("q-submit").onclick = submit;
-      $("q-push").onclick = () => pushToHub($("q-push-panel"), { kind: "quantize", job_id: jobId });
-      $("q-again").onclick = () => { $("q-inspect-out").innerHTML = ""; $("q-push-panel").innerHTML = ""; show(0); };
-    },
-  };
-})();
-/* ════════════════════════════════════════════════════════════════════
-   FINE-TUNE CONTROLLER  — 5-step wizard with live loss chart
-   ════════════════════════════════════════════════════════════════════ */
-controllers.finetune = (() => {
-  const STEPS = ["Base", "Dataset", "Hyperparams", "Train", "Done"];
-  let step = 0, method = "sft", lrTouched = false, rankTouched = false, es = null, log = [];
-  let datasetOk = false, adapterPath = "";
-  const trainPts = [], valPts = [];
-  function show(n) {
-    step = n;
-    document.querySelectorAll("[data-fstep]").forEach((d) => d.style.display = (+d.dataset.fstep === n) ? "" : "none");
-    renderSteps($("f-steps"), STEPS, n);
-  }
-  // OS folder picker for the base model — resolve by NAME server-side (no
-  // upload, works with the HF cache's symlinked layout). Mirrors Quantize.
-  async function resolveBaseByName(name, relPath) {
-    if (!name && !relPath) return;
-    const d = await api("/api/model/resolve-folder", { method: "POST", body: { folder_name: name || "", rel_path: relPath || "" } })
-      .catch(() => ({ ok: false, error: "request failed" }));
-    if (!d.ok) { toast(d.error || "could not locate this folder", "err"); return; }
-    $("f-model").value = d.path;
-  }
-  async function pickBaseFolder() {
-    if (window.showDirectoryPicker) {
-      try { const h = await window.showDirectoryPicker({ id: "mlx-models", mode: "read" }); return resolveBaseByName(h.name); }
-      catch (e) { return; }
-    }
-    $("f-folder").click();
-  }
-  async function inspectDataset() {
-    const path = $("f-data").value.trim();
-    if (!path) { toast("Enter a dataset directory.", "err"); return; }
-    const out = $("f-inspect-out");
-    out.innerHTML = '<div class="flash"><span class="shimmer">inspecting…</span></div>';
-    const d = await api("/api/finetune/inspect-dataset", { method: "POST", body: { path } }).catch(() => ({ ok: false, error: "request failed" }));
-    if (!d.ok) { out.innerHTML = '<div class="flash err">' + esc(d.error || "could not read dataset") + "</div>"; datasetOk = false; $("f-next1").disabled = true; return; }
-    datasetOk = true; $("f-next1").disabled = false;
-    out.innerHTML = '<div class="flash ok"><strong>' + num(d.n_train) + "</strong> train rows" +
-      (d.n_valid ? " · <strong>" + num(d.n_valid) + "</strong> valid rows" : "") +
-      (d.format ? " · format <strong>" + esc(d.format) + "</strong>" : "") + "</div>";
-  }
-  function setMethod(m) {
-    method = m;
-    $("f-method").querySelectorAll("button").forEach((b) => b.classList.toggle("on", b.dataset.v === m));
-    $("f-dpo-extra").style.display = m === "dpo" ? "" : "none";
-    $("f-orpo-extra").style.display = m === "orpo" ? "" : "none";
-    $("f-method-hint").textContent = m === "dpo"
-      ? "Direct Preference Optimization — data is {prompt, chosen, rejected}."
-      : m === "orpo"
-        ? "Odds Ratio Preference Optimization (reference-free) — data is {prompt, chosen, rejected}."
-        : "Supervised fine-tuning — data is messages or prompt+completion.";
-    if (!lrTouched) $("f-lr").value = m === "dpo" ? 0.00005 : m === "orpo" ? 0.00001 : 0.0002;
-    // ORPO's validated LoRA recipe uses rank 16 (vs 8 for SFT); apply unless edited.
-    if (!rankTouched) $("f-rank").value = m === "orpo" ? 16 : 8;
-  }
-  function collectHP() {
-    const modules = $("f-modules").value.split(",").map((s) => s.trim()).filter(Boolean);
-    const hp = {
-      model_dir: $("f-model").value.trim(),
-      data_dir: $("f-data").value.trim(),
-      method,
-      rank: +$("f-rank").value, scale: +$("f-scale").value, lora_dropout: +$("f-dropout").value,
-      target_modules: modules, num_layers: +$("f-layers").value, iters: +$("f-iters").value,
-      batch_size: +$("f-batch").value, learning_rate: +$("f-lr").value, max_seq_length: +$("f-seq").value,
-    };
-    if (method === "dpo") { hp.dpo_beta = +$("f-beta").value; hp.dpo_lr_schedule = $("f-sched").value; }
-    if (method === "orpo") { hp.orpo_lambda = +$("f-orpo-lambda").value; hp.orpo_lr_schedule = $("f-orpo-sched").value; }
-    return hp;
-  }
-  async function submit() {
-    const btn = $("f-submit"); btn.disabled = true;
-    const d = await api("/api/finetune/submit", { method: "POST", body: collectHP() }).catch(() => ({ ok: false, error: "request failed" }));
-    btn.disabled = false;
-    if (!d.ok) { toast(d.error || "could not start training", "err"); return; }
-    adapterPath = d.adapter_path || "";
-    $("f-out").textContent = adapterPath;
-    $("f-merge-out").innerHTML = $("f-exp-out").innerHTML = $("f-push-panel").innerHTML = "";
-    trainPts.length = 0; valPts.length = 0; log = [];
-    $("f-log").textContent = ""; $("f-bar").style.width = "0%"; $("f-pct").textContent = "0%"; $("f-msg").textContent = "Starting…";
-    $("f-step").textContent = $("f-loss").textContent = $("f-curlr").textContent = $("f-curtps").textContent = "—";
-    drawChart();
-    show(3);
-    attach(d.job_id);
-  }
-  function attach(jobId) {
-    if (es) es.close();
-    es = jobStream(jobId, {
-      log: (e) => { log.push(e.line); $("f-log").textContent = log.slice(-200).join("\n"); $("f-log").scrollTop = $("f-log").scrollHeight; },
-      metric: (e) => {
-        if (e.kind === "val") { valPts.push({ step: e.step, loss: e.loss }); $("f-leg-val").style.display = ""; }
-        else {
-          trainPts.push({ step: e.step, loss: e.loss });
-          $("f-step").textContent = num(e.step);
-          $("f-loss").textContent = e.loss != null ? e.loss.toFixed(4) : "—";
-          if (e.lr != null) $("f-curlr").textContent = e.lr.toExponential(2);
-          if (e.tps != null) $("f-curtps").textContent = e.tps.toFixed(1);
-          if (e.progress != null) { const p = Math.round(e.progress * 100); $("f-bar").style.width = p + "%"; $("f-pct").textContent = p + "%"; }
-          if (e.message) $("f-msg").textContent = e.message;
-        }
-        drawChart();
-      },
-      stage: (e) => {
-        if (e.progress != null) { const p = Math.round(e.progress * 100); $("f-bar").style.width = p + "%"; $("f-pct").textContent = p + "%"; }
-        if (e.message) $("f-msg").textContent = e.message;
-        if (e.stage === "done") { if (e.adapter_path) { adapterPath = e.adapter_path; $("f-out").textContent = e.adapter_path; } finish(); }
-      },
-      done: () => finish(),
-      failed: (e) => { $("f-msg").textContent = "Failed: " + (e.error || "unknown error"); toast(e.error || "training failed", "err"); es && es.close(); },
-    });
-  }
-  function finish() {
-    $("f-bar").style.width = "100%"; $("f-pct").textContent = "100%"; es && es.close();
-    if (!adapterPath) adapterPath = $("f-out").textContent.trim();
-    const base = $("f-model").value.trim();
-    // prefill the done-step affordances from this run's paths
-    $("f-merge-a").value = adapterPath;
-    $("f-exp-base").value = base;
-    $("f-exp-adapter").value = adapterPath;
-    show(4);
-  }
-  async function mergeAdapters() {
-    const a = $("f-merge-a").value.trim(), b = $("f-merge-b").value.trim();
-    const out = $("f-merge-out");
-    if (!a || !b) { out.innerHTML = '<div class="flash err">Enter both adapter paths.</div>'; return; }
-    out.innerHTML = '<div class="flash"><span class="shimmer">merging…</span></div>';
-    const btn = $("f-merge-go"); btn.disabled = true;
-    const d = await api("/api/finetune/merge", { method: "POST", body: { adapter_a: a, adapter_b: b } }).catch(() => ({ ok: false, error: "request failed" }));
-    btn.disabled = false;
-    if (!d.ok) { out.innerHTML = '<div class="flash err">' + esc(d.error || "merge failed") + "</div>"; return; }
-    const stats = d.stats && typeof d.stats === "object" ? Object.entries(d.stats).map(([k, v]) => esc(k) + " " + esc(v)).join(" · ") : (d.stats ? esc(d.stats) : "");
-    out.innerHTML = '<div class="flash ok">Merged → <code>' + esc(d.merged_path || "") + "</code>" + (stats ? "<br>" + stats : "") + "</div>";
-    toast("Adapters merged", "ok");
-  }
-  async function exportModel() {
-    const base = $("f-exp-base").value.trim(), adapter = $("f-exp-adapter").value.trim();
-    const out = $("f-exp-out");
-    if (!base || !adapter) { out.innerHTML = '<div class="flash err">Enter a base model and adapter path.</div>'; return; }
-    out.innerHTML = '<div class="flash"><span class="shimmer">exporting…</span></div>';
-    const btn = $("f-exp-go"); btn.disabled = true;
-    const d = await api("/api/finetune/export", { method: "POST", body: { base_model: base, adapter_path: adapter } }).catch(() => ({ ok: false, error: "request failed" }));
-    btn.disabled = false;
-    if (!d.ok) { out.innerHTML = '<div class="flash err">' + esc(d.error || "export failed") + "</div>"; return; }
-    out.innerHTML = '<div class="flash ok">Exported → <code>' + esc(d.export_path || "") + "</code></div>";
-    toast("Model exported", "ok");
-  }
-  /* inline SVG line plot — themed green (train) / blue (val) */
-  function drawChart() {
-    const svg = $("f-chart");
-    const W = 600, H = 200, padL = 8, padR = 8, padT = 12, padB = 12;
-    const all = trainPts.concat(valPts);
-    if (!all.length) { svg.innerHTML = '<text x="300" y="104" text-anchor="middle" fill="var(--dimmer)" font-size="13">waiting for the first metric…</text>'; return; }
-    const losses = all.map((p) => p.loss).filter((x) => x != null && isFinite(x));
-    let minL = Math.min(...losses), maxL = Math.max(...losses);
-    if (minL === maxL) { minL -= 0.5; maxL += 0.5; }
-    const range = maxL - minL || 1;
-    const maxStep = Math.max(...all.map((p) => p.step || 0), 1);
-    const xOf = (s) => padL + (s / maxStep) * (W - padL - padR);
-    const yOf = (l) => padT + (1 - (l - minL) / range) * (H - padT - padB);
-    const path = (pts, color, fillId) => {
-      if (!pts.length) return "";
-      const d = pts.map((p, i) => (i ? "L" : "M") + xOf(p.step).toFixed(1) + " " + yOf(p.loss).toFixed(1)).join(" ");
-      let out = '<path d="' + d + '" fill="none" stroke="' + color + '" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>';
-      // soft area fill under the curve
-      const area = d + " L" + xOf(pts[pts.length - 1].step).toFixed(1) + " " + (H - padB) + " L" + xOf(pts[0].step).toFixed(1) + " " + (H - padB) + " Z";
-      out = '<path d="' + area + '" fill="url(#' + fillId + ')" opacity="0.18"/>' + out;
-      return out;
-    };
-    // gridlines
-    let grid = "";
-    for (let i = 1; i < 4; i++) { const y = padT + (i / 4) * (H - padT - padB); grid += '<line x1="0" y1="' + y.toFixed(1) + '" x2="' + W + '" y2="' + y.toFixed(1) + '" stroke="rgba(255,255,255,.06)" stroke-width="1"/>'; }
-    svg.innerHTML =
-      '<defs>' +
-      '<linearGradient id="gf-train" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#30d158"/><stop offset="1" stop-color="#30d158" stop-opacity="0"/></linearGradient>' +
-      '<linearGradient id="gf-val" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0a84ff"/><stop offset="1" stop-color="#0a84ff" stop-opacity="0"/></linearGradient>' +
-      '</defs>' + grid +
-      path(valPts, "#0a84ff", "gf-val") +
-      path(trainPts, "#30d158", "gf-train");
-  }
-  return {
-    init() {
-      show(0);
-      $("f-next0").onclick = () => { if (!$("f-model").value.trim()) { toast("Enter a base model path.", "err"); return; } show(1); };
-      // OS folder dialog for the base model (native; resolves by name, no upload)
-      $("f-browse").onclick = pickBaseFolder;
-      $("f-folder").addEventListener("change", (e) => {
-        const f = e.target.files[0]; e.target.value = "";
-        if (f) resolveBaseByName((f.webkitRelativePath || f.name).split("/")[0], f.webkitRelativePath || "");
-      });
-      {
-        const drop = $("f-drop");
-        const hi = (on) => { drop.style.outline = on ? "2px dashed var(--blue)" : ""; drop.style.outlineOffset = on ? "4px" : ""; };
-        ["dragenter", "dragover"].forEach((ev) => drop.addEventListener(ev, (e) => { e.preventDefault(); hi(true); }));
-        ["dragleave", "drop"].forEach((ev) => drop.addEventListener(ev, (e) => {
-          e.preventDefault(); hi(false);
-          if (ev !== "drop" || !e.dataTransfer) return;
-          for (const it of [...(e.dataTransfer.items || [])]) {
-            const en = it.webkitGetAsEntry && it.webkitGetAsEntry();
-            if (en && en.isDirectory) return resolveBaseByName(en.name);
-          }
-          const f = e.dataTransfer.files && e.dataTransfer.files[0];
-          if (f) resolveBaseByName((f.webkitRelativePath || f.name).split("/")[0]);
-        }));
-      }
-      $("f-inspect").onclick = inspectDataset;
-      $("f-data").addEventListener("keydown", (e) => { if (e.key === "Enter") inspectDataset(); });
-      $("f-data").addEventListener("input", () => { datasetOk = false; $("f-next1").disabled = true; $("f-inspect-out").innerHTML = ""; });
-      $("f-next1").onclick = () => { if (datasetOk) show(2); };
-      $("f-method").querySelectorAll("button").forEach((b) => b.onclick = () => setMethod(b.dataset.v));
-      $("f-lr").addEventListener("input", () => { lrTouched = true; });
-      $("f-rank").addEventListener("input", () => { rankTouched = true; });
-      document.querySelectorAll("#s-finetune [data-fback]").forEach((b) => b.onclick = () => show(step - 1));
-      $("f-submit").onclick = submit;
-      $("f-merge-go").onclick = mergeAdapters;
-      $("f-exp-go").onclick = exportModel;
-      $("f-push").onclick = () => pushToHub($("f-push-panel"), { kind: "finetune", source_path: adapterPath || $("f-out").textContent.trim() });
-      $("f-again").onclick = () => {
-        $("f-inspect-out").innerHTML = "";
-        $("f-merge-out").innerHTML = $("f-exp-out").innerHTML = $("f-push-panel").innerHTML = "";
-        show(0);
-      };
-    },
-  };
-})();
-/* ════════════════════════════════════════════════════════════════════
-   DATASET CONTROLLER  — template-driven builder
-   ════════════════════════════════════════════════════════════════════ */
-controllers.dataset = (() => {
-  const STEPS = ["Template", "Inputs", "Generate", "Done"];
-  let step = 0, templates = [], selected = null, jobId = null, es = null, log = [];
-  function show(n) {
-    step = n;
-    document.querySelectorAll("[data-dstep]").forEach((d) => d.style.display = (+d.dataset.dstep === n) ? "" : "none");
-    renderSteps($("d-steps"), STEPS, n);
-  }
-  async function loadTemplates() {
-    const grid = $("d-templates");
-    grid.innerHTML = Array.from({ length: 4 }, () => '<div class="card" style="height:130px"><div class="shimmer" style="height:18px;width:50%;margin-bottom:12px"></div><div class="shimmer" style="height:13px;width:90%;margin-bottom:6px"></div><div class="shimmer" style="height:13px;width:70%"></div></div>').join("");
-    const d = await api("/api/dataset/templates").catch(() => ({ templates: null }));
-    templates = (d && d.templates) || [];
-    if (!templates.length) { grid.innerHTML = '<div class="empty" style="grid-column:1/-1"><h3>No templates available</h3><p>The server didn\'t return any dataset templates. Make sure the server is running.</p></div>'; return; }
-    // non-LLM templates first
-    const ordered = templates.slice().sort((a, b) => (a.needs_llm ? 1 : 0) - (b.needs_llm ? 1 : 0));
-    grid.innerHTML = ordered.map((t, i) =>
-      '<div class="card" data-tid="' + esc(t.id) + '" style="cursor:pointer;display:flex;flex-direction:column;gap:8px">' +
-        '<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">' +
-          '<h3 style="margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-transform:none">' + esc(t.label || t.id) + "</h3>" +
-          (t.needs_llm ? '<span class="pill warn" style="padding:3px 9px;font-size:11px"><span class="dot"></span>uses local model</span>' : "") +
-          (t.output_format ? '<span class="soon" style="color:var(--dim)">' + esc(t.output_format) + "</span>" : "") +
-        "</div>" +
-        '<p style="color:var(--dim);font-size:13.5px;line-height:1.5;margin:0">' + esc(t.description || "") + "</p>" +
-      "</div>").join("");
-    grid.querySelectorAll("[data-tid]").forEach((c) =>
-      c.onclick = () => selectTemplate(templates.find((t) => t.id === c.dataset.tid)));
-  }
-  function selectTemplate(t) {
-    selected = t;
-    $("d-form-title").textContent = t.label || t.id;
-    $("d-form-desc").textContent = t.description || "";
-    const form = $("d-form");
-    form.innerHTML = (t.fields || []).map((f) => {
-      const lbl = esc(f.label || f.name) + (f.required ? " *" : "");
-      const ph = f.hint ? ' placeholder="' + esc(f.hint) + '"' : "";
-      const dv = f.default != null ? f.default : "";
-      let ctrl;
-      if (f.type === "textarea") ctrl = '<textarea data-fld="' + esc(f.name) + '"' + ph + ">" + esc(dv) + "</textarea>";
-      else if (f.type === "number") ctrl = '<input type="number" data-fld="' + esc(f.name) + '" value="' + esc(dv) + '"' + ph + ">";
-      else ctrl = '<input type="text" data-fld="' + esc(f.name) + '" value="' + esc(dv) + '"' + ph + ">";
-      return '<div class="field"><label>' + lbl + "</label>" + ctrl + (f.hint ? '<div class="hint">' + esc(f.hint) + "</div>" : "") + "</div>";
-    }).join("");
-    show(1);
-  }
-  async function submit() {
-    if (!selected) return;
-    const inputs = {};
-    $("d-form").querySelectorAll("[data-fld]").forEach((i) => {
-      inputs[i.dataset.fld] = i.type === "number" ? (i.value === "" ? null : +i.value) : i.value;
-    });
-    const body = { template_id: selected.id, inputs };
-    if (selected.needs_llm && activeModelId) body.model_name = activeModelId;
-    const btn = $("d-submit"); btn.disabled = true;
-    const d = await api("/api/dataset/submit", { method: "POST", body }).catch(() => ({ ok: false, error: "request failed" }));
-    btn.disabled = false;
-    if (!d.ok) { toast(d.error || "could not start generation", "err"); return; }
-    jobId = d.job_id || null;
-    $("d-push-panel").innerHTML = "";
-    $("d-out").textContent = d.output_dir || "";
-    log = []; $("d-log").textContent = ""; $("d-bar").style.width = "0%"; $("d-pct").textContent = "0%"; $("d-msg").textContent = "Starting…";
-    $("d-ntrain").textContent = $("d-nvalid").textContent = "—";
-    show(2);
-    attach(d.job_id);
-  }
-  function attach(jobId) {
-    if (es) es.close();
-    es = jobStream(jobId, {
-      log: (e) => { log.push(e.line); $("d-log").textContent = log.slice(-200).join("\n"); $("d-log").scrollTop = $("d-log").scrollHeight; },
-      stage: (e) => {
-        if (e.progress != null) { const p = Math.round(e.progress * 100); $("d-bar").style.width = p + "%"; $("d-pct").textContent = p + "%"; }
-        if (e.message) $("d-msg").textContent = e.message;
-        if (e.n_train != null) $("d-ntrain").textContent = num(e.n_train);
-        if (e.n_valid != null) $("d-nvalid").textContent = num(e.n_valid);
-        if (e.stage === "done") { if (e.output_dir) $("d-out").textContent = e.output_dir; finish(e); }
-      },
-      done: (e) => finish(e),
-      failed: (e) => { $("d-msg").textContent = "Failed: " + (e.error || "unknown error"); toast(e.error || "generation failed", "err"); es && es.close(); },
-    });
-  }
-  function finish(e) {
-    $("d-bar").style.width = "100%"; $("d-pct").textContent = "100%"; es && es.close();
-    if (e && e.n_train != null) $("d-ntrain").textContent = num(e.n_train);
-    if (e && e.n_valid != null) $("d-nvalid").textContent = num(e.n_valid);
-    show(3);
-  }
-  return {
-    init() {
-      show(0);
-      loadTemplates();
-      document.querySelectorAll("#s-dataset [data-dback]").forEach((b) => b.onclick = () => show(0));
-      $("d-submit").onclick = submit;
-      $("d-push").onclick = () => pushToHub($("d-push-panel"), { kind: "dataset", job_id: jobId });
-      $("d-again").onclick = () => { selected = null; $("d-push-panel").innerHTML = ""; show(0); };
-    },
-  };
-})();
-/* ════════════════════════════════════════════════════════════════════
-   STATUS CONTROLLER  — ported dashboard (poll /stats + /v1/models + /fit + /library + /downloads)
-   ════════════════════════════════════════════════════════════════════ */
-controllers.status = (() => {
-  let timer = null, fitLoaded = false;
-  const dlRates = {};
-  async function tick() {
-    try {
-      const [stats, models] = await Promise.all([
-        fetch("/stats").then((r) => r.json()),
-        fetch("/v1/models").then((r) => r.json()),
-      ]);
-      const m = models.data && models.data[0];
-      $("st-model-id").textContent = (m && m.id) || "—";
-      const a = stats.admission || {};
-      $("st-model-meta").textContent = num(m && m.context_window) + " token window · weights " + gb(a.weights_bytes);
-      $("st-safe-ctx").textContent = num(a.max_safe_context);
-      $("st-weights").textContent = gb(a.weights_bytes);
-      $("st-usable").textContent = gb(a.usable_bytes);
-      $("st-budget").textContent = a.memory_budget_bytes ? gb(a.memory_budget_bytes) : "off";
-      $("st-mem-bar").style.width = a.usable_bytes ? Math.min(100, 100 * a.weights_bytes / a.usable_bytes) + "%" : "0%";
-      const pc = stats.prompt_cache || {};
-      const lookups = (pc.hits || 0) + (pc.misses || 0);
-      $("st-pc-hits").textContent = lookups ? Math.round(100 * pc.hits / lookups) + "%" : "no lookups";
-      $("st-pc-entries").textContent = num(pc.entries);
-      $("st-pc-bytes").textContent = mb(pc.bytes) + " / " + mb(pc.max_bytes);
-      $("st-pc-bar").style.width = pc.max_bytes ? Math.min(100, 100 * pc.bytes / pc.max_bytes) + "%" : "0%";
-      const rs = stats.response_store || {};
-      $("st-rs-entries").textContent = num(rs.entries);
-      $("st-rs-bytes").textContent = mb(rs.bytes) + " / " + mb(rs.max_bytes);
-      $("st-rs-ttl").textContent = rs.ttl_ms ? (rs.ttl_ms / 60000) + " min" : "—";
-      $("st-rs-bar").style.width = rs.max_bytes ? Math.min(100, 100 * rs.bytes / rs.max_bytes) + "%" : "0%";
-      const kv = stats.kv_quant || {};
-      $("st-kv-mode").innerHTML = "<code>" + esc(kv.mode || "—") + "</code>";
-      const att = kv.attention;
-      $("st-kv-layers").innerHTML = Object.entries(kv.layers || {})
-        .map(([k, v]) => '<div class="kv"><b>' + esc(k) + ' layers</b><span class="num">' + esc(v) + "</span></div>").join("") +
-        (att ? '<div class="kv"><b>attention</b><span class="num">' + esc(att.global) + " global · " + esc(att.sliding_window) + " sliding</span></div>" : "");
-      await loadDownloads();
-      if (!fitLoaded) { await loadFit(); await loadLibrary(); }
-      if (stats.server && stats.server.started_at) {
-        const up = (Date.now() - stats.server.started_at) / 1000;
-        $("st-uptime").textContent = up < 90 ? Math.round(up) + "s" : up < 5400 ? Math.round(up / 60) + "m" : (up / 3600).toFixed(1) + "h";
-      }
-      $("st-updated").textContent = new Date().toLocaleTimeString();
-    } catch {
-      /* nav pill already reflects connectivity; leave last-good values on screen */
-    }
-  }
-  async function loadDownloads() {
-    let downloads;
-    try { ({ downloads } = await fetch("/downloads").then((r) => r.json())); } catch { return; }
-    const card = $("st-dl-card");
-    if (!downloads || downloads.length === 0) { card.style.display = "none"; return; }
-    card.style.display = "";
-    const order = downloads.slice().sort((a, b) =>
-      (a.state === "active" ? 0 : 1) - (b.state === "active" ? 0 : 1) || b.startedAt - a.startedAt);
-    $("st-dl-list").innerHTML = order.map((d) => {
-      const pct = d.totalBytes ? Math.min(100, 100 * d.receivedBytes / d.totalBytes) : 0;
-      let detail, barCls = "";
-      if (d.state === "active") {
-        let bps = d.bytesPerSec || 0;
-        if (!bps) {
-          const prev = dlRates[d.repoId], now = performance.now();
-          if (prev && now > prev.t) bps = (d.receivedBytes - prev.bytes) / ((now - prev.t) / 1000);
-          dlRates[d.repoId] = { bytes: d.receivedBytes, t: now };
-        }
-        const speed = bps > 0 ? " · " + mb(bps) + "/s · ~" + Math.max(1, Math.round((d.totalBytes - d.receivedBytes) / bps / 60)) + " min left" : "";
-        detail = gb(d.receivedBytes) + " / " + gb(d.totalBytes) + " · " + pct.toFixed(0) + "%" + speed +
-          (d.currentFile ? " · <code>" + esc(d.currentFile) + "</code>" : "");
-        barCls = "warm";
-      } else if (d.state === "done") {
-        detail = gb(d.totalBytes) + ' · <span style="color:var(--green);font-weight:600">complete</span>';
-      } else {
-        detail = '<span style="color:var(--red);font-weight:600">error</span> · ' + esc(d.error || "");
-      }
-      return '<div style="padding:10px 0">' +
-        '<div class="kv" style="border:none"><b>' + esc(d.repoId) + "</b>" +
-        '<span class="num">' + d.filesDone + "/" + d.filesTotal + " files</span></div>" +
-        '<div style="font-size:13.5px;color:var(--dim)" class="num">' + detail + "</div>" +
-        '<div class="meter ' + barCls + '"><i style="width:' + pct + '%"></i></div></div>';
-    }).join("");
-  }
-  async function loadLibrary() {
-    let models;
-    try { ({ models } = await fetch("/library").then((r) => r.json())); } catch { return; }
-    if (!models) return;
-    $("st-lib-body").innerHTML = models.slice()
-      .sort((a, b) => (b.serving ? 1 : 0) - (a.serving ? 1 : 0) || b.size_bytes - a.size_bytes)
-      .map((m) => {
-        const a = m.assessment;
-        let status;
-        if (m.serving) status = '<span style="color:var(--blue);font-weight:700">SERVING</span>';
-        else if (!m.supported) status = '<span style="color:var(--dimmer)">unsupported (' + esc(m.model_type) + ")</span>";
-        else if (a && a.fits) status = '<span style="color:var(--green);font-weight:600">fits</span>';
-        else status = '<span style="color:var(--red);font-weight:600">too big</span>';
-        return "<tr" + (m.serving ? ' class="you"' : "") + "><td>" + esc(m.repo_id) +
-          (m.vision ? ' · <span style="color:var(--dim)">vision</span>' : "") +
-          '</td><td class="num">' + gb(m.size_bytes) + "</td><td>" + status + "</td>" +
-          '<td class="num">' + (m.supported && a && a.fits ? num(a.max_safe_context) : "—") + "</td>" +
-          '<td class="num">' + (m.supported && a && a.fits ? a.predicted_decode_tps.toFixed(0) + " tok/s" : "—") + "</td></tr>";
-      }).join("");
-  }
-  async function loadFit() {
-    let f;
-    try { f = await fetch("/fit").then((r) => r.json()); } catch { return; }
-    fitLoaded = true;
-    const r = f.report || {};
-    if (f.measured_decode_tps) {
-      $("st-tps").textContent = f.measured_decode_tps.toFixed(1);
-      $("st-tps").closest(".card").querySelector("h3").textContent = "Decode · measured";
-      $("st-tps-cap").textContent = "mlx-bun benchmark on this machine · predicted " + (f.typical_decode_tps || 0).toFixed(1) + " at " + num(f.typical_context_tokens) + " ctx";
-    } else if (f.typical_decode_tps) {
-      $("st-tps").textContent = f.typical_decode_tps.toFixed(1);
-      $("st-tps-cap").textContent = "at " + num(f.typical_context_tokens) + " context · " + (r.predicted_decode_tps || 0).toFixed(1) + " tok/s at the " + num(f.context_tokens) + " max (full-KV reads)";
-    } else {
-      $("st-tps").textContent = (r.predicted_decode_tps || 0).toFixed(1);
-    }
-    $("st-m-ram").textContent = gb(f.machine && f.machine.ram_bytes);
-    $("st-m-bw").textContent = (f.machine && f.machine.bandwidth_gbs || "—") + " GB/s";
-    $("st-m-fits").innerHTML = r.fits ? '<span style="color:var(--green);font-weight:700">FITS</span>' : '<span style="color:var(--red);font-weight:700">DOES NOT FIT</span>';
-    $("st-fit-ctx").textContent = num(f.context_tokens);
-    $("st-f-weights").textContent = gb(r.weights_bytes);
-    $("st-f-kv").textContent = gb(r.kv_bytes);
-    $("st-f-transient").textContent = gb(r.transient_bytes);
-    $("st-f-total").textContent = gb(r.total_bytes) + " / " + gb(r.usable_bytes);
-    $("st-fit-bar").style.width = r.usable_bytes ? Math.min(100, 100 * r.total_bytes / r.usable_bytes) + "%" : "0%";
-    $("st-sku-ctx").textContent = num(f.sku_matrix_ctx);
-    const myRam = Math.round((f.machine && f.machine.ram_bytes || 0) / 2 ** 30);
-    const myChip = (f.machine && f.machine.chip) || null;
-    const rows = f.sku_matrix || [];
-    let youIdx = rows.findIndex((r) => myChip && r.sku === myChip && r.ram_gb === myRam);
-    if (youIdx < 0 && myChip) {
-      let best = Infinity;
-      rows.forEach((r, i) => { if (r.sku === myChip && Math.abs(r.ram_gb - myRam) < best) { best = Math.abs(r.ram_gb - myRam); youIdx = i; } });
-    }
-    if (youIdx < 0) youIdx = rows.findIndex((r) => r.ram_gb === myRam);
-    $("st-sku-body").innerHTML = rows.map((row, i) => {
-      const you = i === youIdx;
-      const dimCls = row.fits ? "num" : "num fit-no";
-      return "<tr" + (you ? ' class="you"' : "") + "><td>" + esc(row.sku) + (you ? " · <b>this machine</b>" : "") +
-        '</td><td class="num">' + row.ram_gb + " GB</td>" +
-        '<td class="' + (row.fits ? "fit-yes" : "fit-no") + '">' + (row.fits ? "fits" : "no") + "</td>" +
-        '<td class="' + dimCls + '">' + (row.max_context > 0 ? num(row.max_context) : "0 — weights alone don’t fit") + "</td>" +
-        '<td class="' + dimCls + '">' + (row.decode_tps > 0 ? "~" + row.decode_tps.toFixed(0) + " tok/s" : "—") + "</td></tr>";
-    }).join("");
-  }
+<!-- App-aware assistant spotlight overlay (plan §6.6, §9 Phase 3, beat
+     matrix Axis 12) — built/positioned by assistant.ts's showSpotlight().
+     data-ui-chrome="assistant" excludes it (and only it) from the DOM
+     snapshot the assistant itself reads, so it never spotlights or
+     narrates its own overlay. NEVER-HIJACK (verbatim §6.6): the whole
+     overlay is pointer-events:none in CSS below — the highlighted control
+     stays clickable straight through the ring and popover. It traps no
+     focus (deliberately absent from shell.ts's trapFocus/closeTopOverlay
+     set — this is not a modal). -->
+<div id="assistant-spotlight" data-ui-chrome="assistant" aria-hidden="true">
+  <div class="asr-ring"></div>
+  <div class="asr-pop"><div class="asr-pop-text"></div></div>
+</div>
-  return {
-    init() {
-      // trigger scroll reveals once mounted
-      const page = $("status-page");
-      requestAnimationFrame(() => page.classList.add("lit"));
-      page.classList.add("lit");
-    },
-    enter() { tick(); timer = setInterval(tick, 2000); },
-    leave() { clearInterval(timer); timer = null; },
-  };
-})();
-/* ════════════════════════════════════════════════════════════════════
-   BOOT
-   ════════════════════════════════════════════════════════════════════ */
-if (!location.hash) location.replace("#/chat");
-router();
-pollIdentity();
-setInterval(pollIdentity, 4000);
-</script>
+<!-- Vendored syntax highlighter (src/web/vendor/hljs.js — highlight.js core +
+     a curated language set, BSD-3-Clause, see that file's header). `defer`
+     means this loads/executes at DOMContentLoaded, which happens well before
+     any real highlighting call (those only fire later, on streamed content
+     or history replay) — app.js (below) only *calls* highlightIn() from
+     async event handlers, so load order here is safe in practice.
+     highlightIn() still guards with `typeof hljs !== "undefined"` for the
+     case this tag is ever stripped or the asset 404s. No CDN; served by
+     src/server.ts at /assets/hljs.js. -->
+<script defer src="/assets/hljs.js"></script>
+<!-- The app itself: GENERATED bundle of src/web/src/*.ts (plan §7/§9 Phase 2
+     module split), built by `bun scripts/build-web.ts` into src/web/app.js
+     and served by src/server.ts at /assets/app.js — see that file's header
+     comment. `defer` (like hljs.js above) means both scripts run in document
+     order at DOMContentLoaded, after the DOM this script queries with $()
+     is fully parsed. Edit src/web/src/*.ts, never this bundle or this tag. -->
+<script defer src="/assets/app.js"></script>
 </body>
 </html>