diff --git a/.github/workflows/shell-e2e.yml b/.github/workflows/shell-e2e.yml
index 9332d09e0..6b93496e9 100644
--- a/.github/workflows/shell-e2e.yml
+++ b/.github/workflows/shell-e2e.yml
@@ -52,10 +52,15 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v5
         with:
-          node-version: '20'
+          node-version: '22'
           cache: 'npm'
           cache-dependency-path: shell/tests/e2e/workers/harness/package-lock.json
 
+      # shell/build.rs builds the injectable UI (shell/ui) via pnpm.
+      # Version comes from the repo-root package.json `packageManager` field.
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v5
+
       - name: Install iii engine (latest from main)
         run: |
           curl -fsSL --retry 3 --retry-connrefused --retry-delay 5 \
diff --git a/console/DESIGN.md b/console/DESIGN.md
index c82d0fd6e..c60b9b3de 100644
--- a/console/DESIGN.md
+++ b/console/DESIGN.md
@@ -1,118 +1,155 @@
 ---
-version: alpha
+version: beta
 name: iii Schematic
-description: A minimal, blueprint-style design system for the iii engine. Engineering-document aesthetic in warm cream and ink, with a single vivid orange accent and an all-monospace voice.
+description: A minimal, engineering-document design system for the iii engine. The system draws no lines — hierarchy comes entirely from layered surfaces and alpha-gray fills; warm cream paper in light, neutral grays from black in dark, with a single rationed accent (burnt orange on cream, electric blue on dark), one 6px corner radius everywhere, and a mono voice for technical data. The only sanctioned strokes are the focus ring and the very subtle `edge` frame around the floating workspace panels.
 colors:
   bg: "#f2f0ed"
-  panel: "#e9e6e2"
+  sidebar: "#edeae5"
+  panel: "lab(98.26% 0 0)"
+  panel-raised: "#f7f5f2"
   paper: "#f2f0ed"
   paper-2: "#ebe8e3"
+  surface: "rgba(20, 16, 8, 0.055)"
+  surface-hover: "rgba(20, 16, 8, 0.085)"
+  surface-selected: "rgba(184, 66, 15, 0.12)"
+  surface-active: "rgba(20, 16, 8, 0.12)"
   ink: "#0a0a0a"
   ink-2: "#1a1a1a"
   ink-soft: "#1a1a1a"
   ink-faint: "#6b6865"
   ink-ghost: "#a3a09c"
+  ink-disabled: "#b8b4ae"
   mute: "#6b6865"
   mute-2: "#a3a09c"
-  rule: "#d8d5d0"
-  rule-2: "#e6e3df"
-  accent: "#ff5a1f"
-  accent-dark: "#3ea8ff"
-  bg-dark: "#111110"
-  panel-dark: "#1a1916"
-  ink-dark: "#f2f0ed"
-  ink-faint-dark: "#9c9893"
-  ink-ghost-dark: "#5d5a55"
-  rule-dark: "#2a2926"
-  rule-2-dark: "#1f1e1c"
-  alert: "#c43e1c"
+  rule: "transparent"
+  rule-2: "transparent"
+  rule-strong: "transparent"
+  rule-focus: "rgba(184, 66, 15, 0.6)"
+  edge: "rgba(20, 16, 8, 0.08)"
+  accent: "#b8420f"
+  accent-fg: "#f2f0ed"
+  accent-hover: "#a53a0c"
+  accent-muted: "rgba(184, 66, 15, 0.1)"
+  accent-border: "rgba(184, 66, 15, 0.35)"
+  alert: "#ff0026"
+  alert-muted: "rgba(255, 0, 38, 0.08)"
   warn: "#a87a00"
+  warn-muted: "rgba(168, 122, 0, 0.12)"
+  ok: "#356f3d"
+  ok-muted: "rgba(53, 111, 61, 0.12)"
+  bg-dark: "#0a0a0a"
+  sidebar-dark: "#0e0e0e"
+  panel-dark: "#111111"
+  panel-raised-dark: "#171717"
+  paper-2-dark: "#171717"
+  surface-dark: "rgba(255, 255, 255, 0.055)"
+  surface-hover-dark: "rgba(255, 255, 255, 0.085)"
+  surface-selected-dark: "rgba(40, 168, 247, 0.14)"
+  surface-active-dark: "rgba(255, 255, 255, 0.12)"
+  ink-dark: "#ededed"
+  ink-faint-dark: "#a6a6a6"
+  ink-ghost-dark: "#6f6f6f"
+  ink-disabled-dark: "#4d4d4d"
+  rule-dark: "transparent"
+  rule-2-dark: "transparent"
+  rule-strong-dark: "transparent"
+  rule-focus-dark: "rgba(40, 168, 247, 0.7)"
+  edge-dark: "rgba(255, 255, 255, 0.07)"
+  accent-dark: "#28a8f7"
+  accent-hover-dark: "#46b6fa"
+  accent-muted-dark: "rgba(40, 168, 247, 0.12)"
+  accent-border-dark: "rgba(40, 168, 247, 0.35)"
+  alert-dark: "#f05d68"
+  warn-dark: "#f5a524"
+  ok-dark: "#36c98f"
 typography:
   logo:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 18px
     fontWeight: 600
     lineHeight: 1
     letterSpacing: -0.02em
   display-hero:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 72px
     fontWeight: 600
     lineHeight: 1.02
     letterSpacing: -0.02em
   display-foot:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 48px
     fontWeight: 600
     lineHeight: 1.05
     letterSpacing: -0.03em
   headline-section:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 28px
     fontWeight: 500
     lineHeight: 1.25
     letterSpacing: -0.01em
   headline-card:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 20px
     fontWeight: 500
     lineHeight: 1.1
     letterSpacing: -0.02em
   title-cell:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 16px
     fontWeight: 600
     lineHeight: 1.3
     letterSpacing: -0.01em
   body-md:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 14px
     fontWeight: 400
     lineHeight: 1.7
   body-sm:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 13px
     fontWeight: 400
     lineHeight: 1.7
   code-md:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 13px
     fontWeight: 400
     lineHeight: 1.65
   code-sm:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 12.5px
     fontWeight: 400
     lineHeight: 1.55
   label-caps-lg:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 12px
     fontWeight: 500
     lineHeight: 1
     letterSpacing: 0.18em
   label-caps-md:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 12px
     fontWeight: 500
     lineHeight: 1
     letterSpacing: 0.14em
   label-caps-sm:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 11px
     fontWeight: 500
     lineHeight: 1
     letterSpacing: 0.06em
   micro:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 9px
     fontWeight: 400
     lineHeight: 1
     letterSpacing: 0.04em
 rounded:
   none: 0px
-  sm: 0px
-  md: 0px
-  lg: 0px
+  xs: 6px
+  sm: 6px
+  md: 6px
+  lg: 6px
+  xl: 6px
   full: 9999px
 spacing:
   base: 16px
@@ -147,35 +184,35 @@ components:
     backgroundColor: "{colors.ink}"
     textColor: "{colors.bg}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.md}"
     padding: 12px 20px
   button-primary-hover:
-    backgroundColor: "{colors.bg}"
-    textColor: "{colors.ink}"
+    backgroundColor: "{colors.ink}"
+    opacity: 0.9
   button-ghost:
-    backgroundColor: "{colors.bg}"
-    textColor: "{colors.ink}"
+    backgroundColor: transparent
+    textColor: "{colors.ink-faint}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     padding: 12px 20px
   button-ghost-hover:
-    backgroundColor: "{colors.ink}"
-    textColor: "{colors.bg}"
+    backgroundColor: "{colors.surface-hover}"
+    textColor: "{colors.ink}"
   button-pill:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     padding: 6px 12px
   button-pill-hover:
-    backgroundColor: "{colors.ink}"
-    textColor: "{colors.bg}"
+    backgroundColor: "{colors.surface-hover}"
   button-icon:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: transparent
     textColor: "{colors.ink-faint}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     size: 30px
   button-icon-hover:
+    backgroundColor: "{colors.surface-hover}"
     textColor: "{colors.ink}"
   nav-link:
     typography: "{typography.body-sm}"
@@ -184,68 +221,78 @@ components:
   nav-link-hover:
     textColor: "{colors.ink}"
   card:
-    backgroundColor: "{colors.bg}"
-    rounded: "{rounded.none}"
-    padding: 28px
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.md}"
+    padding: 20px
   card-focus:
-    backgroundColor: "{colors.panel}"
+    backgroundColor: "{colors.panel-raised}"
   card-head:
-    backgroundColor: "{colors.panel}"
+    backgroundColor: "{colors.panel-raised}"
     typography: "{typography.label-caps-lg}"
     textColor: "{colors.ink-faint}"
     padding: 10px 14px
   input:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
-    padding: 10px 2px
+    rounded: "{rounded.sm}"
+    padding: 10px 12px
   input-placeholder:
     textColor: "{colors.ink-ghost}"
+  input-hover:
+    backgroundColor: "{colors.surface-hover}"
   input-focus:
-    backgroundColor: "{colors.bg}"
-    textColor: "{colors.ink}"
+    borderColor: "{colors.rule-focus}"
+    ring: "3px {colors.accent-muted}"
   badge-numeric:
     backgroundColor: "{colors.accent}"
-    textColor: "{colors.bg}"
+    textColor: "{colors.accent-fg}"
     typography: "{typography.label-caps-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.xs}"
     padding: 0 4px
     height: 16px
   status-dot:
     backgroundColor: "{colors.accent}"
     rounded: "{rounded.full}"
     size: 6px
-  rule-line:
-    backgroundColor: "{colors.rule}"
-    height: 1px
   code-block:
     backgroundColor: "{colors.bg}"
     typography: "{typography.code-sm}"
     textColor: "{colors.ink}"
+    rounded: "{rounded.sm}"
     padding: 18px 20px
   terminal-button:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     padding: 10px 14px
   terminal-prompt:
     textColor: "{colors.accent}"
+  toggle-track:
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.sm}"
+    padding: 2px
   toggle-active:
-    backgroundColor: "{colors.ink}"
-    textColor: "{colors.bg}"
+    backgroundColor: "{colors.accent-muted}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xs}"
   toggle-inactive:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: transparent
     textColor: "{colors.mute}"
 ---
 
 # iii Schematic — design system
 
-This document is a self-contained, portable spec for the iii Schematic UI: a
-warm-cream, ink-on-paper, monospace web UI built like an engineering drafting
-sheet. Everything needed to reproduce the system in another project lives
-inside this file — there are no links to repository sources.
+This document is a self-contained, portable spec for the iii Schematic UI:
+an engineering-document web UI built from layered surfaces and alpha-gray
+fills — warm cream paper in light, neutral grays from black in dark — with
+Geist for UI text, Geist Mono for technical data, one 6px corner radius
+everywhere, and a single rationed accent. The system draws no lines: the
+only sanctioned strokes are the focus ring and the subtle `edge` frame
+around the floating workspace panels. Everything needed to reproduce the
+system in another project lives inside this file — there are no links to
+repository sources.
 
 The YAML frontmatter above is the machine-readable token spec. The sections
 below translate it into implementation-ready CSS and React. They assume:
@@ -263,18 +310,24 @@ canonical components in §10 as-is.
 
 ## 0. Setup
 
-### Font
+### Fonts
 
-Load Chivo Mono in `index.html`. Weights 400/500/600 cover the entire scale
-(body, label-caps, headlines, display).
+Two families, loaded via `@fontsource` at the top of the global stylesheet:
+**Geist** (the UI sans — navigation, buttons, body copy, headings) and
+**Geist Mono** (the technical voice — trace names, IDs, timestamps, metrics,
+code). Chivo Mono stays in the mono fallback stack for legacy glyph parity.
+Weights 400/500/600 cover the entire scale.
 
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400;500;600&display=swap"
-/>
+```css
+@import "@fontsource/geist/400.css";
+@import "@fontsource/geist/500.css";
+@import "@fontsource/geist/600.css";
+@import "@fontsource/geist-mono/400.css";
+@import "@fontsource/geist-mono/500.css";
+@import "@fontsource/geist-mono/600.css";
+@import "@fontsource/chivo-mono/400.css";
+@import "@fontsource/chivo-mono/500.css";
+@import "@fontsource/chivo-mono/600.css";
 ```
 
 ### HTML shell
@@ -299,37 +352,90 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-    Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+  --font-sans:
+    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono:
+    "Geist Mono", "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
     Consolas, "Liberation Mono", "Courier New", monospace;
 
-  /* paper / surface ramp (3-step) */
+  /* ── Surface ramp ─────────────────────────────────────────────────────
+     Layered surfaces are the ONLY structural tool — the system draws no
+     lines: bg (canvas) → sidebar → panel → panel-raised, then the
+     component fills surface → surface-hover → surface-selected →
+     surface-active. The base layers are solid; the component fills are
+     alpha grays so one step reads identically over any base layer.
+     `paper-2` is the legacy alias for panel-raised. */
   --color-bg: #f2f0ed;
-  --color-panel: #e9e6e2;
+  --color-sidebar: #edeae5;
+  --color-panel: lab(98.26% 0 0);
+  --color-panel-raised: #f7f5f2;
   --color-paper-2: #ebe8e3;
+  --color-surface: rgba(20, 16, 8, 0.055);
+  --color-surface-hover: rgba(20, 16, 8, 0.085);
+  --color-surface-selected: rgba(184, 66, 15, 0.12);
+  --color-surface-active: rgba(20, 16, 8, 0.12);
 
-  /* ink ramp (3-step) */
+  /* ── Ink ramp ──────────────────────────────────────────────────────── */
   --color-ink: #0a0a0a;
   --color-ink-faint: #6b6865;
   --color-ink-ghost: #a3a09c;
-
-  /* structural lines */
-  --color-rule: #d8d5d0;
-  --color-rule-2: #e6e3df;
-
-  /* accent (single hero — hot orange) */
-  --color-accent: #ff5a1f;
+  --color-ink-disabled: #b8b4ae;
+
+  /* ── Border ramp ──────────────────────────────────────────────────────
+     The system draws no lines: rule/rule-2/rule-strong resolve to
+     transparent in both themes (legacy `border-rule*` utilities become
+     inert 1px transparent borders, so layout never shifts). Hierarchy is
+     carried by the surface fills above. The single exception is
+     rule-focus — the focus indicator on inputs and controls, which must
+     stay visible for accessibility. */
+  --color-rule: transparent;
+  --color-rule-2: transparent;
+  --color-rule-strong: transparent;
+  --color-rule-focus: rgba(184, 66, 15, 0.6);
+
+  /* The one structural stroke the system keeps: a VERY subtle edge on the
+     main workspace panels (the tab columns), so the floating panels
+     read against the canvas. Never used inside a panel. */
+  --color-edge: rgba(20, 16, 8, 0.08);
+
+  /* accent (single hero — burnt orange on cream, blue on dark) */
+  --color-accent: #b8420f;
   --color-accent-fg: #f2f0ed;
+  --color-accent-hover: #a53a0c;
+  --color-accent-muted: rgba(184, 66, 15, 0.1);
+  --color-accent-border: rgba(184, 66, 15, 0.35);
 
-  /* status */
-  --color-alert: #c43e1c;
+  /* status (each with a muted fill for tinted backgrounds) */
+  --color-alert: #ff0026;
+  --color-alert-muted: rgba(255, 0, 38, 0.08);
   --color-warn: #a87a00;
-
-  /* radii — only two are allowed */
+  --color-warn-muted: rgba(168, 122, 0, 0.12);
+  --color-ok: #356f3d;
+  --color-ok-muted: rgba(53, 111, 61, 0.12);
+
+  /* ── Radii ────────────────────────────────────────────────────────────
+     One radius everywhere: every step of the Tailwind scale resolves to
+     6px, so badges, buttons, cards, panels, and modals share the same
+     corner. Only `none` (main columns' outer frame edge cases) and `full`
+     (dots, round action buttons) differ. */
   --radius-none: 0px;
+  --radius-xs: 6px;
+  --radius-sm: 6px;
+  --radius-md: 6px;
+  --radius-lg: 6px;
+  --radius-xl: 6px;
   --radius-full: 9999px;
 
+  /* ── Elevation (the only two sanctioned shadows) ────────────────────── */
+  --shadow-raised:
+    0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 8px 24px rgba(0, 0, 0, 0.18);
+  --shadow-floating:
+    0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.28);
+
+  /* ── Motion ─────────────────────────────────────────────────────────── */
+  --ease-glide: cubic-bezier(0.2, 0.8, 0.2, 1);
+
   /* spacing scale (carried from the YAML) */
   --spacing-gutter: 24px;
   --spacing-section-x: 36px;
@@ -338,18 +444,41 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
   --spacing-content-max: 1216px;
 }
 
-/* dark theme: invert paper/ink and swap accent to electric blue */
 [data-theme="dark"] {
-  --color-bg: #111110;
-  --color-panel: #1a1916;
-  --color-paper-2: #1f1e1c;
-  --color-ink: #f2f0ed;
-  --color-ink-faint: #9c9893;
-  --color-ink-ghost: #5d5a55;
-  --color-rule: #2a2926;
-  --color-rule-2: #1f1e1c;
-  --color-accent: #3ea8ff;
-  --color-accent-fg: #111110;
+  /* Neutral grays derived from black — no blue cast in the base ramp. The
+     component fills (surface*) are white-alpha so a step reads identically
+     over any base layer; the ONLY chromatic surface is surface-selected,
+     the blue selection tint. Borders are gone: rule/rule-2/rule-strong
+     resolve to transparent, and hierarchy is carried entirely by fills. */
+  --color-bg: #0a0a0a;
+  --color-sidebar: #0e0e0e;
+  --color-panel: #111111;
+  --color-panel-raised: #171717;
+  --color-paper-2: #171717;
+  --color-surface: rgba(255, 255, 255, 0.055);
+  --color-surface-hover: rgba(255, 255, 255, 0.085);
+  --color-surface-selected: rgba(40, 168, 247, 0.14);
+  --color-surface-active: rgba(255, 255, 255, 0.12);
+  --color-ink: #ededed;
+  --color-ink-faint: #a6a6a6;
+  --color-ink-ghost: #6f6f6f;
+  --color-ink-disabled: #4d4d4d;
+  --color-rule: transparent;
+  --color-rule-2: transparent;
+  --color-rule-strong: transparent;
+  --color-rule-focus: rgba(40, 168, 247, 0.7);
+  --color-edge: rgba(255, 255, 255, 0.07);
+  --color-accent: #28a8f7;
+  --color-accent-fg: #070909;
+  --color-accent-hover: #46b6fa;
+  --color-accent-muted: rgba(40, 168, 247, 0.12);
+  --color-accent-border: rgba(40, 168, 247, 0.35);
+  --color-alert: #f05d68;
+  --color-alert-muted: rgba(240, 93, 104, 0.12);
+  --color-warn: #f5a524;
+  --color-warn-muted: rgba(245, 165, 36, 0.12);
+  --color-ok: #36c98f;
+  --color-ok-muted: rgba(54, 201, 143, 0.12);
 }
 
 @layer base {
@@ -388,11 +517,13 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
   ::-webkit-scrollbar-track {
     background: transparent;
   }
+  /* rule is transparent (no-lines system) — the thumb needs its own
+     visible alpha gray. */
   ::-webkit-scrollbar-thumb {
-    background: var(--color-rule);
+    background: color-mix(in oklab, var(--color-ink) 22%, transparent);
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--color-ink-ghost);
+    background: color-mix(in oklab, var(--color-ink) 38%, transparent);
   }
 }
 
@@ -428,12 +559,27 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
   animation: wiggle 3s ease-in-out infinite;
 }
 
-/* the one sanctioned shadow stack — used only for the "deal" stack
-   animation on language cards */
+/* transient shadow stack — used only for the "deal" stack animation on
+   language cards (default elevation goes through shadow-raised /
+   shadow-floating from the theme) */
 @utility deal-shadow {
   box-shadow: -2px 0 0 var(--color-rule),
     -16px 4px 36px -10px rgba(0, 0, 0, 0.22);
 }
+
+/* Function/tool-call card chrome — an accent-tinted raised surface (a soft
+   gradient wash over panel-raised, no border) so calls read as special
+   without any outline. Derived from the accent token, so it tints blue in
+   dark mode and burnt orange in light mode. */
+@utility fcall-chrome {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--color-accent) 7%, transparent),
+      color-mix(in oklab, var(--color-accent) 3%, transparent)
+    ),
+    var(--color-panel-raised);
+}
 ```
 
 ### `cn` helper
@@ -454,19 +600,32 @@ export function cn(...inputs: ClassValue[]) {
 
 ## 1. Philosophy — "iii Schematic"
 
-The app should feel like an **engineering document**, not a SaaS dashboard.
-
-- The page is a **drafting sheet**: cream paper, hairline ink rules,
-  monospace voice, an unflinching commitment to lowercase. Nothing is
-  rounded; everything sits on a 1px grid.
-- Color is rationed: the palette is essentially **black-on-cream**, broken
-  only by a single hot orange used for state, focus, and emphasis.
+The app should feel like an **engineering document**, not a SaaS dashboard —
+technical, precise, dense without feeling cramped, structured without
+looking boxed.
+
+- The page is built from **layered surfaces**: hierarchy comes from a
+  one-step background difference, full stop. The system draws **no lines**
+  — no outlines on controls, no dividers between rows or regions. Exactly
+  two strokes are sanctioned: the focus indicator (`rule-focus`
+  border/ring) on a focused control, and the very subtle `edge` frame
+  around the floating workspace panels.
+- Dark mode is a **first-class layered system** — neutral grays derived
+  from black (`#0a0a0a → #171717`, no blue cast) with white-alpha component
+  fills, not an inverted paper ramp.
+- One corner radius: **6px everywhere** (every Tailwind radius step
+  resolves to it); the shapes stay disciplined, not soft or
+  consumer-playful. Lowercase voice throughout.
+- Color is rationed: the palette is essentially **ink-on-surface**, broken
+  by a single accent (burnt orange on cream, electric blue on dark) reserved
+  for selected, focused, active, and live states.
 - The personality is **technical but unintimidating** — the same energy as a
   well-kept lab notebook or a hand-drawn architecture diagram. It must feel
   built by engineers, for engineers, and for the agents working alongside
   them.
 - Density is deliberate: spec sheets, code, traces, and console panels
-  coexist on the same surface without a hierarchy contest.
+  coexist on the same surface without a hierarchy contest. Trace
+  visualizations stay the most colorful area of the UI.
 
 ### Voice
 
@@ -478,21 +637,27 @@ The app should feel like an **engineering document**, not a SaaS dashboard.
 - The wordmark is pronounced *"three eye"* — every "i" stays lowercase.
 
 > If you removed all the type, the page should still read as a structured
-> document. Lines establish hierarchy before color does.
+> document. Surfaces establish hierarchy; color marks state. Lines never
+> appear.
 
 ---
 
-## 2. Typography — single typeface (Chivo Mono)
+## 2. Typography — two families (Geist + Geist Mono)
 
-Chivo Mono is wired to **both** `--font-sans` and `--font-mono` in the theme
-(see §0), so every default text node is monospaced. There is no secondary
-face in this design language.
+**Geist** (`--font-sans`) carries the UI: navigation, conversation titles,
+buttons, inputs, chat content, empty states, headings, labels. **Geist
+Mono** (`--font-mono`) carries everything technical: trace names, worker
+names, function names, IDs, timestamps, metrics, span labels, filter
+expressions, code-like values.
 
-**Rule:** every UI surface uses Chivo Mono (the default). Don't reach for a
-sans-serif or a second monospace stack — variety comes from weight, scale,
-case, and letter-spacing, not family.
+**Rule:** if a human wrote it, it's sans; if the machine produced it (or a
+machine will parse it), it's mono. Don't add a third family — variety comes
+from weight, scale, case, and letter-spacing, not more fonts. Chat and
+configuration surfaces remap incidental `.font-mono` chrome back to Geist
+(see the `.chat-surface` / `.configuration-surface` rules in `index.css`);
+function-trigger cards run Geist Mono throughout.
 
-Decorative ligatures are explicitly disabled in `@layer base`
+Decorative ligatures are explicitly disabled on mono surfaces
 (`liga 0, clig 0, calt 0, dlig 0`) to preserve the schematic feel.
 
 ### Size scale
@@ -527,56 +692,85 @@ Decorative ligatures are explicitly disabled in `@layer base`
 ## 3. Color tokens
 
 All tokens live in the `@theme` block in §0. Use the Tailwind utility
-(`bg-bg`, `text-ink-faint`, `text-accent`, `border-rule`, …) — **never** the
+(`bg-bg`, `text-ink-faint`, `text-accent`, `bg-surface`, …) — **never** the
 raw CSS variable.
 
-### Paper / surface (3-step neutral scale)
-
-| Token     | Use                                                  |
-| --------- | ---------------------------------------------------- |
-| `bg`      | Page (warm cream paper) — every default surface      |
-| `panel`   | Header strips, focused cards, code-block chrome      |
-| `paper-2` | Nested separation when `panel` would be too heavy    |
-
-### Ink (3-step contrast)
-
-| Token       | Use                                                |
-| ----------- | -------------------------------------------------- |
-| `ink`       | Primary type, wordmark, primary buttons, hairlines |
-| `ink-faint` | Body in muted contexts, captions, inactive nav     |
-| `ink-ghost` | Line numbers, placeholders, timestamps             |
-
-### Rules (the structural lines)
-
-| Token    | Use                                                          |
-| -------- | ------------------------------------------------------------ |
-| `rule`   | Default 1px borders — defines every container                |
-| `rule-2` | Nested separators (e.g. card head → body) when `rule` is too loud |
-
-### Accent — hot orange (single hero)
-
-`accent`, `accent-fg`. Reserved for: the active state, the live pulse, the
-keyword/return value in a code block, the `iii` highlight in a sentence, the
-focus underline on the email row, the orange `$` prompt. **Never** for body
-text or large fills.
+### Surface ramp (the depth axis)
+
+The base layers (`bg` → `panel-raised`) are solid neutral tones; the
+component fills (`surface*`) are **alpha grays**, so one step reads
+identically over any base layer. `surface-selected` is the only chromatic
+surface — the accent-tinted selection fill (blue in dark, burnt orange in
+light).
+
+| Token              | Use                                                        |
+| ------------------ | ---------------------------------------------------------- |
+| `bg`               | Application canvas — the deepest layer                     |
+| `sidebar`          | Left navigation/sidebar (one step off the canvas)          |
+| `panel`            | Main chat and traces columns                               |
+| `panel-raised`     | Composer, trace details, popovers, active tool cards       |
+| `paper-2`          | Legacy alias for `panel-raised` (kept for existing code)   |
+| `surface`          | Inputs, controls, pills, chips, secondary cards            |
+| `surface-hover`    | Hover state on rows, items, and ghost controls             |
+| `surface-selected` | Selected conversation, trace row, or list item (accent tint) |
+| `surface-active`   | Strong active/pressed state                                |
+
+### Ink (4-step contrast)
+
+| Token          | Use                                                |
+| -------------- | -------------------------------------------------- |
+| `ink`          | Primary type, wordmark, primary buttons            |
+| `ink-faint`    | Body in muted contexts, captions, inactive nav     |
+| `ink-ghost`    | Line numbers, placeholders, timestamps             |
+| `ink-disabled` | Disabled labels (paired with reduced opacity)      |
+
+### Rules (there are none)
+
+`rule`, `rule-2`, and `rule-strong` resolve to `transparent` in both
+themes. They exist only so legacy `border-rule*` / `divide-rule*`
+utilities stay inert (1px transparent — layout never shifts) instead of
+breaking. Never design with them.
+
+| Token         | Value        | Meaning                                       |
+| ------------- | ------------ | --------------------------------------------- |
+| `rule`        | transparent  | Legacy default border — draws nothing         |
+| `rule-2`      | transparent  | Legacy subtle divider — draws nothing         |
+| `rule-strong` | transparent  | Legacy emphasis border — draws nothing        |
+| `rule-focus`  | accent ~60–70% alpha | The interactive stroke: the focus indicator on inputs and controls |
+| `edge`        | ink ~7–8% alpha | The structural stroke: the VERY subtle frame around the floating workspace panels (the tab columns) — never used inside a panel |
+
+### Accent (single hero — burnt orange on cream, electric blue on dark)
+
+`accent`, `accent-fg`, `accent-hover`, `accent-muted` (10–12%-alpha fill),
+`accent-border` (35%-alpha, legacy — prefer `accent-muted` fills). Reserved
+for: selected navigation and segmented controls (`accent-muted` fill),
+focused inputs (`rule-focus`), active filters, live state, the selected
+conversation/trace (`surface-selected` fill), the primary technical action,
+the `$` prompt. **Never** for body text, large fills, or outlines.
 
 ### Status
 
-`alert`, `warn` — desaturated on purpose. Status is expressed through **text
-color + a small icon/stripe**, not full-color backgrounds.
+`alert`, `warn`, `ok` — each with a `-muted` 8–12%-alpha fill for tinted
+backgrounds. Status is expressed through **text color + a small icon/dot on
+a muted tinted fill**, never a full-saturation background and never a
+stripe or outline.
 
 | Token    | Use                                       |
 | -------- | ----------------------------------------- |
-| `accent` | live / running / success                  |
+| `accent` | live / running / focused / selected       |
+| `ok`     | success, completed calls, diff additions  |
 | `alert`  | error states (traces, status panels)      |
-| `warn`   | warning states                            |
+| `warn`   | warning states, pending approval          |
 
 ### Dark theme
 
-Override the same tokens inside a `[data-theme="dark"]` block (see §0). The
-ramp inverts (`#111110 → #1a1916 → #1f1e1c` for paper; `#f2f0ed → #9c9893 →
-#5d5a55` for ink) and the accent swaps to electric blue (`#3ea8ff`). Same
-structural logic — never collapses into pure black.
+Override the same tokens inside a `[data-theme="dark"]` block (see §0). Dark
+is a neutral gray ramp derived from black (`#0a0a0a → #0e0e0e → #111111 →
+#171717` — no blue cast), white-alpha component fills
+(`rgba(255,255,255,0.055 → 0.12)`), neutral light ink (`#ededed → #a6a6a6 →
+#6f6f6f`), and the accent swapped to electric blue (`#28a8f7`) — which also
+tints `surface-selected`. Same structural logic; the blue lives only in
+state, never in the grays.
 
 To follow the OS, set the attribute on load:
 
@@ -587,102 +781,141 @@ document.documentElement.dataset.theme = isDark ? 'dark' : 'light'
 
 ---
 
-## 4. The "lines define structure" rule (key composition pattern)
+## 4. The "surfaces, not borders" rule (key composition pattern)
+
+> **A one-step surface difference defines a region. The system draws no
+> lines — exactly two strokes are sanctioned: the focus ring, and the
+> `edge` frame around the floating workspace panels.**
+
+Structure comes from the layered surface ramp (§3): a new region means a new
+background step, never an outline and never a divider. Controls are
+alpha-gray fills; rows separate by their hover/selected fills; regions
+separate by base-layer steps; overlays separate by `panel-raised` +
+`shadow-floating`.
+
+Two strokes are allowed, each with one job:
 
-> **Borders define every container. Add a border before reaching for a
-> background fill.**
+1. **Focus** — a focused field swaps its (transparent) border to
+   `rule-focus` and gains a soft 3px accent ring; keyboard focus on
+   buttons uses the same `ring-rule-focus`.
+2. **Panel edges** — the main workspace panels (each
+   workspace-tab column) float on the canvas as
+   `rounded-sm border border-edge bg-panel` with 6px gutters; the `edge`
+   stroke is a VERY subtle ink-alpha frame that keeps a panel readable
+   against the canvas. It is never used inside a panel — interior
+   hierarchy stays fill-only.
 
-This is the inverse of a surface-stacking system: the schematic is held
-together by 1px ink rules. A new line means a new container. Cards, cells,
-panels, code blocks, and inputs are all defined by `border border-rule` — not
-by background steps.
+Nothing else in the chrome may draw a line. (Data visualizations are
+exempt: charts may draw connector and grid lines with explicit alpha-ink
+fills, e.g. `bg-ink/15` elbows and `bg-ink/8` time-grid guides in the
+trace timeline.)
 
 ### Pattern
 
 ```tsx
-<div className="border border-rule bg-bg">
-  <div className="px-3.5 py-2.5 border-b border-rule bg-panel font-mono text-[12px] uppercase tracking-[0.18em] text-ink-faint">
+<div className="rounded-md bg-surface overflow-hidden">
+  <div className="px-3.5 py-2.5 bg-panel-raised font-mono text-[12px] uppercase tracking-[0.18em] text-ink-faint">
     title
   </div>
-  <div className="p-7">{/* body */}</div>
+  <div className="p-5">{/* body */}</div>
 </div>
 ```
 
-The single tonal step (`bg → panel`) on the header strip is the only "lift"
-allowed in default states (see §5).
+The header strip is one surface step off the body — that difference IS the
+separator. No divider, no outer outline.
 
-### Allowed accents on top of borders
+### Selection and severity
 
-These are not extra borders, they are accents on the existing 1px grid:
+- Selected row, card, conversation, or trace: `bg-surface-selected` — the
+  accent-tinted fill. **No left rail, no outline.**
+- Active segment / tab / filter: `bg-accent-muted` fill.
+- Row severity: the status's `-muted` tinted fill (e.g. `bg-alert-muted`)
+  plus the status text color and dot — no stripe.
+- Legacy `divide-y divide-rule-2` / `border-b border-rule-2` classes are
+  inert (transparent) — don't add new ones.
 
-- `border-l-2 border-accent` rail on a focused `WorkerCard` (see §10).
-- `divide-x divide-rule` for inline grids (e.g. a metrics strip).
-- The "feature grid" trick: draw 1px rules on the **top + left** of the grid
-  and the **right + bottom** of each cell. This produces a single,
-  perfectly-aligned grid of borders with no doubled lines.
+### Shadows
 
-### The single-shadow exception
+Two sanctioned elevation shadows live in the theme: `shadow-raised` (raised
+cards — composer, trace detail) and `shadow-floating` (popovers, dialogs,
+dropdowns, tooltips). `.deal-shadow` remains a transient animation cue on
+the language-card stack. No heavy glows — the only glow is the live
+`pulse-dot`.
 
-The system carries no default shadows. The **one** allowed transient shadow
-is `.deal-shadow` (defined in §0), used only on the language-card stack
-when a card slides on top of another — a deliberate tactile cue, not a
-default elevation.
-
-**When in doubt:** add a 1px `border-rule`. Don't reach for a background fill
-or a shadow.
+**When in doubt:** step the background one level. Never reach for a border.
 
 ---
 
 ## 5. Surfaces & elevation
 
-The 3-step ramp is the only tonal tool. Think of it as a depth axis with one
-step of contrast — borders do the rest.
+The surface ramp is the primary tonal tool. Think of it as a depth axis:
+every step up reads as "closer" without a single stroke.
 
 ```
-bg            page (cream paper)
- └─ panel        header strips, focused cards, code-block chrome
-     └─ paper-2     nested separation when needed
+bg                  application canvas
+ └─ sidebar            left navigation
+ └─ panel              main chat / traces columns
+     └─ panel-raised      composer, trace detail, popovers, tool cards
+         └─ surface          inputs, controls, pills, secondary cards
+             └─ surface-hover     hover
+             └─ surface-selected  selected row / trace / conversation
+             └─ surface-active    pressed / segmented-control selection
 ```
 
-Most cards/panels should accept a `focused` (or `variant`) prop that lifts
-the body from `bg` to `panel`. That single tonal step is the only "lift"
-allowed in default states.
+Interactive containers walk the state sub-ramp (`surface →
+surface-hover → surface-selected → surface-active`); nothing about their
+edges ever changes except the focus ring.
 
 ### Where elevation actually shows up
 
-1. **Tonal layering** — the 3-step ramp above.
-2. **Hairline rules** — 1px lines in `rule` and `rule-2` do the work that
-   shadows would do in other systems.
-3. **Reserved transient shadow** — the `.deal-shadow` utility, used only on
-   the language-card stack (`HelloCard` flow mode in §10).
+1. **Tonal layering** — the ramp above; a one-step difference is the only
+   separator between regions. The alpha-gray component fills compose over
+   any base layer.
+2. **Sanctioned shadows** — `shadow-raised` on raised in-flow cards
+   (composer, expanded trace detail) and `shadow-floating` on overlays
+   (dropdowns, popovers, dialogs, tooltips, hover cards). Both carry a 1px
+   white inset highlight so raised surfaces catch light in dark mode.
+3. **Accent-tinted chrome** — the `.fcall-chrome` utility (§0): a soft
+   accent gradient wash over `panel-raised` (no border), reserved for
+   function/tool-call cards so agent actions read as special.
 4. **Pulse + glow** — the live state uses `.pulse-dot` (1.6s expanding
    `box-shadow` ring) on a 6px accent dot. This is the only "glow" the
    system allows.
 
-Dark mode keeps the same rule-driven hierarchy — the ramp flips but never
-collapses into pure black.
+Dark mode keeps the same surface-driven hierarchy — neutral grays stepping
+up from black. The only visible edge anywhere is the workspace panels'
+`edge` frame (§4).
 
 ---
 
 ## 6. Radii & shape
 
-Rectilinear sharpness, period. The system is built from squares and 1px
-strokes; the only curves are functional ones (status dots, glyph circles).
+**One radius: 6px, globally.** Every step of the Tailwind scale
+(`rounded-xs` through `rounded-xl`) resolves to 6px, so badges, chips,
+buttons, inputs, sidebar rows, cards, tool/function-call cards, popovers,
+dropdowns, dialogs, the composer, and the floating workspace panels all
+share the same corner. There is no per-component scale to choose from —
+write whichever step reads naturally (`rounded-sm` is the conventional
+spelling) and it renders 6px.
 
-| Token          | Value   | Used for                                        |
-| -------------- | ------- | ----------------------------------------------- |
-| `rounded-none` | 0px     | **Default for everything** (containers, buttons, cards, inputs, code blocks, badges, panels) |
-| `rounded-full` | 9999px  | Status dots and glyph circles **only**          |
+| Token                 | Value  | Used for                                 |
+| --------------------- | ------ | ---------------------------------------- |
+| `rounded-none`        | 0px    | Full-bleed edge cases only               |
+| `rounded-xs` … `-xl`  | 6px    | Everything — one corner everywhere       |
+| `rounded-full`        | 9999px | Status dots, pills, round action buttons |
 
-Never reach for `rounded-sm`, `rounded-md`, `rounded-lg`, or anything in
-between. There is no "soft" variant — the YAML aliases `sm/md/lg` to `0px`
-on purpose.
+Don't invent in-between values, and don't reach for `rounded-full` on
+anything that isn't genuinely circular.
 
 ### Stroke weight
 
-- 1px is the default for all UI borders.
-- SVG diagrams use 1–1.25px strokes; thicker strokes (1.25px `accent`) are
-  reserved for emphasized worker connections.
+- UI chrome draws no strokes, with two exceptions: the focus indicator — a
+  1px `rule-focus` border (inputs) or a 2px `ring-rule-focus` (buttons) —
+  and the 1px `edge` frame around the floating workspace panels (§4).
+- SVG **data** diagrams use 1–1.25px strokes; thicker strokes (1.25px
+  `accent`) are reserved for emphasized worker connections. Charts draw
+  their connectors/grids with explicit alpha-ink fills (`bg-ink/15`,
+  `bg-ink/8`).
 - The wordmark is six rectangles (three "i"s, each a stem + a tittle), all
   sharing the same square unit. The mark is the design system in miniature:
   identical units, no curves, deliberate negative space.
@@ -691,24 +924,37 @@ on purpose.
 
 ## 7. Spacing & layout
 
-The page is a vertical sheet, max 1200px, sitting on cream paper with a 1px
-ink-rule outer border. There is no hero card, no rounded container — the
-entire site reads as one continuous spec sheet.
+### Console workspace
+
+The console shell is a set of **floating panels over the canvas**: the
+header holds server-persisted closable tabs (stored in the `console`
+configuration entry under `workspace.tabs` — model in
+`lib/workspace-tabs.ts`), and each tab shows one or two screens (any page
+or the chat view) as equal columns; an unattached column renders an
+attach affordance instead of a page. Each column renders as `rounded-sm border border-edge bg-panel` with 6px
+gutters between panels and against the viewport, so the canvas shows
+through as the seam. That gutter + edge frame is the entire column
+chrome; panels draw no other lines.
+
+### Sheet pages
+
+The page is a vertical sheet, max 1200px, sitting on the canvas surface.
+There is no hero card — the entire site reads as one continuous spec sheet.
 
-- **Sheet:** `min(1200px, 100%)` centered, 1px outer rule (see `Sheet` in
-  §10).
+- **Sheet:** `min(1200px, 100%)` centered (see `Sheet` in §10). The sheet
+  itself is unbordered; the surface step against the canvas defines it.
 - **Sticky nav:** `py-4.5` vertical padding, collapses to `py-2.5` on
-  scroll. Bordered bottom only.
+  scroll. No border — it reads as chrome by sitting on its own surface.
 - **Section padding:** `px-9` on desktop (36px), `px-4.5` on tablet (18px),
   `px-3.5` on small mobile (14px). Vertical: `py-20` to `py-24` (80–96px)
   between major sections.
 - **Hero grid:** Two equal columns (`1fr 1fr`) with a 64px gap on desktop;
   collapses to a single column under 880px.
-- **Feature grids:** Always **3-up** on desktop (`grid-cols-3`), divided by
-  1px rules drawn on the **top + left** of the grid and the **right +
-  bottom** of each cell.
-- **Card padding:** 18–28px internal. Cards never carry shadows in their
-  default state.
+- **Feature grids:** Always **3-up** on desktop (`grid-cols-3`), each cell
+  a `rounded-md bg-surface` card separated by grid `gap` — never by drawn
+  rules.
+- **Card padding:** 12px compact, 20–24px default. In-flow cards carry no
+  shadow unless raised (`shadow-raised`); overlays use `shadow-floating`.
 - **Density rhythm:** 4/8 micro-scale for inline gaps (icon-to-text,
   dot-to-label), 12/14/16 for component padding, 24/28 for card padding, 36
   for section gutters, 64–96 for section breathing room.
@@ -739,23 +985,26 @@ Reach for these to keep the engineering-document feel consistent:
 
 ## 9. Status & semantics
 
-`StatusPanel` (§10) is the canonical status display — bordered, monospaced,
-icon + headline + detail. The body fill stays `bg` in every variant; only
-the chrome (border + icon + headline) changes.
+`StatusPanel` (§10) is the canonical status display — a rounded row on a
+muted tinted fill, monospaced, icon + headline + detail. No stripe, no
+outline in any variant; the tint + icon + headline color carry the
+severity.
 
-| Variant     | Border + icon token | Body fill |
-| ----------- | ------------------- | --------- |
-| `v-info`    | `rule` (ink icon)   | `bg`      |
-| `v-success` | `accent`            | `bg`      |
-| `v-warn`    | `warn`              | `bg`      |
-| `v-alert`   | `alert`             | `bg`      |
+| Variant     | Icon + headline | Body fill     |
+| ----------- | --------------- | ------------- |
+| `v-info`    | `ink`           | `surface`     |
+| `v-success` | `ok`            | `ok-muted`    |
+| `v-warn`    | `warn`          | `warn-muted`  |
+| `v-alert`   | `alert`         | `alert-muted` |
 
-**In tables and traces:** express row severity with a left-edge `border-l-2`
-stripe plus a faint tinted background (e.g. `bg-alert/5`). Never with a
-full ring or a solid status background. See `Trace` (§10).
+**In tables and traces:** the same recipe — the status's `-muted` tinted
+background plus its text color and dot. Never a stripe, ring, or solid
+status background. See `Trace` (§10).
 
-For inline "live" emphasis, pair a `StatusDot` with the `pulse-dot`
-utility — the only sanctioned glow.
+**Dot semantics:** green (`ok`) means completed; blue (`accent`) is reserved
+for live/running (animated) and selected states; `warn` for pending; `alert`
+for failed. For inline "live" emphasis, pair a `StatusDot` with the
+`pulse-dot` utility — the only sanctioned glow.
 
 ---
 
@@ -820,20 +1069,22 @@ export function Caret({ className }: CaretProps) {
 
 ### `StatusDot`
 
-6px circle. The only place `rounded-full` is allowed besides glyphs.
-Optional `.pulse-dot` glow for "live" emphasis.
+6px circle. Optional `.pulse-dot` glow for "live" emphasis. Tone semantics
+per §9: `ok` = completed, `accent` = live/selected, `warn` = pending,
+`alert` = failed.
 
 ```tsx
 import * as React from 'react'
 import { cn } from '@/lib/utils'
 
-type DotTone = 'accent' | 'alert' | 'warn' | 'ink'
+type DotTone = 'accent' | 'alert' | 'warn' | 'ink' | 'ok'
 
 const dotTone: Record<DotTone, string> = {
   accent: 'bg-accent',
   alert: 'bg-alert',
   warn: 'bg-warn',
   ink: 'bg-ink',
+  ok: 'bg-ok',
 }
 
 interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -864,12 +1115,14 @@ export function StatusDot({
 
 ### `Button`
 
-Variants: `primary` (ink fill, hover inverts to outlined `bg`), `ghost`
-(transparent → solid ink on hover), `pill` (compact nav button), `icon`
-(30×30 rule-bordered), `terminal` (full-width row with `$` prompt + command
-+ optional copy), `wiggle` (primary + corner badge slot + `.wiggle`). Sizes:
-`sm` `md` `lg` `icon`. Depends on `class-variance-authority` and
-`@radix-ui/react-slot`.
+Variants: `primary` (ink fill, 6px radius — reads as a light chip in dark
+mode), `ghost` (borderless, faint text → `surface-hover` fill on hover),
+`pill` (compact borderless `surface` chip), `icon` (30×30 borderless,
+`surface-hover` on hover), `terminal` (full-width borderless `surface` row
+with `$` prompt + command + optional copy), `wiggle` (primary + corner badge
+slot + `.wiggle`). Sizes: `sm` `md` `lg` `icon`. Focus is a 2px
+`rule-focus` ring — the only stroke a button ever shows. Depends on
+`class-variance-authority` and `@radix-ui/react-slot`.
 
 ```tsx
 import * as React from 'react'
@@ -878,22 +1131,22 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-x-2 whitespace-nowrap font-mono lowercase rounded-none transition-[background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-40 select-none',
+  'inline-flex items-center justify-center gap-x-2 whitespace-nowrap font-mono lowercase rounded-sm transition-[background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus disabled:pointer-events-none disabled:opacity-40 select-none',
   {
     variants: {
       variant: {
         primary:
-          'bg-ink text-bg border border-ink hover:bg-bg hover:text-ink',
+          'bg-ink text-bg border border-transparent hover:bg-ink/90 rounded-md',
         ghost:
-          'bg-transparent text-ink border border-transparent hover:bg-ink hover:text-bg',
+          'bg-transparent text-ink-faint border border-transparent hover:bg-surface-hover hover:text-ink',
         pill:
-          'bg-bg text-ink border border-ink hover:bg-ink hover:text-bg',
+          'bg-surface text-ink border border-transparent hover:bg-surface-hover',
         icon:
-          'bg-bg text-ink-faint border border-rule hover:text-ink',
+          'bg-transparent text-ink-faint border border-transparent hover:bg-surface-hover hover:text-ink',
         terminal:
-          'bg-bg text-ink border border-rule justify-start',
+          'bg-surface text-ink border border-transparent justify-start hover:bg-surface-hover',
         wiggle:
-          'wiggle bg-ink text-bg border border-ink hover:bg-bg hover:text-ink relative',
+          'wiggle bg-ink text-bg border border-transparent hover:bg-ink/90 rounded-md relative',
       },
       size: {
         sm: 'h-8 px-3 text-[13px]',
@@ -937,8 +1190,8 @@ export { buttonVariants }
 ### `StatusPanel`
 
 A row component for system messages: 18px icon slot, 13px Semi-Bold
-headline, 12px ink-faint detail. Variants tint the **border + icon +
-headline only** — body fill stays `bg`.
+headline, 12px ink-faint detail. Variants are a **muted tinted fill** —
+no stripe, no outline (§9).
 
 ```tsx
 import * as React from 'react'
@@ -948,25 +1201,25 @@ export type StatusVariant = 'info' | 'success' | 'warn' | 'alert'
 
 const variantTone: Record<
   StatusVariant,
-  { border: string; icon: string; headline: string }
+  { fill: string; icon: string; headline: string }
 > = {
   info: {
-    border: 'border-rule',
+    fill: 'bg-surface',
     icon: 'text-ink',
     headline: 'text-ink',
   },
   success: {
-    border: 'border-accent',
-    icon: 'text-accent',
-    headline: 'text-accent',
+    fill: 'bg-ok-muted',
+    icon: 'text-ok',
+    headline: 'text-ok',
   },
   warn: {
-    border: 'border-warn',
+    fill: 'bg-warn-muted',
     icon: 'text-warn',
     headline: 'text-warn',
   },
   alert: {
-    border: 'border-alert',
+    fill: 'bg-alert-muted',
     icon: 'text-alert',
     headline: 'text-alert',
   },
@@ -991,8 +1244,8 @@ export function StatusPanel({
   return (
     <div
       className={cn(
-        'flex items-start gap-x-3 border bg-bg px-3.5 py-3',
-        tone.border,
+        'flex items-start gap-x-3 rounded-md px-3.5 py-3',
+        tone.fill,
         className,
       )}
     >
@@ -1026,10 +1279,11 @@ export function StatusPanel({
 
 ### `CodeBlock`
 
-`bg` fill, 1px `rule` border, monospace at 12.5px / line-height 1.55. Light
-syntax tinting: comments italic-ghost, strings in `accent`, keywords
-bold-ink, numbers in `alert`. The accent orange is reserved for **string
-literals and the active call return**, not arbitrary keywords.
+A `bg` well — the canvas tone punching through the surface it sits on, no
+border — monospace at 12.5px / line-height 1.55. Light syntax tinting:
+comments italic-ghost, strings in `accent`, keywords bold-ink, numbers in
+`alert`. The accent orange is reserved for **string literals and the active
+call return**, not arbitrary keywords.
 
 ```tsx
 import * as React from 'react'
@@ -1043,7 +1297,7 @@ export function CodeBlock({ className, children, ...props }: CodeBlockProps) {
   return (
     <pre
       className={cn(
-        'border border-rule bg-bg overflow-x-auto px-5 py-4 font-mono text-[12.5px] leading-[1.55] text-ink',
+        'rounded-sm bg-bg overflow-x-auto px-5 py-4 font-mono text-[12.5px] leading-[1.55] text-ink',
         className,
       )}
       {...props}
@@ -1056,8 +1310,9 @@ export function CodeBlock({ className, children, ...props }: CodeBlockProps) {
 
 ### `Terminal` & `TerminalRow`
 
-Header strip in `panel` with a label-caps title; body in `bg` with an orange
-`$` prompt, ink command, and an animated 6×13 ink caret.
+Header strip in `panel-raised` with a label-caps title; `surface` body with
+an orange `$` prompt, ink command, and an animated 6×13 ink caret. The
+head/body surface step is the separator — no divider.
 
 ```tsx
 import * as React from 'react'
@@ -1073,9 +1328,9 @@ interface TerminalProps {
 
 export function Terminal({ title, children, className }: TerminalProps) {
   return (
-    <div className={cn('border border-rule bg-bg', className)}>
+    <div className={cn('rounded-md bg-surface overflow-hidden', className)}>
       {title ? (
-        <div className="bg-panel px-3.5 py-2 border-b border-rule font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
+        <div className="bg-panel-raised px-3.5 py-2 font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
           {title}
         </div>
       ) : null}
@@ -1108,8 +1363,9 @@ export function TerminalRow({
 ### `Trace`
 
 Header strip + a list of trace rows with a `StatusDot`, op label, duration,
-and a label-caps status. A waterfall of horizontal bars follows: `rule-2`
-background, `ink` fill, `alert` fill for error spans.
+and a label-caps status. A waterfall of horizontal bars follows: `surface`
+track, `ink` fill, `alert` fill for error spans. Rows separate by spacing —
+no dividers.
 
 > `TraceStatus` is the consumer's own domain type. The shape assumed here is
 > `{ id, op, durationMs, status, startMs?, spanMs? }`. Replace with whatever
@@ -1140,9 +1396,9 @@ interface TraceProps {
 
 const statusTone: Record<
   TraceStatus,
-  { dot: 'accent' | 'warn' | 'alert'; label: string; bar: string }
+  { dot: 'ok' | 'warn' | 'alert'; label: string; bar: string }
 > = {
-  ok: { dot: 'accent', label: 'text-accent', bar: 'bg-ink' },
+  ok: { dot: 'ok', label: 'text-ok', bar: 'bg-ink' },
   warn: { dot: 'warn', label: 'text-warn', bar: 'bg-warn' },
   err: { dot: 'alert', label: 'text-alert', bar: 'bg-alert' },
 }
@@ -1154,11 +1410,11 @@ export function Trace({ title, rows, totalMs, className }: TraceProps) {
       ...rows.map((r) => (r.startMs ?? 0) + (r.spanMs ?? r.durationMs)),
     )
   return (
-    <div className={cn('border border-rule bg-bg', className)}>
-      <div className="bg-panel px-3.5 py-2 border-b border-rule font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
+    <div className={cn('rounded-md bg-surface overflow-hidden', className)}>
+      <div className="bg-panel-raised px-3.5 py-2 font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
         {title}
       </div>
-      <ul className="divide-y divide-rule-2">
+      <ul>
         {rows.map((row) => {
           const tone = statusTone[row.status]
           const start = ((row.startMs ?? 0) / span) * 100
@@ -1181,7 +1437,7 @@ export function Trace({ title, rows, totalMs, className }: TraceProps) {
               >
                 {row.status}
               </span>
-              <div className="col-span-4 mt-1 h-1 bg-rule-2 relative">
+              <div className="col-span-4 mt-1 h-1 bg-surface relative">
                 <div
                   className={cn('absolute top-0 h-full', tone.bar)}
                   style={{ left: `${start}%`, width: `${width}%` }}
@@ -1198,9 +1454,10 @@ export function Trace({ title, rows, totalMs, className }: TraceProps) {
 
 ### `Cell`
 
-A grid-bordered cell — the universal container for short prose blocks
-(features, hellos, pull-quotes). 28px padding, `bg` fill, optional 16px
-Semi-Bold ink title, 13px ink-faint body capped at ~34ch.
+The universal container for short prose blocks (features, hellos,
+pull-quotes, empty states): a borderless `surface` card with a 6px radius
+and 20px padding, optional 16px Semi-Bold ink title, 13px ink-faint body
+capped at ~34ch.
 
 ```tsx
 import * as React from 'react'
@@ -1214,7 +1471,7 @@ interface CellProps {
 
 export function Cell({ title, children, className }: CellProps) {
   return (
-    <div className={cn('border border-rule bg-bg p-7', className)}>
+    <div className={cn('rounded-md bg-surface p-5', className)}>
       {title ? (
         <div className="font-mono text-[16px] font-semibold tracking-[-0.01em] text-ink mb-3 lowercase">
           {title}
@@ -1232,8 +1489,8 @@ export function Cell({ title, children, className }: CellProps) {
 
 400px-wide ticker card with a name + version row, description, a
 `panel`-tinted command block, and a footer with a kind tag and check icon.
-Focused state switches body fill from `bg` to `panel` and grows a
-`border-l-2 border-l-accent` rail on the left edge.
+Focused state switches the body fill from `surface` to `surface-selected`
+(the accent tint) — no rail, no outline.
 
 ```tsx
 import * as React from 'react'
@@ -1261,12 +1518,12 @@ export function WorkerCard({
   return (
     <article
       className={cn(
-        'w-[400px] border border-rule transition-colors',
-        focused ? 'bg-panel border-l-2 border-l-accent' : 'bg-bg',
+        'w-[400px] rounded-md overflow-hidden transition-colors',
+        focused ? 'bg-surface-selected' : 'bg-surface',
         className,
       )}
     >
-      <header className="flex items-center justify-between px-4 py-3 border-b border-rule-2">
+      <header className="flex items-center justify-between px-4 py-3">
         <div className="font-mono text-[16px] font-semibold lowercase text-ink">
           {name}
         </div>
@@ -1277,10 +1534,10 @@ export function WorkerCard({
       <div className="px-4 py-3 font-mono text-[13px] leading-[1.7] text-ink-faint">
         {description}
       </div>
-      <div className="bg-panel font-mono text-[12.5px] text-ink px-4 py-2 border-t border-rule-2">
+      <div className="bg-panel font-mono text-[12.5px] text-ink px-4 py-2">
         {command}
       </div>
-      <footer className="flex items-center justify-between px-4 py-2 border-t border-rule-2">
+      <footer className="flex items-center justify-between px-4 py-2">
         <span className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
           {kind}
         </span>
@@ -1326,12 +1583,12 @@ export function HelloCard({ items, flow, className }: HelloCardProps) {
           <div
             key={item.id}
             className={cn(
-              'border border-rule bg-bg',
+              'rounded-md bg-panel-raised overflow-hidden',
               isUnder && 'absolute inset-x-0 -z-10 deal-shadow',
             )}
             style={isUnder ? { top: `${idx * 120}px` } : undefined}
           >
-            <header className="flex items-center justify-between px-4 py-2 border-b border-rule-2 bg-panel font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
+            <header className="flex items-center justify-between px-4 py-2 bg-panel font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
               <span>{item.language}</span>
               <span className="text-ink-ghost tabular-nums">
                 step {item.step}
@@ -1350,9 +1607,9 @@ export function HelloCard({ items, flow, className }: HelloCardProps) {
 
 ### `EmailRow`
 
-No border, no fill — just a 1px ink underline that switches to `accent` on
-focus. The submit arrow lives inside the row, right-aligned. Helper text
-below is label-caps in `ink-ghost`.
+The standard input recipe: a rounded `surface` fill whose only stroke is
+the `rule-focus` underline while focused. The submit arrow lives inside the
+row, right-aligned. Helper text below is label-caps in `ink-ghost`.
 
 ```tsx
 import * as React from 'react'
@@ -1372,7 +1629,7 @@ export function EmailRow({
 }: EmailRowProps) {
   return (
     <form className={cn('flex flex-col gap-y-2', className)} {...formProps}>
-      <div className="flex items-center gap-x-2 border-b border-ink focus-within:border-accent transition-colors">
+      <div className="flex items-center gap-x-2 rounded-sm bg-surface px-3 border-b border-transparent focus-within:border-rule-focus transition-colors">
         <input
           type="email"
           {...inputProps}
@@ -1442,10 +1699,9 @@ export function SearchField({
 
 ### `ModeToggle`
 
-Two-up segmented control with a 1px `rule` border and 2px internal padding.
-Active button: solid `ink` fill, `bg` text. Inactive: transparent,
-`ink-faint` text. Joined left-to-right with internal 1px dividers when more
-than two options are passed.
+Compact segmented control on a `surface` track (no border, 6px radius, 2px
+internal padding). Active segment: `accent-muted` fill (the selection
+tint), `ink` text, 6px radius. Inactive: transparent, `ink-faint` text.
 
 ```tsx
 import * as React from 'react'
@@ -1472,7 +1728,10 @@ export function ModeToggle<T extends string>({
   return (
     <div
       role="tablist"
-      className={cn('inline-flex border border-rule p-[2px]', className)}
+      className={cn(
+        'inline-flex rounded-sm bg-surface p-[2px] gap-[2px]',
+        className,
+      )}
     >
       {options.map((opt) => {
         const active = opt.value === value
@@ -1484,9 +1743,9 @@ export function ModeToggle<T extends string>({
             aria-pressed={active}
             onClick={() => onChange(opt.value)}
             className={cn(
-              'font-mono text-[13px] px-3 py-1 transition-colors lowercase',
+              'font-mono text-[13px] px-3 py-1 rounded-xs transition-colors lowercase',
               active
-                ? 'bg-ink text-bg'
+                ? 'bg-accent-muted text-ink'
                 : 'bg-transparent text-ink-faint hover:text-ink',
             )}
           >
@@ -1501,7 +1760,7 @@ export function ModeToggle<T extends string>({
 
 ### `NumericBadge`
 
-16px tall, 4px horizontal padding, `accent` fill on a `bg` border. Sits on
+16px tall, 4px horizontal padding, `accent` fill, 6px radius. Sits on
 the top-right corner of a CTA to indicate count or unread.
 
 ```tsx
@@ -1520,7 +1779,7 @@ export function NumericBadge({
   return (
     <span
       className={cn(
-        'inline-flex items-center justify-center bg-accent text-bg font-mono text-[11px] font-medium uppercase tracking-[0.06em] px-1 h-4 tabular-nums border border-bg',
+        'inline-flex items-center justify-center rounded-xs bg-accent text-accent-fg font-mono text-[11px] font-medium uppercase tracking-[0.06em] px-1 h-4 tabular-nums',
         className,
       )}
       {...props}
@@ -1534,7 +1793,8 @@ export function NumericBadge({
 ### `Sheet` & `PageHeader`
 
 `Sheet` is the standard page-level wrapper — `min(1200px, 100%)`, centered,
-1px outer rule. `PageHeader` carries an `eyebrow` (rendered through
+defined by its surface against the canvas (no outer rule). `PageHeader`
+carries an `eyebrow` (rendered through
 `Prompt`), a `title` (display-hero or headline-section), an optional
 description in `ink-faint`, and an `actions` slot on the right.
 
@@ -1552,7 +1812,7 @@ export function Sheet({ children, className }: SheetProps) {
   return (
     <div
       className={cn(
-        'mx-auto w-full max-w-[1200px] border-x border-rule min-h-screen bg-bg',
+        'mx-auto w-full max-w-[1200px] min-h-screen bg-bg',
         className,
       )}
     >
@@ -1614,51 +1874,66 @@ export function PageHeader({
 
 - Keep every text element **lowercase**, including headlines and buttons.
   The only uppercase text is the `label-caps-*` styles with explicit
-  tracking.
-- Lean on **1px hairline rules** to define structure. Add a border before
-  reaching for a background fill.
-- **Ration the orange accent.** One accent moment per visible region — the
-  rest is ink, faint, and ghost.
-- Use the **`panel` tone** for headers and focused states. It is the only
-  "elevation" the system permits.
+  tracking — used sparingly for small section labels.
+- Lean on **layered surfaces** to define structure — a one-step background
+  difference is the only separator. The sole visible stroke anywhere in the
+  chrome is the focus indicator (`rule-focus`).
+- **Ration the accent** (burnt orange on cream, electric blue on dark) to
+  selected, focused, active, and live states. One accent moment per visible
+  region — the rest is ink, faint, and ghost.
+- Mark selection with the **`surface-selected` accent-tinted fill** — the
+  canonical "you are here" signal. No rails, no outlines.
+- Use the **one 6px radius everywhere** (§6) — every Tailwind radius step
+  resolves to it, so there is no per-component choice to make.
 - Keep the `iii` wordmark in lowercase, with all six rectangles in `ink`
   (never colored).
-- Use **Chivo Mono for everything**, including body copy. Switching faces
-  breaks the schematic.
-- Use the **Tailwind utility** (`bg-bg`, `text-ink-faint`, `border-rule`,
+- Use **Geist for UI text and Geist Mono for technical data** (trace names,
+  IDs, timestamps, metrics, code). Two families, never a third.
+- Use **Lucide icons** (`lucide-react`) for every UI icon — checkmarks,
+  carets, funnels, status glyphs. One icon family keeps stroke weight and
+  optical size consistent across the console.
+- Use the **Tailwind utility** (`bg-surface`, `text-ink-faint`,
   `text-accent`) — never the raw CSS variable.
 - Use **container queries** (`@container`, `@3xl:`, `@4xl:`) for panel-level
   responsiveness. Pages set `@container` and grids split with `@3xl:`.
 - Use **`tabular-nums`** on every number, timestamp, and KPI.
-- Use **Lucide icons** (`lucide-react`) for every UI icon — checkmarks,
-  carets, funnels, status glyphs. One icon family keeps stroke weight and
-  optical size consistent across the console.
+- Keep motion minimal and functional: 100–220ms, `--ease-glide`, honoring
+  `prefers-reduced-motion`.
 
 **Don't**
 
-- Don't introduce **rounded corners** on containers, buttons, inputs, or
-  cards. Reserve `rounded-full` for true symbols (dots, glyphs).
-- Don't add **drop shadows** for default elevation. The `.deal-shadow`
-  stack-card animation is the only sanctioned shadow.
-- Don't use the orange accent for **body text, large fills, or decorative
+- Don't draw **any border or divider for structure or selection** — no
+  outlines on controls, no row dividers, no section rules, no left rails.
+  The chrome may show exactly two lines: the focus indicator
+  (`rule-focus`) and the workspace panels' `edge` frame (§4); charts may
+  draw data lines with explicit alpha-ink fills (`bg-ink/15`, `bg-ink/8`).
+- Don't use `edge` **inside** a panel — it frames the floating workspace
+  panels only; interior hierarchy stays fill-only.
+- Don't deviate from the **single 6px radius** — no in-between values, and
+  `rounded-full` only on genuinely circular elements.
+- Don't add **drop shadows** outside the two theme tokens (`shadow-raised`
+  in-flow, `shadow-floating` for overlays) and the transient `.deal-shadow`.
+  No heavy glows — `pulse-dot` is the only glow.
+- Don't use the accent for **body text, large fills, or decorative
   blocks.** It loses meaning the moment it stops being rare.
 - Don't mix proportional and tabular figures. Numbers are always tabular
   monospace.
-- Don't use **gradients** or color stops anywhere. The system is flat by
-  design.
+- Don't use **gradients** decoratively. The two sanctioned exceptions are
+  the `.fcall-chrome` accent wash on function-call cards and the
+  `.thinking-shimmer` streaming-text mask.
 - Don't capitalize a sentence to "fix" a heading — rewrite it instead.
 - Don't stack two headings of the same scale. Headlines are always paired
   with an ink-faint continuation, never another headline.
-- Don't add a **second typeface**, even for code or numbers. The
-  single-face constraint is load-bearing.
-- Don't paint **full-color status backgrounds** — use text color plus a
-  small icon, dot, or left stripe.
-- Don't introduce **viewport breakpoints** for panel layouts — use
-  container queries.
+- Don't set technical data (IDs, metrics, span labels) in the sans face —
+  and don't drop mono below 11px.
 - Don't hand-write **inline `<svg>` elements or text-glyph icons** (`✓`,
   `×`, arrows) in components — use the matching Lucide icon instead. The
   wordmark and data visualizations (trace bars, diagrams) are the only
   sanctioned hand-drawn SVG.
+- Don't paint **full-color status backgrounds** — use text color plus a
+  small icon, dot, or left stripe on the status's `-muted` tint.
+- Don't introduce **viewport breakpoints** for panel layouts — use
+  container queries.
 
 ---
 
@@ -1706,14 +1981,14 @@ example), use a **hybrid layout** inside a single `Sheet`:
    §10), shown only when no search filter is active. The grid uses
    container queries (`grid-cols-1 @3xl:grid-cols-2 @5xl:grid-cols-3`) so
    it stays responsive within the `Sheet`. Eyebrow above the grid is a
-   `label-caps-lg` heading sitting on a `border-t border-rule` separator.
+   `label-caps-lg` heading with section spacing — no separator rule.
 2. **Search + index** — the spec's `SearchField` (24px display caret)
-   immediately above a `border border-rule bg-bg` container with rows
-   separated by `divide-y divide-rule-2`. Each row is a compact
+   immediately above a `rounded-md bg-surface` container; rows separate by
+   hover/selected surfaces (no per-row dividers). Each row is a compact
    row-shaped variant of `WorkerCard` (no command block; just name +
-   version + description + meta). Hover states use the same
-   `bg-panel border-l-2 border-l-accent` rail that focused `WorkerCard`s
-   use in §10.
+   version + description + meta). Hover uses `bg-surface-hover`; the
+   focused/selected row uses the same `bg-surface-selected` tint as the
+   focused `WorkerCard` in §10.
 3. **Search behaviour** — when the search field has a non-empty query, the
    featured row collapses entirely; only the filtered index is shown so
    that "featured" content never competes with results.
@@ -1736,19 +2011,20 @@ accordions or modals at the row level.
 The composition has three nesting levels and uses one tonal step per level:
 
 ```
-section eyebrow (label-caps)            <- bg page
-  card        bg-panel head + bg body   <- per function/trigger
-    pane      bg-paper-2 head + bg body <- per schema (request/response)
-      tree    flat type-table           <- per field
+section eyebrow (label-caps)                    <- bg page
+  card    bg-panel-raised head + surface body   <- per function/trigger
+    pane    bg-paper-2 head + bg body           <- per schema (request/response)
+      tree    flat type-table                   <- per field
 ```
 
 1. **Sections** — two `Section`s (functions, triggers), each with a
    `label-caps-lg` eyebrow on the left and a small ink-ghost count on the
    right. Same chrome already used by other tabs on the worker page; do not
    wrap the section bodies in an additional border.
-2. **Card** — a bordered `article` per function/trigger. The `bg-panel` head
-   strip carries the name (`title-cell`) on the left, any `metadata.tags`
-   rendered as `rule-2`-bordered label-caps-sm pills next to it, and the
+2. **Card** — a `rounded-md bg-surface` `article` per function/trigger. The
+   `bg-panel-raised` head strip carries the name (`title-cell`) on the left,
+   any `metadata.tags` rendered as borderless `bg-surface` label-caps-sm
+   pills next to it, and the
    kind label (`FUNCTION` / `TRIGGER`) in label-caps on the right. Function
    and trigger cards share the exact same head; the only difference is
    what the name represents. **Triggers do not carry a separate "type"
@@ -1758,17 +2034,18 @@ section eyebrow (label-caps)            <- bg page
    `scroll-mt-20` so that anchor navigation lands cleanly below the sticky
    site header.
 3. **Pane** — the two schemas inside a card sit in a `@2xl:grid-cols-2`
-   grid, separated by a 1px `bg-rule-2` gutter. Each pane is a
-   `border-rule` block with a `bg-paper-2` head strip carrying a
+   grid separated by grid `gap`. Each pane is a
+   `rounded-sm` block with a `bg-paper-2` head strip carrying a
    label-caps-sm eyebrow (`request` / `response` for functions,
    `invocation` / `return` for triggers). The `bg-paper-2` step makes the
-   pane read as one tonal level "down" from the card's `bg-panel` head.
+   pane read as one tonal level "down" from the card's `bg-panel-raised`
+   head.
 4. **Tree** — fields render as a flat type-table inside the pane body, one
    row per field. Each row is `name  type  required-marker  enum  constraints`
    on one line, with the description on a second line in
    `text-ink-faint text-[12px]`. Nested objects, arrays-of-objects, and
-   union variants indent under the parent with a `border-l border-rule-2`
-   guide. Nesting deeper than three levels collapses behind a native
+   union variants indent under the parent by indentation alone (no guide
+   line). Nesting deeper than three levels collapses behind a native
    `<details>` row labelled "… expand N nested" so the surface stays
    client-JS-free.
 
@@ -1789,8 +2066,9 @@ worker page.
 **Sidebar summary.** Pair the panel with an `api` card in the worker
 page's right-hand `aside` (placed between `details` and `author`) listing
 every function and trigger the worker exposes. The card uses the same
-chrome as the other sidebar cards (`border-rule` block + `bg-panel` head
-+ `label-caps-lg` title) and contains two sub-sections — `functions` and
+chrome as the other sidebar cards (`rounded-md bg-surface` block +
+`bg-panel-raised` head + `label-caps-lg` title) and contains two
+sub-sections — `functions` and
 `triggers` — each headed by a `label-caps-sm` eyebrow with a tabular
 count on the right. Each row is a Next.js `Link` whose `href` always
 includes `?tab=api#<anchor>`, where the anchor is the same id stamped on
@@ -1813,20 +2091,18 @@ internally instead of overflowing the viewport. At narrower widths the
 aside stacks below the main column and is not sticky.
 
 **Selection echo.** When a sidebar link is clicked, the corresponding
-function/trigger card lights up with the canonical `border-l-2
-border-l-accent` rail (the same recipe used by `WorkerCard` focused
-state in §10 and the `versions` Row's `aria-current` style) and the
-clicked sidebar link itself switches to `text-accent`. This gives the
-user a clear "you are here" signal that survives any subsequent
-scrolling. The 1px → 2px border shift on the left edge is the
-sanctioned accent on the existing rule grid (§4 "Allowed accents on top
-of borders").
+function/trigger card lights up with the canonical `bg-surface-selected`
+tint (the same recipe used by `WorkerCard` focused state in §10 and the
+`versions` Row's `aria-current` style) and the clicked sidebar link itself
+switches to `text-accent`. This gives the user a clear "you are here"
+signal that survives any subsequent scrolling. The tinted fill is the
+sanctioned selection accent (§4 "Selection and severity").
 
 **Why CSS `:target` is not enough.** Next.js `Link` performs same-page
 hash navigation through `history.pushState`, which does **not** fire
 `hashchange` and which most browsers do **not** treat as a `:target`
 re-evaluation trigger. As a result, plain
-`target:border-l-2 target:border-l-accent` only highlights on full page
+`target:bg-surface-selected` only highlights on full page
 load and back/forward — *not* on a soft sidebar click. The api panel
 must drive the highlight from JS instead.
 
@@ -1847,14 +2123,14 @@ Wiring:
 - **Cards** wrap their `<article>` in a tiny client component
   ([`hash-card.tsx`](app/src/components/api-reference/hash-card.tsx))
   that calls `useActiveHash()` and conditionally adds
-  `border-l-2 border-l-accent` when the hash matches its `id`. The card
+  `bg-surface-selected` when the hash matches its `id`. The card
   body (header, description, schema panes) is still a server-rendered
   React tree passed in as `children`, so the only JS that runs in the
   browser is the wrapper.
 - **Sidebar links** ([`summary-list.tsx`](app/src/components/api-reference/summary-list.tsx))
   call `useActiveHash()` for their visual state and
   `setActiveHash(target)` from `onClick`, which broadcasts to the
-  card subscribers immediately so the rail and the link light up in
+  card subscribers immediately so the tint and the link light up in
   the same frame as the click — even though Next.js will not have
   fired `hashchange` yet.
 
@@ -1866,6 +2142,6 @@ the user crossed sub-sections.
 
 **Accent rationing.** Per §3, the selection still costs only one accent
 moment per visible region: in the sidebar it is the active link; on the
-panel it is the rail on the targeted card. The required-marker accent
-inside the schema tree continues to coexist because it lives at a
+panel it is the tinted fill on the targeted card. The required-marker
+accent inside the schema tree continues to coexist because it lives at a
 different scale (a single character per row).
diff --git a/console/SKILL.md b/console/SKILL.md
index bc4e6f443..773838506 100644
--- a/console/SKILL.md
+++ b/console/SKILL.md
@@ -99,11 +99,38 @@ your worker.
 `Badge`, `Button`, `CodeEditor`, `CodeHighlight`, `Dialog` (+`DialogTrigger`,
 `DialogClose`, `DialogContent`, `DialogTitle`, `DialogDescription`),
 `DropdownMenu` (+`Trigger/Content/Item/Label/Separator`), `EmptyState`,
-`ErrorBoundary`, `Input`, `JsonHighlight`, `Markdown`, `MarkdownPreview`,
-`Select`, `Skeleton`, `StatusDot`, `StatusPanel`, `Tabs`
-(+`TabsList/TabsTrigger/TabsContent`), `Tooltip`
+`ErrorBoundary`, `FileDiff`, `Input`, `JsonHighlight`, `Markdown`,
+`MarkdownPreview`, `PageShell`/`PageHeader`/`PageBody`/`PageSidebar`/
+`PageMain` (the page chrome — see below), `Select`, `Skeleton`, `StatusDot`,
+`StatusPanel`, `Tabs` (+`TabsList/TabsTrigger/TabsContent`), `Tooltip`
 (+`TooltipTrigger/TooltipContent`).
 
+**The page chrome is the mandatory layout for pages.** Every registered
+page composes the same five pieces, so your pane looks exactly like the
+console's own screens (chat, traces) and every other worker's page:
+
+```tsx
+<PageShell>
+  <PageHeader
+    icon={<MyIcon />}                 // 16px glyph, faint ink
+    title="mywork"                    // mono lowercase — console chrome
+    description="what this page is"   // truncates first
+    actions={<Button …/>}             // optional right-side controls
+    onClose={onRequestClose}          // the standard ✕ (PageRenderProps)
+  />
+  <PageBody side={panelSide}>         {/* mirrors for right-side panes */}
+    <PageSidebar>…navigation…</PageSidebar>  {/* gray, fixed width */}
+    <PageMain>…workspace…</PageMain>         {/* white, flexes */}
+  </PageBody>
+</PageShell>
+```
+
+The pieces own the surface hierarchy (header on `--color-panel-raised`
+with a hairline `--color-edge` border, sidebar on `--color-sidebar`, main
+on `--color-panel`) — don't repaint those tokens yourself. No sidebar?
+Put content straight into `PageMain`. Custom body internals are fine, but
+keep `PageShell` + `PageHeader` (with `onClose` wired) on every page.
+
 **`CodeEditor` is Monaco — and it is the console's one code editor.** Every
 code/text editing surface (yours included) uses it: Monaco runs once inside
 the console, follows the console theme in light and dark, and grows with its
@@ -112,6 +139,13 @@ content (put it inside an `overflow-auto` pane). Never bundle
 would ship megabytes toward the per-asset size cap to duplicate what the
 console already provides.
 
+**`FileDiff` is the console's one file-diff surface** — same rule as
+`CodeEditor`: never bundle a diff renderer. Pass the two full file bodies
+(`oldFile`/`newFile`, each `{ name, contents }` — empty `contents` for a
+created/deleted side); the console computes and renders the unified diff,
+themed for both modes. `diffStyle: 'split'` and `overflow: 'scroll'` are
+opt-in props.
+
 ```tsx
 import { CodeEditor } from '@iii-dev/console-ui'
 
@@ -274,6 +308,21 @@ returns a remover for manual teardown.
 A whole console page at `#/ext/<id>`, listed in the nav while registered.
 Duplicate ids: last registration wins.
 
+`render` receives `PageRenderProps` — a plain `() => <Page />` render stays
+valid and simply ignores them:
+
+- `panelSide`: `'left' | 'right'` — which side of the workspace tab the
+  pane hosting your page occupies (`'right'` only for the rightmost column
+  of a multi-column tab). Use it to mirror your layout so e.g. a sidebar
+  hugs the outer screen edge.
+- `tabId`: the hosting workspace tab's stable id (tabs persist across
+  reloads) — key per-tab UI state on it. Empty string outside a workspace
+  tab.
+- `onRequestClose`: close the pane hosting your page (a split drops the
+  column; a single-column tab detaches back to the attach affordance).
+  Wire it to `PageHeader`'s `onClose` — every page header carries the
+  standard ✕. Absent when the page renders outside a closable pane.
+
 ### `host.functionTriggers.register(renderer)`
 
 Custom rendering for function-trigger messages in chat and traces:
diff --git a/console/web/.storybook/manager.ts b/console/web/.storybook/manager.ts
index 68bb39876..263af03a2 100644
--- a/console/web/.storybook/manager.ts
+++ b/console/web/.storybook/manager.ts
@@ -33,18 +33,18 @@ export const darkTheme = create({
   brandTitle: 'iii console',
   brandImage: brandImageDark,
   brandTarget: '_self',
-  appBg: '#030303',
-  appContentBg: '#030303',
-  appBorderColor: '#2a2926',
-  barBg: '#0a0a0a',
-  barTextColor: '#f2f0ed',
-  barSelectedColor: '#3ea8ff',
-  colorPrimary: '#3ea8ff',
-  colorSecondary: '#a8a49e',
-  textColor: '#f2f0ed',
-  inputBg: '#030303',
-  inputBorder: '#2a2926',
-  inputTextColor: '#f2f0ed',
+  appBg: '#0a0a0a',
+  appContentBg: '#0a0a0a',
+  appBorderColor: '#1f1f1f',
+  barBg: '#111111',
+  barTextColor: '#ededed',
+  barSelectedColor: '#28a8f7',
+  colorPrimary: '#28a8f7',
+  colorSecondary: '#a6a6a6',
+  textColor: '#ededed',
+  inputBg: '#0a0a0a',
+  inputBorder: '#1f1f1f',
+  inputTextColor: '#ededed',
   fontBase: '"Geist", ui-sans-serif, system-ui, sans-serif',
 })
 
diff --git a/console/web/DESIGN.md b/console/web/DESIGN.md
index 890d12328..78e44f733 100644
--- a/console/web/DESIGN.md
+++ b/console/web/DESIGN.md
@@ -1,118 +1,155 @@
 ---
-version: alpha
+version: beta
 name: iii Schematic
-description: A minimal, blueprint-style design system for the iii engine. Engineering-document aesthetic in warm cream and ink, with a single vivid orange accent and an all-monospace voice.
+description: A minimal, engineering-document design system for the iii engine. The system draws no lines — hierarchy comes entirely from layered surfaces and alpha-gray fills; warm cream paper in light, neutral grays from black in dark, with a single rationed accent (burnt orange on cream, electric blue on dark), one 6px corner radius everywhere, and a mono voice for technical data. The only sanctioned strokes are the focus ring and the very subtle `edge` frame around the floating workspace panels.
 colors:
   bg: "#f2f0ed"
-  panel: "#e9e6e2"
+  sidebar: "#edeae5"
+  panel: "lab(98.26% 0 0)"
+  panel-raised: "#f7f5f2"
   paper: "#f2f0ed"
   paper-2: "#ebe8e3"
+  surface: "rgba(20, 16, 8, 0.055)"
+  surface-hover: "rgba(20, 16, 8, 0.085)"
+  surface-selected: "rgba(184, 66, 15, 0.12)"
+  surface-active: "rgba(20, 16, 8, 0.12)"
   ink: "#0a0a0a"
   ink-2: "#1a1a1a"
   ink-soft: "#1a1a1a"
   ink-faint: "#6b6865"
   ink-ghost: "#a3a09c"
+  ink-disabled: "#b8b4ae"
   mute: "#6b6865"
   mute-2: "#a3a09c"
-  rule: "#d8d5d0"
-  rule-2: "#e6e3df"
-  accent: "#ff5a1f"
-  accent-dark: "#3ea8ff"
-  bg-dark: "#111110"
-  panel-dark: "#1a1916"
-  ink-dark: "#f2f0ed"
-  ink-faint-dark: "#a8a49e"
-  ink-ghost-dark: "#8a8782"
-  rule-dark: "#2a2926"
-  rule-2-dark: "#1f1e1c"
-  alert: "#c43e1c"
+  rule: "transparent"
+  rule-2: "transparent"
+  rule-strong: "transparent"
+  rule-focus: "rgba(184, 66, 15, 0.6)"
+  edge: "rgba(20, 16, 8, 0.08)"
+  accent: "#b8420f"
+  accent-fg: "#f2f0ed"
+  accent-hover: "#a53a0c"
+  accent-muted: "rgba(184, 66, 15, 0.1)"
+  accent-border: "rgba(184, 66, 15, 0.35)"
+  alert: "#ff0026"
+  alert-muted: "rgba(255, 0, 38, 0.08)"
   warn: "#a87a00"
+  warn-muted: "rgba(168, 122, 0, 0.12)"
+  ok: "#356f3d"
+  ok-muted: "rgba(53, 111, 61, 0.12)"
+  bg-dark: "#0a0a0a"
+  sidebar-dark: "#0e0e0e"
+  panel-dark: "#111111"
+  panel-raised-dark: "#171717"
+  paper-2-dark: "#171717"
+  surface-dark: "rgba(255, 255, 255, 0.055)"
+  surface-hover-dark: "rgba(255, 255, 255, 0.085)"
+  surface-selected-dark: "rgba(40, 168, 247, 0.14)"
+  surface-active-dark: "rgba(255, 255, 255, 0.12)"
+  ink-dark: "#ededed"
+  ink-faint-dark: "#a6a6a6"
+  ink-ghost-dark: "#6f6f6f"
+  ink-disabled-dark: "#4d4d4d"
+  rule-dark: "transparent"
+  rule-2-dark: "transparent"
+  rule-strong-dark: "transparent"
+  rule-focus-dark: "rgba(40, 168, 247, 0.7)"
+  edge-dark: "rgba(255, 255, 255, 0.07)"
+  accent-dark: "#28a8f7"
+  accent-hover-dark: "#46b6fa"
+  accent-muted-dark: "rgba(40, 168, 247, 0.12)"
+  accent-border-dark: "rgba(40, 168, 247, 0.35)"
+  alert-dark: "#f05d68"
+  warn-dark: "#f5a524"
+  ok-dark: "#36c98f"
 typography:
   logo:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 18px
     fontWeight: 600
     lineHeight: 1
     letterSpacing: -0.02em
   display-hero:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 72px
     fontWeight: 600
     lineHeight: 1.02
     letterSpacing: -0.02em
   display-foot:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 48px
     fontWeight: 600
     lineHeight: 1.05
     letterSpacing: -0.03em
   headline-section:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 28px
     fontWeight: 500
     lineHeight: 1.25
     letterSpacing: -0.01em
   headline-card:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 20px
     fontWeight: 500
     lineHeight: 1.1
     letterSpacing: -0.02em
   title-cell:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 16px
     fontWeight: 600
     lineHeight: 1.3
     letterSpacing: -0.01em
   body-md:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 14px
     fontWeight: 400
     lineHeight: 1.7
   body-sm:
-    fontFamily: Chivo Mono
+    fontFamily: Geist
     fontSize: 13px
     fontWeight: 400
     lineHeight: 1.7
   code-md:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 13px
     fontWeight: 400
     lineHeight: 1.65
   code-sm:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 12.5px
     fontWeight: 400
     lineHeight: 1.55
   label-caps-lg:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 12px
     fontWeight: 500
     lineHeight: 1
     letterSpacing: 0.18em
   label-caps-md:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 12px
     fontWeight: 500
     lineHeight: 1
     letterSpacing: 0.14em
   label-caps-sm:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 11px
     fontWeight: 500
     lineHeight: 1
     letterSpacing: 0.06em
   micro:
-    fontFamily: Chivo Mono
+    fontFamily: Geist Mono
     fontSize: 9px
     fontWeight: 400
     lineHeight: 1
     letterSpacing: 0.04em
 rounded:
   none: 0px
-  sm: 0px
-  md: 0px
-  lg: 0px
+  xs: 6px
+  sm: 6px
+  md: 6px
+  lg: 6px
+  xl: 6px
   full: 9999px
 spacing:
   base: 16px
@@ -147,35 +184,35 @@ components:
     backgroundColor: "{colors.ink}"
     textColor: "{colors.bg}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.md}"
     padding: 12px 20px
   button-primary-hover:
-    backgroundColor: "{colors.bg}"
-    textColor: "{colors.ink}"
+    backgroundColor: "{colors.ink}"
+    opacity: 0.9
   button-ghost:
-    backgroundColor: "{colors.bg}"
-    textColor: "{colors.ink}"
+    backgroundColor: transparent
+    textColor: "{colors.ink-faint}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     padding: 12px 20px
   button-ghost-hover:
-    backgroundColor: "{colors.ink}"
-    textColor: "{colors.bg}"
+    backgroundColor: "{colors.surface-hover}"
+    textColor: "{colors.ink}"
   button-pill:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     padding: 6px 12px
   button-pill-hover:
-    backgroundColor: "{colors.ink}"
-    textColor: "{colors.bg}"
+    backgroundColor: "{colors.surface-hover}"
   button-icon:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: transparent
     textColor: "{colors.ink-faint}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     size: 30px
   button-icon-hover:
+    backgroundColor: "{colors.surface-hover}"
     textColor: "{colors.ink}"
   nav-link:
     typography: "{typography.body-sm}"
@@ -184,68 +221,78 @@ components:
   nav-link-hover:
     textColor: "{colors.ink}"
   card:
-    backgroundColor: "{colors.bg}"
-    rounded: "{rounded.none}"
-    padding: 28px
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.md}"
+    padding: 20px
   card-focus:
-    backgroundColor: "{colors.panel}"
+    backgroundColor: "{colors.panel-raised}"
   card-head:
-    backgroundColor: "{colors.panel}"
+    backgroundColor: "{colors.panel-raised}"
     typography: "{typography.label-caps-lg}"
     textColor: "{colors.ink-faint}"
     padding: 10px 14px
   input:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
-    padding: 10px 2px
+    rounded: "{rounded.sm}"
+    padding: 10px 12px
   input-placeholder:
     textColor: "{colors.ink-ghost}"
+  input-hover:
+    backgroundColor: "{colors.surface-hover}"
   input-focus:
-    backgroundColor: "{colors.bg}"
-    textColor: "{colors.ink}"
+    borderColor: "{colors.rule-focus}"
+    ring: "3px {colors.accent-muted}"
   badge-numeric:
     backgroundColor: "{colors.accent}"
-    textColor: "{colors.bg}"
+    textColor: "{colors.accent-fg}"
     typography: "{typography.label-caps-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.xs}"
     padding: 0 4px
     height: 16px
   status-dot:
     backgroundColor: "{colors.accent}"
     rounded: "{rounded.full}"
     size: 6px
-  rule-line:
-    backgroundColor: "{colors.rule}"
-    height: 1px
   code-block:
     backgroundColor: "{colors.bg}"
     typography: "{typography.code-sm}"
     textColor: "{colors.ink}"
+    rounded: "{rounded.sm}"
     padding: 18px 20px
   terminal-button:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     typography: "{typography.body-sm}"
-    rounded: "{rounded.none}"
+    rounded: "{rounded.sm}"
     padding: 10px 14px
   terminal-prompt:
     textColor: "{colors.accent}"
+  toggle-track:
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.sm}"
+    padding: 2px
   toggle-active:
-    backgroundColor: "{colors.ink}"
-    textColor: "{colors.bg}"
+    backgroundColor: "{colors.accent-muted}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xs}"
   toggle-inactive:
-    backgroundColor: "{colors.bg}"
+    backgroundColor: transparent
     textColor: "{colors.mute}"
 ---
 
 # iii Schematic — design system
 
-This document is a self-contained, portable spec for the iii Schematic UI: a
-warm-cream, ink-on-paper, monospace web UI built like an engineering drafting
-sheet. Everything needed to reproduce the system in another project lives
-inside this file — there are no links to repository sources.
+This document is a self-contained, portable spec for the iii Schematic UI:
+an engineering-document web UI built from layered surfaces and alpha-gray
+fills — warm cream paper in light, neutral grays from black in dark — with
+Geist for UI text, Geist Mono for technical data, one 6px corner radius
+everywhere, and a single rationed accent. The system draws no lines: the
+only sanctioned strokes are the focus ring and the subtle `edge` frame
+around the floating workspace panels. Everything needed to reproduce the
+system in another project lives inside this file — there are no links to
+repository sources.
 
 The YAML frontmatter above is the machine-readable token spec. The sections
 below translate it into implementation-ready CSS and React. They assume:
@@ -263,18 +310,24 @@ canonical components in §10 as-is.
 
 ## 0. Setup
 
-### Font
+### Fonts
 
-Load Chivo Mono in `index.html`. Weights 400/500/600 cover the entire scale
-(body, label-caps, headlines, display).
+Two families, loaded via `@fontsource` at the top of the global stylesheet:
+**Geist** (the UI sans — navigation, buttons, body copy, headings) and
+**Geist Mono** (the technical voice — trace names, IDs, timestamps, metrics,
+code). Chivo Mono stays in the mono fallback stack for legacy glyph parity.
+Weights 400/500/600 cover the entire scale.
 
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@400;500;600&display=swap"
-/>
+```css
+@import "@fontsource/geist/400.css";
+@import "@fontsource/geist/500.css";
+@import "@fontsource/geist/600.css";
+@import "@fontsource/geist-mono/400.css";
+@import "@fontsource/geist-mono/500.css";
+@import "@fontsource/geist-mono/600.css";
+@import "@fontsource/chivo-mono/400.css";
+@import "@fontsource/chivo-mono/500.css";
+@import "@fontsource/chivo-mono/600.css";
 ```
 
 ### HTML shell
@@ -299,37 +352,90 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-    Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+  --font-sans:
+    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono:
+    "Geist Mono", "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
     Consolas, "Liberation Mono", "Courier New", monospace;
 
-  /* paper / surface ramp (3-step) */
+  /* ── Surface ramp ─────────────────────────────────────────────────────
+     Layered surfaces are the ONLY structural tool — the system draws no
+     lines: bg (canvas) → sidebar → panel → panel-raised, then the
+     component fills surface → surface-hover → surface-selected →
+     surface-active. The base layers are solid; the component fills are
+     alpha grays so one step reads identically over any base layer.
+     `paper-2` is the legacy alias for panel-raised. */
   --color-bg: #f2f0ed;
-  --color-panel: #e9e6e2;
+  --color-sidebar: #edeae5;
+  --color-panel: lab(98.26% 0 0);
+  --color-panel-raised: #f7f5f2;
   --color-paper-2: #ebe8e3;
+  --color-surface: rgba(20, 16, 8, 0.055);
+  --color-surface-hover: rgba(20, 16, 8, 0.085);
+  --color-surface-selected: rgba(184, 66, 15, 0.12);
+  --color-surface-active: rgba(20, 16, 8, 0.12);
 
-  /* ink ramp (3-step) */
+  /* ── Ink ramp ──────────────────────────────────────────────────────── */
   --color-ink: #0a0a0a;
   --color-ink-faint: #6b6865;
   --color-ink-ghost: #a3a09c;
-
-  /* structural lines */
-  --color-rule: #d8d5d0;
-  --color-rule-2: #e6e3df;
-
-  /* accent (single hero — hot orange) */
-  --color-accent: #ff5a1f;
+  --color-ink-disabled: #b8b4ae;
+
+  /* ── Border ramp ──────────────────────────────────────────────────────
+     The system draws no lines: rule/rule-2/rule-strong resolve to
+     transparent in both themes (legacy `border-rule*` utilities become
+     inert 1px transparent borders, so layout never shifts). Hierarchy is
+     carried by the surface fills above. The single exception is
+     rule-focus — the focus indicator on inputs and controls, which must
+     stay visible for accessibility. */
+  --color-rule: transparent;
+  --color-rule-2: transparent;
+  --color-rule-strong: transparent;
+  --color-rule-focus: rgba(184, 66, 15, 0.6);
+
+  /* The one structural stroke the system keeps: a VERY subtle edge on the
+     main workspace panels (the tab columns), so the floating panels
+     read against the canvas. Never used inside a panel. */
+  --color-edge: rgba(20, 16, 8, 0.08);
+
+  /* accent (single hero — burnt orange on cream, blue on dark) */
+  --color-accent: #b8420f;
   --color-accent-fg: #f2f0ed;
+  --color-accent-hover: #a53a0c;
+  --color-accent-muted: rgba(184, 66, 15, 0.1);
+  --color-accent-border: rgba(184, 66, 15, 0.35);
 
-  /* status */
-  --color-alert: #c43e1c;
+  /* status (each with a muted fill for tinted backgrounds) */
+  --color-alert: #ff0026;
+  --color-alert-muted: rgba(255, 0, 38, 0.08);
   --color-warn: #a87a00;
-
-  /* radii — only two are allowed */
+  --color-warn-muted: rgba(168, 122, 0, 0.12);
+  --color-ok: #356f3d;
+  --color-ok-muted: rgba(53, 111, 61, 0.12);
+
+  /* ── Radii ────────────────────────────────────────────────────────────
+     One radius everywhere: every step of the Tailwind scale resolves to
+     6px, so badges, buttons, cards, panels, and modals share the same
+     corner. Only `none` (main columns' outer frame edge cases) and `full`
+     (dots, round action buttons) differ. */
   --radius-none: 0px;
+  --radius-xs: 6px;
+  --radius-sm: 6px;
+  --radius-md: 6px;
+  --radius-lg: 6px;
+  --radius-xl: 6px;
   --radius-full: 9999px;
 
+  /* ── Elevation (the only two sanctioned shadows) ────────────────────── */
+  --shadow-raised:
+    0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 8px 24px rgba(0, 0, 0, 0.18);
+  --shadow-floating:
+    0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.28);
+
+  /* ── Motion ─────────────────────────────────────────────────────────── */
+  --ease-glide: cubic-bezier(0.2, 0.8, 0.2, 1);
+
   /* spacing scale (carried from the YAML) */
   --spacing-gutter: 24px;
   --spacing-section-x: 36px;
@@ -338,18 +444,41 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
   --spacing-content-max: 1216px;
 }
 
-/* dark theme: invert paper/ink and swap accent to electric blue */
 [data-theme="dark"] {
-  --color-bg: #111110;
-  --color-panel: #1a1916;
-  --color-paper-2: #1f1e1c;
-  --color-ink: #f2f0ed;
-  --color-ink-faint: #a8a49e;
-  --color-ink-ghost: #8a8782;
-  --color-rule: #2a2926;
-  --color-rule-2: #1f1e1c;
-  --color-accent: #3ea8ff;
-  --color-accent-fg: #111110;
+  /* Neutral grays derived from black — no blue cast in the base ramp. The
+     component fills (surface*) are white-alpha so a step reads identically
+     over any base layer; the ONLY chromatic surface is surface-selected,
+     the blue selection tint. Borders are gone: rule/rule-2/rule-strong
+     resolve to transparent, and hierarchy is carried entirely by fills. */
+  --color-bg: #0a0a0a;
+  --color-sidebar: #0e0e0e;
+  --color-panel: #111111;
+  --color-panel-raised: #171717;
+  --color-paper-2: #171717;
+  --color-surface: rgba(255, 255, 255, 0.055);
+  --color-surface-hover: rgba(255, 255, 255, 0.085);
+  --color-surface-selected: rgba(40, 168, 247, 0.14);
+  --color-surface-active: rgba(255, 255, 255, 0.12);
+  --color-ink: #ededed;
+  --color-ink-faint: #a6a6a6;
+  --color-ink-ghost: #6f6f6f;
+  --color-ink-disabled: #4d4d4d;
+  --color-rule: transparent;
+  --color-rule-2: transparent;
+  --color-rule-strong: transparent;
+  --color-rule-focus: rgba(40, 168, 247, 0.7);
+  --color-edge: rgba(255, 255, 255, 0.07);
+  --color-accent: #28a8f7;
+  --color-accent-fg: #070909;
+  --color-accent-hover: #46b6fa;
+  --color-accent-muted: rgba(40, 168, 247, 0.12);
+  --color-accent-border: rgba(40, 168, 247, 0.35);
+  --color-alert: #f05d68;
+  --color-alert-muted: rgba(240, 93, 104, 0.12);
+  --color-warn: #f5a524;
+  --color-warn-muted: rgba(245, 165, 36, 0.12);
+  --color-ok: #36c98f;
+  --color-ok-muted: rgba(54, 201, 143, 0.12);
 }
 
 @layer base {
@@ -388,11 +517,13 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
   ::-webkit-scrollbar-track {
     background: transparent;
   }
+  /* rule is transparent (no-lines system) — the thumb needs its own
+     visible alpha gray. */
   ::-webkit-scrollbar-thumb {
-    background: var(--color-rule);
+    background: color-mix(in oklab, var(--color-ink) 22%, transparent);
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--color-ink-ghost);
+    background: color-mix(in oklab, var(--color-ink) 38%, transparent);
   }
 }
 
@@ -428,12 +559,27 @@ The full design-token stylesheet — drop this in as your global CSS entrypoint:
   animation: wiggle 3s ease-in-out infinite;
 }
 
-/* the one sanctioned shadow stack — used only for the "deal" stack
-   animation on language cards */
+/* transient shadow stack — used only for the "deal" stack animation on
+   language cards (default elevation goes through shadow-raised /
+   shadow-floating from the theme) */
 @utility deal-shadow {
   box-shadow: -2px 0 0 var(--color-rule),
     -16px 4px 36px -10px rgba(0, 0, 0, 0.22);
 }
+
+/* Function/tool-call card chrome — an accent-tinted raised surface (a soft
+   gradient wash over panel-raised, no border) so calls read as special
+   without any outline. Derived from the accent token, so it tints blue in
+   dark mode and burnt orange in light mode. */
+@utility fcall-chrome {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--color-accent) 7%, transparent),
+      color-mix(in oklab, var(--color-accent) 3%, transparent)
+    ),
+    var(--color-panel-raised);
+}
 ```
 
 ### `cn` helper
@@ -454,19 +600,32 @@ export function cn(...inputs: ClassValue[]) {
 
 ## 1. Philosophy — "iii Schematic"
 
-The app should feel like an **engineering document**, not a SaaS dashboard.
-
-- The page is a **drafting sheet**: cream paper, hairline ink rules,
-  monospace voice, an unflinching commitment to lowercase. Nothing is
-  rounded; everything sits on a 1px grid.
-- Color is rationed: the palette is essentially **black-on-cream**, broken
-  only by a single hot orange used for state, focus, and emphasis.
+The app should feel like an **engineering document**, not a SaaS dashboard —
+technical, precise, dense without feeling cramped, structured without
+looking boxed.
+
+- The page is built from **layered surfaces**: hierarchy comes from a
+  one-step background difference, full stop. The system draws **no lines**
+  — no outlines on controls, no dividers between rows or regions. Exactly
+  two strokes are sanctioned: the focus indicator (`rule-focus`
+  border/ring) on a focused control, and the very subtle `edge` frame
+  around the floating workspace panels.
+- Dark mode is a **first-class layered system** — neutral grays derived
+  from black (`#0a0a0a → #171717`, no blue cast) with white-alpha component
+  fills, not an inverted paper ramp.
+- One corner radius: **6px everywhere** (every Tailwind radius step
+  resolves to it); the shapes stay disciplined, not soft or
+  consumer-playful. Lowercase voice throughout.
+- Color is rationed: the palette is essentially **ink-on-surface**, broken
+  by a single accent (burnt orange on cream, electric blue on dark) reserved
+  for selected, focused, active, and live states.
 - The personality is **technical but unintimidating** — the same energy as a
   well-kept lab notebook or a hand-drawn architecture diagram. It must feel
   built by engineers, for engineers, and for the agents working alongside
   them.
 - Density is deliberate: spec sheets, code, traces, and console panels
-  coexist on the same surface without a hierarchy contest.
+  coexist on the same surface without a hierarchy contest. Trace
+  visualizations stay the most colorful area of the UI.
 
 ### Voice
 
@@ -478,21 +637,27 @@ The app should feel like an **engineering document**, not a SaaS dashboard.
 - The wordmark is pronounced *"three eye"* — every "i" stays lowercase.
 
 > If you removed all the type, the page should still read as a structured
-> document. Lines establish hierarchy before color does.
+> document. Surfaces establish hierarchy; color marks state. Lines never
+> appear.
 
 ---
 
-## 2. Typography — single typeface (Chivo Mono)
+## 2. Typography — two families (Geist + Geist Mono)
 
-Chivo Mono is wired to **both** `--font-sans` and `--font-mono` in the theme
-(see §0), so every default text node is monospaced. There is no secondary
-face in this design language.
+**Geist** (`--font-sans`) carries the UI: navigation, conversation titles,
+buttons, inputs, chat content, empty states, headings, labels. **Geist
+Mono** (`--font-mono`) carries everything technical: trace names, worker
+names, function names, IDs, timestamps, metrics, span labels, filter
+expressions, code-like values.
 
-**Rule:** every UI surface uses Chivo Mono (the default). Don't reach for a
-sans-serif or a second monospace stack — variety comes from weight, scale,
-case, and letter-spacing, not family.
+**Rule:** if a human wrote it, it's sans; if the machine produced it (or a
+machine will parse it), it's mono. Don't add a third family — variety comes
+from weight, scale, case, and letter-spacing, not more fonts. Chat and
+configuration surfaces remap incidental `.font-mono` chrome back to Geist
+(see the `.chat-surface` / `.configuration-surface` rules in `index.css`);
+function-trigger cards run Geist Mono throughout.
 
-Decorative ligatures are explicitly disabled in `@layer base`
+Decorative ligatures are explicitly disabled on mono surfaces
 (`liga 0, clig 0, calt 0, dlig 0`) to preserve the schematic feel.
 
 ### Size scale
@@ -527,56 +692,85 @@ Decorative ligatures are explicitly disabled in `@layer base`
 ## 3. Color tokens
 
 All tokens live in the `@theme` block in §0. Use the Tailwind utility
-(`bg-bg`, `text-ink-faint`, `text-accent`, `border-rule`, …) — **never** the
+(`bg-bg`, `text-ink-faint`, `text-accent`, `bg-surface`, …) — **never** the
 raw CSS variable.
 
-### Paper / surface (3-step neutral scale)
-
-| Token     | Use                                                  |
-| --------- | ---------------------------------------------------- |
-| `bg`      | Page (warm cream paper) — every default surface      |
-| `panel`   | Header strips, focused cards, code-block chrome      |
-| `paper-2` | Nested separation when `panel` would be too heavy    |
-
-### Ink (3-step contrast)
-
-| Token       | Use                                                |
-| ----------- | -------------------------------------------------- |
-| `ink`       | Primary type, wordmark, primary buttons, hairlines |
-| `ink-faint` | Body in muted contexts, captions, inactive nav     |
-| `ink-ghost` | Line numbers, placeholders, timestamps             |
-
-### Rules (the structural lines)
-
-| Token    | Use                                                          |
-| -------- | ------------------------------------------------------------ |
-| `rule`   | Default 1px borders — defines every container                |
-| `rule-2` | Nested separators (e.g. card head → body) when `rule` is too loud |
-
-### Accent — hot orange (single hero)
-
-`accent`, `accent-fg`. Reserved for: the active state, the live pulse, the
-keyword/return value in a code block, the `iii` highlight in a sentence, the
-focus underline on the email row, the orange `$` prompt. **Never** for body
-text or large fills.
+### Surface ramp (the depth axis)
+
+The base layers (`bg` → `panel-raised`) are solid neutral tones; the
+component fills (`surface*`) are **alpha grays**, so one step reads
+identically over any base layer. `surface-selected` is the only chromatic
+surface — the accent-tinted selection fill (blue in dark, burnt orange in
+light).
+
+| Token              | Use                                                        |
+| ------------------ | ---------------------------------------------------------- |
+| `bg`               | Application canvas — the deepest layer                     |
+| `sidebar`          | Left navigation/sidebar (one step off the canvas)          |
+| `panel`            | Main chat and traces columns                               |
+| `panel-raised`     | Composer, trace details, popovers, active tool cards       |
+| `paper-2`          | Legacy alias for `panel-raised` (kept for existing code)   |
+| `surface`          | Inputs, controls, pills, chips, secondary cards            |
+| `surface-hover`    | Hover state on rows, items, and ghost controls             |
+| `surface-selected` | Selected conversation, trace row, or list item (accent tint) |
+| `surface-active`   | Strong active/pressed state                                |
+
+### Ink (4-step contrast)
+
+| Token          | Use                                                |
+| -------------- | -------------------------------------------------- |
+| `ink`          | Primary type, wordmark, primary buttons            |
+| `ink-faint`    | Body in muted contexts, captions, inactive nav     |
+| `ink-ghost`    | Line numbers, placeholders, timestamps             |
+| `ink-disabled` | Disabled labels (paired with reduced opacity)      |
+
+### Rules (there are none)
+
+`rule`, `rule-2`, and `rule-strong` resolve to `transparent` in both
+themes. They exist only so legacy `border-rule*` / `divide-rule*`
+utilities stay inert (1px transparent — layout never shifts) instead of
+breaking. Never design with them.
+
+| Token         | Value        | Meaning                                       |
+| ------------- | ------------ | --------------------------------------------- |
+| `rule`        | transparent  | Legacy default border — draws nothing         |
+| `rule-2`      | transparent  | Legacy subtle divider — draws nothing         |
+| `rule-strong` | transparent  | Legacy emphasis border — draws nothing        |
+| `rule-focus`  | accent ~60–70% alpha | The interactive stroke: the focus indicator on inputs and controls |
+| `edge`        | ink ~7–8% alpha | The structural stroke: the VERY subtle frame around the floating workspace panels (the tab columns) — never used inside a panel |
+
+### Accent (single hero — burnt orange on cream, electric blue on dark)
+
+`accent`, `accent-fg`, `accent-hover`, `accent-muted` (10–12%-alpha fill),
+`accent-border` (35%-alpha, legacy — prefer `accent-muted` fills). Reserved
+for: selected navigation and segmented controls (`accent-muted` fill),
+focused inputs (`rule-focus`), active filters, live state, the selected
+conversation/trace (`surface-selected` fill), the primary technical action,
+the `$` prompt. **Never** for body text, large fills, or outlines.
 
 ### Status
 
-`alert`, `warn` — desaturated on purpose. Status is expressed through **text
-color + a small icon/stripe**, not full-color backgrounds.
+`alert`, `warn`, `ok` — each with a `-muted` 8–12%-alpha fill for tinted
+backgrounds. Status is expressed through **text color + a small icon/dot on
+a muted tinted fill**, never a full-saturation background and never a
+stripe or outline.
 
 | Token    | Use                                       |
 | -------- | ----------------------------------------- |
-| `accent` | live / running / success                  |
+| `accent` | live / running / focused / selected       |
+| `ok`     | success, completed calls, diff additions  |
 | `alert`  | error states (traces, status panels)      |
-| `warn`   | warning states                            |
+| `warn`   | warning states, pending approval          |
 
 ### Dark theme
 
-Override the same tokens inside a `[data-theme="dark"]` block (see §0). The
-ramp inverts (`#111110 → #1a1916 → #1f1e1c` for paper; `#f2f0ed → #a8a49e →
-#8a8782` for ink) and the accent swaps to electric blue (`#3ea8ff`). Same
-structural logic — never collapses into pure black.
+Override the same tokens inside a `[data-theme="dark"]` block (see §0). Dark
+is a neutral gray ramp derived from black (`#0a0a0a → #0e0e0e → #111111 →
+#171717` — no blue cast), white-alpha component fills
+(`rgba(255,255,255,0.055 → 0.12)`), neutral light ink (`#ededed → #a6a6a6 →
+#6f6f6f`), and the accent swapped to electric blue (`#28a8f7`) — which also
+tints `surface-selected`. Same structural logic; the blue lives only in
+state, never in the grays.
 
 To follow the OS, set the attribute on load:
 
@@ -587,102 +781,141 @@ document.documentElement.dataset.theme = isDark ? 'dark' : 'light'
 
 ---
 
-## 4. The "lines define structure" rule (key composition pattern)
+## 4. The "surfaces, not borders" rule (key composition pattern)
+
+> **A one-step surface difference defines a region. The system draws no
+> lines — exactly two strokes are sanctioned: the focus ring, and the
+> `edge` frame around the floating workspace panels.**
 
-> **Borders define every container. Add a border before reaching for a
-> background fill.**
+Structure comes from the layered surface ramp (§3): a new region means a new
+background step, never an outline and never a divider. Controls are
+alpha-gray fills; rows separate by their hover/selected fills; regions
+separate by base-layer steps; overlays separate by `panel-raised` +
+`shadow-floating`.
 
-This is the inverse of a surface-stacking system: the schematic is held
-together by 1px ink rules. A new line means a new container. Cards, cells,
-panels, code blocks, and inputs are all defined by `border border-rule` — not
-by background steps.
+Two strokes are allowed, each with one job:
+
+1. **Focus** — a focused field swaps its (transparent) border to
+   `rule-focus` and gains a soft 3px accent ring; keyboard focus on
+   buttons uses the same `ring-rule-focus`.
+2. **Panel edges** — the main workspace panels (each
+   workspace-tab column) float on the canvas as
+   `rounded-sm border border-edge bg-panel` with 6px gutters; the `edge`
+   stroke is a VERY subtle ink-alpha frame that keeps a panel readable
+   against the canvas. It is never used inside a panel — interior
+   hierarchy stays fill-only.
+
+Nothing else in the chrome may draw a line. (Data visualizations are
+exempt: charts may draw connector and grid lines with explicit alpha-ink
+fills, e.g. `bg-ink/15` elbows and `bg-ink/8` time-grid guides in the
+trace timeline.)
 
 ### Pattern
 
 ```tsx
-<div className="border border-rule bg-bg">
-  <div className="px-3.5 py-2.5 border-b border-rule bg-panel font-mono text-[12px] uppercase tracking-[0.18em] text-ink-faint">
+<div className="rounded-md bg-surface overflow-hidden">
+  <div className="px-3.5 py-2.5 bg-panel-raised font-mono text-[12px] uppercase tracking-[0.18em] text-ink-faint">
     title
   </div>
-  <div className="p-7">{/* body */}</div>
+  <div className="p-5">{/* body */}</div>
 </div>
 ```
 
-The single tonal step (`bg → panel`) on the header strip is the only "lift"
-allowed in default states (see §5).
-
-### Allowed accents on top of borders
+The header strip is one surface step off the body — that difference IS the
+separator. No divider, no outer outline.
 
-These are not extra borders, they are accents on the existing 1px grid:
+### Selection and severity
 
-- `border-l-2 border-accent` rail on a focused `WorkerCard` (see §10).
-- `divide-x divide-rule` for inline grids (e.g. a metrics strip).
-- The "feature grid" trick: draw 1px rules on the **top + left** of the grid
-  and the **right + bottom** of each cell. This produces a single,
-  perfectly-aligned grid of borders with no doubled lines.
+- Selected row, card, conversation, or trace: `bg-surface-selected` — the
+  accent-tinted fill. **No left rail, no outline.**
+- Active segment / tab / filter: `bg-accent-muted` fill.
+- Row severity: the status's `-muted` tinted fill (e.g. `bg-alert-muted`)
+  plus the status text color and dot — no stripe.
+- Legacy `divide-y divide-rule-2` / `border-b border-rule-2` classes are
+  inert (transparent) — don't add new ones.
 
-### The single-shadow exception
+### Shadows
 
-The system carries no default shadows. The **one** allowed transient shadow
-is `.deal-shadow` (defined in §0), used only on the language-card stack
-when a card slides on top of another — a deliberate tactile cue, not a
-default elevation.
+Two sanctioned elevation shadows live in the theme: `shadow-raised` (raised
+cards — composer, trace detail) and `shadow-floating` (popovers, dialogs,
+dropdowns, tooltips). `.deal-shadow` remains a transient animation cue on
+the language-card stack. No heavy glows — the only glow is the live
+`pulse-dot`.
 
-**When in doubt:** add a 1px `border-rule`. Don't reach for a background fill
-or a shadow.
+**When in doubt:** step the background one level. Never reach for a border.
 
 ---
 
 ## 5. Surfaces & elevation
 
-The 3-step ramp is the only tonal tool. Think of it as a depth axis with one
-step of contrast — borders do the rest.
+The surface ramp is the primary tonal tool. Think of it as a depth axis:
+every step up reads as "closer" without a single stroke.
 
 ```
-bg            page (cream paper)
- └─ panel        header strips, focused cards, code-block chrome
-     └─ paper-2     nested separation when needed
+bg                  application canvas
+ └─ sidebar            left navigation
+ └─ panel              main chat / traces columns
+     └─ panel-raised      composer, trace detail, popovers, tool cards
+         └─ surface          inputs, controls, pills, secondary cards
+             └─ surface-hover     hover
+             └─ surface-selected  selected row / trace / conversation
+             └─ surface-active    pressed / segmented-control selection
 ```
 
-Most cards/panels should accept a `focused` (or `variant`) prop that lifts
-the body from `bg` to `panel`. That single tonal step is the only "lift"
-allowed in default states.
+Interactive containers walk the state sub-ramp (`surface →
+surface-hover → surface-selected → surface-active`); nothing about their
+edges ever changes except the focus ring.
 
 ### Where elevation actually shows up
 
-1. **Tonal layering** — the 3-step ramp above.
-2. **Hairline rules** — 1px lines in `rule` and `rule-2` do the work that
-   shadows would do in other systems.
-3. **Reserved transient shadow** — the `.deal-shadow` utility, used only on
-   the language-card stack (`HelloCard` flow mode in §10).
+1. **Tonal layering** — the ramp above; a one-step difference is the only
+   separator between regions. The alpha-gray component fills compose over
+   any base layer.
+2. **Sanctioned shadows** — `shadow-raised` on raised in-flow cards
+   (composer, expanded trace detail) and `shadow-floating` on overlays
+   (dropdowns, popovers, dialogs, tooltips, hover cards). Both carry a 1px
+   white inset highlight so raised surfaces catch light in dark mode.
+3. **Accent-tinted chrome** — the `.fcall-chrome` utility (§0): a soft
+   accent gradient wash over `panel-raised` (no border), reserved for
+   function/tool-call cards so agent actions read as special.
 4. **Pulse + glow** — the live state uses `.pulse-dot` (1.6s expanding
    `box-shadow` ring) on a 6px accent dot. This is the only "glow" the
    system allows.
 
-Dark mode keeps the same rule-driven hierarchy — the ramp flips but never
-collapses into pure black.
+Dark mode keeps the same surface-driven hierarchy — neutral grays stepping
+up from black. The only visible edge anywhere is the workspace panels'
+`edge` frame (§4).
 
 ---
 
 ## 6. Radii & shape
 
-Rectilinear sharpness, period. The system is built from squares and 1px
-strokes; the only curves are functional ones (status dots, glyph circles).
+**One radius: 6px, globally.** Every step of the Tailwind scale
+(`rounded-xs` through `rounded-xl`) resolves to 6px, so badges, chips,
+buttons, inputs, sidebar rows, cards, tool/function-call cards, popovers,
+dropdowns, dialogs, the composer, and the floating workspace panels all
+share the same corner. There is no per-component scale to choose from —
+write whichever step reads naturally (`rounded-sm` is the conventional
+spelling) and it renders 6px.
 
-| Token          | Value   | Used for                                        |
-| -------------- | ------- | ----------------------------------------------- |
-| `rounded-none` | 0px     | **Default for everything** (containers, buttons, cards, inputs, code blocks, badges, panels) |
-| `rounded-full` | 9999px  | Status dots and glyph circles **only**          |
+| Token                 | Value  | Used for                                 |
+| --------------------- | ------ | ---------------------------------------- |
+| `rounded-none`        | 0px    | Full-bleed edge cases only               |
+| `rounded-xs` … `-xl`  | 6px    | Everything — one corner everywhere       |
+| `rounded-full`        | 9999px | Status dots, pills, round action buttons |
 
-Never reach for `rounded-sm`, `rounded-md`, `rounded-lg`, or anything in
-between. There is no "soft" variant — the YAML aliases `sm/md/lg` to `0px`
-on purpose.
+Don't invent in-between values, and don't reach for `rounded-full` on
+anything that isn't genuinely circular.
 
 ### Stroke weight
 
-- 1px is the default for all UI borders.
-- SVG diagrams use 1–1.25px strokes; thicker strokes (1.25px `accent`) are
-  reserved for emphasized worker connections.
+- UI chrome draws no strokes, with two exceptions: the focus indicator — a
+  1px `rule-focus` border (inputs) or a 2px `ring-rule-focus` (buttons) —
+  and the 1px `edge` frame around the floating workspace panels (§4).
+- SVG **data** diagrams use 1–1.25px strokes; thicker strokes (1.25px
+  `accent`) are reserved for emphasized worker connections. Charts draw
+  their connectors/grids with explicit alpha-ink fills (`bg-ink/15`,
+  `bg-ink/8`).
 - The wordmark is six rectangles (three "i"s, each a stem + a tittle), all
   sharing the same square unit. The mark is the design system in miniature:
   identical units, no curves, deliberate negative space.
@@ -691,24 +924,37 @@ on purpose.
 
 ## 7. Spacing & layout
 
-The page is a vertical sheet, max 1200px, sitting on cream paper with a 1px
-ink-rule outer border. There is no hero card, no rounded container — the
-entire site reads as one continuous spec sheet.
+### Console workspace
 
-- **Sheet:** `min(1200px, 100%)` centered, 1px outer rule (see `Sheet` in
-  §10).
+The console shell is a set of **floating panels over the canvas**: the
+header holds server-persisted closable tabs (stored in the `console`
+configuration entry under `workspace.tabs` — model in
+`lib/workspace-tabs.ts`), and each tab shows one or two screens (any page
+or the chat view) as equal columns; an unattached column renders an
+attach affordance instead of a page. Each column renders as `rounded-sm border border-edge bg-panel` with 6px
+gutters between panels and against the viewport, so the canvas shows
+through as the seam. That gutter + edge frame is the entire column
+chrome; panels draw no other lines.
+
+### Sheet pages
+
+The page is a vertical sheet, max 1200px, sitting on the canvas surface.
+There is no hero card — the entire site reads as one continuous spec sheet.
+
+- **Sheet:** `min(1200px, 100%)` centered (see `Sheet` in §10). The sheet
+  itself is unbordered; the surface step against the canvas defines it.
 - **Sticky nav:** `py-4.5` vertical padding, collapses to `py-2.5` on
-  scroll. Bordered bottom only.
+  scroll. No border — it reads as chrome by sitting on its own surface.
 - **Section padding:** `px-9` on desktop (36px), `px-4.5` on tablet (18px),
   `px-3.5` on small mobile (14px). Vertical: `py-20` to `py-24` (80–96px)
   between major sections.
 - **Hero grid:** Two equal columns (`1fr 1fr`) with a 64px gap on desktop;
   collapses to a single column under 880px.
-- **Feature grids:** Always **3-up** on desktop (`grid-cols-3`), divided by
-  1px rules drawn on the **top + left** of the grid and the **right +
-  bottom** of each cell.
-- **Card padding:** 18–28px internal. Cards never carry shadows in their
-  default state.
+- **Feature grids:** Always **3-up** on desktop (`grid-cols-3`), each cell
+  a `rounded-md bg-surface` card separated by grid `gap` — never by drawn
+  rules.
+- **Card padding:** 12px compact, 20–24px default. In-flow cards carry no
+  shadow unless raised (`shadow-raised`); overlays use `shadow-floating`.
 - **Density rhythm:** 4/8 micro-scale for inline gaps (icon-to-text,
   dot-to-label), 12/14/16 for component padding, 24/28 for card padding, 36
   for section gutters, 64–96 for section breathing room.
@@ -739,23 +985,26 @@ Reach for these to keep the engineering-document feel consistent:
 
 ## 9. Status & semantics
 
-`StatusPanel` (§10) is the canonical status display — bordered, monospaced,
-icon + headline + detail. The body fill stays `bg` in every variant; only
-the chrome (border + icon + headline) changes.
+`StatusPanel` (§10) is the canonical status display — a rounded row on a
+muted tinted fill, monospaced, icon + headline + detail. No stripe, no
+outline in any variant; the tint + icon + headline color carry the
+severity.
 
-| Variant     | Border + icon token | Body fill |
-| ----------- | ------------------- | --------- |
-| `v-info`    | `rule` (ink icon)   | `bg`      |
-| `v-success` | `accent`            | `bg`      |
-| `v-warn`    | `warn`              | `bg`      |
-| `v-alert`   | `alert`             | `bg`      |
+| Variant     | Icon + headline | Body fill     |
+| ----------- | --------------- | ------------- |
+| `v-info`    | `ink`           | `surface`     |
+| `v-success` | `ok`            | `ok-muted`    |
+| `v-warn`    | `warn`          | `warn-muted`  |
+| `v-alert`   | `alert`         | `alert-muted` |
 
-**In tables and traces:** express row severity with a left-edge `border-l-2`
-stripe plus a faint tinted background (e.g. `bg-alert/5`). Never with a
-full ring or a solid status background. See `Trace` (§10).
+**In tables and traces:** the same recipe — the status's `-muted` tinted
+background plus its text color and dot. Never a stripe, ring, or solid
+status background. See `Trace` (§10).
 
-For inline "live" emphasis, pair a `StatusDot` with the `pulse-dot`
-utility — the only sanctioned glow.
+**Dot semantics:** green (`ok`) means completed; blue (`accent`) is reserved
+for live/running (animated) and selected states; `warn` for pending; `alert`
+for failed. For inline "live" emphasis, pair a `StatusDot` with the
+`pulse-dot` utility — the only sanctioned glow.
 
 ---
 
@@ -820,20 +1069,22 @@ export function Caret({ className }: CaretProps) {
 
 ### `StatusDot`
 
-6px circle. The only place `rounded-full` is allowed besides glyphs.
-Optional `.pulse-dot` glow for "live" emphasis.
+6px circle. Optional `.pulse-dot` glow for "live" emphasis. Tone semantics
+per §9: `ok` = completed, `accent` = live/selected, `warn` = pending,
+`alert` = failed.
 
 ```tsx
 import * as React from 'react'
 import { cn } from '@/lib/utils'
 
-type DotTone = 'accent' | 'alert' | 'warn' | 'ink'
+type DotTone = 'accent' | 'alert' | 'warn' | 'ink' | 'ok'
 
 const dotTone: Record<DotTone, string> = {
   accent: 'bg-accent',
   alert: 'bg-alert',
   warn: 'bg-warn',
   ink: 'bg-ink',
+  ok: 'bg-ok',
 }
 
 interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -864,12 +1115,14 @@ export function StatusDot({
 
 ### `Button`
 
-Variants: `primary` (ink fill, hover inverts to outlined `bg`), `ghost`
-(transparent → solid ink on hover), `pill` (compact nav button), `icon`
-(30×30 rule-bordered), `terminal` (full-width row with `$` prompt + command
-+ optional copy), `wiggle` (primary + corner badge slot + `.wiggle`). Sizes:
-`sm` `md` `lg` `icon`. Depends on `class-variance-authority` and
-`@radix-ui/react-slot`.
+Variants: `primary` (ink fill, 6px radius — reads as a light chip in dark
+mode), `ghost` (borderless, faint text → `surface-hover` fill on hover),
+`pill` (compact borderless `surface` chip), `icon` (30×30 borderless,
+`surface-hover` on hover), `terminal` (full-width borderless `surface` row
+with `$` prompt + command + optional copy), `wiggle` (primary + corner badge
+slot + `.wiggle`). Sizes: `sm` `md` `lg` `icon`. Focus is a 2px
+`rule-focus` ring — the only stroke a button ever shows. Depends on
+`class-variance-authority` and `@radix-ui/react-slot`.
 
 ```tsx
 import * as React from 'react'
@@ -878,22 +1131,22 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-x-2 whitespace-nowrap font-mono lowercase rounded-none transition-[background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-40 select-none',
+  'inline-flex items-center justify-center gap-x-2 whitespace-nowrap font-mono lowercase rounded-sm transition-[background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus disabled:pointer-events-none disabled:opacity-40 select-none',
   {
     variants: {
       variant: {
         primary:
-          'bg-ink text-bg border border-ink hover:bg-bg hover:text-ink',
+          'bg-ink text-bg border border-transparent hover:bg-ink/90 rounded-md',
         ghost:
-          'bg-transparent text-ink border border-transparent hover:bg-ink hover:text-bg',
+          'bg-transparent text-ink-faint border border-transparent hover:bg-surface-hover hover:text-ink',
         pill:
-          'bg-bg text-ink border border-ink hover:bg-ink hover:text-bg',
+          'bg-surface text-ink border border-transparent hover:bg-surface-hover',
         icon:
-          'bg-bg text-ink-faint border border-rule hover:text-ink',
+          'bg-transparent text-ink-faint border border-transparent hover:bg-surface-hover hover:text-ink',
         terminal:
-          'bg-bg text-ink border border-rule justify-start',
+          'bg-surface text-ink border border-transparent justify-start hover:bg-surface-hover',
         wiggle:
-          'wiggle bg-ink text-bg border border-ink hover:bg-bg hover:text-ink relative',
+          'wiggle bg-ink text-bg border border-transparent hover:bg-ink/90 rounded-md relative',
       },
       size: {
         sm: 'h-8 px-3 text-[13px]',
@@ -937,8 +1190,8 @@ export { buttonVariants }
 ### `StatusPanel`
 
 A row component for system messages: 18px icon slot, 13px Semi-Bold
-headline, 12px ink-faint detail. Variants tint the **border + icon +
-headline only** — body fill stays `bg`.
+headline, 12px ink-faint detail. Variants are a **muted tinted fill** —
+no stripe, no outline (§9).
 
 ```tsx
 import * as React from 'react'
@@ -948,25 +1201,25 @@ export type StatusVariant = 'info' | 'success' | 'warn' | 'alert'
 
 const variantTone: Record<
   StatusVariant,
-  { border: string; icon: string; headline: string }
+  { fill: string; icon: string; headline: string }
 > = {
   info: {
-    border: 'border-rule',
+    fill: 'bg-surface',
     icon: 'text-ink',
     headline: 'text-ink',
   },
   success: {
-    border: 'border-accent',
-    icon: 'text-accent',
-    headline: 'text-accent',
+    fill: 'bg-ok-muted',
+    icon: 'text-ok',
+    headline: 'text-ok',
   },
   warn: {
-    border: 'border-warn',
+    fill: 'bg-warn-muted',
     icon: 'text-warn',
     headline: 'text-warn',
   },
   alert: {
-    border: 'border-alert',
+    fill: 'bg-alert-muted',
     icon: 'text-alert',
     headline: 'text-alert',
   },
@@ -991,8 +1244,8 @@ export function StatusPanel({
   return (
     <div
       className={cn(
-        'flex items-start gap-x-3 border bg-bg px-3.5 py-3',
-        tone.border,
+        'flex items-start gap-x-3 rounded-md px-3.5 py-3',
+        tone.fill,
         className,
       )}
     >
@@ -1026,10 +1279,11 @@ export function StatusPanel({
 
 ### `CodeBlock`
 
-`bg` fill, 1px `rule` border, monospace at 12.5px / line-height 1.55. Light
-syntax tinting: comments italic-ghost, strings in `accent`, keywords
-bold-ink, numbers in `alert`. The accent orange is reserved for **string
-literals and the active call return**, not arbitrary keywords.
+A `bg` well — the canvas tone punching through the surface it sits on, no
+border — monospace at 12.5px / line-height 1.55. Light syntax tinting:
+comments italic-ghost, strings in `accent`, keywords bold-ink, numbers in
+`alert`. The accent orange is reserved for **string literals and the active
+call return**, not arbitrary keywords.
 
 ```tsx
 import * as React from 'react'
@@ -1043,7 +1297,7 @@ export function CodeBlock({ className, children, ...props }: CodeBlockProps) {
   return (
     <pre
       className={cn(
-        'border border-rule bg-bg overflow-x-auto px-5 py-4 font-mono text-[12.5px] leading-[1.55] text-ink',
+        'rounded-sm bg-bg overflow-x-auto px-5 py-4 font-mono text-[12.5px] leading-[1.55] text-ink',
         className,
       )}
       {...props}
@@ -1056,8 +1310,9 @@ export function CodeBlock({ className, children, ...props }: CodeBlockProps) {
 
 ### `Terminal` & `TerminalRow`
 
-Header strip in `panel` with a label-caps title; body in `bg` with an orange
-`$` prompt, ink command, and an animated 6×13 ink caret.
+Header strip in `panel-raised` with a label-caps title; `surface` body with
+an orange `$` prompt, ink command, and an animated 6×13 ink caret. The
+head/body surface step is the separator — no divider.
 
 ```tsx
 import * as React from 'react'
@@ -1073,9 +1328,9 @@ interface TerminalProps {
 
 export function Terminal({ title, children, className }: TerminalProps) {
   return (
-    <div className={cn('border border-rule bg-bg', className)}>
+    <div className={cn('rounded-md bg-surface overflow-hidden', className)}>
       {title ? (
-        <div className="bg-panel px-3.5 py-2 border-b border-rule font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
+        <div className="bg-panel-raised px-3.5 py-2 font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
           {title}
         </div>
       ) : null}
@@ -1108,8 +1363,9 @@ export function TerminalRow({
 ### `Trace`
 
 Header strip + a list of trace rows with a `StatusDot`, op label, duration,
-and a label-caps status. A waterfall of horizontal bars follows: `rule-2`
-background, `ink` fill, `alert` fill for error spans.
+and a label-caps status. A waterfall of horizontal bars follows: `surface`
+track, `ink` fill, `alert` fill for error spans. Rows separate by spacing —
+no dividers.
 
 > `TraceStatus` is the consumer's own domain type. The shape assumed here is
 > `{ id, op, durationMs, status, startMs?, spanMs? }`. Replace with whatever
@@ -1140,9 +1396,9 @@ interface TraceProps {
 
 const statusTone: Record<
   TraceStatus,
-  { dot: 'accent' | 'warn' | 'alert'; label: string; bar: string }
+  { dot: 'ok' | 'warn' | 'alert'; label: string; bar: string }
 > = {
-  ok: { dot: 'accent', label: 'text-accent', bar: 'bg-ink' },
+  ok: { dot: 'ok', label: 'text-ok', bar: 'bg-ink' },
   warn: { dot: 'warn', label: 'text-warn', bar: 'bg-warn' },
   err: { dot: 'alert', label: 'text-alert', bar: 'bg-alert' },
 }
@@ -1154,11 +1410,11 @@ export function Trace({ title, rows, totalMs, className }: TraceProps) {
       ...rows.map((r) => (r.startMs ?? 0) + (r.spanMs ?? r.durationMs)),
     )
   return (
-    <div className={cn('border border-rule bg-bg', className)}>
-      <div className="bg-panel px-3.5 py-2 border-b border-rule font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
+    <div className={cn('rounded-md bg-surface overflow-hidden', className)}>
+      <div className="bg-panel-raised px-3.5 py-2 font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
         {title}
       </div>
-      <ul className="divide-y divide-rule-2">
+      <ul>
         {rows.map((row) => {
           const tone = statusTone[row.status]
           const start = ((row.startMs ?? 0) / span) * 100
@@ -1181,7 +1437,7 @@ export function Trace({ title, rows, totalMs, className }: TraceProps) {
               >
                 {row.status}
               </span>
-              <div className="col-span-4 mt-1 h-1 bg-rule-2 relative">
+              <div className="col-span-4 mt-1 h-1 bg-surface relative">
                 <div
                   className={cn('absolute top-0 h-full', tone.bar)}
                   style={{ left: `${start}%`, width: `${width}%` }}
@@ -1198,9 +1454,10 @@ export function Trace({ title, rows, totalMs, className }: TraceProps) {
 
 ### `Cell`
 
-A grid-bordered cell — the universal container for short prose blocks
-(features, hellos, pull-quotes). 28px padding, `bg` fill, optional 16px
-Semi-Bold ink title, 13px ink-faint body capped at ~34ch.
+The universal container for short prose blocks (features, hellos,
+pull-quotes, empty states): a borderless `surface` card with a 6px radius
+and 20px padding, optional 16px Semi-Bold ink title, 13px ink-faint body
+capped at ~34ch.
 
 ```tsx
 import * as React from 'react'
@@ -1214,7 +1471,7 @@ interface CellProps {
 
 export function Cell({ title, children, className }: CellProps) {
   return (
-    <div className={cn('border border-rule bg-bg p-7', className)}>
+    <div className={cn('rounded-md bg-surface p-5', className)}>
       {title ? (
         <div className="font-mono text-[16px] font-semibold tracking-[-0.01em] text-ink mb-3 lowercase">
           {title}
@@ -1232,8 +1489,8 @@ export function Cell({ title, children, className }: CellProps) {
 
 400px-wide ticker card with a name + version row, description, a
 `panel`-tinted command block, and a footer with a kind tag and check icon.
-Focused state switches body fill from `bg` to `panel` and grows a
-`border-l-2 border-l-accent` rail on the left edge.
+Focused state switches the body fill from `surface` to `surface-selected`
+(the accent tint) — no rail, no outline.
 
 ```tsx
 import * as React from 'react'
@@ -1261,12 +1518,12 @@ export function WorkerCard({
   return (
     <article
       className={cn(
-        'w-[400px] border border-rule transition-colors',
-        focused ? 'bg-panel border-l-2 border-l-accent' : 'bg-bg',
+        'w-[400px] rounded-md overflow-hidden transition-colors',
+        focused ? 'bg-surface-selected' : 'bg-surface',
         className,
       )}
     >
-      <header className="flex items-center justify-between px-4 py-3 border-b border-rule-2">
+      <header className="flex items-center justify-between px-4 py-3">
         <div className="font-mono text-[16px] font-semibold lowercase text-ink">
           {name}
         </div>
@@ -1277,10 +1534,10 @@ export function WorkerCard({
       <div className="px-4 py-3 font-mono text-[13px] leading-[1.7] text-ink-faint">
         {description}
       </div>
-      <div className="bg-panel font-mono text-[12.5px] text-ink px-4 py-2 border-t border-rule-2">
+      <div className="bg-panel font-mono text-[12.5px] text-ink px-4 py-2">
         {command}
       </div>
-      <footer className="flex items-center justify-between px-4 py-2 border-t border-rule-2">
+      <footer className="flex items-center justify-between px-4 py-2">
         <span className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
           {kind}
         </span>
@@ -1326,12 +1583,12 @@ export function HelloCard({ items, flow, className }: HelloCardProps) {
           <div
             key={item.id}
             className={cn(
-              'border border-rule bg-bg',
+              'rounded-md bg-panel-raised overflow-hidden',
               isUnder && 'absolute inset-x-0 -z-10 deal-shadow',
             )}
             style={isUnder ? { top: `${idx * 120}px` } : undefined}
           >
-            <header className="flex items-center justify-between px-4 py-2 border-b border-rule-2 bg-panel font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
+            <header className="flex items-center justify-between px-4 py-2 bg-panel font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
               <span>{item.language}</span>
               <span className="text-ink-ghost tabular-nums">
                 step {item.step}
@@ -1350,9 +1607,9 @@ export function HelloCard({ items, flow, className }: HelloCardProps) {
 
 ### `EmailRow`
 
-No border, no fill — just a 1px ink underline that switches to `accent` on
-focus. The submit arrow lives inside the row, right-aligned. Helper text
-below is label-caps in `ink-ghost`.
+The standard input recipe: a rounded `surface` fill whose only stroke is
+the `rule-focus` underline while focused. The submit arrow lives inside the
+row, right-aligned. Helper text below is label-caps in `ink-ghost`.
 
 ```tsx
 import * as React from 'react'
@@ -1372,7 +1629,7 @@ export function EmailRow({
 }: EmailRowProps) {
   return (
     <form className={cn('flex flex-col gap-y-2', className)} {...formProps}>
-      <div className="flex items-center gap-x-2 border-b border-ink focus-within:border-accent transition-colors">
+      <div className="flex items-center gap-x-2 rounded-sm bg-surface px-3 border-b border-transparent focus-within:border-rule-focus transition-colors">
         <input
           type="email"
           {...inputProps}
@@ -1442,10 +1699,9 @@ export function SearchField({
 
 ### `ModeToggle`
 
-Two-up segmented control with a 1px `rule` border and 2px internal padding.
-Active button: solid `ink` fill, `bg` text. Inactive: transparent,
-`ink-faint` text. Joined left-to-right with internal 1px dividers when more
-than two options are passed.
+Compact segmented control on a `surface` track (no border, 6px radius, 2px
+internal padding). Active segment: `accent-muted` fill (the selection
+tint), `ink` text, 6px radius. Inactive: transparent, `ink-faint` text.
 
 ```tsx
 import * as React from 'react'
@@ -1472,7 +1728,10 @@ export function ModeToggle<T extends string>({
   return (
     <div
       role="tablist"
-      className={cn('inline-flex border border-rule p-[2px]', className)}
+      className={cn(
+        'inline-flex rounded-sm bg-surface p-[2px] gap-[2px]',
+        className,
+      )}
     >
       {options.map((opt) => {
         const active = opt.value === value
@@ -1484,9 +1743,9 @@ export function ModeToggle<T extends string>({
             aria-pressed={active}
             onClick={() => onChange(opt.value)}
             className={cn(
-              'font-mono text-[13px] px-3 py-1 transition-colors lowercase',
+              'font-mono text-[13px] px-3 py-1 rounded-xs transition-colors lowercase',
               active
-                ? 'bg-ink text-bg'
+                ? 'bg-accent-muted text-ink'
                 : 'bg-transparent text-ink-faint hover:text-ink',
             )}
           >
@@ -1501,7 +1760,7 @@ export function ModeToggle<T extends string>({
 
 ### `NumericBadge`
 
-16px tall, 4px horizontal padding, `accent` fill on a `bg` border. Sits on
+16px tall, 4px horizontal padding, `accent` fill, 6px radius. Sits on
 the top-right corner of a CTA to indicate count or unread.
 
 ```tsx
@@ -1520,7 +1779,7 @@ export function NumericBadge({
   return (
     <span
       className={cn(
-        'inline-flex items-center justify-center bg-accent text-bg font-mono text-[11px] font-medium uppercase tracking-[0.06em] px-1 h-4 tabular-nums border border-bg',
+        'inline-flex items-center justify-center rounded-xs bg-accent text-accent-fg font-mono text-[11px] font-medium uppercase tracking-[0.06em] px-1 h-4 tabular-nums',
         className,
       )}
       {...props}
@@ -1534,7 +1793,8 @@ export function NumericBadge({
 ### `Sheet` & `PageHeader`
 
 `Sheet` is the standard page-level wrapper — `min(1200px, 100%)`, centered,
-1px outer rule. `PageHeader` carries an `eyebrow` (rendered through
+defined by its surface against the canvas (no outer rule). `PageHeader`
+carries an `eyebrow` (rendered through
 `Prompt`), a `title` (display-hero or headline-section), an optional
 description in `ink-faint`, and an `actions` slot on the right.
 
@@ -1552,7 +1812,7 @@ export function Sheet({ children, className }: SheetProps) {
   return (
     <div
       className={cn(
-        'mx-auto w-full max-w-[1200px] border-x border-rule min-h-screen bg-bg',
+        'mx-auto w-full max-w-[1200px] min-h-screen bg-bg',
         className,
       )}
     >
@@ -1614,42 +1874,57 @@ export function PageHeader({
 
 - Keep every text element **lowercase**, including headlines and buttons.
   The only uppercase text is the `label-caps-*` styles with explicit
-  tracking.
-- Lean on **1px hairline rules** to define structure. Add a border before
-  reaching for a background fill.
-- **Ration the orange accent.** One accent moment per visible region — the
-  rest is ink, faint, and ghost.
-- Use the **`panel` tone** for headers and focused states. It is the only
-  "elevation" the system permits.
+  tracking — used sparingly for small section labels.
+- Lean on **layered surfaces** to define structure — a one-step background
+  difference is the only separator. The sole visible stroke anywhere in the
+  chrome is the focus indicator (`rule-focus`).
+- **Ration the accent** (burnt orange on cream, electric blue on dark) to
+  selected, focused, active, and live states. One accent moment per visible
+  region — the rest is ink, faint, and ghost.
+- Mark selection with the **`surface-selected` accent-tinted fill** — the
+  canonical "you are here" signal. No rails, no outlines.
+- Use the **one 6px radius everywhere** (§6) — every Tailwind radius step
+  resolves to it, so there is no per-component choice to make.
 - Keep the `iii` wordmark in lowercase, with all six rectangles in `ink`
   (never colored).
-- Use **Chivo Mono for everything**, including body copy. Switching faces
-  breaks the schematic.
-- Use the **Tailwind utility** (`bg-bg`, `text-ink-faint`, `border-rule`,
+- Use **Geist for UI text and Geist Mono for technical data** (trace names,
+  IDs, timestamps, metrics, code). Two families, never a third.
+- Use the **Tailwind utility** (`bg-surface`, `text-ink-faint`,
   `text-accent`) — never the raw CSS variable.
 - Use **container queries** (`@container`, `@3xl:`, `@4xl:`) for panel-level
   responsiveness. Pages set `@container` and grids split with `@3xl:`.
 - Use **`tabular-nums`** on every number, timestamp, and KPI.
+- Keep motion minimal and functional: 100–220ms, `--ease-glide`, honoring
+  `prefers-reduced-motion`.
 
 **Don't**
 
-- Don't introduce **rounded corners** on containers, buttons, inputs, or
-  cards. Reserve `rounded-full` for true symbols (dots, glyphs).
-- Don't add **drop shadows** for default elevation. The `.deal-shadow`
-  stack-card animation is the only sanctioned shadow.
-- Don't use the orange accent for **body text, large fills, or decorative
+- Don't draw **any border or divider for structure or selection** — no
+  outlines on controls, no row dividers, no section rules, no left rails.
+  The chrome may show exactly two lines: the focus indicator
+  (`rule-focus`) and the workspace panels' `edge` frame (§4); charts may
+  draw data lines with explicit alpha-ink fills (`bg-ink/15`, `bg-ink/8`).
+- Don't use `edge` **inside** a panel — it frames the floating workspace
+  panels only; interior hierarchy stays fill-only.
+- Don't deviate from the **single 6px radius** — no in-between values, and
+  `rounded-full` only on genuinely circular elements.
+- Don't add **drop shadows** outside the two theme tokens (`shadow-raised`
+  in-flow, `shadow-floating` for overlays) and the transient `.deal-shadow`.
+  No heavy glows — `pulse-dot` is the only glow.
+- Don't use the accent for **body text, large fills, or decorative
   blocks.** It loses meaning the moment it stops being rare.
 - Don't mix proportional and tabular figures. Numbers are always tabular
   monospace.
-- Don't use **gradients** or color stops anywhere. The system is flat by
-  design.
+- Don't use **gradients** decoratively. The two sanctioned exceptions are
+  the `.fcall-chrome` accent wash on function-call cards and the
+  `.thinking-shimmer` streaming-text mask.
 - Don't capitalize a sentence to "fix" a heading — rewrite it instead.
 - Don't stack two headings of the same scale. Headlines are always paired
   with an ink-faint continuation, never another headline.
-- Don't add a **second typeface**, even for code or numbers. The
-  single-face constraint is load-bearing.
+- Don't set technical data (IDs, metrics, span labels) in the sans face —
+  and don't drop mono below 11px.
 - Don't paint **full-color status backgrounds** — use text color plus a
-  small icon, dot, or left stripe.
+  small icon, dot, or left stripe on the status's `-muted` tint.
 - Don't introduce **viewport breakpoints** for panel layouts — use
   container queries.
 
@@ -1699,14 +1974,14 @@ example), use a **hybrid layout** inside a single `Sheet`:
    §10), shown only when no search filter is active. The grid uses
    container queries (`grid-cols-1 @3xl:grid-cols-2 @5xl:grid-cols-3`) so
    it stays responsive within the `Sheet`. Eyebrow above the grid is a
-   `label-caps-lg` heading sitting on a `border-t border-rule` separator.
+   `label-caps-lg` heading with section spacing — no separator rule.
 2. **Search + index** — the spec's `SearchField` (24px display caret)
-   immediately above a `border border-rule bg-bg` container with rows
-   separated by `divide-y divide-rule-2`. Each row is a compact
+   immediately above a `rounded-md bg-surface` container; rows separate by
+   hover/selected surfaces (no per-row dividers). Each row is a compact
    row-shaped variant of `WorkerCard` (no command block; just name +
-   version + description + meta). Hover states use the same
-   `bg-panel border-l-2 border-l-accent` rail that focused `WorkerCard`s
-   use in §10.
+   version + description + meta). Hover uses `bg-surface-hover`; the
+   focused/selected row uses the same `bg-surface-selected` tint as the
+   focused `WorkerCard` in §10.
 3. **Search behaviour** — when the search field has a non-empty query, the
    featured row collapses entirely; only the filtered index is shown so
    that "featured" content never competes with results.
@@ -1729,19 +2004,20 @@ accordions or modals at the row level.
 The composition has three nesting levels and uses one tonal step per level:
 
 ```
-section eyebrow (label-caps)            <- bg page
-  card        bg-panel head + bg body   <- per function/trigger
-    pane      bg-paper-2 head + bg body <- per schema (request/response)
-      tree    flat type-table           <- per field
+section eyebrow (label-caps)                    <- bg page
+  card    bg-panel-raised head + surface body   <- per function/trigger
+    pane    bg-paper-2 head + bg body           <- per schema (request/response)
+      tree    flat type-table                   <- per field
 ```
 
 1. **Sections** — two `Section`s (functions, triggers), each with a
    `label-caps-lg` eyebrow on the left and a small ink-ghost count on the
    right. Same chrome already used by other tabs on the worker page; do not
    wrap the section bodies in an additional border.
-2. **Card** — a bordered `article` per function/trigger. The `bg-panel` head
-   strip carries the name (`title-cell`) on the left, any `metadata.tags`
-   rendered as `rule-2`-bordered label-caps-sm pills next to it, and the
+2. **Card** — a `rounded-md bg-surface` `article` per function/trigger. The
+   `bg-panel-raised` head strip carries the name (`title-cell`) on the left,
+   any `metadata.tags` rendered as borderless `bg-surface` label-caps-sm
+   pills next to it, and the
    kind label (`FUNCTION` / `TRIGGER`) in label-caps on the right. Function
    and trigger cards share the exact same head; the only difference is
    what the name represents. **Triggers do not carry a separate "type"
@@ -1751,17 +2027,18 @@ section eyebrow (label-caps)            <- bg page
    `scroll-mt-20` so that anchor navigation lands cleanly below the sticky
    site header.
 3. **Pane** — the two schemas inside a card sit in a `@2xl:grid-cols-2`
-   grid, separated by a 1px `bg-rule-2` gutter. Each pane is a
-   `border-rule` block with a `bg-paper-2` head strip carrying a
+   grid separated by grid `gap`. Each pane is a
+   `rounded-sm` block with a `bg-paper-2` head strip carrying a
    label-caps-sm eyebrow (`request` / `response` for functions,
    `invocation` / `return` for triggers). The `bg-paper-2` step makes the
-   pane read as one tonal level "down" from the card's `bg-panel` head.
+   pane read as one tonal level "down" from the card's `bg-panel-raised`
+   head.
 4. **Tree** — fields render as a flat type-table inside the pane body, one
    row per field. Each row is `name  type  required-marker  enum  constraints`
    on one line, with the description on a second line in
    `text-ink-faint text-[12px]`. Nested objects, arrays-of-objects, and
-   union variants indent under the parent with a `border-l border-rule-2`
-   guide. Nesting deeper than three levels collapses behind a native
+   union variants indent under the parent by indentation alone (no guide
+   line). Nesting deeper than three levels collapses behind a native
    `<details>` row labelled "… expand N nested" so the surface stays
    client-JS-free.
 
@@ -1782,8 +2059,9 @@ worker page.
 **Sidebar summary.** Pair the panel with an `api` card in the worker
 page's right-hand `aside` (placed between `details` and `author`) listing
 every function and trigger the worker exposes. The card uses the same
-chrome as the other sidebar cards (`border-rule` block + `bg-panel` head
-+ `label-caps-lg` title) and contains two sub-sections — `functions` and
+chrome as the other sidebar cards (`rounded-md bg-surface` block +
+`bg-panel-raised` head + `label-caps-lg` title) and contains two
+sub-sections — `functions` and
 `triggers` — each headed by a `label-caps-sm` eyebrow with a tabular
 count on the right. Each row is a Next.js `Link` whose `href` always
 includes `?tab=api#<anchor>`, where the anchor is the same id stamped on
@@ -1806,20 +2084,18 @@ internally instead of overflowing the viewport. At narrower widths the
 aside stacks below the main column and is not sticky.
 
 **Selection echo.** When a sidebar link is clicked, the corresponding
-function/trigger card lights up with the canonical `border-l-2
-border-l-accent` rail (the same recipe used by `WorkerCard` focused
-state in §10 and the `versions` Row's `aria-current` style) and the
-clicked sidebar link itself switches to `text-accent`. This gives the
-user a clear "you are here" signal that survives any subsequent
-scrolling. The 1px → 2px border shift on the left edge is the
-sanctioned accent on the existing rule grid (§4 "Allowed accents on top
-of borders").
+function/trigger card lights up with the canonical `bg-surface-selected`
+tint (the same recipe used by `WorkerCard` focused state in §10 and the
+`versions` Row's `aria-current` style) and the clicked sidebar link itself
+switches to `text-accent`. This gives the user a clear "you are here"
+signal that survives any subsequent scrolling. The tinted fill is the
+sanctioned selection accent (§4 "Selection and severity").
 
 **Why CSS `:target` is not enough.** Next.js `Link` performs same-page
 hash navigation through `history.pushState`, which does **not** fire
 `hashchange` and which most browsers do **not** treat as a `:target`
 re-evaluation trigger. As a result, plain
-`target:border-l-2 target:border-l-accent` only highlights on full page
+`target:bg-surface-selected` only highlights on full page
 load and back/forward — *not* on a soft sidebar click. The api panel
 must drive the highlight from JS instead.
 
@@ -1840,14 +2116,14 @@ Wiring:
 - **Cards** wrap their `<article>` in a tiny client component
   ([`hash-card.tsx`](app/src/components/api-reference/hash-card.tsx))
   that calls `useActiveHash()` and conditionally adds
-  `border-l-2 border-l-accent` when the hash matches its `id`. The card
+  `bg-surface-selected` when the hash matches its `id`. The card
   body (header, description, schema panes) is still a server-rendered
   React tree passed in as `children`, so the only JS that runs in the
   browser is the wrapper.
 - **Sidebar links** ([`summary-list.tsx`](app/src/components/api-reference/summary-list.tsx))
   call `useActiveHash()` for their visual state and
   `setActiveHash(target)` from `onClick`, which broadcasts to the
-  card subscribers immediately so the rail and the link light up in
+  card subscribers immediately so the tint and the link light up in
   the same frame as the click — even though Next.js will not have
   fired `hashchange` yet.
 
@@ -1859,6 +2135,6 @@ the user crossed sub-sections.
 
 **Accent rationing.** Per §3, the selection still costs only one accent
 moment per visible region: in the sidebar it is the active link; on the
-panel it is the rail on the targeted card. The required-marker accent
-inside the schema tree continues to coexist because it lives at a
+panel it is the tinted fill on the targeted card. The required-marker
+accent inside the schema tree continues to coexist because it lives at a
 different scale (a single character per row).
diff --git a/console/web/public/vendor/console-ui.js b/console/web/public/vendor/console-ui.js
index 47170cbe3..7dfe250b2 100644
--- a/console/web/public/vendor/console-ui.js
+++ b/console/web/public/vendor/console-ui.js
@@ -25,10 +25,16 @@ export const {
   DropdownMenuTrigger,
   EmptyState,
   ErrorBoundary,
+  FileDiff,
   Input,
   JsonHighlight,
   Markdown,
   MarkdownPreview,
+  PageBody,
+  PageHeader,
+  PageMain,
+  PageShell,
+  PageSidebar,
   Select,
   Skeleton,
   StatusDot,
diff --git a/console/web/src/App.tsx b/console/web/src/App.tsx
index 280c9a925..d78fb5738 100644
--- a/console/web/src/App.tsx
+++ b/console/web/src/App.tsx
@@ -1,16 +1,18 @@
-import { CircleQuestionMark, SettingsIcon } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { ChatDock } from '@/components/chat/ChatDock'
+import { CircleQuestionMark, SettingsIcon, X } from 'lucide-react'
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { ChatPanel } from '@/components/chat/ChatPanel'
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
 } from '@/components/ui/Dialog'
-import { ModeToggle } from '@/components/ui/ModeToggle'
 import { Sheet } from '@/components/ui/Sheet'
 import { Wordmark } from '@/components/ui/Wordmark'
-import { useChatDock } from '@/hooks/use-chat-dock'
+import { EmptyPane } from '@/components/workspace/EmptyPane'
+import { EdgeAddZone, ResizeHandle } from '@/components/workspace/pane-controls'
+import { TabStrip } from '@/components/workspace/TabStrip'
+import { useScreenOptions } from '@/components/workspace/use-screen-options'
 import {
   hashForExtPage,
   useExtPageRoute,
@@ -18,25 +20,35 @@ import {
   type View,
 } from '@/hooks/use-hash-route'
 import { useTheme } from '@/hooks/use-theme'
-import { type DockSignal, getDockSignal } from '@/lib/chat-activity'
 import {
-  ConversationsProvider,
-  useConversationsCtx,
-} from '@/lib/conversations-context'
-import { buildViewOptions } from '@/lib/nav-options'
-import { type RegisteredPage, useExtPages } from '@/lib/ui-slots'
+  type UseWorkspaceTabsReturn,
+  useWorkspaceTabs,
+} from '@/hooks/use-workspace-tabs'
+import { ConversationsProvider } from '@/lib/conversations-context'
 import { cn } from '@/lib/utils'
+import {
+  CHAT_SCREEN,
+  extPageIdForScreen,
+  MAX_COLUMNS,
+  MIN_COLUMN_FRACTION,
+  screenForView,
+  type TabScreen,
+  tabColumns,
+  tabSizes,
+} from '@/lib/workspace-tabs'
 import { Configuration } from '@/pages/Configuration'
 import { ExtPage } from '@/pages/Ext'
 import { TracesV2 } from '@/pages/TracesV2'
 import { Workers } from '@/pages/Workers'
+import type { PanelSide } from '@/types/injectable-ui'
 
 export function App() {
   const [theme, setTheme] = useTheme()
   const [view, setView] = useHashRoute()
   const extPageId = useExtPageRoute()
-  const dock = useChatDock()
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
+  const workspace = useWorkspaceTabs()
+  const { activeTab, activeTabId } = workspace
 
   // An active extension page that disappears (hot-reload failure, worker
   // disconnect, unregister) falls back to the default view.
@@ -44,22 +56,88 @@ export function App() {
     setView('traces')
   }, [setView])
 
-  /* When the dock transitions from collapsed → expanded, focus the
-     composer so the user can start typing immediately. requestAnimationFrame
-     waits for the mount/paint cycle; if the editor isn't there (no active
-     conversation, etc.) the focus is a no-op. */
-  const wasCollapsedRef = useRef(dock.collapsed)
+  // ── Hash → tabs ──
+  // A hash navigation (deep link, in-app `window.location.hash = …`) must
+  // land on a tab showing that screen: the active tab if it already does,
+  // else an existing tab, else a freshly created one. Guarded by a ref so
+  // it only reacts to genuine HASH changes — tab activation must never
+  // bounce the hash back. On mount an explicit hash wins over the stored
+  // active tab; a bare `#/` defers to it.
+  const hashScreen = screenForView(view, extPageId)
+  // Deep-link fallback for closing settings from a chat-only/empty tab.
+  const lastTabViewRef = useRef<View>('traces')
   useEffect(() => {
-    const wasCollapsed = wasCollapsedRef.current
-    wasCollapsedRef.current = dock.collapsed
-    if (!wasCollapsed || dock.collapsed) return
-    if (typeof window === 'undefined') return
-    const frame = window.requestAnimationFrame(() => {
-      const editor = document.querySelector<HTMLElement>('.composer-editor')
-      editor?.focus()
-    })
-    return () => window.cancelAnimationFrame(frame)
-  }, [dock.collapsed])
+    if (view !== 'configuration' && view !== 'ext')
+      lastTabViewRef.current = view
+  }, [view])
+  const lastHashScreenRef = useRef<TabScreen | null>(
+    typeof window !== 'undefined' &&
+      window.location.hash &&
+      window.location.hash !== '#' &&
+      window.location.hash !== '#/'
+      ? null
+      : hashScreen,
+  )
+  const workspaceRef = useRef(workspace)
+  workspaceRef.current = workspace
+  // Closing settings routes back to the ACTIVE tab's own screen (never to
+  // whichever tab happens to own the previous view — that would switch
+  // tabs under the user). Pre-marking keeps the hash-inbound effect quiet.
+  const closeSettings = useCallback(() => {
+    const primary = workspaceRef.current.activeTab.screens.find(
+      (s): s is TabScreen => s !== null && s !== CHAT_SCREEN,
+    )
+    if (primary) {
+      lastHashScreenRef.current = primary
+      const extId = extPageIdForScreen(primary)
+      if (extId) window.location.hash = hashForExtPage(extId)
+      else setView(primary as View)
+    } else {
+      lastHashScreenRef.current = lastTabViewRef.current
+      setView(lastTabViewRef.current)
+    }
+  }, [setView])
+  const toggleSettings = useCallback(() => {
+    if (view === 'configuration') closeSettings()
+    else setView('configuration')
+  }, [view, setView, closeSettings])
+  useEffect(() => {
+    if (lastHashScreenRef.current === hashScreen) return
+    lastHashScreenRef.current = hashScreen
+    // No tab representation (settings overlay, unresolved ext route):
+    // the tab strip has nothing to react to — and reacting to the ext
+    // transient is what used to conjure duplicate tabs.
+    if (hashScreen === null) return
+    const ws = workspaceRef.current
+    if (ws.activeTab.screens.includes(hashScreen)) return
+    const existing = ws.tabs.find((t) => t.screens.includes(hashScreen))
+    if (existing) ws.activateTab(existing.id)
+    else ws.createTab({ columns: 1, screens: [hashScreen] })
+  }, [hashScreen])
+
+  // ── Tabs → hash ──
+  // Activating a tab whose screens don't cover the current hash points the
+  // hash at the tab's first routed screen, so page-internal sub-routes and
+  // deep links keep working. Chat-only and empty tabs leave the hash alone.
+  const prevActiveTabIdRef = useRef<string | null>(null)
+  useEffect(() => {
+    const prev = prevActiveTabIdRef.current
+    prevActiveTabIdRef.current = activeTabId
+    if (prev === null || prev === activeTabId) return
+    // hashScreen null (settings overlay open / ext transient): always
+    // route to the activated tab's primary screen. The null-safe check
+    // matters — `screens.includes(null)` would match an EMPTY column.
+    if (hashScreen !== null && activeTab.screens.includes(hashScreen)) return
+    const primary = activeTab.screens.find(
+      (s): s is TabScreen => s !== null && s !== CHAT_SCREEN,
+    )
+    if (!primary) return
+    // Pre-mark so the hash-inbound effect treats this as already handled.
+    lastHashScreenRef.current = primary
+    const extId = extPageIdForScreen(primary)
+    if (extId) window.location.hash = hashForExtPage(extId)
+    else setView(primary as View)
+  }, [activeTabId, activeTab, hashScreen, setView])
 
   /* `?` opens the shortcuts overlay. Ignored when the user is typing into
      editable elements so we don't fight the composer. */
@@ -79,117 +157,271 @@ export function App() {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [])
 
-  const collapseDock = useCallback(() => {
-    dock.setCollapsed(true)
-  }, [dock])
-
   return (
     <ConversationsProvider>
       <Sheet>
         <Header
-          view={view}
-          extPageId={extPageId}
-          onViewChange={setView}
-          dockCollapsed={dock.collapsed}
-          onToggleDock={dock.toggleCollapsed}
+          workspace={workspace}
+          settingsOpen={view === 'configuration'}
+          onToggleSettings={toggleSettings}
           onOpenShortcuts={() => setShortcutsOpen(true)}
         />
-        <div className="flex-1 flex min-h-0">
-          <ChatDock
-            width={dock.width}
-            onWidthChange={dock.setWidth}
-            collapsed={dock.collapsed}
-            onCollapse={collapseDock}
+        <WorkspacePanes workspace={workspace} onExtMissing={onExtMissing} />
+        {view === 'configuration' ? (
+          <ConfigurationOverlay
+            theme={theme}
+            onThemeChange={setTheme}
+            onClose={closeSettings}
           />
-          <div className="flex-1 flex flex-col min-w-0 min-h-0">
-            {view === 'configuration' ? (
-              <Configuration theme={theme} onThemeChange={setTheme} />
-            ) : view === 'workers' ? (
-              <Workers />
-            ) : view === 'ext' ? (
-              <ExtPage onMissing={onExtMissing} />
-            ) : (
-              <TracesV2 />
-            )}
-          </div>
-        </div>
+        ) : null}
         <ShortcutsDialog open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
       </Sheet>
     </ConversationsProvider>
   )
 }
 
-interface HeaderProps {
-  view: View
-  extPageId: string | null
-  onViewChange: (next: View) => void
-  dockCollapsed: boolean
-  onToggleDock: () => void
-  onOpenShortcuts: () => void
+interface WorkspacePanesProps {
+  workspace: UseWorkspaceTabsReturn
+  onExtMissing: () => void
+}
+
+/**
+ * The active tab's columns, each a floating panel over the canvas. An
+ * unattached column renders the attach affordance instead of a page.
+ * Rendered under `ConversationsProvider` (the screen options need it).
+ *
+ * Columns are proportioned by the tab's stored `sizes` fractions; the
+ * 6px gap between panes is a drag handle (live-resized locally, persisted
+ * on release). The container's edge slivers grow the split — hover (or
+ * tap) one to reveal the add-panel affordance.
+ */
+function WorkspacePanes({ workspace, onExtMissing }: WorkspacePanesProps) {
+  const { screenOptions } = useScreenOptions()
+  const { activeTab } = workspace
+  const columns = tabColumns(activeTab)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Fractions while a divider drag is live. Committing does NOT clear
+  // them: the store notifies through useSyncExternalStore, which doesn't
+  // batch with our setState — clearing here would render one frame of
+  // the OLD stored sizes (a visible blink) before the write lands. The
+  // override instead stays on until the stored sizes catch up, and is
+  // dropped in the render below exactly when doing so changes nothing.
+  // Keyed so switching tabs or changing the split drops a stale drag
+  // instead of applying it to the wrong columns.
+  const [dragSizes, setDragSizes] = useState<number[] | null>(null)
+  const dragSizesRef = useRef<number[] | null>(null)
+  const commitPendingRef = useRef(false)
+  const sizesKey = `${activeTab.id}:${columns}`
+  const prevSizesKeyRef = useRef(sizesKey)
+  if (prevSizesKeyRef.current !== sizesKey) {
+    prevSizesKeyRef.current = sizesKey
+    dragSizesRef.current = null
+    commitPendingRef.current = false
+    if (dragSizes !== null) setDragSizes(null)
+  }
+
+  const storedSizes = tabSizes(activeTab)
+  if (
+    dragSizes !== null &&
+    commitPendingRef.current &&
+    dragSizes.length === storedSizes.length &&
+    dragSizes.every((s, i) => Math.abs(s - storedSizes[i]) < 0.001)
+  ) {
+    // The store caught up with the committed drag — retire the override
+    // while it's a visual no-op (guarded render-phase state update).
+    commitPendingRef.current = false
+    dragSizesRef.current = null
+    setDragSizes(null)
+  }
+  const sizes = dragSizes ?? storedSizes
+
+  const resizePair = (index: number, delta: number) => {
+    const current = dragSizesRef.current ?? tabSizes(activeTab)
+    // Clamp so neither neighbor dips under the minimum fraction.
+    const bounded = Math.max(
+      -(current[index] - MIN_COLUMN_FRACTION),
+      Math.min(current[index + 1] - MIN_COLUMN_FRACTION, delta),
+    )
+    if (bounded === 0) return
+    const next = [...current]
+    next[index] += bounded
+    next[index + 1] -= bounded
+    commitPendingRef.current = false
+    dragSizesRef.current = next
+    setDragSizes(next)
+  }
+
+  const commitResize = () => {
+    const next = dragSizesRef.current
+    if (!next) return
+    commitPendingRef.current = true
+    workspace.resizeColumns(activeTab.id, next)
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative flex-1 flex min-h-0 px-1.5 pb-1.5"
+    >
+      {Array.from({ length: columns }, (_, column) => {
+        const screen = activeTab.screens[column] ?? null
+        // 'right' only for the rightmost column of a multi-column tab —
+        // a full-width single column keeps the default 'left' orientation.
+        const panelSide: PanelSide =
+          columns > 1 && column === columns - 1 ? 'right' : 'left'
+        // The header ✕ on every screen: in a split the column goes; the
+        // last column detaches its screen instead (back to the attach
+        // affordance) — a tab never loses its final pane.
+        const closePane = () =>
+          columns > 1
+            ? workspace.removeColumn(activeTab.id, column)
+            : workspace.detachScreen(activeTab.id, column)
+        const pane = (
+          <div
+            // biome-ignore lint/suspicious/noArrayIndexKey: the column POSITION is the identity — the composite key deliberately remounts a pane when its tab or attached screen changes
+            key={`${activeTab.id}:${column}:${screen ?? 'empty'}`}
+            // ×1000: flex-grow sums below 1 only distribute that fraction
+            // of the free space — scaling keeps the ratios AND fills the row.
+            style={{ flexGrow: sizes[column] * 1000 }}
+            className="basis-0 flex flex-col min-w-0 min-h-0 rounded-sm border border-edge bg-panel overflow-hidden"
+          >
+            {screen === null ? (
+              <EmptyPane
+                screenOptions={screenOptions}
+                onAttach={(next) =>
+                  workspace.attachScreen(activeTab.id, column, next)
+                }
+                onRemove={
+                  columns > 1
+                    ? () => workspace.removeColumn(activeTab.id, column)
+                    : undefined
+                }
+              />
+            ) : (
+              <ScreenBody
+                screen={screen}
+                panelSide={panelSide}
+                tabId={activeTab.id}
+                onClose={closePane}
+                onExtMissing={onExtMissing}
+              />
+            )}
+          </div>
+        )
+        if (column === 0) return pane
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: handles are positional by nature
+          <Fragment key={`divider:${activeTab.id}:${column}`}>
+            <ResizeHandle
+              value={sizes[column - 1] * 100}
+              onResize={(delta) => resizePair(column - 1, delta)}
+              onCommit={commitResize}
+              containerWidth={() =>
+                containerRef.current?.getBoundingClientRect().width ?? 0
+              }
+            />
+            {pane}
+          </Fragment>
+        )
+      })}
+
+      {columns < MAX_COLUMNS ? (
+        <>
+          <EdgeAddZone
+            side="left"
+            onAdd={() => workspace.addColumn(activeTab.id, 'left')}
+          />
+          <EdgeAddZone
+            side="right"
+            onAdd={() => workspace.addColumn(activeTab.id, 'right')}
+          />
+        </>
+      ) : null}
+    </div>
+  )
 }
 
-/** Nav value for an injected page — distinct from every first-party View. */
-const EXT_NAV_PREFIX = 'ext:'
+interface ScreenBodyProps {
+  screen: TabScreen
+  /** Which side of the tab this column occupies (forwarded to ext pages). */
+  panelSide: PanelSide
+  /** Hosting workspace tab id (forwarded to ext pages for per-tab state). */
+  tabId: string
+  /** Close this pane — the standard PageHeader ✕ on screens that carry it. */
+  onClose: () => void
+  onExtMissing: () => void
+}
+
+/** One workspace-tab column: the page (or chat view) the screen names.
+    Configuration never appears here — it opens as an overlay page. */
+function ScreenBody({
+  screen,
+  panelSide,
+  tabId,
+  onClose,
+  onExtMissing,
+}: ScreenBodyProps) {
+  const extId = extPageIdForScreen(screen)
+  if (extId !== null) {
+    return (
+      <ExtPage
+        pageId={extId}
+        panelSide={panelSide}
+        tabId={tabId}
+        onRequestClose={onClose}
+        onMissing={onExtMissing}
+      />
+    )
+  }
+  switch (screen) {
+    case CHAT_SCREEN:
+      // The compact header variant — a tab column is width-constrained the
+      // same way the old side dock was, especially in two-column layouts.
+      return <ChatPanel density="dock" onRequestClose={onClose} />
+    case 'workers':
+      return <Workers />
+    default:
+      return <TracesV2 onRequestClose={onClose} />
+  }
+}
 
-function extNavValue(page: RegisteredPage): string {
-  return `${EXT_NAV_PREFIX}${page.id}`
+interface HeaderProps {
+  workspace: UseWorkspaceTabsReturn
+  settingsOpen: boolean
+  onToggleSettings: () => void
+  onOpenShortcuts: () => void
 }
 
 function Header({
-  view,
-  extPageId,
-  onViewChange,
-  dockCollapsed,
-  onToggleDock,
+  workspace,
+  settingsOpen,
+  onToggleSettings,
   onOpenShortcuts,
 }: HeaderProps) {
-  // Optional-worker entries appear only while their worker is present; a
-  // Every per-worker page moved to injected UI; the first-party nav is just
-  // traces + workers, so the header no longer reads worker presence here.
-  // Injected pages: the runtime analogue of worker-presence gating —
-  // presence is the script being loaded, which already tracks worker
-  // connectedness via trigger GC.
-  const extPages = useExtPages()
-  const viewOptions: { value: string; label: string }[] = [
-    ...buildViewOptions(),
-    ...extPages.map((page) => ({
-      value: extNavValue(page),
-      label: page.title,
-    })),
-  ]
-  const navValue =
-    view === 'ext' && extPageId ? `${EXT_NAV_PREFIX}${extPageId}` : view
-  const onNavChange = (next: string) => {
-    if (next.startsWith(EXT_NAV_PREFIX)) {
-      window.location.hash = hashForExtPage(next.slice(EXT_NAV_PREFIX.length))
-    } else {
-      onViewChange(next as View)
-    }
-  }
-  const onConsoleSettings = view === 'configuration'
+  const { extPageTitles } = useScreenOptions()
   return (
-    <header className="flex items-center justify-between pl-3 pr-6 h-12 border-b border-rule shrink-0">
-      <div className="flex items-center gap-3">
-        <DockToggle collapsed={dockCollapsed} onToggle={onToggleDock} />
+    <header className="flex items-center justify-between gap-3 pl-3 pr-6 h-12 shrink-0">
+      <div className="flex items-center gap-3 min-w-0 flex-1">
         <Wordmark />
-        <span className="font-mono text-[11px] mb-[-2px] leading-[14px] uppercase tracking-[0.16em] text-ink-faint font-semibold">
-          {view === 'ext'
-            ? (extPages.find((p) => p.id === extPageId)?.title ?? 'extension')
-            : view}
-        </span>
+        <TabStrip
+          tabs={workspace.tabs}
+          activeTabId={workspace.activeTabId}
+          extPageTitles={extPageTitles}
+          onActivate={workspace.activateTab}
+          onClose={workspace.closeTab}
+          onCreate={() => workspace.createTab({ columns: 1 })}
+          onRename={workspace.renameTab}
+          onReorder={workspace.reorderTab}
+        />
       </div>
       <div className="flex items-center gap-3">
-        <ModeToggle<string>
-          value={navValue}
-          onChange={onNavChange}
-          options={viewOptions}
-        />
         <button
           type="button"
           onClick={onOpenShortcuts}
           aria-label="keyboard shortcuts (?)"
           title="keyboard shortcuts (?)"
-          className="font-mono text-[14px] leading-none w-8 h-8 flex items-center justify-center border bg-transparent text-ink-faint border-rule hover:text-ink hover:border-ink transition-colors focus-visible:border-accent focus-visible:outline-none"
+          className="font-mono text-[14px] leading-none w-8 h-8 flex items-center justify-center rounded-sm border border-transparent bg-transparent text-ink-faint hover:text-ink hover:bg-surface-hover transition-colors focus-visible:border-accent focus-visible:outline-none"
         >
           <span aria-hidden>
             <CircleQuestionMark className="w-4 h-4" />
@@ -197,15 +429,15 @@ function Header({
         </button>
         <button
           type="button"
-          onClick={() => onViewChange('configuration')}
-          aria-pressed={onConsoleSettings}
+          onClick={onToggleSettings}
+          aria-pressed={settingsOpen}
           aria-label="console settings"
           title="console settings"
           className={cn(
-            'font-mono text-[14px] leading-none w-8 h-8 flex items-center justify-center border transition-colors',
-            onConsoleSettings
-              ? 'bg-ink text-bg border-ink'
-              : 'bg-transparent text-ink-faint border-rule hover:text-ink hover:border-ink',
+            'font-mono text-[14px] leading-none w-8 h-8 flex items-center justify-center rounded-sm border transition-colors',
+            settingsOpen
+              ? 'bg-ink text-bg border-transparent'
+              : 'bg-transparent text-ink-faint border-transparent hover:text-ink hover:bg-surface-hover',
           )}
         >
           <SettingsIcon className="w-4 h-4" />
@@ -215,110 +447,50 @@ function Header({
   )
 }
 
-interface DockToggleProps {
-  collapsed: boolean
-  onToggle: () => void
-}
-
-/**
- * Global chat-dock toggle, pinned to the leftmost slot of the app header.
- * One typographic glyph (`>_`), one place: the button state communicates
- * open/closed via the same pressed-vs-outlined vocabulary the configuration
- * gear uses on the opposite end of the header. The `?` button between them
- * documents this binding (and every other) — no inline kbd hint needed.
- *
- * The `_` of the `>_` glyph blinks at terminal cadence so the toggle reads
- * as an AI prompt waiting for input. Suppressed during `active` so the
- * button never carries two concurrent motion sources (the square accent
- * ring is the focal motion; a flickering cursor underneath would be noise).
- *
- * Collapsed state is dimensional, not binary: `getDockSignal()` resolves
- * the active conversation into one of four states. `active` (streaming,
- * pending approval, running tool call) pulses accent so blocking events
- * don't get buried. `attention` and `error` (system message tones) tint
- * the border statically — motion is the wrong gesture for "the engine
- * reported a problem." Clicking the toggle in any signal state expands
- * the dock, which auto-scrolls to the latest message; the user lands on
- * the warn / error content without hunting.
- */
-function DockToggle({ collapsed, onToggle }: DockToggleProps) {
-  const { active } = useConversationsCtx()
-  const signal = getDockSignal(active)
-  const expanded = !collapsed
-  const baseLabel = collapsed ? 'open chat dock' : 'collapse chat dock'
-  const signalPreview = useDockSignalPreview(signal, active)
-  /* When the toggle border carries a warn/error tint, surface the actual
-     system-message text in `title` + `aria-label` so the user can triage
-     without expanding the dock and hunting. Idle/active states get the
-     plain label. */
-  const fullLabel = signalPreview
-    ? `${baseLabel} (⌘\\) — ${signalPreview}`
-    : `${baseLabel} (⌘\\)`
-  return (
-    <button
-      type="button"
-      onClick={onToggle}
-      aria-label={fullLabel}
-      aria-expanded={expanded}
-      aria-controls="chat-dock"
-      title={fullLabel}
-      className={cn(
-        'font-mono text-[14px] leading-none w-7 h-7 flex items-center justify-center border transition-colors focus-visible:border-accent focus-visible:outline-none',
-        expanded ? 'bg-ink text-bg border-ink' : dockToggleSignalClass(signal),
-      )}
-    >
-      {/* Single optical mark: `>` plus a `_` cursor pulled snug underneath
-          via negative letter-spacing so the cluster sits in roughly the
-          same visual footprint as `⚙` and `?` next to it in the header. */}
-      <span
-        aria-hidden
-        className="inline-flex items-baseline"
-        style={{ letterSpacing: '-0.18em' }}
-      >
-        {'>'}
-        <span className={signal === 'active' ? undefined : 'blink'}>_</span>
-      </span>
-    </button>
-  )
+interface ConfigurationOverlayProps {
+  theme: ReturnType<typeof useTheme>[0]
+  onThemeChange: (next: ReturnType<typeof useTheme>[0]) => void
+  onClose: () => void
 }
 
-const PREVIEW_MAX_LENGTH = 80
-
 /**
- * Returns a truncated preview of the latest warn/error system message in
- * the active conversation, or `null` when the dock signal doesn't warrant
- * one. Surfaced through the toggle's `title` and `aria-label` so the user
- * gets inline triage from the chrome itself.
+ * Console settings as a PAGE over the workspace — never a tab screen (the
+ * tab model rejects it; `screenForView` maps the route to null). The
+ * workspace stays mounted underneath, so closing restores the panes
+ * exactly as they were. Deep-linkable via `#/configuration`; Escape or
+ * the close affordance returns to the last tab-backed view.
  */
-function useDockSignalPreview(
-  signal: DockSignal,
-  active: ReturnType<typeof useConversationsCtx>['active'],
-): string | null {
-  if (signal !== 'error' && signal !== 'attention') return null
-  if (!active) return null
-  for (let i = active.messages.length - 1; i >= 0; i--) {
-    const m = active.messages[i]
-    if (m && m.role === 'system' && (m.tone === 'error' || m.tone === 'warn')) {
-      const flat = m.content.replace(/\s+/g, ' ').trim()
-      return flat.length > PREVIEW_MAX_LENGTH
-        ? `${flat.slice(0, PREVIEW_MAX_LENGTH - 1)}…`
-        : flat
+function ConfigurationOverlay({
+  theme,
+  onThemeChange,
+  onClose,
+}: ConfigurationOverlayProps) {
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
     }
-  }
-  return null
-}
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [onClose])
 
-function dockToggleSignalClass(signal: DockSignal): string {
-  switch (signal) {
-    case 'active':
-      return 'bg-transparent text-accent border-accent pulse-square'
-    case 'attention':
-      return 'bg-transparent text-warn border-warn'
-    case 'error':
-      return 'bg-transparent text-alert border-alert'
-    default:
-      return 'bg-transparent text-ink-faint border-rule hover:text-ink hover:border-ink'
-  }
+  return (
+    <div className="fixed inset-0 z-40 flex flex-col bg-bg">
+      <div className="flex h-12 shrink-0 items-center justify-end pr-6">
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="close settings"
+          title="close settings (esc)"
+          className="font-mono text-[14px] leading-none w-8 h-8 flex items-center justify-center rounded-sm border border-transparent text-ink-faint hover:text-ink hover:bg-surface-hover transition-colors focus-visible:border-accent focus-visible:outline-none"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+      <div className="flex-1 min-h-0 flex flex-col">
+        <Configuration theme={theme} onThemeChange={onThemeChange} />
+      </div>
+    </div>
+  )
 }
 
 interface ShortcutsDialogProps {
@@ -327,8 +499,6 @@ interface ShortcutsDialogProps {
 }
 
 const SHORTCUTS: { combo: string; description: string }[] = [
-  { combo: '⌘\\', description: 'toggle chat dock' },
-  { combo: 'Esc', description: 'collapse chat dock when focused inside' },
   { combo: '?', description: 'open this shortcut overlay' },
 ]
 
diff --git a/console/web/src/components/chat/AttachmentChip.tsx b/console/web/src/components/chat/AttachmentChip.tsx
index 43fda3c96..b51e250d4 100644
--- a/console/web/src/components/chat/AttachmentChip.tsx
+++ b/console/web/src/components/chat/AttachmentChip.tsx
@@ -23,7 +23,7 @@ export function AttachmentChip({
   return (
     <div
       className={cn(
-        'inline-flex items-center gap-x-2 border border-rule bg-bg px-2 py-1 font-mono text-[12px] text-ink max-w-[260px]',
+        'inline-flex items-center gap-x-2 rounded-sm bg-surface px-2 py-1 font-mono text-[12px] text-ink max-w-[260px]',
         className,
       )}
     >
diff --git a/console/web/src/components/chat/ChatDock.tsx b/console/web/src/components/chat/ChatDock.tsx
deleted file mode 100644
index 1249d1643..000000000
--- a/console/web/src/components/chat/ChatDock.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  computeDockDefaultWidth,
-  computeDockMaxWidth,
-  DOCK_MIN_WIDTH,
-} from '@/hooks/use-chat-dock'
-import { cn } from '@/lib/utils'
-import { ChatPanel } from './ChatPanel'
-
-interface ChatDockProps {
-  width: number
-  onWidthChange: (next: number) => void
-  collapsed: boolean
-  /**
-   * Bound to `Escape` while focus is on the dock chrome (not the
-   * composer or any other text input). Lets keyboard users dismiss the
-   * dock symmetrically with the `⌘\` open shortcut.
-   */
-  onCollapse: () => void
-}
-
-const clamp = (w: number, max: number) =>
-  Math.max(DOCK_MIN_WIDTH, Math.min(max, w))
-
-/**
- * Collapsible, resizable left-sticky chat panel that sits beside the active
- * route (traces / configuration / playground / examples). When expanded, the
- * width is set via a drag handle on the right edge — the dock is anchored to
- * the left, so dragging right increases the dock width, mirroring the
- * trace/span resize pattern. The dock has no fixed upper width: the drag is
- * capped by the live viewport so the route content next to the dock always
- * keeps at least `DOCK_NEIGHBOR_MIN_WIDTH` pixels visible.
- *
- * When collapsed, the dock renders nothing (no thin strip): the toggle
- * affordance lives in the global app header at the leftmost slot, matching
- * Cursor's chat-panel pattern. The previous width is preserved across
- * collapse/expand. Toggle via the header button or `⌘/Ctrl + \` (the
- * shortcut is wired inside `useChatDock` so it works even while the dock
- * is unmounted).
- */
-export function ChatDock({
-  width,
-  onWidthChange,
-  collapsed,
-  onCollapse,
-}: ChatDockProps) {
-  const [isResizing, setIsResizing] = useState(false)
-  /* Tracked in state so aria-valuemax stays accurate as the window resizes,
-     even when the user isn't actively dragging. */
-  const [maxWidth, setMaxWidth] = useState<number>(() => computeDockMaxWidth())
-  const resizeStartRef = useRef({ x: 0, width, max: maxWidth })
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const onResize = () => setMaxWidth(computeDockMaxWidth())
-    onResize()
-    window.addEventListener('resize', onResize)
-    return () => window.removeEventListener('resize', onResize)
-  }, [])
-
-  // The persisted width may come from a wider window (or the window may
-  // shrink after mount); rendering it unclamped pushes the main pane past
-  // the viewport and the whole app scrolls horizontally. Clamp at render,
-  // not just during drag.
-  const effectiveWidth = Math.min(width, maxWidth)
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault()
-      const max = computeDockMaxWidth()
-      resizeStartRef.current = { x: e.clientX, width, max }
-      setIsResizing(true)
-      document.body.style.cursor = 'col-resize'
-      document.body.style.userSelect = 'none'
-    },
-    [width],
-  )
-
-  useEffect(() => {
-    if (!isResizing) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const dx = e.clientX - resizeStartRef.current.x
-      onWidthChange(
-        clamp(resizeStartRef.current.width + dx, resizeStartRef.current.max),
-      )
-    }
-
-    const handleMouseUp = () => {
-      setIsResizing(false)
-      document.body.style.cursor = ''
-      document.body.style.userSelect = ''
-    }
-
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove)
-      document.removeEventListener('mouseup', handleMouseUp)
-    }
-  }, [isResizing, onWidthChange])
-
-  const handleReset = useCallback(() => {
-    onWidthChange(computeDockDefaultWidth())
-  }, [onWidthChange])
-
-  if (collapsed) return null
-
-  return (
-    <>
-      <aside
-        id="chat-dock"
-        style={{ width: effectiveWidth }}
-        onKeyDown={(e) => {
-          if (e.key !== 'Escape') return
-          const target = e.target as HTMLElement | null
-          if (target?.isContentEditable) return
-          const tag = target?.tagName
-          if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
-          e.preventDefault()
-          onCollapse()
-        }}
-        className={cn(
-          'flex flex-col flex-shrink-0 h-full overflow-hidden bg-bg border-r border-rule',
-          isResizing && 'select-none',
-        )}
-      >
-        <ChatPanel density="dock" />
-      </aside>
-      {/* biome-ignore lint/a11y/useSemanticElements: drag handle is not a standard input; semantic separator + tabIndex is enough */}
-      <div
-        role="separator"
-        aria-orientation="vertical"
-        aria-valuenow={width}
-        aria-valuemin={DOCK_MIN_WIDTH}
-        aria-valuemax={maxWidth}
-        aria-label="resize chat dock"
-        tabIndex={0}
-        onMouseDown={handleMouseDown}
-        onDoubleClick={handleReset}
-        className={cn(
-          'w-[3px] flex-shrink-0 cursor-col-resize bg-rule hover:bg-accent active:bg-accent',
-          isResizing && 'bg-accent',
-        )}
-      />
-    </>
-  )
-}
diff --git a/console/web/src/components/chat/ChatPanel.tsx b/console/web/src/components/chat/ChatPanel.tsx
index 44f774190..f8ee123ff 100644
--- a/console/web/src/components/chat/ChatPanel.tsx
+++ b/console/web/src/components/chat/ChatPanel.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { ConversationSidebar } from '@/components/sidebar/ConversationSidebar'
+import { PageHeader } from '@/components/ui/PageChrome'
 import { Prompt } from '@/components/ui/Prompt'
 import { useSidebarWidth } from '@/hooks/use-sidebar-width'
 import { useConversationsCtx } from '@/lib/conversations-context'
@@ -9,6 +10,8 @@ export type ChatPanelDensity = 'route' | 'dock'
 
 interface ChatPanelProps {
   density?: ChatPanelDensity
+  /** Close the hosting pane — the header's standard ✕ when present. */
+  onRequestClose?: () => void
 }
 
 const SIDEBAR_COLLAPSED_KEY = 'iii-chat-sidebar-collapsed'
@@ -31,7 +34,10 @@ function persistSidebarCollapsed(value: boolean): void {
   }
 }
 
-export function ChatPanel({ density = 'route' }: ChatPanelProps) {
+export function ChatPanel({
+  density = 'route',
+  onRequestClose,
+}: ChatPanelProps) {
   const {
     conversations,
     activeId,
@@ -86,6 +92,7 @@ export function ChatPanel({ density = 'route' }: ChatPanelProps) {
           modelOptions={modelOptions}
           catalogLoading={catalogLoading}
           density={density}
+          onRequestClose={onRequestClose}
           onUpdateModel={setModel}
           onUpdateMode={setMode}
           onUpdateWorkingDir={setWorkingDir}
@@ -94,9 +101,12 @@ export function ChatPanel({ density = 'route' }: ChatPanelProps) {
           onCompactConversation={compactConversation}
         />
       ) : (
-        <section className="flex-1 flex items-center justify-center">
-          <div className="font-mono text-[13px] text-ink-faint lowercase">
-            <Prompt symbol="$">no conversation selected.</Prompt>
+        <section className="flex-1 flex flex-col min-w-0 min-h-0">
+          <PageHeader title="chat" onClose={onRequestClose} />
+          <div className="flex-1 flex items-center justify-center">
+            <div className="font-mono text-[13px] text-ink-faint lowercase">
+              <Prompt symbol="$">no conversation selected.</Prompt>
+            </div>
           </div>
         </section>
       )}
diff --git a/console/web/src/components/chat/ChatView.tsx b/console/web/src/components/chat/ChatView.tsx
index 3162ca12a..4f70704b8 100644
--- a/console/web/src/components/chat/ChatView.tsx
+++ b/console/web/src/components/chat/ChatView.tsx
@@ -4,6 +4,7 @@ import { FilesystemAccessDialog } from '@/components/permissions/FilesystemAcces
 import type { FilesystemAccessAction } from '@/components/permissions/FilesystemAccessPrompt'
 import { FullPermissionsBanner } from '@/components/permissions/FullPermissionsBanner'
 import { LiveRegion } from '@/components/ui/LiveRegion'
+import { PageHeader } from '@/components/ui/PageChrome'
 import { StatusDot } from '@/components/ui/StatusDot'
 import { useApprovalSettings } from '@/hooks/use-approval-settings'
 import { uid } from '@/hooks/use-conversations'
@@ -128,6 +129,8 @@ interface ChatViewProps {
   modelOptions: ModelOption[]
   catalogLoading?: boolean
   density?: 'route' | 'dock'
+  /** Close the hosting pane — the header's standard ✕ when present. */
+  onRequestClose?: () => void
   onUpdateModel: (id: string, model: ModelId) => void
   onUpdateMode: (id: string, mode: Mode) => void
   onUpdateWorkingDir: (id: string, dir: string) => void
@@ -142,6 +145,7 @@ export function ChatView({
   modelOptions,
   catalogLoading,
   density = 'route',
+  onRequestClose,
   onUpdateModel,
   onUpdateMode,
   onUpdateWorkingDir,
@@ -1638,11 +1642,52 @@ export function ChatView({
       data-chat-session-hydrated={conversation.hydrated}
       className="flex-1 flex flex-col min-w-0 min-h-0"
     >
-      <header
-        className={cn(
-          'flex items-center justify-between py-3 border-b border-rule gap-3 whitespace-nowrap',
-          headerPad,
-        )}
+      <PageHeader
+        className={headerPad}
+        onClose={onRequestClose}
+        actions={
+          <div className="flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.06em]">
+            {sessionChips}
+            {hasInjectedContextChip ? null : (
+              <ContextUsage
+                messages={conversation.messages}
+                contextWindow={contextWindow}
+              />
+            )}
+            <ExportSessionButton
+              conversation={conversation}
+              onExported={(filename) =>
+                announcer.announce(`session exported as ${filename}`)
+              }
+            />
+            <div className="flex items-center gap-2">
+              <StatusDot
+                tone={
+                  conversation.status === 'error'
+                    ? 'alert'
+                    : streamingIndicator
+                      ? 'accent'
+                      : 'ink'
+                }
+                pulse={streamingIndicator}
+              />
+              <span
+                className="text-ink-faint"
+                title={
+                  conversation.status === 'error'
+                    ? conversation.statusReason
+                    : undefined
+                }
+              >
+                {streamingIndicator
+                  ? 'working'
+                  : conversation.status === 'error'
+                    ? 'error'
+                    : 'ready'}
+              </span>
+            </div>
+          </div>
+        }
       >
         <div className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint flex items-center gap-2 min-w-0 flex-1">
           <span className="text-accent flex-shrink-0" aria-hidden>
@@ -1680,48 +1725,7 @@ export function ChatView({
             </>
           )}
         </div>
-        <div className="flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.06em] flex-shrink-0">
-          {sessionChips}
-          {hasInjectedContextChip ? null : (
-            <ContextUsage
-              messages={conversation.messages}
-              contextWindow={contextWindow}
-            />
-          )}
-          <ExportSessionButton
-            conversation={conversation}
-            onExported={(filename) =>
-              announcer.announce(`session exported as ${filename}`)
-            }
-          />
-          <div className="flex items-center gap-2">
-            <StatusDot
-              tone={
-                conversation.status === 'error'
-                  ? 'alert'
-                  : streamingIndicator
-                    ? 'accent'
-                    : 'ink'
-              }
-              pulse={streamingIndicator}
-            />
-            <span
-              className="text-ink-faint"
-              title={
-                conversation.status === 'error'
-                  ? conversation.statusReason
-                  : undefined
-              }
-            >
-              {streamingIndicator
-                ? 'working'
-                : conversation.status === 'error'
-                  ? 'error'
-                  : 'ready'}
-            </span>
-          </div>
-        </div>
-      </header>
+      </PageHeader>
 
       {approvalSettings.settings.mode === 'full' ? (
         <FullPermissionsBanner
@@ -1806,7 +1810,7 @@ export function ChatView({
           />
           {queuedStrip.length > 0 ? (
             <section
-              className="mb-1 border border-rule bg-bg"
+              className="mb-1 rounded-md bg-surface"
               aria-label="queued messages"
             >
               {/* The message being edited is pulled out of the queue and lives
diff --git a/console/web/src/components/chat/Composer.tsx b/console/web/src/components/chat/Composer.tsx
index 194fef0a5..e54898ad2 100644
--- a/console/web/src/components/chat/Composer.tsx
+++ b/console/web/src/components/chat/Composer.tsx
@@ -33,13 +33,18 @@ export interface ComposerSubmitPayload {
 
 /** Round icon action button (send / queue / stop) at the composer's edge. */
 const actionButtonClass = cn(
-  'inline-flex size-9 items-center justify-center rounded-full bg-bg text-ink',
-  '[html[data-theme=dark]_&]:bg-white [html[data-theme=dark]_&]:text-[#0a0a0a]',
-  'hover:opacity-80 transition-opacity duration-150',
-  'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+  'inline-flex size-9 items-center justify-center rounded-full',
+  'transition-colors duration-150',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus',
   'disabled:pointer-events-none disabled:opacity-40',
 )
 
+/** Send/stop is armed: inverted ink fill (light chip in dark mode). */
+const actionReadyClass = 'bg-ink text-bg hover:bg-ink/90'
+
+/** Composer is empty: the action recedes into the surface. */
+const actionIdleClass = 'bg-surface-active text-ink-ghost'
+
 interface ComposerProps {
   mode: Mode
   model: ModelId | null
@@ -293,7 +298,7 @@ export function Composer({
   }, [])
 
   return (
-    <div className="border border-rule bg-panel">
+    <div className="rounded-xl bg-panel-raised shadow-raised">
       {attachments.length > 0 ? (
         <div className="flex flex-wrap gap-2 p-3 border-b border-rule-2">
           {attachments.map((a) => (
@@ -332,7 +337,7 @@ export function Composer({
         />
       </div>
 
-      <div className="flex min-w-0 items-center gap-2 border-t border-rule-2 px-3 py-2">
+      <div className="flex min-w-0 items-center gap-2 px-3 py-2">
         <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
           <ModePicker
             value={mode}
@@ -394,12 +399,12 @@ export function Composer({
               onClick={onStop}
               disabled={stopping}
               aria-label={stopping ? 'stopping' : 'stop generating'}
-              className={actionButtonClass}
+              className={cn(actionButtonClass, actionReadyClass)}
             >
               {stopping ? (
                 <Loader2 size={16} aria-hidden className="animate-spin" />
               ) : (
-                <Square size={16} aria-hidden className="fill-black/90" />
+                <Square size={16} aria-hidden className="fill-current" />
               )}
             </button>
           ) : (
@@ -408,7 +413,12 @@ export function Composer({
               onClick={handleSubmit}
               disabled={blocked}
               aria-label={isStreaming ? 'queue message' : 'send message'}
-              className={actionButtonClass}
+              className={cn(
+                actionButtonClass,
+                hasText || attachments.length > 0
+                  ? actionReadyClass
+                  : actionIdleClass,
+              )}
             >
               <ArrowUp size={20} aria-hidden />
             </button>
diff --git a/console/web/src/components/chat/ContextUsage.tsx b/console/web/src/components/chat/ContextUsage.tsx
index 222a60fb4..aeef1f2c0 100644
--- a/console/web/src/components/chat/ContextUsage.tsx
+++ b/console/web/src/components/chat/ContextUsage.tsx
@@ -67,7 +67,7 @@ export function ContextUsage({ messages, contextWindow }: ContextUsageProps) {
     >
       <span>ctx</span>
       <div
-        className="relative w-14 h-[6px] bg-rule-2 border border-rule overflow-hidden"
+        className="relative w-14 h-[6px] bg-surface overflow-hidden"
         role="progressbar"
         aria-label="context window usage"
         aria-valuenow={pct}
diff --git a/console/web/src/components/chat/DirectoryPicker.tsx b/console/web/src/components/chat/DirectoryPicker.tsx
index 0266880cb..8be62883e 100644
--- a/console/web/src/components/chat/DirectoryPicker.tsx
+++ b/console/web/src/components/chat/DirectoryPicker.tsx
@@ -437,7 +437,7 @@ export function DirectoryPicker({
         title={value ?? 'choose a working directory'}
         onClick={() => (open ? setOpen(false) : openPanel())}
         className={cn(
-          'inline-flex h-9 min-w-0 items-center gap-2 border border-rule bg-bg px-3 font-mono text-[13px] lowercase transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          'inline-flex h-9 min-w-0 items-center gap-2 rounded-sm border border-transparent bg-transparent px-3 font-mono text-[13px] lowercase text-ink-faint hover:bg-surface-hover hover:text-ink transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus',
           externalError ? 'text-warn' : value ? 'text-ink' : 'text-ink-faint',
           'hover:border-ink hover:text-ink disabled:opacity-50',
         )}
@@ -450,7 +450,7 @@ export function DirectoryPicker({
         <div
           role="dialog"
           aria-label="select working directory"
-          className="absolute bottom-full left-0 z-30 mb-1 w-[360px] border border-rule bg-bg shadow-lg"
+          className="absolute bottom-full left-0 z-30 mb-1 w-[360px] rounded-md border border-rule-2 bg-panel-raised shadow-floating"
         >
           {/* section tabs (only with the worktree worker present) */}
           {worktrees?.enabled ? (
diff --git a/console/web/src/components/chat/EmptyState.tsx b/console/web/src/components/chat/EmptyState.tsx
index 5ae15059f..45c30a73f 100644
--- a/console/web/src/components/chat/EmptyState.tsx
+++ b/console/web/src/components/chat/EmptyState.tsx
@@ -105,8 +105,8 @@ function ReadyBody() {
       <h1 className={HEADING_CLASS}>welcome to iii! 👋</h1>
       <div className="flex flex-col gap-2">
         <p className={BODY_CLASS}>
-          You're in an agent-oriented workspace where you can
-          leverage the power of a full-featured agentic system:
+          You're in an agent-oriented workspace where you can leverage the power
+          of a full-featured agentic system:
         </p>
         <ul className="font-mono text-[13px] leading-[1.7] text-ink-faint flex flex-col gap-1">
           <li>· trigger functions via the function registry</li>
diff --git a/console/web/src/components/chat/Message.tsx b/console/web/src/components/chat/Message.tsx
index 260cb7945..4d6e979fc 100644
--- a/console/web/src/components/chat/Message.tsx
+++ b/console/web/src/components/chat/Message.tsx
@@ -773,7 +773,7 @@ function UserMessage({ message }: { message: UserMessageType }) {
       </header>
       <div
         className={cn(
-          'max-w-[80%] border-l border-rule pl-4 pr-1 py-1',
+          'max-w-[80%] rounded-sm bg-surface px-3.5 py-2.5',
           'break-words',
         )}
       >
diff --git a/console/web/src/components/chat/MessageList.tsx b/console/web/src/components/chat/MessageList.tsx
index 0999beedc..11c93b0da 100644
--- a/console/web/src/components/chat/MessageList.tsx
+++ b/console/web/src/components/chat/MessageList.tsx
@@ -266,7 +266,7 @@ export function MessageList({
 
   return (
     <div ref={containerRef} className={cn('flex-1 overflow-y-auto', listPad)}>
-      <div className="mx-auto max-w-[760px] flex flex-col gap-y-8">
+      <div className="mx-auto max-w-[720px] flex flex-col gap-y-8">
         {header}
         {messages.map((m, i) => {
           // Assistant turns copy their prose plus the calls that follow them;
diff --git a/console/web/src/components/chat/ModePicker.tsx b/console/web/src/components/chat/ModePicker.tsx
index 4f915eded..92940b18c 100644
--- a/console/web/src/components/chat/ModePicker.tsx
+++ b/console/web/src/components/chat/ModePicker.tsx
@@ -34,7 +34,7 @@ export function ModePicker({ value, onChange, className }: ModePickerProps) {
       <SelectPrimitive.Trigger
         aria-label="agent mode"
         className={cn(
-          'inline-flex items-center justify-between gap-x-2 border border-rule bg-bg px-3 h-9 text-ink font-mono text-[13px] lowercase focus:outline-none focus:border-ink data-[state=open]:border-ink transition-colors',
+          'inline-flex items-center justify-between gap-x-2 rounded-sm border border-transparent bg-transparent px-3 h-9 text-ink-faint hover:bg-surface-hover hover:text-ink font-mono text-[13px] lowercase focus:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus data-[state=open]:bg-surface data-[state=open]:text-ink transition-colors',
           className,
         )}
       >
@@ -53,7 +53,7 @@ export function ModePicker({ value, onChange, className }: ModePickerProps) {
           position="popper"
           sideOffset={4}
           className={cn(
-            'z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-rule bg-bg text-ink font-mono text-[13px] lowercase shadow-lg',
+            'z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border border-rule-2 bg-panel-raised text-ink font-mono text-[13px] lowercase shadow-floating',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
           )}
@@ -65,7 +65,7 @@ export function ModePicker({ value, onChange, className }: ModePickerProps) {
                 value={m.id}
                 className={cn(
                   'relative flex items-center gap-2 pl-7 pr-3 py-1.5 cursor-pointer outline-none select-none',
-                  'data-[highlighted]:bg-rule data-[highlighted]:text-ink',
+                  'rounded-xs data-[highlighted]:bg-surface-hover data-[highlighted]:text-ink',
                   'data-[state=checked]:text-ink',
                 )}
               >
diff --git a/console/web/src/components/chat/ModelPicker.tsx b/console/web/src/components/chat/ModelPicker.tsx
index 14459ebfb..da67ae729 100644
--- a/console/web/src/components/chat/ModelPicker.tsx
+++ b/console/web/src/components/chat/ModelPicker.tsx
@@ -220,7 +220,7 @@ export function ModelPicker({
             }
             aria-busy={loading || undefined}
             className={cn(
-              'flex h-9 min-w-0 flex-1 items-center justify-between gap-x-2 border border-rule bg-bg px-3 font-mono text-[13px] lowercase text-ink transition-colors focus:border-ink focus:outline-none data-[state=open]:border-ink',
+              'flex h-9 min-w-0 flex-1 items-center justify-between gap-x-2 rounded-sm border border-transparent bg-transparent px-3 font-mono text-[13px] lowercase text-ink-faint hover:bg-surface-hover hover:text-ink transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus data-[state=open]:bg-surface data-[state=open]:text-ink',
               pickerDisabled && 'pointer-events-none opacity-40',
             )}
           >
@@ -251,7 +251,7 @@ export function ModelPicker({
           <DropdownMenuPrimitive.Content
             sideOffset={4}
             align="start"
-            className="z-50 w-[min(480px,calc(100vw-24px))] overflow-hidden border border-rule bg-bg font-mono text-[13px] lowercase text-ink"
+            className="z-50 w-[min(480px,calc(100vw-24px))] overflow-hidden rounded-md border border-rule bg-bg font-mono text-[13px] lowercase text-ink shadow-floating"
           >
             <DropdownMenuPrimitive.RadioGroup
               value={safeValue ?? ''}
diff --git a/console/web/src/components/chat/fp/UtilView.tsx b/console/web/src/components/chat/fp/UtilView.tsx
index 7c1841790..65472ddf1 100644
--- a/console/web/src/components/chat/fp/UtilView.tsx
+++ b/console/web/src/components/chat/fp/UtilView.tsx
@@ -30,7 +30,12 @@ function isEmptyValue(v: unknown): boolean {
 
 /** `fp::*` — the seventeen lodash-style transforms (`FP_TRANSFORM_OPS`).
     Op label + its params as chips, then the transformed value. */
-export function UtilView({ functionId, input, output, running }: UtilViewProps) {
+export function UtilView({
+  functionId,
+  input,
+  output,
+  running,
+}: UtilViewProps) {
   const req = safeParseRequest(utilRequestSchema, input)
   const op = transformOp(functionId)
 
diff --git a/console/web/src/components/chat/fp/__tests__/parsers.test.ts b/console/web/src/components/chat/fp/__tests__/parsers.test.ts
index 2afc6e049..6e85fef3b 100644
--- a/console/web/src/components/chat/fp/__tests__/parsers.test.ts
+++ b/console/web/src/components/chat/fp/__tests__/parsers.test.ts
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest'
 import { parseSandboxErrorDisplay } from '@/components/chat/sandbox/parsers'
 import {
+  FP_TRANSFORM_OPS,
   isFpFunction,
   isFpTransformFunction,
-  FP_TRANSFORM_OPS,
   pipeRequestSchema,
   pipeResponseSchema,
   safeParseRequest,
diff --git a/console/web/src/components/chat/lexical/FileMentionNode.tsx b/console/web/src/components/chat/lexical/FileMentionNode.tsx
index 074e8c66d..9a095b663 100644
--- a/console/web/src/components/chat/lexical/FileMentionNode.tsx
+++ b/console/web/src/components/chat/lexical/FileMentionNode.tsx
@@ -181,10 +181,8 @@ export function FileMentionPill({ path, selected, pillRef }: PillProps) {
       contentEditable={false}
       data-file-path={path}
       className={cn(
-        'inline-flex items-center gap-1 px-1.5 h-[20px] -mt-[2px] border align-middle font-mono text-[13px] text-ink select-none transition-colors',
-        selected
-          ? 'bg-paper-2 border-accent cursor-pointer'
-          : 'bg-panel border-rule',
+        'inline-flex items-center gap-1 px-1.5 h-[20px] -mt-[2px] rounded-xs align-middle font-mono text-[13px] text-ink select-none transition-colors',
+        selected ? 'bg-surface-selected cursor-pointer' : 'bg-surface',
         pillRef && 'cursor-pointer',
       )}
     >
diff --git a/console/web/src/components/chat/lexical/FlipMenu.tsx b/console/web/src/components/chat/lexical/FlipMenu.tsx
index d0b5a690c..968daf513 100644
--- a/console/web/src/components/chat/lexical/FlipMenu.tsx
+++ b/console/web/src/components/chat/lexical/FlipMenu.tsx
@@ -82,9 +82,9 @@ export function FlipMenu<T extends MenuOption>({
   return (
     <div
       ref={menuRef}
-      className="border border-rule bg-bg w-[300px] max-h-[280px] overflow-y-auto shadow-none"
+      className="rounded-md bg-panel-raised w-[300px] max-h-[280px] overflow-y-auto shadow-floating"
     >
-      <div className="px-3 py-1.5 border-b border-rule-2 bg-panel font-mono text-[11px] uppercase tracking-[0.18em] text-ink-faint">
+      <div className="px-3 py-1.5 bg-paper-2 font-mono text-[11px] uppercase tracking-[0.18em] text-ink-faint">
         {header}
       </div>
       {/* div+role over ul/li because keyboard navigation is driven by Lexical's
@@ -109,9 +109,7 @@ export function FlipMenu<T extends MenuOption>({
               }}
               className={cn(
                 'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',
-                active
-                  ? 'bg-panel border-l-2 border-l-accent pl-[10px]'
-                  : 'border-l-2 border-l-transparent hover:bg-paper-2',
+                active ? 'bg-surface-selected' : 'hover:bg-surface-hover',
               )}
             >
               {renderOption(opt)}
diff --git a/console/web/src/components/chat/lexical/FunctionMentionNode.tsx b/console/web/src/components/chat/lexical/FunctionMentionNode.tsx
index 9b3d9a3af..01ce47dca 100644
--- a/console/web/src/components/chat/lexical/FunctionMentionNode.tsx
+++ b/console/web/src/components/chat/lexical/FunctionMentionNode.tsx
@@ -164,10 +164,8 @@ export function FunctionMentionPill({
       contentEditable={false}
       data-function-id={functionId}
       className={cn(
-        'inline-flex items-center gap-1 px-1.5 h-[20px] -mt-[2px] border align-middle font-mono text-[13px] text-ink select-none transition-colors',
-        selected
-          ? 'bg-paper-2 border-accent cursor-pointer'
-          : 'bg-panel border-rule',
+        'inline-flex items-center gap-1 px-1.5 h-[20px] -mt-[2px] rounded-xs align-middle font-mono text-[13px] text-ink select-none transition-colors',
+        selected ? 'bg-surface-selected cursor-pointer' : 'bg-surface',
         pillRef && 'cursor-pointer',
       )}
     >
diff --git a/console/web/src/components/chat/shell/FsChmodView.tsx b/console/web/src/components/chat/shell/FsChmodView.tsx
deleted file mode 100644
index 28b6d02d4..000000000
--- a/console/web/src/components/chat/shell/FsChmodView.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { formatMode } from '@/components/chat/sandbox/format'
-import { Chip } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsChmodRequestSchema,
-  fsChmodResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { displayPath, TargetChip } from './shared'
-
-interface FsChmodViewProps {
-  input: unknown
-  output: unknown
-}
-
-export function FsChmodView({ input, output }: FsChmodViewProps) {
-  const req = fsChmodRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsChmodResponseSchema, output)
-  if (!resp) return null
-  const ownership =
-    typeof req.data.uid === 'number' || typeof req.data.gid === 'number'
-      ? `${req.data.uid ?? '_'}:${req.data.gid ?? '_'}`
-      : null
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="px-3 py-3 flex flex-col gap-2">
-        <div className="font-mono text-[12.5px] flex flex-wrap items-baseline gap-2 text-ink">
-          <span className="text-ink-faint">chmod</span>
-          <span>{displayPath(req.data.path, resp.path)}</span>
-          <span className="text-ink-ghost">→</span>
-          <span className="tabular-nums">{req.data.mode}</span>
-          <span className="text-ink-faint">({formatMode(req.data.mode)})</span>
-        </div>
-        <div className="flex flex-wrap items-center gap-1.5">
-          {ownership ? <Chip label="own">{ownership}</Chip> : null}
-          {req.data.recursive ? <Chip label="recursive">true</Chip> : null}
-          <Chip label="changed">{resp.entries_changed}</Chip>
-          <TargetChip target={req.data.target} />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsGrepView.tsx b/console/web/src/components/chat/shell/FsGrepView.tsx
deleted file mode 100644
index 4783fcd60..000000000
--- a/console/web/src/components/chat/shell/FsGrepView.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { GrepMatchList } from '@/components/chat/sandbox/FsGrepView'
-import { truncateMiddle } from '@/components/chat/sandbox/format'
-import { Chip, FooterPill } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsGrepRequestSchema,
-  fsGrepResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { TargetChip } from './shared'
-
-interface FsGrepViewProps {
-  input: unknown
-  output: unknown
-}
-
-export function FsGrepView({ input, output }: FsGrepViewProps) {
-  const req = fsGrepRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsGrepResponseSchema, output)
-  if (!resp) return null
-  const { matches, truncated } = resp
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="bg-paper-2 border-b border-rule-2 px-3 py-2 flex flex-wrap items-center gap-1.5">
-        <Chip label="path">{req.data.path}</Chip>
-        <Chip label="pattern">{req.data.pattern}</Chip>
-        <TargetChip target={req.data.target} />
-        {req.data.ignore_case ? <Chip>case-insensitive</Chip> : null}
-        {/* `recursive` defaults TRUE on the wire — chip the deviation only */}
-        {req.data.recursive === false ? <Chip>non-recursive</Chip> : null}
-        {req.data.include_glob?.length ? (
-          <Chip label="include">
-            {truncateMiddle(req.data.include_glob.join(' '), 40)}
-          </Chip>
-        ) : null}
-        {req.data.exclude_glob?.length ? (
-          <Chip label="exclude">
-            {truncateMiddle(req.data.exclude_glob.join(' '), 40)}
-          </Chip>
-        ) : null}
-        <FooterPill tone={matches.length > 0 ? 'default' : 'warn'}>
-          {`${matches.length} ${matches.length === 1 ? 'match' : 'matches'}`}
-        </FooterPill>
-        {truncated ? <FooterPill tone="warn">truncated</FooterPill> : null}
-      </div>
-
-      {matches.length === 0 ? (
-        <div className="px-3 py-3 font-mono text-[12.5px] text-ink-ghost">
-          · no matches
-        </div>
-      ) : (
-        <GrepMatchList
-          matches={matches}
-          pattern={req.data.pattern}
-          ignoreCase={!!req.data.ignore_case}
-        />
-      )}
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsLsView.tsx b/console/web/src/components/chat/shell/FsLsView.tsx
deleted file mode 100644
index 2e3e37ee4..000000000
--- a/console/web/src/components/chat/shell/FsLsView.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FsEntriesTable } from '@/components/chat/sandbox/FsLsView'
-import { Chip } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsLsRequestSchema,
-  fsLsResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { TargetChip } from './shared'
-
-interface FsLsViewProps {
-  input: unknown
-  output: unknown
-}
-
-export function FsLsView({ input, output }: FsLsViewProps) {
-  const req = fsLsRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsLsResponseSchema, output)
-  if (!resp) return null
-  const entries = resp.entries
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="bg-paper-2 border-b border-rule-2 px-3 py-2 flex flex-wrap items-center gap-1.5">
-        <Chip label="path">{req.data.path}</Chip>
-        <TargetChip target={req.data.target} />
-        <Chip label="entries">{entries.length}</Chip>
-      </div>
-      {entries.length === 0 ? (
-        <div className="px-3 py-3 font-mono text-[12.5px] text-ink-ghost">
-          · directory is empty
-        </div>
-      ) : (
-        <FsEntriesTable entries={entries} />
-      )}
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsMkdirView.tsx b/console/web/src/components/chat/shell/FsMkdirView.tsx
deleted file mode 100644
index 7dd65c5a4..000000000
--- a/console/web/src/components/chat/shell/FsMkdirView.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Chip } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsMkdirRequestSchema,
-  fsMkdirResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { displayPath, isSandboxTarget, TargetChip } from './shared'
-
-interface FsMkdirViewProps {
-  input: unknown
-  output: unknown
-}
-
-export function FsMkdirView({ input, output }: FsMkdirViewProps) {
-  const req = fsMkdirRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsMkdirResponseSchema, output)
-  if (!resp) return null
-  const created = resp.created
-  const sandboxed = isSandboxTarget(req.data.target)
-  // Sandbox-target responses default `already_existed` (serde fill-in,
-  // not a signal) — collapse to the plain created/exists wording there.
-  const verb = created
-    ? '+ created '
-    : sandboxed
-      ? '· exists '
-      : resp.already_existed
-        ? '· already exists '
-        : '· not created '
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="px-3 py-3 flex flex-col gap-2">
-        <div className="font-mono text-[12.5px] text-ink">
-          <span className={created ? 'text-accent' : 'text-ink-faint'}>
-            {verb}
-          </span>
-          <span>{displayPath(req.data.path, resp.path)}</span>
-        </div>
-        <div className="flex flex-wrap items-center gap-1.5">
-          <Chip label="mode">{req.data.mode ?? '0755'}</Chip>
-          {req.data.parents ? <Chip label="parents">true</Chip> : null}
-          <TargetChip target={req.data.target} />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsMvView.tsx b/console/web/src/components/chat/shell/FsMvView.tsx
deleted file mode 100644
index b053b8240..000000000
--- a/console/web/src/components/chat/shell/FsMvView.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Chip, FooterPill } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsMvRequestSchema,
-  fsMvResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { displayPath, isSandboxTarget, TargetChip } from './shared'
-
-interface FsMvViewProps {
-  input: unknown
-  output: unknown
-}
-
-export function FsMvView({ input, output }: FsMvViewProps) {
-  const req = fsMvRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsMvResponseSchema, output)
-  if (!resp) return null
-  const moved = resp.moved
-  /* Sandbox-target responses default `overwrote` — a serde fill-in, not
-     a signal; only surface the warn pill for host moves. */
-  const showOverwrote = resp.overwrote && !isSandboxTarget(req.data.target)
-  const hasChips =
-    isSandboxTarget(req.data.target) || !!req.data.overwrite || showOverwrote
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="px-3 py-3 flex flex-col gap-2">
-        <div className="font-mono text-[12.5px] flex flex-wrap items-baseline gap-2 text-ink">
-          <span className={moved ? 'text-accent' : 'text-ink-faint'}>
-            {moved ? 'mv' : '·'}
-          </span>
-          <span>{displayPath(req.data.src, resp.src)}</span>
-          <span className="text-ink-ghost">→</span>
-          <span>{displayPath(req.data.dst, resp.dst)}</span>
-        </div>
-        {hasChips ? (
-          <div className="flex flex-wrap items-center gap-1.5">
-            <TargetChip target={req.data.target} />
-            {req.data.overwrite ? <Chip label="overwrite">true</Chip> : null}
-            {showOverwrote ? (
-              <FooterPill tone="warn">overwrote existing</FooterPill>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsReadView.tsx b/console/web/src/components/chat/shell/FsReadView.tsx
deleted file mode 100644
index ef947cd43..000000000
--- a/console/web/src/components/chat/shell/FsReadView.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import {
-  formatBytes,
-  formatMode,
-  formatMtime,
-  truncateMiddle,
-} from '@/components/chat/sandbox/format'
-import { Chip, FooterPill } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsReadRequestSchema,
-  fsReadResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { TargetChip } from './shared'
-
-interface FsReadViewProps {
-  input: unknown
-  output: unknown
-}
-
-/** shell::fs::read never inlines content — the response `content` is
-    always a channel ref, so the body is the stream row promoted to the
-    only branch (no CodeHighlight, no empty state). The console cannot
-    dereference the channel, so there is no "view content" affordance. */
-export function FsReadView({ input, output }: FsReadViewProps) {
-  const req = fsReadRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsReadResponseSchema, output)
-  if (!resp) return null
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="bg-paper-2 border-b border-rule-2 px-3 py-2 flex flex-wrap items-center gap-1.5">
-        <span className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
-          file
-        </span>
-        <code className="font-mono text-[12px] text-ink">{req.data.path}</code>
-        <TargetChip target={req.data.target} />
-      </div>
-
-      <div className="px-3 py-3 font-mono text-[12.5px] text-ink-faint flex flex-wrap items-center gap-1.5">
-        <span>content streamed via channel</span>
-        <code className="bg-paper-2 border border-rule-2 px-1.5 py-0.5 text-ink">
-          {truncateMiddle(resp.content.channel_id, 18)}
-        </code>
-        <span className="text-ink-ghost">
-          ({resp.content.direction ?? 'read'})
-        </span>
-      </div>
-
-      <div className="bg-paper-2 border-t border-rule-2 px-3 py-1.5 flex flex-wrap items-center gap-1.5">
-        <Chip label="size">{formatBytes(resp.size)}</Chip>
-        <Chip label="mode">{formatMode(resp.mode)}</Chip>
-        <Chip label="mtime">{formatMtime(resp.mtime)}</Chip>
-        <FooterPill tone="default">streamed</FooterPill>
-      </div>
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsRmView.tsx b/console/web/src/components/chat/shell/FsRmView.tsx
deleted file mode 100644
index acc29a857..000000000
--- a/console/web/src/components/chat/shell/FsRmView.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Chip } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsRmRequestSchema,
-  fsRmResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { displayPath, isSandboxTarget, TargetChip } from './shared'
-
-interface FsRmViewProps {
-  input: unknown
-  output: unknown
-}
-
-export function FsRmView({ input, output }: FsRmViewProps) {
-  const req = fsRmRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsRmResponseSchema, output)
-  if (!resp) return null
-  const removed = resp.removed
-  const sandboxed = isSandboxTarget(req.data.target)
-  // `was_present` is a host-only signal; sandbox-target responses default
-  // it (serde fill-in) — collapse to removed/not-removed wording there.
-  const wasAbsent = !sandboxed && !removed && !resp.was_present
-  const verb = removed
-    ? '− removed '
-    : wasAbsent
-      ? '· was not present '
-      : '· not removed '
-  const tone = removed
-    ? 'text-warn'
-    : wasAbsent
-      ? 'text-ink-ghost'
-      : 'text-ink-faint'
-  const recursive = req.data.recursive === true
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="px-3 py-3 flex flex-col gap-2">
-        <div className="font-mono text-[12.5px] text-ink">
-          <span className={tone}>{verb}</span>
-          <span>{displayPath(req.data.path, resp.path)}</span>
-        </div>
-        {recursive || sandboxed ? (
-          <div className="flex flex-wrap items-center gap-1.5">
-            {recursive ? (
-              <Chip label="recursive" className="border-warn text-warn">
-                true
-              </Chip>
-            ) : null}
-            <TargetChip target={req.data.target} />
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsSedView.tsx b/console/web/src/components/chat/shell/FsSedView.tsx
deleted file mode 100644
index 34477511a..000000000
--- a/console/web/src/components/chat/shell/FsSedView.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { SedResultsTable } from '@/components/chat/sandbox/FsSedView'
-import { truncateMiddle } from '@/components/chat/sandbox/format'
-import { Chip } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsSedRequestSchema,
-  fsSedResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { TargetChip } from './shared'
-
-interface FsSedViewProps {
-  input: unknown
-  output: unknown
-}
-
-export function FsSedView({ input, output }: FsSedViewProps) {
-  const req = fsSedRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const resp = safeParseResponse(fsSedResponseSchema, output)
-  if (!resp) return null
-  const { results, total_replacements } = resp
-  const pathMode = req.data.path != null
-  const target =
-    req.data.path ??
-    (req.data.files?.length ? `${req.data.files.length} files` : '—')
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="bg-paper-2 border-b border-rule-2 px-3 py-2 flex flex-wrap items-center gap-1.5">
-        <Chip label="target">{target}</Chip>
-        <Chip label="pattern">{req.data.pattern}</Chip>
-        <Chip label="→">{req.data.replacement || "''"}</Chip>
-        {/* `regex`/`recursive` default TRUE on the wire — chip the
-            deviations ("literal", "non-recursive") only */}
-        {req.data.regex === false ? <Chip>literal</Chip> : null}
-        {req.data.first_only ? <Chip>first-only</Chip> : null}
-        {req.data.ignore_case ? <Chip>case-insensitive</Chip> : null}
-        {pathMode && req.data.recursive === false ? (
-          <Chip>non-recursive</Chip>
-        ) : null}
-        {req.data.include_glob?.length ? (
-          <Chip label="include">
-            {truncateMiddle(req.data.include_glob.join(' '), 40)}
-          </Chip>
-        ) : null}
-        {req.data.exclude_glob?.length ? (
-          <Chip label="exclude">
-            {truncateMiddle(req.data.exclude_glob.join(' '), 40)}
-          </Chip>
-        ) : null}
-        <TargetChip target={req.data.target} />
-      </div>
-
-      {results.length === 0 ? (
-        <div className="px-3 py-3 font-mono text-[12.5px] text-ink-ghost">
-          · no files touched
-        </div>
-      ) : (
-        <SedResultsTable
-          results={results}
-          totalReplacements={total_replacements}
-        />
-      )}
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/shell/FsStatView.tsx b/console/web/src/components/chat/shell/FsStatView.tsx
deleted file mode 100644
index 31083a9bf..000000000
--- a/console/web/src/components/chat/shell/FsStatView.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
-  formatBytes,
-  formatMode,
-  formatMtime,
-} from '@/components/chat/sandbox/format'
-import { Chip, FooterPill } from '@/components/chat/sandbox/terminal/Terminal'
-import {
-  fsStatRequestSchema,
-  fsStatResponseSchema,
-  safeParseResponse,
-} from './parsers'
-import { TargetChip } from './shared'
-
-interface FsStatViewProps {
-  input: unknown
-  output: unknown
-}
-
-/** Response is the bare FsEntry (`StatResponse` is serde-transparent). */
-export function FsStatView({ input, output }: FsStatViewProps) {
-  const req = fsStatRequestSchema.safeParse(input)
-  if (!req.success) return null
-  const e = safeParseResponse(fsStatResponseSchema, output)
-  if (!e) return null
-
-  return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="px-3 py-3 flex flex-col gap-2">
-        <div className="font-mono text-[12.5px] text-ink">
-          <span className="text-ink-faint">stat </span>
-          <span>{req.data.path}</span>
-        </div>
-        <div className="flex flex-wrap items-center gap-1.5">
-          <Chip label="size">{e.is_dir ? '—' : formatBytes(e.size)}</Chip>
-          <Chip label="mode">{`${e.is_dir ? 'd' : '-'}${formatMode(e.mode)}`}</Chip>
-          <Chip label="mtime">{formatMtime(e.mtime)}</Chip>
-          <TargetChip target={req.data.target} />
-          {e.is_dir ? <FooterPill tone="default">dir</FooterPill> : null}
-          {e.is_symlink ? <FooterPill tone="warn">symlink</FooterPill> : null}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/console/web/src/components/chat/worker/__tests__/parsers.test.ts b/console/web/src/components/chat/worker/__tests__/parsers.test.ts
index 494320df0..2848de955 100644
--- a/console/web/src/components/chat/worker/__tests__/parsers.test.ts
+++ b/console/web/src/components/chat/worker/__tests__/parsers.test.ts
@@ -293,20 +293,18 @@ describe('worker::add', () => {
     ).toBeNull()
   })
 
-  it.each([
-    'installed',
-    'already_current',
-    'repaired',
-    'replaced',
-  ] as const)('parses the %s status', (status) => {
-    const parsed = safeParseResponse(workerAddResponseSchema, {
-      name: 'pdfkit',
-      status,
-      awaited_ready: true,
-      config_path: '/x/iii.config.yaml',
-    })
-    expect(parsed?.status).toBe(status)
-  })
+  it.each(['installed', 'already_current', 'repaired', 'replaced'] as const)(
+    'parses the %s status',
+    (status) => {
+      const parsed = safeParseResponse(workerAddResponseSchema, {
+        name: 'pdfkit',
+        status,
+        awaited_ready: true,
+        config_path: '/x/iii.config.yaml',
+      })
+      expect(parsed?.status).toBe(status)
+    },
+  )
 })
 
 describe('worker::remove / clear / update', () => {
diff --git a/console/web/src/components/chat/workflow/shared.tsx b/console/web/src/components/chat/workflow/shared.tsx
index a72ab6259..8f1bfadc2 100644
--- a/console/web/src/components/chat/workflow/shared.tsx
+++ b/console/web/src/components/chat/workflow/shared.tsx
@@ -193,7 +193,7 @@ export function ProgressBar({
   if (total === 0) return null
   const pct = (n: number) => `${(n / total) * 100}%`
   return (
-    <div className="flex h-1.5 w-full overflow-hidden bg-rule-2">
+    <div className="flex h-1.5 w-full overflow-hidden bg-surface">
       <div className="bg-accent" style={{ width: pct(done) }} />
       <div className="bg-accent/40" style={{ width: pct(running) }} />
       <div className="bg-alert" style={{ width: pct(failed) }} />
diff --git a/console/web/src/components/function-trigger/FunctionTriggerCard.tsx b/console/web/src/components/function-trigger/FunctionTriggerCard.tsx
index d8847075e..d02bb12fd 100644
--- a/console/web/src/components/function-trigger/FunctionTriggerCard.tsx
+++ b/console/web/src/components/function-trigger/FunctionTriggerCard.tsx
@@ -337,7 +337,7 @@ export function FunctionTriggerCard({
 
   return (
     <div
-      className="function-trigger-surface border border-rule bg-bg"
+      className="function-trigger-surface fcall-chrome rounded-md overflow-hidden"
       data-message-id={message.id}
       data-message-role="function-call"
       data-function-id={message.functionId}
@@ -350,7 +350,7 @@ export function FunctionTriggerCard({
           title with the copy icon in flow right after it, and the caret
           strip is a pointer-only duplicate target so clicking anywhere on
           the row still collapses. */}
-      <div className="group/fchdr flex items-center gap-2 hover:bg-paper-2 transition-colors">
+      <div className="group/fchdr flex items-center gap-2 hover:bg-surface-hover/50 transition-colors">
         <button
           type="button"
           onClick={() => setOpen((v) => !v)}
diff --git a/console/web/src/components/function-trigger/renderer-registry.tsx b/console/web/src/components/function-trigger/renderer-registry.tsx
index 86b115673..937368265 100644
--- a/console/web/src/components/function-trigger/renderer-registry.tsx
+++ b/console/web/src/components/function-trigger/renderer-registry.tsx
@@ -26,7 +26,6 @@ import {
   ScraplingFunctionIdLabel,
   ScraplingToolView,
 } from '@/components/chat/scrapling'
-import { ShellFunctionIdLabel, ShellToolView } from '@/components/chat/shell'
 import { StateFunctionIdLabel, StateToolView } from '@/components/chat/state'
 import { WebFunctionIdLabel, WebToolView } from '@/components/chat/web'
 import { WorkerFunctionIdLabel, WorkerToolView } from '@/components/chat/worker'
@@ -40,10 +39,10 @@ import type { FunctionTriggerMessage } from '@/types/chat'
 import type { FunctionTriggerRenderer } from '@/types/injectable-ui'
 
 /**
- * The first-party families (11 since directory and browser moved into their
- * workers' injected UI), in the exact order of the old `??` chains. Each
- * family's `tryRender*` already gates on its own function ids, so an entry
- * returning `null` falls through to the next.
+ * The first-party families (11 since directory, browser, and shell moved
+ * into their workers' injected UI), in the exact order of the old `??`
+ * chains. Each family's `tryRender*` already gates on its own function ids,
+ * so an entry returning `null` falls through to the next.
  */
 export const FIRST_PARTY_RENDERERS: readonly FunctionTriggerRenderer[] = [
   {
@@ -96,14 +95,8 @@ export const FIRST_PARTY_RENDERERS: readonly FunctionTriggerRenderer[] = [
     tryRenderPreview: ScraplingToolView.tryRenderPreview,
     FunctionIdLabel: ScraplingFunctionIdLabel,
   },
-  {
-    id: 'first-party/shell',
-    isMatch: ShellToolView.isShellFunction,
-    tryRender: ShellToolView.tryRender,
-    tryRenderRunning: ShellToolView.tryRenderRunning,
-    tryRenderPreview: ShellToolView.tryRenderPreview,
-    FunctionIdLabel: ShellFunctionIdLabel,
-  },
+  // shell::* rendering is no longer first-party: the shell worker ships
+  // it as injected UI (shell/ui/src/function-trigger).
   {
     id: 'first-party/workflow',
     isMatch: WorkflowToolView.isWorkflowFunction,
diff --git a/console/web/src/components/sidebar/ConversationRow.tsx b/console/web/src/components/sidebar/ConversationRow.tsx
index 2d2aceee5..1265cba5b 100644
--- a/console/web/src/components/sidebar/ConversationRow.tsx
+++ b/console/web/src/components/sidebar/ConversationRow.tsx
@@ -76,10 +76,8 @@ export function ConversationRow({
       aria-current={active ? 'page' : undefined}
       aria-label={`open ${conversation.title}`}
       className={cn(
-        'group relative flex items-center gap-2 pl-3 pr-2 py-2 cursor-pointer transition-colors',
-        active
-          ? 'bg-panel border-l-2 border-l-accent pl-[10px]'
-          : 'border-l-2 border-l-transparent hover:bg-paper-2',
+        'group relative flex items-center gap-2 pl-3 pr-2 py-2 rounded-sm cursor-pointer transition-colors',
+        active ? 'bg-surface-selected' : 'hover:bg-surface-hover',
       )}
       onClick={() => !editing && onSelect()}
       onDoubleClick={() => setEditing(true)}
@@ -157,7 +155,7 @@ export function ConversationRow({
                 setDraft(conversation.title)
               }
             }}
-            className="w-full bg-bg border border-ink px-1 py-0.5 font-mono text-[13px] text-ink outline-none lowercase"
+            className="w-full rounded-xs bg-surface px-1 py-0.5 font-mono text-[13px] text-ink outline-none lowercase"
           />
         ) : (
           <div
@@ -189,7 +187,7 @@ export function ConversationRow({
           onRemove()
         }}
         aria-label={`delete ${conversation.title}`}
-        className="opacity-0 group-hover:opacity-100 text-ink-faint hover:text-accent transition-opacity transition-colors font-mono text-[14px] leading-none px-1"
+        className="opacity-0 group-hover:opacity-100 text-ink-faint hover:text-alert transition-opacity transition-colors font-mono text-[14px] leading-none px-1"
       >
         ×
       </button>
diff --git a/console/web/src/components/sidebar/ConversationSidebar.tsx b/console/web/src/components/sidebar/ConversationSidebar.tsx
index b70b98504..69225f92a 100644
--- a/console/web/src/components/sidebar/ConversationSidebar.tsx
+++ b/console/web/src/components/sidebar/ConversationSidebar.tsx
@@ -146,7 +146,7 @@ export function ConversationSidebar({
 
   if (collapsed) {
     return (
-      <aside className="w-9 shrink-0 border-r border-rule flex flex-col items-center bg-bg gap-1 py-2">
+      <aside className="w-9 shrink-0 flex flex-col items-center bg-sidebar gap-1 py-2">
         <button
           type="button"
           onClick={onToggleCollapsed}
@@ -174,11 +174,11 @@ export function ConversationSidebar({
       <aside
         style={{ width }}
         className={cn(
-          'shrink-0 border-r border-rule flex flex-col bg-bg',
+          'shrink-0 flex flex-col bg-sidebar',
           isResizing && 'select-none',
         )}
       >
-        <div className="px-3 py-3 border-b border-rule flex items-center gap-2">
+        <div className="px-3 py-3 flex items-center gap-2">
           <Button
             type="button"
             variant="primary"
@@ -221,7 +221,7 @@ export function ConversationSidebar({
           />
         </div>
 
-        <div className="flex-1 overflow-y-auto divide-y divide-rule-2">
+        <div className="flex-1 overflow-y-auto px-2 py-1 space-y-px">
           {rows.length === 0 ? (
             <div className="px-3 py-6 font-mono text-[12px] text-ink-ghost lowercase">
               {query.trim()
@@ -259,7 +259,7 @@ export function ConversationSidebar({
           onMouseDown={handleMouseDown}
           onDoubleClick={handleReset}
           className={cn(
-            'w-[3px] flex-shrink-0 cursor-col-resize bg-rule hover:bg-accent active:bg-accent',
+            'w-[3px] flex-shrink-0 cursor-col-resize bg-transparent hover:bg-accent/60 active:bg-accent',
             isResizing && 'bg-accent',
           )}
         />
diff --git a/console/web/src/components/ui/Button.tsx b/console/web/src/components/ui/Button.tsx
index 2caa95329..10b27d3f1 100644
--- a/console/web/src/components/ui/Button.tsx
+++ b/console/web/src/components/ui/Button.tsx
@@ -4,18 +4,20 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-x-2 whitespace-nowrap font-mono lowercase rounded-none transition-[background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 select-none',
+  'inline-flex items-center justify-center gap-x-2 whitespace-nowrap font-mono lowercase rounded-sm transition-[background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus disabled:pointer-events-none disabled:opacity-40 select-none',
   {
     variants: {
       variant: {
-        primary: 'bg-ink text-bg border border-ink hover:bg-bg hover:text-ink',
+        primary:
+          'bg-ink text-bg border border-transparent hover:bg-ink/90 rounded-md',
         ghost:
-          'bg-transparent text-ink border border-transparent hover:bg-ink hover:text-bg',
-        pill: 'bg-bg text-ink border border-ink hover:bg-ink hover:text-bg',
-        icon: 'bg-bg text-ink-faint border border-rule hover:text-ink',
-        terminal: 'bg-bg text-ink border border-rule justify-start',
+          'bg-transparent text-ink-faint border border-transparent hover:bg-surface-hover hover:text-ink',
+        pill: 'bg-surface text-ink border border-transparent hover:bg-surface-hover',
+        icon: 'bg-transparent text-ink-faint border border-transparent hover:bg-surface-hover hover:text-ink',
+        terminal:
+          'bg-surface text-ink border border-transparent justify-start hover:bg-surface-hover',
         wiggle:
-          'wiggle bg-ink text-bg border border-ink hover:bg-bg hover:text-ink relative',
+          'wiggle bg-ink text-bg border border-transparent hover:bg-ink/90 rounded-md relative',
       },
       size: {
         sm: 'h-8 px-3 text-[13px]',
diff --git a/console/web/src/components/ui/Cell.tsx b/console/web/src/components/ui/Cell.tsx
index 8e33f2b55..456157d6c 100644
--- a/console/web/src/components/ui/Cell.tsx
+++ b/console/web/src/components/ui/Cell.tsx
@@ -9,7 +9,7 @@ interface CellProps {
 
 export function Cell({ title, children, className }: CellProps) {
   return (
-    <div className={cn('border border-rule bg-bg p-7', className)}>
+    <div className={cn('rounded-md bg-surface p-5', className)}>
       {title ? (
         <div className="font-mono text-[16px] font-semibold tracking-[-0.01em] text-ink mb-3 lowercase">
           {title}
diff --git a/console/web/src/components/ui/Dialog.tsx b/console/web/src/components/ui/Dialog.tsx
index 3832b8904..fc6605b8b 100644
--- a/console/web/src/components/ui/Dialog.tsx
+++ b/console/web/src/components/ui/Dialog.tsx
@@ -12,13 +12,13 @@ export const DialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <DialogPrimitive.Portal>
-    <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-ink/40 dark:bg-black/90" />
+    <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/60" />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
         'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
         'w-full max-w-2xl max-h-[85vh] overflow-y-auto',
-        'border border-ink bg-bg dark:bg-bg-dark p-6 font-mono text-ink shadow-none',
+        'rounded-xl bg-panel-raised p-6 font-mono text-ink shadow-floating',
         'focus-visible:outline-none',
         className,
       )}
diff --git a/console/web/src/components/ui/DropdownMenu.tsx b/console/web/src/components/ui/DropdownMenu.tsx
index 8f760bba3..06e48f48c 100644
--- a/console/web/src/components/ui/DropdownMenu.tsx
+++ b/console/web/src/components/ui/DropdownMenu.tsx
@@ -28,7 +28,7 @@ export function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         sideOffset={sideOffset}
         className={cn(
-          'z-50 min-w-[10rem] overflow-hidden border border-rule bg-bg p-1 text-ink font-mono text-[12px] lowercase shadow-lg',
+          'z-50 min-w-[10rem] overflow-hidden rounded-md bg-panel-raised p-1 text-ink font-mono text-[12px] lowercase shadow-floating',
           'data-[state=open]:animate-in data-[state=closed]:animate-out',
           'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
           className,
@@ -61,8 +61,8 @@ export function DropdownMenuItem({
   return (
     <DropdownMenuPrimitive.Item
       className={cn(
-        'relative flex cursor-pointer items-center gap-2 px-2 py-1.5 outline-none select-none',
-        'data-[highlighted]:bg-rule data-[highlighted]:text-ink',
+        'relative flex cursor-pointer items-center gap-2 rounded-xs px-2 py-1.5 outline-none select-none',
+        'data-[highlighted]:bg-surface-hover data-[highlighted]:text-ink',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
         className,
       )}
@@ -83,8 +83,8 @@ export function DropdownMenuCheckboxItem({
   return (
     <DropdownMenuPrimitive.CheckboxItem
       className={cn(
-        'relative flex cursor-pointer items-center py-1.5 pr-2 pl-7 outline-none select-none',
-        'data-[highlighted]:bg-rule data-[highlighted]:text-ink',
+        'relative flex cursor-pointer items-center rounded-xs py-1.5 pr-2 pl-7 outline-none select-none',
+        'data-[highlighted]:bg-surface-hover data-[highlighted]:text-ink',
         'data-[state=checked]:text-ink',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
         className,
@@ -107,7 +107,7 @@ export function DropdownMenuSeparator({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
-      className={cn('-mx-1 my-1 h-px bg-rule', className)}
+      className={cn('-mx-1 my-1 h-px bg-rule-2', className)}
       {...props}
     />
   )
diff --git a/console/web/src/components/ui/FileDiff.tsx b/console/web/src/components/ui/FileDiff.tsx
new file mode 100644
index 000000000..f9e9f0ca8
--- /dev/null
+++ b/console/web/src/components/ui/FileDiff.tsx
@@ -0,0 +1,51 @@
+import { DEFAULT_THEMES } from '@pierre/diffs'
+import { MultiFileDiff } from '@pierre/diffs/react'
+import { useTheme } from '@/hooks/use-theme'
+
+/** One side of the diff — a whole file's text, not a patch. */
+export interface FileDiffSide {
+  /** Display name; also infers the syntax-highlight language. */
+  name: string
+  contents: string
+}
+
+export interface FileDiffProps {
+  /** Pass empty `contents` for a created (old) / deleted (new) file. */
+  oldFile: FileDiffSide
+  newFile: FileDiffSide
+  diffStyle?: 'unified' | 'split'
+  /** Long lines wrap by default; `'scroll'` preserves strict columns. */
+  overflow?: 'scroll' | 'wrap'
+  className?: string
+}
+
+/**
+ * The console's one file-diff surface — `@pierre/diffs`'s `MultiFileDiff`
+ * pinned to the console's diff conventions and following the active theme.
+ * The diff is computed from the two full file bodies, so callers never
+ * parse or ship patch text. Shared with injected worker UI through
+ * `@iii-dev/console-ui` for the same reason as `CodeEditor`: the diff
+ * renderer (and its highlighter) ships once, inside the console.
+ */
+export function FileDiff({
+  oldFile,
+  newFile,
+  diffStyle = 'unified',
+  overflow = 'wrap',
+  className,
+}: FileDiffProps) {
+  const [theme] = useTheme()
+  return (
+    <MultiFileDiff
+      oldFile={oldFile}
+      newFile={newFile}
+      className={className}
+      options={{
+        diffStyle,
+        overflow,
+        theme: DEFAULT_THEMES,
+        themeType: theme,
+      }}
+    />
+  )
+}
diff --git a/console/web/src/components/ui/Input.tsx b/console/web/src/components/ui/Input.tsx
index 281e67af7..b506f481f 100644
--- a/console/web/src/components/ui/Input.tsx
+++ b/console/web/src/components/ui/Input.tsx
@@ -23,10 +23,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       value={value}
       onChange={(e) => onChange(e.currentTarget.value)}
       className={cn(
-        'w-full border border-rule bg-bg px-3 h-9 text-ink font-mono text-[13px]',
+        'w-full rounded-sm border border-transparent bg-surface px-3 h-9 text-ink font-mono text-[13px]',
         !preserveCase && 'lowercase',
-        'placeholder:text-ink-faint',
-        'focus:outline-none focus:border-ink transition-colors',
+        'placeholder:text-ink-ghost',
+        'hover:bg-surface-hover focus:outline-none focus:border-rule-focus focus:ring-[3px] focus:ring-accent/10 transition-[border-color,box-shadow,background-color]',
         'disabled:opacity-40 disabled:pointer-events-none',
         className,
       )}
diff --git a/console/web/src/components/ui/ModeToggle.tsx b/console/web/src/components/ui/ModeToggle.tsx
index 714f3b93f..ee523bdbb 100644
--- a/console/web/src/components/ui/ModeToggle.tsx
+++ b/console/web/src/components/ui/ModeToggle.tsx
@@ -69,7 +69,10 @@ export function ModeToggle<T extends string>({
     <div
       role={groupRole}
       aria-label={ariaLabel}
-      className={cn('inline-flex border border-rule p-[2px]', className)}
+      className={cn(
+        'inline-flex rounded-sm bg-surface p-[2px] gap-[2px]',
+        className,
+      )}
     >
       {options.map((opt, idx) => {
         const active = opt.value === value
@@ -92,9 +95,9 @@ export function ModeToggle<T extends string>({
             onKeyDown={isRadio ? (e) => handleRadioKeyDown(e, idx) : undefined}
             title={opt.title}
             className={cn(
-              'font-mono text-[13px] px-3 py-1 transition-colors lowercase',
+              'font-mono text-[13px] px-3 py-1 rounded-xs transition-colors lowercase',
               active
-                ? 'bg-ink text-bg'
+                ? 'bg-accent-muted text-ink'
                 : 'bg-transparent text-ink-faint hover:text-ink',
             )}
           >
diff --git a/console/web/src/components/ui/PageChrome.tsx b/console/web/src/components/ui/PageChrome.tsx
new file mode 100644
index 000000000..aa55b9cfb
--- /dev/null
+++ b/console/web/src/components/ui/PageChrome.tsx
@@ -0,0 +1,177 @@
+/**
+ * Page chrome — THE layout design system every workspace pane follows,
+ * console-native screens (chat, traces) and worker-injected pages alike.
+ * The whole set is exported through `@iii-dev/console-ui`, so a worker
+ * page composes the exact same components (and picks up console-side
+ * restyles for free) instead of re-approximating the look per worker.
+ *
+ * The vocabulary, one surface per role (see index.css's surface ramp):
+ *
+ *   PageShell    the pane's root column — fills the pane, `bg-panel`
+ *   PageHeader   the standard top bar: `bg-panel-raised`, hairline edge
+ *                border, icon + title + description, an actions slot,
+ *                and the ✕ that closes the hosting pane (`onClose` —
+ *                pages get it as `PageRenderProps.onRequestClose`)
+ *   PageBody     the row under the header (`side` mirrors it so a
+ *                sidebar can hug the pane's outer edge)
+ *   PageSidebar  the navigation column — `bg-sidebar`, bounded width
+ *   PageMain     the primary workspace — `bg-panel`
+ *
+ * PageBody separates its children with a 1px `bg-edge` gap instead of
+ * per-child borders, so any composition (sidebar left, right, absent)
+ * gets the same hairline without border bookkeeping.
+ */
+
+import { X } from 'lucide-react'
+import type * as React from 'react'
+import { cn } from '@/lib/utils'
+
+/** The pane's root column. Fills the pane whether the parent is a flex
+    column (native screens) or a block scroller (the ext-page host). */
+export function PageShell({
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex-1 h-full min-h-0 min-w-0 flex flex-col bg-panel',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export interface PageHeaderProps {
+  /** Identity glyph, rendered at 16px in faint ink (any svg fits). */
+  icon?: React.ReactNode
+  /** The page's name — console chrome vocabulary: mono, lowercase. */
+  title?: React.ReactNode
+  /** One short descriptor; truncates before anything else gives. */
+  description?: React.ReactNode
+  /** Free-form middle content (fills the flexible gap before actions). */
+  children?: React.ReactNode
+  /** Right-side controls, rendered before the close affordance. */
+  actions?: React.ReactNode
+  /** Close the hosting pane — renders the standard ✕ when present.
+      Worker pages: pass `PageRenderProps.onRequestClose` through. */
+  onClose?: () => void
+  className?: string
+}
+
+/** The standard pane top bar: slightly raised, hairline bottom edge. */
+export function PageHeader({
+  icon,
+  title,
+  description,
+  children,
+  actions,
+  onClose,
+  className,
+}: PageHeaderProps) {
+  return (
+    <header
+      className={cn(
+        'flex items-center gap-2.5 h-11 px-3 shrink-0 whitespace-nowrap',
+        'bg-panel-raised border-b border-edge',
+        className,
+      )}
+    >
+      {icon ? (
+        <span
+          aria-hidden
+          className="shrink-0 flex items-center text-ink-faint [&>svg]:size-4"
+        >
+          {icon}
+        </span>
+      ) : null}
+      {title ? (
+        <span className="shrink-0 font-mono text-[12px] lowercase font-medium text-ink">
+          {title}
+        </span>
+      ) : null}
+      {description ? (
+        <span className="font-mono text-[11px] text-ink-ghost truncate min-w-0">
+          {description}
+        </span>
+      ) : null}
+      <div className="flex-1 min-w-0 flex items-center gap-2.5">{children}</div>
+      {actions ? (
+        <div className="shrink-0 flex items-center gap-1.5">{actions}</div>
+      ) : null}
+      {onClose ? (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="close panel"
+          title="close panel"
+          className="shrink-0 flex items-center justify-center size-7 rounded-sm text-ink-faint hover:text-ink hover:bg-surface-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rule-focus"
+        >
+          <X aria-hidden className="size-4" />
+        </button>
+      ) : null}
+    </header>
+  )
+}
+
+export interface PageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The pane's side of the tab (`PageRenderProps.panelSide`) — `right`
+      mirrors the row so the sidebar hugs the pane's outer edge. */
+  side?: 'left' | 'right'
+}
+
+/** The row under the header. The 1px gap paints in `bg-edge`, giving a
+    hairline between sidebar and main with zero border bookkeeping. */
+export function PageBody({ side = 'left', className, ...rest }: PageBodyProps) {
+  return (
+    <div
+      className={cn(
+        'flex-1 min-h-0 min-w-0 flex gap-px bg-edge',
+        side === 'right' && 'flex-row-reverse',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export interface PageSidebarProps extends React.HTMLAttributes<HTMLElement> {
+  /** Column width in px (fixed — navigation stays put while main flexes). */
+  width?: number
+}
+
+/** The navigation column: slightly gray, fixed width, own scroll. */
+export function PageSidebar({
+  width = 280,
+  className,
+  style,
+  ...rest
+}: PageSidebarProps) {
+  return (
+    <aside
+      style={{ width, ...style }}
+      className={cn(
+        'shrink-0 min-h-0 flex flex-col overflow-hidden bg-sidebar',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+/** The primary workspace column: white (`bg-panel`), takes what's left. */
+export function PageMain({
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <main
+      className={cn(
+        'flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden bg-panel',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/console/web/src/components/ui/Pagination.tsx b/console/web/src/components/ui/Pagination.tsx
index cafbda4ab..1c9d80cb1 100644
--- a/console/web/src/components/ui/Pagination.tsx
+++ b/console/web/src/components/ui/Pagination.tsx
@@ -37,7 +37,7 @@ export function Pagination({
         <select
           value={pageSize}
           onChange={(e) => onPageSizeChange(Number(e.target.value))}
-          className="border border-rule bg-bg text-ink font-mono text-[12px] px-1.5 py-0.5 rounded-none focus:outline-none focus:border-accent"
+          className="rounded-sm border border-transparent bg-surface text-ink font-mono text-[12px] px-1.5 py-0.5 focus:outline-none focus:border-rule-focus"
         >
           {pageSizeOptions.map((opt) => (
             <option key={opt} value={opt}>
diff --git a/console/web/src/components/ui/Select.tsx b/console/web/src/components/ui/Select.tsx
index 661b3ea15..b86d420cb 100644
--- a/console/web/src/components/ui/Select.tsx
+++ b/console/web/src/components/ui/Select.tsx
@@ -115,7 +115,7 @@ export function Select<T extends string>({
         aria-label={aria['aria-label']}
         aria-busy={aria['aria-busy']}
         className={cn(
-          'inline-flex items-center justify-between gap-x-2 border border-rule bg-bg px-3 h-9 text-ink font-mono text-[13px] lowercase focus:outline-none focus:border-ink data-[state=open]:border-ink transition-colors max-w-full min-w-0 data-[placeholder]:text-ink-faint',
+          'inline-flex items-center justify-between gap-x-2 rounded-sm border border-transparent bg-surface px-3 h-9 text-ink font-mono text-[13px] lowercase hover:bg-surface-hover focus:outline-none focus:border-rule-focus data-[state=open]:border-rule-focus transition-colors max-w-full min-w-0 data-[placeholder]:text-ink-ghost',
           disabled && 'opacity-40 pointer-events-none',
           className,
         )}
@@ -154,7 +154,7 @@ export function Select<T extends string>({
           position="popper"
           sideOffset={4}
           className={cn(
-            'z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-rule bg-bg text-ink font-mono text-[13px] lowercase shadow-lg',
+            'z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-panel-raised text-ink font-mono text-[13px] lowercase shadow-floating',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
           )}
@@ -236,8 +236,8 @@ function SelectItem({ value, label, title }: SelectItemProps) {
       value={value}
       title={title}
       className={cn(
-        'relative flex items-center pl-7 pr-3 py-1.5 cursor-pointer outline-none select-none',
-        'data-[highlighted]:bg-rule data-[highlighted]:text-ink',
+        'relative flex items-center pl-7 pr-3 py-1.5 rounded-xs cursor-pointer outline-none select-none',
+        'data-[highlighted]:bg-surface-hover data-[highlighted]:text-ink',
         'data-[state=checked]:text-ink',
         'data-[disabled]:opacity-40 data-[disabled]:pointer-events-none',
       )}
diff --git a/console/web/src/components/ui/Skeleton.tsx b/console/web/src/components/ui/Skeleton.tsx
index 23d292781..39db73ce4 100644
--- a/console/web/src/components/ui/Skeleton.tsx
+++ b/console/web/src/components/ui/Skeleton.tsx
@@ -10,7 +10,7 @@ export function Skeleton({ className, ...props }: SkeletonProps) {
     <span
       aria-hidden
       className={cn(
-        'inline-block bg-panel skeleton-pulse align-middle',
+        'inline-block rounded-xs bg-surface skeleton-pulse align-middle',
         className,
       )}
       {...props}
diff --git a/console/web/src/components/ui/StatusDot.tsx b/console/web/src/components/ui/StatusDot.tsx
index f48a359e2..594985261 100644
--- a/console/web/src/components/ui/StatusDot.tsx
+++ b/console/web/src/components/ui/StatusDot.tsx
@@ -1,13 +1,14 @@
 import type * as React from 'react'
 import { cn } from '@/lib/utils'
 
-type DotTone = 'accent' | 'alert' | 'warn' | 'ink'
+type DotTone = 'accent' | 'alert' | 'warn' | 'ink' | 'ok'
 
 const dotTone: Record<DotTone, string> = {
   accent: 'bg-accent',
   alert: 'bg-alert',
   warn: 'bg-warn',
   ink: 'bg-ink',
+  ok: 'bg-ok',
 }
 
 interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
diff --git a/console/web/src/components/ui/StatusPanel.tsx b/console/web/src/components/ui/StatusPanel.tsx
index 16e10feb5..f5e97e202 100644
--- a/console/web/src/components/ui/StatusPanel.tsx
+++ b/console/web/src/components/ui/StatusPanel.tsx
@@ -5,25 +5,25 @@ export type StatusVariant = 'info' | 'success' | 'warn' | 'alert'
 
 const variantTone: Record<
   StatusVariant,
-  { border: string; icon: string; headline: string }
+  { fill: string; icon: string; headline: string }
 > = {
   info: {
-    border: 'border-rule',
+    fill: 'bg-surface',
     icon: 'text-ink',
     headline: 'text-ink',
   },
   success: {
-    border: 'border-accent',
-    icon: 'text-accent',
-    headline: 'text-accent',
+    fill: 'bg-ok-muted',
+    icon: 'text-ok',
+    headline: 'text-ok',
   },
   warn: {
-    border: 'border-warn',
+    fill: 'bg-warn-muted',
     icon: 'text-warn',
     headline: 'text-warn',
   },
   alert: {
-    border: 'border-alert',
+    fill: 'bg-alert-muted',
     icon: 'text-alert',
     headline: 'text-alert',
   },
@@ -48,8 +48,8 @@ export function StatusPanel({
   return (
     <div
       className={cn(
-        'flex items-start gap-x-3 border bg-bg px-3.5 py-3',
-        tone.border,
+        'flex items-start gap-x-3 rounded-md px-3.5 py-3',
+        tone.fill,
         className,
       )}
     >
diff --git a/console/web/src/components/ui/Tabs.tsx b/console/web/src/components/ui/Tabs.tsx
index 7efe1ed03..acef5310f 100644
--- a/console/web/src/components/ui/Tabs.tsx
+++ b/console/web/src/components/ui/Tabs.tsx
@@ -10,7 +10,7 @@ export const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn('flex items-center gap-4 border-b border-rule', className)}
+    className={cn('flex items-center gap-1', className)}
     {...props}
   />
 ))
@@ -23,10 +23,9 @@ export const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'font-mono text-[11px] uppercase tracking-[0.06em] py-2 transition-colors',
-      'text-ink-faint hover:text-ink',
-      'data-[state=active]:text-ink data-[state=active]:border-b data-[state=active]:border-ink',
-      'data-[state=active]:-mb-px',
+      'font-mono text-[11px] uppercase tracking-[0.06em] px-2 py-1.5 my-1 rounded-sm transition-colors',
+      'text-ink-faint hover:text-ink hover:bg-surface-hover',
+      'data-[state=active]:text-ink data-[state=active]:bg-accent-muted',
       className,
     )}
     {...props}
diff --git a/console/web/src/components/ui/Tooltip.tsx b/console/web/src/components/ui/Tooltip.tsx
index 8ecd71581..bc02c399f 100644
--- a/console/web/src/components/ui/Tooltip.tsx
+++ b/console/web/src/components/ui/Tooltip.tsx
@@ -15,7 +15,7 @@ export const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 border border-rule bg-bg px-2.5 py-1.5 font-mono text-[12px] text-ink lowercase shadow-none',
+        'z-50 rounded-sm bg-panel-raised px-2.5 py-1.5 font-mono text-[12px] text-ink lowercase shadow-raised',
         className,
       )}
       {...props}
diff --git a/console/web/src/components/workspace/EmptyPane.tsx b/console/web/src/components/workspace/EmptyPane.tsx
new file mode 100644
index 000000000..6f3a186e9
--- /dev/null
+++ b/console/web/src/components/workspace/EmptyPane.tsx
@@ -0,0 +1,67 @@
+import { Plus, X } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu'
+import type { TabScreen } from '@/lib/workspace-tabs'
+import type { ScreenOption } from './use-screen-options'
+
+interface EmptyPaneProps {
+  screenOptions: ScreenOption[]
+  onAttach: (screen: TabScreen) => void
+  /** Present when the column can be dropped (multi-column tabs only). */
+  onRemove?: () => void
+}
+
+/**
+ * An empty workspace-tab column: nothing attached yet. The affordances are
+ * the attach dropdown listing every available screen (chat + pages +
+ * injected pages) and — in a split — removing the column again. Generous
+ * padding keeps both usable on narrow/mobile panes.
+ */
+export function EmptyPane({
+  screenOptions,
+  onAttach,
+  onRemove,
+}: EmptyPaneProps) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center gap-3 p-6 text-center">
+      <div className="font-mono text-[12px] lowercase text-ink-ghost">
+        nothing attached to this panel yet
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex items-center gap-2 h-9 px-4 rounded-sm bg-surface font-mono text-[13px] lowercase text-ink hover:bg-surface-hover data-[state=open]:bg-surface-hover transition-colors"
+          >
+            <Plus className="size-3.5" />
+            attach a page
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="center" sideOffset={6}>
+          {screenOptions.map((option) => (
+            <DropdownMenuItem
+              key={option.value}
+              onSelect={() => onAttach(option.value)}
+            >
+              {option.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {onRemove ? (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="inline-flex items-center gap-1.5 h-7 px-2 rounded-sm font-mono text-[11px] lowercase text-ink-ghost hover:text-ink hover:bg-surface-hover transition-colors"
+        >
+          <X className="size-3" />
+          remove this panel
+        </button>
+      ) : null}
+    </div>
+  )
+}
diff --git a/console/web/src/components/workspace/TabStrip.tsx b/console/web/src/components/workspace/TabStrip.tsx
new file mode 100644
index 000000000..585dc775b
--- /dev/null
+++ b/console/web/src/components/workspace/TabStrip.tsx
@@ -0,0 +1,498 @@
+import { Plus, X } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from '@/lib/utils'
+import { tabLabel, type WorkspaceTab } from '@/lib/workspace-tabs'
+
+interface TabStripProps {
+  tabs: WorkspaceTab[]
+  activeTabId: string
+  /** ext page id -> title, for tab labels. */
+  extPageTitles: ReadonlyMap<string, string>
+  onActivate: (id: string) => void
+  onClose: (id: string) => void
+  /** Create an EMPTY single-column tab (panes grow via the edge zones). */
+  onCreate: () => void
+  onRename: (id: string, name: string) => void
+  /** Move the tab at `from` to position `to` (indexes into `tabs`). */
+  onReorder: (from: number, to: number) => void
+}
+
+/** Touch: hold a tab still this long to pick it up for reordering (a
+    mouse/pen drag starts on movement alone — see the slop check). */
+const TOUCH_PICKUP_MS = 500
+/**
+ * Pointer travel that decides the press: with a mouse/pen it BEGINS the
+ * reorder drag; on touch it cancels the pickup so the strip can scroll.
+ */
+const PRESS_SLOP_PX = 6
+
+/** A press that may become a reorder drag once the timer fires. */
+interface PendingPress {
+  timer: number
+  pointerId: number
+  pointerType: string
+  x: number
+  y: number
+  index: number
+  el: HTMLElement
+}
+
+/** Mirror of the `drag` render state, mutable for pointer handlers. */
+interface ActiveDrag {
+  from: number
+  to: number
+  dx: number
+  startX: number
+  pointerId: number
+  el: HTMLElement
+}
+
+/**
+ * The header's workspace tab strip: one pill per saved tab (active carries
+ * the selection tint), a close affordance while more than one tab exists,
+ * and a `+` button that creates an empty single-column tab (screens attach
+ * from the empty pane; splits grow via the workspace edge zones).
+ * Double-click (or the right-click menu) swaps the label for an inline
+ * rename input — Enter commits, Escape (or clicking away) cancels.
+ *
+ * Dragging a tab reorders it: a mouse/pen picks it up as soon as the
+ * press moves, touch picks it up after a short hold (so the strip can
+ * still scroll). The tab follows the pointer, neighbours slide out of the
+ * way, and releasing commits the new order through `onReorder` (Escape
+ * drops it in place). Layout is only reordered on commit, so the rects
+ * captured at pickup stay valid for the whole drag.
+ */
+export function TabStrip({
+  tabs,
+  activeTabId,
+  extPageTitles,
+  onActivate,
+  onClose,
+  onCreate,
+  onRename,
+  onReorder,
+}: TabStripProps) {
+  const [renamingId, setRenamingId] = useState<string | null>(null)
+  const [menu, setMenu] = useState<{ id: string; x: number; y: number } | null>(
+    null,
+  )
+  const [drag, setDrag] = useState<{
+    from: number
+    to: number
+    dx: number
+  } | null>(null)
+  const stripRef = useRef<HTMLDivElement>(null)
+  const pressRef = useRef<PendingPress | null>(null)
+  const dragRef = useRef<ActiveDrag | null>(null)
+  /** Tab rects (and the flex gap) captured when a drag begins. */
+  const geomRef = useRef<{ rects: DOMRect[]; gap: number }>({
+    rects: [],
+    gap: 0,
+  })
+  const suppressClickRef = useRef(false)
+
+  const cancelPress = useCallback(() => {
+    const press = pressRef.current
+    if (!press) return
+    clearTimeout(press.timer)
+    pressRef.current = null
+    try {
+      press.el.releasePointerCapture(press.pointerId)
+    } catch {
+      // Never captured (or already released by a pointercancel).
+    }
+  }, [])
+
+  const beginDrag = useCallback(() => {
+    const press = pressRef.current
+    const strip = stripRef.current
+    pressRef.current = null
+    if (!press || !strip || dragRef.current) return
+    const rects = Array.from(
+      strip.querySelectorAll<HTMLElement>('[role="tab"]'),
+    ).map((el) => el.getBoundingClientRect())
+    geomRef.current = {
+      rects,
+      gap: rects.length > 1 ? rects[1].left - rects[0].right : 0,
+    }
+    // The pointer was captured at pointerdown, so moves keep flowing to
+    // the pressed tab for the whole drag.
+    dragRef.current = {
+      from: press.index,
+      to: press.index,
+      dx: 0,
+      startX: press.x,
+      pointerId: press.pointerId,
+      el: press.el,
+    }
+    setDrag({ from: press.index, to: press.index, dx: 0 })
+    navigator.vibrate?.(15)
+  }, [])
+
+  const endDrag = useCallback(
+    (commit: boolean) => {
+      const d = dragRef.current
+      if (!d) return
+      dragRef.current = null
+      try {
+        d.el.releasePointerCapture(d.pointerId)
+      } catch {
+        // Already released (pointercancel / element gone).
+      }
+      // The pointerup ending a drag still clicks the tab — swallow it so
+      // dropping never doubles as activate.
+      suppressClickRef.current = true
+      setDrag(null)
+      if (commit && d.to !== d.from) onReorder(d.from, d.to)
+    },
+    [onReorder],
+  )
+
+  const dragging = drag !== null
+  useEffect(() => {
+    if (!dragging) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') endDrag(false)
+    }
+    // Non-passive so a touch drag pans the tab, not the page.
+    const onTouchMove = (e: TouchEvent) => e.preventDefault()
+    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('touchmove', onTouchMove, { passive: false })
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('touchmove', onTouchMove)
+    }
+  }, [dragging, endDrag])
+
+  // A pending long-press timer must not fire into an unmounted strip.
+  useEffect(
+    () => () => {
+      if (pressRef.current) clearTimeout(pressRef.current.timer)
+    },
+    [],
+  )
+
+  return (
+    <div
+      ref={stripRef}
+      role="tablist"
+      aria-label="workspace tabs"
+      className="flex items-center gap-1 min-w-0 overflow-x-auto"
+    >
+      {tabs.map((tab, index) => {
+        const active = tab.id === activeTabId
+        const label = tabLabel(tab, extPageTitles)
+        const isDragged = drag !== null && drag.from === index
+        // Dragged tab follows the pointer; tabs between its old and
+        // prospective slots slide one tab-width toward the vacancy.
+        let transform: string | undefined
+        if (drag) {
+          if (isDragged) {
+            transform = `translateX(${drag.dx}px)`
+          } else {
+            const { rects, gap } = geomRef.current
+            const w = (rects[drag.from]?.width ?? 0) + gap
+            if (drag.from < index && index <= drag.to) {
+              transform = `translateX(${-w}px)`
+            } else if (drag.to <= index && index < drag.from) {
+              transform = `translateX(${w}px)`
+            }
+          }
+        }
+        return (
+          <div
+            key={tab.id}
+            role="tab"
+            aria-selected={active}
+            tabIndex={0}
+            onClick={() => {
+              if (suppressClickRef.current) {
+                suppressClickRef.current = false
+                return
+              }
+              onActivate(tab.id)
+            }}
+            onKeyDown={(e) => {
+              if (renamingId === tab.id) return
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onActivate(tab.id)
+              }
+            }}
+            onDoubleClick={() => {
+              if (renamingId === tab.id || dragRef.current) return
+              cancelPress()
+              setRenamingId(tab.id)
+            }}
+            onPointerDown={(e) => {
+              if (e.button !== 0 || renamingId === tab.id || dragRef.current)
+                return
+              // Presses on the close affordance never arm a drag.
+              if ((e.target as Element).closest('button')) return
+              suppressClickRef.current = false
+              cancelPress()
+              // Capture up front so slight drift off the tab during the
+              // 2s hold neither hides moves from the slop check nor
+              // strands the eventual drag without events.
+              try {
+                e.currentTarget.setPointerCapture(e.pointerId)
+              } catch {
+                // Best-effort; the press still works in place.
+              }
+              pressRef.current = {
+                pointerId: e.pointerId,
+                pointerType: e.pointerType,
+                x: e.clientX,
+                y: e.clientY,
+                index,
+                el: e.currentTarget,
+                // Touch keeps a short-hold pickup (movement scrolls the
+                // strip). Mouse/pen picks up on movement — the timer is a
+                // stationary-hold fallback.
+                timer: window.setTimeout(
+                  beginDrag,
+                  e.pointerType === 'touch' ? TOUCH_PICKUP_MS : 2000,
+                ),
+              }
+            }}
+            onPointerMove={(e) => {
+              const press = pressRef.current
+              if (
+                press &&
+                Math.hypot(e.clientX - press.x, e.clientY - press.y) >
+                  PRESS_SLOP_PX
+              ) {
+                if (press.pointerType === 'touch') {
+                  // Let the finger scroll the strip.
+                  cancelPress()
+                } else {
+                  // Mouse/pen: movement IS the drag gesture.
+                  clearTimeout(press.timer)
+                  beginDrag()
+                }
+              }
+              const d = dragRef.current
+              if (!d) return
+              const { rects } = geomRef.current
+              const own = rects[d.from]
+              // Clamp to the tab row so the strip never gains overflow.
+              const dx = Math.max(
+                rects[0].left - own.left,
+                Math.min(
+                  rects[rects.length - 1].right - own.right,
+                  e.clientX - d.startX,
+                ),
+              )
+              // Drop slot from the POINTER, not the (clamped) tab: the
+              // insertion index is how many other tabs' centers sit left
+              // of it.
+              let to = 0
+              for (let i = 0; i < rects.length; i++) {
+                if (i === d.from) continue
+                if (e.clientX > rects[i].left + rects[i].width / 2) to++
+              }
+              d.dx = dx
+              d.to = to
+              setDrag({ from: d.from, to, dx })
+            }}
+            onPointerUp={() => {
+              cancelPress()
+              endDrag(true)
+            }}
+            onPointerCancel={() => {
+              cancelPress()
+              endDrag(false)
+            }}
+            onContextMenu={(e) => {
+              e.preventDefault()
+              if (dragRef.current) return
+              // Touch long-press fires the browser context menu well
+              // before the 2s pickup — swallow it so a continued hold
+              // reaches reorder mode.
+              if (pressRef.current?.pointerType === 'touch') return
+              cancelPress()
+              setMenu({ id: tab.id, x: e.clientX, y: e.clientY })
+            }}
+            style={transform ? { transform } : undefined}
+            className={cn(
+              'group/tab flex items-center gap-1 h-7 pl-2.5 rounded-sm font-mono text-[12px] lowercase cursor-pointer select-none whitespace-nowrap transition-colors',
+              tabs.length > 1 ? 'pr-1' : 'pr-2.5',
+              active
+                ? 'bg-accent-muted text-ink'
+                : 'text-ink-faint hover:bg-surface-hover hover:text-ink',
+              dragging && !isDragged && 'transition-transform duration-150',
+              isDragged &&
+                'relative z-10 shadow-floating cursor-grabbing transition-none',
+              isDragged && !active && 'bg-panel-raised text-ink',
+            )}
+          >
+            {renamingId === tab.id ? (
+              <RenameInput
+                initial={tab.name ?? label}
+                onCommit={(name) => {
+                  setRenamingId(null)
+                  onRename(tab.id, name)
+                }}
+                onCancel={() => setRenamingId(null)}
+              />
+            ) : (
+              <span className="truncate max-w-[180px]">{label}</span>
+            )}
+            {tabs.length > 1 && renamingId !== tab.id ? (
+              <button
+                type="button"
+                aria-label={`close ${label}`}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onClose(tab.id)
+                }}
+                className={cn(
+                  'flex items-center justify-center size-4.5 rounded-xs text-ink-ghost hover:text-ink hover:bg-surface-hover transition-[color,opacity]',
+                  !active && 'opacity-0 group-hover/tab:opacity-100',
+                )}
+              >
+                <X className="size-3" />
+              </button>
+            ) : null}
+          </div>
+        )
+      })}
+
+      <button
+        type="button"
+        aria-label="new tab"
+        title="new tab"
+        onClick={onCreate}
+        className="flex items-center justify-center size-7 shrink-0 rounded-sm text-ink-faint hover:text-ink hover:bg-surface-hover transition-colors"
+      >
+        <Plus className="size-4" />
+      </button>
+
+      {menu ? (
+        <TabContextMenu
+          x={menu.x}
+          y={menu.y}
+          canClose={tabs.length > 1}
+          onRename={() => {
+            setRenamingId(menu.id)
+            setMenu(null)
+          }}
+          onClose={() => {
+            onClose(menu.id)
+            setMenu(null)
+          }}
+          onDismiss={() => setMenu(null)}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+interface RenameInputProps {
+  initial: string
+  onCommit: (name: string) => void
+  onCancel: () => void
+}
+
+function RenameInput({ initial, onCommit, onCancel }: RenameInputProps) {
+  const [draft, setDraft] = useState(initial)
+  const inputRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    inputRef.current?.focus()
+    inputRef.current?.select()
+  }, [])
+  return (
+    <input
+      ref={inputRef}
+      value={draft}
+      onChange={(e) => setDraft(e.currentTarget.value)}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        e.stopPropagation()
+        if (e.key === 'Enter') onCommit(draft)
+        else if (e.key === 'Escape') onCancel()
+      }}
+      onBlur={onCancel}
+      aria-label="rename tab"
+      className="w-[140px] bg-transparent font-mono text-[12px] text-ink outline-none lowercase"
+    />
+  )
+}
+
+interface TabContextMenuProps {
+  x: number
+  y: number
+  canClose: boolean
+  onRename: () => void
+  onClose: () => void
+  onDismiss: () => void
+}
+
+/**
+ * Hand-rolled context menu (Radix dropdowns anchor to a trigger element,
+ * not a pointer position). Portaled to body; dismissed by any outside
+ * pointer-down or Escape.
+ */
+function TabContextMenu({
+  x,
+  y,
+  canClose,
+  onRename,
+  onClose,
+  onDismiss,
+}: TabContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const onPointerDown = (e: PointerEvent) => {
+      if (menuRef.current?.contains(e.target as Node)) return
+      onDismiss()
+    }
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onDismiss()
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [onDismiss])
+
+  const itemCls =
+    'w-full flex items-center gap-2 rounded-xs px-2 py-1.5 text-left font-mono text-[12px] lowercase text-ink cursor-pointer hover:bg-surface-hover transition-colors'
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      style={{
+        position: 'fixed',
+        top: Math.min(y, window.innerHeight - 96),
+        left: Math.min(x, window.innerWidth - 160),
+        zIndex: 60,
+      }}
+      className="min-w-[140px] rounded-md bg-panel-raised p-1 shadow-floating"
+    >
+      <button
+        type="button"
+        role="menuitem"
+        className={itemCls}
+        onClick={onRename}
+      >
+        rename
+      </button>
+      {canClose ? (
+        <button
+          type="button"
+          role="menuitem"
+          className={itemCls}
+          onClick={onClose}
+        >
+          close tab
+        </button>
+      ) : null}
+    </div>,
+    document.body,
+  )
+}
diff --git a/console/web/src/components/workspace/pane-controls.tsx b/console/web/src/components/workspace/pane-controls.tsx
new file mode 100644
index 000000000..700d22815
--- /dev/null
+++ b/console/web/src/components/workspace/pane-controls.tsx
@@ -0,0 +1,207 @@
+/**
+ * Pane chrome for the workspace columns: the drag-to-resize divider
+ * between adjacent panes, and the screen-edge zones that grow the split.
+ *
+ * The edge zones live in the panes container's 6px horizontal padding, so
+ * they never sit over pane content (or its scrollbars). Resting a mouse
+ * there for a beat — or tapping it on touch — reveals the add-column
+ * affordance; clicking that adds an empty pane on that side.
+ */
+
+import { Plus } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+
+/** Mouse dwell on an edge before the add-column affordance reveals. */
+const EDGE_REVEAL_MS = 2000
+/** Revealed affordance auto-hides after the pointer leaves it. */
+const EDGE_HIDE_MS = 400
+/** Keyboard resize step, as a fraction of the container width. */
+const KEY_STEP = 0.02
+
+interface ResizeHandleProps {
+  /** Left pane's share in percent — the separator's aria value. */
+  value: number
+  /** Live fraction drag: positive deltas widen the left pane. */
+  onResize: (leftDelta: number) => void
+  /** Gesture over — persist the current fractions. */
+  onCommit: () => void
+  /** Container width in px, for px→fraction conversion. */
+  containerWidth: () => number
+}
+
+/**
+ * The 6px gap between two panes, promoted to a col-resize grip. Deltas
+ * are reported as FRACTIONS of the container width; the parent clamps
+ * and re-renders, so the handle itself stays stateless. Focusable:
+ * arrow keys nudge the split by 2% a press.
+ */
+export function ResizeHandle({
+  value,
+  onResize,
+  onCommit,
+  containerWidth,
+}: ResizeHandleProps) {
+  const [active, setActive] = useState(false)
+  const startXRef = useRef(0)
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a separator with slider behavior — div + ARIA is the accurate shape
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="resize panels"
+      aria-valuenow={Math.round(value)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      tabIndex={0}
+      className={cn(
+        'relative w-1.5 shrink-0 cursor-col-resize touch-none select-none focus-visible:outline-none',
+        'after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] after:-translate-x-1/2 after:rounded-full after:transition-colors',
+        active
+          ? 'after:bg-accent'
+          : 'after:bg-transparent hover:after:bg-rule-strong focus-visible:after:bg-accent',
+      )}
+      onKeyDown={(e) => {
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
+        e.preventDefault()
+        onResize(e.key === 'ArrowLeft' ? -KEY_STEP : KEY_STEP)
+        onCommit()
+      }}
+      onPointerDown={(e) => {
+        if (e.button !== 0) return
+        e.preventDefault()
+        e.currentTarget.setPointerCapture(e.pointerId)
+        startXRef.current = e.clientX
+        setActive(true)
+      }}
+      onPointerMove={(e) => {
+        if (!active) return
+        const width = containerWidth()
+        if (width <= 0) return
+        const delta = (e.clientX - startXRef.current) / width
+        if (delta === 0) return
+        startXRef.current = e.clientX
+        onResize(delta)
+      }}
+      onPointerUp={(e) => {
+        if (!active) return
+        setActive(false)
+        try {
+          e.currentTarget.releasePointerCapture(e.pointerId)
+        } catch {
+          // already released
+        }
+        onCommit()
+      }}
+      onPointerCancel={() => {
+        if (!active) return
+        setActive(false)
+        onCommit()
+      }}
+    />
+  )
+}
+
+interface EdgeAddZoneProps {
+  side: 'left' | 'right'
+  onAdd: () => void
+}
+
+/**
+ * The far-left / far-right sliver of the workspace. A mouse resting on it
+ * reveals a GHOST PANEL — a dashed, translucent preview of the pane that
+ * would appear there (a click/tap reveals immediately; touch has no hover
+ * to dwell on); clicking the ghost makes it real.
+ * Render only while the tab is under MAX_COLUMNS.
+ */
+export function EdgeAddZone({ side, onAdd }: EdgeAddZoneProps) {
+  const [revealed, setRevealed] = useState(false)
+  const dwellRef = useRef<number | null>(null)
+  const hideRef = useRef<number | null>(null)
+
+  const clearTimers = () => {
+    if (dwellRef.current != null) window.clearTimeout(dwellRef.current)
+    if (hideRef.current != null) window.clearTimeout(hideRef.current)
+    dwellRef.current = null
+    hideRef.current = null
+  }
+  useEffect(
+    () => () => {
+      if (dwellRef.current != null) window.clearTimeout(dwellRef.current)
+      if (hideRef.current != null) window.clearTimeout(hideRef.current)
+    },
+    [],
+  )
+
+  return (
+    <div
+      className={cn(
+        'absolute inset-y-0 z-20 flex pb-1.5 transition-[width] duration-150',
+        side === 'left' ? 'left-0' : 'right-0',
+        revealed ? 'w-32' : 'w-1.5',
+      )}
+      onPointerEnter={(e) => {
+        if (hideRef.current != null) {
+          window.clearTimeout(hideRef.current)
+          hideRef.current = null
+        }
+        if (revealed || dwellRef.current != null) return
+        if (e.pointerType === 'mouse') {
+          dwellRef.current = window.setTimeout(() => {
+            dwellRef.current = null
+            setRevealed(true)
+          }, EDGE_REVEAL_MS)
+        }
+      }}
+      onPointerLeave={() => {
+        if (dwellRef.current != null) {
+          window.clearTimeout(dwellRef.current)
+          dwellRef.current = null
+        }
+        if (revealed) {
+          hideRef.current = window.setTimeout(() => {
+            hideRef.current = null
+            setRevealed(false)
+          }, EDGE_HIDE_MS)
+        }
+      }}
+    >
+      {revealed ? (
+        // The ghost panel: same shape as a real pane (rounded, bordered,
+        // bottom-aligned with the row), but dashed and translucent — a
+        // preview of the pane the click will create.
+        <button
+          type="button"
+          aria-label={`add panel on the ${side}`}
+          title={`add panel on the ${side}`}
+          onClick={() => {
+            clearTimers()
+            setRevealed(false)
+            onAdd()
+          }}
+          className={cn(
+            'flex h-full w-full flex-col items-center justify-center gap-2 rounded-sm',
+            'border border-dashed border-ink-ghost bg-panel/60 backdrop-blur-[2px]',
+            'font-mono text-[11px] lowercase text-ink-faint',
+            'mx-1.5 hover:border-accent hover:text-ink transition-colors',
+          )}
+        >
+          <Plus className="size-4" />
+          new panel
+        </button>
+      ) : (
+        <button
+          type="button"
+          aria-label={`show the add-panel control (${side} edge)`}
+          onClick={() => {
+            // Touch (and impatient mice): first tap reveals, second adds.
+            clearTimers()
+            setRevealed(true)
+          }}
+          className="h-full w-full cursor-default bg-transparent focus-visible:bg-accent-muted focus-visible:outline-none"
+        />
+      )}
+    </div>
+  )
+}
diff --git a/console/web/src/components/workspace/use-screen-options.ts b/console/web/src/components/workspace/use-screen-options.ts
new file mode 100644
index 000000000..50af4d427
--- /dev/null
+++ b/console/web/src/components/workspace/use-screen-options.ts
@@ -0,0 +1,35 @@
+import { buildViewOptions } from '@/lib/nav-options'
+import { useExtPages } from '@/lib/ui-slots'
+import {
+  CHAT_SCREEN,
+  screenForExtPage,
+  type TabScreen,
+} from '@/lib/workspace-tabs'
+
+export interface ScreenOption {
+  value: TabScreen
+  label: string
+}
+
+/**
+ * Every screen a workspace tab can attach: the chat view, the first-party
+ * pages, and the worker-injected pages (whose presence already tracks
+ * worker connectedness via trigger GC). Configuration is absent by
+ * design — console settings open as an overlay page, not a tab screen.
+ */
+export function useScreenOptions(): {
+  screenOptions: ScreenOption[]
+  extPageTitles: ReadonlyMap<string, string>
+} {
+  const extPages = useExtPages()
+  const screenOptions: ScreenOption[] = [
+    { value: CHAT_SCREEN, label: 'chat' },
+    ...buildViewOptions(),
+    ...extPages.map((page) => ({
+      value: screenForExtPage(page.id),
+      label: page.title,
+    })),
+  ]
+  const extPageTitles = new Map(extPages.map((page) => [page.id, page.title]))
+  return { screenOptions, extPageTitles }
+}
diff --git a/console/web/src/hooks/use-chat-dock.test.ts b/console/web/src/hooks/use-chat-dock.test.ts
deleted file mode 100644
index b1697aab1..000000000
--- a/console/web/src/hooks/use-chat-dock.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import {
-  computeDockDefaultWidth,
-  computeDockMaxWidth,
-  DOCK_MIN_WIDTH,
-} from './use-chat-dock'
-
-describe('chat dock sizing', () => {
-  it('starts with an even viewport split', () => {
-    expect(computeDockDefaultWidth(1280)).toBe(640)
-    expect(computeDockDefaultWidth(1920)).toBe(960)
-  })
-
-  it('keeps the minimum widths when the viewport is narrow', () => {
-    expect(computeDockDefaultWidth(500)).toBe(DOCK_MIN_WIDTH)
-    expect(computeDockMaxWidth(500)).toBe(DOCK_MIN_WIDTH)
-  })
-})
diff --git a/console/web/src/hooks/use-chat-dock.ts b/console/web/src/hooks/use-chat-dock.ts
deleted file mode 100644
index d7156d47f..000000000
--- a/console/web/src/hooks/use-chat-dock.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-const WIDTH_KEY = 'iii-chat-dock-width'
-const COLLAPSED_KEY = 'iii-chat-dock-collapsed'
-// Legacy: when the dock was first made toggleable we persisted an open/closed
-// flag under a different key. The collapse state now lives under
-// COLLAPSED_KEY; sweep the old key on first run so it doesn't linger in
-// users' localStorage forever.
-const LEGACY_OPEN_KEY = 'iii-chat-dock-open'
-
-export const DOCK_MIN_WIDTH = 320
-/**
- * Reserve for the route content that sits next to the dock. The dock can
- * grow as wide as the user drags, but never wider than
- * `viewportWidth - DOCK_NEIGHBOR_MIN_WIDTH` so the main route stays usable.
- */
-export const DOCK_NEIGHBOR_MIN_WIDTH = 240
-
-const FALLBACK_VIEWPORT_WIDTH = 1200
-
-function getViewportWidth(): number {
-  if (typeof window === 'undefined') return FALLBACK_VIEWPORT_WIDTH
-  return window.innerWidth || FALLBACK_VIEWPORT_WIDTH
-}
-
-export function computeDockMaxWidth(
-  viewportWidth: number = getViewportWidth(),
-): number {
-  return Math.max(DOCK_MIN_WIDTH, viewportWidth - DOCK_NEIGHBOR_MIN_WIDTH)
-}
-
-/** Start with an even split between the chat dock and the active route. */
-export function computeDockDefaultWidth(
-  viewportWidth: number = getViewportWidth(),
-): number {
-  return clampWidth(viewportWidth / 2, viewportWidth)
-}
-
-function clampWidth(w: number, viewportWidth?: number): number {
-  const max = computeDockMaxWidth(viewportWidth)
-  return Math.max(DOCK_MIN_WIDTH, Math.min(max, w))
-}
-
-function loadWidth(): number {
-  if (typeof window === 'undefined') return computeDockDefaultWidth()
-  try {
-    const raw = window.localStorage.getItem(WIDTH_KEY)
-    if (!raw) return computeDockDefaultWidth()
-    const n = Number.parseInt(raw, 10)
-    if (!Number.isFinite(n)) return computeDockDefaultWidth()
-    /* Only clamp by min here; the viewport-aware upper bound is enforced by
-       the mount-time effect in useChatDock since window dims may differ
-       between persisted-at and rehydrate-at. */
-    return Math.max(DOCK_MIN_WIDTH, n)
-  } catch {
-    return computeDockDefaultWidth()
-  }
-}
-
-function persistWidth(value: number) {
-  if (typeof window === 'undefined') return
-  try {
-    window.localStorage.setItem(WIDTH_KEY, String(value))
-  } catch {
-    // best-effort persistence
-  }
-}
-
-function sweepLegacyOpenKey(): void {
-  if (typeof window === 'undefined') return
-  try {
-    window.localStorage.removeItem(LEGACY_OPEN_KEY)
-  } catch {
-    // best-effort
-  }
-}
-
-function loadCollapsed(): boolean {
-  if (typeof window === 'undefined') return false
-  try {
-    return window.localStorage.getItem(COLLAPSED_KEY) === '1'
-  } catch {
-    return false
-  }
-}
-
-function persistCollapsed(value: boolean): void {
-  if (typeof window === 'undefined') return
-  try {
-    window.localStorage.setItem(COLLAPSED_KEY, value ? '1' : '0')
-  } catch {
-    // best-effort persistence
-  }
-}
-
-export interface UseChatDockReturn {
-  width: number
-  setWidth: (value: number) => void
-  collapsed: boolean
-  setCollapsed: (value: boolean) => void
-  toggleCollapsed: () => void
-}
-
-/**
- * Resizable, collapsible chat dock that sits next to the active route pane.
- * Width and collapsed state are both persisted to `localStorage` so the dock
- * survives reloads at whatever size and visibility the user left it in.
- *
- * The dock has no fixed upper width cap: it can be dragged as wide as the
- * user wants, with the only constraint being that the adjacent route
- * content keeps at least `DOCK_NEIGHBOR_MIN_WIDTH` pixels. If the viewport
- * shrinks below that envelope, the persisted width is re-clamped so the
- * dock doesn't overflow the screen. When collapsed, the dock renders as a
- * thin strip with a re-expand affordance — the previous width is preserved
- * and restored on re-expand.
- */
-export function useChatDock(): UseChatDockReturn {
-  const [width, setWidthState] = useState<number>(loadWidth)
-  const [collapsed, setCollapsedState] = useState<boolean>(loadCollapsed)
-
-  useEffect(() => {
-    persistWidth(width)
-  }, [width])
-
-  useEffect(() => {
-    persistCollapsed(collapsed)
-  }, [collapsed])
-
-  /* One-shot cleanup of the legacy open/closed flag from a prior iteration
-     of the dock. Idempotent: removeItem on a missing key is a no-op. */
-  useEffect(() => {
-    sweepLegacyOpenKey()
-  }, [])
-
-  /* Re-clamp on mount and on every viewport resize so a previously stored
-     wide value (from a larger screen) shrinks to fit the current window,
-     and so live resizes keep the route content visible. */
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const reclamp = () => {
-      setWidthState((w) => clampWidth(w))
-    }
-    reclamp()
-    window.addEventListener('resize', reclamp)
-    return () => window.removeEventListener('resize', reclamp)
-  }, [])
-
-  const setWidth = useCallback((value: number) => {
-    setWidthState(clampWidth(value))
-  }, [])
-
-  const setCollapsed = useCallback((value: boolean) => {
-    setCollapsedState(value)
-  }, [])
-
-  const toggleCollapsed = useCallback(() => {
-    setCollapsedState((v) => !v)
-  }, [])
-
-  /* ⌘\ / Ctrl+\ toggles the dock. Listener lives in the hook so the
-     shortcut keeps working when the dock is collapsed and the panel
-     itself isn't mounted. Ignored when the user is typing into an
-     editable element so we don't fight composer input. */
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== '\\') return
-      if (!(e.metaKey || e.ctrlKey)) return
-      const target = e.target as HTMLElement | null
-      if (target?.isContentEditable) return
-      const tag = target?.tagName
-      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
-      e.preventDefault()
-      toggleCollapsed()
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [toggleCollapsed])
-
-  return { width, setWidth, collapsed, setCollapsed, toggleCollapsed }
-}
diff --git a/console/web/src/hooks/use-workspace-tabs.ts b/console/web/src/hooks/use-workspace-tabs.ts
new file mode 100644
index 000000000..895669993
--- /dev/null
+++ b/console/web/src/hooks/use-workspace-tabs.ts
@@ -0,0 +1,309 @@
+/**
+ * Server-persisted workspace tabs (see `lib/workspace-tabs.ts` for the
+ * model). Tabs live in the engine's `console` configuration entry, so the
+ * layout follows the engine, and the query polls on an interval — a tab
+ * created in another browser shows up here within seconds without a
+ * reload.
+ *
+ * Every mutation applies OPTIMISTICALLY to the shared `['consoleConfig']`
+ * cache first (the strip must react to a close/create/rename in the same
+ * frame as the click), then writes through the same read-modify-write
+ * funnel the traces saved views use; the next poll reconciles with
+ * whatever the server actually stored.
+ *
+ * When the configuration worker (or the `console` entry) is unreachable,
+ * tabs degrade to localStorage so the strip keeps working offline.
+ */
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useState } from 'react'
+import {
+  type ConsoleConfigValue,
+  fetchConsoleConfigValue,
+  setConsoleConfigValue,
+} from '@/lib/console-config'
+import { moveItem } from '@/lib/reorder'
+import {
+  defaultTabs,
+  newTabId,
+  parseActiveTabId,
+  parseWorkspaceTabs,
+  resolveActiveTab,
+  type TabScreen,
+  tabColumns,
+  type WorkspaceTab,
+  withActiveTabId,
+  withColumnAdded,
+  withColumnRemoved,
+  withScreenDetached,
+  withWorkspaceTabs,
+} from '@/lib/workspace-tabs'
+
+const CONSOLE_CONFIG_QUERY_KEY = ['consoleConfig']
+const LOCAL_KEY = 'iii-workspace-tabs'
+
+interface LocalState {
+  tabs: WorkspaceTab[]
+  activeTabId: string
+}
+
+function loadLocal(): LocalState {
+  const fallback: LocalState = {
+    tabs: defaultTabs(),
+    activeTabId: defaultTabs()[0].id,
+  }
+  if (typeof window === 'undefined') return fallback
+  try {
+    const raw = window.localStorage.getItem(LOCAL_KEY)
+    if (!raw) return fallback
+    const parsed = JSON.parse(raw) as Record<string, unknown>
+    const tabs = parseWorkspaceTabs({ workspace: parsed })
+    if (tabs.length === 0) return fallback
+    const activeTabId = parseActiveTabId({ workspace: parsed })
+    return { tabs, activeTabId: resolveActiveTab(tabs, activeTabId).id }
+  } catch {
+    return fallback
+  }
+}
+
+function persistLocal(state: LocalState): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(
+      LOCAL_KEY,
+      JSON.stringify({ tabs: state.tabs, activeTabId: state.activeTabId }),
+    )
+  } catch {
+    // best-effort
+  }
+}
+
+export interface UseWorkspaceTabsReturn {
+  tabs: WorkspaceTab[]
+  activeTabId: string
+  activeTab: WorkspaceTab
+  activateTab: (id: string) => void
+  /** New tab with the chosen column count and (optionally) screens. */
+  createTab: (opts: { columns: 1 | 2; screens?: TabScreen[] }) => void
+  closeTab: (id: string) => void
+  renameTab: (id: string, name: string) => void
+  /** Move the tab at `from` to position `to` (indexes into `tabs`). */
+  reorderTab: (from: number, to: number) => void
+  /** Attach (or replace) the screen a tab column shows. */
+  attachScreen: (id: string, column: number, screen: TabScreen) => void
+  /** Blank a column's screen (column stays, shows the attach affordance). */
+  detachScreen: (id: string, column: number) => void
+  /** Grow the tab by one empty column on that side (≤ MAX_COLUMNS). */
+  addColumn: (id: string, side: 'left' | 'right') => void
+  /** Drop one column (the last one never goes). */
+  removeColumn: (id: string, column: number) => void
+  /** Persist drag-to-resize column fractions (index-aligned). */
+  resizeColumns: (id: string, sizes: number[]) => void
+}
+
+export function useWorkspaceTabs(): UseWorkspaceTabsReturn {
+  const qc = useQueryClient()
+
+  // Shares the traces saved-views cache entry; refetchInterval keeps the
+  // strip reactive to writes from other browsers/tabs.
+  const { data } = useQuery<ConsoleConfigValue | null>({
+    queryKey: CONSOLE_CONFIG_QUERY_KEY,
+    queryFn: fetchConsoleConfigValue,
+    staleTime: 3_000,
+    refetchInterval: 5_000,
+    refetchOnWindowFocus: true,
+    retry: 1,
+  })
+  const available = data !== null && data !== undefined
+
+  const [local, setLocal] = useState<LocalState>(loadLocal)
+
+  // Selection made in THIS browser; wins over the server pointer so a slow
+  // write never lags the strip (same pattern as useTraceViews).
+  const [chosenTabId, setChosenTabId] = useState<string | null>(null)
+
+  const serverTabs = available ? parseWorkspaceTabs(data) : []
+  const tabs = available
+    ? serverTabs.length > 0
+      ? serverTabs
+      : defaultTabs()
+    : local.tabs
+
+  const serverActiveId = available ? parseActiveTabId(data) : undefined
+  const pointer =
+    chosenTabId ?? (available ? serverActiveId : local.activeTabId)
+  // No pointer (or one at a tab another browser closed) lands on the
+  // chat+traces tab, falling back to the first tab.
+  const activeTab = resolveActiveTab(tabs, pointer)
+  const activeTabId = activeTab.id
+
+  const mutation = useMutation({
+    mutationFn: async (
+      transform: (value: ConsoleConfigValue) => ConsoleConfigValue,
+    ) => {
+      const current = (await fetchConsoleConfigValue()) ?? {}
+      const next = transform(current)
+      await setConsoleConfigValue(next)
+      return next
+    },
+    onSuccess: (next) => {
+      qc.setQueryData(CONSOLE_CONFIG_QUERY_KEY, next)
+    },
+  })
+
+  const persist = useCallback(
+    (nextTabs: WorkspaceTab[], nextActiveId: string) => {
+      if (available) {
+        const transform = (value: ConsoleConfigValue) =>
+          withActiveTabId(withWorkspaceTabs(value, nextTabs), nextActiveId)
+        // Optimistic: the strip reflects the change in this frame; the
+        // server write (and the next poll) reconcile behind it.
+        qc.setQueryData<ConsoleConfigValue | null>(
+          CONSOLE_CONFIG_QUERY_KEY,
+          (old) => transform(old ?? {}),
+        )
+        mutation.mutateAsync(transform).catch(() => {})
+      } else {
+        const nextState = { tabs: nextTabs, activeTabId: nextActiveId }
+        setLocal(nextState)
+        persistLocal(nextState)
+      }
+    },
+    [available, mutation, qc],
+  )
+
+  const activateTab = useCallback(
+    (id: string) => {
+      setChosenTabId(id)
+      persist(tabs, id)
+    },
+    [persist, tabs],
+  )
+
+  const createTab = useCallback(
+    (opts: { columns: 1 | 2; screens?: TabScreen[] }) => {
+      const screens = (opts.screens ?? []).slice(0, opts.columns)
+      const tab: WorkspaceTab = {
+        id: newTabId(),
+        columns: opts.columns,
+        screens,
+      }
+      setChosenTabId(tab.id)
+      persist([...tabs, tab], tab.id)
+    },
+    [persist, tabs],
+  )
+
+  const closeTab = useCallback(
+    (id: string) => {
+      if (tabs.length <= 1) return
+      const remaining = tabs.filter((t) => t.id !== id)
+      const nextActive =
+        id === activeTabId ? remaining[remaining.length - 1].id : activeTabId
+      setChosenTabId(nextActive)
+      persist(remaining, nextActive)
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  const renameTab = useCallback(
+    (id: string, name: string) => {
+      const trimmed = name.trim()
+      persist(
+        tabs.map((t) => {
+          if (t.id !== id) return t
+          const { name: _prev, ...rest } = t
+          return trimmed ? { ...rest, name: trimmed } : rest
+        }),
+        activeTabId,
+      )
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  const reorderTab = useCallback(
+    (from: number, to: number) => {
+      if (from === to) return
+      persist(moveItem(tabs, from, to), activeTabId)
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  const attachScreen = useCallback(
+    (id: string, column: number, screen: TabScreen) => {
+      persist(
+        tabs.map((t) => {
+          if (t.id !== id) return t
+          const columns = tabColumns(t)
+          const screens: (TabScreen | null)[] = Array.from(
+            { length: columns },
+            (_, i) => t.screens[i] ?? null,
+          )
+          if (column < 0 || column >= columns) return t
+          screens[column] = screen
+          return { ...t, columns, screens }
+        }),
+        activeTabId,
+      )
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  const detachScreen = useCallback(
+    (id: string, column: number) => {
+      persist(
+        tabs.map((t) => (t.id === id ? withScreenDetached(t, column) : t)),
+        activeTabId,
+      )
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  const addColumn = useCallback(
+    (id: string, side: 'left' | 'right') => {
+      persist(
+        tabs.map((t) => (t.id === id ? withColumnAdded(t, side) : t)),
+        activeTabId,
+      )
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  const removeColumn = useCallback(
+    (id: string, column: number) => {
+      persist(
+        tabs.map((t) => (t.id === id ? withColumnRemoved(t, column) : t)),
+        activeTabId,
+      )
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  const resizeColumns = useCallback(
+    (id: string, sizes: number[]) => {
+      persist(
+        tabs.map((t) =>
+          t.id === id && sizes.length === tabColumns(t) ? { ...t, sizes } : t,
+        ),
+        activeTabId,
+      )
+    },
+    [persist, tabs, activeTabId],
+  )
+
+  return {
+    tabs,
+    activeTabId,
+    activeTab,
+    activateTab,
+    createTab,
+    closeTab,
+    renameTab,
+    reorderTab,
+    attachScreen,
+    detachScreen,
+    addColumn,
+    removeColumn,
+    resizeColumns,
+  }
+}
diff --git a/console/web/src/index.css b/console/web/src/index.css
index 460848ff1..204bd2389 100644
--- a/console/web/src/index.css
+++ b/console/web/src/index.css
@@ -14,44 +14,101 @@
     "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-mono:
-    "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+    "Geist Mono", "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, "Liberation Mono", "Courier New", monospace;
   --font-geist-mono:
     "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 
+  /* ── Surface ramp ─────────────────────────────────────────────────────
+     Layered surfaces communicate hierarchy before borders do:
+     bg (canvas) → sidebar → panel → panel-raised → surface →
+     surface-hover → surface-selected → surface-active.
+     `paper-2` is the legacy alias for panel-raised. */
   --color-bg: #f2f0ed;
+  --color-sidebar: #f2f2f2;
   --color-panel: lab(98.26% 0 0);
+  --color-panel-raised: #f7f5f2;
   --color-paper-2: #ebe8e3;
+  --color-surface: rgba(20, 16, 8, 0.055);
+  --color-surface-hover: rgba(20, 16, 8, 0.085);
+  --color-surface-selected: rgba(184, 66, 15, 0.12);
+  --color-surface-active: rgba(20, 16, 8, 0.12);
 
+  /* ── Ink ramp ──────────────────────────────────────────────────────── */
   --color-ink: #0a0a0a;
   --color-ink-faint: #6b6865;
   --color-ink-ghost: #a3a09c;
-
-  --color-rule: #d8d5d0;
-  --color-rule-2: #e6e3df;
+  --color-ink-disabled: #b8b4ae;
+
+  /* ── Border ramp ──────────────────────────────────────────────────────
+     The system draws no lines: rule/rule-2/rule-strong resolve to
+     transparent in both themes (legacy `border-rule*` utilities become
+     inert 1px transparent borders, so layout never shifts). Hierarchy is
+     carried by the surface fills above. The single exception is
+     rule-focus — the focus indicator on inputs and controls, which must
+     stay visible for accessibility. */
+  --color-rule: transparent;
+  --color-rule-2: transparent;
+  --color-rule-strong: transparent;
+  --color-rule-focus: rgba(184, 66, 15, 0.6);
+
+  /* The one structural stroke the system keeps: a VERY subtle edge on the
+     main workspace panels (the tab columns), so the floating panels
+     read against the canvas. Never used inside a panel. */
+  --color-edge: #14100829;
 
   /* Darker burnt orange so accent text on cream passes WCAG AA at 11px
      (≈4.83:1 vs. previous ≈2.74:1 for #ff5a1f). Visually still firmly in
-     the iii Schematic warm-fiery family; the dark-mode cyan accent below
-     is unchanged. */
+     the iii Schematic warm-fiery family; dark mode swaps to the blue
+     accent below. */
   --color-accent: #b8420f;
   --color-accent-fg: #f2f0ed;
+  --color-accent-hover: #a53a0c;
+  --color-accent-muted: rgba(184, 66, 15, 0.1);
+  --color-accent-border: rgba(184, 66, 15, 0.35);
 
-  /* The single error color — every error surface (text-alert, StatusDot,
+  /* The error color — every error surface (text-alert, StatusDot,
      SPAN_STATUS_COLORS in the trace charts) resolves through this token.
-     No dark-mode override: it applies to both themes. */
+     Dark mode overrides it with a softer coral tuned for dark surfaces. */
   --color-alert: #ff0026;
+  --color-alert-muted: rgba(255, 0, 38, 0.08);
   --color-warn: #a87a00;
+  --color-warn-muted: rgba(168, 122, 0, 0.12);
   /* Diff additions (coder update-file echoes) — the palette's only green.
      Desaturated to sit with alert/warn; 5.3:1 on cream at 12px (AA). */
   --color-ok: #356f3d;
+  --color-ok-muted: rgba(53, 111, 61, 0.12);
 
   --color-ring: color-mix(in oklab, var(--foreground) 5%, transparent);
 
+  /* ── Radii ────────────────────────────────────────────────────────────
+     One radius everywhere: every step of the Tailwind scale resolves to
+     6px, so badges, buttons, cards, panels, and modals share the same
+     corner. Only `none` (main columns' outer frame edge cases) and `full`
+     (dots, round action buttons) differ. */
   --radius-none: 0px;
+  --radius-xs: 6px;
+  --radius-sm: 6px;
+  --radius-md: 6px;
+  --radius-lg: 6px;
+  --radius-xl: 6px;
   --radius-full: 9999px;
 
+  /* ── Elevation ──────────────────────────────────────────────────────
+     Light mode keeps elevation quiet — a contact shadow plus an ambient
+     falloff, both in the same warm black (#141008 @ ~10%) the edge and
+     surface ramps are built on. Note: this tint must live IN these
+     tokens — Tailwind registers --tw-shadow-color per-element
+     (non-inheriting), so a :root override can't reach the utilities.
+     Dark mode re-strengthens these (see the [data-theme="dark"] block):
+     there the shadow is the only depth cue, so it carries more weight. */
+  --shadow-raised: 0 1px 2px #1410081a, 0 4px 12px #1410081a;
+  --shadow-floating: 0 2px 4px #1410081a, 0 10px 24px #1410081a;
+
+  /* ── Motion ─────────────────────────────────────────────────────────── */
+  --ease-glide: cubic-bezier(0.2, 0.8, 0.2, 1);
+
   --spacing-gutter: 24px;
   --spacing-section-x: 36px;
   --spacing-section-y: 80px;
@@ -60,17 +117,47 @@
 }
 
 [data-theme="dark"] {
-  --color-bg: #030303;
-  --color-panel: #0a0a0a;
-  --color-paper-2: #1f1e1c;
-  --color-ink: #f2f0ed;
-  --color-ink-faint: #a8a49e;
-  --color-ink-ghost: #8a8782;
-  --color-rule: #2a2926;
-  --color-rule-2: #1f1e1c;
-  --color-accent: #3ea8ff;
-  --color-accent-fg: #030303;
-  --color-ok: #5fae6a;
+  /* Neutral grays derived from black — no blue cast in the base ramp. The
+     component fills (surface*) are white-alpha so a step reads identically
+     over any base layer; the ONLY chromatic surface is surface-selected,
+     the blue selection tint. Borders are gone: rule/rule-2/rule-strong
+     resolve to transparent, and hierarchy is carried entirely by fills. */
+
+  /* Elevation carries more weight here — on near-black the shadow is the
+     only depth cue, plus an inset white hairline for the lit top edge. */
+  --shadow-raised:
+    0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 8px 24px rgba(0, 0, 0, 0.18);
+  --shadow-floating:
+    0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.28);
+  --color-bg: #0a0a0a;
+  --color-sidebar: #0e0e0e;
+  --color-panel: #111111;
+  --color-panel-raised: #171717;
+  --color-paper-2: #171717;
+  --color-surface: rgba(255, 255, 255, 0.055);
+  --color-surface-hover: rgba(255, 255, 255, 0.085);
+  --color-surface-selected: rgba(40, 168, 247, 0.14);
+  --color-surface-active: rgba(255, 255, 255, 0.12);
+  --color-ink: #ededed;
+  --color-ink-faint: #a6a6a6;
+  --color-ink-ghost: #6f6f6f;
+  --color-ink-disabled: #4d4d4d;
+  --color-rule: transparent;
+  --color-rule-2: transparent;
+  --color-rule-strong: transparent;
+  --color-rule-focus: rgba(40, 168, 247, 0.7);
+  --color-edge: rgba(255, 255, 255, 0.07);
+  --color-accent: #28a8f7;
+  --color-accent-fg: #070909;
+  --color-accent-hover: #46b6fa;
+  --color-accent-muted: rgba(40, 168, 247, 0.12);
+  --color-accent-border: rgba(40, 168, 247, 0.35);
+  --color-alert: #f05d68;
+  --color-alert-muted: rgba(240, 93, 104, 0.12);
+  --color-warn: #f5a524;
+  --color-warn-muted: rgba(245, 165, 36, 0.12);
+  --color-ok: #36c98f;
+  --color-ok-muted: rgba(54, 201, 143, 0.12);
 }
 
 @layer base {
@@ -88,9 +175,11 @@
     text-rendering: optimizeLegibility !important;
   }
 
+  /* Scroll look-and-feel is the SYSTEM's everywhere: no scrollbar
+     restyling, no gutter reservation — macOS overlay scrollbars appear
+     only while scrolling, classic ones render untouched. */
   html,
   body {
-    scrollbar-gutter: stable;
     overflow: hidden;
   }
 
@@ -106,19 +195,7 @@
     color: var(--color-accent-fg);
   }
 
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: var(--color-rule);
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--color-ink-ghost);
-  }
+  /* Scrollbars stay system-default — no ::-webkit-scrollbar restyling. */
 
   /* flatten the native optgroup label so it doesn't introduce bold/italic
      into a mono-lowercase picker. chrome/firefox honor these; safari ignores
@@ -370,6 +447,20 @@
   animation: trace-flash 600ms ease-out forwards;
 }
 
+/* Function/tool-call card chrome — an accent-tinted raised surface (soft
+   gradient wash, no border) so calls read as special without any outline.
+   Derived from the accent token, so it tints blue in dark mode and burnt
+   orange in light mode. */
+@utility fcall-chrome {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--color-accent) 7%, transparent),
+      color-mix(in oklab, var(--color-accent) 3%, transparent)
+    ),
+    var(--color-panel-raised);
+}
+
 /* lexical editor surface — keep it boring so it inherits the rest of the system */
 .composer-editor {
   outline: none;
diff --git a/console/web/src/lib/chat-activity.test.ts b/console/web/src/lib/chat-activity.test.ts
deleted file mode 100644
index 8dad8b0b9..000000000
--- a/console/web/src/lib/chat-activity.test.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { getDockSignal } from '@/lib/chat-activity'
-import type { Conversation, Message } from '@/types/chat'
-
-function conv(messages: Message[]): Conversation {
-  return {
-    id: 'test',
-    title: 't',
-    model: 'openai::gpt-5',
-    mode: 'agent',
-    messages,
-    createdAt: 0,
-    updatedAt: 0,
-  }
-}
-
-describe('getDockSignal', () => {
-  it('returns null for missing or empty conversation', () => {
-    expect(getDockSignal(null)).toBeNull()
-    expect(getDockSignal(undefined)).toBeNull()
-    expect(getDockSignal(conv([]))).toBeNull()
-  })
-
-  it("returns 'active' when the assistant is streaming the last message", () => {
-    const m: Message = {
-      id: '1',
-      createdAt: 0,
-      role: 'assistant',
-      content: 'partial',
-      streaming: true,
-    }
-    expect(getDockSignal(conv([m]))).toBe('active')
-  })
-
-  it("returns 'active' when the thought stream is in flight", () => {
-    const m: Message = {
-      id: '1',
-      createdAt: 0,
-      role: 'thought',
-      content: 'thinking',
-      durationMs: 0,
-      streaming: true,
-    }
-    expect(getDockSignal(conv([m]))).toBe('active')
-  })
-
-  it("returns 'active' when a tool call is running", () => {
-    const m: Message = {
-      id: '1',
-      createdAt: 0,
-      role: 'function-trigger',
-      functionId: 'shell::run',
-      input: {},
-      running: true,
-    }
-    expect(getDockSignal(conv([m]))).toBe('active')
-  })
-
-  it("returns 'error' when the last message is a system/error", () => {
-    const m: Message = {
-      id: '1',
-      createdAt: 0,
-      role: 'system',
-      content: 'rate limited',
-      tone: 'error',
-    }
-    expect(getDockSignal(conv([m]))).toBe('error')
-  })
-
-  it("returns 'attention' when the last message is a system/warn", () => {
-    const m: Message = {
-      id: '1',
-      createdAt: 0,
-      role: 'system',
-      content: 'soft failure',
-      tone: 'warn',
-    }
-    expect(getDockSignal(conv([m]))).toBe('attention')
-  })
-
-  it('returns null for a settled assistant message (no streaming flag)', () => {
-    const m: Message = {
-      id: '1',
-      createdAt: 0,
-      role: 'assistant',
-      content: 'done',
-    }
-    expect(getDockSignal(conv([m]))).toBeNull()
-  })
-
-  it('pendency wins over freshness: pending approval anywhere overrides a later system error', () => {
-    const pending: Message = {
-      id: '1',
-      createdAt: 0,
-      role: 'function-trigger',
-      functionId: 'shell::write',
-      input: {},
-      pendingApproval: true,
-    }
-    const errLater: Message = {
-      id: '2',
-      createdAt: 1,
-      role: 'system',
-      content: 'context compacted',
-      tone: 'error',
-    }
-    expect(getDockSignal(conv([pending, errLater]))).toBe('active')
-  })
-})
diff --git a/console/web/src/lib/chat-activity.ts b/console/web/src/lib/chat-activity.ts
deleted file mode 100644
index 99bf4afb9..000000000
--- a/console/web/src/lib/chat-activity.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { Conversation } from '@/types/chat'
-
-/**
- * State surfaced by the chat-dock toggle when the dock is collapsed.
- *
- * - `active`: the assistant is producing output or waiting on the user
- *   (streaming, pending approval, running tool call). Foregrounded with the
- *   accent pulse so blocking events don't get buried.
- * - `attention`: the most recent system message warns the user about
- *   something they should look at (rate limit, soft failure, compaction
- *   notice). Static warn-tinted border, no pulse — calmer than `active`.
- * - `error`: the most recent system message is a hard failure. Static
- *   alert-tinted border, no pulse — wrong moment to demand attention with
- *   motion.
- * - `null`: idle.
- *
- * Pendency wins over freshness: a `pendingApproval` anywhere in the
- * history overrides a more recent warn/error system message so the user
- * never misses a blocking gate.
- */
-export type DockSignal = 'active' | 'attention' | 'error' | null
-
-export function getDockSignal(
-  active: Conversation | null | undefined,
-): DockSignal {
-  if (!active || active.messages.length === 0) return null
-
-  for (const m of active.messages) {
-    if (m.role === 'function-trigger' && m.pendingApproval) return 'active'
-  }
-
-  const last = active.messages[active.messages.length - 1]
-  if (!last) return null
-
-  if (last.role === 'assistant' && last.streaming) return 'active'
-  if (last.role === 'thought' && last.streaming) return 'active'
-  if (last.role === 'function-trigger' && last.running) return 'active'
-  if (last.role === 'system') {
-    if (last.tone === 'error') return 'error'
-    if (last.tone === 'warn') return 'attention'
-  }
-  return null
-}
diff --git a/console/web/src/lib/console-api.ts b/console/web/src/lib/console-api.ts
index f65afd076..55641d98f 100644
--- a/console/web/src/lib/console-api.ts
+++ b/console/web/src/lib/console-api.ts
@@ -31,8 +31,16 @@ import {
 } from '@/components/ui/DropdownMenu'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary'
+import { FileDiff } from '@/components/ui/FileDiff'
 import { Input } from '@/components/ui/Input'
 import { MarkdownPreview } from '@/components/ui/MarkdownPreview'
+import {
+  PageBody,
+  PageHeader,
+  PageMain,
+  PageShell,
+  PageSidebar,
+} from '@/components/ui/PageChrome'
 import { Select } from '@/components/ui/Select'
 import { Skeleton } from '@/components/ui/Skeleton'
 import { StatusDot } from '@/components/ui/StatusDot'
@@ -73,7 +81,13 @@ export const components: ConsoleApi['components'] = {
   DropdownMenuSeparator,
   EmptyState,
   ErrorBoundary,
+  FileDiff,
   Input,
+  PageShell,
+  PageHeader,
+  PageBody,
+  PageSidebar,
+  PageMain,
   Select,
   Skeleton,
   StatusDot,
diff --git a/console/web/src/lib/console-ui-conformance.test.ts b/console/web/src/lib/console-ui-conformance.test.ts
index 5b10a549c..598c8f882 100644
--- a/console/web/src/lib/console-ui-conformance.test.ts
+++ b/console/web/src/lib/console-ui-conformance.test.ts
@@ -40,8 +40,16 @@ import {
 } from '@/components/ui/DropdownMenu'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary'
+import { FileDiff } from '@/components/ui/FileDiff'
 import { Input } from '@/components/ui/Input'
 import { MarkdownPreview } from '@/components/ui/MarkdownPreview'
+import {
+  PageBody,
+  PageHeader,
+  PageMain,
+  PageShell,
+  PageSidebar,
+} from '@/components/ui/PageChrome'
 import { Select } from '@/components/ui/Select'
 import { Skeleton } from '@/components/ui/Skeleton'
 import { StatusDot } from '@/components/ui/StatusDot'
@@ -81,10 +89,16 @@ const conformance: {
   DropdownMenuTrigger: typeof ConsoleUi.DropdownMenuTrigger
   EmptyState: typeof ConsoleUi.EmptyState
   ErrorBoundary: typeof ConsoleUi.ErrorBoundary
+  FileDiff: typeof ConsoleUi.FileDiff
   Input: typeof ConsoleUi.Input
   JsonHighlight: typeof ConsoleUi.JsonHighlight
   Markdown: typeof ConsoleUi.Markdown
   MarkdownPreview: typeof ConsoleUi.MarkdownPreview
+  PageBody: typeof ConsoleUi.PageBody
+  PageHeader: typeof ConsoleUi.PageHeader
+  PageMain: typeof ConsoleUi.PageMain
+  PageShell: typeof ConsoleUi.PageShell
+  PageSidebar: typeof ConsoleUi.PageSidebar
   Select: typeof ConsoleUi.Select
   Skeleton: typeof ConsoleUi.Skeleton
   StatusDot: typeof ConsoleUi.StatusDot
@@ -116,10 +130,16 @@ const conformance: {
   DropdownMenuTrigger,
   EmptyState,
   ErrorBoundary,
+  FileDiff,
   Input,
   JsonHighlight,
   Markdown,
   MarkdownPreview,
+  PageBody,
+  PageHeader,
+  PageMain,
+  PageShell,
+  PageSidebar,
   Select,
   Skeleton,
   StatusDot,
diff --git a/console/web/src/lib/iii-client.test.ts b/console/web/src/lib/iii-client.test.ts
index 24adf13e9..97439775b 100644
--- a/console/web/src/lib/iii-client.test.ts
+++ b/console/web/src/lib/iii-client.test.ts
@@ -5,8 +5,8 @@
  * a second session's send died silently while another session streamed).
  */
 
-import { describe, expect, it } from 'vitest'
 import type { ISdk, RemoteFunctionHandler } from 'iii-browser-sdk'
+import { describe, expect, it } from 'vitest'
 import { wrapSdk } from './iii-client'
 
 function fakeSdk() {
diff --git a/console/web/src/lib/markdown.tsx b/console/web/src/lib/markdown.tsx
index d10b3418b..96234cf05 100644
--- a/console/web/src/lib/markdown.tsx
+++ b/console/web/src/lib/markdown.tsx
@@ -231,14 +231,14 @@ const components: Components = {
       return (
         <JsonHighlight
           code={source.replace(/\n$/, '')}
-          className="border border-rule my-4"
+          className="rounded-md border border-rule-2 my-4"
         />
       )
     }
     return (
       <pre
         className={cn(
-          'border border-rule bg-bg overflow-x-auto px-5 py-4 my-4 font-mono text-[12.5px] leading-[1.55] text-ink',
+          'rounded-md border border-rule-2 bg-bg overflow-x-auto px-5 py-4 my-4 font-mono text-[12.5px] leading-[1.55] text-ink',
           className,
         )}
         {...rest}
@@ -270,7 +270,7 @@ const components: Components = {
     )
   },
   table: ({ className, ...rest }) => (
-    <div className="my-4 overflow-x-auto border border-rule">
+    <div className="my-4 overflow-x-auto rounded-md border border-rule-2">
       <table
         className={cn(
           'w-full border-collapse font-mono text-[13px] text-ink',
@@ -281,7 +281,7 @@ const components: Components = {
     </div>
   ),
   thead: ({ className, ...rest }) => (
-    <thead className={cn('bg-panel', className)} {...rest} />
+    <thead className={cn('bg-surface', className)} {...rest} />
   ),
   th: ({ className, ...rest }) => (
     <th
diff --git a/console/web/src/lib/monaco.ts b/console/web/src/lib/monaco.ts
index 2dc4cb090..e98785b4d 100644
--- a/console/web/src/lib/monaco.ts
+++ b/console/web/src/lib/monaco.ts
@@ -27,7 +27,7 @@ export const CONSOLE_THEME = 'iii-console'
 
 /** Mirrors `--font-mono` in index.css — used only if the token is unreadable. */
 const FALLBACK_MONO =
-  '"Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
+  '"Geist Mono", "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
 
 self.MonacoEnvironment = {
   getWorker(_workerId: string, label: string) {
@@ -51,13 +51,22 @@ self.MonacoEnvironment = {
   },
 }
 
-/** Normalize any CSS color (`lab()`, `color-mix()`, hex, …) to `#rrggbb`. */
-function toHex(css: string, fallback: string): string {
+/**
+ * Normalize any CSS color (`lab()`, `color-mix()`, hex, …) to `#rrggbb`.
+ * `base` is composited under translucent values (the border tokens are
+ * white-alpha in dark mode) so the readback is the color as actually seen,
+ * not the un-premultiplied channel values.
+ */
+function toHex(css: string, fallback: string, base?: string): string {
   const canvas = document.createElement('canvas')
   canvas.width = 1
   canvas.height = 1
   const ctx = canvas.getContext('2d', { willReadFrequently: true })
   if (!ctx) return fallback
+  if (base) {
+    ctx.fillStyle = base
+    ctx.fillRect(0, 0, 1, 1)
+  }
   ctx.fillStyle = fallback
   ctx.fillStyle = css // invalid values keep the fallback
   ctx.fillRect(0, 0, 1, 1)
@@ -81,17 +90,23 @@ export function monoFontFamily(): string {
 function syncTheme(): void {
   const root = document.documentElement
   const style = getComputedStyle(root)
+  const dark = root.dataset.theme === 'dark'
+  const bg = toHex(
+    style.getPropertyValue('--color-bg').trim() ||
+      (dark ? '#0a0a0a' : '#f2f0ed'),
+    dark ? '#0a0a0a' : '#f2f0ed',
+  )
   const token = (name: string, fallback: string) =>
-    toHex(style.getPropertyValue(name).trim() || fallback, fallback)
+    toHex(style.getPropertyValue(name).trim() || fallback, fallback, bg)
 
-  const dark = root.dataset.theme === 'dark'
-  const bg = token('--color-bg', dark ? '#030303' : '#f2f0ed')
-  const ink = token('--color-ink', dark ? '#f2f0ed' : '#0a0a0a')
-  const inkFaint = token('--color-ink-faint', dark ? '#a8a49e' : '#6b6865')
-  const inkGhost = token('--color-ink-ghost', dark ? '#8a8782' : '#a3a09c')
-  const accent = token('--color-accent', dark ? '#3ea8ff' : '#b8420f')
-  const panel = token('--color-panel', dark ? '#0a0a0a' : '#fafafa')
-  const rule = token('--color-rule', dark ? '#2a2926' : '#d8d5d0')
+  const ink = token('--color-ink', dark ? '#ededed' : '#0a0a0a')
+  const inkFaint = token('--color-ink-faint', dark ? '#a6a6a6' : '#6b6865')
+  const inkGhost = token('--color-ink-ghost', dark ? '#6f6f6f' : '#a3a09c')
+  const accent = token('--color-accent', dark ? '#28a8f7' : '#b8420f')
+  const panel = token('--color-panel', dark ? '#111111' : '#fafafa')
+  // rule is transparent in the no-lines system; composited over bg it
+  // resolves to the background, so Monaco widget "borders" disappear too.
+  const rule = token('--color-rule', dark ? '#0a0a0a' : '#f2f0ed')
 
   const t = (hex: string) => hex.slice(1)
   monaco.editor.defineTheme(CONSOLE_THEME, {
diff --git a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/reorder.test.ts b/console/web/src/lib/reorder.test.ts
similarity index 100%
rename from console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/reorder.test.ts
rename to console/web/src/lib/reorder.test.ts
diff --git a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/reorder.ts b/console/web/src/lib/reorder.ts
similarity index 57%
rename from console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/reorder.ts
rename to console/web/src/lib/reorder.ts
index 46099674b..a75d698d4 100644
--- a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/reorder.ts
+++ b/console/web/src/lib/reorder.ts
@@ -1,7 +1,8 @@
 /**
- * Pure array reorder used by the drag-to-reorder affordance in
- * `ArrayField` and `DictionaryField`. Returns a new array (never mutates
- * the input) so it slots straight into React state updates.
+ * Pure array reorder shared by the drag-to-reorder affordances (the
+ * schema form's `ArrayField` / `DictionaryField` and the workspace tab
+ * strip). Returns a new array (never mutates the input) so it slots
+ * straight into React state updates.
  */
 export function moveItem<T>(list: readonly T[], from: number, to: number): T[] {
   const copy = list.slice()
diff --git a/console/web/src/lib/ui-loader.tsx b/console/web/src/lib/ui-loader.tsx
index 3cfbd381d..4910298c6 100644
--- a/console/web/src/lib/ui-loader.tsx
+++ b/console/web/src/lib/ui-loader.tsx
@@ -111,9 +111,9 @@ function makeHost(
             ...page,
             scope,
             path,
-            render: () => (
+            render: (renderProps) => (
               <ScopedExtension scope={scope} path={path}>
-                <Body />
+                <Body {...renderProps} />
               </ScopedExtension>
             ),
           }),
diff --git a/console/web/src/lib/workspace-tabs.test.ts b/console/web/src/lib/workspace-tabs.test.ts
new file mode 100644
index 000000000..87e2abdce
--- /dev/null
+++ b/console/web/src/lib/workspace-tabs.test.ts
@@ -0,0 +1,264 @@
+import { describe, expect, it } from 'vitest'
+import {
+  defaultTabs,
+  parseActiveTabId,
+  parseWorkspaceTabs,
+  resolveActiveTab,
+  screenForView,
+  screenLabel,
+  tabColumns,
+  tabLabel,
+  tabSizes,
+  type WorkspaceTab,
+  withActiveTabId,
+  withColumnAdded,
+  withColumnRemoved,
+  withScreenDetached,
+  withWorkspaceTabs,
+} from './workspace-tabs'
+
+const NO_EXT = new Map<string, string>()
+
+describe('parseWorkspaceTabs', () => {
+  it('returns [] for an empty / malformed config', () => {
+    expect(parseWorkspaceTabs({})).toEqual([])
+    expect(parseWorkspaceTabs({ workspace: 'nope' })).toEqual([])
+    expect(parseWorkspaceTabs({ workspace: { tabs: 'nope' } })).toEqual([])
+  })
+
+  it('keeps valid tabs (incl. empty and null columns) and drops malformed ones', () => {
+    const tabs = parseWorkspaceTabs({
+      workspace: {
+        tabs: [
+          { id: 't1', screens: ['traces'] },
+          { id: 't2', screens: ['chat', 'workers'] },
+          { id: 't3', screens: ['ext:my-page'] },
+          { id: 't4', columns: 2, screens: [] },
+          { id: 't5', columns: 2, screens: [null, 'traces'] },
+          { id: 't6', columns: 3, screens: ['traces', 'chat', 'workers'] },
+          { id: 't7', columns: 2, screens: ['chat', 'traces'], sizes: [1, 3] },
+          { id: 'bad-screen', screens: ['nonsense'] },
+          { id: 'bad-four', screens: ['traces', 'chat', 'workers', 'memory'] },
+          { id: 'bad-columns', columns: 4, screens: ['traces'] },
+          { id: 'bad-sizes', screens: ['traces'], sizes: [0, -1] },
+          { screens: ['traces'] },
+        ],
+      },
+    })
+    expect(tabs.map((t) => t.id)).toEqual([
+      't1',
+      't2',
+      't3',
+      't4',
+      't5',
+      't6',
+      't7',
+    ])
+  })
+
+  it("migrates legacy 'configuration' screens to empty columns", () => {
+    const tabs = parseWorkspaceTabs({
+      workspace: {
+        tabs: [{ id: 'cfg', columns: 2, screens: ['configuration', 'traces'] }],
+      },
+    })
+    expect(tabs).toHaveLength(1)
+    expect(tabs[0].screens).toEqual([null, 'traces'])
+  })
+
+  it('rewrites migrated per-worker screens to their ext form', () => {
+    const tabs = parseWorkspaceTabs({
+      workspace: {
+        tabs: [
+          { id: 'mig', columns: 2, screens: ['memory', 'worktrees'] },
+          { id: 'mig2', columns: 2, screens: ['browser', 'github'] },
+        ],
+      },
+    })
+    expect(tabs).toHaveLength(2)
+    expect(tabs[0].screens).toEqual(['ext:memory', 'ext:worktree'])
+    expect(tabs[1].screens).toEqual(['ext:browser', 'ext:github'])
+  })
+})
+
+describe('tabColumns', () => {
+  it('prefers the explicit count, falls back to the screen count', () => {
+    expect(tabColumns({ id: 't', columns: 2, screens: [] })).toBe(2)
+    expect(
+      tabColumns({ id: 't', columns: 1, screens: ['chat', 'traces'] }),
+    ).toBe(1)
+    expect(tabColumns({ id: 't', screens: ['chat', 'traces'] })).toBe(2)
+    expect(tabColumns({ id: 't', screens: [] })).toBe(1)
+  })
+})
+
+describe('active pointer round-trip', () => {
+  it('writes and reads the pointer without clobbering siblings', () => {
+    const value = withActiveTabId(
+      { traces: { views: [] }, workspace: { tabs: defaultTabs() } },
+      'tab-x',
+    )
+    expect(parseActiveTabId(value)).toBe('tab-x')
+    expect(value.traces).toEqual({ views: [] })
+    expect(parseWorkspaceTabs(value)).toEqual(defaultTabs())
+  })
+
+  it('withWorkspaceTabs preserves the active pointer', () => {
+    const value = withWorkspaceTabs(withActiveTabId({}, 'tab-y'), defaultTabs())
+    expect(parseActiveTabId(value)).toBe('tab-y')
+  })
+})
+
+describe('screen mapping + labels', () => {
+  it('maps views to screens; ext-without-id and configuration have none', () => {
+    expect(screenForView('workers', null)).toBe('workers')
+    expect(screenForView('ext', 'my-page')).toBe('ext:my-page')
+    // The ext transient (view and page id land in separate commits) must
+    // not resolve to a fallback screen — that used to spawn duplicate tabs.
+    expect(screenForView('ext', null)).toBeNull()
+    // Settings are an overlay page, not a tab screen.
+    expect(screenForView('configuration', null)).toBeNull()
+  })
+
+  it('labels ext screens through the registry, falling back to the id', () => {
+    const titles = new Map([['my-page', 'my page']])
+    expect(screenLabel('ext:my-page', titles)).toBe('my page')
+    expect(screenLabel('ext:ghost', titles)).toBe('ghost')
+    expect(screenLabel('traces', titles)).toBe('traces')
+  })
+
+  it('tab labels join attached screens; empty tabs read "new tab"', () => {
+    expect(tabLabel({ id: 't', screens: ['chat', 'traces'] }, NO_EXT)).toBe(
+      'chat + traces',
+    )
+    expect(
+      tabLabel({ id: 't', columns: 2, screens: [null, 'traces'] }, NO_EXT),
+    ).toBe('traces')
+    expect(tabLabel({ id: 't', columns: 2, screens: [] }, NO_EXT)).toBe(
+      'new tab',
+    )
+    expect(
+      tabLabel({ id: 't', name: 'my board', screens: ['traces'] }, NO_EXT),
+    ).toBe('my board')
+  })
+})
+
+describe('resolveActiveTab', () => {
+  const chatTraces: WorkspaceTab = { id: 'home', screens: ['chat', 'traces'] }
+  const solo: WorkspaceTab = { id: 'solo', screens: ['workers'] }
+  const named: WorkspaceTab = {
+    id: 'named',
+    name: 'board',
+    screens: ['chat', 'traces'],
+  }
+
+  it('follows a pointer at an existing tab', () => {
+    expect(resolveActiveTab([solo, chatTraces], 'solo')).toBe(solo)
+  })
+
+  it('lands on the chat+traces tab when the pointer is missing or stale', () => {
+    expect(resolveActiveTab([solo, chatTraces], undefined)).toBe(chatTraces)
+    expect(resolveActiveTab([solo, chatTraces], 'closed')).toBe(chatTraces)
+    expect(resolveActiveTab([solo, named], undefined)).toBe(named)
+  })
+
+  it('falls back to the first tab when no chat+traces tab exists', () => {
+    expect(resolveActiveTab([solo], undefined)).toBe(solo)
+  })
+})
+
+describe('tabSizes', () => {
+  it('normalizes stored fractions and falls back to equal widths', () => {
+    const tab: WorkspaceTab = {
+      id: 't',
+      columns: 2,
+      screens: ['chat', 'traces'],
+      sizes: [1, 3],
+    }
+    expect(tabSizes(tab)).toEqual([0.25, 0.75])
+    // Mismatched length / junk → equal split.
+    expect(tabSizes({ ...tab, sizes: [1] })).toEqual([0.5, 0.5])
+    expect(tabSizes({ ...tab, sizes: undefined })).toEqual([0.5, 0.5])
+  })
+})
+
+describe('withColumnAdded / withColumnRemoved', () => {
+  const base: WorkspaceTab = { id: 't', columns: 1, screens: ['traces'] }
+
+  it('adds an empty column on the chosen side at 1/(n+1) width', () => {
+    const right = withColumnAdded(base, 'right')
+    expect(right.columns).toBe(2)
+    expect(right.screens).toEqual(['traces', null])
+    expect(right.sizes).toEqual([0.5, 0.5])
+
+    const left = withColumnAdded(base, 'left')
+    expect(left.screens).toEqual([null, 'traces'])
+  })
+
+  it('keeps existing ratios inside the remaining space', () => {
+    const twoCol: WorkspaceTab = {
+      id: 't',
+      columns: 2,
+      screens: ['chat', 'traces'],
+      sizes: [0.75, 0.25],
+    }
+    const three = withColumnAdded(twoCol, 'right')
+    expect(three.sizes?.map((s) => Math.round(s * 100))).toEqual([50, 17, 33])
+  })
+
+  it('caps at MAX_COLUMNS and never removes the last column', () => {
+    const three = withColumnAdded(withColumnAdded(base, 'right'), 'right')
+    expect(tabColumns(three)).toBe(3)
+    expect(withColumnAdded(three, 'right')).toBe(three)
+    expect(withColumnRemoved(base, 0)).toBe(base)
+  })
+
+  it('removing a column re-normalizes the rest', () => {
+    const three = withColumnAdded(withColumnAdded(base, 'right'), 'right')
+    const two = withColumnRemoved(three, 2)
+    expect(two.columns).toBe(2)
+    expect(two.screens).toEqual(['traces', null])
+    const total = (two.sizes ?? []).reduce((a, b) => a + b, 0)
+    expect(total).toBeCloseTo(1)
+  })
+
+  it('round-trips through the validator (3 columns + sizes)', () => {
+    const three = withColumnAdded(withColumnAdded(base, 'right'), 'left')
+    const parsed = parseWorkspaceTabs({ workspace: { tabs: [three] } })
+    expect(parsed).toHaveLength(1)
+    expect(tabColumns(parsed[0])).toBe(3)
+  })
+})
+
+describe('withScreenDetached', () => {
+  const base: WorkspaceTab = { id: 't', columns: 1, screens: ['traces'] }
+
+  it('blanks the column but keeps it (and the column count)', () => {
+    const detached = withScreenDetached(base, 0)
+    expect(detached.columns).toBe(1)
+    expect(detached.screens).toEqual([null])
+  })
+
+  it('only touches the addressed column', () => {
+    const two: WorkspaceTab = {
+      id: 't',
+      columns: 2,
+      screens: ['chat', 'traces'],
+    }
+    expect(withScreenDetached(two, 1).screens).toEqual(['chat', null])
+  })
+
+  it('is a no-op for empty columns and out-of-range indexes', () => {
+    const empty: WorkspaceTab = { id: 't', columns: 1, screens: [null] }
+    expect(withScreenDetached(empty, 0)).toBe(empty)
+    expect(withScreenDetached(base, 1)).toBe(base)
+    expect(withScreenDetached(base, -1)).toBe(base)
+  })
+
+  it('round-trips through the validator', () => {
+    const detached = withScreenDetached(base, 0)
+    const parsed = parseWorkspaceTabs({ workspace: { tabs: [detached] } })
+    expect(parsed).toHaveLength(1)
+    expect(parsed[0].screens).toEqual([null])
+  })
+})
diff --git a/console/web/src/lib/workspace-tabs.ts b/console/web/src/lib/workspace-tabs.ts
new file mode 100644
index 000000000..11ed063db
--- /dev/null
+++ b/console/web/src/lib/workspace-tabs.ts
@@ -0,0 +1,355 @@
+/**
+ * Workspace tabs — the header's closable tab strip. Each tab shows one or
+ * two SCREENS side by side; a screen is any routed page (`traces`,
+ * `workers`, …), a worker-injected page (`ext:<page-id>`), or the chat
+ * view (`chat`).
+ *
+ * Tabs are server-persisted in the engine's `console` configuration entry
+ * under `workspace.tabs` (+ the active pointer under
+ * `workspace.activeTabId`), following the same read-modify-write
+ * convention as the traces saved views (`lib/tracesViews.ts`), so the
+ * layout follows the engine — every browser pointing at this engine sees
+ * the same tabs.
+ */
+
+import type { View } from '@/hooks/use-hash-route'
+
+/** `chat`, a routed first-party view, or `ext:<page-id>`. */
+export type TabScreen = string
+
+/** Split ceiling — the edge-add affordance hides once a tab hits it. */
+export const MAX_COLUMNS = 3
+
+export interface WorkspaceTab {
+  id: string
+  /** Optional custom name; the default label derives from the screens. */
+  name?: string
+  /**
+   * Column count (1..MAX_COLUMNS). Absent on tabs saved before columns
+   * existed — resolve through `tabColumns`, which falls back to the
+   * screen count.
+   */
+  columns?: number
+  /**
+   * The screen each column shows, index-aligned with the columns. A `null`
+   * (or missing) entry is an empty column — the pane renders an attach
+   * affordance instead of a page.
+   */
+  screens: (TabScreen | null)[]
+  /**
+   * Column width fractions (drag-to-resize), index-aligned with the
+   * columns. Absent or mismatched = equal widths; normalized through
+   * `tabSizes`.
+   */
+  sizes?: number[]
+}
+
+/** Effective column count: the explicit choice, else the screen count. */
+export function tabColumns(tab: WorkspaceTab): number {
+  const explicit = tab.columns
+  if (typeof explicit === 'number' && Number.isInteger(explicit)) {
+    return Math.min(MAX_COLUMNS, Math.max(1, explicit))
+  }
+  return Math.min(MAX_COLUMNS, Math.max(1, tab.screens.length))
+}
+
+/** Narrowest a column can be dragged/normalized to, as a fraction. */
+export const MIN_COLUMN_FRACTION = 0.12
+
+/**
+ * Normalized column fractions (summing to 1, one per column). Stored
+ * sizes are honored when they line up with the column count and are all
+ * positive finite numbers; anything else falls back to equal widths.
+ */
+export function tabSizes(tab: WorkspaceTab): number[] {
+  const columns = tabColumns(tab)
+  const stored = tab.sizes
+  if (
+    Array.isArray(stored) &&
+    stored.length === columns &&
+    stored.every((s) => typeof s === 'number' && Number.isFinite(s) && s > 0)
+  ) {
+    const total = stored.reduce((sum, s) => sum + s, 0)
+    return stored.map((s) => s / total)
+  }
+  return Array.from({ length: columns }, () => 1 / columns)
+}
+
+/**
+ * Grow the tab by one column on the chosen side (no-op at MAX_COLUMNS).
+ * The new column arrives empty at `1/(n+1)` width; existing columns keep
+ * their ratios inside the remaining space.
+ */
+export function withColumnAdded(
+  tab: WorkspaceTab,
+  side: 'left' | 'right',
+): WorkspaceTab {
+  const columns = tabColumns(tab)
+  if (columns >= MAX_COLUMNS) return tab
+  const screens: (TabScreen | null)[] = Array.from(
+    { length: columns },
+    (_, i) => tab.screens[i] ?? null,
+  )
+  const sizes = tabSizes(tab)
+  const newFraction = 1 / (columns + 1)
+  const scaled = sizes.map((s) => s * (1 - newFraction))
+  if (side === 'left') {
+    screens.unshift(null)
+    scaled.unshift(newFraction)
+  } else {
+    screens.push(null)
+    scaled.push(newFraction)
+  }
+  return { ...tab, columns: columns + 1, screens, sizes: scaled }
+}
+
+/**
+ * Blank one column's screen (the column stays, showing the attach
+ * affordance) — the single-column arm of a pane's ✕: the last column
+ * never goes, so closing its screen detaches instead.
+ */
+export function withScreenDetached(
+  tab: WorkspaceTab,
+  column: number,
+): WorkspaceTab {
+  const columns = tabColumns(tab)
+  if (column < 0 || column >= columns) return tab
+  const screens: (TabScreen | null)[] = Array.from(
+    { length: columns },
+    (_, i) => tab.screens[i] ?? null,
+  )
+  if (screens[column] === null) return tab
+  screens[column] = null
+  return { ...tab, columns, screens }
+}
+
+/** Drop one column (no-op for the last one); the rest re-normalize. */
+export function withColumnRemoved(
+  tab: WorkspaceTab,
+  column: number,
+): WorkspaceTab {
+  const columns = tabColumns(tab)
+  if (columns <= 1 || column < 0 || column >= columns) return tab
+  const screens = Array.from(
+    { length: columns },
+    (_, i) => tab.screens[i] ?? null,
+  ).filter((_, i) => i !== column)
+  const remaining = tabSizes(tab).filter((_, i) => i !== column)
+  const total = remaining.reduce((sum, s) => sum + s, 0)
+  return {
+    ...tab,
+    columns: columns - 1,
+    screens,
+    sizes: remaining.map((s) => s / total),
+  }
+}
+
+export const EXT_SCREEN_PREFIX = 'ext:'
+export const CHAT_SCREEN: TabScreen = 'chat'
+
+/**
+ * First-party screens whose page migrated to injected UI, mapped to the
+ * worker's page id (mirrors MIGRATED_ROUTES in `use-hash-route.ts`).
+ * Persisted tabs saved before the migration rewrite through this map.
+ */
+const MIGRATED_SCREENS: Record<string, string> = {
+  worktrees: 'worktree',
+  memory: 'memory',
+  browser: 'browser',
+  github: 'github',
+}
+
+/** Configuration is deliberately NOT here: console settings open as an
+    overlay page, never as a workspace-tab screen. Per-worker pages
+    (worktrees, memory, browser, github) are injected UI — they attach as
+    `ext:<page-id>` screens, not first-party routes. */
+const ROUTED_SCREENS: readonly View[] = ['traces', 'workers']
+
+export function isRoutedScreen(screen: TabScreen): screen is View {
+  return (ROUTED_SCREENS as readonly string[]).includes(screen)
+}
+
+export function extPageIdForScreen(screen: TabScreen): string | null {
+  return screen.startsWith(EXT_SCREEN_PREFIX)
+    ? screen.slice(EXT_SCREEN_PREFIX.length)
+    : null
+}
+
+export function screenForExtPage(pageId: string): TabScreen {
+  return `${EXT_SCREEN_PREFIX}${pageId}`
+}
+
+/**
+ * The screen a routed view (+ ext page id) resolves to; `null` when the
+ * view has no tab representation — configuration (an overlay page, not a
+ * tab screen) and a not-yet-resolved ext route (the view and the page id
+ * arrive from two hashchange listeners, so one commit can see `ext` with
+ * a null id; reacting to that transient with a fallback screen used to
+ * conjure duplicate tabs).
+ */
+export function screenForView(
+  view: View,
+  extPageId: string | null,
+): TabScreen | null {
+  if (view === 'ext') {
+    return extPageId ? screenForExtPage(extPageId) : null
+  }
+  if (view === 'configuration') return null
+  return view
+}
+
+const isValidScreen = (s: unknown): s is TabScreen =>
+  typeof s === 'string' &&
+  (s === CHAT_SCREEN ||
+    isRoutedScreen(s) ||
+    (s.startsWith(EXT_SCREEN_PREFIX) && s.length > EXT_SCREEN_PREFIX.length))
+
+function isValidTab(v: unknown): v is WorkspaceTab {
+  if (!v || typeof v !== 'object') return false
+  const tab = v as WorkspaceTab
+  return (
+    typeof tab.id === 'string' &&
+    tab.id.length > 0 &&
+    Array.isArray(tab.screens) &&
+    tab.screens.length <= MAX_COLUMNS &&
+    tab.screens.every((s) => s === null || isValidScreen(s)) &&
+    (tab.name === undefined || typeof tab.name === 'string') &&
+    (tab.columns === undefined ||
+      (Number.isInteger(tab.columns) &&
+        (tab.columns as number) >= 1 &&
+        (tab.columns as number) <= MAX_COLUMNS)) &&
+    (tab.sizes === undefined ||
+      (Array.isArray(tab.sizes) &&
+        tab.sizes.length <= MAX_COLUMNS &&
+        tab.sizes.every(
+          (s) => typeof s === 'number' && Number.isFinite(s) && s > 0,
+        )))
+  )
+}
+
+/** A fresh workspace: the classic chat-beside-traces layout, one tab. */
+export function defaultTabs(): WorkspaceTab[] {
+  return [{ id: 'tab-home', columns: 2, screens: [CHAT_SCREEN, 'traces'] }]
+}
+
+/**
+ * The classic chat-beside-traces tab — the one the strip lands on when no
+ * active pointer is recorded (or the recorded one no longer exists).
+ */
+export function isDefaultLayoutTab(tab: WorkspaceTab): boolean {
+  return tab.screens[0] === CHAT_SCREEN && tab.screens[1] === 'traces'
+}
+
+/** `activeTab` resolution: the pointer's tab, else chat+traces, else first. */
+export function resolveActiveTab(
+  tabs: WorkspaceTab[],
+  pointer: string | undefined,
+): WorkspaceTab {
+  return (
+    tabs.find((t) => t.id === pointer) ??
+    tabs.find(isDefaultLayoutTab) ??
+    tabs[0]
+  )
+}
+
+/** Parse `workspace.tabs` out of the raw console-config value. */
+export function parseWorkspaceTabs(
+  configValue: Record<string, unknown>,
+): WorkspaceTab[] {
+  const workspace = configValue.workspace
+  if (!workspace || typeof workspace !== 'object') return []
+  const tabs = (workspace as Record<string, unknown>).tabs
+  if (!Array.isArray(tabs)) return []
+  // Migration: 'configuration' was a tab screen before it became an
+  // overlay page — blank those columns instead of dropping whole tabs.
+  // The per-worker pages were first-party screens before they moved to
+  // injected UI — rewrite them to their `ext:<page-id>` form.
+  const sanitized = tabs.map((t) => {
+    if (
+      !t ||
+      typeof t !== 'object' ||
+      !Array.isArray((t as WorkspaceTab).screens)
+    )
+      return t
+    const tab = t as WorkspaceTab
+    return {
+      ...tab,
+      screens: tab.screens.map((s) => {
+        if (s === 'configuration') return null
+        if (typeof s === 'string' && s in MIGRATED_SCREENS)
+          return screenForExtPage(MIGRATED_SCREENS[s])
+        return s
+      }),
+    }
+  })
+  return sanitized.filter(isValidTab)
+}
+
+/** Parse `workspace.activeTabId`; `undefined` = no pointer recorded. */
+export function parseActiveTabId(
+  configValue: Record<string, unknown>,
+): string | undefined {
+  const workspace = configValue.workspace
+  if (!workspace || typeof workspace !== 'object') return undefined
+  const id = (workspace as Record<string, unknown>).activeTabId
+  return typeof id === 'string' && id.length > 0 ? id : undefined
+}
+
+function withWorkspace(
+  configValue: Record<string, unknown>,
+  patch: Record<string, unknown>,
+): Record<string, unknown> {
+  const workspace =
+    configValue.workspace && typeof configValue.workspace === 'object'
+      ? { ...(configValue.workspace as Record<string, unknown>) }
+      : {}
+  return { ...configValue, workspace: { ...workspace, ...patch } }
+}
+
+export function withWorkspaceTabs(
+  configValue: Record<string, unknown>,
+  tabs: WorkspaceTab[],
+): Record<string, unknown> {
+  return withWorkspace(configValue, { tabs })
+}
+
+export function withActiveTabId(
+  configValue: Record<string, unknown>,
+  id: string,
+): Record<string, unknown> {
+  return withWorkspace(configValue, { activeTabId: id })
+}
+
+export function newTabId(): string {
+  if (
+    typeof crypto !== 'undefined' &&
+    typeof crypto.randomUUID === 'function'
+  ) {
+    return `tab-${crypto.randomUUID()}`
+  }
+  return `tab-${Math.random().toString(36).slice(2, 10)}`
+}
+
+/** Display label for one screen; ext screens resolve through the registry. */
+export function screenLabel(
+  screen: TabScreen,
+  extPageTitles: ReadonlyMap<string, string>,
+): string {
+  const extId = extPageIdForScreen(screen)
+  if (extId !== null) return extPageTitles.get(extId) ?? extId
+  return screen
+}
+
+/**
+ * Tab label: the custom name, else its attached screens joined with `+`,
+ * else (nothing attached yet) "new tab".
+ */
+export function tabLabel(
+  tab: WorkspaceTab,
+  extPageTitles: ReadonlyMap<string, string>,
+): string {
+  if (tab.name?.trim()) return tab.name
+  const attached = tab.screens.filter((s): s is TabScreen => s !== null)
+  if (attached.length === 0) return 'new tab'
+  return attached.map((s) => screenLabel(s, extPageTitles)).join(' + ')
+}
diff --git a/console/web/src/pages/Configuration/tabs/WorkersTab/WorkersList.tsx b/console/web/src/pages/Configuration/tabs/WorkersTab/WorkersList.tsx
index efda8a5a2..c453712af 100644
--- a/console/web/src/pages/Configuration/tabs/WorkersTab/WorkersList.tsx
+++ b/console/web/src/pages/Configuration/tabs/WorkersTab/WorkersList.tsx
@@ -111,10 +111,8 @@ function ConfigurationRow({
       onClick={onSelect}
       aria-current={selected ? 'true' : undefined}
       className={cn(
-        'w-full text-left px-3 py-2 border-l-2 transition-colors focus:outline-none focus-visible:bg-rule/40',
-        selected
-          ? 'border-accent bg-rule/40'
-          : 'border-transparent hover:bg-rule/30',
+        'w-full text-left px-3 py-2 rounded-sm transition-colors focus:outline-none focus-visible:bg-surface-hover',
+        selected ? 'bg-surface-selected' : 'hover:bg-surface-hover',
       )}
     >
       <div className="flex items-baseline gap-2">
diff --git a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/ArrayField.tsx b/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/ArrayField.tsx
index a77e97996..60136ac8a 100644
--- a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/ArrayField.tsx
+++ b/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/ArrayField.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
+import { moveItem } from '@/lib/reorder'
 import { cn } from '@/lib/utils'
 import type { JsonSchema, JsonValue } from '../api'
 import { wt } from '../typography'
@@ -7,7 +8,6 @@ import { errorForField, FieldShell } from './FieldShell'
 import { pathToDomId } from './path'
 import { DeleteButton, DragHandle } from './RowChrome'
 import { isInlineLeaf, schemaDefault } from './ref-resolver'
-import { moveItem } from './reorder'
 import { useDragReorder } from './useDragReorder'
 
 let _itemIdCounter = 0
@@ -143,7 +143,7 @@ export function ArrayField(props: FieldProps) {
                 inlineItem
                   ? 'flex items-center gap-2'
                   : 'border border-rule p-3 space-y-3',
-                isOver && 'bg-rule/40',
+                isOver && 'bg-surface-hover',
                 isDragging && 'opacity-40',
               )}
             >
diff --git a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/DictionaryField.tsx b/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/DictionaryField.tsx
index daf93bd90..73b94c08c 100644
--- a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/DictionaryField.tsx
+++ b/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/DictionaryField.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Input } from '@/components/ui/Input'
+import { moveItem } from '@/lib/reorder'
 import { cn } from '@/lib/utils'
 import type { JsonSchema, JsonValue } from '../api'
 import { wt } from '../typography'
@@ -8,7 +9,6 @@ import { errorForField, FieldShell } from './FieldShell'
 import { pathToDomId } from './path'
 import { DeleteButton, DragHandle } from './RowChrome'
 import { isInlineLeaf, schemaDefault } from './ref-resolver'
-import { moveItem } from './reorder'
 import { useDragReorder } from './useDragReorder'
 
 interface DictionaryRow {
@@ -204,7 +204,7 @@ export function DictionaryField(props: FieldProps) {
                   inlineValue
                     ? 'space-y-1'
                     : 'border border-rule p-2 space-y-2',
-                  isOver && 'bg-rule/40',
+                  isOver && 'bg-surface-hover',
                   isDragging && 'opacity-40',
                 )}
               >
diff --git a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/NumberField.tsx b/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/NumberField.tsx
index 0fcf0cce0..831939347 100644
--- a/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/NumberField.tsx
+++ b/console/web/src/pages/Configuration/tabs/WorkersTab/schema-form/NumberField.tsx
@@ -67,7 +67,7 @@ export function NumberField(props: FieldProps) {
             'w-full border border-rule bg-bg px-3 h-9 text-ink',
             wt.control,
             'placeholder:text-ink-faint',
-            'focus:outline-none focus:border-ink transition-colors',
+            'focus:outline-none focus:border-rule-focus transition-colors',
             'disabled:opacity-40 disabled:pointer-events-none',
           )}
         />
diff --git a/console/web/src/pages/Ext/index.tsx b/console/web/src/pages/Ext/index.tsx
index 33375b984..23366dc95 100644
--- a/console/web/src/pages/Ext/index.tsx
+++ b/console/web/src/pages/Ext/index.tsx
@@ -21,13 +21,43 @@ import { useEffect, useRef } from 'react'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { useExtPageRoute } from '@/hooks/use-hash-route'
 import { useExtPages } from '@/lib/ui-slots'
+import type { PanelSide } from '@/types/injectable-ui'
 
 interface ExtPageProps {
   onMissing: () => void
+  /**
+   * Render this specific page instead of the hash-derived one. Workspace
+   * tabs pin a screen to a page id, so a two-column tab can show an
+   * injected page regardless of what the hash currently names.
+   */
+  pageId?: string
+  /**
+   * Which side of the workspace tab this pane occupies — forwarded to the
+   * page render so extensions can mirror their layout (e.g. put a sidebar
+   * against the outer edge). Defaults to `'left'`, the single-column case.
+   */
+  panelSide?: PanelSide
+  /**
+   * Stable id of the hosting workspace tab — forwarded so extensions can
+   * key per-tab UI state. Empty when rendered outside a workspace tab.
+   */
+  tabId?: string
+  /**
+   * Close the hosting pane — forwarded so the page's `PageHeader` ✕ works.
+   * Absent when rendered outside a closable pane.
+   */
+  onRequestClose?: () => void
 }
 
-export function ExtPage({ onMissing }: ExtPageProps) {
-  const pageId = useExtPageRoute()
+export function ExtPage({
+  onMissing,
+  pageId: pageIdProp,
+  panelSide = 'left',
+  tabId = '',
+  onRequestClose,
+}: ExtPageProps) {
+  const routePageId = useExtPageRoute()
+  const pageId = pageIdProp ?? routePageId
   const pages = useExtPages()
   const page = pageId
     ? [...pages].reverse().find((p) => p.id === pageId)
@@ -73,7 +103,11 @@ export function ExtPage({ onMissing }: ExtPageProps) {
   const Body = page.render
   return (
     <div className="flex-1 min-h-0 overflow-y-auto">
-      <Body />
+      <Body
+        panelSide={panelSide}
+        tabId={tabId}
+        onRequestClose={onRequestClose}
+      />
     </div>
   )
 }
diff --git a/console/web/src/pages/TracesV2/components/AttributesFilter.tsx b/console/web/src/pages/TracesV2/components/AttributesFilter.tsx
index 7a0be369d..88c07b4c7 100644
--- a/console/web/src/pages/TracesV2/components/AttributesFilter.tsx
+++ b/console/web/src/pages/TracesV2/components/AttributesFilter.tsx
@@ -93,7 +93,7 @@ export function AttributesFilter({ value, onChange }: AttributesFilterProps) {
           {draft.map(({ id, key, val }) => (
             <div
               key={id}
-              className="group flex items-center gap-2 bg-bg border border-rule-2 p-2 hover:border-rule transition-colors"
+              className="group flex items-center gap-2 rounded-sm bg-surface border border-rule-2 p-2 hover:border-rule transition-colors"
             >
               <input
                 type="text"
@@ -115,7 +115,7 @@ export function AttributesFilter({ value, onChange }: AttributesFilterProps) {
               <button
                 type="button"
                 onClick={() => handleRemove(id)}
-                className="p-1 text-ink-faint hover:text-alert hover:bg-panel transition-all opacity-0 group-hover:opacity-100"
+                className="p-1 text-ink-faint hover:text-alert hover:bg-surface-hover rounded-xs transition-all opacity-0 group-hover:opacity-100"
                 title="remove"
                 aria-label="remove attribute"
               >
@@ -153,7 +153,7 @@ export function AttributesFilter({ value, onChange }: AttributesFilterProps) {
                 key={attr}
                 type="button"
                 onClick={() => handleSuggestionClick(attr)}
-                className="flex items-center gap-1 px-1.5 py-0.5 font-mono text-[10px] text-ink-faint bg-bg border border-rule-2 hover:border-accent hover:text-accent transition-colors lowercase"
+                className="flex items-center gap-1 px-1.5 py-0.5 rounded-xs font-mono text-[10px] text-ink-faint bg-surface border border-rule-2 hover:border-rule hover:text-ink transition-colors lowercase"
                 title={`add ${attr}`}
               >
                 <Tag className="w-2.5 h-2.5" />
diff --git a/console/web/src/pages/TracesV2/components/GroupByPicker.tsx b/console/web/src/pages/TracesV2/components/GroupByPicker.tsx
index f3b1d62ff..1ab38a00b 100644
--- a/console/web/src/pages/TracesV2/components/GroupByPicker.tsx
+++ b/console/web/src/pages/TracesV2/components/GroupByPicker.tsx
@@ -97,10 +97,10 @@ export function GroupByPicker({
         aria-haspopup="dialog"
         aria-expanded={open}
         className={cn(
-          'inline-flex items-center gap-2 h-8 px-2.5 border font-mono text-[12px] lowercase transition-colors',
+          'inline-flex items-center gap-2 h-8 px-2.5 rounded-sm font-mono text-[12px] lowercase transition-colors',
           open || isActive
-            ? 'border-accent text-ink'
-            : 'border-rule text-ink-faint hover:text-ink',
+            ? 'bg-accent-muted text-ink'
+            : 'bg-surface text-ink-faint hover:text-ink hover:bg-surface-hover',
         )}
       >
         <Layers className="w-3 h-3" />
@@ -144,7 +144,7 @@ export function GroupByPicker({
               left: pos.left,
               zIndex: 50,
             }}
-            className="w-[280px] bg-bg border border-rule shadow-[0_8px_24px_rgba(0,0,0,0.18)]"
+            className="w-[280px] rounded-md bg-panel-raised shadow-floating"
           >
             <div className="p-1">
               {PRESETS.map((preset) => (
@@ -153,7 +153,7 @@ export function GroupByPicker({
                   type="button"
                   onClick={() => apply(preset.value)}
                   className={cn(
-                    'w-full flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[12px] lowercase transition-colors hover:bg-panel',
+                    'w-full flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[12px] rounded-xs lowercase transition-colors hover:bg-surface-hover',
                     preset.value === value ? 'text-ink' : 'text-ink-faint',
                   )}
                 >
@@ -179,7 +179,7 @@ export function GroupByPicker({
                   if (next) apply(next)
                 }}
                 placeholder="e.g. iii.tag.message, service.name"
-                className="w-full h-8 px-2 font-mono text-[12px] bg-bg border border-rule text-ink placeholder:text-ink-ghost focus:outline-none focus:border-accent transition-colors lowercase"
+                className="w-full h-8 px-2 font-mono text-[12px] rounded-sm bg-surface border border-transparent text-ink placeholder:text-ink-ghost hover:bg-surface-hover focus:outline-none focus:border-rule-focus transition-colors lowercase"
               />
               <div>
                 {filtered.map((key) => (
@@ -188,7 +188,7 @@ export function GroupByPicker({
                     type="button"
                     onClick={() => apply(key)}
                     className={cn(
-                      'w-full flex items-center gap-2 px-2 py-1 text-left font-mono text-[11px] lowercase truncate transition-colors hover:bg-panel',
+                      'w-full flex items-center gap-2 px-2 py-1 text-left font-mono text-[11px] rounded-xs lowercase truncate transition-colors hover:bg-surface-hover',
                       key === value ? 'text-ink' : 'text-ink-faint',
                     )}
                   >
diff --git a/console/web/src/pages/TracesV2/components/GroupedTraceList.tsx b/console/web/src/pages/TracesV2/components/GroupedTraceList.tsx
index 36cc0e85a..6e2d26f10 100644
--- a/console/web/src/pages/TracesV2/components/GroupedTraceList.tsx
+++ b/console/web/src/pages/TracesV2/components/GroupedTraceList.tsx
@@ -215,7 +215,7 @@ function GroupHeaderRow({
       onClick={onToggle}
       aria-expanded={isExpanded}
       className={cn(
-        'w-full flex items-center gap-2 px-3 py-2 text-left border-b border-rule-2 transition-colors hover:bg-panel',
+        'w-full flex items-center gap-2 px-3 py-2 text-left border-b border-rule-2 transition-colors hover:bg-surface-hover',
         containsSelection && 'border-l-2 border-l-accent',
       )}
       title={`${heading} (${group.trace_ids.length} trace${group.trace_ids.length === 1 ? '' : 's'})`}
@@ -295,7 +295,7 @@ function GroupMembers({
 
   if (isLoading && !data) {
     return (
-      <div className="flex items-center gap-2 pl-10 py-2 border-b border-rule-2 font-mono text-[11px] text-ink-faint lowercase">
+      <div className="flex items-center gap-2 pl-8 py-2 font-mono text-[11px] text-ink-faint lowercase">
         <Loader2 className="w-3 h-3 animate-spin" />
         loading traces…
       </div>
@@ -309,14 +309,14 @@ function GroupMembers({
 
   if (rows.length === 0) {
     return (
-      <div className="pl-10 py-2 border-b border-rule-2 font-mono text-[11px] text-ink-faint lowercase">
+      <div className="pl-8 py-2 font-mono text-[11px] text-ink-faint lowercase">
         no visible traces in this group.
       </div>
     )
   }
 
   return (
-    <div className="pl-6 border-l border-rule-2 ml-4">
+    <div className="pl-5 ml-3">
       {rows.map((trace) => (
         <div key={trace.traceId} data-trace-row-id={trace.traceId}>
           <TraceListRow
diff --git a/console/web/src/pages/TracesV2/components/IconToggleButton.tsx b/console/web/src/pages/TracesV2/components/IconToggleButton.tsx
index e59af15db..cbb9419cd 100644
--- a/console/web/src/pages/TracesV2/components/IconToggleButton.tsx
+++ b/console/web/src/pages/TracesV2/components/IconToggleButton.tsx
@@ -34,7 +34,7 @@ export function IconToggleButton({
             'inline-flex items-center justify-center w-7 h-7 border transition-colors',
             active
               ? 'bg-ink text-bg border-ink'
-              : 'bg-bg text-ink-faint border-rule hover:text-ink hover:border-ink',
+              : 'bg-transparent text-ink-faint border-transparent hover:text-ink hover:bg-surface-hover',
           )}
         >
           {children}
diff --git a/console/web/src/pages/TracesV2/components/SpanBaggageTab.tsx b/console/web/src/pages/TracesV2/components/SpanBaggageTab.tsx
index c9329df6f..fe285699a 100644
--- a/console/web/src/pages/TracesV2/components/SpanBaggageTab.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanBaggageTab.tsx
@@ -56,7 +56,7 @@ export function SpanBaggageTab({ span }: SpanBaggageTabProps) {
         </span>
       </div>
 
-      <div className="border border-rule bg-bg divide-y divide-rule">
+      <div className="rounded-md bg-surface divide-y divide-rule-2">
         {baggageEntries.map(([key, value]) => {
           const formatted =
             typeof value === 'object'
@@ -69,7 +69,7 @@ export function SpanBaggageTab({ span }: SpanBaggageTabProps) {
               type="button"
               onClick={() => copy(key, `${key}: ${formatted}`)}
               aria-label={`copy ${key} to clipboard`}
-              className="w-full px-4 py-2.5 hover:bg-panel transition-colors text-left group"
+              className="w-full px-4 py-2.5 hover:bg-surface-hover transition-colors text-left group"
             >
               <div className="flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
diff --git a/console/web/src/pages/TracesV2/components/SpanErrorsTab.tsx b/console/web/src/pages/TracesV2/components/SpanErrorsTab.tsx
index d82fa9289..7bdcbb87a 100644
--- a/console/web/src/pages/TracesV2/components/SpanErrorsTab.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanErrorsTab.tsx
@@ -81,7 +81,7 @@ export function SpanErrorsTab({ span, redact }: SpanErrorsTabProps) {
   return (
     <div className="p-5 space-y-4">
       {/* Error cell with alert stripe */}
-      <div className="border border-rule border-l-2 border-l-alert bg-alert/5 p-4">
+      <div className="rounded-md bg-alert-muted p-4">
         <div className="flex items-start gap-3">
           <span className="size-[18px] shrink-0 flex items-center justify-center text-alert">
             <AlertCircle className="w-4 h-4" />
@@ -116,7 +116,7 @@ export function SpanErrorsTab({ span, redact }: SpanErrorsTabProps) {
             <button
               type="button"
               onClick={copyStackTrace}
-              className="flex items-center gap-1.5 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.06em] text-ink-faint hover:text-ink hover:bg-panel transition-colors"
+              className="flex items-center gap-1.5 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.06em] text-ink-faint hover:text-ink hover:bg-surface-hover rounded-xs transition-colors"
             >
               {copiedKey === 'stackTrace' ? (
                 <span className="text-accent">copied</span>
@@ -128,7 +128,7 @@ export function SpanErrorsTab({ span, redact }: SpanErrorsTabProps) {
               )}
             </button>
           </div>
-          <pre className="border border-rule bg-bg px-3 py-2 font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre-wrap break-words max-h-[400px] overflow-y-auto">
+          <pre className="rounded-sm bg-bg px-3 py-2 font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre-wrap break-words max-h-[400px] overflow-y-auto">
             {stackLines.map(({ line, id }) => {
               const isFrameLine =
                 /^\s+at\s/.test(line) ||
@@ -140,7 +140,7 @@ export function SpanErrorsTab({ span, redact }: SpanErrorsTabProps) {
                   className={
                     isFrameLine
                       ? hasLineNumber
-                        ? 'text-ink hover:bg-panel'
+                        ? 'text-ink hover:bg-surface-hover'
                         : 'text-ink-faint'
                       : 'text-alert font-medium'
                   }
@@ -154,7 +154,7 @@ export function SpanErrorsTab({ span, redact }: SpanErrorsTabProps) {
       )}
 
       {!displayMessage && !displayType && !displayStack && (
-        <div className="border border-rule bg-bg p-4 text-center">
+        <div className="rounded-md bg-surface p-4 text-center">
           <p className="font-mono text-[13px] text-ink-faint lowercase">
             no additional error details
           </p>
diff --git a/console/web/src/pages/TracesV2/components/SpanInfoTab.tsx b/console/web/src/pages/TracesV2/components/SpanInfoTab.tsx
index 253f43b1a..3648f8e5e 100644
--- a/console/web/src/pages/TracesV2/components/SpanInfoTab.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanInfoTab.tsx
@@ -65,7 +65,7 @@ export function SpanInfoTab({ span, traceData }: SpanInfoTabProps) {
         <div className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint mb-2.5">
           timing
         </div>
-        <div className="border border-rule bg-bg">
+        <div className="rounded-md bg-surface">
           <div className="px-4 pt-4 pb-3">
             <div className="flex items-baseline justify-between mb-2">
               <span className="font-mono text-xl font-bold text-accent tabular-nums">
@@ -117,7 +117,7 @@ export function SpanInfoTab({ span, traceData }: SpanInfoTabProps) {
         <div className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint mb-2.5">
           status
         </div>
-        <div className="border border-rule bg-bg px-4 py-3">
+        <div className="rounded-md bg-surface px-4 py-3">
           <div className="flex items-center gap-2.5">
             <StatusDot tone={tone} />
             <span className="font-mono text-[13px] font-semibold text-ink lowercase">
@@ -132,7 +132,7 @@ export function SpanInfoTab({ span, traceData }: SpanInfoTabProps) {
         <div className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint mb-2.5">
           worker & operation
         </div>
-        <div className="border border-rule bg-bg divide-y divide-rule">
+        <div className="rounded-md bg-surface divide-y divide-rule-2">
           <div className="px-4 py-2.5 flex items-center justify-between">
             <span className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
               worker
@@ -168,7 +168,7 @@ export function SpanInfoTab({ span, traceData }: SpanInfoTabProps) {
         <div className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint mb-2.5">
           identifiers
         </div>
-        <div className="border border-rule bg-bg divide-y divide-rule">
+        <div className="rounded-md bg-surface divide-y divide-rule-2">
           {[
             { label: 'trace id', value: span.trace_id, field: 'traceId' },
             { label: 'span id', value: span.span_id, field: 'spanId' },
@@ -186,7 +186,7 @@ export function SpanInfoTab({ span, traceData }: SpanInfoTabProps) {
               key={field}
               type="button"
               onClick={() => copyToClipboard(field, value)}
-              className="w-full px-4 py-2.5 flex items-center justify-between hover:bg-panel transition-colors group text-left"
+              className="w-full px-4 py-2.5 flex items-center justify-between hover:bg-surface-hover transition-colors group text-left"
             >
               <span className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint flex-shrink-0">
                 {label}
@@ -216,7 +216,7 @@ export function SpanInfoTab({ span, traceData }: SpanInfoTabProps) {
         <div className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint mb-2.5">
           hierarchy
         </div>
-        <div className="border border-rule bg-bg divide-y divide-rule">
+        <div className="rounded-md bg-surface divide-y divide-rule-2">
           <div className="px-4 py-2.5 flex items-center justify-between">
             <span className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
               depth
diff --git a/console/web/src/pages/TracesV2/components/SpanLinksTab.tsx b/console/web/src/pages/TracesV2/components/SpanLinksTab.tsx
index d26b35856..ea59d5fdc 100644
--- a/console/web/src/pages/TracesV2/components/SpanLinksTab.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanLinksTab.tsx
@@ -71,7 +71,7 @@ export function SpanLinksTab({
             key={id}
             type="button"
             onClick={handleClick}
-            className="w-full flex items-center gap-2 px-3 py-2 bg-bg border border-rule hover:bg-panel transition-colors text-left group"
+            className="w-full flex items-center gap-2 px-3 py-2 rounded-sm bg-surface hover:bg-surface-hover transition-colors text-left group"
           >
             <ExternalLink className="w-3 h-3 text-ink-faint group-hover:text-accent flex-shrink-0" />
             <div className="flex-1 min-w-0">
@@ -83,7 +83,7 @@ export function SpanLinksTab({
               </div>
             </div>
             {attrCount > 0 && (
-              <span className="font-mono text-[10px] uppercase tracking-[0.06em] text-ink-faint border border-rule bg-panel px-1.5 py-0.5 flex-shrink-0 tabular-nums">
+              <span className="font-mono text-[10px] uppercase tracking-[0.06em] text-ink-faint rounded-xs bg-paper-2 px-1.5 py-0.5 flex-shrink-0 tabular-nums">
                 +{attrCount} attrs
               </span>
             )}
diff --git a/console/web/src/pages/TracesV2/components/SpanLogsTab.tsx b/console/web/src/pages/TracesV2/components/SpanLogsTab.tsx
index 95fc3f6cb..40844b277 100644
--- a/console/web/src/pages/TracesV2/components/SpanLogsTab.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanLogsTab.tsx
@@ -77,7 +77,7 @@ export function SpanLogsTab({ span, redact }: SpanLogsTabProps) {
                     )}
                   </div>
                 </div>
-                <span className="font-mono text-[10px] text-ink-faint flex-shrink-0 px-1.5 py-0.5 border border-rule bg-panel tabular-nums">
+                <span className="font-mono text-[10px] text-ink-faint flex-shrink-0 px-1.5 py-0.5 rounded-xs bg-surface tabular-nums">
                   #{index + 1}
                 </span>
               </div>
@@ -129,7 +129,7 @@ function EventAttributeRow({
         <span className="font-mono text-ink-faint uppercase tracking-[0.06em] text-[10px]">
           {attrKey}
         </span>
-        <pre className="border border-rule bg-bg px-3 py-2 font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre">
+        <pre className="rounded-sm bg-bg px-3 py-2 font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre">
           {formatted}
         </pre>
       </div>
diff --git a/console/web/src/pages/TracesV2/components/SpanOtelLogsTab.tsx b/console/web/src/pages/TracesV2/components/SpanOtelLogsTab.tsx
index 66334c571..442504854 100644
--- a/console/web/src/pages/TracesV2/components/SpanOtelLogsTab.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanOtelLogsTab.tsx
@@ -148,7 +148,7 @@ function JsonValue({ value }: { value: unknown }) {
         </span>
       </button>
       {expanded ? (
-        <pre className="mt-1.5 px-3 py-2 border border-rule bg-bg font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre-wrap break-all">
+        <pre className="mt-1.5 px-3 py-2 rounded-sm bg-bg font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre-wrap break-all">
           {pretty}
         </pre>
       ) : (
@@ -211,7 +211,7 @@ function LogCard({ log, index, firstLogMs }: LogCardProps) {
   return (
     <div
       className={cn(
-        'border border-rule overflow-hidden',
+        'rounded-md border border-rule-2 overflow-hidden',
         severity.rail,
         severity.cardBg,
       )}
@@ -246,7 +246,7 @@ function LogCard({ log, index, firstLogMs }: LogCardProps) {
               <span aria-hidden className="text-ink-ghost">
                 ·
               </span>
-              <span className="px-1 py-0.5 border border-rule bg-bg text-ink-faint lowercase">
+              <span className="px-1 py-0.5 rounded-xs bg-surface text-ink-faint lowercase">
                 {log.service_name}
               </span>
             </>
diff --git a/console/web/src/pages/TracesV2/components/SpanPanel.tsx b/console/web/src/pages/TracesV2/components/SpanPanel.tsx
index e6d47d174..61d0df14b 100644
--- a/console/web/src/pages/TracesV2/components/SpanPanel.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanPanel.tsx
@@ -113,16 +113,16 @@ export function SpanPanel({
 
   return (
     <div
-      className="h-full bg-panel overflow-hidden flex flex-col"
+      className="h-full bg-panel-raised overflow-hidden flex flex-col"
       data-span-panel
       data-span-id={span.span_id}
       data-span-name={span.name}
     >
       {/* Header strip */}
-      <div className="flex-shrink-0 bg-panel border-b border-rule">
+      <div className="flex-shrink-0 border-b border-rule-2">
         {/* Row 1: worker badge + span name + close */}
         <div className="flex items-center gap-2 px-4 pt-3 pb-1.5">
-          <span className="px-1.5 py-0.5 font-mono text-[11px] uppercase tracking-[0.06em] flex-shrink-0 border border-rule bg-bg text-ink-faint lowercase">
+          <span className="px-1.5 py-0.5 font-mono text-[11px] uppercase tracking-[0.06em] flex-shrink-0 rounded-xs bg-surface text-ink-faint lowercase">
             {worker}
           </span>
           <h2
@@ -159,9 +159,9 @@ export function SpanPanel({
             )}
           </button>
 
-          <span aria-hidden className="w-px h-3 bg-rule" />
+          <span aria-hidden className="w-px h-3 bg-rule-2" />
 
-          <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+          <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
             <Clock className="w-2.5 h-2.5 text-accent" />
             <span className="font-mono text-[11px] font-semibold text-accent tabular-nums">
               {formatDuration(span.duration_ms)}
@@ -169,7 +169,7 @@ export function SpanPanel({
           </span>
 
           {traceContext && traceContext.childSpans.length > 0 && (
-            <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+            <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
               <Zap className="w-2.5 h-2.5 text-ink-faint" />
               <span className="font-mono text-[11px] text-ink-faint tabular-nums lowercase">
                 self {formatDuration(traceContext.selfTime)}
@@ -179,8 +179,8 @@ export function SpanPanel({
 
           <span
             className={cn(
-              'flex items-center gap-1 px-2 py-0.5 bg-bg border',
-              span.status === 'error' ? 'border-alert' : 'border-rule',
+              'flex items-center gap-1 px-2 py-0.5 rounded-xs',
+              span.status === 'error' ? 'bg-alert-muted' : 'bg-surface',
             )}
           >
             <StatusDot tone={tone} />
@@ -194,7 +194,7 @@ export function SpanPanel({
             </span>
           </span>
 
-          <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+          <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
             <Layers className="w-2.5 h-2.5 text-ink-faint" />
             <span className="font-mono text-[11px] text-ink-faint tabular-nums">
               d:{span.depth}
@@ -202,7 +202,7 @@ export function SpanPanel({
           </span>
 
           {traceContext && traceContext.childSpans.length > 0 && (
-            <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+            <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
               <span className="font-mono text-[11px] text-ink-faint tabular-nums lowercase">
                 {traceContext.childSpans.length} child
                 {traceContext.childSpans.length !== 1 ? 'ren' : ''}
@@ -220,7 +220,7 @@ export function SpanPanel({
                 traceContext.parentSpan &&
                 onNavigateToSpan(traceContext.parentSpan)
               }
-              className="flex items-center gap-1.5 w-full px-2.5 py-1.5 bg-bg border border-rule hover:bg-panel transition-colors group text-left"
+              className="flex items-center gap-1.5 w-full px-2.5 py-1.5 rounded-sm bg-surface hover:bg-surface-hover transition-colors group text-left"
             >
               <ArrowUp className="w-3 h-3 text-ink-faint group-hover:text-accent transition-colors flex-shrink-0" />
               <span className="font-mono text-[11px] text-ink-faint flex-shrink-0 lowercase">
@@ -250,7 +250,7 @@ export function SpanPanel({
             <TabsTrigger value="tags">
               attributes
               {attrCount > 0 && (
-                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint border border-rule bg-bg normal-case tracking-normal">
+                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint rounded-xs bg-surface normal-case tracking-normal">
                   {attrCount}
                 </span>
               )}
@@ -258,7 +258,7 @@ export function SpanPanel({
             <TabsTrigger value="logs">
               events
               {eventCount > 0 && (
-                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint border border-rule bg-bg normal-case tracking-normal">
+                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint rounded-xs bg-surface normal-case tracking-normal">
                   {eventCount}
                 </span>
               )}
@@ -272,7 +272,7 @@ export function SpanPanel({
             <TabsTrigger value="otel-logs">
               logs
               {logCount > 0 && (
-                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint border border-rule bg-bg normal-case tracking-normal">
+                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint rounded-xs bg-surface normal-case tracking-normal">
                   {logCount}
                 </span>
               )}
@@ -281,7 +281,7 @@ export function SpanPanel({
             {linkCount > 0 && (
               <TabsTrigger value="links">
                 links
-                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint border border-rule bg-bg normal-case tracking-normal">
+                <span className="ml-1 px-1 py-0.5 font-mono text-[10px] tabular-nums text-ink-faint rounded-xs bg-surface normal-case tracking-normal">
                   {linkCount}
                 </span>
               </TabsTrigger>
diff --git a/console/web/src/pages/TracesV2/components/SpanTagsTab.tsx b/console/web/src/pages/TracesV2/components/SpanTagsTab.tsx
index 7b517b525..d999387f5 100644
--- a/console/web/src/pages/TracesV2/components/SpanTagsTab.tsx
+++ b/console/web/src/pages/TracesV2/components/SpanTagsTab.tsx
@@ -150,7 +150,7 @@ export function SpanTagsTab({ span, redact }: SpanTagsTabProps) {
           placeholder="filter attributes..."
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
-          className="w-full pl-9 pr-4 py-2 bg-bg border border-rule font-mono text-[13px] text-ink placeholder-ink-ghost lowercase focus:outline-none focus:border-accent transition-colors"
+          className="w-full pl-9 pr-4 py-2 rounded-sm bg-surface border border-rule-2 font-mono text-[13px] text-ink placeholder-ink-ghost lowercase hover:border-rule focus:outline-none focus:border-rule-focus transition-colors"
         />
       </div>
 
@@ -159,11 +159,11 @@ export function SpanTagsTab({ span, redact }: SpanTagsTabProps) {
           const isCollapsed = collapsedGroups.has(group.namespace)
 
           return (
-            <div key={group.namespace} className="border border-rule bg-bg">
+            <div key={group.namespace} className="rounded-md bg-surface">
               <button
                 type="button"
                 onClick={() => toggleGroup(group.namespace)}
-                className="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-panel transition-colors text-left"
+                className="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-surface-hover transition-colors text-left"
               >
                 <ChevronRight
                   className={`w-3 h-3 text-ink-faint transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
@@ -193,7 +193,7 @@ export function SpanTagsTab({ span, redact }: SpanTagsTabProps) {
           )
         })
       ) : (
-        <div className="border border-rule bg-bg divide-y divide-rule">
+        <div className="rounded-md bg-surface divide-y divide-rule-2">
           {filteredEntries.map(([key, value]) => (
             <AttributeRow
               key={key}
@@ -242,7 +242,7 @@ function AttributeRow({
     <button
       type="button"
       onClick={() => onCopy(attrKey, value)}
-      className="w-full px-4 py-2 hover:bg-panel transition-colors text-left group"
+      className="w-full px-4 py-2 hover:bg-surface-hover transition-colors text-left group"
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex-1 min-w-0">
@@ -250,7 +250,7 @@ function AttributeRow({
             {attrKey}
           </div>
           {isObject ? (
-            <pre className="border border-rule bg-bg px-3 py-2 font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre">
+            <pre className="rounded-sm bg-bg px-3 py-2 font-mono text-[12.5px] leading-[1.55] text-ink overflow-x-auto whitespace-pre">
               {formatted}
             </pre>
           ) : (
diff --git a/console/web/src/pages/TracesV2/components/TraceDetailSkeleton.tsx b/console/web/src/pages/TracesV2/components/TraceDetailSkeleton.tsx
index c9aa0b8b7..c9d22bb7e 100644
--- a/console/web/src/pages/TracesV2/components/TraceDetailSkeleton.tsx
+++ b/console/web/src/pages/TracesV2/components/TraceDetailSkeleton.tsx
@@ -32,15 +32,15 @@ export function TraceDetailSkeleton({ onClose }: TraceDetailSkeletonProps) {
   return (
     <div className="flex flex-col overflow-hidden">
       {/* ── TraceHeader ── */}
-      <div className="bg-panel border-b border-rule-2 flex-shrink-0">
+      <div className="border-b border-rule-2 flex-shrink-0">
         <div className="flex items-center gap-2 px-4 pt-3 pb-1.5">
-          <span className="px-1.5 py-0.5 flex-shrink-0 border border-rule bg-bg">
+          <span className="px-1.5 py-0.5 flex-shrink-0 rounded-xs bg-surface">
             <Skeleton className="h-3 w-16" />
           </span>
           <span className="flex-1 min-w-0">
-            {/* bg-rule where the skeleton sits directly on the panel —
+            {/* bg-surface-active where the skeleton sits directly on the panel —
                 the default bg-panel tone vanishes there */}
-            <Skeleton className="h-3.5 w-44 max-w-full bg-rule" />
+            <Skeleton className="h-3.5 w-44 max-w-full bg-surface-active" />
           </span>
           <Button
             variant="icon"
@@ -54,35 +54,35 @@ export function TraceDetailSkeleton({ onClose }: TraceDetailSkeletonProps) {
         </div>
 
         <div className="flex items-center gap-2 px-4 pb-2.5 flex-wrap">
-          <Skeleton className="h-3 w-[72px] bg-rule" />
-          <span aria-hidden className="w-px h-3 bg-rule-2" />
-          <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+          <Skeleton className="h-3 w-[72px] bg-surface-active" />
+          <span aria-hidden className="w-px h-3 bg-surface-active-2" />
+          <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
             <Clock className="w-2.5 h-2.5 text-ink-faint" />
             <Skeleton className="h-3 w-12" />
           </span>
-          <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+          <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
             <Layers className="w-2.5 h-2.5 text-ink-faint" />
             <Skeleton className="h-3 w-14" />
           </span>
-          <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+          <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
             <Skeleton className="h-3 w-16" />
           </span>
         </div>
 
         {/* worker share bar + names */}
         <div className="px-4 pb-2.5">
-          <div className="flex h-1.5 bg-bg border border-rule overflow-hidden">
+          <div className="flex h-1.5 rounded-full bg-surface overflow-hidden">
             <Skeleton className="h-full w-[52%]" />
-            <span aria-hidden className="w-px h-full bg-rule-2" />
+            <span aria-hidden className="w-px h-full bg-surface-active-2" />
             <Skeleton className="h-full w-[31%]" />
-            <span aria-hidden className="w-px h-full bg-rule-2" />
+            <span aria-hidden className="w-px h-full bg-surface-active-2" />
             <Skeleton className="h-full flex-1" />
           </div>
           <div className="flex items-center gap-3 mt-1.5">
             {(['wk-0', 'wk-1', 'wk-2'] as const).map((k) => (
               <span key={k} className="flex items-center gap-1">
-                <Skeleton className="w-1.5 h-1.5 flex-shrink-0 bg-rule" />
-                <Skeleton className="h-2.5 w-16 bg-rule" />
+                <Skeleton className="w-1.5 h-1.5 flex-shrink-0 bg-surface-active" />
+                <Skeleton className="h-2.5 w-16 bg-surface-active" />
               </span>
             ))}
           </div>
@@ -96,7 +96,7 @@ export function TraceDetailSkeleton({ onClose }: TraceDetailSkeletonProps) {
                 <ChevronRight className="w-3 h-3 text-ink-ghost flex-shrink-0" />
               )}
               <span className="px-1 py-0.5">
-                <Skeleton className="h-3 w-20 bg-rule" />
+                <Skeleton className="h-3 w-20 bg-surface-active" />
               </span>
             </span>
           ))}
@@ -104,8 +104,8 @@ export function TraceDetailSkeleton({ onClose }: TraceDetailSkeletonProps) {
       </div>
 
       {/* ── view switcher ── */}
-      <div className="border-b border-rule px-4 py-2.5">
-        <span className="inline-flex border border-rule p-[2px]">
+      <div className="border-b border-rule-2 px-4 py-2.5">
+        <span className="inline-flex rounded-sm bg-surface p-[2px]">
           <span className="px-3 py-1 flex items-center">
             <Skeleton className="h-3.5 w-14" />
           </span>
@@ -147,7 +147,7 @@ export function TraceDetailSkeleton({ onClose }: TraceDetailSkeletonProps) {
       </div>
 
       {/* ── collapsed workers footer ── */}
-      <div className="border-t border-rule flex-shrink-0 bg-panel">
+      <div className="border-t border-rule-2 flex-shrink-0">
         <div className="flex items-center gap-2 px-4 py-2.5">
           <ChevronRight className="w-3 h-3 text-ink-faint" />
           <span className="font-mono text-[11px] font-medium uppercase tracking-[0.06em] text-ink-faint">
@@ -156,7 +156,7 @@ export function TraceDetailSkeleton({ onClose }: TraceDetailSkeletonProps) {
           <span className="flex items-center gap-3 ml-auto font-mono text-[11px] text-ink-faint">
             {(['p50', 'p95', 'p99'] as const).map((p) => (
               <span key={p} className="flex items-center gap-1">
-                {p} <Skeleton className="h-3 w-12 bg-rule" />
+                {p} <Skeleton className="h-3 w-12 bg-surface-active" />
               </span>
             ))}
           </span>
diff --git a/console/web/src/pages/TracesV2/components/TraceFilters.tsx b/console/web/src/pages/TracesV2/components/TraceFilters.tsx
index b2b2cef1c..a05bb9fdf 100644
--- a/console/web/src/pages/TracesV2/components/TraceFilters.tsx
+++ b/console/web/src/pages/TracesV2/components/TraceFilters.tsx
@@ -180,10 +180,10 @@ function currentTimeRangeIndex(filters: TraceFilterState): number {
 }
 
 const inputClass =
-  'h-8 px-2 font-mono text-[12px] bg-bg border border-rule text-ink placeholder:text-ink-ghost focus:outline-none focus:border-accent transition-colors lowercase'
+  'h-8 px-2 rounded-sm font-mono text-[12px] bg-surface border border-transparent text-ink placeholder:text-ink-ghost hover:bg-surface-hover focus:outline-none focus:border-rule-focus transition-colors lowercase'
 
 const selectClass =
-  'h-8 px-2 font-mono text-[12px] bg-bg border border-rule text-ink focus:outline-none focus:border-accent transition-colors lowercase appearance-none cursor-pointer'
+  'h-8 px-2 rounded-sm font-mono text-[12px] bg-surface border border-transparent text-ink hover:bg-surface-hover focus:outline-none focus:border-rule-focus transition-colors lowercase appearance-none cursor-pointer'
 
 // Lightweight popover anchored to a trigger via getBoundingClientRect.
 // Portals into document.body so it isn't clipped by overflow-hidden
@@ -277,7 +277,7 @@ function MoreFiltersPopover({
         maxHeight: pos.maxHeight,
         zIndex: 50,
       }}
-      className="bg-bg border border-rule p-3 shadow-[0_8px_24px_rgba(0,0,0,0.18)] overflow-y-auto"
+      className="rounded-md bg-panel-raised p-3 shadow-floating overflow-y-auto"
     >
       {children}
     </div>,
@@ -298,8 +298,10 @@ function SearchInput({
   return (
     <label
       className={cn(
-        'flex items-center gap-2 h-8 px-2 border bg-bg transition-colors',
-        searchFocused ? 'border-accent' : 'border-rule',
+        'flex items-center gap-2 h-8 px-2 rounded-sm border bg-surface transition-[border-color,box-shadow]',
+        searchFocused
+          ? 'border-rule-focus ring-[3px] ring-accent/10'
+          : 'border-transparent',
         className,
       )}
     >
@@ -332,7 +334,7 @@ function SearchInput({
 function StatsBlock({ stats }: { stats: TraceFiltersProps['stats'] }) {
   if (!stats) return null
   return (
-    <div className="flex items-stretch border border-rule divide-x divide-rule-2">
+    <div className="flex items-stretch rounded-md bg-surface">
       <div className="flex items-center gap-1.5 px-2.5 py-1 font-mono text-[11px] text-ink-faint lowercase">
         <Hash className="w-3 h-3 text-ink-faint" />
         <span className="text-ink tabular-nums">{stats.totalTraces}</span>
@@ -669,10 +671,10 @@ export function TraceFilters({
           type="button"
           onClick={() => setPopoverOpen((v) => !v)}
           className={cn(
-            'inline-flex items-center gap-2 h-8 px-2.5 border font-mono text-[12px] lowercase transition-colors',
+            'inline-flex items-center gap-2 h-8 px-2.5 rounded-sm font-mono text-[12px] lowercase transition-colors',
             popoverOpen || advancedFilterCount > 0
-              ? 'border-accent text-ink'
-              : 'border-rule text-ink-faint hover:text-ink hover:border-rule',
+              ? 'bg-accent-muted text-ink'
+              : 'bg-surface text-ink-faint hover:text-ink hover:bg-surface-hover',
           )}
           aria-haspopup="dialog"
           aria-expanded={popoverOpen}
@@ -680,7 +682,7 @@ export function TraceFilters({
           <SlidersHorizontal className="w-3 h-3" />
           <span>more filters</span>
           {advancedFilterCount > 0 && (
-            <span className="px-1 py-0 bg-accent text-bg font-mono text-[10px] tabular-nums leading-none flex items-center min-w-[14px] justify-center">
+            <span className="px-1 py-0 rounded-xs bg-accent text-accent-fg font-mono text-[10px] tabular-nums leading-none flex items-center min-w-[14px] justify-center">
               {advancedFilterCount}
             </span>
           )}
@@ -713,10 +715,10 @@ export function TraceFilters({
               onClick={() =>
                 filter.onRemove ? filter.onRemove() : removeFilter(filter.key)
               }
-              className="flex items-center gap-1 px-1.5 py-0.5 bg-panel border border-rule hover:border-accent hover:text-ink font-mono text-[10px] text-ink-faint transition-colors group lowercase"
+              className="flex items-center gap-1 px-2 py-1 rounded-sm bg-surface hover:bg-surface-hover hover:text-ink font-mono text-[11px] text-ink-faint transition-colors group lowercase"
             >
               <span>{filter.label}</span>
-              <X className="w-2.5 h-2.5 opacity-50 group-hover:opacity-100 group-hover:text-accent transition-all" />
+              <X className="w-2.5 h-2.5 opacity-50 group-hover:opacity-100 transition-all" />
             </button>
           ))}
           <Button variant="ghost" size="sm" onClick={onClear} className="ml-1">
diff --git a/console/web/src/pages/TracesV2/components/TraceHeader.tsx b/console/web/src/pages/TracesV2/components/TraceHeader.tsx
index 3b4e5fd34..2c8c8de97 100644
--- a/console/web/src/pages/TracesV2/components/TraceHeader.tsx
+++ b/console/web/src/pages/TracesV2/components/TraceHeader.tsx
@@ -78,9 +78,9 @@ export function TraceHeader({
   const rootWorker = rootSpan ? getWorkerName(rootSpan) : 'trace'
 
   return (
-    <div className="bg-panel border-b border-rule-2 flex-shrink-0">
-      <div className="flex items-center gap-2 px-4 pt-3 pb-1.5">
-        <span className="px-1.5 py-0.5 font-mono text-[11px] font-medium uppercase tracking-[0.06em] flex-shrink-0 border border-rule bg-bg text-ink-faint lowercase">
+    <div className="border-b border-rule-2 flex-shrink-0">
+      <div className="flex items-center gap-2 px-3 pt-3 pb-1.5">
+        <span className="px-1.5 py-0.5 font-mono text-[11px] font-medium uppercase tracking-[0.06em] flex-shrink-0 rounded-xs bg-surface text-ink-faint lowercase">
           {rootWorker}
         </span>
         <h2
@@ -100,7 +100,7 @@ export function TraceHeader({
         </Button>
       </div>
 
-      <div className="flex items-center gap-2 px-4 pb-2.5 flex-wrap">
+      <div className="flex items-center gap-2 px-3 pb-2.5 flex-wrap">
         <button
           type="button"
           onClick={() => copy('traceId', traceId)}
@@ -118,28 +118,28 @@ export function TraceHeader({
 
         <span aria-hidden className="w-px h-3 bg-rule-2" />
 
-        <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+        <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
           <Clock className="w-2.5 h-2.5 text-accent" />
           <span className="text-[11px] font-mono font-semibold text-accent tabular-nums">
             {formatDuration(data.total_duration_ms)}
           </span>
         </span>
 
-        <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+        <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
           <Layers className="w-2.5 h-2.5 text-ink-faint" />
           <span className="text-[11px] font-mono text-ink-faint tabular-nums">
             {data.span_count} spans
           </span>
         </span>
 
-        <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-rule">
+        <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-surface">
           <span className="text-[11px] font-mono text-ink-faint tabular-nums">
             {workerCount} worker{workerCount === 1 ? '' : 's'}
           </span>
         </span>
 
         {hasErrors && (
-          <span className="flex items-center gap-1 px-2 py-0.5 bg-bg border border-alert">
+          <span className="flex items-center gap-1 px-2 py-0.5 rounded-xs bg-alert-muted">
             <AlertCircle className="w-2.5 h-2.5 text-alert" />
             <span className="text-[11px] font-mono font-semibold text-alert tabular-nums">
               {errorCount} err
@@ -149,8 +149,8 @@ export function TraceHeader({
       </div>
 
       {workerList.length > 1 && (
-        <div className="px-4 pb-2.5">
-          <div className="flex h-1.5 bg-bg border border-rule overflow-hidden">
+        <div className="px-3 pb-2.5">
+          <div className="flex h-1.5 rounded-full bg-surface overflow-hidden">
             {workerList.map((worker, i) => {
               const workerDuration = workerDurations.get(worker) || 0
               const pct = (workerDuration / data.total_duration_ms) * 100
@@ -189,7 +189,7 @@ export function TraceHeader({
       )}
 
       {criticalPath.length > 1 && (
-        <div className="flex items-center gap-1 px-4 pb-2.5 overflow-x-auto">
+        <div className="flex items-center gap-1 px-3 pb-2.5 overflow-x-auto">
           {criticalPath.map((span, i) => (
             <Fragment key={span.span_id}>
               {i > 0 && (
@@ -198,7 +198,7 @@ export function TraceHeader({
               <button
                 type="button"
                 onClick={() => onSpanClick?.(span)}
-                className="font-mono text-[11px] text-ink-faint hover:text-ink hover:bg-bg truncate max-w-[140px] flex-shrink-0 px-1 py-0.5 transition-colors lowercase"
+                className="font-mono text-[11px] text-ink-faint hover:text-ink hover:bg-surface-hover rounded-xs truncate max-w-[140px] flex-shrink-0 px-1 py-0.5 transition-colors lowercase"
                 title={span.name}
               >
                 {span.name}
diff --git a/console/web/src/pages/TracesV2/components/TraceListRow.tsx b/console/web/src/pages/TracesV2/components/TraceListRow.tsx
index 685f12525..59a69d637 100644
--- a/console/web/src/pages/TracesV2/components/TraceListRow.tsx
+++ b/console/web/src/pages/TracesV2/components/TraceListRow.tsx
@@ -19,10 +19,10 @@ function formatTime(timestamp: number): string {
 
 function statusDotTone(
   status: TraceListItem['status'],
-): 'accent' | 'alert' | 'warn' {
+): 'ok' | 'alert' | 'warn' {
   switch (status) {
     case 'ok':
-      return 'accent'
+      return 'ok'
     case 'error':
       return 'alert'
     default:
@@ -71,8 +71,8 @@ export function TraceListRow({
       onAnimationEnd={onAnimationEnd}
       aria-expanded={isSelected}
       className={cn(
-        'group/row w-full px-4 py-3 border-b border-rule-2 text-left transition-colors',
-        isSelected ? 'bg-panel border-l-2 border-l-accent' : 'hover:bg-panel',
+        'group/row w-full px-3 py-2.5 rounded-sm text-left transition-colors',
+        isSelected ? 'bg-surface-selected' : 'hover:bg-surface-hover',
         isNew && 'trace-flash',
       )}
     >
diff --git a/console/web/src/pages/TracesV2/components/ViewsDropdown.tsx b/console/web/src/pages/TracesV2/components/ViewsDropdown.tsx
index 9e04843d1..5539246dc 100644
--- a/console/web/src/pages/TracesV2/components/ViewsDropdown.tsx
+++ b/console/web/src/pages/TracesV2/components/ViewsDropdown.tsx
@@ -81,10 +81,10 @@ export function ViewsDropdown({
           <button
             type="button"
             className={cn(
-              'inline-flex items-center gap-2 h-8 px-2.5 border font-mono text-[12px] lowercase transition-colors',
+              'inline-flex items-center gap-2 h-8 px-2.5 rounded-sm font-mono text-[12px] lowercase transition-colors',
               activeView
-                ? 'border-accent text-ink'
-                : 'border-rule text-ink-faint hover:text-ink',
+                ? 'bg-accent-muted text-ink'
+                : 'bg-surface text-ink-faint hover:text-ink hover:bg-surface-hover',
             )}
             aria-label="switch traces view"
           >
@@ -159,7 +159,7 @@ export function ViewsDropdown({
               value={nameInput}
               onChange={(e) => setNameInput(e.target.value)}
               placeholder="view name"
-              className="h-8 px-2 font-mono text-[12px] bg-bg border border-rule text-ink placeholder:text-ink-ghost focus:outline-none focus:border-accent transition-colors"
+              className="h-8 px-2 font-mono text-[12px] rounded-sm bg-surface border border-transparent text-ink placeholder:text-ink-ghost hover:bg-surface-hover focus:outline-none focus:border-rule-focus transition-colors"
             />
             <div className="flex items-center justify-end gap-2">
               <DialogClose asChild>
diff --git a/console/web/src/pages/TracesV2/components/WaterfallChart.tsx b/console/web/src/pages/TracesV2/components/WaterfallChart.tsx
index 678410875..df1593c41 100644
--- a/console/web/src/pages/TracesV2/components/WaterfallChart.tsx
+++ b/console/web/src/pages/TracesV2/components/WaterfallChart.tsx
@@ -150,14 +150,14 @@ const WaterfallRow = memo(function WaterfallRow({
       ? getWorkerColor(getWorkerName(span))
       : 'var(--color-ink-ghost)'
 
-  // Hover is pure CSS (`hover:bg-panel`). Selected/error chrome
+  // Hover is pure CSS (`hover:bg-surface-hover`). Selected/error chrome
   // takes priority over hover via CSS specificity (more-specific
   // bg classes).
   const rowChrome = isSelected
-    ? 'bg-panel border-l-2 border-l-accent'
+    ? 'bg-surface-selected'
     : isError
-      ? 'bg-alert/5 border-l-2 border-l-alert'
-      : 'hover:bg-panel'
+      ? 'bg-alert-muted'
+      : 'hover:bg-surface-hover'
 
   return (
     // biome-ignore lint/a11y/useSemanticElements: this clickable row contains a nested expand/collapse <button>, so it can't be a native <button> (nested interactive content is invalid HTML); div + role="button" + key handlers is the accessible fallback
@@ -273,7 +273,7 @@ const initialDisplayState: DisplayState = {
 // over the chart fired one dispatch per row entered/exited — each one a
 // full re-render of every visible row. For a 2000+-span trace that froze
 // the page on mouse-move. Row-background styling stays pure CSS
-// (`hover:bg-panel`); the hover DETAIL card (SpanHoverCard, shared with
+// (`hover:bg-surface-hover`); the hover DETAIL card (SpanHoverCard, shared with
 // the timelines) is plain `useState` on the chart component instead:
 // rows are memo'd with stable callbacks, so a per-mousemove state update
 // re-renders only the shallow wrapper map and the card — never the rows.
@@ -373,7 +373,7 @@ function Toolbar(props: ToolbarProps) {
     totalCount,
   } = props
   return (
-    <div className="flex items-center justify-between px-3 py-2 border-b border-rule bg-panel">
+    <div className="flex items-center justify-between px-3 py-2 border-b border-rule-2">
       <div className="flex items-center gap-1.5">
         {showExpandControls ? (
           <>
@@ -383,7 +383,7 @@ function Toolbar(props: ToolbarProps) {
                   type="button"
                   onClick={expandAll}
                   aria-label="expand all spans"
-                  className="inline-flex items-center justify-center w-7 h-7 border bg-bg text-ink-faint border-rule hover:text-ink hover:border-ink transition-colors"
+                  className="inline-flex items-center justify-center w-7 h-7 rounded-sm text-ink-faint hover:text-ink hover:bg-surface-hover transition-colors"
                 >
                   <ChevronsDown className="w-3.5 h-3.5" />
                 </button>
@@ -396,7 +396,7 @@ function Toolbar(props: ToolbarProps) {
                   type="button"
                   onClick={collapseAll}
                   aria-label="collapse all spans"
-                  className="inline-flex items-center justify-center w-7 h-7 border bg-bg text-ink-faint border-rule hover:text-ink hover:border-ink transition-colors"
+                  className="inline-flex items-center justify-center w-7 h-7 rounded-sm text-ink-faint hover:text-ink hover:bg-surface-hover transition-colors"
                 >
                   <ChevronsUp className="w-3.5 h-3.5" />
                 </button>
@@ -744,7 +744,7 @@ export function WaterfallChart({
         style={
           { '--span-col-width': `${spanColWidth}px` } as React.CSSProperties
         }
-        className="grid grid-cols-[var(--span-col-width)_1fr] gap-4 px-3 py-2 text-[11px] font-semibold text-ink-ghost uppercase tracking-[0.06em] border-b border-rule bg-bg"
+        className="grid grid-cols-[var(--span-col-width)_1fr] gap-4 px-3 py-2 text-[11px] font-semibold text-ink-ghost uppercase tracking-[0.06em] border-b border-rule-2 bg-panel-raised"
       >
         <div className="flex items-center relative">
           <span>span</span>
@@ -820,7 +820,7 @@ export function WaterfallChart({
 
         {/* minimap */}
         {contentHeight > containerHeight && (
-          <div className="w-16 border-l border-rule bg-panel flex-shrink-0 relative p-2">
+          <div className="w-16 border-l border-rule-2 flex-shrink-0 relative p-2">
             <div className="text-[9px] text-ink-ghost uppercase tracking-[0.06em] mb-2">
               map
             </div>
diff --git a/console/web/src/pages/TracesV2/components/WorkerBreakdown.tsx b/console/web/src/pages/TracesV2/components/WorkerBreakdown.tsx
index 19cb7619a..4b69b5320 100644
--- a/console/web/src/pages/TracesV2/components/WorkerBreakdown.tsx
+++ b/console/web/src/pages/TracesV2/components/WorkerBreakdown.tsx
@@ -138,7 +138,7 @@ export function WorkerBreakdown({ data }: WorkerBreakdownProps) {
                   </span>
                 )}
               </div>
-              <div className="h-1 bg-bg border border-rule overflow-hidden ml-4">
+              <div className="h-1 rounded-full bg-surface overflow-hidden ml-4">
                 <div
                   className="h-full transition-all duration-300"
                   style={{
diff --git a/console/web/src/pages/TracesV2/components/timeline/SpanFilterMenu.tsx b/console/web/src/pages/TracesV2/components/timeline/SpanFilterMenu.tsx
index e986a70b2..81f1e5eb9 100644
--- a/console/web/src/pages/TracesV2/components/timeline/SpanFilterMenu.tsx
+++ b/console/web/src/pages/TracesV2/components/timeline/SpanFilterMenu.tsx
@@ -169,10 +169,10 @@ export function SpanFilterMenu({
           onPointerEnter={openNow}
           onPointerLeave={scheduleClose}
           className={cn(
-            'flex items-center gap-1 border px-1.5 py-1 font-mono text-[10px] lowercase backdrop-blur-sm transition-colors',
+            'flex items-center gap-1 rounded-sm px-1.5 py-1 font-mono text-[10px] lowercase backdrop-blur-sm transition-colors',
             filtering
-              ? 'border-accent bg-panel text-accent'
-              : 'border-rule bg-bg/90 text-ink-faint hover:text-ink',
+              ? 'bg-accent-muted text-accent'
+              : 'bg-surface-active text-ink-faint hover:text-ink',
             className,
           )}
         >
diff --git a/console/web/src/pages/TracesV2/components/timeline/SpanHoverCard.tsx b/console/web/src/pages/TracesV2/components/timeline/SpanHoverCard.tsx
index 9b30044f5..56d42c831 100644
--- a/console/web/src/pages/TracesV2/components/timeline/SpanHoverCard.tsx
+++ b/console/web/src/pages/TracesV2/components/timeline/SpanHoverCard.tsx
@@ -72,7 +72,7 @@ export function SpanHoverCard({
       }}
     >
       <div
-        className="bg-panel border border-rule px-3 py-2.5 min-w-[200px]"
+        className="rounded-md bg-panel-raised shadow-floating px-3 py-2.5 min-w-[200px]"
         style={{ maxWidth: CARD_MAX_WIDTH }}
       >
         <div className="font-mono text-[12.5px] text-ink leading-tight mb-1.5 break-all lowercase">
@@ -120,7 +120,7 @@ export function SpanHoverCard({
         </div>
 
         {tracePercent != null && (
-          <div className="mt-2 h-1 bg-rule-2 overflow-hidden">
+          <div className="mt-2 h-1 bg-surface overflow-hidden">
             <div
               className="h-full bg-accent"
               style={{
diff --git a/console/web/src/pages/TracesV2/components/timeline/TimelineStrip.tsx b/console/web/src/pages/TracesV2/components/timeline/TimelineStrip.tsx
index be224acfc..0b0f9e9c6 100644
--- a/console/web/src/pages/TracesV2/components/timeline/TimelineStrip.tsx
+++ b/console/web/src/pages/TracesV2/components/timeline/TimelineStrip.tsx
@@ -636,7 +636,7 @@ function Timeline({
             {ticks.map((t) => (
               <div
                 key={t}
-                className="absolute inset-y-0 w-px bg-rule-2"
+                className="absolute inset-y-0 w-px bg-ink/8"
                 style={{ left: x(t) }}
               />
             ))}
@@ -646,7 +646,7 @@ function Timeline({
               <div
                 key={rail.id}
                 aria-hidden
-                className="absolute w-px bg-rule"
+                className="absolute w-px bg-ink/15"
                 style={{
                   left: rail.left,
                   top: rail.top,
@@ -658,7 +658,7 @@ function Timeline({
               <div
                 key={stub.id}
                 aria-hidden
-                className="absolute h-px bg-rule"
+                className="absolute h-px bg-ink/15"
                 style={{
                   left: stub.left,
                   top: stub.top,
@@ -804,11 +804,11 @@ export function TimelineStrip({
   return (
     <div
       className={cn(
-        'flex h-36 flex-shrink-0 flex-col border-b border-rule overflow-hidden',
+        'flex h-36 flex-shrink-0 flex-col border-b border-rule-2 overflow-hidden',
         className,
       )}
     >
-      <div className="flex shrink-0 items-center justify-between border-b border-rule bg-bg">
+      <div className="flex shrink-0 items-center justify-between border-b border-rule-2 bg-bg">
         <div className="flex items-center gap-3 px-3 py-2">
           <div className="font-mono text-[11px] uppercase tracking-[0.18em] text-ink-faint">
             <span className="text-accent">$</span>
diff --git a/console/web/src/pages/TracesV2/components/timeline/TraceTimeline.tsx b/console/web/src/pages/TracesV2/components/timeline/TraceTimeline.tsx
index 3c9a57f33..2e7694a37 100644
--- a/console/web/src/pages/TracesV2/components/timeline/TraceTimeline.tsx
+++ b/console/web/src/pages/TracesV2/components/timeline/TraceTimeline.tsx
@@ -673,7 +673,7 @@ export function TraceTimeline({
           {/* proportional time ruler — sticky: pinned while panning down,
               gliding with the bars while panning right */}
           <div
-            className="sticky top-0 z-[6] bg-bg"
+            className="sticky top-0 z-[6] bg-panel-raised"
             style={{ height: RULER_H, width: contentWidth }}
           >
             {stage.width > 0 &&
@@ -701,7 +701,7 @@ export function TraceTimeline({
                 <div
                   key={f}
                   aria-hidden
-                  className="absolute inset-y-0 w-px bg-rule-2"
+                  className="absolute inset-y-0 w-px bg-ink/8"
                   style={{ left: x(total * f) }}
                 />
               ))}
@@ -713,7 +713,7 @@ export function TraceTimeline({
                   <div
                     key={rail.id}
                     aria-hidden
-                    className="timeline-glide absolute w-px bg-rule"
+                    className="timeline-glide absolute w-px bg-ink/15"
                     style={{
                       left: rail.left,
                       top: rail.top,
@@ -725,7 +725,7 @@ export function TraceTimeline({
                   <div
                     key={stub.id}
                     aria-hidden
-                    className="timeline-glide absolute h-px bg-rule"
+                    className="timeline-glide absolute h-px bg-ink/15"
                     style={{
                       left: stub.left,
                       top: stub.top,
diff --git a/console/web/src/pages/TracesV2/index.tsx b/console/web/src/pages/TracesV2/index.tsx
index 183c5ac76..aa980879c 100644
--- a/console/web/src/pages/TracesV2/index.tsx
+++ b/console/web/src/pages/TracesV2/index.tsx
@@ -35,6 +35,7 @@ import { Button } from '@/components/ui/Button'
 import { Cell } from '@/components/ui/Cell'
 import { EmptyState } from '@/components/ui/EmptyState'
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary'
+import { PageHeader } from '@/components/ui/PageChrome'
 import { Pagination } from '@/components/ui/Pagination'
 import { Skeleton } from '@/components/ui/Skeleton'
 import { StatusPanel } from '@/components/ui/StatusPanel'
@@ -86,9 +87,11 @@ const PAGE_SIZES = [25, 50, 100]
 export interface TracesV2Props {
   /** mount with a trace's detail already expanded (stories/deep links) */
   initialTraceId?: string
+  /** Close the hosting pane — the header's standard ✕ when present. */
+  onRequestClose?: () => void
 }
 
-export function TracesV2({ initialTraceId }: TracesV2Props) {
+export function TracesV2({ initialTraceId, onRequestClose }: TracesV2Props) {
   // The strip's system/pause/refresh controls were removed; both stay at
   // their defaults (streams live, internal spans hidden) until some other
   // surface grows a toggle.
@@ -519,7 +522,7 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
   // border continues the selected row's marker.
   const traceDetail =
     selectedTraceId !== null ? (
-      <div className="border-b border-rule-2 border-l-2 border-l-accent">
+      <div className="bg-panel-raised shadow-raised">
         {isLoadingSpans && (
           <TraceDetailSkeleton onClose={() => selectTrace(null)} />
         )}
@@ -558,7 +561,7 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
               onClose={() => selectTrace(null)}
               onSpanClick={setSelectedSpan}
             />
-            <div className="border-b border-rule px-4 py-2.5">
+            <div className="border-b border-rule-2 px-3 py-2">
               <ViewSwitcher
                 currentView={activeView}
                 onViewChange={setActiveView}
@@ -587,7 +590,7 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
                 />
               </div>
             )}
-            <div className="border-t border-rule">
+            <div className="border-t border-rule-2">
               <WorkerBreakdown data={waterfallData} />
             </div>
           </>
@@ -603,6 +606,11 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
       aria-label="traces"
       className="flex-1 flex flex-col overflow-hidden"
     >
+      <PageHeader
+        icon={<GitBranch />}
+        title="traces"
+        onClose={onRequestClose}
+      />
       <TimelineStrip
         spans={allSpans}
         spanFilter={spanFilter}
@@ -612,7 +620,7 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
         onToggleFollowTurns={conversationsCtx ? toggleFollowTurns : undefined}
       />
 
-      <div className="px-4 py-2.5 border-b border-rule">
+      <div className="px-3 py-2 border-b border-rule-2">
         <ErrorBoundary>
           <TraceFilters
             filters={filterState}
@@ -698,7 +706,7 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
                     ).map((sk) => (
                       <div
                         key={sk}
-                        className="px-4 py-3 border-b border-rule-2"
+                        className="px-3 py-3 border-b border-rule-2"
                       >
                         <div className="flex items-center gap-2 mb-2">
                           <Skeleton className="w-1.5 h-1.5 rounded-full" />
@@ -768,7 +776,7 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
                         )
                       })}
                     </div>
-                    <div className="flex-shrink-0 border-t border-rule px-4 py-2.5">
+                    <div className="flex-shrink-0 border-t border-rule-2 px-3 py-2">
                       <Pagination
                         currentPage={filterState.page}
                         totalPages={totalPages}
@@ -800,12 +808,12 @@ export function TracesV2({ initialTraceId }: TracesV2Props) {
                   aria-label="resize span panel"
                   onMouseDown={spanPanel.startResize}
                   onDoubleClick={spanPanel.reset}
-                  className="w-[3px] flex-shrink-0 cursor-col-resize bg-rule hover:bg-accent active:bg-accent"
+                  className="w-[3px] flex-shrink-0 cursor-col-resize bg-transparent hover:bg-accent/60 active:bg-accent"
                 />
                 <div
                   style={{ width: spanPanel.width }}
                   className={cn(
-                    'bg-bg border-l border-rule flex-shrink-0 h-full overflow-hidden',
+                    'bg-panel-raised border-l border-rule-2 flex-shrink-0 h-full overflow-hidden',
                     spanPanel.isResizing && 'pointer-events-none select-none',
                   )}
                 >
diff --git a/console/web/src/types/injectable-ui.ts b/console/web/src/types/injectable-ui.ts
index af1e592b4..f079feec4 100644
--- a/console/web/src/types/injectable-ui.ts
+++ b/console/web/src/types/injectable-ui.ts
@@ -57,13 +57,39 @@ export interface ConsoleApi {
   tokens: readonly string[]
 }
 
+/**
+ * Where the workspace pane hosting the page sits. `'right'` only for the
+ * rightmost column of a multi-column tab — a single-column tab is `'left'`,
+ * so pages can treat `'left'` as the default orientation.
+ */
+export type PanelSide = 'left' | 'right'
+
+/** Props the host passes to every registered page render component. */
+export interface PageRenderProps {
+  panelSide: PanelSide
+  /**
+   * Stable id of the workspace tab whose pane hosts this render — the key
+   * for per-tab UI state (workspace tabs persist across reloads). Empty
+   * string when the page renders outside a workspace tab.
+   */
+  tabId: string
+  /**
+   * Close the pane hosting this page (a split drops the column; a
+   * single-column tab detaches back to the attach affordance). Pass it to
+   * `PageHeader`'s `onClose` — every page header carries the standard ✕.
+   * Absent when the page renders outside a closable pane.
+   */
+  onRequestClose?: () => void
+}
+
 export interface PageRegistration {
   /** kebab-case, unique per tab; convention `<worker>-<name>`. Routes at `#/ext/<id>`. */
   id: string
   /** Nav label. */
   title: string
-  /** The page body (right pane). */
-  render: React.ComponentType
+  /** The page body (right pane). Receives `PageRenderProps` — a plain
+      `() => <Page />` render stays valid and simply ignores them. */
+  render: React.ComponentType<PageRenderProps>
 }
 
 /**
diff --git a/docs/sops/injectable-console-ui.md b/docs/sops/injectable-console-ui.md
index efde48bb7..d621d50f3 100644
--- a/docs/sops/injectable-console-ui.md
+++ b/docs/sops/injectable-console-ui.md
@@ -250,6 +250,54 @@ returns a remover for manual teardown.
 A whole console page at `#/ext/<id>`, listed in the nav while registered.
 Duplicate ids: last registration wins (a `console.warn` names both scripts).
 
+`render` receives `PageRenderProps` — a plain `() => <Page />` render stays
+valid and simply ignores them:
+
+- `panelSide`: `'left' | 'right'` — which side of the workspace tab the
+  pane hosting the page occupies (`'right'` only for the rightmost column
+  of a multi-column tab; a single-column tab is `'left'`). Pages that care
+  mirror their layout so a sidebar hugs the outer screen edge (the shell
+  explorer does).
+- `tabId`: the hosting workspace tab's stable id (tabs persist across
+  reloads) — the key for per-tab UI state (the shell explorer keys its
+  open files/expanded folders on it). Empty string outside a workspace
+  tab.
+- `onRequestClose`: close the pane hosting the page (a split drops the
+  column; a single-column tab detaches back to the attach affordance).
+  Wire it to `PageHeader`'s `onClose` — every page header carries the
+  standard ✕. Absent when the page renders outside a closable pane.
+
+#### The page chrome — MANDATORY layout for pages
+
+Every injected page composes the same five `@iii-dev/console-ui`
+components, so panes stay visually identical across workers AND the
+console's own screens (chat, traces):
+
+```tsx
+<PageShell>
+  <PageHeader
+    icon={<MyIcon />}                 // 16px glyph, faint ink
+    title="myworker"                  // mono lowercase — console chrome
+    description="what this page is"   // truncates first
+    actions={<Button …/>}             // optional right-side controls
+    onClose={onRequestClose}          // the standard ✕
+  />
+  <PageBody side={panelSide}>         {/* mirrors for right-side panes */}
+    <PageSidebar>…navigation…</PageSidebar>  {/* gray, fixed width */}
+    <PageMain>…workspace…</PageMain>         {/* white, flexes */}
+  </PageBody>
+</PageShell>
+```
+
+The pieces own the surface hierarchy (header `--color-panel-raised` +
+hairline `--color-edge` border; sidebar `--color-sidebar`; main
+`--color-panel`) — don't repaint those tokens per worker. A page without
+a sidebar just puts its content straight into `PageBody`/`PageMain`; a
+page with custom internals (the directory page's drill-in browser) may
+own its body but MUST keep `PageShell` + `PageHeader`. The shell
+explorer (`workers/shell/ui/src/page/index.tsx`) is the reference
+composition.
+
 ### `host.functionTriggers.register(renderer)`
 
 Custom rendering for function-trigger messages in chat and traces:
@@ -349,7 +397,7 @@ Feature-detect on older consoles: `host.chat?.registerSessionChip`.
 | Surface | What it is |
 |---|---|
 | `host.iii` | The tab's bus client: `trigger(functionId, payload?, {timeoutMs?})`, `on(functionId, handler)` (returns un-listen), `registerTrigger({type, function_id, config})` (returns un-register), `addConnectionStateListener`, `browserId`. Injected UI *acts* by invoking its own worker's functions. |
-| shared components | The curated, pre-styled component library: `Badge`, `Button`, `Dialog`(+`Trigger/Close/Content/Title/Description`), `DropdownMenu`(+parts), `EmptyState`, `ErrorBoundary`, `Input`, `Select`, `Skeleton`, `StatusDot`, `StatusPanel`, `Tabs`(+parts), `Tooltip`(+parts), `CodeEditor`, `CodeHighlight`, `JsonHighlight`, `Markdown`, `MarkdownPreview`. Import them by name from `@iii-dev/console-ui` (typed props); `host.components` carries the same objects as an untyped record. `CodeEditor` is **Monaco** — the console's one code editor, global by contract: every editing surface uses it (see the build-footgun note above; never ship your own). For richer components, copy the pattern into your worker — small duplication across workers is the accepted cost; `@iii-dev/console-ui` is deliberately the only versioned contract. |
+| shared components | The curated, pre-styled component library: `Badge`, `Button`, `Dialog`(+`Trigger/Close/Content/Title/Description`), `DropdownMenu`(+parts), `EmptyState`, `ErrorBoundary`, `FileDiff`, `Input`, `PageShell`/`PageHeader`/`PageBody`/`PageSidebar`/`PageMain` (the mandatory page chrome — see the pages section), `Select`, `Skeleton`, `StatusDot`, `StatusPanel`, `Tabs`(+parts), `Tooltip`(+parts), `CodeEditor`, `CodeHighlight`, `JsonHighlight`, `Markdown`, `MarkdownPreview`. Import them by name from `@iii-dev/console-ui` (typed props); `host.components` carries the same objects as an untyped record. `CodeEditor` is **Monaco** — the console's one code editor, global by contract: every editing surface uses it (see the build-footgun note above; never ship your own). `FileDiff` is the console's one **file-diff** surface under the same contract — pass two full file bodies (`{ name, contents }` each) and the console computes and renders the themed diff; never bundle a diff renderer. For richer components, copy the pattern into your worker — small duplication across workers is the accepted cost; `@iii-dev/console-ui` is deliberately the only versioned contract. |
 | `host.useTheme()` | `'light' \| 'dark'`, reactive. Extensions follow the theme, never set it. |
 | `host.path` | Your script's asset path. |
 
diff --git a/iii-directory/ui/page.tsx b/iii-directory/ui/page.tsx
index 1cf955986..afadcbf90 100644
--- a/iii-directory/ui/page.tsx
+++ b/iii-directory/ui/page.tsx
@@ -25,7 +25,7 @@ export default function setup(host: Host) {
   host.pages.register({
     id: 'directory',
     title: 'directory',
-    render: () => <DirectoryPage host={host} />,
+    render: (props) => <DirectoryPage host={host} {...props} />,
   })
 
   host.functionTriggers.register(createDirectoryTriggerRenderer())
diff --git a/iii-directory/ui/src/lib/widgets.tsx b/iii-directory/ui/src/lib/widgets.tsx
index 35892b96b..5ed673648 100644
--- a/iii-directory/ui/src/lib/widgets.tsx
+++ b/iii-directory/ui/src/lib/widgets.tsx
@@ -9,28 +9,12 @@
 import { Badge } from '@iii-dev/console-ui'
 import type { ReactNode } from 'react'
 
-export function Chip({
-  children,
-  className,
-}: {
-  children: ReactNode
-  className?: string
-}) {
-  return (
-    <span className={`dir-ui-chip${className ? ` ${className}` : ''}`}>
-      {children}
-    </span>
-  )
+export function Chip({ children, className }: { children: ReactNode; className?: string }) {
+  return <span className={`dir-ui-chip${className ? ` ${className}` : ''}`}>{children}</span>
 }
 
 /** Two-tone chip with a small uppercase label and a value. */
-export function KvChip({
-  label,
-  children,
-}: {
-  label: string
-  children: ReactNode
-}) {
+export function KvChip({ label, children }: { label: string; children: ReactNode }) {
   return (
     <Chip>
       <span className="k">{label}</span>
@@ -92,26 +76,69 @@ export function EmptyRow({ label }: { label: string }) {
 }
 
 /** Narrow-mode drill-out affordance (the state worker's ← pattern). */
-export function BackButton({
-  onClick,
-  label,
-}: {
-  onClick: () => void
-  label: string
-}) {
+export function BackButton({ onClick, label }: { onClick: () => void; label: string }) {
   return (
-    <button
-      type="button"
-      className="dir-ui-back"
-      onClick={onClick}
-      aria-label={label}
-      title={label}
-    >
-      ←
+    <button type="button" className="dir-ui-back" onClick={onClick} aria-label={label} title={label}>
+      <ChevronLeftIcon className="dir-ui-back-icon" />
     </button>
   )
 }
 
+/* ── inline icons ─────────────────────────────────────────────────────
+ * Injected UI has no icon library to import — these are hand-inlined
+ * 24×24 stroke glyphs (lucide geometry: 1.5px stroke, round caps) sized
+ * by the caller's className. All are decorative (aria-hidden); the
+ * enclosing control carries the accessible name. */
+
+function iconProps(className?: string) {
+  return {
+    className,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.5,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+  } as const
+}
+
+/** Document-with-folded-corner + "M" tick: the markdown file identity. */
+export function MarkdownFileIcon({ className }: { className?: string }) {
+  return (
+    <svg {...iconProps(className)} aria-hidden="true">
+      <path d="M14 3v5h5" />
+      <path d="M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
+      <path d="M9 17v-4l2 2 2-2v4" />
+    </svg>
+  )
+}
+
+export function SearchIcon({ className }: { className?: string }) {
+  return (
+    <svg {...iconProps(className)} aria-hidden="true">
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </svg>
+  )
+}
+
+export function XIcon({ className }: { className?: string }) {
+  return (
+    <svg {...iconProps(className)} aria-hidden="true">
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  )
+}
+
+export function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg {...iconProps(className)} aria-hidden="true">
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  )
+}
+
 export function PulseLine({ label }: { label: string }) {
   return <div className="dir-ui-pulse">· {label}</div>
 }
diff --git a/iii-directory/ui/src/page/browser.tsx b/iii-directory/ui/src/page/browser.tsx
index 0e50845be..9b7cc9bc2 100644
--- a/iii-directory/ui/src/page/browser.tsx
+++ b/iii-directory/ui/src/page/browser.tsx
@@ -1,35 +1,36 @@
 /**
- * The generic list + editor browser both tabs are built on: a searchable
- * sidebar of entries, and an editor pane that round-trips one entry's RAW
- * markdown (frontmatter included) through the shared `CodeEditor` /
- * `MarkdownPreview` pair, saving over the worker's `*::update` functions.
+ * The generic list + editor browser both collections are built on: a
+ * navigation sidebar (collection switcher, search, count, entry list) and
+ * a document workspace with a stable header (identity crumb, segmented
+ * Edit/Split/Preview control, save state) over the shared `CodeEditor` /
+ * `MarkdownPreview` pair, saving through the worker's `*::update`
+ * functions.
  *
  * Live updates: the page registers a tab-scoped binding on the worker's
  * `directory::*::on-change` trigger type (see `useOnChange`) — a download
  * or update landing anywhere refreshes the list, and reloads the open
  * entry when the editor isn't dirty (an unsaved draft is never clobbered;
- * a note offers the reload instead).
+ * a banner offers the reload instead).
  *
  * Layout adapts to the width the browser HAS (a ResizeObserver on its own
  * root, not a viewport media query — the console can host it in panes of
- * any size). Under NARROW_BELOW px it becomes a drill-in flow like the
- * state worker's page: the list fills the width, opening an entry swaps
- * the list for the editor with a ← back button, and split preview stacks
- * vertically.
+ * any size). Under NARROW_BELOW px it becomes a drill-in flow: the list
+ * fills the width, opening an entry swaps the list for the document with
+ * a ← back button, and split mode is unavailable (edit/preview only).
+ *
+ * The editor pane stays MOUNTED across mode switches (hidden in preview
+ * mode) so Monaco keeps cursor and scroll position; the split divider is
+ * draggable and its ratio, like the view mode, persists per tab+collection
+ * in localStorage.
  */
 
-import {
-  Button,
-  CodeEditor,
-  type Host,
-  Input,
-  MarkdownPreview,
-} from '@iii-dev/console-ui'
+import { Button, CodeEditor, type Host, Input, MarkdownPreview } from '@iii-dev/console-ui'
+import type { ReactNode } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { BackButton } from '../lib/widgets'
+import { BackButton, MarkdownFileIcon, SearchIcon, XIcon } from '../lib/widgets'
 
 /** Container width (px) below which the browser collapses to the
- * drill-in list ⇄ editor flow. */
+ * drill-in list ⇄ document flow. */
 const NARROW_BELOW = 850
 
 export interface BrowserRow {
@@ -44,6 +45,11 @@ export interface BrowserRow {
 export interface BrowserAdapter {
   /** Singular noun for labels ("skill" / "prompt"). */
   noun: string
+  /** Breadcrumb root segment ("skills" / "prompts"). */
+  crumbRoot: string
+  /** Workspace empty-state copy. */
+  emptyTitle: string
+  emptyBody: string
   list(host: Host): Promise<BrowserRow[]>
   /** Load one entry's full on-disk content (frontmatter included). */
   load(host: Host, key: string): Promise<string>
@@ -61,13 +67,31 @@ interface Loaded {
   content: string
 }
 
+function readStored(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+function writeStored(key: string, value: string) {
+  try {
+    window.localStorage.setItem(key, value)
+  } catch {
+    /* private mode / quota — persistence is best-effort */
+  }
+}
+
+const clampRatio = (n: number) => Math.min(0.75, Math.max(0.25, n))
+
 /** Observe the browser root's own width. Returns a callback ref to put
  * on the root plus whether it is currently narrower than `threshold` —
  * container-driven, so the same page adapts inside any pane the console
- * gives it. Measures synchronously on mount to avoid a wide-mode flash. */
-function useContainerNarrow(
-  threshold: number,
-): [(node: HTMLDivElement | null) => void, boolean] {
+ * gives it. Measures synchronously on mount to avoid a wide-mode flash;
+ * zero widths (display:none — the inactive collection) are ignored so a
+ * hidden browser keeps its last real layout. */
+function useContainerNarrow(threshold: number): [(node: HTMLDivElement | null) => void, boolean] {
   const [narrow, setNarrow] = useState(false)
   const observerRef = useRef<ResizeObserver | null>(null)
   const refCb = useCallback(
@@ -75,10 +99,11 @@ function useContainerNarrow(
       observerRef.current?.disconnect()
       observerRef.current = null
       if (!node) return
-      setNarrow(node.getBoundingClientRect().width < threshold)
+      const width = node.getBoundingClientRect().width
+      if (width > 0) setNarrow(width < threshold)
       const observer = new ResizeObserver((entries) => {
-        const width = entries[0]?.contentRect.width
-        if (typeof width === 'number') setNarrow(width < threshold)
+        const next = entries[0]?.contentRect.width
+        if (typeof next === 'number' && next > 0) setNarrow(next < threshold)
       })
       observer.observe(node)
       observerRef.current = observer
@@ -116,28 +141,59 @@ function useOnChange(host: Host, triggerType: string, onEvent: () => void) {
 export function CollectionBrowser({
   host,
   adapter,
+  nav,
+  panelSide = 'left',
+  storageKey,
 }: {
   host: Host
   adapter: BrowserAdapter
+  /** Sidebar top slot — the skills/prompts switcher lives here. */
+  nav?: ReactNode
+  panelSide?: 'left' | 'right'
+  /** localStorage namespace for per-tab+collection UI state. */
+  storageKey: string
 }) {
   const [rows, setRows] = useState<BrowserRow[] | null>(null)
   const [listError, setListError] = useState<string | null>(null)
   const [search, setSearch] = useState('')
+  const searchRef = useRef<HTMLInputElement | null>(null)
 
   const [selected, setSelected] = useState<string | null>(null)
   const [loaded, setLoaded] = useState<Loaded | null>(null)
   const [draft, setDraft] = useState('')
   const [loadError, setLoadError] = useState<string | null>(null)
 
-  const [mode, setMode] = useState<EditorMode>('split')
+  const [mode, setModeState] = useState<EditorMode>(() => {
+    const v = readStored(`${storageKey}:mode`)
+    return v === 'edit' || v === 'split' || v === 'preview' ? v : 'split'
+  })
+  const setMode = useCallback(
+    (m: EditorMode) => {
+      setModeState(m)
+      writeStored(`${storageKey}:mode`, m)
+    },
+    [storageKey],
+  )
+
+  const [split, setSplit] = useState(() => {
+    const v = Number.parseFloat(readStored(`${storageKey}:split`) ?? '')
+    return Number.isFinite(v) ? clampRatio(v) : 0.5
+  })
+  const [dragging, setDragging] = useState(false)
+
   const [saving, setSaving] = useState(false)
   const [saveError, setSaveError] = useState<string | null>(null)
   const [savedFlash, setSavedFlash] = useState(false)
   const [staleOnDisk, setStaleOnDisk] = useState(false)
+  const flashTimer = useRef<number | undefined>(undefined)
+  useEffect(() => () => window.clearTimeout(flashTimer.current), [])
 
   const [rootRef, narrow] = useContainerNarrow(NARROW_BELOW)
+  const bodyRef = useRef<HTMLDivElement | null>(null)
 
   const dirty = loaded !== null && draft !== loaded.content
+  // Split needs side-by-side room; narrow containers fall back to edit.
+  const effMode: EditorMode = narrow && mode === 'split' ? 'edit' : mode
 
   const refreshList = useCallback(() => {
     adapter
@@ -159,7 +215,15 @@ export function CollectionBrowser({
   selectedRef.current = selected
 
   const open = useCallback(
-    (key: string) => {
+    (key: string, opts?: { reload?: boolean }) => {
+      if (!opts?.reload) {
+        // Re-clicking the open entry must not clobber the draft; switching
+        // away from an unsaved draft asks first.
+        if (key === selectedRef.current) return
+        if (dirtyRef.current && !window.confirm(`Discard unsaved changes to ${selectedRef.current}?`)) {
+          return
+        }
+      }
       setSelected(key)
       setLoaded(null)
       setDraft('')
@@ -196,9 +260,7 @@ export function CollectionBrowser({
     adapter
       .load(host, key)
       .then((content) => {
-        setLoaded((prev) =>
-          prev && prev.key === key ? { key, content } : prev,
-        )
+        setLoaded((prev) => (prev && prev.key === key ? { key, content } : prev))
         setDraft((prev) => {
           const current = selectedRef.current
           return current === key ? content : prev
@@ -226,7 +288,8 @@ export function CollectionBrowser({
         setSelected(effectiveKey)
         setStaleOnDisk(false)
         setSavedFlash(true)
-        window.setTimeout(() => setSavedFlash(false), 1600)
+        window.clearTimeout(flashTimer.current)
+        flashTimer.current = window.setTimeout(() => setSavedFlash(false), 2400)
       })
       .catch((e) => {
         if (selectedRef.current === key) setSaveError(String(e))
@@ -234,13 +297,22 @@ export function CollectionBrowser({
       .finally(() => setSaving(false))
   }, [host, adapter, loaded, draft, saving, refreshList])
 
-  const onEditorKeyDown = (e: React.KeyboardEvent) => {
+  const onWorkspaceKeyDown = (e: React.KeyboardEvent) => {
     if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
       e.preventDefault()
       save()
     }
   }
 
+  // `/` anywhere outside a text surface jumps to the list filter.
+  const onRootKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return
+    const t = e.target as HTMLElement
+    if (t.closest('input, textarea, [contenteditable], .monaco-editor')) return
+    e.preventDefault()
+    searchRef.current?.focus()
+  }
+
   // Narrow-mode drill-out: back to the list, guarding an unsaved draft.
   const goBack = () => {
     if (dirty && !window.confirm('Discard unsaved changes?')) return
@@ -252,6 +324,55 @@ export function CollectionBrowser({
     setStaleOnDisk(false)
   }
 
+  // ── split divider ───────────────────────────────────────────────────
+
+  const draggingRef = useRef(false)
+  const applyDividerAt = (clientX: number) => {
+    const body = bodyRef.current
+    if (!body) return
+    const rect = body.getBoundingClientRect()
+    if (rect.width <= 0) return
+    setSplit(clampRatio((clientX - rect.left) / rect.width))
+  }
+  const persistSplit = useCallback((value: number) => writeStored(`${storageKey}:split`, String(value)), [storageKey])
+  const onDividerPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    draggingRef.current = true
+    setDragging(true)
+  }
+  const onDividerPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return
+    applyDividerAt(e.clientX)
+  }
+  const endDividerDrag = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return
+    draggingRef.current = false
+    setDragging(false)
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    setSplit((v) => {
+      persistSplit(v)
+      return v
+    })
+  }
+  const onDividerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = e.key === 'ArrowLeft' ? -0.05 : e.key === 'ArrowRight' ? 0.05 : null
+    if (step !== null) {
+      e.preventDefault()
+      setSplit((v) => {
+        const next = clampRatio(v + step)
+        persistSplit(next)
+        return next
+      })
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      setSplit(0.5)
+      persistSplit(0.5)
+    }
+  }
+
+  // ── derived view state ──────────────────────────────────────────────
+
   const needle = search.trim().toLowerCase()
   const visible = (rows ?? []).filter(
     (r) =>
@@ -263,178 +384,307 @@ export function CollectionBrowser({
 
   // Narrow: one pane at a time — the list, or the opened entry.
   const showSide = !narrow || selected === null
-  const showEditor = !narrow || selected !== null
+  const showDoc = !narrow || selected !== null
+
+  const docKey = loaded?.key ?? selected
+  const docSegments = docKey ? docKey.split('/') : []
+  const docName = docSegments[docSegments.length - 1] ?? ''
+
+  const modeOptions: EditorMode[] = narrow ? ['edit', 'preview'] : ['edit', 'split', 'preview']
+
+  const draftLines = loaded === null ? 0 : draft.split('\n').length
+  const draftBytes = loaded === null ? 0 : new Blob([draft]).size
+
+  const saveStatus = saving ? 'saving…' : savedFlash ? '✓ saved' : dirty ? 'unsaved' : ''
 
   return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: shortcut relay ('/' jumps to the filter) around real controls
     <div
-      className={`dir-ui-browser${narrow ? ' narrow' : ''}`}
+      className={`dir-ui-browser${narrow ? ' narrow' : ''}${panelSide === 'right' ? ' right' : ''}`}
       ref={rootRef}
+      onKeyDown={onRootKeyDown}
     >
       {showSide ? (
-      <div className="dir-ui-side">
-        <div className="dir-ui-side-search">
-          <Input
-            value={search}
-            onChange={setSearch}
-            placeholder={`filter ${adapter.noun}s…`}
-            aria-label={`filter ${adapter.noun}s`}
-          />
-        </div>
-        {listError ? (
-          <div className="dir-ui-error">{listError}</div>
-        ) : rows === null ? (
-          <div className="dir-ui-pulse">· loading {adapter.noun}s…</div>
-        ) : visible.length === 0 ? (
-          <div className="dir-ui-empty">
-            · no {adapter.noun}s{needle ? ' match' : ''}
-          </div>
-        ) : (
-          <ul className="dir-ui-side-list">
-            {visible.map((r) => (
-              <li key={r.key}>
+        <aside className="dir-ui-side" aria-label={`${adapter.noun} list`}>
+          <div className="dir-ui-side-top">
+            {nav}
+            <div className="dir-ui-search">
+              <SearchIcon className="dir-ui-search-icon" />
+              <Input
+                ref={searchRef}
+                value={search}
+                onChange={setSearch}
+                placeholder={`filter ${adapter.noun}s…`}
+                aria-label={`filter ${adapter.noun}s`}
+                className="dir-ui-search-input"
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape' && search) {
+                    e.stopPropagation()
+                    setSearch('')
+                  }
+                }}
+              />
+              {search ? (
                 <button
                   type="button"
-                  className={`dir-ui-side-row${
-                    r.key === selected ? ' active' : ''
-                  }`}
-                  onClick={() => open(r.key)}
-                >
-                  <span className="dir-ui-id">{r.key}</span>
-                  {r.title && r.title !== r.key ? (
-                    <span className="dir-ui-title">{r.title}</span>
-                  ) : null}
-                  {r.description ? (
-                    <span className="dir-ui-desc clamp">{r.description}</span>
-                  ) : null}
-                  <span className="dir-ui-fine">{r.fine}</span>
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-      ) : null}
-
-      {showEditor ? (
-      <div className="dir-ui-editor">
-        {narrow && selected !== null && loaded === null ? (
-          <div className="dir-ui-editor-head">
-            <BackButton
-              onClick={goBack}
-              label={`back to ${adapter.noun} list`}
-            />
-            <span className="dir-ui-id lg grow">{selected}</span>
-          </div>
-        ) : null}
-        {selected === null ? (
-          <div className="dir-ui-empty pad">
-            · select a {adapter.noun} to view and edit its markdown
-          </div>
-        ) : loadError ? (
-          <div className="dir-ui-error">{loadError}</div>
-        ) : loaded === null ? (
-          <div className="dir-ui-pulse">· loading {selected}…</div>
-        ) : (
-          <>
-            <div className="dir-ui-editor-head">
-              {narrow ? (
-                <BackButton
-                  onClick={goBack}
-                  label={`back to ${adapter.noun} list`}
-                />
-              ) : null}
-              <span className="dir-ui-id lg grow">{loaded.key}</span>
-              <span className="dir-ui-modes" role="group" aria-label="editor mode">
-                {(['edit', 'split', 'preview'] as const).map((m) => (
-                  <Button
-                    key={m}
-                    variant="ghost"
-                    size="sm"
-                    aria-pressed={mode === m}
-                    className={mode === m ? 'dir-ui-mode-active' : undefined}
-                    onClick={() => setMode(m)}
-                  >
-                    {m}
-                  </Button>
-                ))}
-              </span>
-              {dirty ? (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  disabled={saving}
+                  className="dir-ui-search-clear"
+                  aria-label="clear filter"
                   onClick={() => {
-                    setDraft(loaded.content)
-                    setSaveError(null)
+                    setSearch('')
+                    searchRef.current?.focus()
                   }}
                 >
-                  revert
-                </Button>
+                  <XIcon className="dir-ui-x-icon" />
+                </button>
               ) : null}
-              <Button
-                variant="primary"
-                size="sm"
-                disabled={!dirty || saving}
-                onClick={save}
-              >
-                {saving ? 'saving…' : 'save'}
-              </Button>
-              <span className="dir-ui-save-note" aria-live="polite">
-                {saving
-                  ? ''
-                  : savedFlash
-                    ? 'saved'
-                    : dirty
-                      ? 'unsaved changes · ⌘S saves'
-                      : ''}
-              </span>
             </div>
-            {staleOnDisk ? (
-              <div className="dir-ui-stale-note">
-                changed on disk while you were editing —{' '}
-                <button
-                  type="button"
-                  className="dir-ui-linkish"
-                  onClick={() => open(loaded.key)}
-                >
-                  reload (discards your draft)
-                </button>
+            {rows !== null && !listError ? (
+              <div className="dir-ui-count" aria-live="polite">
+                {needle
+                  ? `${visible.length} of ${rows.length} ${adapter.noun}s`
+                  : `${rows.length} ${adapter.noun}${rows.length === 1 ? '' : 's'}`}
               </div>
             ) : null}
-            <div
-              className={`dir-ui-editor-body mode-${mode}`}
-              onKeyDown={onEditorKeyDown}
-            >
-              {mode !== 'preview' ? (
-                <div className="dir-ui-pane">
-                  <CodeEditor
-                    value={draft}
-                    onChange={setDraft}
-                    language="markdown"
-                    className="dir-ui-code"
-                    aria-label={`${adapter.noun} markdown source`}
-                    placeholder="# markdown…"
-                  />
+          </div>
+
+          <div className="dir-ui-side-scroll">
+            {listError ? (
+              <div className="dir-ui-error-panel">
+                <p>
+                  The {adapter.noun} list could not be loaded.
+                  <span className="detail">{listError}</span>
+                </p>
+                <Button variant="ghost" size="sm" onClick={refreshList}>
+                  retry
+                </Button>
+              </div>
+            ) : rows === null ? (
+              <div className="dir-ui-side-skel" aria-hidden>
+                {[0, 1, 2, 3].map((i) => (
+                  <div key={i} className="dir-ui-skel-row">
+                    <span className="bar w60" />
+                    <span className="bar w90" />
+                    <span className="bar w40" />
+                  </div>
+                ))}
+              </div>
+            ) : visible.length === 0 ? (
+              <div className="dir-ui-side-empty">
+                {needle ? (
+                  <>
+                    <p>
+                      No {adapter.noun}s match “{search.trim()}”.
+                    </p>
+                    <Button variant="ghost" size="sm" onClick={() => setSearch('')}>
+                      clear filter
+                    </Button>
+                  </>
+                ) : (
+                  <p>No {adapter.noun}s yet.</p>
+                )}
+              </div>
+            ) : (
+              <ul className="dir-ui-nav-list">
+                {visible.map((r) => {
+                  const isTitled = r.title !== '' && r.title !== r.key
+                  return (
+                    <li key={r.key}>
+                      <button
+                        type="button"
+                        className={`dir-ui-nav-row${r.key === selected ? ' active' : ''}`}
+                        aria-current={r.key === selected ? 'true' : undefined}
+                        onClick={() => open(r.key)}
+                      >
+                        <span className={`name${isTitled ? '' : ' mono'}`}>{isTitled ? r.title : r.key}</span>
+                        {isTitled ? <span className="id">{r.key}</span> : null}
+                        {r.description ? <span className="desc">{r.description}</span> : null}
+                        <span className="fine">{r.fine}</span>
+                      </button>
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
+          </div>
+        </aside>
+      ) : null}
+
+      {showDoc ? (
+        <section className="dir-ui-doc" onKeyDown={onWorkspaceKeyDown} aria-label={`${adapter.noun} workspace`}>
+          {selected === null ? (
+            <div className="dir-ui-hero">
+              <MarkdownFileIcon className="dir-ui-hero-icon" />
+              <h2 className="dir-ui-hero-title">{adapter.emptyTitle}</h2>
+              <p className="dir-ui-hero-body">{adapter.emptyBody}</p>
+              <p className="dir-ui-hero-hint">
+                <kbd>/</kbd> filters the list · <kbd>⌘S</kbd> saves
+              </p>
+            </div>
+          ) : (
+            <>
+              <header className="dir-ui-doc-head">
+                {narrow ? <BackButton onClick={goBack} label={`back to ${adapter.noun} list`} /> : null}
+                <div className="dir-ui-doc-identity">
+                  <span className="dir-ui-doc-name" title={docKey ?? ''}>
+                    <span className="txt">{docName}</span>
+                    {dirty ? <span className="dir-ui-dirty-dot" title="unsaved changes" aria-hidden /> : null}
+                  </span>
+                  {!narrow ? (
+                    <span className="dir-ui-doc-crumb">{[adapter.crumbRoot, ...docSegments].join(' / ')}</span>
+                  ) : null}
+                </div>
+                {/* biome-ignore lint/a11y/useSemanticElements: segmented control of buttons; fieldset chrome (min-content sizing) breaks the header row */}
+                <div className="dir-ui-seg" role="group" aria-label="editor mode">
+                  {modeOptions.map((m) => (
+                    <button
+                      key={m}
+                      type="button"
+                      className={`dir-ui-seg-btn${effMode === m ? ' active' : ''}`}
+                      aria-pressed={effMode === m}
+                      onClick={() => setMode(m)}
+                    >
+                      {m}
+                    </button>
+                  ))}
+                </div>
+                <div className="dir-ui-save-area">
+                  <span className="dir-ui-save-note" aria-live="polite">
+                    {saveStatus}
+                  </span>
+                  {dirty && !saving ? (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setDraft(loaded?.content ?? '')
+                        setSaveError(null)
+                      }}
+                    >
+                      revert
+                    </Button>
+                  ) : null}
+                  <Button variant="primary" size="sm" disabled={!dirty || saving} onClick={save}>
+                    {saving ? 'saving…' : 'save'}
+                  </Button>
+                </div>
+              </header>
+
+              {staleOnDisk ? (
+                <div className="dir-ui-banner warn" role="status">
+                  <span>This {adapter.noun} changed on disk while you were editing.</span>
+                  <button
+                    type="button"
+                    className="dir-ui-linkish"
+                    onClick={() => docKey && open(docKey, { reload: true })}
+                  >
+                    reload (discards your draft)
+                  </button>
                 </div>
               ) : null}
-              {mode !== 'edit' ? (
-                <div className="dir-ui-pane">
-                  <MarkdownPreview
-                    markdown={stripFrontmatter(draft)}
-                    className="dir-ui-preview"
-                  />
+
+              {saveError ? (
+                <div className="dir-ui-banner alert" role="alert">
+                  <span>
+                    Save failed.
+                    <span className="detail">{saveError}</span>
+                  </span>
+                  <button type="button" className="dir-ui-linkish" onClick={save}>
+                    retry
+                  </button>
+                  <button type="button" className="dir-ui-linkish quiet" onClick={() => setSaveError(null)}>
+                    dismiss
+                  </button>
                 </div>
               ) : null}
-            </div>
-            {saveError ? <div className="dir-ui-error">{saveError}</div> : null}
-          </>
-        )}
-      </div>
+
+              {loadError ? (
+                <div className="dir-ui-error-panel grow">
+                  <p>
+                    {docKey} could not be loaded.
+                    <span className="detail">{loadError}</span>
+                  </p>
+                  <Button variant="ghost" size="sm" onClick={() => docKey && open(docKey, { reload: true })}>
+                    retry
+                  </Button>
+                </div>
+              ) : loaded === null ? (
+                <div className="dir-ui-doc-loading" aria-hidden>
+                  <span className="bar w40" />
+                  <span className="bar w90" />
+                  <span className="bar w75" />
+                  <span className="bar w85" />
+                  <span className="bar w30" />
+                </div>
+              ) : (
+                <>
+                  <div className={`dir-ui-doc-body mode-${effMode}${dragging ? ' dragging' : ''}`} ref={bodyRef}>
+                    <div className="dir-ui-pane editor" style={effMode === 'split' ? { flexGrow: split } : undefined}>
+                      <CodeEditor
+                        value={draft}
+                        onChange={setDraft}
+                        language="markdown"
+                        className="dir-ui-code"
+                        aria-label={`${adapter.noun} markdown source`}
+                        placeholder="# markdown…"
+                      />
+                    </div>
+                    {effMode === 'split' ? (
+                      // biome-ignore lint/a11y/useSemanticElements: drag handle is not an <hr>; semantic separator + tabIndex is enough
+                      <div
+                        className="dir-ui-divider"
+                        role="separator"
+                        aria-orientation="vertical"
+                        aria-label="resize editor and preview"
+                        aria-valuemin={25}
+                        aria-valuemax={75}
+                        aria-valuenow={Math.round(split * 100)}
+                        tabIndex={0}
+                        onPointerDown={onDividerPointerDown}
+                        onPointerMove={onDividerPointerMove}
+                        onPointerUp={endDividerDrag}
+                        onPointerCancel={endDividerDrag}
+                        onDoubleClick={() => {
+                          setSplit(0.5)
+                          persistSplit(0.5)
+                        }}
+                        onKeyDown={onDividerKeyDown}
+                      />
+                    ) : null}
+                    {effMode !== 'edit' ? (
+                      <div
+                        className="dir-ui-pane preview"
+                        style={effMode === 'split' ? { flexGrow: 1 - split } : undefined}
+                      >
+                        <div className="dir-ui-reading">
+                          <MarkdownPreview markdown={stripFrontmatter(draft)} className="dir-ui-preview" />
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                  <footer className="dir-ui-statusbar">
+                    <span className="fact">markdown</span>
+                    <span className="fact">
+                      {draftLines} line{draftLines === 1 ? '' : 's'}
+                    </span>
+                    <span className="fact">{formatKb(draftBytes)}</span>
+                    <span className="spacer" />
+                    <span className="fact">{dirty ? '⌘S saves' : 'all changes saved'}</span>
+                  </footer>
+                </>
+              )}
+            </>
+          )}
+        </section>
       ) : null}
     </div>
   )
 }
 
+function formatKb(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  return `${(bytes / 1024).toFixed(1)} KB`
+}
+
 /** Preview the body the way readers serve it: without the leading YAML
  * frontmatter block (same fence rules as the worker's split_frontmatter). */
 function stripFrontmatter(content: string): string {
diff --git a/iii-directory/ui/src/page/index.tsx b/iii-directory/ui/src/page/index.tsx
index 0a42d9677..9db2834e0 100644
--- a/iii-directory/ui/src/page/index.tsx
+++ b/iii-directory/ui/src/page/index.tsx
@@ -1,17 +1,18 @@
 /**
- * The directory page (#/ext/directory): browse every filesystem-backed
- * skill and prompt, open one in the shared CodeEditor/MarkdownPreview
- * pair, and save through the worker's update functions.
+ * The directory page (#/ext/directory): a full-height application shell —
+ * slim product top bar, a navigation sidebar carrying the skills/prompts
+ * switcher, and a document workspace that opens one entry in the shared
+ * CodeEditor/MarkdownPreview pair, saving through the worker's update
+ * functions.
+ *
+ * Both collections stay MOUNTED (the inactive one is display:none) so an
+ * unsaved draft survives switching between skills and prompts.
  */
 
-import {
-  type Host,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@iii-dev/console-ui'
+import { type Host, PageHeader, type PageRenderProps, PageShell } from '@iii-dev/console-ui'
+import { useState } from 'react'
 import { formatBytes, formatRelativeTime } from '../lib/format'
+import { MarkdownFileIcon } from '../lib/widgets'
 import { type BrowserAdapter, CollectionBrowser } from './browser'
 
 interface SkillRow {
@@ -30,12 +31,13 @@ interface PromptRow {
 
 const skillsAdapter: BrowserAdapter = {
   noun: 'skill',
+  crumbRoot: 'skills',
   onChangeType: 'directory::skills::on-change',
+  emptyTitle: 'Select a skill',
+  emptyBody:
+    'Choose a skill from the sidebar to view and edit its markdown. New skills arrive through downloads (directory::skills::download) or direct edits to the skills folder.',
   async list(host) {
-    const out = await host.iii.trigger<{ skills: SkillRow[] }>(
-      'directory::skills::list',
-      { include_description: true },
-    )
+    const out = await host.iii.trigger<{ skills: SkillRow[] }>('directory::skills::list', { include_description: true })
     return (out.skills ?? []).map((s) => ({
       key: s.id,
       title: s.title,
@@ -44,30 +46,29 @@ const skillsAdapter: BrowserAdapter = {
     }))
   },
   async load(host, id) {
-    const out = await host.iii.trigger<{ body: string; raw?: string | null }>(
-      'directory::skills::get',
-      { id, raw: true },
-    )
+    const out = await host.iii.trigger<{ body: string; raw?: string | null }>('directory::skills::get', {
+      id,
+      raw: true,
+    })
     // `raw` is the exact on-disk file; body (frontmatter-stripped) is the
     // fallback against a not-yet-updated worker.
     return out.raw ?? out.body
   },
   async save(host, id, content) {
-    const out = await host.iii.trigger<{ id: string }>(
-      'directory::skills::update',
-      { id, content },
-    )
+    const out = await host.iii.trigger<{ id: string }>('directory::skills::update', { id, content })
     return out.id ?? id
   },
 }
 
 const promptsAdapter: BrowserAdapter = {
   noun: 'prompt',
+  crumbRoot: 'prompts',
   onChangeType: 'directory::prompts::on-change',
+  emptyTitle: 'Select a prompt',
+  emptyBody:
+    'Choose a prompt from the sidebar to view and edit its markdown. Prompts are filesystem-backed — files added to the prompts folders appear here automatically.',
   async list(host) {
-    const out = await host.iii.trigger<{ prompts: PromptRow[] }>(
-      'directory::prompts::list',
-    )
+    const out = await host.iii.trigger<{ prompts: PromptRow[] }>('directory::prompts::list')
     return (out.prompts ?? []).map((p) => ({
       key: p.name,
       title: '',
@@ -76,44 +77,70 @@ const promptsAdapter: BrowserAdapter = {
     }))
   },
   async load(host, name) {
-    const out = await host.iii.trigger<{ body: string; raw?: string | null }>(
-      'directory::prompts::get',
-      { name, raw: true },
-    )
+    const out = await host.iii.trigger<{ body: string; raw?: string | null }>('directory::prompts::get', {
+      name,
+      raw: true,
+    })
     return out.raw ?? out.body
   },
   async save(host, name, content) {
     // The effective name after the write follows a frontmatter rename.
-    const out = await host.iii.trigger<{ name: string }>(
-      'directory::prompts::update',
-      { name, content },
-    )
+    const out = await host.iii.trigger<{ name: string }>('directory::prompts::update', { name, content })
     return out.name ?? name
   },
 }
 
-export function DirectoryPage({ host }: { host: Host }) {
-  return (
-    <div className="dir-ui-page">
-      <div className="dir-ui-page-head">
-        <span className="dir-ui-page-title">directory</span>
-        <span className="dir-ui-page-sub">
-          filesystem-backed skills &amp; prompts — edit the markdown, save
-          writes through directory::*::update
-        </span>
-      </div>
-      <Tabs defaultValue="skills">
-        <TabsList>
-          <TabsTrigger value="skills">skills</TabsTrigger>
-          <TabsTrigger value="prompts">prompts</TabsTrigger>
-        </TabsList>
-        <TabsContent value="skills">
-          <CollectionBrowser host={host} adapter={skillsAdapter} />
-        </TabsContent>
-        <TabsContent value="prompts">
-          <CollectionBrowser host={host} adapter={promptsAdapter} />
-        </TabsContent>
-      </Tabs>
+type Collection = 'skills' | 'prompts'
+
+const COLLECTIONS: { value: Collection; label: string }[] = [
+  { value: 'skills', label: 'skills' },
+  { value: 'prompts', label: 'prompts' },
+]
+
+export function DirectoryPage({
+  host,
+  panelSide = 'left',
+  tabId = '',
+  onRequestClose,
+}: { host: Host } & Partial<PageRenderProps>) {
+  const [collection, setCollection] = useState<Collection>('skills')
+
+  const switcher = (
+    // biome-ignore lint/a11y/useSemanticElements: segmented control of buttons; fieldset chrome (min-content sizing) breaks the sidebar column
+    <div className="dir-ui-seg block" role="group" aria-label="browse skills or prompts">
+      {COLLECTIONS.map((c) => (
+        <button
+          key={c.value}
+          type="button"
+          className={`dir-ui-seg-btn${collection === c.value ? ' active' : ''}`}
+          aria-pressed={collection === c.value}
+          onClick={() => setCollection(c.value)}
+        >
+          {c.label}
+        </button>
+      ))}
     </div>
   )
+
+  return (
+    <PageShell className="dir-ui-shell">
+      <PageHeader
+        icon={<MarkdownFileIcon />}
+        title="directory"
+        description="filesystem-backed skills & prompts"
+        onClose={onRequestClose}
+      />
+      {COLLECTIONS.map((c) => (
+        <div key={c.value} className="dir-ui-shell-body" hidden={collection !== c.value}>
+          <CollectionBrowser
+            host={host}
+            adapter={c.value === 'skills' ? skillsAdapter : promptsAdapter}
+            nav={switcher}
+            panelSide={panelSide}
+            storageKey={`iii-directory-ui:${tabId || 'page'}:${c.value}`}
+          />
+        </div>
+      ))}
+    </PageShell>
+  )
 }
diff --git a/iii-directory/ui/styles.css b/iii-directory/ui/styles.css
index 761133ff4..3a11a88cd 100644
--- a/iii-directory/ui/styles.css
+++ b/iii-directory/ui/styles.css
@@ -5,6 +5,20 @@
  * around every injected render — page, function-trigger message, and
  * config form alike. Styling uses the console's design tokens, so
  * light/dark theming is free.
+ *
+ * The page follows the console redesign's surface + typography roles:
+ *
+ *   canvas      --color-bg              the shell behind everything
+ *   navigation  --color-sidebar         the entry list
+ *   workspace   --color-panel           the document being edited
+ *   raised      --color-panel-raised    headers, status bar, controls
+ *   states      --color-surface-*       hover / selected washes
+ *   edges       --color-edge            hairline separation
+ *
+ *   sans (--font-sans)  interface text: names, descriptions, banners,
+ *                       empty states, and the rendered preview
+ *   mono (--font-mono)  technical values: ids, paths, metadata, counts,
+ *                       the editor, and the status bar
  */
 
 /* ── card chrome (function-trigger views) ───────────────────────────── */
@@ -70,9 +84,15 @@
   font-weight: 600;
   flex-shrink: 0;
 }
-[data-iii-ui="iii-directory"] .dir-ui-action .sym.tone-accent { color: var(--color-accent); }
-[data-iii-ui="iii-directory"] .dir-ui-action .sym.tone-warn { color: var(--color-warn); }
-[data-iii-ui="iii-directory"] .dir-ui-action .sym.tone-ink { color: var(--color-ink); }
+[data-iii-ui="iii-directory"] .dir-ui-action .sym.tone-accent {
+  color: var(--color-accent);
+}
+[data-iii-ui="iii-directory"] .dir-ui-action .sym.tone-warn {
+  color: var(--color-warn);
+}
+[data-iii-ui="iii-directory"] .dir-ui-action .sym.tone-ink {
+  color: var(--color-ink);
+}
 [data-iii-ui="iii-directory"] .dir-ui-action .body {
   min-width: 0;
   color: var(--color-ink);
@@ -84,7 +104,7 @@
   gap: 2px;
 }
 
-/* ── text rows / lists ──────────────────────────────────────────────── */
+/* ── text rows / lists (function-trigger views) ─────────────────────── */
 
 [data-iii-ui="iii-directory"] .dir-ui-list {
   list-style: none;
@@ -100,7 +120,9 @@
   gap: 2px;
   padding: 8px 12px;
 }
-[data-iii-ui="iii-directory"] .dir-ui-row.tight { padding: 6px 12px; }
+[data-iii-ui="iii-directory"] .dir-ui-row.tight {
+  padding: 6px 12px;
+}
 [data-iii-ui="iii-directory"] .dir-ui-row-head {
   display: flex;
   flex-wrap: wrap;
@@ -113,9 +135,16 @@
   color: var(--color-accent);
   word-break: break-all;
 }
-[data-iii-ui="iii-directory"] .dir-ui-id.lg { font-size: 13px; }
-[data-iii-ui="iii-directory"] .dir-ui-id.sm { font-size: 12px; }
-[data-iii-ui="iii-directory"] .dir-ui-id.grow { flex: 1; min-width: 120px; }
+[data-iii-ui="iii-directory"] .dir-ui-id.lg {
+  font-size: 13px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-id.sm {
+  font-size: 12px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-id.grow {
+  flex: 1;
+  min-width: 120px;
+}
 [data-iii-ui="iii-directory"] .dir-ui-title {
   font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 12px;
@@ -151,7 +180,6 @@
   font-size: 12.5px;
   color: var(--color-ink-ghost);
 }
-[data-iii-ui="iii-directory"] .dir-ui-empty.pad { padding: 32px 16px; }
 [data-iii-ui="iii-directory"] .dir-ui-pulse {
   padding: 12px;
   font-family: var(--font-mono, ui-monospace, monospace);
@@ -160,13 +188,25 @@
   animation: dir-ui-pulse 1.6s ease-in-out infinite;
 }
 @keyframes dir-ui-pulse {
-  0%, 100% { opacity: 1 }
-  50% { opacity: 0.4 }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-iii-ui="iii-directory"] .dir-ui-pulse {
+    animation: none;
+  }
 }
 [data-iii-ui="iii-directory"] .dir-ui-section {
   border-bottom: 1px solid var(--color-rule-2);
 }
-[data-iii-ui="iii-directory"] .dir-ui-section:last-child { border-bottom: 0; }
+[data-iii-ui="iii-directory"] .dir-ui-section:last-child {
+  border-bottom: 0;
+}
 [data-iii-ui="iii-directory"] .dir-ui-section-head {
   padding: 6px 12px;
   background: var(--color-paper-2);
@@ -214,191 +254,764 @@
   color: var(--color-ink-faint);
 }
 
-/* ── the page (#/ext/directory) ─────────────────────────────────────── */
+/* ── the page (#/ext/directory): application shell ────────────────────
+   The root + top bar are the shared page chrome (PageShell/PageHeader
+   from @iii-dev/console-ui); this class only layers the page's
+   typography defaults on top. */
 
-[data-iii-ui="iii-directory"] .dir-ui-page {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 24px;
-  font-family: var(--font-mono, ui-monospace, monospace);
+[data-iii-ui="iii-directory"] .dir-ui-shell {
+  min-height: 360px;
   color: var(--color-ink);
+  font-family: var(--font-sans, system-ui, sans-serif);
 }
-[data-iii-ui="iii-directory"] .dir-ui-page-head {
+[data-iii-ui="iii-directory"] .dir-ui-shell-body {
+  flex: 1;
+  min-height: 0;
   display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-[data-iii-ui="iii-directory"] .dir-ui-page-title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  color: var(--color-ink-faint);
-  font-weight: 600;
 }
-[data-iii-ui="iii-directory"] .dir-ui-page-sub {
-  font-size: 11px;
-  color: var(--color-ink-ghost);
+/* The inactive collection stays mounted (drafts survive switching) but
+   must actually disappear — the flex display above would beat the UA's
+   [hidden] rule. */
+[data-iii-ui="iii-directory"] .dir-ui-shell-body[hidden] {
+  display: none;
 }
+
+/* ── browser: sidebar + workspace ───────────────────────────────────── */
+
 [data-iii-ui="iii-directory"] .dir-ui-browser {
-  display: grid;
-  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
-  gap: 16px;
-  align-items: start;
-  margin-top: 12px;
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
 }
-/* Narrow is CONTAINER width (< 850px, set by the browser's own
-   ResizeObserver), not the viewport: one pane at a time — the JSX
-   renders either the list or the opened entry. */
-[data-iii-ui="iii-directory"] .dir-ui-browser.narrow {
-  grid-template-columns: minmax(0, 1fr);
+/* Right-column pane: mirror so the sidebar hugs the outer edge. */
+[data-iii-ui="iii-directory"] .dir-ui-browser.right {
+  flex-direction: row-reverse;
 }
-[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-editor-body.mode-split {
-  grid-template-columns: minmax(0, 1fr);
+
+/* ── navigation sidebar ─────────────────────────────────────────────── */
+
+[data-iii-ui="iii-directory"] .dir-ui-side {
+  width: 300px;
+  min-width: 260px;
+  max-width: 340px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--color-sidebar);
+  border-right: 1px solid var(--color-edge);
 }
-[data-iii-ui="iii-directory"]
-  .dir-ui-browser.narrow
-  .dir-ui-editor-body.mode-split
-  .dir-ui-pane
-  + .dir-ui-pane {
+[data-iii-ui="iii-directory"] .dir-ui-browser.right .dir-ui-side {
+  border-right: 0;
+  border-left: 1px solid var(--color-edge);
+}
+/* Narrow is CONTAINER width (< 850px, the browser's own ResizeObserver),
+   not the viewport: one pane at a time — the JSX renders either the list
+   or the opened document. */
+[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-side {
+  width: 100%;
+  max-width: none;
+  border-right: 0;
   border-left: 0;
-  border-top: 1px solid var(--color-rule-2);
 }
-[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-editor-body.mode-split .dir-ui-pane {
-  max-height: 40vh;
+
+[data-iii-ui="iii-directory"] .dir-ui-side-top {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 12px 8px;
+  flex-shrink: 0;
 }
-[data-iii-ui="iii-directory"] .dir-ui-back {
-  border: 1px solid var(--color-rule);
+[data-iii-ui="iii-directory"] .dir-ui-count {
+  padding: 0 2px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-ghost);
+  font-variant-numeric: tabular-nums;
+}
+[data-iii-ui="iii-directory"] .dir-ui-side-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 6px 12px;
+}
+
+/* segmented control — one control, mutually exclusive options */
+[data-iii-ui="iii-directory"] .dir-ui-seg {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--color-surface);
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+[data-iii-ui="iii-directory"] .dir-ui-seg.block {
+  display: flex;
+}
+[data-iii-ui="iii-directory"] .dir-ui-seg-btn {
+  appearance: none;
+  border: 0;
   background: transparent;
+  height: 26px;
+  padding: 0 12px;
+  border-radius: 4px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--color-ink-faint);
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
   cursor: pointer;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
 }
-[data-iii-ui="iii-directory"] .dir-ui-back:hover {
+[data-iii-ui="iii-directory"] .dir-ui-seg-btn:hover {
   color: var(--color-ink);
-  border-color: var(--color-ink);
+  background: var(--color-surface-hover);
 }
-[data-iii-ui="iii-directory"] .dir-ui-side {
-  border: 1px solid var(--color-rule);
-  background: var(--color-bg);
-  max-height: 72vh;
-  overflow-y: auto;
+[data-iii-ui="iii-directory"] .dir-ui-seg-btn.active {
+  color: var(--color-ink);
+  background: var(--color-panel-raised);
+  box-shadow: 0 0 0 1px var(--color-edge);
 }
-[data-iii-ui="iii-directory"] .dir-ui-side-search {
-  padding: 8px;
-  border-bottom: 1px solid var(--color-rule-2);
-  position: sticky;
-  top: 0;
-  background: var(--color-bg);
-  z-index: 1;
+[data-iii-ui="iii-directory"] .dir-ui-seg-btn:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
 }
-[data-iii-ui="iii-directory"] .dir-ui-side-list {
+[data-iii-ui="iii-directory"] .dir-ui-seg.block .dir-ui-seg-btn {
+  flex: 1;
+}
+
+/* search */
+[data-iii-ui="iii-directory"] .dir-ui-search {
+  position: relative;
+}
+[data-iii-ui="iii-directory"] .dir-ui-search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: var(--color-ink-ghost);
+  pointer-events: none;
+}
+[data-iii-ui="iii-directory"] .dir-ui-search-input {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-ink-ghost);
+  cursor: pointer;
+}
+[data-iii-ui="iii-directory"] .dir-ui-search-clear:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="iii-directory"] .dir-ui-x-icon {
+  width: 13px;
+  height: 13px;
+}
+
+/* entry rows — the whole row is the button */
+[data-iii-ui="iii-directory"] .dir-ui-nav-list {
   list-style: none;
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
 }
-[data-iii-ui="iii-directory"] .dir-ui-side-row {
+[data-iii-ui="iii-directory"] .dir-ui-nav-row {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 2px;
   width: 100%;
-  padding: 8px 10px;
+  padding: 8px 10px 8px 14px;
   text-align: left;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid var(--color-rule-2);
-  border-left: 2px solid transparent;
+  border-radius: 6px;
   color: var(--color-ink);
   cursor: pointer;
   font-family: inherit;
 }
-[data-iii-ui="iii-directory"] .dir-ui-side-row:hover {
-  background: var(--color-paper-2);
+[data-iii-ui="iii-directory"] .dir-ui-nav-row:hover {
+  background: var(--color-surface-hover);
 }
-[data-iii-ui="iii-directory"] .dir-ui-side-row.active {
-  background: var(--color-paper-2);
-  border-left-color: var(--color-accent);
+[data-iii-ui="iii-directory"] .dir-ui-nav-row:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
 }
-[data-iii-ui="iii-directory"] .dir-ui-editor {
-  border: 1px solid var(--color-rule);
-  background: var(--color-bg);
+/* Selection = wash + accent indicator + stronger title, not color alone. */
+[data-iii-ui="iii-directory"] .dir-ui-nav-row.active {
+  background: var(--color-surface-selected);
+}
+[data-iii-ui="iii-directory"] .dir-ui-nav-row.active::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--color-accent);
+}
+[data-iii-ui="iii-directory"] .dir-ui-nav-row .name {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--color-ink);
+  word-break: break-word;
+}
+[data-iii-ui="iii-directory"] .dir-ui-nav-row.active .name {
+  font-weight: 600;
+}
+[data-iii-ui="iii-directory"] .dir-ui-nav-row .name.mono {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  word-break: break-all;
+}
+[data-iii-ui="iii-directory"] .dir-ui-nav-row .id {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-faint);
+  word-break: break-all;
+}
+[data-iii-ui="iii-directory"] .dir-ui-nav-row .desc {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--color-ink-faint);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+[data-iii-ui="iii-directory"] .dir-ui-nav-row .fine {
+  margin-top: 2px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  color: var(--color-ink-ghost);
+  font-variant-numeric: tabular-nums;
+}
+/* Touch-sized targets in the drill-in flow. */
+[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-nav-row {
+  min-height: 44px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+/* sidebar loading / empty / error */
+[data-iii-ui="iii-directory"] .dir-ui-side-skel {
   display: flex;
   flex-direction: column;
-  min-height: 320px;
+  gap: 18px;
+  padding: 12px 10px;
 }
-[data-iii-ui="iii-directory"] .dir-ui-editor-head {
+[data-iii-ui="iii-directory"] .dir-ui-skel-row {
   display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-skel-row .bar,
+[data-iii-ui="iii-directory"] .dir-ui-doc-loading .bar {
+  display: block;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--color-surface);
+  animation: dir-ui-pulse 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-iii-ui="iii-directory"] .dir-ui-skel-row .bar,
+  [data-iii-ui="iii-directory"] .dir-ui-doc-loading .bar {
+    animation: none;
+  }
+}
+[data-iii-ui="iii-directory"] .bar.w30 {
+  width: 30%;
+}
+[data-iii-ui="iii-directory"] .bar.w40 {
+  width: 40%;
+}
+[data-iii-ui="iii-directory"] .bar.w60 {
+  width: 60%;
+}
+[data-iii-ui="iii-directory"] .bar.w75 {
+  width: 75%;
+}
+[data-iii-ui="iii-directory"] .bar.w85 {
+  width: 85%;
+}
+[data-iii-ui="iii-directory"] .bar.w90 {
+  width: 90%;
+}
+[data-iii-ui="iii-directory"] .dir-ui-side-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 24px 12px;
+  font-size: 12.5px;
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="iii-directory"] .dir-ui-side-empty p {
+  margin: 0;
+}
+[data-iii-ui="iii-directory"] .dir-ui-error-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 8px;
+  padding: 12px;
+  border: 1px solid color-mix(in oklab, var(--color-alert) 35%, transparent);
+  border-radius: 6px;
+  background: var(--color-alert-muted);
+  font-size: 12.5px;
+  color: var(--color-ink);
+}
+[data-iii-ui="iii-directory"] .dir-ui-error-panel p {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  word-break: break-word;
+}
+[data-iii-ui="iii-directory"] .dir-ui-error-panel .detail {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11.5px;
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="iii-directory"] .dir-ui-error-panel.grow {
+  align-self: flex-start;
+  margin: 16px;
+  max-width: 560px;
+}
+
+/* ── document workspace ─────────────────────────────────────────────── */
+
+[data-iii-ui="iii-directory"] .dir-ui-doc {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-panel);
+}
+
+/* workspace header — stable across loading/error/loaded states */
+[data-iii-ui="iii-directory"] .dir-ui-doc-head {
+  display: flex;
+  align-items: center;
   flex-wrap: wrap;
+  gap: 8px 12px;
+  min-height: 52px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  background: var(--color-panel-raised);
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="iii-directory"] .dir-ui-doc-identity {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 140px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-doc-name {
+  display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--color-rule-2);
-  background: var(--color-paper-2);
+  min-width: 0;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-ink);
 }
-[data-iii-ui="iii-directory"] .dir-ui-modes {
-  display: inline-flex;
-  gap: 2px;
+/* The text needs its own box — ellipsis doesn't reach into a flex row. */
+[data-iii-ui="iii-directory"] .dir-ui-doc-name .txt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-[data-iii-ui="iii-directory"] .dir-ui-mode-active {
-  color: var(--color-accent);
-  box-shadow: inset 0 -2px 0 var(--color-accent);
+[data-iii-ui="iii-directory"] .dir-ui-doc-crumb {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  color: var(--color-ink-ghost);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-iii-ui="iii-directory"] .dir-ui-dirty-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  flex-shrink: 0;
+}
+[data-iii-ui="iii-directory"] .dir-ui-save-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
 }
 [data-iii-ui="iii-directory"] .dir-ui-save-note {
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11px;
   color: var(--color-ink-ghost);
+  white-space: nowrap;
 }
-[data-iii-ui="iii-directory"] .dir-ui-stale-note {
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--color-rule-2);
-  background: var(--color-paper-2);
+
+/* status banners sit directly under the header, near what they describe */
+[data-iii-ui="iii-directory"] .dir-ui-banner {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  font-size: 12.5px;
+  color: var(--color-ink);
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="iii-directory"] .dir-ui-banner.warn {
+  background: var(--color-warn-muted);
+}
+[data-iii-ui="iii-directory"] .dir-ui-banner.alert {
+  background: var(--color-alert-muted);
+}
+[data-iii-ui="iii-directory"] .dir-ui-banner .detail {
+  display: block;
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 11.5px;
-  color: var(--color-warn);
+  color: var(--color-ink-faint);
+  word-break: break-word;
 }
 [data-iii-ui="iii-directory"] .dir-ui-linkish {
   border: 0;
   background: transparent;
   padding: 0;
   font: inherit;
+  font-size: 12.5px;
   color: var(--color-accent);
   text-decoration: underline;
+  text-underline-offset: 2px;
   cursor: pointer;
 }
-[data-iii-ui="iii-directory"] .dir-ui-editor-body {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
+[data-iii-ui="iii-directory"] .dir-ui-linkish:hover {
+  color: var(--color-accent-hover);
+}
+[data-iii-ui="iii-directory"] .dir-ui-linkish.quiet {
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="iii-directory"] .dir-ui-linkish:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* back affordance (drill-in flow) */
+[data-iii-ui="iii-directory"] .dir-ui-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-ink-faint);
+  cursor: pointer;
+}
+[data-iii-ui="iii-directory"] .dir-ui-back:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="iii-directory"] .dir-ui-back:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-back-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* editor / split / preview body */
+[data-iii-ui="iii-directory"] .dir-ui-doc-body {
   flex: 1;
   min-height: 0;
+  display: flex;
+  align-items: stretch;
 }
-[data-iii-ui="iii-directory"] .dir-ui-editor-body.mode-split {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-}
-[data-iii-ui="iii-directory"] .dir-ui-editor-body.mode-split .dir-ui-pane + .dir-ui-pane {
-  border-left: 1px solid var(--color-rule-2);
+[data-iii-ui="iii-directory"] .dir-ui-doc-body.dragging {
+  cursor: col-resize;
+  user-select: none;
 }
 [data-iii-ui="iii-directory"] .dir-ui-pane {
+  flex-grow: 1;
+  flex-basis: 0;
   min-width: 0;
-  max-height: 64vh;
   overflow: auto;
 }
+[data-iii-ui="iii-directory"] .dir-ui-doc-body.dragging .dir-ui-pane {
+  pointer-events: none;
+}
+[data-iii-ui="iii-directory"] .dir-ui-doc-body.mode-split .dir-ui-pane {
+  min-width: 240px;
+}
+/* Preview mode keeps the editor MOUNTED (Monaco cursor/scroll survive) —
+   it just doesn't render. */
+[data-iii-ui="iii-directory"]
+  .dir-ui-doc-body.mode-preview
+  .dir-ui-pane.editor {
+  display: none;
+}
 [data-iii-ui="iii-directory"] .dir-ui-code {
   min-height: 100%;
 }
-[data-iii-ui="iii-directory"] .dir-ui-preview {
+
+[data-iii-ui="iii-directory"] .dir-ui-divider {
+  flex: 0 0 5px;
+  cursor: col-resize;
+  background: transparent;
+  border-left: 1px solid var(--color-edge);
+  transition: background-color 120ms ease;
+  touch-action: none;
+}
+[data-iii-ui="iii-directory"] .dir-ui-divider:hover,
+[data-iii-ui="iii-directory"] .dir-ui-doc-body.dragging .dir-ui-divider {
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="iii-directory"] .dir-ui-divider:focus-visible {
+  outline: 2px solid var(--color-rule-focus);
+  outline-offset: -2px;
+}
+
+/* document loading lines */
+[data-iii-ui="iii-directory"] .dir-ui-doc-loading {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 28px 32px;
+}
+
+/* status bar */
+[data-iii-ui="iii-directory"] .dir-ui-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 26px;
+  padding: 4px 16px;
+  flex-shrink: 0;
+  background: var(--color-panel-raised);
+  border-top: 1px solid var(--color-edge);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  color: var(--color-ink-ghost);
+  font-variant-numeric: tabular-nums;
+}
+[data-iii-ui="iii-directory"] .dir-ui-statusbar .spacer {
+  flex: 1;
+}
+
+/* workspace empty state — teaches the next action, not the absence */
+[data-iii-ui="iii-directory"] .dir-ui-hero {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 48px 24px;
+  text-align: center;
+}
+[data-iii-ui="iii-directory"] .dir-ui-hero-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--color-ink-ghost);
+  margin-bottom: 8px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-hero-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+[data-iii-ui="iii-directory"] .dir-ui-hero-body {
+  margin: 0;
+  max-width: 460px;
   font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-ink-faint);
 }
-[data-iii-ui="iii-directory"] .dir-ui-error {
-  padding: 8px 12px;
-  border-top: 1px solid var(--color-rule-2);
+[data-iii-ui="iii-directory"] .dir-ui-hero-hint {
+  margin: 8px 0 0;
   font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 12px;
-  color: var(--color-alert);
-  word-break: break-word;
+  font-size: 11px;
+  color: var(--color-ink-ghost);
+}
+[data-iii-ui="iii-directory"] .dir-ui-hero-hint kbd {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-edge);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+/* ── preview: document typography, not another code panel ───────────── */
+
+/* Undo MarkdownPreview's card chrome — the reading column owns spacing. */
+[data-iii-ui="iii-directory"] .dir-ui-pane.preview {
+  background: var(--color-panel);
+}
+[data-iii-ui="iii-directory"] .dir-ui-reading {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 40px 48px 72px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-doc-body.mode-split .dir-ui-reading {
+  padding: 28px 32px 56px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-reading {
+  padding: 24px 20px 48px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview {
+  background: transparent;
+  padding: 0;
+}
+
+/* Body copy reads in sans; code stays mono (overrides the console
+   Markdown renderer's mono-everywhere chat styling). */
+[data-iii-ui="iii-directory"] .dir-ui-preview p,
+[data-iii-ui="iii-directory"] .dir-ui-preview ul,
+[data-iii-ui="iii-directory"] .dir-ui-preview ol,
+[data-iii-ui="iii-directory"] .dir-ui-preview blockquote,
+[data-iii-ui="iii-directory"] .dir-ui-preview table {
+  font-family: var(--font-sans, system-ui, sans-serif);
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview p,
+[data-iii-ui="iii-directory"] .dir-ui-preview ul,
+[data-iii-ui="iii-directory"] .dir-ui-preview ol {
+  font-size: 14px;
+  line-height: 1.65;
+}
+[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-preview p,
+[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-preview ul,
+[data-iii-ui="iii-directory"] .dir-ui-browser.narrow .dir-ui-preview ol {
+  font-size: 15px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview h1,
+[data-iii-ui="iii-directory"] .dir-ui-preview h2,
+[data-iii-ui="iii-directory"] .dir-ui-preview h3,
+[data-iii-ui="iii-directory"] .dir-ui-preview h4,
+[data-iii-ui="iii-directory"] .dir-ui-preview h5,
+[data-iii-ui="iii-directory"] .dir-ui-preview h6 {
+  font-family: var(--font-sans, system-ui, sans-serif);
+  color: var(--color-ink);
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview h1 {
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.25;
+  margin: 36px 0 12px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview h2 {
+  font-size: 19px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  margin: 32px 0 10px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview h3 {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 24px 0 8px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview h4,
+[data-iii-ui="iii-directory"] .dir-ui-preview h5,
+[data-iii-ui="iii-directory"] .dir-ui-preview h6 {
+  font-size: 13.5px;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--color-ink);
+  margin: 20px 0 8px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview h1:first-child,
+[data-iii-ui="iii-directory"] .dir-ui-preview h2:first-child,
+[data-iii-ui="iii-directory"] .dir-ui-preview h3:first-child {
+  margin-top: 0;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview a {
+  color: var(--color-accent);
+  text-decoration-color: color-mix(
+    in oklab,
+    var(--color-accent) 40%,
+    transparent
+  );
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview a:hover {
+  text-decoration-color: var(--color-accent);
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview blockquote {
+  border-left: 2px solid var(--color-edge);
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview hr {
+  border-top: 1px solid var(--color-edge);
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  background: var(--color-surface);
+  border: 1px solid var(--color-edge);
+  border-radius: 4px;
+  font-size: 0.85em;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview pre {
+  background: var(--color-surface);
+  border: 1px solid var(--color-edge);
+  border-radius: 6px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview pre code {
+  background: transparent;
+  border: 0;
+  font-size: 12.5px;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview th {
+  border-bottom: 1px solid var(--color-edge);
+  background: var(--color-surface);
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview td {
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview img {
+  max-width: 100%;
+  height: auto;
+}
+[data-iii-ui="iii-directory"] .dir-ui-preview input[type="checkbox"] {
+  margin-right: 6px;
+  accent-color: var(--color-accent);
 }
 
 /* ── the configuration form ─────────────────────────────────────────── */
diff --git a/packages/console-ui/component-names.mjs b/packages/console-ui/component-names.mjs
index 3a653b1d4..6e4308189 100644
--- a/packages/console-ui/component-names.mjs
+++ b/packages/console-ui/component-names.mjs
@@ -29,10 +29,16 @@ export const componentNames = [
   'DropdownMenuTrigger',
   'EmptyState',
   'ErrorBoundary',
+  'FileDiff',
   'Input',
   'JsonHighlight',
   'Markdown',
   'MarkdownPreview',
+  'PageBody',
+  'PageHeader',
+  'PageMain',
+  'PageShell',
+  'PageSidebar',
   'Select',
   'Skeleton',
   'StatusDot',
diff --git a/packages/console-ui/index.d.ts b/packages/console-ui/index.d.ts
index 0ae9c34cd..5adfb92fd 100644
--- a/packages/console-ui/index.d.ts
+++ b/packages/console-ui/index.d.ts
@@ -50,13 +50,39 @@ export interface ExtensionIii {
 
 /* ── slot contracts ─────────────────────────────────────────────────── */
 
+/**
+ * Where the workspace pane hosting the page sits. `'right'` only for the
+ * rightmost column of a multi-column tab — a single-column tab is `'left'`,
+ * so pages can treat `'left'` as the default orientation.
+ */
+export type PanelSide = 'left' | 'right'
+
+/** Props the host passes to every registered page render component. */
+export interface PageRenderProps {
+  panelSide: PanelSide
+  /**
+   * Stable id of the workspace tab whose pane hosts this render — the key
+   * for per-tab UI state (workspace tabs persist across reloads). Empty
+   * string when the page renders outside a workspace tab.
+   */
+  tabId: string
+  /**
+   * Close the pane hosting this page (a split drops the column; a
+   * single-column tab detaches back to the attach affordance). Pass it to
+   * `PageHeader`'s `onClose` — every page header carries the standard ✕.
+   * Absent when the page renders outside a closable pane.
+   */
+  onRequestClose?: () => void
+}
+
 export interface PageRegistration {
   /** kebab-case, unique per tab; convention `<worker>-<name>`. Routes at `#/ext/<id>`. */
   id: string
   /** Nav label. */
   title: string
-  /** The page body (right pane). */
-  render: React.ComponentType
+  /** The page body (right pane). Receives `PageRenderProps` — a plain
+      `() => <Page />` render stays valid and simply ignores them. */
+  render: React.ComponentType<PageRenderProps>
 }
 
 /**
@@ -296,6 +322,27 @@ export interface ErrorBoundaryProps {
 }
 export declare const ErrorBoundary: React.ComponentType<ErrorBoundaryProps>
 
+/** One side of a `FileDiff` — a whole file's text, not a patch. */
+export interface FileDiffSide {
+  /** Display name; also infers the syntax-highlight language. */
+  name: string
+  contents: string
+}
+export interface FileDiffProps {
+  /** Pass empty `contents` for a created (old) / deleted (new) file. */
+  oldFile: FileDiffSide
+  newFile: FileDiffSide
+  diffStyle?: 'unified' | 'split'
+  /** Long lines wrap by default; `'scroll'` preserves strict columns. */
+  overflow?: 'scroll' | 'wrap'
+  className?: string
+}
+/** The console's one file-diff surface — the diff is computed from the two
+    full file bodies and rendered by the console's bundled diff engine,
+    following the active theme. Like `CodeEditor`, never bundle a diff
+    renderer into a worker asset; import this instead. */
+export declare const FileDiff: React.ComponentType<FileDiffProps>
+
 /** Controlled string input (`onChange` receives the value, not the event). */
 export interface InputProps
   extends Omit<
@@ -311,6 +358,65 @@ export declare const Input: React.ComponentType<
   InputProps & React.RefAttributes<HTMLInputElement>
 >
 
+/* ── page chrome: THE layout design system for injected pages ─────────
+   Every worker page composes the same five pieces so panes stay visually
+   identical across workers (and console-native screens):
+
+     <PageShell>
+       <PageHeader icon? title description? actions? onClose={onRequestClose} />
+       <PageBody side={panelSide}>
+         <PageSidebar>…navigation…</PageSidebar>
+         <PageMain>…workspace…</PageMain>
+       </PageBody>
+     </PageShell>
+
+   PageHeader renders the standard ✕ when `onClose` is present — wire it
+   to `PageRenderProps.onRequestClose`. */
+
+export interface PageShellProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+/** The pane's root column — fills the pane, `--color-panel` background. */
+export declare const PageShell: React.ComponentType<PageShellProps>
+
+export interface PageHeaderProps {
+  /** Identity glyph, rendered at 16px in faint ink (any svg fits). */
+  icon?: React.ReactNode
+  /** The page's name — console chrome vocabulary: mono, lowercase. */
+  title?: React.ReactNode
+  /** One short descriptor; truncates before anything else gives. */
+  description?: React.ReactNode
+  /** Free-form middle content (fills the flexible gap before actions). */
+  children?: React.ReactNode
+  /** Right-side controls, rendered before the close affordance. */
+  actions?: React.ReactNode
+  /** Close the hosting pane — renders the standard ✕ when present.
+      Wire to `PageRenderProps.onRequestClose`. */
+  onClose?: () => void
+  className?: string
+}
+/** The standard pane top bar: slightly raised, hairline bottom edge. */
+export declare const PageHeader: React.ComponentType<PageHeaderProps>
+
+export interface PageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The pane's side of the tab (`PageRenderProps.panelSide`) — `right`
+      mirrors the row so the sidebar hugs the pane's outer edge. */
+  side?: 'left' | 'right'
+}
+/** The row under the header; separates children with a hairline gap. */
+export declare const PageBody: React.ComponentType<PageBodyProps>
+
+export interface PageSidebarProps extends React.HTMLAttributes<HTMLElement> {
+  /** Column width in px (fixed — navigation stays put while main flexes). */
+  width?: number
+}
+/** The navigation column: slightly gray, fixed width, own scroll. */
+export declare const PageSidebar: React.ComponentType<PageSidebarProps>
+
+/** The primary workspace column: `--color-panel`, takes what's left. */
+export declare const PageMain: React.ComponentType<
+  React.HTMLAttributes<HTMLElement>
+>
+
 export interface SelectOption<T extends string = string> {
   value: T
   label: string
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a8e546ff..ef806e312 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -400,6 +400,34 @@ importers:
         specifier: ^4.1.6
         version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.5)(@vitest/coverage-v8@4.1.10)(vite@8.1.5(@types/node@25.9.5)(jiti@2.7.0))
 
+  shell/ui:
+    dependencies:
+      '@iii-dev/console-ui':
+        specifier: workspace:*
+        version: link:../../packages/console-ui
+      '@pierre/trees':
+        specifier: 1.0.0-beta.6
+        version: 1.0.0-beta.6(@pierre/theme@1.1.0)(@shikijs/themes@4.3.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(shiki@4.3.1)
+      lucide-react:
+        specifier: ^1.16.0
+        version: 1.25.0(react@19.2.7)
+      zod:
+        specifier: ^4.4.3
+        version: 4.4.3
+    devDependencies:
+      '@types/react':
+        specifier: ^19.2.14
+        version: 19.2.17
+      esbuild:
+        specifier: ^0.25.0
+        version: 0.25.12
+      typescript:
+        specifier: ^5.9.2
+        version: 5.9.3
+      vitest:
+        specifier: ^4.1.6
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.5)(@vitest/coverage-v8@4.1.10)(vite@8.1.5(@types/node@25.9.5)(jiti@2.7.0))
+
   state/ui:
     dependencies:
       '@iii-dev/console-ui':
@@ -1248,6 +1276,32 @@ packages:
       shiki:
         optional: true
 
+  '@pierre/theming@1.0.0':
+    resolution: {integrity: sha512-WsdrnhKfjeyXGDikZmN9pkpeZ5S/cl6EE72feiSc0tlynT1tMYqXqouhuv/foK+PY9OEnebOAVRQn3+rAstR8g==}
+    peerDependencies:
+      '@pierre/theme': ^1.1.0
+      '@shikijs/themes': ^3.0.0 || ^4.0.0
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+      shiki: ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@pierre/theme':
+        optional: true
+      '@shikijs/themes':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      shiki:
+        optional: true
+
+  '@pierre/trees@1.0.0-beta.6':
+    resolution: {integrity: sha512-zxeuSFM9TveM7b5XofweJALCtm/tGYV9HZzdbf7Uf+kBxIlUyz24/EHaGRjB0dsmmfDQl2ETz7AWwJ15lhSnpw==}
+    peerDependencies:
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+
   '@playwright/test@1.61.1':
     resolution: {integrity: sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==}
     engines: {node: '>=18'}
@@ -2941,6 +2995,14 @@ packages:
     resolution: {integrity: sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==}
     engines: {node: ^10 || ^12 || >=14}
 
+  preact-render-to-string@6.6.5:
+    resolution: {integrity: sha512-O6MHzYNIKYaiSX3bOw0gGZfEbOmlIDtDfWwN1JJdc/T3ihzRT6tGGSEWE088dWrEDGa1u7101q+6fzQnO9XCPA==}
+    peerDependencies:
+      preact: '>=10 || >= 11.0.0-0'
+
+  preact@11.0.0-beta.0:
+    resolution: {integrity: sha512-IcODoASASYwJ9kxz7+MJeiJhvLriwSb4y4mHIyxdgaRZp6kPUud7xytrk/6GZw8U3y6EFJaRb5wi9SrEK+8+lg==}
+
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -4162,6 +4224,26 @@ snapshots:
       react-dom: 19.2.7(react@19.2.7)
       shiki: 4.3.1
 
+  '@pierre/theming@1.0.0(@pierre/theme@1.1.0)(@shikijs/themes@4.3.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(shiki@4.3.1)':
+    optionalDependencies:
+      '@pierre/theme': 1.1.0
+      '@shikijs/themes': 4.3.1
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      shiki: 4.3.1
+
+  '@pierre/trees@1.0.0-beta.6(@pierre/theme@1.1.0)(@shikijs/themes@4.3.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(shiki@4.3.1)':
+    dependencies:
+      '@pierre/theming': 1.0.0(@pierre/theme@1.1.0)(@shikijs/themes@4.3.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(shiki@4.3.1)
+      preact: 11.0.0-beta.0
+      preact-render-to-string: 6.6.5(preact@11.0.0-beta.0)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    transitivePeerDependencies:
+      - '@pierre/theme'
+      - '@shikijs/themes'
+      - shiki
+
   '@playwright/test@1.61.1':
     dependencies:
       playwright: 1.61.1
@@ -5979,6 +6061,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  preact-render-to-string@6.6.5(preact@11.0.0-beta.0):
+    dependencies:
+      preact: 11.0.0-beta.0
+
+  preact@11.0.0-beta.0: {}
+
   pretty-format@27.5.1:
     dependencies:
       ansi-regex: 5.0.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c83110fed..41164c993 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -20,6 +20,7 @@ packages:
   - pdf/ui
   - state/ui
   - iii-directory/ui
+  - shell/ui
   - worktree/ui
   - github/ui
   - llm-router/ui
@@ -31,3 +32,6 @@ packages:
 allowBuilds:
   esbuild: true
   protobufjs: false
+
+minimumReleaseAgeExclude:
+  - '@pierre/trees@1.0.0-beta.6'
diff --git a/shell/ARCHITECTURE.md b/shell/ARCHITECTURE.md
index d8cad105a..e10f019b8 100644
--- a/shell/ARCHITECTURE.md
+++ b/shell/ARCHITECTURE.md
@@ -25,6 +25,23 @@ iii -c ./config.yaml
 
 `iii worker add shell` does not currently pull `iii-sandbox` along — run `iii worker add iii-sandbox` separately before using `shell::exec { target: sandbox }` or any `shell::fs::*` sandbox-target path. Plain host-targeted `shell::exec` works without it.
 
+## Injected console UI (`ui/`, `src/ui.rs`)
+
+The worker ships UI into any running console (SOP:
+`workers/docs/sops/injectable-console-ui.md`): the shell explorer page
+(`#/ext/shell` — files/git/search sidebar beside the console's shared Monaco
+editor and `FileDiff`) and the `shell::*` function-trigger renderers (moved
+out of the console SPA; the console's `first-party/shell` family is gone).
+The explorer acts through the worker's own functions: `coder::tree/read-file/
+create-file/search` and `shell::exec` (git, argv form, `cwd`-scoped).
+
+Building the worker therefore needs Node + pnpm on PATH: `build.rs` runs
+`pnpm install && pnpm build` in `ui/` when `ui/dist/` is missing or stale and
+`include_str!`s the outputs (`SKIP_UI_BUILD=1` uses existing `ui/dist/`
+as-is). Dev loop: `cd ui && pnpm watch` plus `III_SHELL_UI_WATCH=1` on the
+worker — open console tabs hot-swap the assets. UI parser/format tests:
+`cd ui && pnpm test`.
+
 ## CLI flags
 
 | flag | default | purpose |
diff --git a/shell/Cargo.lock b/shell/Cargo.lock
index 0cc487133..3f760bf09 100644
--- a/shell/Cargo.lock
+++ b/shell/Cargo.lock
@@ -891,6 +891,18 @@ dependencies = [
  "winapi-util",
 ]
 
+[[package]]
+name = "iii-console-ui"
+version = "0.1.0"
+dependencies = [
+ "iii-sdk",
+ "schemars",
+ "serde",
+ "serde_json",
+ "tokio",
+ "tracing",
+]
+
 [[package]]
 name = "iii-helpers"
 version = "0.21.6"
@@ -1783,6 +1795,7 @@ dependencies = [
  "clap",
  "cucumber",
  "globset",
+ "iii-console-ui",
  "iii-helpers",
  "iii-sdk",
  "libc",
diff --git a/shell/Cargo.toml b/shell/Cargo.toml
index cc5a6f445..22035c884 100644
--- a/shell/Cargo.toml
+++ b/shell/Cargo.toml
@@ -13,6 +13,7 @@ path = "src/main.rs"
 [dependencies]
 iii-sdk = "=0.21.6"
 iii-helpers = "=0.21.6"
+iii-console-ui = { path = "../crates/console-ui" }
 schemars = { version = "0.8", features = ["uuid1"] }
 libc = "0.2"
 tokio = { version = "1", features = ["rt-multi-thread", "macros", "sync", "signal", "process", "time", "io-util", "fs"] }
diff --git a/shell/build.rs b/shell/build.rs
index 33143a5e0..22739ef6c 100644
--- a/shell/build.rs
+++ b/shell/build.rs
@@ -1,6 +1,183 @@
+//! Build script for the `shell` worker.
+//!
+//! 1. Forwards the build-time target triple to the binary as `env!("TARGET")`.
+//! 2. Ensures the injected console UI assets exist: `src/ui.rs` embeds
+//!    `ui/dist/page.js` and `ui/dist/styles.css` via `include_str!`, so if
+//!    either is missing or stale we run `pnpm install && pnpm build` inside
+//!    `ui/` first (the state/iii-directory workers' precedent). Set
+//!    `SKIP_UI_BUILD=1` to use the existing `ui/dist/` outputs as-is.
+
+use std::path::{Path, PathBuf};
+use std::process::Command;
+use std::time::SystemTime;
+
 fn main() {
     println!(
         "cargo:rustc-env=TARGET={}",
         std::env::var("TARGET").unwrap_or_default()
     );
+
+    // `dist/` itself is not listed: include_str! reads it directly, and
+    // listing it would rebuild-loop on our own output.
+    println!("cargo:rerun-if-changed=ui/page.tsx");
+    println!("cargo:rerun-if-changed=ui/styles.css");
+    println!("cargo:rerun-if-changed=ui/src");
+    println!("cargo:rerun-if-changed=ui/build.mjs");
+    println!("cargo:rerun-if-changed=ui/package.json");
+    // The lockfile lives at the workers-repo root (pnpm workspace: the ui
+    // project links @iii-dev/console-ui from packages/console-ui).
+    println!("cargo:rerun-if-changed=../pnpm-lock.yaml");
+    println!("cargo:rerun-if-changed=ui/tsconfig.json");
+
+    let manifest_dir = PathBuf::from(env!("CARGO_MANIFEST_DIR"));
+    let ui_dir = manifest_dir.join("ui");
+    let dist_assets = [
+        ui_dir.join("dist").join("page.js"),
+        ui_dir.join("dist").join("styles.css"),
+    ];
+
+    if dist_assets
+        .iter()
+        .all(|a| a.exists() && dist_is_fresh(a, &ui_dir))
+    {
+        return;
+    }
+
+    if std::env::var_os("SKIP_UI_BUILD").is_some() {
+        for asset in &dist_assets {
+            if !asset.exists() {
+                panic!(
+                    "SKIP_UI_BUILD set but {} is missing — build the UI manually \
+                     (cd ui && pnpm install && pnpm build) or unset the env var",
+                    asset.display()
+                );
+            }
+        }
+        return;
+    }
+
+    let pnpm = locate_pnpm();
+
+    let status = Command::new(&pnpm)
+        .args(["install"])
+        .current_dir(&ui_dir)
+        .status()
+        .unwrap_or_else(|e| {
+            panic!(
+                "failed to spawn `pnpm install` in {}: {e}",
+                ui_dir.display()
+            )
+        });
+    if !status.success() {
+        panic!("`pnpm install` exited with {status} — see logs above");
+    }
+
+    let status = Command::new(&pnpm)
+        .args(["build"])
+        .current_dir(&ui_dir)
+        .status()
+        .unwrap_or_else(|e| panic!("failed to spawn `pnpm build` in {}: {e}", ui_dir.display()));
+    if !status.success() {
+        panic!("`pnpm build` exited with {status} — see logs above");
+    }
+
+    for asset in &dist_assets {
+        if !asset.exists() {
+            panic!(
+                "`pnpm build` finished but {} is still missing — check the esbuild \
+                 output above",
+                asset.display()
+            );
+        }
+    }
+}
+
+/// `true` when the built asset is at least as new as every source that
+/// contributes to it. Conservative: any I/O failure forces a rebuild.
+fn dist_is_fresh(dist_asset: &Path, ui_dir: &Path) -> bool {
+    let Ok(dist_mtime) = dist_asset.metadata().and_then(|m| m.modified()) else {
+        return false;
+    };
+
+    let watched_files = [
+        ui_dir.join("page.tsx"),
+        ui_dir.join("styles.css"),
+        ui_dir.join("build.mjs"),
+        ui_dir.join("package.json"),
+        ui_dir.join("../../pnpm-lock.yaml"),
+        ui_dir.join("tsconfig.json"),
+    ];
+    for f in watched_files.iter() {
+        if !f.exists() {
+            continue;
+        }
+        let Ok(m) = f.metadata().and_then(|m| m.modified()) else {
+            return false;
+        };
+        if m > dist_mtime {
+            return false;
+        }
+    }
+
+    for dir in [ui_dir.join("src")] {
+        if dir.exists() && !subtree_older_than(&dir, dist_mtime) {
+            return false;
+        }
+    }
+
+    true
+}
+
+fn subtree_older_than(root: &Path, ceiling: SystemTime) -> bool {
+    let Ok(read) = std::fs::read_dir(root) else {
+        return false;
+    };
+    for entry in read.flatten() {
+        let path = entry.path();
+        // node_modules/dist churn must not force worker rebuilds; only
+        // real sources are hashed by mtime here.
+        if entry.file_name() == "node_modules" || entry.file_name() == "__tests__" {
+            continue;
+        }
+        let Ok(meta) = entry.metadata() else {
+            return false;
+        };
+        if meta.is_dir() {
+            if !subtree_older_than(&path, ceiling) {
+                return false;
+            }
+        } else {
+            let Ok(m) = meta.modified() else {
+                return false;
+            };
+            if m > ceiling {
+                return false;
+            }
+        }
+    }
+    true
+}
+
+fn locate_pnpm() -> PathBuf {
+    if let Ok(explicit) = std::env::var("PNPM") {
+        return PathBuf::from(explicit);
+    }
+    let candidates = if cfg!(windows) {
+        ["pnpm.cmd", "pnpm.exe", "pnpm"].as_slice()
+    } else {
+        ["pnpm"].as_slice()
+    };
+    let path = std::env::var_os("PATH").unwrap_or_default();
+    for dir in std::env::split_paths(&path) {
+        for name in candidates {
+            let candidate = dir.join(name);
+            if candidate.is_file() {
+                return candidate;
+            }
+        }
+    }
+    panic!(
+        "pnpm not found on PATH — install Node + pnpm, or set SKIP_UI_BUILD=1 \
+         after building the UI manually with `cd ui && pnpm install && pnpm build`"
+    );
 }
diff --git a/shell/src/configuration.rs b/shell/src/configuration.rs
index d1e12eba1..1cf7868b8 100644
--- a/shell/src/configuration.rs
+++ b/shell/src/configuration.rs
@@ -483,7 +483,9 @@ where
     }
 }
 
-async fn trigger_with_retry(
+/// Shared by the config bootstrap here and `ui.rs`'s `shell-ui`
+/// UI-state entry registration.
+pub(crate) async fn trigger_with_retry(
     iii: &IIIClient,
     function_id: &str,
     payload: Value,
diff --git a/shell/src/lib.rs b/shell/src/lib.rs
index 962f74d91..019406532 100644
--- a/shell/src/lib.rs
+++ b/shell/src/lib.rs
@@ -16,3 +16,4 @@ pub mod scode;
 pub mod target;
 pub mod telemetry;
 pub mod triggers;
+pub mod ui;
diff --git a/shell/src/main.rs b/shell/src/main.rs
index fc0828018..136adcc62 100644
--- a/shell/src/main.rs
+++ b/shell/src/main.rs
@@ -20,6 +20,7 @@ mod scode;
 mod target;
 mod telemetry;
 mod triggers;
+mod ui;
 
 use configuration::AppState;
 use functions::types::{KillRequest, StatusRequest};
@@ -415,6 +416,10 @@ async fn main() -> Result<()> {
     // + sandbox toggle from AppState; the typed schema is attached separately.
     register_fs(&iii, &state);
 
+    // Injected console UI: the explorer page + shell::* trigger renderers
+    // (assets embedded from ui/dist; see src/ui.rs).
+    ui::register(&iii);
+
     // Background reaper: time-based eviction of finished JobRecords. Without
     // it, an agent that uses exec_bg + status-polling (and never calls
     // shell::list) leaks every finished record — each holding up to
diff --git a/shell/src/ui.rs b/shell/src/ui.rs
new file mode 100644
index 000000000..b998080b6
--- /dev/null
+++ b/shell/src/ui.rs
@@ -0,0 +1,112 @@
+//! Injectable console UI for the shell worker
+//! (iii/tech-specs/2026-07-17-injectable-ui; authoring SOP:
+//! workers/docs/sops/injectable-console-ui.md).
+//!
+//! Ships two assets into any running console:
+//!
+//! - `shell/page.js` (`console:script`) — the shell explorer page
+//!   (#/ext/shell: file tree / git / search sidebar beside the shared
+//!   Monaco editor and FileDiff pane), plus the `shell::*`
+//!   function-trigger renderer its `setup(host)` registers (moved out of
+//!   the console SPA, the iii-directory precedent).
+//! - `shell/styles.css` (`console:style`) — the stylesheet, every rule
+//!   scoped under `[data-iii-ui="shell"]`.
+//!
+//! The registration machinery (content function `shell::ui-content`, one
+//! Message-path trigger per asset, `III_SHELL_UI_WATCH` hot-reload
+//! watcher) lives in the shared `iii-console-ui` crate (path-linked from
+//! `workers/crates/console-ui`); this module only names the assets and
+//! embeds their bytes.
+//!
+//! The assets are compiled from `ui/` by esbuild (react +
+//! @iii-dev/console-ui external — they resolve through the console's
+//! import map at runtime) and embedded at compile time so the worker
+//! stays one self-contained binary. For the dev loop, set
+//! `III_SHELL_UI_WATCH` to the build output directory (or `1` for
+//! `ui/dist`): the worker polls both files and re-registers a changed
+//! asset's trigger — every open console tab hot-swaps it.
+
+use iii_console_ui::ConsoleUi;
+use iii_sdk::IIIClient;
+
+pub const PAGE_PATH: &str = "shell/page.js";
+pub const STYLES_PATH: &str = "shell/styles.css";
+
+/// Built by `build.rs` (esbuild over `ui/`).
+const PAGE_JS: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/ui/dist/page.js"));
+const STYLES_CSS: &str = include_str!(concat!(env!("CARGO_MANIFEST_DIR"), "/ui/dist/styles.css"));
+
+fn console_ui() -> ConsoleUi {
+    ConsoleUi::new("shell")
+        .script(PAGE_PATH, PAGE_JS)
+        .style(STYLES_PATH, STYLES_CSS)
+}
+
+/// Register the shell worker's console UI. Call after the function
+/// surface is registered.
+///
+/// The `iii-console-ui` crate wants an `Arc<IIIClient>` (its watcher task
+/// clones it); shell passes the client handle around by value everywhere
+/// (`IIIClient` is `Clone` — a cheap handle over the shared connection),
+/// so the Arc is built here rather than rippling through main.
+pub fn register(iii: &IIIClient) {
+    console_ui().register(&std::sync::Arc::new(iii.clone()));
+    register_ui_state_entry(iii.clone());
+}
+
+/// The `shell-ui` configuration entry backs the explorer page's per-
+/// console-tab UI state (browsed root, open editor tabs, expanded
+/// folders): `{ tabs: { [workspaceTabId]: {...} } }`, read-modify-written
+/// by the page over `configuration::get`/`set`. Registered so the entry
+/// exists before the first `set` and survives engine restarts;
+/// `configuration::register` preserves any stored value. Fire-and-forget:
+/// a missing configuration worker degrades the page to non-persistent,
+/// never blocks the worker.
+fn register_ui_state_entry(iii: IIIClient) {
+    tokio::spawn(async move {
+        let payload = serde_json::json!({
+            "id": "shell-ui",
+            "name": "Shell UI",
+            "description": "Per-console-tab state for the shell explorer page \
+                            (open files, expanded folders). Managed by the page; \
+                            not intended for hand-editing.",
+            "schema": { "type": "object", "additionalProperties": true },
+            "initial_value": {},
+        });
+        if let Err(e) =
+            crate::configuration::trigger_with_retry(&iii, "configuration::register", payload).await
+        {
+            tracing::warn!(
+                error = %e,
+                "shell-ui configuration entry not registered (explorer UI state won't persist)"
+            );
+        }
+    });
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn ui_builder_accepts_the_assets() {
+        // The builder panics on any path/kind the console would reject.
+        let _ = console_ui();
+    }
+
+    #[test]
+    fn embedded_page_is_nonempty_esm() {
+        assert!(PAGE_JS.contains("export"), "built page.js looks wrong");
+    }
+
+    #[test]
+    fn embedded_styles_are_scoped() {
+        // esbuild prints the attribute selector unquoted
+        // ([data-iii-ui=shell]).
+        assert!(
+            STYLES_CSS.contains(r#"[data-iii-ui="shell"]"#)
+                || STYLES_CSS.contains("[data-iii-ui=shell]"),
+            "built styles.css must be scoped under the worker's data-iii-ui attribute"
+        );
+    }
+}
diff --git a/shell/ui/build.mjs b/shell/ui/build.mjs
new file mode 100644
index 000000000..6a390c623
--- /dev/null
+++ b/shell/ui/build.mjs
@@ -0,0 +1,37 @@
+/**
+ * Build the worker's two console assets:
+ *
+ *   page.tsx   → dist/page.js    (injected over `console:script`)
+ *   styles.css → dist/styles.css (injected over `console:style`)
+ *
+ * The five shared specifiers stay EXTERNAL — they resolve at runtime
+ * through the console's import map (a bundled React copy would surface as
+ * a cryptic "Invalid hook call"). Everything else the page needs (zod,
+ * @pierre/trees) gets bundled in. `--watch` pairs with the worker's
+ * III_SHELL_UI_WATCH poller for the hot-reload dev loop.
+ */
+
+import esbuild from 'esbuild'
+
+const options = {
+  entryPoints: ['page.tsx', 'styles.css'],
+  bundle: true,
+  format: 'esm',
+  jsx: 'automatic',
+  outdir: 'dist',
+  external: [
+    'react',
+    'react-dom',
+    'react-dom/client',
+    'react/jsx-runtime',
+    '@iii-dev/console-ui',
+  ],
+  logLevel: 'info',
+}
+
+if (process.argv.includes('--watch')) {
+  const ctx = await esbuild.context(options)
+  await ctx.watch()
+} else {
+  await esbuild.build(options)
+}
diff --git a/shell/ui/package.json b/shell/ui/package.json
new file mode 100644
index 000000000..22b8277cb
--- /dev/null
+++ b/shell/ui/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@iii-workers/shell-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc --noEmit && node build.mjs",
+    "watch": "node build.mjs --watch",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@iii-dev/console-ui": "workspace:*",
+    "@pierre/trees": "1.0.0-beta.6",
+    "lucide-react": "^1.16.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "esbuild": "^0.25.0",
+    "typescript": "^5.9.2",
+    "vitest": "^4.1.6"
+  }
+}
diff --git a/shell/ui/page.tsx b/shell/ui/page.tsx
new file mode 100644
index 000000000..503260ee1
--- /dev/null
+++ b/shell/ui/page.tsx
@@ -0,0 +1,34 @@
+/**
+ * Entry for the shell worker's injected console UI — compiled by esbuild
+ * (react + @iii-dev/console-ui external) into dist/page.js and served
+ * over the `console:script` trigger (see src/ui.rs). The stylesheet is
+ * its own asset: ./styles.css ships over `console:style` as
+ * shell/styles.css.
+ *
+ * `setup(host)` composes the worker's two console contributions:
+ *
+ * - src/page/             — the shell explorer (#/ext/shell): file tree +
+ *                           git + search sidebar beside the shared Monaco
+ *                           editor / FileDiff pane
+ * - src/function-trigger/ — how shell::* function triggers render in
+ *                           chat/traces (moved out of the console SPA)
+ *
+ * Registrations go through `host` so the loader disposes them on hot
+ * reload / worker disconnect.
+ */
+
+import type { Host, PageRenderProps } from '@iii-dev/console-ui'
+import { createShellTriggerRenderer } from './src/function-trigger'
+import { ShellExplorerPage } from './src/page'
+
+export default function setup(host: Host) {
+  host.pages.register({
+    id: 'shell',
+    title: 'shell',
+    render: ({ panelSide, tabId }: PageRenderProps) => (
+      <ShellExplorerPage host={host} panelSide={panelSide} tabId={tabId} />
+    ),
+  })
+
+  host.functionTriggers.register(createShellTriggerRenderer())
+}
diff --git a/console/web/src/components/chat/shell/ConfigStatusView.tsx b/shell/ui/src/function-trigger/ConfigStatusView.tsx
similarity index 64%
rename from console/web/src/components/chat/shell/ConfigStatusView.tsx
rename to shell/ui/src/function-trigger/ConfigStatusView.tsx
index e38bf7501..c38ad9265 100644
--- a/console/web/src/components/chat/shell/ConfigStatusView.tsx
+++ b/shell/ui/src/function-trigger/ConfigStatusView.tsx
@@ -1,6 +1,4 @@
-import { StatusPill } from '@/components/chat/sandbox/shared'
-import { Chip, FooterPill } from '@/components/chat/sandbox/terminal/Terminal'
-import { cn } from '@/lib/utils'
+import { Chip, FooterPill, StatusPill } from '../lib/terminal'
 import { safeParseResponse, shellConfigStatusResponseSchema } from './parsers'
 
 interface ShellConfigStatusViewProps {
@@ -25,23 +23,14 @@ export function ShellConfigStatusView({
 
   if (!resp) {
     if (!running) return null
-    return (
-      <div className="border-t border-rule-2 bg-bg px-3 py-3 font-mono text-[12.5px] text-ink-faint italic">
-        checking config…
-      </div>
-    )
+    return <div className="shui-card shui-running">checking config…</div>
   }
 
   const applied = resp.last_outcome === 'applied'
   return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div
-        className={cn(
-          'px-3 py-3 flex flex-col gap-2 border-l-2',
-          applied ? 'border-accent' : 'border-alert',
-        )}
-      >
-        <div className="flex flex-wrap items-center gap-1.5">
+    <div className="shui-card">
+      <div className={`shui-slab ${applied ? 'accent' : 'alert'}`}>
+        <div className="shui-row">
           <StatusPill
             label={resp.last_outcome}
             variant={applied ? 'accent' : 'alert'}
@@ -55,7 +44,7 @@ export function ShellConfigStatusView({
           )}
         </div>
         {resp.last_error != null ? (
-          <pre className="font-mono text-[12.5px] leading-[1.55] text-warn whitespace-pre-wrap break-words m-0">
+          <pre className="shui-pre err">
             <code>{resp.last_error}</code>
           </pre>
         ) : null}
diff --git a/console/web/src/components/chat/shell/ExecBgView.tsx b/shell/ui/src/function-trigger/ExecBgView.tsx
similarity index 79%
rename from console/web/src/components/chat/shell/ExecBgView.tsx
rename to shell/ui/src/function-trigger/ExecBgView.tsx
index de2e26bde..2c4c4eadb 100644
--- a/console/web/src/components/chat/shell/ExecBgView.tsx
+++ b/shell/ui/src/function-trigger/ExecBgView.tsx
@@ -1,7 +1,4 @@
-import {
-  FooterPill,
-  Terminal,
-} from '@/components/chat/sandbox/terminal/Terminal'
+import { FooterPill, Terminal } from '../lib/terminal'
 import { ShellExecChips, ShellExecPreviewRow } from './ExecView'
 import { formatArgv, formatShellCommand } from './format'
 import {
@@ -60,18 +57,14 @@ function BgStartedBody({
 }) {
   const resolved = formatArgv(resp.argv)
   return (
-    <div className="bg-bg px-3 py-2 font-mono text-[12.5px] leading-[1.55]">
-      <div className="flex flex-wrap items-baseline gap-2">
-        <span className="text-accent">↻</span>
-        <span className="text-ink">started</span>
-        <code className="bg-paper-2 border border-rule-2 px-1.5 py-0.5 text-[12px] text-ink break-all">
-          {resp.job_id}
-        </code>
+    <div className="shui-body">
+      <div className="shui-baseline-row">
+        <span className="t-accent">↻</span>
+        <span className="t-ink">started</span>
+        <code className="shui-inline-code">{resp.job_id}</code>
       </div>
       {resolved !== formatShellCommand(req) ? (
-        <div className="text-ink-faint mt-1 whitespace-pre-wrap break-all">
-          {`$ ${resolved}`}
-        </div>
+        <div className="shui-resolved-argv">{`$ ${resolved}`}</div>
       ) : null}
     </div>
   )
diff --git a/console/web/src/components/chat/shell/ExecView.tsx b/shell/ui/src/function-trigger/ExecView.tsx
similarity index 83%
rename from console/web/src/components/chat/shell/ExecView.tsx
rename to shell/ui/src/function-trigger/ExecView.tsx
index e90992657..7d3b3354e 100644
--- a/console/web/src/components/chat/shell/ExecView.tsx
+++ b/shell/ui/src/function-trigger/ExecView.tsx
@@ -1,15 +1,5 @@
-import {
-  formatBytes,
-  pillForExit,
-  truncateMiddle,
-} from '@/components/chat/sandbox/format'
-import { AnsiOutput } from '@/components/chat/sandbox/terminal/AnsiOutput'
-import {
-  Chip,
-  FooterPill,
-  Terminal,
-} from '@/components/chat/sandbox/terminal/Terminal'
-import { Prompt } from '@/components/ui/Prompt'
+import { formatBytes, truncateMiddle, pillForExit } from '../lib/format'
+import { AnsiOutput, Chip, FooterPill, Prompt, Terminal } from '../lib/terminal'
 import { formatShellCommand } from './format'
 import {
   type ShellExecRequest,
@@ -62,12 +52,12 @@ export function ShellExecPreviewRow({
   const req = shellExecRequestSchema.safeParse(input)
   if (!req.success) return null
   return (
-    <div className="border-t border-rule-2 bg-paper-2 px-3 py-2 flex flex-wrap items-center gap-x-3 gap-y-1.5">
-      <span className="font-mono text-[12.5px] text-ink whitespace-pre-wrap break-all">
+    <div className="shui-card shui-head preview">
+      <span className="shui-cmd">
         <Prompt symbol="$" />
-        <span className="ml-2">{formatShellCommand(req.data)}</span>
+        <span className="cmd-text">{formatShellCommand(req.data)}</span>
       </span>
-      <span className="flex flex-wrap items-center gap-1.5 ml-auto">
+      <span className="shui-chips end">
         <ShellExecChips req={req.data} bg={bg} />
       </span>
     </div>
diff --git a/shell/ui/src/function-trigger/FsSearchViews.tsx b/shell/ui/src/function-trigger/FsSearchViews.tsx
new file mode 100644
index 000000000..20b517d9d
--- /dev/null
+++ b/shell/ui/src/function-trigger/FsSearchViews.tsx
@@ -0,0 +1,222 @@
+/* shell::fs::grep and shell::fs::sed — match list + replacement table. */
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@iii-dev/console-ui'
+import { TriangleAlert } from 'lucide-react'
+import { truncateMiddle } from '../lib/format'
+import { renderWithHighlight } from '../lib/highlight'
+import { Chip, FooterPill } from '../lib/terminal'
+import {
+  type FsMatch,
+  type FsSedFileResult,
+  fsGrepRequestSchema,
+  fsGrepResponseSchema,
+  fsSedRequestSchema,
+  fsSedResponseSchema,
+  safeParseResponse,
+} from './parsers'
+import { TargetChip } from './shared'
+
+interface ViewProps {
+  input: unknown
+  output: unknown
+}
+
+/* ---------------- fs::grep ---------------- */
+
+export function FsGrepView({ input, output }: ViewProps) {
+  const req = fsGrepRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsGrepResponseSchema, output)
+  if (!resp) return null
+  const { matches, truncated } = resp
+
+  return (
+    <div className="shui-card">
+      <div className="shui-head">
+        <span className="shui-chips">
+          <Chip label="path">{req.data.path}</Chip>
+          <Chip label="pattern">{req.data.pattern}</Chip>
+          <TargetChip target={req.data.target} />
+          {req.data.ignore_case ? <Chip>case-insensitive</Chip> : null}
+          {/* `recursive` defaults TRUE on the wire — chip the deviation only */}
+          {req.data.recursive === false ? <Chip>non-recursive</Chip> : null}
+          {req.data.include_glob?.length ? (
+            <Chip label="include">
+              {truncateMiddle(req.data.include_glob.join(' '), 40)}
+            </Chip>
+          ) : null}
+          {req.data.exclude_glob?.length ? (
+            <Chip label="exclude">
+              {truncateMiddle(req.data.exclude_glob.join(' '), 40)}
+            </Chip>
+          ) : null}
+          <FooterPill tone={matches.length > 0 ? 'default' : 'warn'}>
+            {`${matches.length} ${matches.length === 1 ? 'match' : 'matches'}`}
+          </FooterPill>
+          {truncated ? <FooterPill tone="warn">truncated</FooterPill> : null}
+        </span>
+      </div>
+
+      {matches.length === 0 ? (
+        <div className="shui-empty">· no matches</div>
+      ) : (
+        <GrepMatchList
+          matches={matches}
+          pattern={req.data.pattern}
+          ignoreCase={!!req.data.ignore_case}
+        />
+      )}
+    </div>
+  )
+}
+
+interface GrepMatchListProps {
+  matches: FsMatch[]
+  pattern: string
+  ignoreCase: boolean
+}
+
+/** Highlighted match list — grep patterns are always regexes on the wire. */
+export function GrepMatchList({
+  matches,
+  pattern,
+  ignoreCase,
+}: GrepMatchListProps) {
+  return (
+    <div className="shui-match-list">
+      {matches.map((m) => (
+        <div
+          /* path+line+content is collision-resistant in practice; React
+             only warns if the worker ever sends true duplicates, which
+             would itself be a wire-shape bug worth surfacing. */
+          key={`${m.path}:${m.line}:${m.content}`}
+          className="shui-match"
+        >
+          <div className="loc">
+            <span className="t-accent">{m.path}</span>
+            <span className="t-ghost">:</span>
+            <span className="num">{m.line}</span>
+          </div>
+          <pre className="shui-pre out">
+            <code>
+              {renderWithHighlight(m.content, pattern, {
+                isRegex: true,
+                ignoreCase,
+              })}
+            </code>
+          </pre>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/* ---------------- fs::sed ---------------- */
+
+export function FsSedView({ input, output }: ViewProps) {
+  const req = fsSedRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsSedResponseSchema, output)
+  if (!resp) return null
+  const { results, total_replacements } = resp
+  const pathMode = req.data.path != null
+  const target =
+    req.data.path ??
+    (req.data.files?.length ? `${req.data.files.length} files` : '—')
+
+  return (
+    <div className="shui-card">
+      <div className="shui-head">
+        <span className="shui-chips">
+          <Chip label="target">{target}</Chip>
+          <Chip label="pattern">{req.data.pattern}</Chip>
+          <Chip label="→">{req.data.replacement || "''"}</Chip>
+          {/* `regex`/`recursive` default TRUE on the wire — chip the
+              deviations ("literal", "non-recursive") only */}
+          {req.data.regex === false ? <Chip>literal</Chip> : null}
+          {req.data.first_only ? <Chip>first-only</Chip> : null}
+          {req.data.ignore_case ? <Chip>case-insensitive</Chip> : null}
+          {pathMode && req.data.recursive === false ? (
+            <Chip>non-recursive</Chip>
+          ) : null}
+          {req.data.include_glob?.length ? (
+            <Chip label="include">
+              {truncateMiddle(req.data.include_glob.join(' '), 40)}
+            </Chip>
+          ) : null}
+          {req.data.exclude_glob?.length ? (
+            <Chip label="exclude">
+              {truncateMiddle(req.data.exclude_glob.join(' '), 40)}
+            </Chip>
+          ) : null}
+          <TargetChip target={req.data.target} />
+        </span>
+      </div>
+
+      {results.length === 0 ? (
+        <div className="shui-empty">· no files touched</div>
+      ) : (
+        <SedResultsTable
+          results={results}
+          totalReplacements={total_replacements}
+        />
+      )}
+    </div>
+  )
+}
+
+interface SedResultsTableProps {
+  results: FsSedFileResult[]
+  totalReplacements: number
+}
+
+/** Per-file replacement table with the total pill. */
+export function SedResultsTable({
+  results,
+  totalReplacements,
+}: SedResultsTableProps) {
+  return (
+    <table className="shui-table">
+      <thead>
+        <tr>
+          <th className="pad-l">path</th>
+          <th className="num">replacements</th>
+          <th className="pad-r">status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {results.map((r) => (
+          <tr key={r.path}>
+            <td className="pad-l t-ink">{r.path}</td>
+            <td className="t-faint num">{r.replacements}</td>
+            <td className="pad-r">
+              {r.success ? (
+                <span className="t-accent">ok</span>
+              ) : r.error ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="shui-err-chip">
+                      <TriangleAlert aria-hidden className="shui-fs-icon" />
+                      err
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>{r.error}</TooltipContent>
+                </Tooltip>
+              ) : (
+                <span className="t-warn">err</span>
+              )}
+            </td>
+          </tr>
+        ))}
+        <tr className="total">
+          <td className="pad-l label">total</td>
+          <td colSpan={2}>
+            <FooterPill tone={totalReplacements > 0 ? 'accent' : 'default'}>
+              {`${totalReplacements} replacements`}
+            </FooterPill>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}
diff --git a/shell/ui/src/function-trigger/FsViews.tsx b/shell/ui/src/function-trigger/FsViews.tsx
new file mode 100644
index 000000000..5ad970ba5
--- /dev/null
+++ b/shell/ui/src/function-trigger/FsViews.tsx
@@ -0,0 +1,316 @@
+/* The single-outcome shell::fs::* views: ls, stat, read, mkdir, rm, mv,
+   chmod. Grep/sed (match lists) live in FsSearchViews.tsx; write (with
+   its batch table) in FsWriteView.tsx. */
+
+import { File, FileText, Folder, Link as LinkIcon } from 'lucide-react'
+import { formatBytes, formatMode, formatMtime, truncateMiddle } from '../lib/format'
+import { Chip, FooterPill } from '../lib/terminal'
+import {
+  type FsEntry,
+  fsChmodRequestSchema,
+  fsChmodResponseSchema,
+  fsLsRequestSchema,
+  fsLsResponseSchema,
+  fsMkdirRequestSchema,
+  fsMkdirResponseSchema,
+  fsMvRequestSchema,
+  fsMvResponseSchema,
+  fsReadRequestSchema,
+  fsReadResponseSchema,
+  fsRmRequestSchema,
+  fsRmResponseSchema,
+  fsStatRequestSchema,
+  fsStatResponseSchema,
+  safeParseResponse,
+} from './parsers'
+import { displayPath, isSandboxTarget, TargetChip } from './shared'
+
+interface ViewProps {
+  input: unknown
+  output: unknown
+}
+
+/* ---------------- fs::ls ---------------- */
+
+export function FsLsView({ input, output }: ViewProps) {
+  const req = fsLsRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsLsResponseSchema, output)
+  if (!resp) return null
+  const entries = resp.entries
+
+  return (
+    <div className="shui-card">
+      <div className="shui-head">
+        <span className="shui-chips">
+          <Chip label="path">{req.data.path}</Chip>
+          <TargetChip target={req.data.target} />
+          <Chip label="entries">{entries.length}</Chip>
+        </span>
+      </div>
+      {entries.length === 0 ? (
+        <div className="shui-empty">· directory is empty</div>
+      ) : (
+        <FsEntriesTable entries={entries} />
+      )}
+    </div>
+  )
+}
+
+/** Directory-listing table shared by the ls view. */
+export function FsEntriesTable({ entries }: { entries: FsEntry[] }) {
+  return (
+    <table className="shui-table plain">
+      <tbody>
+        {entries.map((e) => {
+          const Icon = e.is_symlink
+            ? LinkIcon
+            : e.is_dir
+              ? Folder
+              : iconForFile(e.name)
+          return (
+            <tr key={`${e.name}:${e.size}:${e.mtime}`}>
+              <td className="pad-l icon">
+                <Icon aria-hidden className="shui-fs-icon" />
+              </td>
+              <td className="t-ink">{e.name}</td>
+              <td className="t-faint num r">
+                {e.is_dir ? '—' : formatBytes(e.size)}
+              </td>
+              <td className="t-faint num">
+                {`${e.is_dir ? 'd' : '-'}${formatMode(e.mode)}`}
+              </td>
+              <td className="t-faint pad-r">{formatMtime(e.mtime)}</td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}
+
+function iconForFile(name: string) {
+  const lower = name.toLowerCase()
+  if (/\.(md|txt|json|yml|yaml|toml|csv|log)$/.test(lower)) return FileText
+  if (/\.(js|jsx|ts|tsx|py|rs|go|rb|sh|bash)$/.test(lower)) return FileText
+  return File
+}
+
+/* ---------------- fs::stat ---------------- */
+
+/** Response is the bare FsEntry (`StatResponse` is serde-transparent). */
+export function FsStatView({ input, output }: ViewProps) {
+  const req = fsStatRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const e = safeParseResponse(fsStatResponseSchema, output)
+  if (!e) return null
+
+  return (
+    <div className="shui-card">
+      <div className="shui-slab">
+        <div className="shui-line">
+          <span className="t-faint">stat </span>
+          <span>{req.data.path}</span>
+        </div>
+        <div className="shui-row">
+          <Chip label="size">{e.is_dir ? '—' : formatBytes(e.size)}</Chip>
+          <Chip label="mode">{`${e.is_dir ? 'd' : '-'}${formatMode(e.mode)}`}</Chip>
+          <Chip label="mtime">{formatMtime(e.mtime)}</Chip>
+          <TargetChip target={req.data.target} />
+          {e.is_dir ? <FooterPill tone="default">dir</FooterPill> : null}
+          {e.is_symlink ? <FooterPill tone="warn">symlink</FooterPill> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/* ---------------- fs::read ---------------- */
+
+/** shell::fs::read never inlines content — the response `content` is
+    always a channel ref, so the body is the stream row promoted to the
+    only branch. The console cannot dereference the channel, so there is
+    no "view content" affordance. */
+export function FsReadView({ input, output }: ViewProps) {
+  const req = fsReadRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsReadResponseSchema, output)
+  if (!resp) return null
+
+  return (
+    <div className="shui-card">
+      <div className="shui-head">
+        <span className="shui-chips">
+          <span className="shui-err-label">file</span>
+          <code className="t-ink">{req.data.path}</code>
+          <TargetChip target={req.data.target} />
+        </span>
+      </div>
+
+      <div className="shui-body stream-row">
+        <span className="t-faint">content streamed via channel</span>
+        <code className="shui-inline-code">
+          {truncateMiddle(resp.content.channel_id, 18)}
+        </code>
+        <span className="t-ghost">({resp.content.direction ?? 'read'})</span>
+      </div>
+
+      <div className="shui-foot">
+        <Chip label="size">{formatBytes(resp.size)}</Chip>
+        <Chip label="mode">{formatMode(resp.mode)}</Chip>
+        <Chip label="mtime">{formatMtime(resp.mtime)}</Chip>
+        <FooterPill tone="default">streamed</FooterPill>
+      </div>
+    </div>
+  )
+}
+
+/* ---------------- fs::mkdir ---------------- */
+
+export function FsMkdirView({ input, output }: ViewProps) {
+  const req = fsMkdirRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsMkdirResponseSchema, output)
+  if (!resp) return null
+  const created = resp.created
+  const sandboxed = isSandboxTarget(req.data.target)
+  // Sandbox-target responses default `already_existed` (serde fill-in,
+  // not a signal) — collapse to the plain created/exists wording there.
+  const verb = created
+    ? '+ created '
+    : sandboxed
+      ? '· exists '
+      : resp.already_existed
+        ? '· already exists '
+        : '· not created '
+
+  return (
+    <div className="shui-card">
+      <div className="shui-slab">
+        <div className="shui-line">
+          <span className={created ? 't-accent' : 't-faint'}>{verb}</span>
+          <span>{displayPath(req.data.path, resp.path)}</span>
+        </div>
+        <div className="shui-row">
+          <Chip label="mode">{req.data.mode ?? '0755'}</Chip>
+          {req.data.parents ? <Chip label="parents">true</Chip> : null}
+          <TargetChip target={req.data.target} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/* ---------------- fs::rm ---------------- */
+
+export function FsRmView({ input, output }: ViewProps) {
+  const req = fsRmRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsRmResponseSchema, output)
+  if (!resp) return null
+  const removed = resp.removed
+  const sandboxed = isSandboxTarget(req.data.target)
+  // `was_present` is a host-only signal; sandbox-target responses default
+  // it (serde fill-in) — collapse to removed/not-removed wording there.
+  const wasAbsent = !sandboxed && !removed && !resp.was_present
+  const verb = removed
+    ? '− removed '
+    : wasAbsent
+      ? '· was not present '
+      : '· not removed '
+  const tone = removed ? 't-warn' : wasAbsent ? 't-ghost' : 't-faint'
+  const recursive = req.data.recursive === true
+
+  return (
+    <div className="shui-card">
+      <div className="shui-slab">
+        <div className="shui-line">
+          <span className={tone}>{verb}</span>
+          <span>{displayPath(req.data.path, resp.path)}</span>
+        </div>
+        {recursive || sandboxed ? (
+          <div className="shui-row">
+            {recursive ? (
+              <Chip label="recursive" className="warn">
+                true
+              </Chip>
+            ) : null}
+            <TargetChip target={req.data.target} />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/* ---------------- fs::mv ---------------- */
+
+export function FsMvView({ input, output }: ViewProps) {
+  const req = fsMvRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsMvResponseSchema, output)
+  if (!resp) return null
+  const moved = resp.moved
+  /* Sandbox-target responses default `overwrote` — a serde fill-in, not
+     a signal; only surface the warn pill for host moves. */
+  const showOverwrote = resp.overwrote && !isSandboxTarget(req.data.target)
+  const hasChips =
+    isSandboxTarget(req.data.target) || !!req.data.overwrite || showOverwrote
+
+  return (
+    <div className="shui-card">
+      <div className="shui-slab">
+        <div className="shui-baseline-row">
+          <span className={moved ? 't-accent' : 't-faint'}>
+            {moved ? 'mv' : '·'}
+          </span>
+          <span>{displayPath(req.data.src, resp.src)}</span>
+          <span className="t-ghost">→</span>
+          <span>{displayPath(req.data.dst, resp.dst)}</span>
+        </div>
+        {hasChips ? (
+          <div className="shui-row">
+            <TargetChip target={req.data.target} />
+            {req.data.overwrite ? <Chip label="overwrite">true</Chip> : null}
+            {showOverwrote ? (
+              <FooterPill tone="warn">overwrote existing</FooterPill>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/* ---------------- fs::chmod ---------------- */
+
+export function FsChmodView({ input, output }: ViewProps) {
+  const req = fsChmodRequestSchema.safeParse(input)
+  if (!req.success) return null
+  const resp = safeParseResponse(fsChmodResponseSchema, output)
+  if (!resp) return null
+  const ownership =
+    typeof req.data.uid === 'number' || typeof req.data.gid === 'number'
+      ? `${req.data.uid ?? '_'}:${req.data.gid ?? '_'}`
+      : null
+
+  return (
+    <div className="shui-card">
+      <div className="shui-slab">
+        <div className="shui-baseline-row">
+          <span className="t-faint">chmod</span>
+          <span>{displayPath(req.data.path, resp.path)}</span>
+          <span className="t-ghost">→</span>
+          <span className="num">{req.data.mode}</span>
+          <span className="t-faint">({formatMode(req.data.mode)})</span>
+        </div>
+        <div className="shui-row">
+          {ownership ? <Chip label="own">{ownership}</Chip> : null}
+          {req.data.recursive ? <Chip label="recursive">true</Chip> : null}
+          <Chip label="changed">{resp.entries_changed}</Chip>
+          <TargetChip target={req.data.target} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/console/web/src/components/chat/shell/FsWriteView.tsx b/shell/ui/src/function-trigger/FsWriteView.tsx
similarity index 54%
rename from console/web/src/components/chat/shell/FsWriteView.tsx
rename to shell/ui/src/function-trigger/FsWriteView.tsx
index 7d0b5cd9f..ce4094d81 100644
--- a/console/web/src/components/chat/shell/FsWriteView.tsx
+++ b/shell/ui/src/function-trigger/FsWriteView.tsx
@@ -1,5 +1,5 @@
-import { formatBytes } from '@/components/chat/sandbox/format'
-import { Chip, FooterPill } from '@/components/chat/sandbox/terminal/Terminal'
+import { formatBytes } from '../lib/format'
+import { Chip, FooterPill } from '../lib/terminal'
 import {
   contentRefSchema,
   type FsWriteRequest,
@@ -33,17 +33,15 @@ export function FsWriteView({ input, output }: FsWriteViewProps) {
     contentRefSchema.safeParse(req.data.content).success
 
   return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="px-3 py-3 flex flex-col gap-2">
-        <div className="font-mono text-[12.5px] text-ink">
-          <span className="text-accent">+ wrote</span>{' '}
-          <span className="tabular-nums">
-            {formatBytes(resp.bytes_written)}
-          </span>{' '}
-          <span className="text-ink-faint">to</span>{' '}
+    <div className="shui-card">
+      <div className="shui-slab">
+        <div className="shui-line">
+          <span className="t-accent">+ wrote</span>{' '}
+          <span className="num">{formatBytes(resp.bytes_written)}</span>{' '}
+          <span className="t-faint">to</span>{' '}
           <span>{displayPath(req.data.path ?? '', resp.path)}</span>
         </div>
-        <div className="flex flex-wrap items-center gap-1.5">
+        <div className="shui-row">
           <Chip label="mode">{req.data.mode ?? '0644'}</Chip>
           {req.data.parents ? <Chip label="parents">true</Chip> : null}
           {streamed ? (
@@ -69,40 +67,35 @@ function BatchWrite({ req, resp }: BatchWriteProps) {
   const specByPath = new Map(specs.map((s) => [s.path, s] as const))
 
   return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="bg-paper-2 border-b border-rule-2 px-3 py-2 flex flex-wrap items-center gap-1.5">
-        <Chip label="files">{resp.files.length}</Chip>
-        <TargetChip target={req.target} />
+    <div className="shui-card">
+      <div className="shui-head">
+        <span className="shui-chips">
+          <Chip label="files">{resp.files.length}</Chip>
+          <TargetChip target={req.target} />
+        </span>
       </div>
 
-      <table className="w-full font-mono text-[12px] text-ink">
+      <table className="shui-table">
         <thead>
-          <tr className="border-b border-rule-2 text-[11px] uppercase tracking-[0.06em] text-ink-faint">
-            <th className="text-left font-normal px-3 py-1.5">path</th>
-            <th className="text-right font-normal px-2 py-1.5 w-20">bytes</th>
-            <th className="text-left font-normal px-2 py-1.5 w-20">mode</th>
-            <th className="text-left font-normal px-3 py-1.5 w-16">content</th>
+          <tr>
+            <th className="pad-l">path</th>
+            <th className="r">bytes</th>
+            <th>mode</th>
+            <th className="pad-r">content</th>
           </tr>
         </thead>
         <tbody>
           {resp.files.map((r, i) => {
             const spec = specByPath.get(r.path) ?? specs[i]
             return (
-              <tr
-                key={r.path}
-                className="border-b border-rule-2 last:border-b-0"
-              >
-                <td className="px-3 py-1.5 text-ink">{r.path}</td>
-                <td className="px-2 py-1.5 text-right text-ink-faint tabular-nums">
-                  {formatBytes(r.bytes_written)}
-                </td>
-                <td className="px-2 py-1.5 text-ink-faint">
+              <tr key={r.path}>
+                <td className="pad-l t-ink">{r.path}</td>
+                <td className="t-faint num r">{formatBytes(r.bytes_written)}</td>
+                <td className="t-faint">
                   {spec ? (spec.mode ?? '0644') : '—'}
-                  {spec?.parents ? (
-                    <span className="text-ink-ghost"> +parents</span>
-                  ) : null}
+                  {spec?.parents ? <span className="t-ghost"> +parents</span> : null}
                 </td>
-                <td className="px-3 py-1.5 text-ink-faint">
+                <td className="t-faint pad-r">
                   {spec
                     ? typeof spec.content === 'string'
                       ? 'inline'
@@ -112,11 +105,9 @@ function BatchWrite({ req, resp }: BatchWriteProps) {
               </tr>
             )
           })}
-          <tr className="bg-paper-2">
-            <td className="px-3 py-1.5 text-ink-faint uppercase tracking-[0.06em] text-[11px]">
-              total
-            </td>
-            <td className="px-2 py-1.5" colSpan={3}>
+          <tr className="total">
+            <td className="pad-l label">total</td>
+            <td colSpan={3}>
               <FooterPill tone="accent">
                 {`${formatBytes(resp.bytes_written)} · ${resp.files.length} ${resp.files.length === 1 ? 'file' : 'files'}`}
               </FooterPill>
diff --git a/console/web/src/components/chat/shell/KillView.tsx b/shell/ui/src/function-trigger/KillView.tsx
similarity index 52%
rename from console/web/src/components/chat/shell/KillView.tsx
rename to shell/ui/src/function-trigger/KillView.tsx
index 9731d48ab..6618073fc 100644
--- a/console/web/src/components/chat/shell/KillView.tsx
+++ b/shell/ui/src/function-trigger/KillView.tsx
@@ -1,6 +1,5 @@
-import { truncateMiddle } from '@/components/chat/sandbox/format'
-import { ActionLine, StatusPill } from '@/components/chat/sandbox/shared'
-import { FooterPill } from '@/components/chat/sandbox/terminal/Terminal'
+import { truncateMiddle } from '../lib/format'
+import { ActionLine, FooterPill, StatusPill } from '../lib/terminal'
 import { jobStatusPill } from './format'
 import {
   safeParseResponse,
@@ -15,10 +14,9 @@ interface ShellKillViewProps {
 }
 
 /**
- * `shell::kill` — warn slab in the sandbox StopView pattern. The
- * `killed: false` case always arrives with `reason: "not running"`
- * plus the job's terminal status; both render side by side so the
- * outcome is unambiguous.
+ * `shell::kill` — warn slab. The `killed: false` case always arrives
+ * with `reason: "not running"` plus the job's terminal status; both
+ * render side by side so the outcome is unambiguous.
  */
 export function ShellKillView({ input, output, running }: ShellKillViewProps) {
   const req = shellKillRequestSchema.safeParse(input)
@@ -28,24 +26,22 @@ export function ShellKillView({ input, output, running }: ShellKillViewProps) {
   const status = resp ? jobStatusPill(resp.status) : null
 
   return (
-    <div className="border-t border-rule-2 bg-bg">
-      <div className="px-3 py-3 flex flex-col gap-2 border-l-2 border-warn">
-        <div className="font-mono text-[12.5px] text-ink flex flex-wrap items-baseline gap-2">
-          <span className="text-warn">×</span>
-          <span>{running ? 'killing job…' : 'killed job'}</span>
-          <code className="bg-paper-2 border border-rule-2 px-1.5 py-0.5 text-[12px] text-ink">
+    <div className="shui-card">
+      <div className="shui-slab warn">
+        <div className="shui-baseline-row">
+          <span className="t-warn">×</span>
+          <span className="t-ink">
+            {running ? 'killing job…' : 'killed job'}
+          </span>
+          <code className="shui-inline-code">
             {truncateMiddle(resp?.job_id ?? req.data.job_id, 24)}
           </code>
         </div>
         {/* `reason` is long prose (e.g. the sandbox no-cancel-hook
            message) — full-width faint line, not a pill. */}
-        {resp?.reason ? (
-          <div className="font-mono text-[12px] leading-[1.6] text-ink-faint italic">
-            {resp.reason}
-          </div>
-        ) : null}
+        {resp?.reason ? <div className="shui-note">{resp.reason}</div> : null}
         {resp && status ? (
-          <div className="flex flex-wrap items-center gap-1.5">
+          <div className="shui-row">
             <StatusPill label={status.label} variant={status.tone} />
             <FooterPill tone={resp.killed ? 'accent' : 'warn'}>
               {resp.killed ? 'killed' : 'not running'}
@@ -63,13 +59,10 @@ export function ShellKillPreview({ input }: { input: unknown }) {
   const req = shellKillRequestSchema.safeParse(input)
   if (!req.success) return null
   return (
-    <div className="border-t border-rule-2 bg-bg">
+    <div className="shui-card">
       <ActionLine symbol="×" tone="warn">
-        <span className="font-mono text-[12.5px]">
-          kill job{' '}
-          <code className="bg-paper-2 border border-rule-2 px-1.5 py-0.5 text-[12px]">
-            {req.data.job_id}
-          </code>
+        <span className="shui-line">
+          kill job <code className="shui-inline-code">{req.data.job_id}</code>
         </span>
       </ActionLine>
     </div>
diff --git a/console/web/src/components/chat/shell/ListView.tsx b/shell/ui/src/function-trigger/ListView.tsx
similarity index 52%
rename from console/web/src/components/chat/shell/ListView.tsx
rename to shell/ui/src/function-trigger/ListView.tsx
index 4ac887b43..6ec0f21c2 100644
--- a/console/web/src/components/chat/shell/ListView.tsx
+++ b/shell/ui/src/function-trigger/ListView.tsx
@@ -1,8 +1,6 @@
-import { Inbox } from 'lucide-react'
-import { formatAgeSecs, truncateMiddle } from '@/components/chat/sandbox/format'
-import { StatusPill } from '@/components/chat/sandbox/shared'
-import { EmptyState } from '@/components/ui/EmptyState'
-import { StatusDot } from '@/components/ui/StatusDot'
+import { EmptyState, StatusDot } from '@iii-dev/console-ui'
+import { formatAgeSecs, truncateMiddle } from '../lib/format'
+import { StatusPill } from '../lib/terminal'
 import { formatEpochMs, jobDurationMs, jobStatusPill } from './format'
 import { safeParseResponse, shellListResponseSchema } from './parsers'
 
@@ -31,9 +29,8 @@ export function ShellListView({ output }: ShellListViewProps) {
 
   if (jobs.length === 0) {
     return (
-      <div className="border-t border-rule-2 bg-bg p-3">
+      <div className="shui-card pad">
         <EmptyState
-          icon={Inbox}
           title="no jobs"
           description="no background jobs for this worker."
         />
@@ -42,16 +39,16 @@ export function ShellListView({ output }: ShellListViewProps) {
   }
 
   return (
-    <div className="border-t border-rule-2 bg-bg overflow-x-auto">
-      <table className="w-full font-mono text-[12px] text-ink">
+    <div className="shui-card scroll-x">
+      <table className="shui-table">
         <thead>
-          <tr className="bg-paper-2 border-b border-rule-2 text-[11px] uppercase tracking-[0.06em] text-ink-faint">
-            <th className="text-left font-normal px-3 py-1.5">job</th>
-            <th className="text-left font-normal px-2 py-1.5">status</th>
-            <th className="text-left font-normal px-2 py-1.5">started</th>
-            <th className="text-left font-normal px-2 py-1.5">duration</th>
-            <th className="text-left font-normal px-2 py-1.5">exit</th>
-            <th className="text-left font-normal px-3 py-1.5">output</th>
+          <tr className="head-paper">
+            <th className="pad-l">job</th>
+            <th>status</th>
+            <th>started</th>
+            <th>duration</th>
+            <th>exit</th>
+            <th className="pad-r">output</th>
           </tr>
         </thead>
         <tbody>
@@ -60,38 +57,32 @@ export function ShellListView({ output }: ShellListViewProps) {
             const duration = jobDurationMs(j)
             const truncated = j.stdout_truncated || j.stderr_truncated
             return (
-              <tr key={j.id} className="border-b border-rule-2 last:border-b-0">
-                <td className="px-3 py-1.5">
-                  <code className="text-ink">{truncateMiddle(j.id, 18)}</code>
+              <tr key={j.id}>
+                <td className="pad-l">
+                  <code className="t-ink">{truncateMiddle(j.id, 18)}</code>
                 </td>
-                <td className="px-2 py-1.5">
-                  <span className="inline-flex items-center gap-1.5">
+                <td>
+                  <span className="shui-status-cell">
                     {j.status === 'running' ? (
                       <StatusDot tone="accent" pulse />
                     ) : null}
                     <StatusPill label={status.label} variant={status.tone} />
                   </span>
                 </td>
-                <td className="px-2 py-1.5 text-ink-faint tabular-nums">
-                  {formatEpochMs(j.started_at_ms)}
-                </td>
-                <td className="px-2 py-1.5 text-ink-faint tabular-nums">
+                <td className="t-faint num">{formatEpochMs(j.started_at_ms)}</td>
+                <td className="t-faint num">
                   {duration != null ? formatDurationMs(duration) : '—'}
                 </td>
-                <td className="px-2 py-1.5 tabular-nums">
+                <td className="num">
                   {j.exit_code == null ? (
-                    <span className="text-ink-faint">—</span>
+                    <span className="t-faint">—</span>
                   ) : (
-                    <span
-                      className={
-                        j.exit_code === 0 ? 'text-accent' : 'text-warn'
-                      }
-                    >
+                    <span className={j.exit_code === 0 ? 't-accent' : 't-warn'}>
                       {j.exit_code}
                     </span>
                   )}
                 </td>
-                <td className="px-3 py-1.5 text-ink-faint">
+                <td className="t-faint pad-r">
                   {truncated ? '✂ truncated' : '—'}
                 </td>
               </tr>
@@ -99,7 +90,7 @@ export function ShellListView({ output }: ShellListViewProps) {
           })}
         </tbody>
       </table>
-      <div className="px-3 py-1.5 font-mono text-[11px] text-ink-ghost border-t border-rule-2">
+      <div className="shui-table-footnote">
         summaries only — full output via shell::status
       </div>
     </div>
diff --git a/console/web/src/components/chat/shell/StatusView.tsx b/shell/ui/src/function-trigger/StatusView.tsx
similarity index 91%
rename from console/web/src/components/chat/shell/StatusView.tsx
rename to shell/ui/src/function-trigger/StatusView.tsx
index 1b9c3d7a3..fb7be76c0 100644
--- a/console/web/src/components/chat/shell/StatusView.tsx
+++ b/shell/ui/src/function-trigger/StatusView.tsx
@@ -1,14 +1,5 @@
-import {
-  formatAgeSecs,
-  pillForExit,
-  truncateMiddle,
-} from '@/components/chat/sandbox/format'
-import { AnsiOutput } from '@/components/chat/sandbox/terminal/AnsiOutput'
-import {
-  Chip,
-  FooterPill,
-  Terminal,
-} from '@/components/chat/sandbox/terminal/Terminal'
+import { formatAgeSecs, pillForExit, truncateMiddle } from '../lib/format'
+import { AnsiOutput, Chip, FooterPill, Terminal } from '../lib/terminal'
 import {
   formatArgv,
   formatEpochMs,
diff --git a/console/web/src/components/chat/shell/__tests__/format.test.ts b/shell/ui/src/function-trigger/__tests__/format.test.ts
similarity index 100%
rename from console/web/src/components/chat/shell/__tests__/format.test.ts
rename to shell/ui/src/function-trigger/__tests__/format.test.ts
diff --git a/console/web/src/components/chat/shell/__tests__/parsers.test.ts b/shell/ui/src/function-trigger/__tests__/parsers.test.ts
similarity index 100%
rename from console/web/src/components/chat/shell/__tests__/parsers.test.ts
rename to shell/ui/src/function-trigger/__tests__/parsers.test.ts
diff --git a/console/web/src/components/chat/shell/format.ts b/shell/ui/src/function-trigger/format.ts
similarity index 89%
rename from console/web/src/components/chat/shell/format.ts
rename to shell/ui/src/function-trigger/format.ts
index cee54028f..3b73fa611 100644
--- a/console/web/src/components/chat/shell/format.ts
+++ b/shell/ui/src/function-trigger/format.ts
@@ -1,8 +1,8 @@
 /* Pure formatting helpers shared by the shell renderers. No React, no
    DOM access — deterministic transforms over the parsed shell payloads.
-   Generic byte/mode/time/quoting helpers come from sandbox/format. */
+   Generic byte/mode/time/quoting helpers come from ../lib/format. */
 
-import { formatMtime, quoteShellArg } from '@/components/chat/sandbox/format'
+import { formatMtime, quoteShellArg } from '../lib/format'
 import type { JobStatus } from './parsers'
 
 /** Render an ExecRequest command line for the terminal prompt.
@@ -25,7 +25,7 @@ export function formatArgv(argv: string[]): string {
 }
 
 /** Epoch-millis (`started_at_ms`/`finished_at_ms`) → short relative
-    time, via sandbox `formatMtime` (which takes unix seconds). */
+    time, via `formatMtime` (which takes unix seconds). */
 export function formatEpochMs(ms: number): string {
   return formatMtime(Math.floor(ms / 1000))
 }
diff --git a/console/web/src/components/chat/shell/index.tsx b/shell/ui/src/function-trigger/index.tsx
similarity index 63%
rename from console/web/src/components/chat/shell/index.tsx
rename to shell/ui/src/function-trigger/index.tsx
index 92360449a..046a8e2c4 100644
--- a/console/web/src/components/chat/shell/index.tsx
+++ b/shell/ui/src/function-trigger/index.tsx
@@ -1,17 +1,35 @@
-import { SandboxErrorView } from '@/components/chat/sandbox/ErrorView'
-import type { FunctionTriggerMessage } from '@/types/chat'
+/**
+ * Injected function-trigger renderer for the `shell::*` family — moved
+ * out of the console SPA (formerly console/web/src/components/chat/shell/)
+ * into the worker's own injected UI, so the rendering ships and versions
+ * with the worker (the iii-directory precedent).
+ *
+ * Matches only the ids in `SHELL_FUNCTION_IDS`. Pending-approval
+ * messages return null from `tryRender` so the console's approval bar
+ * keeps handling them; the compact previews render through
+ * `tryRenderPreview`. Error outputs are normalised by
+ * `parseShellErrorDisplay` (S-code lifting + generic denial shapes) and
+ * rendered by the shared error cards.
+ */
+
+import type {
+  FunctionTriggerMessage,
+  FunctionTriggerRenderer,
+} from '@iii-dev/console-ui'
+import { ErrorDisplayView } from '../lib/errors'
 import { ShellConfigStatusView } from './ConfigStatusView'
 import { ShellExecBgPreview, ShellExecBgView } from './ExecBgView'
 import { ShellExecPreview, ShellExecView } from './ExecView'
-import { FsChmodView } from './FsChmodView'
-import { FsGrepView } from './FsGrepView'
-import { FsLsView } from './FsLsView'
-import { FsMkdirView } from './FsMkdirView'
-import { FsMvView } from './FsMvView'
-import { FsReadView } from './FsReadView'
-import { FsRmView } from './FsRmView'
-import { FsSedView } from './FsSedView'
-import { FsStatView } from './FsStatView'
+import { FsSedView, FsGrepView } from './FsSearchViews'
+import {
+  FsChmodView,
+  FsLsView,
+  FsMkdirView,
+  FsMvView,
+  FsReadView,
+  FsRmView,
+  FsStatView,
+} from './FsViews'
 import { FsWriteView } from './FsWriteView'
 import { ShellKillPreview, ShellKillView } from './KillView'
 import { ShellListView } from './ListView'
@@ -22,28 +40,22 @@ import {
 } from './parsers'
 import { ShellStatusView } from './StatusView'
 
-/* The known shell::* set lives in parsers.ts (SHELL_FUNCTION_IDS) so
-   the dispatcher and the schemas share one source of truth. Re-exported
-   here for FCM symmetry with the sandbox module. */
-export { isShellFunction, SHELL_FUNCTION_IDS } from './parsers'
-
-/* Public surface mirrors the sandbox module exactly. Both helpers
-   return `null` for unknown function ids or unparseable payloads so
-   the caller can silently fall back to the existing JSON view. */
-export function ShellFunctionIdLabel({ functionId }: { functionId: string }) {
+/** Renders outside the script's scope wrapper (the card header), so it
+    uses inline token styles instead of scoped classes. */
+function ShellFunctionIdLabel({ functionId }: { functionId: string }) {
   if (!functionId.startsWith('shell::')) {
-    return <span className="text-ink">{functionId}</span>
+    return <span style={{ color: 'var(--color-ink)' }}>{functionId}</span>
   }
   const tail = functionId.slice('shell::'.length)
   return (
     <>
-      <span className="text-ink-faint">shell::</span>
-      <span className="text-ink font-medium">{tail}</span>
+      <span style={{ color: 'var(--color-ink-faint)' }}>shell::</span>
+      <span style={{ color: 'var(--color-ink)', fontWeight: 500 }}>{tail}</span>
     </>
   )
 }
 
-function tryRender(message: FunctionTriggerMessage): React.ReactNode | null {
+function render(message: FunctionTriggerMessage): React.ReactNode | null {
   if (!isShellFunction(message.functionId)) return null
   if (message.pendingApproval) return null
 
@@ -59,7 +71,7 @@ function tryRender(message: FunctionTriggerMessage): React.ReactNode | null {
   const errorDisplay =
     !running && rawOutput != null ? parseShellErrorDisplay(rawOutput) : null
   if (errorDisplay) {
-    return <SandboxErrorView display={errorDisplay} />
+    return <ErrorDisplayView display={errorDisplay} />
   }
 
   switch (message.functionId) {
@@ -117,10 +129,14 @@ function tryRenderPreview(
   }
 }
 
-export const ShellToolView = {
-  isShellFunction,
-  tryRender,
-  /** Alias kept for FCM symmetry; running state lives inside `tryRender`. */
-  tryRenderRunning: tryRender,
-  tryRenderPreview,
+export function createShellTriggerRenderer(): FunctionTriggerRenderer {
+  return {
+    id: 'shell/page.js#shell',
+    isMatch: isShellFunction,
+    tryRender: render,
+    /** Alias kept deliberately; running state lives inside `render`. */
+    tryRenderRunning: render,
+    tryRenderPreview,
+    FunctionIdLabel: ShellFunctionIdLabel,
+  }
 }
diff --git a/console/web/src/components/chat/shell/parsers.ts b/shell/ui/src/function-trigger/parsers.ts
similarity index 93%
rename from console/web/src/components/chat/shell/parsers.ts
rename to shell/ui/src/function-trigger/parsers.ts
index 37646659f..55f773a7d 100644
--- a/console/web/src/components/chat/shell/parsers.ts
+++ b/shell/ui/src/function-trigger/parsers.ts
@@ -5,12 +5,11 @@ import {
   fsEntrySchema,
   fsMatchSchema,
   fsSedFileResultSchema,
-  parseSandboxErrorDisplay,
-  type SandboxErrorDisplay,
   safeParseRequest,
   safeParseResponse,
   unwrapEnvelope,
-} from '@/components/chat/sandbox/parsers'
+} from '../lib/envelope'
+import { type ErrorDisplay, parseErrorDisplay } from '../lib/error-display'
 
 /* Zod schemas mirroring the shell::* request/response shapes from
    `workers/shell/src/{functions/types,jobs,target,configuration}.rs` and
@@ -23,12 +22,8 @@ import {
    renderers only read what they need. */
 
 // Re-exports so the shell views import everything from one place.
-export type {
-  FsEntry,
-  FsMatch,
-  FsSedFileResult,
-  SandboxErrorDisplay,
-} from '@/components/chat/sandbox/parsers'
+export type { FsEntry, FsMatch, FsSedFileResult } from '../lib/envelope'
+export type { ErrorDisplay } from '../lib/error-display'
 export {
   extractFirstJsonObject,
   fsEntrySchema,
@@ -146,7 +141,7 @@ export type WriteContent = z.infer<typeof writeContentSchema>
       so junk values don't kill the whole card.
     - `cwd`/`env`/`stdin` are `Option<T>` + `serde(default)` ⇒ both null
       and absent are legal on the wire: `.nullable().optional()`.
-    - `env` is a BTreeMap, not sandbox's EnvShape union: plain record. */
+    - `env` is a BTreeMap: plain record. */
 export const shellExecRequestSchema = z.object({
   command: z.string(),
   args: z.array(z.string()).nullable().optional(),
@@ -251,8 +246,8 @@ export type ShellConfigStatusResponse = z.infer<
 
 // ---------------------------------------------------------------------------
 // Filesystem — shell::fs::* (`src/fs/mod.rs`). FsEntry/FsMatch/
-// FsSedFileResult are reused from sandbox/parsers — they already encode
-// the `file`→`path` alias and absent-`error`→null transforms.
+// FsSedFileResult live in ../lib/envelope — they already encode the
+// `file`→`path` alias and absent-`error`→null transforms.
 // ---------------------------------------------------------------------------
 
 /** ls / stat / read share one request shape. */
@@ -447,9 +442,9 @@ export type FsReadResponse = z.infer<typeof fsReadResponseSchema>
 // ---------------------------------------------------------------------------
 
 /** The SDK `ErrorBody` carrying a typed shell S-code (`IIIError::Remote`).
-    No `type` field — sandbox's `sandboxErrorWireSchema` requires one, so
-    shell errors need this dedicated schema. The regex keeps it from
-    false-positiving on arbitrary `{ code, message }` objects. */
+    No `type` field — the generic wire schema in ../lib/errors requires
+    one, so shell errors need this dedicated schema. The regex keeps it
+    from false-positiving on arbitrary `{ code, message }` objects. */
 export const shellErrorWireSchema = z.object({
   code: z.string().regex(/^S\d{3}$/),
   message: z.string(),
@@ -472,10 +467,10 @@ export const S_CODE_LABEL: Record<string, string> = {
   S300: 'vm boot failed',
 }
 
-/** Lift a flat shell error into the existing `SandboxErrorDisplay` wire
-    variant so `SandboxErrorView` renders it unchanged (S-code Badge +
-    label + message). */
-function shellWire(e: { code: string; message: string }): SandboxErrorDisplay {
+/** Lift a flat shell error into the shared `ErrorDisplay` wire variant so
+    `ErrorDisplayView` renders it unchanged (S-code Badge + label +
+    message). */
+function shellWire(e: { code: string; message: string }): ErrorDisplay {
   return {
     variant: 'wire',
     error: {
@@ -512,7 +507,7 @@ export function stripHandlerPrefix(message: string): string {
 /** Synthesize a wire display from an S-code embedded in free text —
     `"trigger_failed: IIIInvocationError: S211: no such job: job-x"` →
     `{ code: 'S211', message: 'no such job: job-x' }`. */
-function wireFromText(text: string): SandboxErrorDisplay | null {
+function wireFromText(text: string): ErrorDisplay | null {
   const match = text.match(/\b(S\d{3}):\s*([\s\S]+)/)
   if (!match) return null
   return shellWire({
@@ -560,16 +555,13 @@ function collectStringCandidates(value: unknown): string[] {
  *    envelope whose `reason` reads e.g. `"trigger_failed:
  *    IIIInvocationError: S211: no such job: job-x"` — scan every string
  *    candidate and synthesize the wire display from text.
- * 3. Delegate to `parseSandboxErrorDisplay` for denials without S-codes,
- *    generic function_error envelopes, and harness wrappers (identical
- *    across families).
+ * 3. Delegate to `parseErrorDisplay` for denials without S-codes,
+ *    generic function_error envelopes, and harness wrappers.
  *
- * Returns the existing `SandboxErrorDisplay` union, rendered by
- * `SandboxErrorView` unchanged.
+ * Returns the shared `ErrorDisplay` union, rendered by `ErrorDisplayView`
+ * unchanged.
  */
-export function parseShellErrorDisplay(
-  value: unknown,
-): SandboxErrorDisplay | null {
+export function parseShellErrorDisplay(value: unknown): ErrorDisplay | null {
   const candidates = collectErrorCandidates(value)
 
   for (const candidate of candidates) {
@@ -590,5 +582,5 @@ export function parseShellErrorDisplay(
     if (synthesized) return synthesized
   }
 
-  return parseSandboxErrorDisplay(value)
+  return parseErrorDisplay(value)
 }
diff --git a/console/web/src/components/chat/shell/shared.tsx b/shell/ui/src/function-trigger/shared.tsx
similarity index 92%
rename from console/web/src/components/chat/shell/shared.tsx
rename to shell/ui/src/function-trigger/shared.tsx
index ea6e54db6..7865ca278 100644
--- a/console/web/src/components/chat/shell/shared.tsx
+++ b/shell/ui/src/function-trigger/shared.tsx
@@ -1,5 +1,5 @@
-import { truncateMiddle } from '@/components/chat/sandbox/format'
-import { Chip } from '@/components/chat/sandbox/terminal/Terminal'
+import { truncateMiddle } from '../lib/format'
+import { Chip } from '../lib/terminal'
 import type { ShellTarget } from './parsers'
 
 /** Narrow a request `target` to the sandbox variant. Also the views'
diff --git a/shell/ui/src/lib/envelope.ts b/shell/ui/src/lib/envelope.ts
new file mode 100644
index 000000000..72fb5bc49
--- /dev/null
+++ b/shell/ui/src/lib/envelope.ts
@@ -0,0 +1,167 @@
+/* Harness-envelope helpers + the wire building blocks the shell family
+   shares with the worker's other fs-shaped payloads. Ported from the
+   console's sandbox/parsers.ts when the shell function-trigger family
+   moved into this worker's injected UI. */
+
+import { z } from 'zod'
+
+/** `engine/src/protocol.rs::StreamChannelRef` (untagged JSON object). */
+export const streamChannelRefSchema = z.object({
+  channel_id: z.string(),
+  access_key: z.string(),
+  direction: z.enum(['read', 'write']),
+})
+export type StreamChannelRef = z.infer<typeof streamChannelRefSchema>
+
+/** `iii-shell-proto::FsEntry`. */
+export const fsEntrySchema = z.object({
+  name: z.string(),
+  is_dir: z.boolean(),
+  size: z.number(),
+  mode: z.string(),
+  mtime: z.number(),
+  is_symlink: z.boolean(),
+})
+export type FsEntry = z.infer<typeof fsEntrySchema>
+
+/** `iii-shell-proto::FsMatch`. `path` is canonical; older guests sent
+    `file` — the transform peels that legacy spelling. */
+export const fsMatchSchema = z
+  .object({
+    path: z.string().optional(),
+    file: z.string().optional(),
+    line: z.number(),
+    content: z.string(),
+  })
+  .transform((m) => ({
+    path: m.path ?? m.file ?? '',
+    line: m.line,
+    content: m.content,
+  }))
+export type FsMatch = z.infer<typeof fsMatchSchema>
+
+/** `iii-shell-proto::FsSedFileResult`. */
+export const fsSedFileResultSchema = z
+  .object({
+    path: z.string().optional(),
+    file: z.string().optional(),
+    replacements: z.number(),
+    success: z.boolean(),
+    error: z.string().nullable().optional(),
+  })
+  .transform((r) => ({
+    path: r.path ?? r.file ?? '',
+    replacements: r.replacements,
+    success: r.success,
+    error: r.error ?? null,
+  }))
+export type FsSedFileResult = z.infer<typeof fsSedFileResultSchema>
+
+/**
+ * The harness wraps every tool result in a `{ content: ContentBlock[],
+ * details: unknown, terminate: boolean }` envelope before relaying it to
+ * the agent; the console receives the same shape via the engine's
+ * function_call output stream.
+ *
+ * This peels the wrapper so renderers operate on the flat response.
+ * Idempotent — calling it on an already-flat payload returns the input
+ * unchanged. The discriminator is `Array.isArray(value.content)` —
+ * that's the structural marker the harness sets unconditionally for
+ * every wrapped result.
+ */
+export function unwrapEnvelope(value: unknown): unknown {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return value
+  }
+  const obj = value as Record<string, unknown>
+  if (Array.isArray(obj.content) && 'details' in obj) {
+    return obj.details
+  }
+  return value
+}
+
+/** Pull the first balanced `{…}` JSON object out of a string. */
+export function extractFirstJsonObject(text: string): unknown | null {
+  const start = text.indexOf('{')
+  if (start === -1) return null
+  let depth = 0
+  for (let i = start; i < text.length; i++) {
+    const ch = text[i]
+    if (ch === '{') depth++
+    else if (ch === '}') {
+      depth--
+      if (depth === 0) {
+        try {
+          return JSON.parse(text.slice(start, i + 1))
+        } catch {
+          return null
+        }
+      }
+    }
+  }
+  return null
+}
+
+/** Text pulled out of a harness `content: ContentBlock[]` array. */
+export function contentBlocksText(content: unknown): string | undefined {
+  if (!Array.isArray(content)) return undefined
+  const parts: string[] = []
+  for (const block of content) {
+    if (!block || typeof block !== 'object') continue
+    const obj = block as Record<string, unknown>
+    if (
+      obj.type === 'text' &&
+      typeof obj.text === 'string' &&
+      obj.text.length > 0
+    ) {
+      parts.push(obj.text)
+    }
+  }
+  return parts.length > 0 ? parts.join('\n') : undefined
+}
+
+/** Gather every sub-value that might carry an error payload: the value
+    itself, its unwrapped envelope, `value.error`, `error.details`,
+    `error.message`, and `content[]` text blocks. */
+export function collectErrorCandidates(value: unknown): unknown[] {
+  const seen = new Set<unknown>()
+  const out: unknown[] = []
+  const push = (candidate: unknown) => {
+    if (seen.has(candidate)) return
+    seen.add(candidate)
+    out.push(candidate)
+  }
+
+  push(value)
+  push(unwrapEnvelope(value))
+
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const obj = value as Record<string, unknown>
+    if (obj.error && typeof obj.error === 'object') {
+      const err = obj.error as Record<string, unknown>
+      push(err)
+      if ('details' in err) push(err.details)
+      if (typeof err.message === 'string') push(err.message)
+      const text = contentBlocksText(err.content)
+      if (text) push(text)
+    }
+  }
+
+  return out
+}
+
+export function safeParseRequest<T>(
+  schema: z.ZodType<T>,
+  value: unknown,
+): T | null {
+  const parsed = schema.safeParse(value ?? {})
+  return parsed.success ? parsed.data : null
+}
+
+export function safeParseResponse<T>(
+  schema: z.ZodType<T>,
+  value: unknown,
+): T | null {
+  const parsed = schema.safeParse(unwrapEnvelope(value))
+  return parsed.success ? parsed.data : null
+}
diff --git a/shell/ui/src/lib/error-display.ts b/shell/ui/src/lib/error-display.ts
new file mode 100644
index 000000000..fcbd3f9ba
--- /dev/null
+++ b/shell/ui/src/lib/error-display.ts
@@ -0,0 +1,224 @@
+/* Error-display normalisation for every failure shape the console may
+   hand a shell renderer: flat wire errors, harness `{ content, details }`
+   wrappers, translate `{ error: { kind, message, … } }` envelopes,
+   approval denials, and fail-closed dispatch-policy denials. Ported from
+   the console's sandbox/parsers.ts when the shell function-trigger family
+   moved into this worker's injected UI.
+
+   Deliberately React-free (the cards live in errors.tsx): parsing stays
+   importable from parsers.ts and its node-run tests without touching
+   `@iii-dev/console-ui`, whose module entry throws outside the console. */
+
+import { z } from 'zod'
+import {
+  collectErrorCandidates,
+  contentBlocksText,
+  extractFirstJsonObject,
+  unwrapEnvelope,
+} from './envelope'
+
+/** The Stripe-style flat error payload (sandbox-daemon errors.rs shape) —
+    shell forwards these verbatim for sandbox-target calls. */
+export const errorWireSchema = z.object({
+  type: z.string(),
+  code: z.string().regex(/^S\d{3}$/),
+  message: z.string(),
+  docs_url: z.string().optional(),
+  retryable: z.boolean().optional(),
+  fix: z.unknown().optional(),
+  fix_note: z.string().nullable().optional(),
+})
+export type ErrorWire = z.infer<typeof errorWireSchema>
+
+const denialEnvelopeSchema = z.object({
+  schema_version: z.number().optional(),
+  status: z.string().optional(),
+  denied_by: z.string().optional(),
+  function_id: z.string().optional(),
+  reason: z.string().optional(),
+})
+export type DenialEnvelopeWire = z.infer<typeof denialEnvelopeSchema>
+
+const functionErrorEnvelopeSchema = z.object({
+  kind: z.string(),
+  message: z.string(),
+  details: z.unknown().optional(),
+  content: z.array(z.unknown()).optional(),
+})
+
+export type InvocationError = {
+  title: string
+  message: string
+  functionId?: string
+  deniedBy?: string
+  reason?: string
+  detailText?: string
+}
+
+/**
+ * A fail-closed dispatch-policy denial: the calling agent's `functions`
+ * allow-list does not cover the function it tried. Distinct from a
+ * permission denial (approval gate) — structural, not retryable.
+ */
+export interface DispatchDenial {
+  /** The blocked function id, when the message names it. */
+  functionId?: string
+  /** Namespace prefix of `functionId` (e.g. `shell` from `shell::exec`). */
+  namespace?: string
+  /** The raw engine message, kept verbatim under the actionable hint. */
+  message: string
+}
+
+export type ErrorDisplay =
+  | { variant: 'wire'; error: ErrorWire }
+  | { variant: 'invocation'; error: InvocationError }
+  | { variant: 'dispatch-denied'; error: DispatchDenial }
+
+function tryParseWire(value: unknown): ErrorWire | null {
+  const parsed = errorWireSchema.safeParse(unwrapEnvelope(value))
+  if (parsed.success) return parsed.data
+
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+  const obj = value as Record<string, unknown>
+  if (
+    obj.error === 'handler_error' ||
+    (typeof obj.code === 'string' && /^S\d{3}$/.test(obj.code))
+  ) {
+    const { error: _tag, ...rest } = obj
+    const tagged = errorWireSchema.safeParse(rest)
+    if (tagged.success) return tagged.data
+  }
+  return null
+}
+
+function tryParseDenial(value: unknown): DenialEnvelopeWire | null {
+  const parsed = denialEnvelopeSchema.safeParse(unwrapEnvelope(value))
+  if (!parsed.success) return null
+  if (parsed.data.status !== 'denied' && !parsed.data.denied_by) return null
+  return parsed.data
+}
+
+function denialToInvocation(
+  denial: DenialEnvelopeWire,
+  fallbackMessage?: string,
+  detailText?: string,
+): InvocationError {
+  const deniedBy = denial.denied_by
+  const title =
+    deniedBy === 'gate_unavailable'
+      ? 'Gate unavailable'
+      : deniedBy === 'permissions'
+        ? 'Permission denied'
+        : deniedBy === 'user'
+          ? 'Denied by user'
+          : denial.status === 'denied'
+            ? 'Denied'
+            : 'Trigger failed'
+  const message =
+    denial.reason ?? fallbackMessage ?? 'The trigger could not complete.'
+  return {
+    title,
+    message,
+    functionId: denial.function_id,
+    deniedBy,
+    reason: denial.reason,
+    detailText,
+  }
+}
+
+function invocationFromFunctionError(
+  envelope: z.infer<typeof functionErrorEnvelopeSchema>,
+): InvocationError | null {
+  const detailText = contentBlocksText(envelope.content)
+  const denial =
+    envelope.details != null ? tryParseDenial(envelope.details) : null
+  if (denial) {
+    return denialToInvocation(denial, envelope.message, detailText)
+  }
+  return {
+    title: 'Trigger failed',
+    message: envelope.message,
+    detailText,
+  }
+}
+
+/** Engine fail-closed dispatch-policy denial signature (harness policy.rs). */
+const DISPATCH_DENIAL_RE = /not permitted by this agent.?s dispatch policy/i
+/** `function <id> is not permitted …` — captures the blocked function id. */
+const DISPATCH_FN_RE = /function\s+([A-Za-z0-9_:-]+)\s+is not permitted/i
+
+/** A message-like string from a candidate, for signature scanning. */
+function candidateText(candidate: unknown): string | undefined {
+  if (typeof candidate === 'string') return candidate
+  if (candidate && typeof candidate === 'object' && !Array.isArray(candidate)) {
+    const msg = (candidate as Record<string, unknown>).message
+    if (typeof msg === 'string') return msg
+  }
+  return undefined
+}
+
+export function parseDispatchDenial(value: unknown): DispatchDenial | null {
+  for (const candidate of collectErrorCandidates(value)) {
+    const text = candidateText(candidate)
+    if (!text || !DISPATCH_DENIAL_RE.test(text)) continue
+    const functionId = text.match(DISPATCH_FN_RE)?.[1]
+    const namespace = functionId?.includes('::')
+      ? functionId.split('::')[0]
+      : undefined
+    return { functionId, namespace, message: text }
+  }
+  return null
+}
+
+/**
+ * Normalise every generic failure shape (the shell-specific S-code text
+ * scan lives in the family's parsers, layered on top of this).
+ */
+export function parseErrorDisplay(value: unknown): ErrorDisplay | null {
+  const candidates = collectErrorCandidates(value)
+
+  // Dispatch-policy denial is the most specific + actionable shape —
+  // detect it before the generic invocation-failed fallback swallows it.
+  const dispatchDenial = parseDispatchDenial(value)
+  if (dispatchDenial) {
+    return { variant: 'dispatch-denied', error: dispatchDenial }
+  }
+
+  for (const candidate of candidates) {
+    const wire = tryParseWire(candidate)
+    if (wire) return { variant: 'wire', error: wire }
+
+    if (typeof candidate === 'string') {
+      const embedded = extractFirstJsonObject(candidate)
+      if (embedded != null) {
+        const wireFromText = tryParseWire(embedded)
+        if (wireFromText) return { variant: 'wire', error: wireFromText }
+      }
+    }
+  }
+
+  for (const candidate of candidates) {
+    const denial = tryParseDenial(candidate)
+    if (denial) {
+      return {
+        variant: 'invocation',
+        error: denialToInvocation(denial),
+      }
+    }
+  }
+
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const parsed = functionErrorEnvelopeSchema.safeParse(
+      (value as Record<string, unknown>).error,
+    )
+    if (parsed.success && parsed.data.kind === 'function_error') {
+      const invocation = invocationFromFunctionError(parsed.data)
+      if (invocation) {
+        return { variant: 'invocation', error: invocation }
+      }
+    }
+  }
+
+  return null
+}
+
diff --git a/shell/ui/src/lib/errors.tsx b/shell/ui/src/lib/errors.tsx
new file mode 100644
index 000000000..f10c07ff7
--- /dev/null
+++ b/shell/ui/src/lib/errors.tsx
@@ -0,0 +1,175 @@
+/* The error cards — how a normalised `ErrorDisplay` (lib/error-display)
+   renders. Ported from the console's sandbox/ErrorView.tsx when the shell
+   function-trigger family moved into this worker's injected UI. */
+
+import { Badge } from '@iii-dev/console-ui'
+import { z } from 'zod'
+import type {
+  DispatchDenial,
+  ErrorDisplay,
+  ErrorWire,
+  InvocationError,
+} from './error-display'
+import { AnsiOutput } from './terminal'
+
+/** S200 exec-timeout errors smuggle the buffered streams in `fix`. */
+const execStreamsSchema = z.object({
+  stdout: z.string(),
+  stderr: z.string(),
+})
+
+function execStreamsFromFix(error: ErrorWire) {
+  if (error.code !== 'S200' || error.fix == null) return null
+  const parsed = execStreamsSchema.safeParse(error.fix)
+  if (!parsed.success) return null
+  const { stdout, stderr } = parsed.data
+  if (!stdout && !stderr) return null
+  return { stdout, stderr }
+}
+
+function WireErrorView({ error }: { error: ErrorWire }) {
+  const retryable = error.retryable === true
+  const streams = execStreamsFromFix(error)
+  return (
+    <div className="shui-card">
+      <div className="shui-slab warn">
+        <div className="shui-row gap8">
+          <Badge variant="warn">{error.code}</Badge>
+          <span className="shui-err-label">{error.type}</span>
+          {retryable ? (
+            <Badge variant="accent" className="shui-pill-flat">
+              retryable
+            </Badge>
+          ) : null}
+        </div>
+
+        <pre className="shui-pre out">
+          <code>{error.message}</code>
+        </pre>
+
+        {error.fix_note ? (
+          <div className="shui-note">{error.fix_note}</div>
+        ) : null}
+
+        {error.docs_url ? (
+          <a
+            href={error.docs_url}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="shui-doclink"
+          >
+            docs ↗
+          </a>
+        ) : null}
+
+        {streams ? (
+          <div className="shui-streams">
+            <AnsiOutput stdout={streams.stdout} stderr={streams.stderr} />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function InvocationErrorView({ error }: { error: InvocationError }) {
+  const badge = error.deniedBy ?? 'error'
+  const showDetailText =
+    error.detailText &&
+    error.detailText !== error.message &&
+    error.detailText !== error.reason
+
+  return (
+    <div className="shui-card">
+      <div className="shui-slab warn">
+        <div className="shui-row gap8">
+          <Badge variant="warn">{badge}</Badge>
+          <span className="shui-err-label">{error.title}</span>
+        </div>
+
+        {error.functionId ? (
+          <div className="shui-note plain">
+            <span className="shui-err-label">function</span>{' '}
+            <code className="t-ink">{error.functionId}</code>
+          </div>
+        ) : null}
+
+        <pre className="shui-pre out">
+          <code>{error.message}</code>
+        </pre>
+
+        {showDetailText ? (
+          <pre className="shui-pre detail">
+            <code>{error.detailText}</code>
+          </pre>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * A fail-closed dispatch-policy denial. The card names the blocked id and
+ * tells the operator exactly where to grant it.
+ */
+function DispatchDeniedView({ denial }: { denial: DispatchDenial }) {
+  const fn = denial.functionId
+  return (
+    <div className="shui-card">
+      <div className="shui-slab warn">
+        <div className="shui-row gap8">
+          <Badge variant="warn">denied</Badge>
+          <span className="shui-err-label">dispatch policy</span>
+        </div>
+
+        {fn ? (
+          <div className="shui-note plain">
+            <span className="shui-err-label">blocked</span>{' '}
+            <code className="t-ink">{fn}</code>
+          </div>
+        ) : null}
+
+        <div className="shui-line">
+          {fn ? (
+            <>
+              This agent's allow-list doesn't include <code>{fn}</code>. Grant
+              it where the agent is defined:
+            </>
+          ) : (
+            <>
+              This function isn't in the agent's allow-list. Grant it where the
+              agent is defined:
+            </>
+          )}
+          <ul className="shui-denial-list">
+            <li>
+              <span className="t-ink">workflow node</span> — its{' '}
+              <code className="t-ink">agent.functions</code> (or the def's{' '}
+              <code className="t-ink">default_functions</code>) narrows it out.
+              Widen that, or drop the narrowing — nodes inherit the run's full
+              reach by default.
+            </li>
+            <li>
+              <span className="t-ink">chat / session</span> — add it to{' '}
+              <code className="t-ink">options.functions.allow</code>.
+            </li>
+          </ul>
+        </div>
+
+        <pre className="shui-pre detail">
+          <code>{denial.message}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+export function ErrorDisplayView({ display }: { display: ErrorDisplay }) {
+  if (display.variant === 'wire') {
+    return <WireErrorView error={display.error} />
+  }
+  if (display.variant === 'dispatch-denied') {
+    return <DispatchDeniedView denial={display.error} />
+  }
+  return <InvocationErrorView error={display.error} />
+}
diff --git a/shell/ui/src/lib/format.ts b/shell/ui/src/lib/format.ts
new file mode 100644
index 000000000..d600fbde6
--- /dev/null
+++ b/shell/ui/src/lib/format.ts
@@ -0,0 +1,114 @@
+/* Pure formatting helpers shared by the shell renderers and the explorer
+   page. No React, no DOM access — deterministic transforms over parsed
+   wire payloads. Ported from the console's sandbox/format.ts when the
+   shell function-trigger family moved into this worker's injected UI. */
+
+/** `1024` → `"1.0 KiB"`. Pin to KiB/MiB/GiB so the unit matches the
+    worker's size-cap constants. */
+export function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return '—'
+  if (bytes < 1024) return `${bytes} B`
+  const kib = bytes / 1024
+  if (kib < 1024) return `${kib.toFixed(kib < 10 ? 1 : 0)} KiB`
+  const mib = kib / 1024
+  if (mib < 1024) return `${mib.toFixed(mib < 10 ? 1 : 0)} MiB`
+  const gib = mib / 1024
+  return `${gib.toFixed(gib < 10 ? 1 : 0)} GiB`
+}
+
+/** Octal mode string `"0755"` → POSIX `"rwxr-xr-x"`. For directories the
+    caller can prepend the leading `d`. */
+export function formatMode(mode: string): string {
+  // Tolerate `"0755"`, `"755"`, leading `"o"`, or junk. Extract the last
+  // 3 octal digits and decode each; fall back to the original string if
+  // it doesn't parse.
+  const digits = mode.match(/[0-7]{3}$/)?.[0]
+  if (!digits) return mode
+  const bits = ['r', 'w', 'x'] as const
+  let out = ''
+  for (const ch of digits) {
+    const n = Number.parseInt(ch, 10)
+    for (let i = 0; i < 3; i++) {
+      out += n & (4 >> i) ? bits[i] : '-'
+    }
+  }
+  return out
+}
+
+/** Unix seconds → short relative time ("3m ago", "2d ago"). `mtime` from
+    the worker is seconds since epoch (or 0 for unset/unknown). */
+export function formatMtime(unixSecs: number, now = Date.now()): string {
+  if (!unixSecs || unixSecs <= 0) return '—'
+  const deltaSecs = Math.max(0, Math.floor(now / 1000 - unixSecs))
+  if (deltaSecs < 60) return deltaSecs <= 1 ? 'just now' : `${deltaSecs}s ago`
+  const mins = Math.floor(deltaSecs / 60)
+  if (mins < 60) return `${mins}m ago`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days}d ago`
+  const months = Math.floor(days / 30)
+  if (months < 12) return `${months}mo ago`
+  return `${Math.floor(months / 12)}y ago`
+}
+
+/** Truncate the middle of a long path/identifier so head and tail stay
+    visible. `"a/very/long/path"` → `"a/very/…/path"`. */
+export function truncateMiddle(value: string, maxLen = 28): string {
+  if (value.length <= maxLen) return value
+  const head = Math.ceil((maxLen - 1) / 2)
+  const tail = Math.floor((maxLen - 1) / 2)
+  return `${value.slice(0, head)}…${value.slice(value.length - tail)}`
+}
+
+/** Humanize an age in seconds ("2m", "3h"). */
+export function formatAgeSecs(secs: number): string {
+  if (!Number.isFinite(secs) || secs < 0) return '—'
+  if (secs < 60) return `${secs}s`
+  const mins = Math.floor(secs / 60)
+  if (mins < 60) return `${mins}m`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours}h`
+  const days = Math.floor(hours / 24)
+  return `${days}d`
+}
+
+/** Pick a tone for an exit code pill. Null/missing → warn ("no exit"). */
+export function pillForExit(exitCode: number | null | undefined): {
+  label: string
+  tone: 'accent' | 'warn' | 'alert' | 'default'
+} {
+  if (exitCode === 0) return { label: 'exit 0', tone: 'accent' }
+  if (exitCode === null || exitCode === undefined) {
+    return { label: 'no exit', tone: 'warn' }
+  }
+  return { label: `exit ${exitCode}`, tone: 'alert' }
+}
+
+/** Quote an argv slot for terminal display. Single-tokens come through
+    bare; anything with whitespace, quotes, or shell metacharacters gets
+    single-quoted with embedded single quotes escaped via the POSIX
+    `'\''` dance. Output is human-paste-able into a shell. */
+export function quoteShellArg(arg: string): string {
+  if (arg === '') return "''"
+  if (/^[A-Za-z0-9_@%+=:,./-]+$/.test(arg)) return arg
+  return `'${arg.replace(/'/g, `'\\''`)}'`
+}
+
+/** A human-readable message from ANY thrown value. The bus client throws
+    structured payloads (plain objects), which `String(err)` renders as
+    the useless `[object Object]` — surface their JSON instead. */
+export function errorMessage(err: unknown): string {
+  if (err instanceof Error) return err.message
+  if (typeof err === 'string') return err
+  if (err && typeof err === 'object') {
+    const msg = (err as Record<string, unknown>).message
+    if (typeof msg === 'string' && msg.length > 0) return msg
+    try {
+      return JSON.stringify(err)
+    } catch {
+      return String(err)
+    }
+  }
+  return String(err)
+}
diff --git a/shell/ui/src/lib/highlight.tsx b/shell/ui/src/lib/highlight.tsx
new file mode 100644
index 000000000..fc0633eb9
--- /dev/null
+++ b/shell/ui/src/lib/highlight.tsx
@@ -0,0 +1,84 @@
+/**
+ * Best-effort match highlighting for grep/search-style views. The worker
+ * uses the Rust `regex` crate; JS regex covers the simple patterns agents
+ * use and we fall back to substring matching when the pattern doesn't
+ * compile — or when `isRegex` is false, since the query is then a literal
+ * and regex metacharacters must not fire. Ported from the console's
+ * sandbox/highlight.tsx.
+ */
+import type { ReactNode } from 'react'
+
+export interface HighlightOptions {
+  /** Treat `query` as a regex; false = literal substring match. */
+  isRegex: boolean
+  ignoreCase: boolean
+}
+
+export function renderWithHighlight(
+  line: string,
+  query: string,
+  { isRegex, ignoreCase }: HighlightOptions,
+): ReactNode {
+  if (!query) return line
+  if (isRegex) {
+    let re: RegExp | null = null
+    try {
+      re = new RegExp(query, ignoreCase ? 'gi' : 'g')
+    } catch {
+      re = null
+    }
+    if (re) return highlightRegex(line, re)
+  }
+  return highlightSubstring(line, query, ignoreCase)
+}
+
+function highlightRegex(line: string, re: RegExp): ReactNode {
+  const parts: ReactNode[] = []
+  let last = 0
+  let n = 0
+  for (const hit of line.matchAll(re)) {
+    const start = hit.index ?? 0
+    const text = hit[0]
+    // Skip zero-width matches that would otherwise loop forever.
+    if (text.length === 0) continue
+    if (start > last) parts.push(line.slice(last, start))
+    parts.push(
+      <span key={`m:${n}`} className="shui-hl">
+        {text}
+      </span>,
+    )
+    last = start + text.length
+    n++
+    if (n > 200) break
+  }
+  if (last < line.length) parts.push(line.slice(last))
+  return parts
+}
+
+// Substring path: literal queries and patterns the JS regex engine rejects.
+function highlightSubstring(
+  line: string,
+  query: string,
+  ignoreCase: boolean,
+): ReactNode {
+  const needle = ignoreCase ? query.toLowerCase() : query
+  const hay = ignoreCase ? line.toLowerCase() : line
+  const parts: ReactNode[] = []
+  let i = 0
+  let n = 0
+  while (i < line.length) {
+    const j = hay.indexOf(needle, i)
+    if (j === -1) {
+      parts.push(line.slice(i))
+      break
+    }
+    if (j > i) parts.push(line.slice(i, j))
+    parts.push(
+      <span key={`s:${n++}`} className="shui-hl">
+        {line.slice(j, j + query.length)}
+      </span>,
+    )
+    i = j + query.length
+  }
+  return parts
+}
diff --git a/shell/ui/src/lib/terminal.tsx b/shell/ui/src/lib/terminal.tsx
new file mode 100644
index 000000000..7bc8eceaa
--- /dev/null
+++ b/shell/ui/src/lib/terminal.tsx
@@ -0,0 +1,182 @@
+/* Terminal chrome + small chips/pills shared by the shell renderers —
+   ported from the console's sandbox terminal components when the shell
+   function-trigger family moved into this worker's injected UI. Styling
+   lives in ../../styles.css under the `shui-` classes (scoped to
+   [data-iii-ui="shell"]); tone pills reuse the shared `Badge`. */
+
+import { Badge } from '@iii-dev/console-ui'
+import type * as React from 'react'
+
+function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ')
+}
+
+export function Prompt({
+  symbol = '$',
+  pulse,
+}: {
+  symbol?: string
+  pulse?: boolean
+}) {
+  return <span className={cx('shui-prompt', pulse && 'pulse')}>{symbol}</span>
+}
+
+/** A small mono pill used for header chips (path / mode / cwd). Distinct
+    from `Badge` (text-only) — Chip carries a key and value pair. */
+interface ChipProps {
+  label?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function Chip({ label, children, className }: ChipProps) {
+  return (
+    <span className={cx('shui-chip', className)}>
+      {label ? <span className="k">{label}</span> : null}
+      <span className="v">{children}</span>
+    </span>
+  )
+}
+
+/** Standardised footer pill — a Badge with pill-flat numerals. */
+interface FooterPillProps {
+  tone?: 'accent' | 'warn' | 'alert' | 'default'
+  children: React.ReactNode
+}
+
+export function FooterPill({ tone = 'default', children }: FooterPillProps) {
+  return (
+    <Badge variant={tone} className="shui-pill-flat">
+      {children}
+    </Badge>
+  )
+}
+
+export function StatusPill({
+  label,
+  variant = 'default',
+}: {
+  label: string
+  variant?: 'default' | 'warn' | 'alert' | 'accent'
+}) {
+  return (
+    <Badge variant={variant} className="shui-pill-flat">
+      {label}
+    </Badge>
+  )
+}
+
+export function ActionLine({
+  symbol,
+  children,
+  tone = 'accent',
+}: {
+  symbol: string
+  children: React.ReactNode
+  tone?: 'accent' | 'warn' | 'ink'
+}) {
+  return (
+    <div className="shui-action-line">
+      <span className={cx('sym', `tone-${tone}`)}>{symbol}</span>
+      <div className="body">{children}</div>
+    </div>
+  )
+}
+
+interface TerminalProps {
+  /** Single-line command shown to the right of the `$` prompt. */
+  command?: React.ReactNode
+  /** Pulsing prompt + `triggering…` shimmer in place of stdout. */
+  running?: boolean
+  /** Optional chip row above the body. */
+  chips?: React.ReactNode
+  /** Body region — usually `<AnsiOutput>` or a code block. */
+  children?: React.ReactNode
+  /** Footer pill row (exit code, duration, timed-out). */
+  footer?: React.ReactNode
+}
+
+/**
+ * Shared terminal chrome. The exec card sets `command`, `chips`,
+ * `<AnsiOutput>`, and `footer`; status reuses the chrome for the full
+ * job record.
+ */
+export function Terminal({
+  command,
+  running,
+  chips,
+  children,
+  footer,
+}: TerminalProps) {
+  return (
+    <div className="shui-card">
+      {command !== undefined ? (
+        <div className="shui-head">
+          <span className="shui-cmd">
+            <Prompt symbol="$" pulse={running} />
+            <span className="cmd-text">{command}</span>
+          </span>
+          {chips ? <span className="shui-chips end">{chips}</span> : null}
+        </div>
+      ) : chips ? (
+        <div className="shui-head">
+          <span className="shui-chips">{chips}</span>
+        </div>
+      ) : null}
+
+      {running ? <div className="shui-running">triggering…</div> : children}
+
+      {footer ? <div className="shui-foot">{footer}</div> : null}
+    </div>
+  )
+}
+
+interface AnsiOutputProps {
+  stdout?: string
+  stderr?: string
+}
+
+/**
+ * Stream-coloured stdout/stderr pane. Exec output is buffered, so stdout
+ * stacks above stderr with distinct tones rather than interleaving by
+ * timestamp (which the wire shape doesn't carry). ANSI escape parsing is
+ * out of scope; the escape introducers are stripped so raw `\x1b[` bytes
+ * never leak into the rendered text.
+ */
+export function AnsiOutput({ stdout, stderr }: AnsiOutputProps) {
+  const hasStdout = !!stdout && stdout.length > 0
+  const hasStderr = !!stderr && stderr.length > 0
+
+  if (!hasStdout && !hasStderr) {
+    return <div className="shui-empty">· no output</div>
+  }
+
+  return (
+    <div className="shui-body">
+      {hasStdout ? (
+        <pre className="shui-pre out">
+          <code>{stripAnsi(stdout ?? '')}</code>
+        </pre>
+      ) : null}
+      {hasStdout && hasStderr ? <div className="shui-stream-gap" /> : null}
+      {hasStderr ? (
+        <pre className="shui-pre err">
+          <code>{stripAnsi(stderr ?? '')}</code>
+        </pre>
+      ) : null}
+    </div>
+  )
+}
+
+/* Single-pass strip of CSI/OSC escape sequences. Keeps the visible text
+   intact (newlines, tabs) so monospace alignment in tools like `ls -l`
+   survives. 0x1B is the ANSI ESC introducer (CSI/OSC); 0x07 is the BEL
+   terminator for OSC sequences. */
+// biome-ignore lint/suspicious/noControlCharactersInRegex: stripping ANSI escape sequences.
+const CSI_REGEX = /\x1b\[[0-9;?]*[ -/]*[@-~]/g
+// biome-ignore lint/suspicious/noControlCharactersInRegex: stripping ANSI OSC (ESC ] … BEL) sequences.
+const OSC_REGEX = /\x1b\][^\x07]*\x07/g
+
+function stripAnsi(s: string): string {
+  return s.replace(CSI_REGEX, '').replace(OSC_REGEX, '')
+}
diff --git a/shell/ui/src/page/DiffPane.tsx b/shell/ui/src/page/DiffPane.tsx
new file mode 100644
index 000000000..4555c3178
--- /dev/null
+++ b/shell/ui/src/page/DiffPane.tsx
@@ -0,0 +1,86 @@
+/* The diff surface for git-tab selections — the console's shared
+   FileDiff (the same diff renderer chat cards use), fed with the two
+   full file bodies: HEAD content via `git show`, working-tree content
+   via `coder::read-file`. */
+
+import { FileDiff, type Host } from '@iii-dev/console-ui'
+import { useEffect, useRef, useState } from 'react'
+import { errorMessage } from '../lib/format'
+import { coderReadFile, joinPath } from './coder'
+import { type GitChange, gitShowHead } from './git'
+
+type DiffState =
+  | { phase: 'loading' }
+  | { phase: 'error'; message: string }
+  | { phase: 'ready'; oldContents: string; newContents: string }
+
+interface DiffPaneProps {
+  host: Host
+  root: string
+  change: GitChange
+}
+
+export function DiffPane({ host, root, change }: DiffPaneProps) {
+  const [state, setState] = useState<DiffState>({ phase: 'loading' })
+  const seqRef = useRef(0)
+
+  useEffect(() => {
+    const seq = ++seqRef.current
+    setState({ phase: 'loading' })
+
+    const oldPath = change.from ?? change.path
+    const oldSide =
+      change.status === 'added' || change.status === 'untracked'
+        ? Promise.resolve('')
+        : gitShowHead(host, root, oldPath)
+    const newSide =
+      change.status === 'deleted'
+        ? Promise.resolve('')
+        : coderReadFile(host, joinPath(root, change.path)).then((out) =>
+            out.is_utf8 === false ? null : (out.content ?? ''),
+          )
+
+    Promise.all([oldSide, newSide])
+      .then(([oldContents, newContents]) => {
+        if (seqRef.current !== seq) return
+        if (newContents === null) {
+          setState({ phase: 'error', message: 'binary file — no text diff' })
+          return
+        }
+        setState({ phase: 'ready', oldContents, newContents })
+      })
+      .catch((err: unknown) => {
+        if (seqRef.current !== seq) return
+        setState({
+          phase: 'error',
+          message: errorMessage(err),
+        })
+      })
+  }, [host, root, change])
+
+  return (
+    <div className="shui-main-pane">
+      <div className="shui-editor-head">
+        <span className="path" title={change.path}>
+          {change.from ? `${change.from} → ${change.path}` : change.path}
+        </span>
+        <span className="meta">{change.status}</span>
+      </div>
+      <div className="shui-editor-body">
+        {state.phase === 'loading' ? (
+          <div className="shui-side-note">loading diff…</div>
+        ) : state.phase === 'error' ? (
+          <div className="shui-side-note warn">{state.message}</div>
+        ) : (
+          <FileDiff
+            oldFile={{
+              name: change.from ?? change.path,
+              contents: state.oldContents,
+            }}
+            newFile={{ name: change.path, contents: state.newContents }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/shell/ui/src/page/EditorPane.tsx b/shell/ui/src/page/EditorPane.tsx
new file mode 100644
index 000000000..dc2ad9ff4
--- /dev/null
+++ b/shell/ui/src/page/EditorPane.tsx
@@ -0,0 +1,262 @@
+/* The main editing surface — the console's shared Monaco-backed
+   CodeEditor over `coder::read-file` / `coder::create-file(overwrite)`.
+   Never bundles an editor: Monaco ships once, inside the console.
+
+   File content + unsaved drafts live in a page-owned cache keyed by
+   path, so switching editor tabs never discards edits: the pane is
+   remounted per file (key=path) and rehydrates from the cache instead
+   of re-reading. */
+
+import { CodeEditor, type Host } from '@iii-dev/console-ui'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { errorMessage, formatBytes } from '../lib/format'
+import { coderReadFile, coderWriteFile, joinPath } from './coder'
+
+/** File-extension → Monaco language id (unknown ids render plain). */
+export function monacoLangFromPath(path: string): string {
+  const lower = path.toLowerCase()
+  if (lower.endsWith('dockerfile')) return 'dockerfile'
+  if (lower.endsWith('makefile')) return 'shell'
+  const ext = lower.match(/\.([a-z0-9]+)$/)?.[1]
+  switch (ext) {
+    case 'ts':
+    case 'tsx':
+      return 'typescript'
+    case 'js':
+    case 'jsx':
+    case 'mjs':
+    case 'cjs':
+      return 'javascript'
+    case 'json':
+    case 'jsonc':
+      return 'json'
+    case 'yml':
+    case 'yaml':
+      return 'yaml'
+    case 'md':
+    case 'mdx':
+      return 'markdown'
+    case 'rs':
+      return 'rust'
+    case 'go':
+      return 'go'
+    case 'py':
+    case 'pyi':
+      return 'python'
+    case 'rb':
+      return 'ruby'
+    case 'sh':
+    case 'bash':
+    case 'zsh':
+      return 'shell'
+    case 'html':
+    case 'htm':
+      return 'html'
+    case 'css':
+      return 'css'
+    case 'sql':
+      return 'sql'
+    case 'xml':
+      return 'xml'
+    case 'toml':
+    case 'ini':
+      return 'ini'
+    default:
+      return 'plaintext'
+  }
+}
+
+/** Read-only reasons: binary content, or a byte-capped read (saving a
+    truncated body would destroy the tail). */
+export type ReadOnlyReason = 'binary' | 'truncated' | null
+
+export interface EditorCacheEntry {
+  /** What the worker last gave (or accepted) for this file. */
+  savedContent: string
+  /** The live buffer, possibly unsaved. */
+  draft: string
+  readOnly: ReadOnlyReason
+  mode: number | null
+  size: number | null
+}
+
+/** Page-owned; survives tab switches, dropped when a tab closes. */
+export type EditorCache = Map<string, EditorCacheEntry>
+
+type PaneState =
+  | { phase: 'loading' }
+  | { phase: 'error'; message: string }
+  | { phase: 'ready' }
+
+interface EditorPaneProps {
+  host: Host
+  root: string
+  relPath: string
+  cache: EditorCache
+  /** Fired after a successful save (the git tab refreshes on it). */
+  onSaved: () => void
+  /** Dirty-flag transitions — the page pins the tab on first edit. */
+  onDirtyChange: (relPath: string, dirty: boolean) => void
+}
+
+export function EditorPane({
+  host,
+  root,
+  relPath,
+  cache,
+  onSaved,
+  onDirtyChange,
+}: EditorPaneProps) {
+  const absPath = joinPath(root, relPath)
+  const [pane, setPane] = useState<PaneState>({ phase: 'loading' })
+  const [draft, setDraftState] = useState('')
+  const [savedContent, setSavedContent] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const seqRef = useRef(0)
+
+  const entry = cache.get(relPath)
+
+  useEffect(() => {
+    const seq = ++seqRef.current
+    setSaveError(null)
+    const cached = cache.get(relPath)
+    if (cached) {
+      setDraftState(cached.draft)
+      setSavedContent(cached.savedContent)
+      setPane({ phase: 'ready' })
+      return
+    }
+    setPane({ phase: 'loading' })
+    coderReadFile(host, absPath)
+      .then((out) => {
+        if (seqRef.current !== seq) return
+        const content = out.content ?? ''
+        const fresh: EditorCacheEntry = {
+          savedContent: content,
+          draft: content,
+          readOnly:
+            out.is_utf8 === false
+              ? 'binary'
+              : out.more_lines
+                ? 'truncated'
+                : null,
+          mode: out.mode ?? null,
+          size: out.size ?? null,
+        }
+        cache.set(relPath, fresh)
+        setDraftState(content)
+        setSavedContent(content)
+        setPane({ phase: 'ready' })
+      })
+      .catch((err: unknown) => {
+        if (seqRef.current !== seq) return
+        setPane({
+          phase: 'error',
+          message: errorMessage(err),
+        })
+      })
+  }, [host, absPath, relPath, cache])
+
+  const dirty = pane.phase === 'ready' && draft !== savedContent
+  const readOnly = entry?.readOnly ?? null
+  const canSave = pane.phase === 'ready' && readOnly === null && dirty && !saving
+
+  const setDraft = useCallback(
+    (next: string) => {
+      setDraftState(next)
+      const current = cache.get(relPath)
+      if (current) {
+        const wasDirty = current.draft !== current.savedContent
+        current.draft = next
+        const isDirty = next !== current.savedContent
+        if (wasDirty !== isDirty) onDirtyChange(relPath, isDirty)
+      }
+    },
+    [cache, relPath, onDirtyChange],
+  )
+
+  const save = useCallback(() => {
+    const current = cache.get(relPath)
+    if (!current || current.readOnly !== null || saving) return
+    if (current.draft === current.savedContent) return
+    const body = current.draft
+    setSaving(true)
+    setSaveError(null)
+    coderWriteFile(host, absPath, body, current.mode)
+      .then((result) => {
+        if (!result.success) {
+          setSaveError(result.error?.message ?? 'save failed')
+          return
+        }
+        current.savedContent = body
+        setSavedContent(body)
+        onDirtyChange(relPath, current.draft !== body)
+        onSaved()
+      })
+      .catch((err: unknown) => {
+        setSaveError(errorMessage(err))
+      })
+      .finally(() => setSaving(false))
+  }, [host, absPath, relPath, cache, saving, onSaved, onDirtyChange])
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+        e.preventDefault()
+        save()
+      }
+    },
+    [save],
+  )
+
+  return (
+    <div className="shui-main-pane">
+      <div className="shui-editor-head">
+        <span className="path" title={absPath}>
+          {relPath}
+        </span>
+        {dirty ? <span className="shui-dirty" title="unsaved changes" /> : null}
+        {readOnly ? (
+          <span className="shui-ro-note">
+            {readOnly === 'binary'
+              ? 'binary — read-only'
+              : 'truncated read — read-only'}
+          </span>
+        ) : null}
+        {entry?.size != null ? (
+          <span className="meta">{formatBytes(entry.size)}</span>
+        ) : null}
+        <span className="spacer" />
+        {saveError ? <span className="shui-ro-note warn">{saveError}</span> : null}
+        <button
+          type="button"
+          className="shui-save-btn"
+          disabled={!canSave}
+          onClick={save}
+          title="save (⌘S)"
+        >
+          {saving ? 'saving…' : 'save'}
+        </button>
+      </div>
+
+      <div className="shui-editor-body">
+        {pane.phase === 'loading' ? (
+          <div className="shui-side-note">loading {relPath}…</div>
+        ) : pane.phase === 'error' ? (
+          <div className="shui-side-note warn">{pane.message}</div>
+        ) : (
+          <CodeEditor
+            value={draft}
+            onChange={setDraft}
+            language={monacoLangFromPath(relPath)}
+            readOnly={readOnly !== null}
+            onKeyDown={onKeyDown}
+            aria-label={`edit ${relPath}`}
+            className="shui-editor"
+          />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/shell/ui/src/page/FilesTab.tsx b/shell/ui/src/page/FilesTab.tsx
new file mode 100644
index 000000000..ecee9033d
--- /dev/null
+++ b/shell/ui/src/page/FilesTab.tsx
@@ -0,0 +1,165 @@
+/* The files tab — @pierre/trees' FileTree over the worker's
+   `coder::tree` listing. The tree renders into shadow DOM, so console
+   classes can't reach it; theming rides the `--trees-*-override` CSS
+   variables (custom properties inherit through shadow boundaries),
+   mapped onto the console's design tokens.
+
+   Open semantics: single click previews (selection change), double
+   click pins — the dblclick is a composed DOM event, so it bubbles out
+   of the tree's shadow root to the wrapper. Folder expansion is
+   reported (debounced) for per-tab persistence and replayed through
+   `resetPaths({ initialExpandedPaths })`. */
+
+import type { FileTreeDirectoryHandle, GitStatusEntry } from '@pierre/trees'
+import { FileTree, useFileTree } from '@pierre/trees/react'
+import { useEffect, useMemo, useRef } from 'react'
+import type { FlatTree } from './coder'
+import { TREE_THEME } from './tree-theme'
+
+/** Directory paths live in the model with a trailing slash; callers key
+    everything slash-less — accept either on the way in, strip on the
+    way out. */
+const EXPAND_SNAPSHOT_MS = 250
+
+interface FilesTabProps {
+  tree: FlatTree | null
+  gitStatus: readonly GitStatusEntry[]
+  theme: 'light' | 'dark'
+  /** Slash-less dir paths to expand when (re)setting the tree. */
+  expanded: readonly string[]
+  /** Debounced snapshot of the currently expanded dirs (slash-less). */
+  onExpandedChange: (paths: string[]) => void
+  /** Single click on a file — open as the preview tab. */
+  onPreviewFile: (relPath: string) => void
+  /** Double click on a file — open pinned. */
+  onPinFile: (relPath: string) => void
+}
+
+export function FilesTab({
+  tree,
+  gitStatus,
+  theme,
+  expanded,
+  onExpandedChange,
+  onPreviewFile,
+  onPinFile,
+}: FilesTabProps) {
+  // The model is created once per component lifetime; data arriving
+  // later flows through resetPaths/setGitStatus below. Selection opens
+  // through a ref so the creation-time callback never goes stale.
+  const openRef = useRef<(paths: readonly string[]) => void>(() => {})
+  const lastFileRef = useRef<string | null>(null)
+  const { model } = useFileTree({
+    paths: tree?.paths ?? [],
+    onSelectionChange: (selected) => openRef.current(selected),
+  })
+
+  const kinds = tree?.kinds
+  useEffect(() => {
+    openRef.current = (selected) => {
+      const path = selected[0]
+      if (!path || !kinds) return
+      if (kinds.get(path) === 'file') {
+        lastFileRef.current = path
+        onPreviewFile(path)
+      } else {
+        // A dir selection must not leave a stale file behind — the
+        // wrapper's dblclick pin would hit the wrong path.
+        lastFileRef.current = null
+      }
+    }
+  }, [kinds, onPreviewFile])
+
+  // Expansion state is read back through the dir handles (the model has
+  // no expansion events on its public surface): every model notification
+  // schedules a debounced snapshot over the known dir paths.
+  const expandedRef = useRef<readonly string[]>(expanded)
+  expandedRef.current = expanded
+  const lastReportedRef = useRef<string>('')
+  useEffect(() => {
+    if (!kinds) return
+    const dirPaths: string[] = []
+    for (const [path, kind] of kinds) {
+      if (kind === 'dir') dirPaths.push(path)
+    }
+    let timer: number | null = null
+    const snapshot = () => {
+      timer = null
+      const open: string[] = []
+      for (const path of dirPaths) {
+        const handle = model.getItem(path) ?? model.getItem(`${path}/`)
+        // A method call doesn't narrow the handle union — the literal
+        // `isDirectory(): true` return type needs the explicit cast.
+        if (
+          handle?.isDirectory() &&
+          (handle as FileTreeDirectoryHandle).isExpanded()
+        ) {
+          open.push(path)
+        }
+      }
+      const key = open.join('\n')
+      if (key === lastReportedRef.current) return
+      lastReportedRef.current = key
+      onExpandedChange(open)
+    }
+    const unsubscribe = model.subscribe(() => {
+      if (timer != null) window.clearTimeout(timer)
+      timer = window.setTimeout(snapshot, EXPAND_SNAPSHOT_MS)
+    })
+    return () => {
+      if (timer != null) window.clearTimeout(timer)
+      unsubscribe()
+    }
+  }, [model, kinds, onExpandedChange])
+
+  // `useFileTree` ignores option changes after creation by design —
+  // push updates through the model's explicit methods. Expansion rides
+  // each reset (the store drops it otherwise); the ref keeps this
+  // effect from re-running on every expand/collapse report.
+  const pathsKey = useMemo(() => tree?.paths.join('\n') ?? '', [tree])
+  const lastPathsKeyRef = useRef('')
+  useEffect(() => {
+    if (pathsKey === '' || pathsKey === lastPathsKeyRef.current) return
+    lastPathsKeyRef.current = pathsKey
+    // The model accepts dir ids in either spelling depending on how the
+    // row materialized — hand it both.
+    const initialExpandedPaths = expandedRef.current.flatMap((p) => [
+      p,
+      `${p}/`,
+    ])
+    model.resetPaths(tree?.paths ?? [], { initialExpandedPaths })
+  }, [model, pathsKey, tree])
+
+  useEffect(() => {
+    model.setGitStatus(gitStatus.length > 0 ? gitStatus : undefined)
+  }, [model, gitStatus])
+
+  if (!tree) {
+    return <div className="shui-side-note">loading tree…</div>
+  }
+  if (tree.paths.length === 0) {
+    return <div className="shui-side-note">· empty folder</div>
+  }
+
+  return (
+    <div
+      className="shui-tree-wrap"
+      onDoubleClick={() => {
+        if (lastFileRef.current) onPinFile(lastFileRef.current)
+      }}
+    >
+      <FileTree
+        model={model}
+        className="shui-tree"
+        style={{ ...TREE_THEME, colorScheme: theme }}
+      />
+      {tree.truncations.length > 0 ? (
+        <div className="shui-side-note ghost">
+          partial listing — {tree.truncations.length}{' '}
+          {tree.truncations.length === 1 ? 'folder' : 'folders'} truncated by
+          depth/size limits
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/shell/ui/src/page/GitTab.tsx b/shell/ui/src/page/GitTab.tsx
new file mode 100644
index 000000000..82de3fa18
--- /dev/null
+++ b/shell/ui/src/page/GitTab.tsx
@@ -0,0 +1,143 @@
+/* The git tab — working-tree changes for the browsed root as a
+   collapsible FileTree (folders expand/collapse; the tree's git-status
+   decorations color each name). Selecting a FILE opens its diff in the
+   main pane (rendered by the console's shared FileDiff); folders only
+   toggle. `git status -uall` (git.ts) lists untracked files
+   individually, so a brand-new folder shows its contents instead of one
+   unclickable `folder/` record. */
+
+import { FileTree, useFileTree } from '@pierre/trees/react'
+import { useEffect, useMemo, useRef } from 'react'
+import type { GitChange, GitState } from './git'
+import { TREE_THEME } from './tree-theme'
+
+interface GitTabProps {
+  state: GitState | null
+  theme: 'light' | 'dark'
+  onSelect: (change: GitChange) => void
+  onRefresh: () => void
+}
+
+export function GitTab({ state, theme, onSelect, onRefresh }: GitTabProps) {
+  if (!state) {
+    return <div className="shui-side-note">checking repository…</div>
+  }
+  if (state.kind === 'not-a-repo') {
+    return <div className="shui-side-note">· not a git repository</div>
+  }
+  if (state.kind === 'error') {
+    return (
+      <div className="shui-side-note warn">
+        git failed: {state.message}
+        <button type="button" className="shui-linkish" onClick={onRefresh}>
+          retry
+        </button>
+      </div>
+    )
+  }
+
+  if (state.changes.length === 0) {
+    return (
+      <div className="shui-side-note">
+        · working tree clean
+        <button type="button" className="shui-linkish" onClick={onRefresh}>
+          refresh
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="shui-git-tree">
+      <div className="shui-side-note head">
+        {state.changes.length}{' '}
+        {state.changes.length === 1 ? 'change' : 'changes'}
+        <button type="button" className="shui-linkish" onClick={onRefresh}>
+          refresh
+        </button>
+      </div>
+      <GitChangesTree
+        changes={state.changes}
+        theme={theme}
+        onSelect={onSelect}
+      />
+    </div>
+  )
+}
+
+/** Every parent dir of every change, in both id spellings — the changes
+    tree always starts fully expanded (it exists to show what changed). */
+function allParentDirs(paths: readonly string[]): string[] {
+  const dirs = new Set<string>()
+  for (const path of paths) {
+    let idx = path.indexOf('/')
+    while (idx !== -1) {
+      const dir = path.slice(0, idx)
+      dirs.add(dir)
+      dirs.add(`${dir}/`)
+      idx = path.indexOf('/', idx + 1)
+    }
+  }
+  return [...dirs]
+}
+
+function GitChangesTree({
+  changes,
+  theme,
+  onSelect,
+}: {
+  changes: readonly GitChange[]
+  theme: 'light' | 'dark'
+  onSelect: (change: GitChange) => void
+}) {
+  // Defensive: a record that still names a directory (e.g. a submodule)
+  // must not become a fake file row.
+  const fileChanges = useMemo(
+    () => changes.filter((c) => c.path !== '' && !c.path.endsWith('/')),
+    [changes],
+  )
+  const byPath = useMemo(
+    () => new Map(fileChanges.map((c) => [c.path, c] as const)),
+    [fileChanges],
+  )
+  const byPathRef = useRef(byPath)
+  byPathRef.current = byPath
+  const onSelectRef = useRef(onSelect)
+  onSelectRef.current = onSelect
+
+  const { model } = useFileTree({
+    paths: fileChanges.map((c) => c.path),
+    onSelectionChange: (selected) => {
+      const path = selected[0]
+      if (!path) return
+      const change = byPathRef.current.get(path)
+      if (change) onSelectRef.current(change)
+    },
+  })
+
+  const pathsKey = useMemo(
+    () => fileChanges.map((c) => c.path).join('\n'),
+    [fileChanges],
+  )
+  const lastPathsKeyRef = useRef('')
+  useEffect(() => {
+    if (pathsKey === lastPathsKeyRef.current) return
+    lastPathsKeyRef.current = pathsKey
+    const paths = fileChanges.map((c) => c.path)
+    model.resetPaths(paths, { initialExpandedPaths: allParentDirs(paths) })
+  }, [model, pathsKey, fileChanges])
+
+  useEffect(() => {
+    model.setGitStatus(
+      fileChanges.map((c) => ({ path: c.path, status: c.status })),
+    )
+  }, [model, fileChanges])
+
+  return (
+    <FileTree
+      model={model}
+      className="shui-tree"
+      style={{ ...TREE_THEME, colorScheme: theme }}
+    />
+  )
+}
diff --git a/shell/ui/src/page/SearchTab.tsx b/shell/ui/src/page/SearchTab.tsx
new file mode 100644
index 000000000..10f5c7e4e
--- /dev/null
+++ b/shell/ui/src/page/SearchTab.tsx
@@ -0,0 +1,194 @@
+/* The search tab — content + path search over the browsed root via the
+   worker's `coder::search`. Rows open the file in the editor pane. */
+
+import { Input } from '@iii-dev/console-ui'
+import { useCallback, useRef, useState } from 'react'
+import type { Host } from '@iii-dev/console-ui'
+import { errorMessage } from '../lib/format'
+import { renderWithHighlight } from '../lib/highlight'
+import { coderSearch, relativeTo, type SearchResponse } from './coder'
+
+interface SearchTabProps {
+  host: Host
+  root: string
+  /** Single click — open as the preview tab. */
+  onPreviewFile: (relPath: string) => void
+  /** Double click — open pinned. */
+  onPinFile: (relPath: string) => void
+}
+
+export function SearchTab({
+  host,
+  root,
+  onPreviewFile,
+  onPinFile,
+}: SearchTabProps) {
+  const [query, setQuery] = useState('')
+  const [regex, setRegex] = useState(false)
+  const [ignoreCase, setIgnoreCase] = useState(true)
+  const [searching, setSearching] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [result, setResult] = useState<SearchResponse | null>(null)
+  // Only the newest in-flight search may land — a slow older response
+  // must not overwrite a newer one.
+  const seqRef = useRef(0)
+
+  const run = useCallback(() => {
+    const q = query.trim()
+    if (!q) return
+    const seq = ++seqRef.current
+    setSearching(true)
+    setError(null)
+    coderSearch(host, { query: q, regex, ignoreCase, path: root })
+      .then((out) => {
+        if (seqRef.current !== seq) return
+        setResult(out)
+      })
+      .catch((err: unknown) => {
+        if (seqRef.current !== seq) return
+        setResult(null)
+        setError(errorMessage(err))
+      })
+      .finally(() => {
+        if (seqRef.current === seq) setSearching(false)
+      })
+  }, [host, query, regex, ignoreCase, root])
+
+  return (
+    <div className="shui-search">
+      <form
+        className="shui-search-form"
+        onSubmit={(e) => {
+          e.preventDefault()
+          run()
+        }}
+      >
+        <Input
+          value={query}
+          onChange={setQuery}
+          placeholder="search files…"
+          preserveCase
+          aria-label="search query"
+        />
+        <div className="shui-search-opts">
+          <label className="opt">
+            <input
+              type="checkbox"
+              checked={regex}
+              onChange={(e) => setRegex(e.target.checked)}
+            />
+            regex
+          </label>
+          <label className="opt">
+            <input
+              type="checkbox"
+              checked={ignoreCase}
+              onChange={(e) => setIgnoreCase(e.target.checked)}
+            />
+            ignore case
+          </label>
+          <button type="submit" className="shui-linkish" disabled={searching}>
+            {searching ? 'searching…' : 'search'}
+          </button>
+        </div>
+      </form>
+
+      {error ? <div className="shui-side-note warn">{error}</div> : null}
+
+      {result ? (
+        <SearchResults
+          result={result}
+          root={root}
+          query={query}
+          regex={regex}
+          ignoreCase={ignoreCase}
+          onPreviewFile={onPreviewFile}
+          onPinFile={onPinFile}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+function SearchResults({
+  result,
+  root,
+  query,
+  regex,
+  ignoreCase,
+  onPreviewFile,
+  onPinFile,
+}: {
+  result: SearchResponse
+  root: string
+  query: string
+  regex: boolean
+  ignoreCase: boolean
+  onPreviewFile: (relPath: string) => void
+  onPinFile: (relPath: string) => void
+}) {
+  const { content_matches, path_matches, truncated } = result
+  if (content_matches.length === 0 && path_matches.length === 0) {
+    return <div className="shui-side-note">· no matches</div>
+  }
+  return (
+    <div className="shui-search-results">
+      {truncated ? (
+        <div className="shui-side-note warn">
+          truncated — refine the query
+        </div>
+      ) : null}
+
+      {path_matches.length > 0 ? (
+        <>
+          <div className="shui-side-note head">files</div>
+          {path_matches.map((m) => {
+            const rel = relativeTo(root, m.path)
+            return (
+              <button
+                key={m.path}
+                type="button"
+                className="shui-search-row"
+                onClick={() => onPreviewFile(rel)}
+                onDoubleClick={() => onPinFile(rel)}
+                title={rel}
+              >
+                <span className="loc">{rel}</span>
+              </button>
+            )
+          })}
+        </>
+      ) : null}
+
+      {content_matches.length > 0 ? (
+        <>
+          <div className="shui-side-note head">matches</div>
+          {content_matches.map((m) => {
+            const rel = relativeTo(root, m.path)
+            return (
+              <button
+                key={`${m.path}:${m.line}:${m.column}`}
+                type="button"
+                className="shui-search-row"
+                onClick={() => onPreviewFile(rel)}
+                onDoubleClick={() => onPinFile(rel)}
+                title={`${rel}:${m.line}`}
+              >
+                <span className="loc">
+                  {rel}
+                  <span className="line">:{m.line}</span>
+                </span>
+                <span className="text">
+                  {renderWithHighlight(m.text, query, {
+                    isRegex: regex,
+                    ignoreCase,
+                  })}
+                </span>
+              </button>
+            )
+          })}
+        </>
+      ) : null}
+    </div>
+  )
+}
diff --git a/shell/ui/src/page/__tests__/coder.test.ts b/shell/ui/src/page/__tests__/coder.test.ts
new file mode 100644
index 000000000..fbe2ce2b1
--- /dev/null
+++ b/shell/ui/src/page/__tests__/coder.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { flattenTree, joinPath, relativeTo, type TreeNode } from '../coder'
+
+const node = (
+  name: string,
+  kind: TreeNode['kind'],
+  children?: TreeNode[],
+): TreeNode => ({ name, kind, size: 0, mtime: 0, children })
+
+describe('flattenTree', () => {
+  it('marks directories with a trailing slash so they never collide with their children', () => {
+    // Regression: a bare dir path materializes as a FILE in the tree's
+    // path store, and its first child then throws "Path collides with an
+    // existing file while creating directory".
+    const root = node('workers', 'dir', [
+      node('code', 'dir', [node('main.rs', 'file')]),
+      node('README.md', 'file'),
+      node('empty', 'dir', []),
+      node('link', 'symlink'),
+    ])
+    const flat = flattenTree(root)
+    expect(flat.paths).toEqual([
+      'code/',
+      'code/main.rs',
+      'README.md',
+      'empty/',
+      'link',
+    ])
+  })
+
+  it('keys kinds by the slash-less path (the open-on-select gate)', () => {
+    const flat = flattenTree(
+      node('r', 'dir', [node('a', 'dir', [node('b.ts', 'file')])]),
+    )
+    expect(flat.kinds.get('a')).toBe('dir')
+    expect(flat.kinds.get('a/b.ts')).toBe('file')
+  })
+
+  it('collects truncation hints from any depth', () => {
+    const truncated = node('big', 'dir', [])
+    truncated.truncated = {
+      reason: 'per_folder_limit',
+      shown: 10,
+      total: 500,
+      hint: 'use list-folder',
+    }
+    const flat = flattenTree(node('r', 'dir', [truncated]))
+    expect(flat.truncations).toHaveLength(1)
+    expect(flat.truncations[0].reason).toBe('per_folder_limit')
+  })
+})
+
+describe('path helpers', () => {
+  it('joinPath handles the root itself and trailing slashes', () => {
+    expect(joinPath('/work', 'a/b.ts')).toBe('/work/a/b.ts')
+    expect(joinPath('/work/', 'a')).toBe('/work/a')
+    expect(joinPath('/work', '')).toBe('/work')
+    expect(joinPath('/work', '.')).toBe('/work')
+  })
+
+  it('relativeTo strips the root prefix and tolerates foreign paths', () => {
+    expect(relativeTo('/work', '/work/a/b.ts')).toBe('a/b.ts')
+    expect(relativeTo('/work', '/work')).toBe('')
+    expect(relativeTo('/work', '/elsewhere/x')).toBe('/elsewhere/x')
+  })
+})
diff --git a/shell/ui/src/page/__tests__/tabs.test.ts b/shell/ui/src/page/__tests__/tabs.test.ts
new file mode 100644
index 000000000..9e5a17c05
--- /dev/null
+++ b/shell/ui/src/page/__tests__/tabs.test.ts
@@ -0,0 +1,131 @@
+import { describe, expect, it } from 'vitest'
+import {
+  activateTab,
+  basename,
+  closeTab,
+  EMPTY_TABS,
+  lastSegments,
+  openPinned,
+  openPreview,
+  pinTab,
+  restoreTabs,
+} from '../tabs'
+
+describe('openPreview', () => {
+  it('opens the first file as the single preview tab', () => {
+    const s = openPreview(EMPTY_TABS, 'a.ts')
+    expect(s).toEqual({ tabs: [{ path: 'a.ts', pinned: false }], active: 'a.ts' })
+  })
+
+  it('the next preview REPLACES the current one in place', () => {
+    let s = openPreview(EMPTY_TABS, 'a.ts')
+    s = openPreview(s, 'b.ts')
+    expect(s.tabs).toEqual([{ path: 'b.ts', pinned: false }])
+    expect(s.active).toBe('b.ts')
+  })
+
+  it('never touches pinned tabs — the preview slots in beside them', () => {
+    let s = openPinned(EMPTY_TABS, 'pinned.ts')
+    s = openPreview(s, 'a.ts')
+    s = openPreview(s, 'b.ts')
+    expect(s.tabs).toEqual([
+      { path: 'pinned.ts', pinned: true },
+      { path: 'b.ts', pinned: false },
+    ])
+  })
+
+  it('re-previewing an already-open tab only activates it', () => {
+    let s = openPinned(EMPTY_TABS, 'a.ts')
+    s = openPreview(s, 'b.ts')
+    s = openPreview(s, 'a.ts')
+    expect(s.active).toBe('a.ts')
+    // b.ts stays — a.ts was already open, so no preview was spent.
+    expect(s.tabs).toHaveLength(2)
+    expect(s.tabs[0]).toEqual({ path: 'a.ts', pinned: true })
+  })
+})
+
+describe('openPinned / pinTab', () => {
+  it('double-click promotes the existing preview tab in place', () => {
+    let s = openPreview(EMPTY_TABS, 'a.ts')
+    s = openPinned(s, 'a.ts')
+    expect(s.tabs).toEqual([{ path: 'a.ts', pinned: true }])
+  })
+
+  it('opens unseen files directly as pinned', () => {
+    const s = openPinned(EMPTY_TABS, 'a.ts')
+    expect(s.tabs).toEqual([{ path: 'a.ts', pinned: true }])
+  })
+
+  it('pinTab is a no-op for already-pinned or unknown paths', () => {
+    const s = openPinned(EMPTY_TABS, 'a.ts')
+    expect(pinTab(s, 'a.ts')).toBe(s)
+    expect(pinTab(s, 'nope.ts')).toBe(s)
+  })
+})
+
+describe('closeTab', () => {
+  it('activates the right neighbor, else the left, else nothing', () => {
+    let s = openPinned(EMPTY_TABS, 'a.ts')
+    s = openPinned(s, 'b.ts')
+    s = openPinned(s, 'c.ts')
+    s = activateTab(s, 'b.ts')
+
+    s = closeTab(s, 'b.ts')
+    expect(s.active).toBe('c.ts')
+    s = closeTab(s, 'c.ts')
+    expect(s.active).toBe('a.ts')
+    s = closeTab(s, 'a.ts')
+    expect(s).toEqual(EMPTY_TABS)
+  })
+
+  it('closing an inactive tab keeps the active one', () => {
+    let s = openPinned(EMPTY_TABS, 'a.ts')
+    s = openPinned(s, 'b.ts')
+    s = closeTab(s, 'a.ts')
+    expect(s.active).toBe('b.ts')
+  })
+})
+
+describe('restoreTabs', () => {
+  it('rebuilds from persisted JSON, dropping junk entries', () => {
+    const s = restoreTabs(
+      [
+        { path: 'a.ts', pinned: true },
+        { path: 'b.ts', pinned: false },
+        { path: 'a.ts', pinned: false }, // duplicate
+        { pinned: true }, // no path
+        'nope', // not an object
+      ],
+      'b.ts',
+    )
+    expect(s.tabs).toEqual([
+      { path: 'a.ts', pinned: true },
+      { path: 'b.ts', pinned: false },
+    ])
+    expect(s.active).toBe('b.ts')
+  })
+
+  it('falls back to the first tab when active is stale', () => {
+    const s = restoreTabs([{ path: 'a.ts', pinned: true }], 'gone.ts')
+    expect(s.active).toBe('a.ts')
+  })
+
+  it('handles empty/garbage payloads', () => {
+    expect(restoreTabs(undefined, undefined)).toEqual(EMPTY_TABS)
+    expect(restoreTabs('junk', 42)).toEqual(EMPTY_TABS)
+  })
+})
+
+describe('lastSegments / basename', () => {
+  it('shows the last two folder names of a root', () => {
+    expect(lastSegments('/Users/x/workspaces/iii/workers')).toBe('iii/workers')
+    expect(lastSegments('/workers')).toBe('workers')
+    expect(lastSegments('/')).toBe('/')
+  })
+
+  it('basename strips the dirname', () => {
+    expect(basename('a/b/c.ts')).toBe('c.ts')
+    expect(basename('c.ts')).toBe('c.ts')
+  })
+})
diff --git a/shell/ui/src/page/coder.ts b/shell/ui/src/page/coder.ts
new file mode 100644
index 000000000..837be4c23
--- /dev/null
+++ b/shell/ui/src/page/coder.ts
@@ -0,0 +1,187 @@
+/* Thin typed wrappers over the worker's own `coder::*` functions — the
+   explorer page acts by invoking them through the tab's bus client
+   (`host.iii.trigger`). Shapes mirror workers/shell/src/code/functions
+   (the goldens under shell/tests/golden/schemas pin them); only the
+   fields the page reads are declared. */
+
+import type { Host } from '@iii-dev/console-ui'
+
+export interface CoderInfo {
+  /** Canonical absolute allowed roots; index 0 is the primary root. */
+  base_paths: string[]
+  primary_root: string
+}
+
+export interface TreeTruncation {
+  /** "per_folder_limit" | "max_depth" | "default_exclude". */
+  reason: string
+  shown: number
+  total?: number | null
+  hint: string
+}
+
+export interface TreeNode {
+  name: string
+  kind: 'file' | 'dir' | 'symlink' | 'other'
+  size: number
+  mtime: number
+  non_accessible?: boolean
+  children?: TreeNode[] | null
+  truncated?: TreeTruncation | null
+}
+
+export interface TreeResponse {
+  /** Canonical absolute path of the requested folder (= root node). */
+  path: string
+  root: TreeNode
+}
+
+export interface ReadFileResponse {
+  path?: string | null
+  content?: string | null
+  is_utf8?: boolean | null
+  more_lines?: boolean | null
+  total_lines?: number | null
+  size?: number | null
+  /** Unix permission bits, lower 9 bits of st_mode. */
+  mode?: number | null
+  mtime?: number | null
+}
+
+export interface CreateFileResult {
+  path: string
+  success: boolean
+  bytes_written: number
+  error?: { code: string; message: string } | null
+}
+
+export interface ContentMatch {
+  path: string
+  line: number
+  column: number
+  text: string
+  before?: string[] | null
+  after?: string[] | null
+}
+
+export interface SearchResponse {
+  content_matches: ContentMatch[]
+  path_matches: { path: string }[]
+  truncated: boolean
+}
+
+export function coderInfo(host: Host): Promise<CoderInfo> {
+  return host.iii.trigger<CoderInfo>('coder::info', {})
+}
+
+export function coderTree(host: Host, path: string): Promise<TreeResponse> {
+  return host.iii.trigger<TreeResponse>('coder::tree', {
+    path,
+    // Deep enough for real repos; the worker's per-folder limit and
+    // output budget still bound the response (truncated stubs carry
+    // hints the Files tab surfaces).
+    max_depth: 25,
+    use_default_excludes: true,
+  })
+}
+
+export function coderReadFile(
+  host: Host,
+  path: string,
+): Promise<ReadFileResponse> {
+  return host.iii.trigger<ReadFileResponse>('coder::read-file', { path })
+}
+
+/** Whole-file save. `mode` (from a prior read) keeps permission bits —
+    create-file would otherwise reset them to the 0644 default. */
+export async function coderWriteFile(
+  host: Host,
+  path: string,
+  content: string,
+  mode?: number | null,
+): Promise<CreateFileResult> {
+  const out = await host.iii.trigger<{ results: CreateFileResult[] }>(
+    'coder::create-file',
+    {
+      files: [
+        {
+          path,
+          content,
+          overwrite: true,
+          ...(mode != null ? { mode: `0${mode.toString(8)}` } : {}),
+        },
+      ],
+    },
+  )
+  const result = out.results?.[0]
+  if (!result) throw new Error('coder::create-file returned no result')
+  return result
+}
+
+export interface SearchParams {
+  query: string
+  regex: boolean
+  ignoreCase: boolean
+  path: string
+}
+
+export function coderSearch(
+  host: Host,
+  { query, regex, ignoreCase, path }: SearchParams,
+): Promise<SearchResponse> {
+  return host.iii.trigger<SearchResponse>('coder::search', {
+    query,
+    regex,
+    ignore_case: ignoreCase,
+    path,
+    search_content: true,
+    search_paths: true,
+  })
+}
+
+/* ── path helpers ───────────────────────────────────────────────────── */
+
+export function joinPath(root: string, rel: string): string {
+  if (rel === '' || rel === '.') return root
+  return root.endsWith('/') ? `${root}${rel}` : `${root}/${rel}`
+}
+
+/** Absolute → root-relative (the tree/search results are canonical
+    absolute; the FileTree speaks root-relative). */
+export function relativeTo(root: string, abs: string): string {
+  const prefix = root.endsWith('/') ? root : `${root}/`
+  if (abs === root) return ''
+  return abs.startsWith(prefix) ? abs.slice(prefix.length) : abs
+}
+
+export interface FlatTree {
+  /** Root-relative FileTree input paths. The tree's path model treats a
+      bare path as a FILE — a directory appended bare would collide with
+      its own children ("Path collides with an existing file") — so
+      directories carry the explicit trailing-slash marker. */
+  paths: string[]
+  /** kind by slash-less root-relative path — the open-on-select gate. */
+  kinds: Map<string, TreeNode['kind']>
+  /** Truncation hints, for the "partial listing" note. */
+  truncations: TreeTruncation[]
+}
+
+export function flattenTree(root: TreeNode): FlatTree {
+  const paths: string[] = []
+  const kinds = new Map<string, TreeNode['kind']>()
+  const truncations: TreeTruncation[] = []
+
+  const walk = (node: TreeNode, prefix: string) => {
+    if (node.truncated) truncations.push(node.truncated)
+    for (const child of node.children ?? []) {
+      const childPath = prefix === '' ? child.name : `${prefix}/${child.name}`
+      paths.push(child.kind === 'dir' ? `${childPath}/` : childPath)
+      kinds.set(childPath, child.kind)
+      walk(child, childPath)
+    }
+  }
+  // The ROOT node's own name is never joined — child path = prefix + name.
+  walk(root, '')
+
+  return { paths, kinds, truncations }
+}
diff --git a/shell/ui/src/page/git.ts b/shell/ui/src/page/git.ts
new file mode 100644
index 000000000..74f886ded
--- /dev/null
+++ b/shell/ui/src/page/git.ts
@@ -0,0 +1,145 @@
+/* Git plumbing for the explorer's git tab — everything goes through the
+   worker's own `shell::exec` (argv form, so nothing is shell-tokenized),
+   scoped to the browsed root via `cwd`. */
+
+import type { Host } from '@iii-dev/console-ui'
+
+interface ExecResponse {
+  exit_code: number | null
+  stdout: string
+  stderr: string
+  timed_out: boolean
+}
+
+async function git(
+  host: Host,
+  cwd: string,
+  args: string[],
+): Promise<ExecResponse> {
+  return host.iii.trigger<ExecResponse>('shell::exec', {
+    command: 'git',
+    args,
+    cwd,
+    timeout_ms: 15_000,
+  })
+}
+
+/** Mirrors @pierre/trees' GitStatus vocabulary so entries feed
+    `model.setGitStatus` directly. */
+export type GitFileStatus =
+  | 'added'
+  | 'deleted'
+  | 'modified'
+  | 'renamed'
+  | 'untracked'
+  | 'ignored'
+
+export interface GitChange {
+  /** Root-relative path (git speaks toplevel-relative; the page browses
+      the toplevel's subtree, see `gitChanges`). */
+  path: string
+  status: GitFileStatus
+  /** Rename source, when status is 'renamed'. */
+  from?: string
+  /** True when the change is staged (X column), for the row hint. */
+  staged: boolean
+}
+
+export type GitState =
+  | { kind: 'not-a-repo' }
+  | { kind: 'error'; message: string }
+  | { kind: 'ready'; changes: GitChange[] }
+
+function statusFromCode(x: string, y: string): GitFileStatus | null {
+  if (x === '?' || y === '?') return 'untracked'
+  if (x === '!' || y === '!') return 'ignored'
+  // Worktree column wins for display; fall back to the index column.
+  const code = y !== ' ' && y !== '' ? y : x
+  switch (code) {
+    case 'A':
+      return 'added'
+    case 'D':
+      return 'deleted'
+    case 'R':
+      return 'renamed'
+    case 'M':
+    case 'T':
+    case 'U':
+    case 'C':
+      return 'modified'
+    default:
+      return null
+  }
+}
+
+/** `git status --porcelain -z -- .` over the browsed root. `-z` gives
+    NUL-separated records with verbatim paths (no quoting to undo);
+    rename records carry the OLD path as a second NUL field. Status
+    paths are repo-TOPLEVEL-relative, so when the browsed root is a
+    subdirectory the `--show-prefix` is stripped to keep the page's
+    root-relative vocabulary (the `-- .` pathspec already scopes the
+    report to the subtree). */
+export async function gitChanges(host: Host, root: string): Promise<GitState> {
+  const probe = await git(host, root, ['rev-parse', '--is-inside-work-tree'])
+  if (probe.exit_code !== 0 || !probe.stdout.startsWith('true')) {
+    return { kind: 'not-a-repo' }
+  }
+
+  const prefixOut = await git(host, root, ['rev-parse', '--show-prefix'])
+  const prefix = prefixOut.exit_code === 0 ? prefixOut.stdout.trim() : ''
+  const toRootRel = (p: string) =>
+    prefix !== '' && p.startsWith(prefix) ? p.slice(prefix.length) : p
+
+  // `-uall` lists untracked files individually — without it a new folder
+  // collapses to one `folder/` record, which is unclickable (a directory
+  // has no diff) and hides what's actually new.
+  const out = await git(host, root, [
+    'status',
+    '--porcelain',
+    '-z',
+    '-uall',
+    '--',
+    '.',
+  ])
+  if (out.exit_code !== 0) {
+    return {
+      kind: 'error',
+      message: out.stderr.trim() || `git status exited ${out.exit_code}`,
+    }
+  }
+
+  const fields = out.stdout.split('\0')
+  const changes: GitChange[] = []
+  for (let i = 0; i < fields.length; i++) {
+    const record = fields[i]
+    if (record.length < 4) continue
+    const x = record[0]
+    const y = record[1]
+    const path = record.slice(3)
+    const status = statusFromCode(x, y)
+    if (!status) continue
+    const change: GitChange = {
+      path: toRootRel(path),
+      status,
+      staged: x !== ' ' && x !== '?' && x !== '!',
+    }
+    if (x === 'R' || y === 'R') {
+      // The next NUL field is the rename source.
+      change.from = toRootRel(fields[++i])
+    }
+    changes.push(change)
+  }
+  return { kind: 'ready', changes }
+}
+
+/** The file's content at HEAD, or '' when it didn't exist there
+    (added/untracked). Paths are toplevel-relative on the git side —
+    `:./<path>` anchors the pathspec to `cwd` instead. */
+export async function gitShowHead(
+  host: Host,
+  root: string,
+  path: string,
+): Promise<string> {
+  const out = await git(host, root, ['show', `HEAD:./${path}`])
+  return out.exit_code === 0 ? out.stdout : ''
+}
diff --git a/shell/ui/src/page/index.tsx b/shell/ui/src/page/index.tsx
new file mode 100644
index 000000000..d06837463
--- /dev/null
+++ b/shell/ui/src/page/index.tsx
@@ -0,0 +1,396 @@
+/**
+ * The shell explorer page (#/ext/shell) — an IDE-shaped surface over the
+ * worker's own functions: a collapsible sidebar (files / git / search,
+ * icon tabs) beside a Monaco editor with VS Code-style file tabs
+ * (single click previews, double click pins) and a FileDiff pane for
+ * git selections.
+ *
+ * The sidebar hugs the pane's OUTER edge (`panelSide`), and the whole
+ * UI state — browsed root, open tabs, expanded folders — persists per
+ * workspace tab (`tabId`) in the `shell-ui` configuration entry.
+ */
+
+import {
+  type Host,
+  PageBody,
+  PageHeader,
+  PageMain,
+  type PageRenderProps,
+  PageShell,
+  PageSidebar,
+} from '@iii-dev/console-ui'
+import type { GitStatusEntry } from '@pierre/trees'
+import { FolderTree, GitBranch, Search, SquareTerminal, X } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { errorMessage } from '../lib/format'
+import { type CoderInfo, coderInfo, coderTree, type FlatTree, flattenTree } from './coder'
+import { DiffPane } from './DiffPane'
+import { type EditorCache, EditorPane } from './EditorPane'
+import { FilesTab } from './FilesTab'
+import { GitTab } from './GitTab'
+import { type GitChange, type GitState, gitChanges } from './git'
+import { createTabUiStateSaver, loadTabUiState, type TabUiState } from './persist'
+import { SearchTab } from './SearchTab'
+import {
+  activateTab,
+  basename,
+  closeTab,
+  EMPTY_TABS,
+  lastSegments,
+  openPinned,
+  openPreview,
+  pinTab,
+  restoreTabs,
+  type TabsState,
+} from './tabs'
+
+type SideTab = 'files' | 'git' | 'search'
+
+const SIDE_TABS: { id: SideTab; label: string; Icon: typeof FolderTree }[] = [
+  { id: 'files', label: 'files', Icon: FolderTree },
+  { id: 'git', label: 'git', Icon: GitBranch },
+  { id: 'search', label: 'search', Icon: Search },
+]
+
+export function ShellExplorerPage({ host, panelSide, tabId, onRequestClose }: { host: Host } & PageRenderProps) {
+  const theme = host.useTheme()
+  const [info, setInfo] = useState<CoderInfo | null>(null)
+  const [infoError, setInfoError] = useState<string | null>(null)
+  const [restored, setRestored] = useState<TabUiState | null | 'loading'>('loading')
+  const [root, setRoot] = useState<string | null>(null)
+  const [sideTab, setSideTab] = useState<SideTab>('files')
+  const [collapsed, setCollapsed] = useState(false)
+  const [tree, setTree] = useState<FlatTree | null>(null)
+  const [git, setGit] = useState<GitState | null>(null)
+  const [tabs, setTabs] = useState<TabsState>(EMPTY_TABS)
+  const [expanded, setExpanded] = useState<string[]>([])
+  const [dirtyPaths, setDirtyPaths] = useState<ReadonlySet<string>>(new Set())
+  const [diff, setDiff] = useState<GitChange | null>(null)
+  const cacheRef = useRef<EditorCache>(new Map())
+
+  // ── boot: worker info + this workspace tab's persisted state ──
+  useEffect(() => {
+    let cancelled = false
+    coderInfo(host)
+      .then((out) => {
+        if (!cancelled) setInfo(out)
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) setInfoError(errorMessage(err))
+      })
+    loadTabUiState(host, tabId)
+      .then((state) => {
+        if (!cancelled) setRestored(state)
+      })
+      .catch(() => {
+        if (!cancelled) setRestored(null)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [host, tabId])
+
+  // Root resolution waits for BOTH: a persisted root only counts while
+  // it is still an allowed base path.
+  useEffect(() => {
+    if (!info || restored === 'loading' || root !== null) return
+    const persisted = restored?.root && info.base_paths.includes(restored.root) ? restored.root : null
+    setRoot(persisted ?? info.primary_root)
+    if (persisted) {
+      setTabs(restoreTabs(restored?.open, restored?.active))
+      setExpanded(restored?.expanded ?? [])
+    } else if (restored && !restored.root) {
+      // Legacy/first save without a root: restore against the primary.
+      setTabs(restoreTabs(restored.open, restored.active))
+      setExpanded(restored.expanded)
+    }
+  }, [info, restored, root])
+
+  // ── data loads (gated on the resolved root) ──
+  const gitSeqRef = useRef(0)
+  const refreshGit = useCallback(() => {
+    if (!root) return
+    const seq = ++gitSeqRef.current
+    gitChanges(host, root)
+      .then((state) => {
+        if (gitSeqRef.current === seq) setGit(state)
+      })
+      .catch((err: unknown) => {
+        if (gitSeqRef.current === seq) {
+          setGit({
+            kind: 'error',
+            message: errorMessage(err),
+          })
+        }
+      })
+  }, [host, root])
+
+  const treeSeqRef = useRef(0)
+  const refreshTree = useCallback(() => {
+    if (!root) return
+    const seq = ++treeSeqRef.current
+    coderTree(host, root)
+      .then((out) => {
+        if (treeSeqRef.current === seq) setTree(flattenTree(out.root))
+      })
+      .catch(() => {
+        if (treeSeqRef.current === seq) {
+          setTree({ paths: [], kinds: new Map(), truncations: [] })
+        }
+      })
+  }, [host, root])
+
+  useEffect(() => {
+    setTree(null)
+    setGit(null)
+    refreshTree()
+    refreshGit()
+  }, [refreshTree, refreshGit])
+
+  // ── persistence: any state change after boot writes (debounced) ──
+  const saver = useMemo(() => createTabUiStateSaver(host, tabId), [host, tabId])
+  useEffect(() => () => saver.dispose(), [saver])
+  const bootedRef = useRef(false)
+  useEffect(() => {
+    if (root === null) return
+    if (!bootedRef.current) {
+      // The first pass after restore replays state we just loaded.
+      bootedRef.current = true
+      return
+    }
+    saver.save({
+      root,
+      open: tabs.tabs,
+      active: tabs.active,
+      expanded,
+    })
+  }, [saver, root, tabs, expanded])
+
+  // ── open/close/pin actions ──
+  const previewFile = useCallback((relPath: string) => {
+    setDiff(null)
+    setTabs((s) => openPreview(s, relPath))
+  }, [])
+
+  const pinFile = useCallback((relPath: string) => {
+    setDiff(null)
+    setTabs((s) => openPinned(s, relPath))
+  }, [])
+
+  const onDirtyChange = useCallback((relPath: string, dirty: boolean) => {
+    setDirtyPaths((prev) => {
+      if (prev.has(relPath) === dirty) return prev
+      const next = new Set(prev)
+      if (dirty) next.add(relPath)
+      else next.delete(relPath)
+      return next
+    })
+    // Editing a preview tab pins it — replacing it would drop the edits.
+    if (dirty) setTabs((s) => pinTab(s, relPath))
+  }, [])
+
+  const onCloseTab = useCallback(
+    (relPath: string) => {
+      if (dirtyPaths.has(relPath) && !window.confirm(`discard unsaved changes to ${relPath}?`)) {
+        return
+      }
+      cacheRef.current.delete(relPath)
+      setDirtyPaths((prev) => {
+        if (!prev.has(relPath)) return prev
+        const next = new Set(prev)
+        next.delete(relPath)
+        return next
+      })
+      setTabs((s) => closeTab(s, relPath))
+    },
+    [dirtyPaths],
+  )
+
+  const changeRoot = useCallback((nextRoot: string) => {
+    cacheRef.current.clear()
+    setDirtyPaths(new Set())
+    setTabs(EMPTY_TABS)
+    setExpanded([])
+    setDiff(null)
+    setRoot(nextRoot)
+  }, [])
+
+  const onSaved = useCallback(() => {
+    refreshGit()
+  }, [refreshGit])
+
+  const treeGitStatus = useMemo<readonly GitStatusEntry[]>(() => {
+    if (git?.kind !== 'ready') return []
+    return git.changes.map((c) => ({ path: c.path, status: c.status }))
+  }, [git])
+
+  const header = (
+    <PageHeader
+      icon={<SquareTerminal />}
+      title="shell"
+      description={root ? <span title={root}>{root}</span> : undefined}
+      onClose={onRequestClose}
+    />
+  )
+
+  if (infoError) {
+    return (
+      <PageShell>
+        {header}
+        <div className="shui-side-note warn pad">
+          shell explorer needs the worker's coder surface — coder::info failed: {infoError}
+        </div>
+      </PageShell>
+    )
+  }
+  if (!info || !root) {
+    return (
+      <PageShell>
+        {header}
+        <div className="shui-side-note pad">connecting to shell worker…</div>
+      </PageShell>
+    )
+  }
+
+  return (
+    <PageShell>
+      {header}
+      <PageBody side={panelSide}>
+        <PageSidebar width={collapsed ? 34 : 280} className={`shui-sidebar${collapsed ? ' collapsed' : ''}`}>
+          {collapsed ? (
+            <button
+              type="button"
+              className="shui-collapse-btn"
+              onClick={() => setCollapsed(false)}
+              aria-label="expand sidebar"
+              title="expand sidebar"
+            >
+              {panelSide === 'right' ? '‹' : '›'}
+            </button>
+          ) : (
+            <>
+              <div className="shui-side-tabs">
+                {SIDE_TABS.map(({ id, label, Icon }) => (
+                  <button
+                    key={id}
+                    type="button"
+                    className={`shui-side-tab${sideTab === id ? ' active' : ''}`}
+                    onClick={() => setSideTab(id)}
+                    aria-label={label}
+                    title={label}
+                  >
+                    <Icon aria-hidden className="shui-side-tab-icon" />
+                  </button>
+                ))}
+                <span className="spacer" />
+                <button
+                  type="button"
+                  className="shui-collapse-btn"
+                  onClick={() => setCollapsed(true)}
+                  aria-label="collapse sidebar"
+                  title="collapse sidebar"
+                >
+                  {panelSide === 'right' ? '›' : '‹'}
+                </button>
+              </div>
+
+              {info.base_paths.length > 1 ? (
+                <select
+                  className="shui-root-select"
+                  value={root}
+                  onChange={(e) => changeRoot(e.target.value)}
+                  aria-label="browsed root"
+                  title={root}
+                >
+                  {info.base_paths.map((p) => (
+                    <option key={p} value={p}>
+                      {lastSegments(p)}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <div className="shui-root-label" title={root}>
+                  {lastSegments(root)}
+                </div>
+              )}
+
+              <div className="shui-side-body">
+                {sideTab === 'files' ? (
+                  <FilesTab
+                    tree={tree}
+                    gitStatus={treeGitStatus}
+                    theme={theme}
+                    expanded={expanded}
+                    onExpandedChange={setExpanded}
+                    onPreviewFile={previewFile}
+                    onPinFile={pinFile}
+                  />
+                ) : sideTab === 'git' ? (
+                  <GitTab state={git} theme={theme} onSelect={(change) => setDiff(change)} onRefresh={refreshGit} />
+                ) : (
+                  <SearchTab host={host} root={root} onPreviewFile={previewFile} onPinFile={pinFile} />
+                )}
+              </div>
+            </>
+          )}
+        </PageSidebar>
+
+        <PageMain>
+          {tabs.tabs.length > 0 ? (
+            <div className="shui-editor-tabs" role="tablist">
+              {tabs.tabs.map((tab) => {
+                const active = diff === null && tab.path === tabs.active
+                return (
+                  <div key={tab.path} className={`shui-etab${active ? ' active' : ''}${tab.pinned ? '' : ' preview'}`}>
+                    <button
+                      type="button"
+                      className="open"
+                      role="tab"
+                      aria-selected={active}
+                      title={tab.path}
+                      onClick={() => {
+                        setDiff(null)
+                        setTabs((s) => activateTab(s, tab.path))
+                      }}
+                      onDoubleClick={() => setTabs((s) => pinTab(s, tab.path))}
+                    >
+                      {basename(tab.path)}
+                      {dirtyPaths.has(tab.path) ? <span className="shui-dirty" title="unsaved changes" /> : null}
+                    </button>
+                    <button
+                      type="button"
+                      className="close"
+                      aria-label={`close ${basename(tab.path)}`}
+                      title="close"
+                      onClick={() => onCloseTab(tab.path)}
+                    >
+                      <X aria-hidden className="shui-x-icon" />
+                    </button>
+                  </div>
+                )
+              })}
+            </div>
+          ) : null}
+
+          {diff !== null ? (
+            <DiffPane host={host} root={root} change={diff} />
+          ) : tabs.active !== null ? (
+            <EditorPane
+              key={tabs.active}
+              host={host}
+              root={root}
+              relPath={tabs.active}
+              cache={cacheRef.current}
+              onSaved={onSaved}
+              onDirtyChange={onDirtyChange}
+            />
+          ) : (
+            <div className="shui-main-empty">
+              <span className="t-ghost">select a file to edit — or a git change to diff</span>
+            </div>
+          )}
+        </PageMain>
+      </PageBody>
+    </PageShell>
+  )
+}
diff --git a/shell/ui/src/page/persist.ts b/shell/ui/src/page/persist.ts
new file mode 100644
index 000000000..fe7748127
--- /dev/null
+++ b/shell/ui/src/page/persist.ts
@@ -0,0 +1,135 @@
+/* Per-console-tab persistence for the explorer's UI state (browsed root,
+   open editor tabs, expanded folders), stored in the engine's
+   `configuration` worker under the worker-registered `shell-ui` entry
+   (src/ui.rs registers it with `initial_value: {}`).
+
+   The entry's value is one JSON object shared by every browser:
+   `{ tabs: { [workspaceTabId]: TabUiState } }`. `configuration::set`
+   replaces the WHOLE value, so writes are read-modify-write and
+   debounced; concurrent tabs are last-write-wins (the console's own
+   config transport accepts the same trade-off). A missing configuration
+   worker degrades to non-persistent silently. */
+
+import type { Host } from '@iii-dev/console-ui'
+import type { OpenTab } from './tabs'
+
+export const UI_STATE_CONFIG_ID = 'shell-ui'
+
+export interface TabUiState {
+  root?: string
+  open: OpenTab[]
+  active: string | null
+  expanded: string[]
+}
+
+function isUnavailable(err: unknown): boolean {
+  const message = err instanceof Error ? err.message : String(err)
+  return /function[_ ]not[_ ]found|not[_ ]found/i.test(message)
+}
+
+async function fetchWholeValue(
+  host: Host,
+): Promise<Record<string, unknown> | null> {
+  try {
+    const resp = await host.iii.trigger<{ value?: unknown }>(
+      'configuration::get',
+      { id: UI_STATE_CONFIG_ID },
+    )
+    const value = resp?.value
+    return value && typeof value === 'object' && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {}
+  } catch (err) {
+    if (isUnavailable(err)) return null
+    throw err instanceof Error ? err : new Error(String(err))
+  }
+}
+
+/** The persisted state for one workspace tab; null = none stored (or the
+    configuration worker is unavailable — callers can't tell, and don't
+    need to). */
+export async function loadTabUiState(
+  host: Host,
+  tabId: string,
+): Promise<TabUiState | null> {
+  if (tabId === '') return null
+  const whole = await fetchWholeValue(host).catch(() => null)
+  const tabs = whole?.tabs
+  if (!tabs || typeof tabs !== 'object' || Array.isArray(tabs)) return null
+  const entry = (tabs as Record<string, unknown>)[tabId]
+  if (!entry || typeof entry !== 'object' || Array.isArray(entry)) return null
+  const raw = entry as Record<string, unknown>
+  return {
+    root: typeof raw.root === 'string' ? raw.root : undefined,
+    open: Array.isArray(raw.open) ? (raw.open as OpenTab[]) : [],
+    active: typeof raw.active === 'string' ? raw.active : null,
+    expanded: Array.isArray(raw.expanded)
+      ? raw.expanded.filter((p): p is string => typeof p === 'string')
+      : [],
+  }
+}
+
+/* One debounced writer per (page-instance, tabId): the trailing state
+   wins, writes are chained so a slow set can't interleave with the next
+   read-modify-write. */
+const DEBOUNCE_MS = 600
+
+export interface TabUiStateSaver {
+  save(state: TabUiState): void
+  /** Cancel the pending debounce (unmount). The in-flight write finishes. */
+  dispose(): void
+}
+
+export function createTabUiStateSaver(
+  host: Host,
+  tabId: string,
+): TabUiStateSaver {
+  let timer: number | null = null
+  let pending: TabUiState | null = null
+  let chain: Promise<void> = Promise.resolve()
+  let unavailable = false
+
+  const flush = () => {
+    timer = null
+    const state = pending
+    pending = null
+    if (!state || unavailable) return
+    chain = chain.then(async () => {
+      try {
+        const whole = (await fetchWholeValue(host)) ?? {}
+        const tabs =
+          whole.tabs &&
+          typeof whole.tabs === 'object' &&
+          !Array.isArray(whole.tabs)
+            ? (whole.tabs as Record<string, unknown>)
+            : {}
+        await host.iii.trigger('configuration::set', {
+          id: UI_STATE_CONFIG_ID,
+          value: { ...whole, tabs: { ...tabs, [tabId]: state } },
+        })
+      } catch (err) {
+        if (isUnavailable(err)) {
+          unavailable = true
+          return
+        }
+        console.warn('[shell-ui] failed to persist tab state', err)
+      }
+    })
+  }
+
+  return {
+    save(state) {
+      if (tabId === '' || unavailable) return
+      pending = state
+      if (timer != null) window.clearTimeout(timer)
+      timer = window.setTimeout(flush, DEBOUNCE_MS)
+    },
+    dispose() {
+      if (timer != null) {
+        window.clearTimeout(timer)
+        // Unmount flushes immediately — a closing tab's last state matters.
+        flush()
+      }
+    },
+  }
+}
diff --git a/shell/ui/src/page/tabs.ts b/shell/ui/src/page/tabs.ts
new file mode 100644
index 000000000..ef4197daa
--- /dev/null
+++ b/shell/ui/src/page/tabs.ts
@@ -0,0 +1,114 @@
+/* Editor tab-strip state — VS Code-style preview semantics, as pure
+   transitions so the behavior is unit-testable:
+
+   - single click opens a PREVIEW tab (italic): at most one exists, and
+     the next preview replaces it
+   - double click (or editing the file) PINS the tab — pinned tabs only
+     close explicitly
+*/
+
+export interface OpenTab {
+  path: string
+  pinned: boolean
+}
+
+export interface TabsState {
+  tabs: OpenTab[]
+  /** Path of the active tab; null = nothing open. */
+  active: string | null
+}
+
+export const EMPTY_TABS: TabsState = { tabs: [], active: null }
+
+/** Single click: activate if open, else open as the (single) preview tab —
+    replacing the current preview in place, never touching pinned tabs. */
+export function openPreview(state: TabsState, path: string): TabsState {
+  const existing = state.tabs.find((t) => t.path === path)
+  if (existing) return { ...state, active: path }
+  const previewIndex = state.tabs.findIndex((t) => !t.pinned)
+  const tabs = [...state.tabs]
+  if (previewIndex === -1) {
+    tabs.push({ path, pinned: false })
+  } else {
+    tabs[previewIndex] = { path, pinned: false }
+  }
+  return { tabs, active: path }
+}
+
+/** Double click: open pinned — promotes an existing tab (preview or not). */
+export function openPinned(state: TabsState, path: string): TabsState {
+  const existing = state.tabs.find((t) => t.path === path)
+  if (existing) {
+    return {
+      tabs: state.tabs.map((t) =>
+        t.path === path ? { ...t, pinned: true } : t,
+      ),
+      active: path,
+    }
+  }
+  return {
+    tabs: [...state.tabs, { path, pinned: true }],
+    active: path,
+  }
+}
+
+/** Pin in place (tab double-click, or the file became dirty). */
+export function pinTab(state: TabsState, path: string): TabsState {
+  if (!state.tabs.some((t) => t.path === path && !t.pinned)) return state
+  return {
+    ...state,
+    tabs: state.tabs.map((t) => (t.path === path ? { ...t, pinned: true } : t)),
+  }
+}
+
+/** Close: the neighbor (right, else left) becomes active. */
+export function closeTab(state: TabsState, path: string): TabsState {
+  const index = state.tabs.findIndex((t) => t.path === path)
+  if (index === -1) return state
+  const tabs = state.tabs.filter((t) => t.path !== path)
+  let active = state.active
+  if (state.active === path) {
+    const neighbor = tabs[index] ?? tabs[index - 1]
+    active = neighbor ? neighbor.path : null
+  }
+  return { tabs, active }
+}
+
+export function activateTab(state: TabsState, path: string): TabsState {
+  if (!state.tabs.some((t) => t.path === path)) return state
+  return { ...state, active: path }
+}
+
+/** Restore from persisted state, dropping malformed entries. */
+export function restoreTabs(
+  open: unknown,
+  active: unknown,
+): TabsState {
+  const tabs: OpenTab[] = []
+  if (Array.isArray(open)) {
+    for (const entry of open) {
+      if (!entry || typeof entry !== 'object') continue
+      const { path, pinned } = entry as Record<string, unknown>
+      if (typeof path !== 'string' || path === '') continue
+      if (tabs.some((t) => t.path === path)) continue
+      tabs.push({ path, pinned: pinned === true })
+    }
+  }
+  const activePath =
+    typeof active === 'string' && tabs.some((t) => t.path === active)
+      ? active
+      : (tabs[0]?.path ?? null)
+  return { tabs, active: activePath }
+}
+
+/** `/a/b/c/d` → `c/d` — the short display form for a project root. */
+export function lastSegments(path: string, count = 2): string {
+  const segments = path.split('/').filter((s) => s !== '')
+  if (segments.length === 0) return path
+  return segments.slice(-count).join('/')
+}
+
+export function basename(path: string): string {
+  const idx = path.lastIndexOf('/')
+  return idx === -1 ? path : path.slice(idx + 1)
+}
diff --git a/shell/ui/src/page/tree-theme.ts b/shell/ui/src/page/tree-theme.ts
new file mode 100644
index 000000000..efce87eaa
--- /dev/null
+++ b/shell/ui/src/page/tree-theme.ts
@@ -0,0 +1,14 @@
+/* Console-token theming for every @pierre/trees FileTree the page mounts
+   (files tab, git changes tree). The tree renders into shadow DOM, so
+   console classes can't reach it; the `--trees-*-override` custom
+   properties inherit through the shadow boundary. */
+
+export const TREE_THEME: React.CSSProperties = {
+  '--trees-bg-override': 'transparent',
+  '--trees-bg-muted-override': 'var(--color-surface-hover)',
+  '--trees-fg-override': 'var(--color-ink)',
+  '--trees-fg-muted-override': 'var(--color-ink-faint)',
+  '--trees-accent-override': 'var(--color-accent)',
+  '--trees-border-color-override': 'var(--color-rule-2)',
+  '--trees-border-radius-override': '2px',
+} as React.CSSProperties
diff --git a/shell/ui/styles.css b/shell/ui/styles.css
new file mode 100644
index 000000000..3fc2ca180
--- /dev/null
+++ b/shell/ui/styles.css
@@ -0,0 +1,694 @@
+/*
+ * The shell worker's console stylesheet, shipped as its own
+ * `console:style` asset (shell/styles.css). Every rule is scoped under
+ * `[data-iii-ui="shell"]`, the wrapper the console mounts around every
+ * injected render — page and function-trigger message alike. Styling
+ * uses the console's design tokens, so light/dark theming is free.
+ */
+
+/* ── shared text tones ──────────────────────────────────────────────── */
+
+[data-iii-ui="shell"] .t-ink { color: var(--color-ink); }
+[data-iii-ui="shell"] .t-faint { color: var(--color-ink-faint); }
+[data-iii-ui="shell"] .t-ghost { color: var(--color-ink-ghost); }
+[data-iii-ui="shell"] .t-accent { color: var(--color-accent); }
+[data-iii-ui="shell"] .t-warn { color: var(--color-warn); }
+[data-iii-ui="shell"] .t-alert { color: var(--color-alert); }
+[data-iii-ui="shell"] .num { font-variant-numeric: tabular-nums; }
+
+/* ── card chrome (function-trigger views) ───────────────────────────── */
+
+[data-iii-ui="shell"] .shui-card {
+  border-top: 1px solid var(--color-rule-2);
+  background: var(--color-bg);
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+[data-iii-ui="shell"] .shui-card.pad { padding: 12px; }
+[data-iii-ui="shell"] .shui-card.scroll-x { overflow-x: auto; }
+
+[data-iii-ui="shell"] .shui-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 12px;
+  row-gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-rule-2);
+  background: var(--color-paper-2);
+}
+[data-iii-ui="shell"] .shui-head.preview { border-bottom: 0; }
+
+[data-iii-ui="shell"] .shui-cmd {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  color: var(--color-ink);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+[data-iii-ui="shell"] .shui-cmd .cmd-text { margin-left: 8px; }
+
+[data-iii-ui="shell"] .shui-prompt {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--color-accent);
+}
+[data-iii-ui="shell"] .shui-prompt.pulse {
+  animation: shui-pulse 1.2s ease-in-out infinite;
+}
+@keyframes shui-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+[data-iii-ui="shell"] .shui-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+[data-iii-ui="shell"] .shui-chips.end { margin-left: auto; }
+
+[data-iii-ui="shell"] .shui-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--color-rule-2);
+  background: var(--color-paper-2);
+  padding: 2px 6px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink);
+}
+[data-iii-ui="shell"] .shui-chip .k {
+  color: var(--color-ink-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+[data-iii-ui="shell"] .shui-chip .v { font-variant-numeric: tabular-nums; }
+[data-iii-ui="shell"] .shui-chip.warn {
+  border-color: var(--color-warn);
+  color: var(--color-warn);
+}
+[data-iii-ui="shell"] .shui-chip.warn .k { color: var(--color-warn); }
+
+/* Badge add-on: numerals without the badge's uppercase tracking. */
+[data-iii-ui="shell"] .shui-pill-flat {
+  text-transform: none;
+  letter-spacing: normal;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-iii-ui="shell"] .shui-body {
+  background: var(--color-bg);
+  padding: 8px 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+[data-iii-ui="shell"] .shui-body.stream-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 12px;
+}
+[data-iii-ui="shell"] .shui-stream-gap { height: 4px; }
+
+[data-iii-ui="shell"] .shui-running {
+  background: var(--color-bg);
+  padding: 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--color-ink-faint);
+  font-style: italic;
+}
+
+[data-iii-ui="shell"] .shui-empty {
+  padding: 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  color: var(--color-ink-ghost);
+}
+
+[data-iii-ui="shell"] .shui-foot {
+  background: var(--color-paper-2);
+  border-top: 1px solid var(--color-rule-2);
+  padding: 6px 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+[data-iii-ui="shell"] .shui-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+[data-iii-ui="shell"] .shui-pre.out { color: var(--color-ink); }
+[data-iii-ui="shell"] .shui-pre.err { color: var(--color-warn); }
+[data-iii-ui="shell"] .shui-pre.detail {
+  color: var(--color-ink-faint);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+[data-iii-ui="shell"] .shui-slab {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+[data-iii-ui="shell"] .shui-slab.warn { border-left: 2px solid var(--color-warn); }
+[data-iii-ui="shell"] .shui-slab.accent { border-left: 2px solid var(--color-accent); }
+[data-iii-ui="shell"] .shui-slab.alert { border-left: 2px solid var(--color-alert); }
+
+[data-iii-ui="shell"] .shui-line {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  color: var(--color-ink);
+}
+[data-iii-ui="shell"] .shui-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+[data-iii-ui="shell"] .shui-row.gap8 { gap: 8px; }
+[data-iii-ui="shell"] .shui-baseline-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+  color: var(--color-ink);
+}
+
+[data-iii-ui="shell"] .shui-inline-code {
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule-2);
+  padding: 2px 6px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  color: var(--color-ink);
+  word-break: break-all;
+}
+
+[data-iii-ui="shell"] .shui-note {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--color-ink-faint);
+  font-style: italic;
+}
+[data-iii-ui="shell"] .shui-note.plain { font-style: normal; }
+
+[data-iii-ui="shell"] .shui-resolved-argv {
+  color: var(--color-ink-faint);
+  margin-top: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+[data-iii-ui="shell"] .shui-action-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--color-bg);
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+[data-iii-ui="shell"] .shui-action-line .sym { font-weight: 600; flex-shrink: 0; }
+[data-iii-ui="shell"] .shui-action-line .sym.tone-accent { color: var(--color-accent); }
+[data-iii-ui="shell"] .shui-action-line .sym.tone-warn { color: var(--color-warn); }
+[data-iii-ui="shell"] .shui-action-line .sym.tone-ink { color: var(--color-ink); }
+[data-iii-ui="shell"] .shui-action-line .body {
+  min-width: 0;
+  color: var(--color-ink);
+  word-break: break-all;
+}
+
+/* ── tables ─────────────────────────────────────────────────────────── */
+
+[data-iii-ui="shell"] .shui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  color: var(--color-ink);
+}
+[data-iii-ui="shell"] .shui-table th {
+  text-align: left;
+  font-weight: 400;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-faint);
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--color-rule-2);
+}
+[data-iii-ui="shell"] .shui-table thead tr.head-paper { background: var(--color-paper-2); }
+[data-iii-ui="shell"] .shui-table td {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--color-rule-2);
+}
+[data-iii-ui="shell"] .shui-table tbody tr:last-child td { border-bottom: 0; }
+[data-iii-ui="shell"] .shui-table .r { text-align: right; }
+[data-iii-ui="shell"] .shui-table .pad-l { padding-left: 12px; }
+[data-iii-ui="shell"] .shui-table .pad-r { padding-right: 12px; }
+[data-iii-ui="shell"] .shui-table td.icon { width: 20px; }
+[data-iii-ui="shell"] .shui-table tr.total { background: var(--color-paper-2); }
+[data-iii-ui="shell"] .shui-table tr.total td { border-bottom: 0; }
+[data-iii-ui="shell"] .shui-table tr.total .label {
+  color: var(--color-ink-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 11px;
+}
+[data-iii-ui="shell"] .shui-table-footnote {
+  padding: 6px 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-ghost);
+  border-top: 1px solid var(--color-rule-2);
+}
+[data-iii-ui="shell"] .shui-status-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+[data-iii-ui="shell"] .shui-fs-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-ink-faint);
+  vertical-align: text-bottom;
+}
+[data-iii-ui="shell"] .shui-err-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-warn);
+  cursor: help;
+}
+
+/* ── grep/search match lists ────────────────────────────────────────── */
+
+[data-iii-ui="shell"] .shui-match-list {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  line-height: 1.55;
+}
+[data-iii-ui="shell"] .shui-match {
+  border-bottom: 1px solid var(--color-rule-2);
+  padding: 6px 12px;
+}
+[data-iii-ui="shell"] .shui-match:last-child { border-bottom: 0; }
+[data-iii-ui="shell"] .shui-match .loc { color: var(--color-ink-faint); }
+[data-iii-ui="shell"] .shui-match .shui-pre { margin-top: 2px; }
+[data-iii-ui="shell"] .shui-hl {
+  background: color-mix(in oklab, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+}
+
+/* ── error cards ────────────────────────────────────────────────────── */
+
+[data-iii-ui="shell"] .shui-err-label {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-faint);
+}
+[data-iii-ui="shell"] .shui-doclink {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-accent);
+  text-decoration: none;
+  width: fit-content;
+}
+[data-iii-ui="shell"] .shui-doclink:hover { text-decoration: underline; }
+[data-iii-ui="shell"] .shui-streams {
+  margin-top: 4px;
+  border: 1px solid var(--color-rule-2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+[data-iii-ui="shell"] .shui-denial-list {
+  margin: 6px 0 0;
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--color-ink-faint);
+}
+
+/* ── the explorer page ────────────────────────────────────────────────
+   Layout + surfaces come from the shared page chrome (PageShell /
+   PageHeader / PageBody / PageSidebar / PageMain out of
+   @iii-dev/console-ui): gray navigation sidebar, white main workspace,
+   raised bordered header. The rules here style only the shell-specific
+   content INSIDE those regions. */
+
+[data-iii-ui="shell"] .shui-sidebar {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+[data-iii-ui="shell"] .shui-sidebar.collapsed {
+  align-items: center;
+  padding-top: 6px;
+}
+
+[data-iii-ui="shell"] .shui-side-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px;
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="shell"] .shui-side-tabs .spacer,
+[data-iii-ui="shell"] .shui-editor-head .spacer { flex: 1; }
+
+[data-iii-ui="shell"] .shui-side-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-ink-faint);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  width: 26px;
+  height: 24px;
+  padding: 0;
+  cursor: pointer;
+}
+[data-iii-ui="shell"] .shui-side-tab:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="shell"] .shui-side-tab.active {
+  color: var(--color-ink);
+  background: var(--color-surface-active);
+}
+[data-iii-ui="shell"] .shui-side-tab-icon {
+  width: 14px;
+  height: 14px;
+}
+
+[data-iii-ui="shell"] .shui-collapse-btn {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+  color: var(--color-ink-faint);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+}
+[data-iii-ui="shell"] .shui-collapse-btn:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+
+/* Labels show only the last two segments of the root (title carries the
+   full absolute path), so no scroll/ellipsis tricks are needed. */
+[data-iii-ui="shell"] .shui-root-select,
+[data-iii-ui="shell"] .shui-root-label {
+  margin: 6px;
+  padding: 3px 6px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-faint);
+  border: 1px solid var(--color-edge);
+  background: var(--color-surface);
+  border-radius: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-iii-ui="shell"] .shui-root-select { width: calc(100% - 12px); }
+
+[data-iii-ui="shell"] .shui-side-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-iii-ui="shell"] .shui-tree-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+[data-iii-ui="shell"] .shui-tree { flex: 1; min-height: 0; }
+
+[data-iii-ui="shell"] .shui-side-note {
+  padding: 10px 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  color: var(--color-ink-faint);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+[data-iii-ui="shell"] .shui-side-note.warn { color: var(--color-warn); }
+[data-iii-ui="shell"] .shui-side-note.ghost { color: var(--color-ink-ghost); }
+[data-iii-ui="shell"] .shui-side-note.head {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 11px;
+  padding-bottom: 4px;
+}
+[data-iii-ui="shell"] .shui-side-note.pad { padding: 24px; }
+
+[data-iii-ui="shell"] .shui-linkish {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-accent);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+[data-iii-ui="shell"] .shui-linkish:disabled {
+  color: var(--color-ink-ghost);
+  cursor: default;
+}
+
+/* git changes tree */
+[data-iii-ui="shell"] .shui-git-tree {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* search */
+[data-iii-ui="shell"] .shui-search {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+[data-iii-ui="shell"] .shui-search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-edge);
+}
+[data-iii-ui="shell"] .shui-search-opts {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+[data-iii-ui="shell"] .shui-search-opts .opt {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  color: var(--color-ink-faint);
+  cursor: pointer;
+}
+[data-iii-ui="shell"] .shui-search-opts .shui-linkish { margin-left: auto; }
+[data-iii-ui="shell"] .shui-search-results {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 8px;
+  overflow: auto;
+}
+[data-iii-ui="shell"] .shui-search-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  background: transparent;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+}
+[data-iii-ui="shell"] .shui-search-row:hover { background: var(--color-surface-hover); }
+[data-iii-ui="shell"] .shui-search-row .loc {
+  color: var(--color-accent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-iii-ui="shell"] .shui-search-row .loc .line { color: var(--color-ink-faint); }
+[data-iii-ui="shell"] .shui-search-row .text {
+  color: var(--color-ink);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* editor file tabs — preview tabs render italic (VS Code semantics) */
+[data-iii-ui="shell"] .shui-editor-tabs {
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-edge);
+  background: var(--color-panel-raised);
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+[data-iii-ui="shell"] .shui-etab {
+  display: inline-flex;
+  align-items: center;
+  border-right: 1px solid var(--color-edge);
+  max-width: 200px;
+  flex-shrink: 0;
+}
+[data-iii-ui="shell"] .shui-etab.active {
+  background: var(--color-panel);
+  box-shadow: inset 0 2px 0 var(--color-accent);
+}
+[data-iii-ui="shell"] .shui-etab .open {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 5px 2px 5px 10px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11.5px;
+  color: var(--color-ink-faint);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-iii-ui="shell"] .shui-etab.active .open { color: var(--color-ink); }
+[data-iii-ui="shell"] .shui-etab.preview .open { font-style: italic; }
+[data-iii-ui="shell"] .shui-etab .close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin: 0 4px;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--color-ink-ghost);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+[data-iii-ui="shell"] .shui-etab .close:hover {
+  color: var(--color-ink);
+  background: var(--color-surface-hover);
+}
+[data-iii-ui="shell"] .shui-x-icon {
+  width: 12px;
+  height: 12px;
+}
+[data-iii-ui="shell"] .shui-main-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+}
+[data-iii-ui="shell"] .shui-main-pane {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+[data-iii-ui="shell"] .shui-editor-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--color-edge);
+  background: var(--color-panel-raised);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  color: var(--color-ink);
+  min-width: 0;
+}
+[data-iii-ui="shell"] .shui-editor-head .path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-iii-ui="shell"] .shui-editor-head .meta {
+  color: var(--color-ink-ghost);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+[data-iii-ui="shell"] .shui-dirty {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  flex-shrink: 0;
+}
+[data-iii-ui="shell"] .shui-ro-note {
+  font-size: 11px;
+  color: var(--color-ink-faint);
+  flex-shrink: 0;
+}
+[data-iii-ui="shell"] .shui-ro-note.warn { color: var(--color-warn); }
+[data-iii-ui="shell"] .shui-save-btn {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-accent-fg);
+  background: var(--color-accent);
+  border: 0;
+  border-radius: 2px;
+  padding: 4px 10px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+[data-iii-ui="shell"] .shui-save-btn:disabled {
+  color: var(--color-ink-ghost);
+  background: var(--color-surface);
+  cursor: default;
+}
+[data-iii-ui="shell"] .shui-editor-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
diff --git a/shell/ui/tsconfig.json b/shell/ui/tsconfig.json
new file mode 100644
index 000000000..e5ac60540
--- /dev/null
+++ b/shell/ui/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": []
+  },
+  "include": ["page.tsx", "src"]
+}