From 48ec8d4e5a959a42b5656457a2fc709449d03023 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 17:18:56 -0700
Subject: [PATCH 001/248] [eric] onboarding: Arc-style cinematic intro motion
 spec + standalone preview (warm palette)

---
 .../Onboarding/cinematicIntro/MOTION_SPEC.md  | 218 ++++++++++++++++++
 .../Onboarding/cinematicIntro/preview.html    | 209 +++++++++++++++++
 2 files changed, 427 insertions(+)
 create mode 100644 frontend/src/app/components/Onboarding/cinematicIntro/MOTION_SPEC.md
 create mode 100644 frontend/src/app/components/Onboarding/cinematicIntro/preview.html

diff --git a/frontend/src/app/components/Onboarding/cinematicIntro/MOTION_SPEC.md b/frontend/src/app/components/Onboarding/cinematicIntro/MOTION_SPEC.md
new file mode 100644
index 00000000..845fd5ac
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/cinematicIntro/MOTION_SPEC.md
@@ -0,0 +1,218 @@
+# Cinematic Intro: build-ready motion spec
+
+A first-launch cold-open for OpenSwarm, modeled on Arc's welcome cinematic but in our warm
+palette and compressed to respect "quicker is better." Measured from the real Arc Mac Welcome
+Intro (digigamer capture `5LcrfMiUvmo`): frame-stepped timings + canvas pixel samples, then
+re-skinned to our tokens. This is the reference an engineer (or a later coding pass) implements
+directly. No vibe-coding: every duration, easing, and color below is pinned.
+
+## North star
+
+The OpenSwarm orb is born on a warm-black field, blooms into a warm ember gradient, becomes our
+logo, the headline cascades in word by word, then the whole layer dissolves into the first tile
+screen ("Tap one and watch."). It plays ONCE on first launch, is always skippable, and doubles as
+cover for the backend + 9router cold boot (it is renderer-only, so it runs while they come up).
+
+The emotional beat is Arc's. The skin, the timing, and the payoff are ours. Do not copy Arc's blue;
+that would read as a clone.
+
+## Hard constraints (read before building)
+
+- **In-window, not a desktop overlay.** Arc dims the whole macOS desktop with a borderless
+  always-on-top transparent window. We do NOT. On first launch our window already fills the screen,
+  so the cinematic plays inside a warm-black layer in our own renderer. This is the only choice that
+  works identically on the signed DMG and the EXE, and it sidesteps every transparent-window /
+  multi-monitor / packaged-build footgun. (A mac-only true desktop-dim is a possible later flourish,
+  explicitly out of scope for v1.)
+- **No new WebGL context.** Our existing `PixelBlast` WebGL2 surface is implicated in the GPU-process
+  crash class (context churn). Cold launch, while the backend is still booting, is the worst moment
+  to light up another GL context. The orb and the gradient are CSS (radial-gradients + transform +
+  filter) or, at most, a cheap `<video>` WebM decode. Never a shader here.
+- **Renderer-only + gated + skippable.** Mounts before/over the dashboard, gated on a one-time
+  `cinematicShown` flag. Any pointerdown / keydown / Esc jumps straight to the handoff. Hard cap the
+  whole thing at ~5.2s so a returning-feeling user is never trapped.
+- **Reduced motion is a first-class path,** not an afterthought. `useReducedMotion()` (the existing
+  hook) collapses the entire sequence to a single 220ms fade from black to the headline+tiles, with
+  no orb, no scale, no blur. Pair every animated value with this.
+- **No em/en dashes anywhere in shipped copy or code.** House rule.
+
+## Master timeline (ours: ~5.2s, skippable)
+
+Compressed from Arc's ~9s (one-time brand moments can afford 9s; an app cold-open should not), same
+proportions and feel. `t` is seconds from mount. Phases overlap on purpose.
+
+| Phase | t (s) | Layer | What happens | Duration | Easing |
+| --- | --- | --- | --- | --- | --- |
+| 0 Black hold | 0.00 to 0.20 | canvas | Warm-black fills the window. Nothing else. | 200ms | (none) |
+| 1 Orb birth | 0.20 to 0.60 | orb | Orb fades in dead-center, tiny (scale 0.18), warm glow. | 400ms | `EASE.out` |
+| 2 Orb bloom | 0.60 to 2.40 | orb | Orb scales 0.18 -> 1.0, glow intensifies, faint breathing. The slow bloom IS the feeling; do not rush it. | 1800ms | `cubic-bezier(0.33, 0, 0.2, 1)` (gentle, slow-in slow-out) |
+| 3 Bloom to surface | 2.40 to 3.40 | orb -> card | Orb expands past its own edge and dissolves into the warm ember mesh gradient (the "card"). OpenSwarm logo fades in at center as the orb resolves. | 1000ms | `EASE.out` |
+| 4 Text cascade | 3.20 to 4.60 | text | Logo cross-fades out as the headline reveals word by word (overlaps phase 3 by 200ms so it never feels sequential). | ~1400ms total | per-word `EASE.out` + micro-spring |
+| 5 Settle + handoff | 4.60 to 5.20 | whole layer | Headline holds ~400ms, then the entire cinematic layer cross-dissolves into the first tile screen. | 600ms (200ms hold + 400ms dissolve) | `EASE.inOut` |
+
+Skip at any point: cancel running transitions, jump to phase 5's dissolve from wherever you are
+(never a hard cut; always the 400ms cross-dissolve so a skip still feels designed).
+
+## Color: warm palette (mapped from Arc's measured blues)
+
+Arc's measured values on the left (ground truth from canvas sampling), our warm equivalents on the
+right. All ours are anchored to `claudeTokens` (`accent.*`, `bg.*`) so they stay on-brand; the few
+extra ember/gold stops are cinematic-only and live in this component, not in the global tokens.
+
+| Role | Arc (measured) | Ours (warm) | Source |
+| --- | --- | --- | --- |
+| Canvas (dimmed field) | near-black `#151203` | warm-black `#0F0D0B` | cinematic-local |
+| Orb core | `#5354F2` periwinkle | amber `#F0B070` | cinematic-local |
+| Orb glow | `#6772F8` | terracotta `#C4633A` | `accent.hover` |
+| Gradient darkest corner | `#2B36C3` indigo | deep ember `#2B1509` | cinematic-local |
+| Gradient mid | `#4D57FB` | `#AE5630` | `accent.primary` |
+| Gradient bright bloom | `#575CEE` | `#D47548` | `accent` dark-hover |
+| Gradient hottest point | (brightest periwinkle) | warm gold `#E0925A` | cinematic-local |
+| Headline text | `#FFFFFF` | warm white `#FAF9F5` | `text.primary` (dark) |
+| CTA / arrow glyph | indigo on frost | `#5C2E18` on `rgba(250,249,245,0.9)` | derived |
+
+The gradient is a **mesh**, not a linear ramp: deep-ember corners with terracotta + amber light
+blooms drifting through the middle. Build it as 3 to 4 layered `radial-gradient`s (see snippet),
+slowly drifting via `transform: translate3d`, so it reads as living light, not a flat fill. A 6 to
+10s ease-in-out loop on the drift is plenty; it only needs to breathe for the ~2s it is on screen.
+
+## Layer specs
+
+### Orb (CSS, no WebGL)
+
+A single `<div>`: a radial-gradient from `#F0B070` (core) through `#C4633A` (glow) to transparent,
+plus a `filter: blur(...)` for softness and a `box-shadow` bloom. Animate `scale`, `opacity`, and
+glow `blur` only (all GPU-cheap, compositor-friendly). No layout, no repaint.
+
+```ts
+// orb birth + bloom (framer-motion)
+const orb = {
+  hidden: { scale: 0.18, opacity: 0, filter: 'blur(8px)' },
+  bloom: {
+    scale: 1.0,
+    opacity: 1,
+    filter: 'blur(0px)',
+    transition: {
+      scale:   { duration: 1.8, ease: [0.33, 0, 0.2, 1] }, // gentle slow bloom
+      opacity: { duration: 0.4, ease: EASE_OUT },
+      filter:  { duration: 1.0, ease: EASE_OUT },
+    },
+  },
+};
+```
+
+A faint "breathing" while it blooms (scale 1.0 <-> 1.03, 1.5s, `EASE.pulse`) adds life; keep it
+subtle or it looks like a loading spinner.
+
+### Surface / mesh gradient (CSS)
+
+```ts
+// warm ember mesh: layered radial-gradients on a deep-ember base, slow drift
+const meshBackground = `
+  radial-gradient(60% 70% at 72% 18%, #E0925A 0%, transparent 60%),
+  radial-gradient(70% 80% at 28% 88%, #D47548 0%, transparent 62%),
+  radial-gradient(90% 90% at 50% 50%, #AE5630 0%, transparent 70%),
+  linear-gradient(140deg, #2B1509 0%, #3A1C0E 100%)
+`;
+// drift: animate a wrapper's transform translate3d(±2%, ±2%) over 8s, EASE.inOut, alternate
+```
+
+The orb in phase 3 grows past its own radius and its glow becomes the brightest bloom of this mesh,
+so the dissolve from orb to surface is a continuous brightening, not a swap.
+
+### Headline text cascade (the signature)
+
+Arc's signature is a per-word reveal with a **horizontal motion-blur streak** that resolves to
+sharp. Plain CSS `filter: blur()` is isotropic (blurs all directions equally), which is the cheap,
+acceptable fallback. For the authentic directional streak, drive an SVG filter whose
+`feGaussianBlur stdDeviation` animates from `"14 0"` (x-only blur) to `"0 0"`. Decide per the
+fidelity bar; spec both.
+
+Split the headline into words (not characters; Arc reveals word-by-word, and per-char is too busy
+for our shorter line). Each word is a motion child:
+
+```ts
+const line = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.09, delayChildren: 3.2 } },
+};
+const word = {
+  hidden: { opacity: 0, y: 10, x: -6, filter: 'blur(12px)' },
+  show: {
+    opacity: 1, y: 0, x: 0, filter: 'blur(0px)',
+    transition: {
+      duration: 0.42,
+      ease: EASE_OUT,
+      y: { type: 'spring', stiffness: 320, damping: 26 }, // micro-spring on settle
+    },
+  },
+};
+```
+
+- **Stagger:** 90ms per word (`staggerChildren: 0.09`).
+- **Per-word duration:** 420ms.
+- **Transform:** rise `y: 10 -> 0`, slight left-drift `x: -6 -> 0` (the horizontal motion), `blur 12 -> 0`, `opacity 0 -> 1`.
+- **Font:** `font.sans` token ("Anthropic Sans"), weight 700, tight tracking (-0.01em to -0.02em),
+  two centered lines. Color `#FAF9F5`. Generous line-height (1.05) like Arc's display lockup.
+
+**Copy (proposed, product to confirm):** headline `Meet your AI team.` (two lines:
+"Meet your" / "AI team."), which sets up the tile screen's "Tap one and watch." Mark as placeholder;
+copy is a product call, not a motion call.
+
+### Handoff to tiles (phase 5)
+
+The cinematic layer is a single absolutely-positioned overlay above the dashboard/welcome screen.
+On complete (natural or skip): animate the overlay `opacity 1 -> 0` over 400ms `EASE.inOut` while
+the tile screen underneath is already mounted at `opacity 0 -> 1`. The orb/headline do not animate
+out individually; the whole layer cross-dissolves as one. Net effect: the headline melts and the
+tiles are already there.
+
+## Integration points
+
+- **New component** `cinematicIntro/CinematicIntro.tsx` (this folder). Props:
+  `{ onComplete: () => void }`. Self-contained: owns its own timeline + skip handling, calls
+  `onComplete` once.
+- **Mount** from `OnboardingRoot` (or `Main`) on first launch only, rendered as a fixed full-window
+  overlay above everything, before the welcome-draft/tile screen takes focus.
+- **One-time flag** `cinematicShown: boolean` in `onboardingProgressSlice` (localStorage-persisted,
+  same store as `welcomeShown`). Gate mount on `!cinematicShown`; set true on `onComplete`. A user
+  who has seen it never sees it again (and returning users never do).
+- **Skip:** a window-level `pointerdown` + `keydown` (Esc / any key) listener installed on mount,
+  removed on complete. Fires the same `onComplete` path (which runs the 400ms dissolve, never a cut).
+- **onComplete** hands off to the existing welcome surface (the tile screen / welcome-draft). The
+  cinematic does NOT spawn agents or hit the network; it is pure choreography. The first real action
+  is still the user's tile tap, downstream of this.
+
+## Performance, packaging, accessibility
+
+- **Cold-boot cover:** the cinematic is renderer-only and starts at first paint, so it plays during
+  the ~2 to 4s backend (`:8324`) + 9router spin-up. This replaces a startup spinner with brand. Do
+  not block the cinematic on any backend readiness; they are independent.
+- **GPU:** CSS transforms/filters + opacity only; all compositor-friendly. No WebGL, no layout
+  thrash. If a `<video>` WebM is ever introduced for the gradient, it is a decode (cheap), still not
+  a GL context. Default recommendation for v1: pure CSS, zero video assets, crisp at any DPI.
+- **Packaged build:** because it is in-window web tech with no transparent overlay and no native
+  bits, one implementation runs identically on the DMG and the EXE. Still smoke it on a packaged
+  build per house rule, but there is no dev-vs-prod path divergence by construction.
+- **Reduced motion** (`useReducedMotion()` true): skip phases 0 to 4 entirely. Render the warm
+  gradient + headline + tiles immediately, fade the layer in over 220ms (`DURATION_MS.standard`),
+  then the same handoff. No orb, no scale, no blur, no per-word stagger.
+- **Tokens:** reuse `DURATION_MS` / `EASE` from `motionTokens.ts` (`EASE_OUT = EASE.out`,
+  `EASE.inOut`, `EASE.pulse`). The two custom values this spec adds are the gentle bloom curve
+  `cubic-bezier(0.33, 0, 0.2, 1)` and the spring `{ stiffness: 320, damping: 26 }`; keep them local
+  to this component unless they prove reusable.
+
+## What is measured vs proposed
+
+- **Measured from Arc (ground truth):** the 5-phase structure, the slow-orb-then-bloom feel, the
+  per-word horizontal-blur cascade, the mesh (not linear) gradient, and the source blue color values
+  used for the warm re-map.
+- **Proposed (our calls, change freely):** the ~5.2s compressed durations, the exact warm hex stops,
+  the headline copy, word-level (not char-level) split, and the in-window (not desktop-dim) decision.
+
+## Open questions for product
+
+1. Headline copy + whether it is one line or two.
+2. ~5.2s vs even tighter (~4s) for the cold-open. (Recommendation: 5.2s once, skippable.)
+3. Directional SVG-blur streak (authentic, slightly more code) vs isotropic CSS blur (cheaper).
+4. Does the orb resolve into the OpenSwarm wordmark, the glyph only, or straight to the headline?
diff --git a/frontend/src/app/components/Onboarding/cinematicIntro/preview.html b/frontend/src/app/components/Onboarding/cinematicIntro/preview.html
new file mode 100644
index 00000000..c25c13ec
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/cinematicIntro/preview.html
@@ -0,0 +1,209 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>OpenSwarm cinematic intro (motion preview)</title>
+<!--
+  Standalone motion preview for the cinematic first-launch intro.
+  Faithful to cinematicIntro/MOTION_SPEC.md: exact warm colors, phase timings, easings.
+  This is a design reference (pure HTML/CSS/JS, zero deps), NOT the production component.
+  Real font is "Anthropic Sans"; this preview falls back to system sans.
+-->
+<style>
+  :root {
+    --warm-black: #0F0D0B;
+    --warm-white: #FAF9F5;
+    --orb-core: #F0B070;
+    --orb-glow: #C4633A;
+    --accent: #AE5630;
+    --accent-hover: #C4633A;
+    --ember-deep: #2B1509;
+    --ember-mid: #3A1C0E;
+    --bloom: #D47548;
+    --gold: #E0925A;
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-bloom: cubic-bezier(0.33, 0, 0.2, 1);
+    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { height: 100%; background: var(--warm-black); overflow: hidden; }
+  body {
+    font-family: "Anthropic Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  #stage { position: fixed; inset: 0; background: var(--warm-black); }
+
+  /* Cinematic layer */
+  #cinematic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+
+  #mesh {
+    position: absolute; inset: 0; opacity: 0;
+    background:
+      radial-gradient(60% 70% at 72% 18%, var(--gold) 0%, transparent 60%),
+      radial-gradient(70% 80% at 28% 88%, var(--bloom) 0%, transparent 62%),
+      radial-gradient(90% 90% at 50% 50%, var(--accent) 0%, transparent 70%),
+      linear-gradient(140deg, var(--ember-deep) 0%, var(--ember-mid) 100%);
+    animation: drift 8s var(--ease-inout) infinite alternate;
+    will-change: transform, opacity;
+  }
+  @keyframes drift {
+    0%   { transform: translate3d(-1.5%, -1.5%, 0) scale(1.06); }
+    100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
+  }
+
+  #orb {
+    position: absolute; width: 42vmin; height: 42vmin; border-radius: 50%;
+    opacity: 0; transform: scale(0.18);
+    background: radial-gradient(circle at 50% 46%,
+      var(--orb-core) 0%, var(--orb-glow) 42%, rgba(196,99,58,0.25) 66%, transparent 78%);
+    filter: blur(6px);
+    box-shadow: 0 0 18vmin 4vmin rgba(224,146,90,0.28);
+    will-change: transform, opacity, filter;
+  }
+
+  #headline {
+    position: relative; z-index: 2; text-align: center; color: var(--warm-white);
+    font-weight: 700; font-size: 6.4vmin; line-height: 1.05; letter-spacing: -0.02em;
+    text-shadow: 0 2px 40px rgba(0,0,0,0.25);
+  }
+  #headline .line { display: block; }
+  #headline .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translate(-6px, 10px); will-change: transform, opacity, filter; }
+
+  /* Tile handoff screen */
+  #tiles {
+    position: absolute; inset: 0; opacity: 0; pointer-events: none;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    background: var(--warm-black); color: var(--warm-white); gap: 3.2vmin;
+  }
+  #tiles h2 { font-weight: 600; font-size: 3.4vmin; letter-spacing: -0.01em; opacity: 0.96; }
+  #tileGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6vmin; width: min(760px, 74vmin); }
+  .tile {
+    display: flex; align-items: center; gap: 1.4vmin; padding: 2.4vmin 2.6vmin;
+    border-radius: 14px; cursor: pointer; font-size: 2.2vmin; font-weight: 500;
+    background: rgba(250,249,245,0.045);
+    border: 1px solid rgba(250,249,245,0.09);
+    transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
+  }
+  .tile .ic { font-size: 2.8vmin; }
+  .tile:hover {
+    background: rgba(196,99,58,0.14);
+    border-color: rgba(196,99,58,0.55);
+    transform: translateY(-2px);
+  }
+  #surprise { font-size: 2vmin; color: rgba(250,249,245,0.55); cursor: pointer; transition: color 160ms var(--ease-out); }
+  #surprise:hover { color: var(--warm-white); }
+
+  /* Preview chrome (not part of the product) */
+  #controls { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 10px; }
+  #controls button {
+    font: inherit; font-size: 13px; color: var(--warm-white); background: rgba(250,249,245,0.08);
+    border: 1px solid rgba(250,249,245,0.18); border-radius: 999px; padding: 7px 16px; cursor: pointer;
+  }
+  #controls button:hover { background: rgba(250,249,245,0.16); }
+  #hint { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(250,249,245,0.4); font-size: 12px; letter-spacing: 0.02em; }
+</style>
+</head>
+<body>
+  <div id="stage">
+    <div id="cinematic">
+      <div id="mesh"></div>
+      <div id="orb"></div>
+      <h1 id="headline">
+        <span class="line"><span class="w">Meet</span> <span class="w">your</span></span>
+        <span class="line"><span class="w">AI</span> <span class="w">team.</span></span>
+      </h1>
+    </div>
+
+    <div id="tiles">
+      <h2>Tap one and watch.</h2>
+      <div id="tileGrid">
+        <div class="tile"><span class="ic">🔎</span> Find something</div>
+        <div class="tile"><span class="ic">🧩</span> Build something</div>
+        <div class="tile"><span class="ic">🗂️</span> Handle busywork</div>
+        <div class="tile"><span class="ic">🌐</span> Do something online</div>
+      </div>
+      <div id="surprise">✨ surprise me</div>
+    </div>
+  </div>
+
+  <div id="hint">click or press Esc to skip</div>
+  <div id="controls"><button id="replay">Replay</button></div>
+
+<script>
+(() => {
+  const T = 5200; // master duration (ms), per spec
+  const orb = document.getElementById('orb');
+  const mesh = document.getElementById('mesh');
+  const words = [...document.querySelectorAll('#headline .w')];
+  const cinematic = document.getElementById('cinematic');
+  const tiles = document.getElementById('tiles');
+  let anims = [];
+
+  const track = (a) => { anims.push(a); return a; };
+
+  function reset() {
+    anims.forEach(a => { try { a.cancel(); } catch (e) {} });
+    anims = [];
+    tiles.style.pointerEvents = 'none';
+  }
+
+  function play() {
+    reset();
+
+    // Orb: birth (200ms hold) -> gentle bloom (to 2400) -> dissolve into mesh (to 3400)
+    track(orb.animate([
+      { offset: 0,     opacity: 0,    transform: 'scale(0.18)', filter: 'blur(6px)',  easing: 'var(--ease-out)' },
+      { offset: 0.038, opacity: 0,    transform: 'scale(0.18)', filter: 'blur(6px)',  easing: 'cubic-bezier(0.33,0,0.2,1)' },
+      { offset: 0.115, opacity: 1,    transform: 'scale(0.30)', filter: 'blur(4px)',  easing: 'cubic-bezier(0.33,0,0.2,1)' },
+      { offset: 0.462, opacity: 1,    transform: 'scale(1)',    filter: 'blur(2px)',  easing: 'ease-out' },
+      { offset: 0.654, opacity: 0.32, transform: 'scale(2.4)',  filter: 'blur(9px)',  easing: 'ease-out' },
+      { offset: 1,     opacity: 0,    transform: 'scale(2.7)',  filter: 'blur(11px)' },
+    ], { duration: T, fill: 'both' }));
+
+    // Mesh: fades in as the orb blooms past its edge (2400 -> 3400)
+    track(mesh.animate([
+      { offset: 0,     opacity: 0 },
+      { offset: 0.40,  opacity: 0,   easing: 'cubic-bezier(0.16,1,0.3,1)' },
+      { offset: 0.654, opacity: 1 },
+      { offset: 1,     opacity: 1 },
+    ], { duration: T, fill: 'both' }));
+
+    // Headline: per-word cascade, stagger 90ms, starts at 3200ms, micro-spring settle
+    words.forEach((w, i) => {
+      track(w.animate([
+        { opacity: 0, transform: 'translate(-6px, 10px)', filter: 'blur(12px)' },
+        { opacity: 1, transform: 'translate(0, 0)',       filter: 'blur(0px)'  },
+      ], { delay: 3200 + i * 90, duration: 480, easing: 'cubic-bezier(0.34,1.56,0.64,1)', fill: 'both' }));
+    });
+
+    // Handoff: hold ~200ms then cross-dissolve the whole layer into the tiles (4800 -> 5200)
+    track(cinematic.animate(
+      [{ opacity: 1 }, { opacity: 0 }],
+      { delay: 4800, duration: 400, easing: 'cubic-bezier(0.4,0,0.2,1)', fill: 'both' }));
+    const reveal = track(tiles.animate(
+      [{ opacity: 0 }, { opacity: 1 }],
+      { delay: 4800, duration: 400, easing: 'cubic-bezier(0.4,0,0.2,1)', fill: 'both' }));
+    reveal.onfinish = () => { tiles.style.pointerEvents = 'auto'; };
+  }
+
+  // Skip: jump straight to the tiles with a quick dissolve (never a hard cut)
+  function skip() {
+    reset();
+    track(cinematic.animate([{ opacity: getComputedStyle(cinematic).opacity }, { opacity: 0 }],
+      { duration: 260, easing: 'cubic-bezier(0.4,0,0.2,1)', fill: 'both' }));
+    const r = track(tiles.animate([{ opacity: getComputedStyle(tiles).opacity }, { opacity: 1 }],
+      { duration: 260, easing: 'cubic-bezier(0.4,0,0.2,1)', fill: 'both' }));
+    r.onfinish = () => { tiles.style.pointerEvents = 'auto'; };
+  }
+
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') skip(); });
+  document.getElementById('cinematic').addEventListener('click', skip);
+  document.getElementById('replay').addEventListener('click', play);
+
+  play();
+})();
+</script>
+</body>
+</html>

From f4c090ce9f6aebaae85e674095b263a5a2b7ade3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 17:39:09 -0700
Subject: [PATCH 002/248] [eric] onboarding: premium welcome-screen mock
 (Claude serif skin + Apple polish, warm palette, tiles not a blank box)

---
 .../Onboarding/welcomeScreen/preview.html     | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 frontend/src/app/components/Onboarding/welcomeScreen/preview.html

diff --git a/frontend/src/app/components/Onboarding/welcomeScreen/preview.html b/frontend/src/app/components/Onboarding/welcomeScreen/preview.html
new file mode 100644
index 00000000..054c34d6
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/welcomeScreen/preview.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>OpenSwarm welcome screen (premium skin mock)</title>
+<!--
+  Static mock of the first onboarding screen in the premium skin:
+  Claude's aesthetic (warm near-black, serif display heading, off-white text, huge whitespace,
+  one centered focal area) + Apple HIG polish (generous rhythm, clean hierarchy, one accent),
+  ending on OUR tiles ("Tap one and watch"), never a blank box.
+  Warm palette from claudeTokens (darkTokens). Real headline font is "Anthropic Sans";
+  the serif display here is a stand-in for Claude's serif display face.
+-->
+<style>
+  :root {
+    --bg: #1A1918;            /* darkTokens bg.page (warm near-black) */
+    --surface: rgba(250,249,245,0.045);
+    --border: rgba(250,249,245,0.09);
+    --border-hover: rgba(196,99,58,0.55);
+    --white: #FAF9F5;         /* text.primary */
+    --muted: #9C9A92;         /* text.tertiary */
+    --ghost: rgba(156,154,146,0.6);
+    --accent: #C4633A;        /* accent.primary (dark) */
+    --accent-soft: rgba(196,99,58,0.12);
+    --serif: "Tiempos Headline", "Anthropic Serif", Georgia, "Times New Roman", serif;
+    --sans: "Anthropic Sans", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+    --ease: cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    background: var(--bg);
+    /* subtle warm depth glow, Apple-ish hero lighting */
+    background-image: radial-gradient(60% 50% at 50% 0%, rgba(196,99,58,0.10) 0%, transparent 70%);
+    font-family: var(--sans);
+    -webkit-font-smoothing: antialiased;
+    color: var(--white);
+    display: flex; align-items: center; justify-content: center;
+    overflow: hidden;
+  }
+
+  .wrap {
+    width: min(680px, 88vw);
+    text-align: center;
+    display: flex; flex-direction: column; align-items: center;
+  }
+
+  .brand {
+    font-size: 22px; color: var(--accent); margin-bottom: 56px;
+    opacity: 0; animation: rise 700ms var(--ease) 120ms forwards;
+  }
+
+  h1 {
+    font-family: var(--serif);
+    font-weight: 500; font-size: 42px; line-height: 1.12; letter-spacing: -0.01em;
+    color: var(--white);
+    opacity: 0; animation: rise 800ms var(--ease) 260ms forwards;
+  }
+  .sub {
+    margin-top: 16px; font-size: 17px; color: var(--muted); font-weight: 400;
+    letter-spacing: 0.005em;
+    opacity: 0; animation: rise 800ms var(--ease) 400ms forwards;
+  }
+
+  .grid {
+    margin-top: 48px;
+    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
+    width: 100%;
+  }
+  .tile {
+    text-align: left; padding: 22px 22px; border-radius: 16px;
+    background: var(--surface); border: 1px solid var(--border);
+    cursor: pointer;
+    transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
+    opacity: 0; animation: rise 760ms var(--ease) forwards;
+  }
+  .tile:nth-child(1) { animation-delay: 560ms; }
+  .tile:nth-child(2) { animation-delay: 640ms; }
+  .tile:nth-child(3) { animation-delay: 720ms; }
+  .tile:nth-child(4) { animation-delay: 800ms; }
+  .tile:hover {
+    background: var(--accent-soft);
+    border-color: var(--border-hover);
+    transform: translateY(-2px);
+  }
+  .tile .ic { font-size: 24px; display: block; margin-bottom: 12px; }
+  .tile .t { font-size: 17px; font-weight: 550; color: var(--white); letter-spacing: -0.005em; }
+  .tile .d { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
+
+  .surprise {
+    margin-top: 34px; font-size: 15px; color: var(--ghost); cursor: pointer;
+    transition: color 180ms var(--ease);
+    opacity: 0; animation: rise 760ms var(--ease) 940ms forwards;
+  }
+  .surprise:hover { color: var(--white); }
+
+  @keyframes rise {
+    from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
+    to   { opacity: 1; transform: translateY(0);    filter: blur(0);  }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    * { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
+  }
+</style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="brand">✳</div>
+    <h1>Good evening, Eric.<br/>What should I take off your plate?</h1>
+    <div class="sub">Tap one and watch. I go and do it, not just talk about it.</div>
+
+    <div class="grid">
+      <div class="tile">
+        <span class="ic">🔎</span>
+        <div class="t">Find something</div>
+        <div class="d">Prices, options, the best pick, pulled together for you.</div>
+      </div>
+      <div class="tile">
+        <span class="ic">🧩</span>
+        <div class="t">Build something</div>
+        <div class="d">A tool, a tracker, a little page, built and running.</div>
+      </div>
+      <div class="tile">
+        <span class="ic">🗂️</span>
+        <div class="t">Handle busywork</div>
+        <div class="d">Messy sheets, inboxes, cleanup, off your plate.</div>
+      </div>
+      <div class="tile">
+        <span class="ic">🌐</span>
+        <div class="t">Do something online</div>
+        <div class="d">A real browser, going and doing the task for you.</div>
+      </div>
+    </div>
+
+    <div class="surprise">✨ or surprise me</div>
+  </div>
+</body>
+</html>

From a54e4ba571d09237f230fa9bca880bacdd306354 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 19:24:57 -0700
Subject: [PATCH 003/248] [eric] onboarding: Claude-styled interactive flow
 mock (discovery cards/name/consent/connect -> personalized payoff) + payoff
 mock

---
 .../Onboarding/welcomeScreen/flow.html        | 146 ++++++++++++++++++
 .../Onboarding/welcomeScreen/payoff.html      |  99 ++++++++++++
 2 files changed, 245 insertions(+)
 create mode 100644 frontend/src/app/components/Onboarding/welcomeScreen/flow.html
 create mode 100644 frontend/src/app/components/Onboarding/welcomeScreen/payoff.html

diff --git a/frontend/src/app/components/Onboarding/welcomeScreen/flow.html b/frontend/src/app/components/Onboarding/welcomeScreen/flow.html
new file mode 100644
index 00000000..fd6fc1d3
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/welcomeScreen/flow.html
@@ -0,0 +1,146 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>OpenSwarm onboarding flow (Claude-styled mock)</title>
+<!--
+  Interactive click-through mock of the onboarding flow, styled to match Claude.ai onboarding
+  (spark + wordmark top-center, serif headings, line icons, white CTA, flat warm near-black,
+  content vertically centered). One thing per screen: cards -> name -> personalize -> connect ->
+  payoff. Real fonts are Copernicus/Styrene; this falls back to Georgia + system sans.
+-->
+<style>
+:root{--bg:#1C1B19;--surface:#252420;--surface2:#2b2a25;--white:#F3F1EA;--muted:#8F8D86;
+--ghost:#6f6e68;--coral:#D97757;--border:rgba(243,241,234,0.08);--border2:rgba(243,241,234,0.14);
+--serif:"Copernicus","Tiempos Headline",Georgia,"Times New Roman",serif;
+--sans:"Styrene B","Anthropic Sans",-apple-system,"SF Pro Text",system-ui,sans-serif;}
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{height:100%}
+body{background:var(--bg);font-family:var(--sans);-webkit-font-smoothing:antialiased;color:var(--white);overflow:hidden}
+.brand{position:fixed;top:34px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;z-index:5}
+.brand .wm{font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:.2px}
+.brand .spark{line-height:0}
+.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center}
+.screen.on{display:flex;animation:fade .5s ease}
+@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+.wrap{width:min(720px,88vw);display:flex;flex-direction:column;align-items:center;text-align:center}
+h1{font-family:var(--serif);font-weight:500;font-size:33px;line-height:1.15;letter-spacing:-0.005em;color:var(--white)}
+.sub{margin-top:12px;font-size:15px;color:var(--muted)}
+.cards{margin-top:52px;display:flex;gap:18px;justify-content:center;width:100%}
+.card{flex:1;min-height:250px;padding:34px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--border);
+cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:all .18s ease}
+.card:hover{background:var(--surface2);border-color:var(--border2);transform:translateY(-2px)}
+.card .ic{color:var(--white);margin-top:10px;margin-bottom:auto;opacity:.92}
+.card .t{font-family:var(--serif);font-size:21px;font-weight:500;margin-top:28px}
+.card .d{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.4;max-width:170px}
+.field{margin-top:46px;width:100%;max-width:430px}
+.input{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:15px 18px;color:var(--white);font-size:16px;font-family:var(--sans);text-align:left;outline:none}
+.input::placeholder{color:var(--ghost)}
+.input:focus{border-color:var(--coral)}
+.pill{margin-top:24px;width:100%;max-width:430px;background:var(--white);color:#1a1917;border:none;border-radius:11px;padding:14px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:filter .15s}
+.pill:hover{filter:brightness(.94)}
+.ghost{margin-top:26px;color:var(--muted);font-size:14px;cursor:pointer}.ghost:hover{color:var(--white)}
+.stream{font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.4;max-width:620px;min-height:4.4em;color:var(--white)}
+.caret{display:inline-block;width:2px;height:1.02em;background:var(--coral);margin-left:3px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
+@keyframes blink{50%{opacity:0}}
+.btns{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:16px}
+.connlist{margin-top:44px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:11px}
+.conn{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;text-align:left}
+.conn .cn{font-size:15px;font-weight:500}.conn .cd{font-size:12.5px;color:var(--muted);margin-top:2px}
+.conn .cbtn{margin-left:auto;font-size:13px;color:var(--white);background:var(--surface2);border:1px solid var(--border2);border-radius:999px;padding:6px 15px;cursor:pointer}
+.conn .cbtn.done{color:var(--muted);background:transparent}
+.remark{margin-top:10px;font-size:15px;color:var(--muted);font-style:italic}
+.insight{margin-top:20px;font-size:16px;color:var(--muted);line-height:1.5;max-width:540px}
+.prompt{margin-top:26px;width:100%;max-width:600px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;text-align:left}
+.prompt .p{font-size:15.5px;line-height:1.55;color:var(--white)}
+.composer{margin-top:16px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;border-top:1px solid var(--border);padding-top:14px}
+.composer .run{margin-left:auto;background:var(--white);color:#1a1917;border-radius:9px;padding:7px 15px;font-weight:600;cursor:pointer}
+.ideas{margin-top:24px;width:100%;max-width:600px;text-align:left}.ideas .lbl{font-size:13px;color:var(--muted);margin-bottom:8px}
+.idea{display:flex;align-items:center;gap:13px;padding:10px 10px;font-size:15.5px;cursor:pointer;border-radius:9px;transition:background .15s}.idea:hover{background:var(--surface)}
+.idea .ii{color:var(--muted);width:22px;display:flex;justify-content:center}
+.dots{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:9px}
+.dot{width:6px;height:6px;border-radius:50%;background:rgba(243,241,234,0.16)}.dot.on{background:var(--coral)}
+.restart{position:fixed;bottom:34px;right:30px;font-size:12px;color:var(--ghost);cursor:pointer}
+@media(prefers-reduced-motion:reduce){*{animation:none!important}.caret{animation:none!important}}
+</style></head><body>
+
+<div class="brand"><span class="spark"></span><span class="wm">OpenSwarm</span></div>
+
+<div class="screen" id="s1"><div class="wrap">
+<h1>Where do you want help first?</h1>
+<div class="cards">
+<div class="card" onclick="show(2)"><span class="ic" data-i="work"></span><div class="t">My work</div><div class="d">clients, admin, the busywork</div></div>
+<div class="card" onclick="show(2)"><span class="ic" data-i="home"></span><div class="t">My personal life</div><div class="d">errands, plans, life admin</div></div>
+<div class="card" onclick="show(2)"><span class="ic" data-i="build"></span><div class="t">Building things</div><div class="d">tools, sites, ideas</div></div>
+</div>
+<div class="ghost" onclick="show(5)">just show me</div>
+</div></div>
+
+<div class="screen" id="s2"><div class="wrap">
+<h1>What should I call you?</h1>
+<div class="sub">so this feels like yours, not a demo</div>
+<div class="field"><input class="input" placeholder="Your name" value=""></div>
+<button class="pill" onclick="show(3)">Continue</button>
+<div class="ghost" onclick="show(3)">skip</div>
+</div></div>
+
+<div class="screen" id="s3"><div class="wrap">
+<div class="stream"><span id="streamtxt"></span><span class="caret"></span></div>
+<div class="btns" id="d3btns" style="opacity:0"><button class="pill" onclick="show(4)">Yes, get to know me</button><span class="ghost" style="margin-top:2px" onclick="show(5)">not now</span></div>
+</div></div>
+
+<div class="screen" id="s4"><div class="wrap">
+<h1>Connect what I can work with</h1>
+<div class="sub">optional, and I&#39;ll only ever read it to understand you</div>
+<div class="connlist">
+<div class="conn"><span class="ci" data-i="mail"></span><div><div class="cn">Google</div><div class="cd">Gmail, Calendar, Drive</div></div><span class="cbtn" onclick="this.textContent='Connected';this.classList.add('done')">Connect</span></div>
+<div class="conn"><span class="ci" data-i="doc"></span><div><div class="cn">Notion</div><div class="cd">notes, docs, tasks</div></div><span class="cbtn" onclick="this.textContent='Connected';this.classList.add('done')">Connect</span></div>
+<div class="conn"><span class="ci" data-i="chat"></span><div><div class="cn">Slack</div><div class="cd">messages, channels</div></div><span class="cbtn" onclick="this.textContent='Connected';this.classList.add('done')">Connect</span></div>
+</div>
+<button class="pill" style="max-width:200px" onclick="show(5)">Continue</button>
+<div class="ghost" onclick="show(5)">skip for now</div>
+</div></div>
+
+<div class="screen" id="s5"><div class="wrap">
+<h1>Good evening, Eric.</h1>
+<div class="remark">(someone&#39;s been busy, huh)</div>
+<div class="insight">I see you&#39;re juggling client work and a launch. Here&#39;s one I can do right now, plus a few I lined up for you.</div>
+<div class="prompt"><div class="p">Send me a morning briefing: today&#39;s calendar, anything urgent in my email, and what my competitors shipped. Show me a sample before it goes live.</div>
+<div class="composer"><span>+</span><span>Cowork</span><span style="margin-left:8px">Opus 4.8</span><span class="run">Run</span></div></div>
+<div class="ideas"><div class="lbl">Ideas for you</div>
+<div class="idea"><span class="ii" data-i="sun"></span> Send me a morning briefing</div>
+<div class="idea"><span class="ii" data-i="tray"></span> Clean up + chase my overdue invoices</div>
+<div class="idea"><span class="ii" data-i="build"></span> Build me a lightweight client tracker</div>
+<div class="idea"><span class="ii" data-i="globe"></span> Watch my 3 competitors, ping me on changes</div>
+</div>
+</div></div>
+
+<div class="dots" id="dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
+<div class="restart" onclick="show(1)">start over</div>
+
+<script>
+function spark(sz,c){var r='';for(var i=0;i<12;i++){var a=i*30*Math.PI/180;var x1=12+3.1*Math.cos(a),y1=12+3.1*Math.sin(a),x2=12+9.3*Math.cos(a),y2=12+9.3*Math.sin(a);r+='<line x1="'+x1.toFixed(2)+'" y1="'+y1.toFixed(2)+'" x2="'+x2.toFixed(2)+'" y2="'+y2.toFixed(2)+'"/>';}return '<svg width="'+sz+'" height="'+sz+'" viewBox="0 0 24 24" stroke="'+c+'" stroke-width="1.7" stroke-linecap="round">'+r+'</svg>';}
+var ICON={
+work:'<rect x="3" y="7.5" width="18" height="12" rx="2"/><path d="M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5"/><path d="M3 13h18"/>',
+home:'<path d="M4 10.5 12 4l8 6.5"/><path d="M6 9.5V20h12V9.5"/><path d="M10 20v-5h4v5"/>',
+build:'<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>',
+mail:'<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>',
+doc:'<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>',
+chat:'<path d="M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z"/>',
+sun:'<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
+tray:'<path d="M3 12h4l2 3h6l2-3h4"/><path d="M5 6h14l2 6v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z"/>',
+globe:'<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18"/>'};
+function ico(name,sz,sw){return '<svg width="'+sz+'" height="'+sz+'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="'+(sw||1.5)+'" stroke-linecap="round" stroke-linejoin="round">'+ICON[name]+'</svg>';}
+document.querySelectorAll('.spark').forEach(function(s){s.innerHTML=spark(20,'#D97757');});
+document.querySelectorAll('.card .ic').forEach(function(e){e.innerHTML=ico(e.dataset.i,46,1.3);});
+document.querySelectorAll('.conn .ci').forEach(function(e){e.innerHTML=ico(e.dataset.i,20);});
+document.querySelectorAll('.idea .ii').forEach(function(e){e.innerHTML=ico(e.dataset.i,17);});
+window.typeS3=function(){var el=document.getElementById('streamtxt');var btns=document.getElementById('d3btns');
+var full="Want me to actually get you? Say yes and I'll take a quick look at whatever you connect, so everything I show is aimed at your world, not a generic demo.";
+el.textContent='';btns.style.opacity=0;var i=0;clearInterval(window.__tw);
+window.__tw=setInterval(function(){el.textContent=full.slice(0,++i);if(i>=full.length){clearInterval(window.__tw);btns.style.transition='opacity .6s';btns.style.opacity=1;}},16);};
+window.show=function(n){document.querySelectorAll('.screen').forEach(function(s){s.classList.remove('on')});
+document.getElementById('s'+n).classList.add('on');
+document.getElementById('dots').style.display=(n<=4?'flex':'none');
+document.querySelectorAll('.dot').forEach(function(d,idx){d.classList.toggle('on',idx===(n-1))});
+if(n===3)window.typeS3();};
+window.show(1);
+</script>
+</body></html>
diff --git a/frontend/src/app/components/Onboarding/welcomeScreen/payoff.html b/frontend/src/app/components/Onboarding/welcomeScreen/payoff.html
new file mode 100644
index 00000000..dabf0acf
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/welcomeScreen/payoff.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>OpenSwarm value payoff (beat 2 mock)</title>
+<!--
+  Static mock of BEAT 2: after the one-tap personalize, the value lands immediately.
+  A real agent is already DOING their task (live browser), captioned as the differentiator,
+  with more tailored valuable outcomes to pick + a type-your-own. This is the "wow from real
+  value" beat, not a screen they read. Premium warm skin, same tokens as welcomeScreen.
+-->
+<style>
+  :root {
+    --bg:#1A1918; --surface:rgba(250,249,245,0.045); --border:rgba(250,249,245,0.09);
+    --border-hover:rgba(196,99,58,0.55); --white:#FAF9F5; --muted:#9C9A92;
+    --ghost:rgba(156,154,146,0.6); --accent:#C4633A; --accent-soft:rgba(196,99,58,0.12);
+    --ok:#7AB948; --frame:#0F0D0B;
+    --serif:"Tiempos Headline","Anthropic Serif",Georgia,serif;
+    --sans:"Anthropic Sans",-apple-system,"SF Pro Text",system-ui,sans-serif;
+    --ease:cubic-bezier(0.16,1,0.3,1);
+  }
+  *{margin:0;padding:0;box-sizing:border-box}
+  html,body{height:100%}
+  body{
+    background:var(--bg);
+    background-image:radial-gradient(55% 45% at 50% 0%, rgba(196,99,58,0.09) 0%, transparent 70%);
+    font-family:var(--sans); -webkit-font-smoothing:antialiased; color:var(--white);
+    display:flex; align-items:center; justify-content:center; overflow:hidden;
+  }
+  .wrap{ width:min(720px,90vw); }
+
+  .ctx{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; margin-bottom:22px; }
+  .ctx .chip{ background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 12px; }
+
+  h1{ font-family:var(--serif); font-weight:500; font-size:30px; letter-spacing:-0.01em; margin-bottom:20px; }
+
+  /* Hero: the agent already DOING it, live */
+  .hero{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:14px; }
+  .browser{ background:var(--frame); border:1px solid rgba(250,249,245,0.07); border-radius:12px; overflow:hidden; }
+  .bar{ display:flex; align-items:center; gap:7px; padding:9px 12px; border-bottom:1px solid rgba(250,249,245,0.06); }
+  .dot{ width:10px; height:10px; border-radius:50%; }
+  .dot.r{ background:#E06B5A } .dot.y{ background:#E0A94C } .dot.g{ background:#7AB948 }
+  .addr{ margin-left:8px; flex:1; background:rgba(250,249,245,0.05); border-radius:6px; font-size:12px; color:var(--muted); padding:4px 10px; }
+  .work{ padding:16px 16px 18px; }
+  .step{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--white); padding:6px 0; }
+  .step .m{ width:16px; text-align:center; }
+  .step.done{ color:var(--muted); }
+  .step.now .m{ color:var(--accent); animation:spin 1s linear infinite; display:inline-block; }
+  .caption{ display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(250,249,245,0.06); font-size:13px; color:var(--accent); }
+  .pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(196,99,58,0.6); animation:ping 1.6s var(--ease) infinite; }
+
+  .more-label{ font-size:13px; color:var(--muted); margin:20px 2px 10px; }
+  .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
+  .opt{ text-align:left; padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--border);
+        cursor:pointer; transition:background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); }
+  .opt:hover{ background:var(--accent-soft); border-color:var(--border-hover); transform:translateY(-2px); }
+  .opt .t{ font-size:15px; font-weight:550; }
+  .opt .d{ margin-top:4px; font-size:13px; color:var(--muted); }
+
+  .own{ margin-top:16px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
+        border-radius:12px; padding:13px 16px; color:var(--ghost); font-size:14px; }
+  .own .send{ margin-left:auto; color:var(--muted); }
+
+  @keyframes spin{ to{ transform:rotate(360deg) } }
+  @keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(196,99,58,0.55) } 70%{ box-shadow:0 0 0 9px rgba(196,99,58,0) } 100%{ box-shadow:0 0 0 0 rgba(196,99,58,0) } }
+</style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="ctx">◂ <span class="chip">🌐 Online</span> <span>you picked this a second ago</span></div>
+
+    <h1>On it. Watch, this is real:</h1>
+
+    <div class="hero">
+      <div class="browser">
+        <div class="bar">
+          <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          <span class="addr">bestbuy.com › headphones › sony-wh-1000xm5</span>
+        </div>
+        <div class="work">
+          <div class="step done"><span class="m">✓</span> opened 4 retailers</div>
+          <div class="step done"><span class="m">✓</span> read the live prices + stock</div>
+          <div class="step now"><span class="m">⟳</span> building you a side-by-side with the cheapest in stock</div>
+          <div class="caption"><span class="pulse"></span> a real browser, going and doing it. not a search summary.</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="more-label">or point me at one of these instead</div>
+    <div class="grid">
+      <div class="opt"><div class="t">⏰ Watch a price, ping me when it drops</div><div class="d">Name a product, I'll keep checking and text you.</div></div>
+      <div class="opt"><div class="t">🪑 Find the best-rated one under my budget</div><div class="d">I read the reviews so you don't have to.</div></div>
+    </div>
+
+    <div class="own">✎ ...or just tell me exactly what to do <span class="send">↵</span></div>
+  </div>
+</body>
+</html>

From 6c805e4932d24e3196515973ba2d82a684974c07 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 19:38:17 -0700
Subject: [PATCH 004/248] [eric] onboarding: real React flow components (Claude
 skin, 4 discovery steps + payoff, preview-gated); typechecks clean

---
 frontend/src/app/Main.tsx                     |   6 +
 .../Onboarding/flow/OnboardingAtoms.tsx       |  54 +++++++++
 .../Onboarding/flow/OnboardingFlow.tsx        |  99 +++++++++++++++++
 .../Onboarding/flow/OnboardingFlowPreview.tsx |  28 +++++
 .../Onboarding/flow/OnboardingIcons.tsx       |  58 ++++++++++
 .../Onboarding/flow/OnboardingShell.tsx       |  90 +++++++++++++++
 .../app/components/Onboarding/flow/Payoff.tsx | 103 ++++++++++++++++++
 .../Onboarding/flow/onboardingFlowTypes.ts    |  34 ++++++
 .../Onboarding/flow/onboardingSkin.ts         |  22 ++++
 .../Onboarding/flow/payoffDemoContent.ts      |  66 +++++++++++
 .../Onboarding/flow/steps/ConnectApps.tsx     |  75 +++++++++++++
 .../flow/steps/PersonalizeConsent.tsx         |  73 +++++++++++++
 .../flow/steps/WhatShouldICallYou.tsx         |  47 ++++++++
 .../flow/steps/WhereDoYouWantHelp.tsx         |  59 ++++++++++
 frontend/src/shared/state/settingsSlice.ts    |   3 +
 15 files changed, 817 insertions(+)
 create mode 100644 frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/Payoff.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
 create mode 100644 frontend/src/app/components/Onboarding/flow/onboardingSkin.ts
 create mode 100644 frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx

diff --git a/frontend/src/app/Main.tsx b/frontend/src/app/Main.tsx
index 49acecb3..63e8bf3f 100644
--- a/frontend/src/app/Main.tsx
+++ b/frontend/src/app/Main.tsx
@@ -36,6 +36,9 @@ const Analytics = React.lazy(() => import('./pages/Analytics/Analytics'));
 const OnboardingRoot = React.lazy(() =>
   import('./components/Onboarding').then((m) => ({ default: m.OnboardingRoot })),
 );
+const OnboardingFlowPreview = React.lazy(() =>
+  import('./components/Onboarding/flow/OnboardingFlowPreview').then((m) => ({ default: m.OnboardingFlowPreview })),
+);
 
 if (typeof window !== 'undefined') {
   // Diagnostic global error capture. The packaged bundle has no source maps, so without these handlers the only thing that reaches main-process stderr is "Uncaught TypeError: ... (bundle.js:2)" with zero stack context. Forward error.stack and Redux action.type when available so we can pinpoint the offender across the chat-spawn / workflow rendering paths even in minified prod.
@@ -547,6 +550,9 @@ const ThemedApp: React.FC = () => {
                     <OnboardingRoot />
                   </Suspense>
                 </OnboardingErrorGuard>
+                <Suspense fallback={null}>
+                  <OnboardingFlowPreview />
+                </Suspense>
               </DeepLinkListener>
             </UpdateListener>
             </DefaultModelGuard>
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx
new file mode 100644
index 00000000..a6eb2dc8
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx
@@ -0,0 +1,54 @@
+// Small shared UI atoms for the onboarding screens (serif heading, subtitle, white CTA, ghost link).
+
+import React from 'react';
+import { ONBOARDING_SKIN as S } from './onboardingSkin';
+
+export const Heading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <h1 style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 33, lineHeight: 1.15, letterSpacing: '-0.005em', color: S.text, margin: 0 }}>
+    {children}
+  </h1>
+);
+
+export const Sub: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{ marginTop: 12, fontSize: 15, color: S.muted }}>{children}</div>
+);
+
+export const PrimaryButton: React.FC<{ onClick: () => void; children: React.ReactNode; style?: React.CSSProperties }> = ({
+  onClick,
+  children,
+  style,
+}) => (
+  <button
+    onClick={onClick}
+    style={{
+      marginTop: 24,
+      width: '100%',
+      maxWidth: 430,
+      background: S.ctaBg,
+      color: S.ctaText,
+      border: 'none',
+      borderRadius: 11,
+      padding: 14,
+      fontFamily: S.sans,
+      fontSize: 15,
+      fontWeight: 600,
+      cursor: 'pointer',
+      ...style,
+    }}
+  >
+    {children}
+  </button>
+);
+
+export const GhostLink: React.FC<{ onClick: () => void; children: React.ReactNode; style?: React.CSSProperties }> = ({
+  onClick,
+  children,
+  style,
+}) => (
+  <div
+    onClick={onClick}
+    style={{ marginTop: 26, color: S.muted, fontSize: 14, cursor: 'pointer', ...style }}
+  >
+    {children}
+  </div>
+);
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
new file mode 100644
index 00000000..fc451388
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -0,0 +1,99 @@
+// Orchestrates the onboarding flow: a small step machine (help -> name -> consent -> connect ->
+// payoff) that writes name + persona to settings and hands the payoff its content. The real launch,
+// consent persistence, and background profiling wire in as follow steps.
+
+import React, { useMemo, useState } from 'react';
+import { useAppDispatch } from '@/shared/hooks';
+import { updateSettingsPatch } from '@/shared/state/settingsSlice';
+import { OnboardingShell } from './OnboardingShell';
+import { WhereDoYouWantHelp } from './steps/WhereDoYouWantHelp';
+import { WhatShouldICallYou } from './steps/WhatShouldICallYou';
+import { PersonalizeConsent } from './steps/PersonalizeConsent';
+import { ConnectApps } from './steps/ConnectApps';
+import { Payoff } from './Payoff';
+import { demoPayoff } from './payoffDemoContent';
+import type { FlowStepId, PersonaId, PayoffIdea } from './onboardingFlowTypes';
+
+const DOT_INDEX: Record<FlowStepId, number | undefined> = {
+  help: 0,
+  name: 1,
+  consent: 2,
+  connect: 3,
+  payoff: undefined,
+};
+
+function greetingFor(name: string): string {
+  const h = new Date().getHours();
+  const part = h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening';
+  return name ? `${part}, ${name}.` : `${part}.`;
+}
+
+export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) => {
+  const dispatch = useAppDispatch();
+  const [step, setStep] = useState<FlowStepId>('help');
+  const [persona, setPersona] = useState<PersonaId | null>(null);
+  const [name, setName] = useState('');
+  const [connectedIds, setConnectedIds] = useState<string[]>([]);
+
+  const payoff = useMemo(() => demoPayoff(persona), [persona]);
+
+  // The prefilled task / an idea is what actually launches the first agent. Real launch (createDraftSession
+  // + prefillPrompt + launchAndSendFirstMessage) wires in a follow step; for now finishing exits the flow.
+  const launch = (unusedPrompt: string) => onExit();
+
+  const body = () => {
+    switch (step) {
+      case 'help':
+        return (
+          <WhereDoYouWantHelp
+            onPick={(p) => {
+              dispatch(updateSettingsPatch({ user_use_case: p.useCase }));
+              setPersona(p.id);
+              setStep('name');
+            }}
+            onSkip={() => { setPersona(null); setStep('payoff'); }}
+          />
+        );
+      case 'name':
+        return (
+          <WhatShouldICallYou
+            initialName={name}
+            onContinue={(n) => {
+              if (n) { setName(n); dispatch(updateSettingsPatch({ user_name: n })); }
+              setStep('consent');
+            }}
+            onSkip={() => setStep('consent')}
+          />
+        );
+      case 'consent':
+        return <PersonalizeConsent onConsent={(yes) => setStep(yes ? 'connect' : 'payoff')} />;
+      case 'connect':
+        return (
+          <ConnectApps
+            connectedIds={connectedIds}
+            onConnect={(id) => setConnectedIds((ids) => (ids.includes(id) ? ids : [...ids, id]))}
+            onContinue={() => setStep('payoff')}
+            onSkip={() => setStep('payoff')}
+          />
+        );
+      case 'payoff':
+        return (
+          <Payoff
+            greeting={greetingFor(name)}
+            remark={persona ? "(someone's been busy, huh)" : undefined}
+            insight={payoff.insight}
+            prefilledPrompt={payoff.prefilledPrompt}
+            ideas={payoff.ideas}
+            onRun={() => launch(payoff.prefilledPrompt)}
+            onPickIdea={(idea: PayoffIdea) => launch(idea.prompt)}
+          />
+        );
+    }
+  };
+
+  return (
+    <OnboardingShell stepKey={step} stepIndex={DOT_INDEX[step]} totalSteps={4}>
+      {body()}
+    </OnboardingShell>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx
new file mode 100644
index 00000000..c8b283d6
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx
@@ -0,0 +1,28 @@
+// Preview-only gate for the new onboarding flow while we iterate. It does NOT replace the live
+// onboarding yet (that's a follow step). Renders the flow overlay only when a localStorage flag is
+// set, so real users never see it. Toggle in the console (or over CDP):
+//   localStorage.setItem('openswarm.onboarding.flowPreview','1'); location.reload();
+
+import React, { useState, useEffect } from 'react';
+import { OnboardingFlow } from './OnboardingFlow';
+
+const FLAG = 'openswarm.onboarding.flowPreview';
+
+export const OnboardingFlowPreview: React.FC = () => {
+  const [on, setOn] = useState(false);
+
+  useEffect(() => {
+    try { setOn(window.localStorage.getItem(FLAG) === '1'); } catch { /* no localStorage */ }
+  }, []);
+
+  if (!on) return null;
+
+  return (
+    <OnboardingFlow
+      onExit={() => {
+        try { window.localStorage.removeItem(FLAG); } catch { /* no localStorage */ }
+        setOn(false);
+      }}
+    />
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx
new file mode 100644
index 00000000..a193f681
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx
@@ -0,0 +1,58 @@
+// Thin line icons + the brand spark, matching Claude onboarding's icon style. No emoji.
+
+import React from 'react';
+import type { IconName } from './onboardingFlowTypes';
+
+const ICON_INNER: Record<IconName, React.ReactNode> = {
+  work: (<><rect x={3} y={7.5} width={18} height={12} rx={2} /><path d="M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5" /><path d="M3 13h18" /></>),
+  home: (<><path d="M4 10.5 12 4l8 6.5" /><path d="M6 9.5V20h12V9.5" /><path d="M10 20v-5h4v5" /></>),
+  build: (<><path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" /></>),
+  mail: (<><rect x={3} y={5} width={18} height={14} rx={2} /><path d="m3 7 9 6 9-6" /></>),
+  doc: (<><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5" /></>),
+  chat: (<path d="M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z" />),
+  sun: (<><circle cx={12} cy={12} r={4} /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></>),
+  tray: (<><path d="M3 12h4l2 3h6l2-3h4" /><path d="M5 6h14l2 6v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z" /></>),
+  globe: (<><circle cx={12} cy={12} r={9} /><path d="M3 12h18" /><path d="M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18" /></>),
+};
+
+export const LineIcon: React.FC<{ name: IconName; size?: number; strokeWidth?: number }> = ({
+  name,
+  size = 24,
+  strokeWidth = 1.5,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    {ICON_INNER[name]}
+  </svg>
+);
+
+// The 12-ray coral burst; drawn, not a font glyph, so it's crisp at any size.
+export const Spark: React.FC<{ size?: number; color?: string }> = ({ size = 20, color = '#D97757' }) => {
+  const rays = [];
+  for (let i = 0; i < 12; i++) {
+    const a = (i * 30 * Math.PI) / 180;
+    rays.push(
+      <line
+        key={i}
+        x1={12 + 3.1 * Math.cos(a)}
+        y1={12 + 3.1 * Math.sin(a)}
+        x2={12 + 9.3 * Math.cos(a)}
+        y2={12 + 9.3 * Math.sin(a)}
+      />,
+    );
+  }
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" stroke={color} strokeWidth={1.7} strokeLinecap="round" aria-hidden>
+      {rays}
+    </svg>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
new file mode 100644
index 00000000..4eeebd38
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
@@ -0,0 +1,90 @@
+// The premium frame every onboarding screen sits in: brand pinned top-center, content
+// vertically centered, entrance fade (reduced-motion aware), and the discovery progress dots.
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
+import { ONBOARDING_SKIN as S, ONBOARDING_EASE } from './onboardingSkin';
+import { Spark } from './OnboardingIcons';
+
+interface Props {
+  children: React.ReactNode;
+  /** Changing this re-triggers the entrance fade (one per screen). */
+  stepKey: string;
+  /** 0-based; when set with totalSteps, renders the bottom dots. */
+  stepIndex?: number;
+  totalSteps?: number;
+}
+
+const overlay: React.CSSProperties = {
+  position: 'fixed',
+  inset: 0,
+  zIndex: 2000,
+  background: S.bg,
+  color: S.text,
+  fontFamily: S.sans,
+  WebkitFontSmoothing: 'antialiased',
+  overflow: 'hidden',
+};
+
+export const OnboardingShell: React.FC<Props> = ({ children, stepKey, stepIndex, totalSteps }) => {
+  const reduce = useReducedMotion();
+  const showDots = typeof stepIndex === 'number' && typeof totalSteps === 'number';
+
+  return (
+    <div style={overlay}>
+      <div
+        style={{
+          position: 'fixed',
+          top: 34,
+          left: '50%',
+          transform: 'translateX(-50%)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 9,
+        }}
+      >
+        <span style={{ lineHeight: 0 }}>
+          <Spark size={20} color={S.accent} />
+        </span>
+        <span style={{ fontFamily: S.serif, fontSize: 25, fontWeight: 500, letterSpacing: 0.2 }}>OpenSwarm</span>
+      </div>
+
+      <motion.div
+        key={stepKey}
+        initial={reduce ? false : { opacity: 0, y: 6 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: reduce ? 0 : 0.5, ease: ONBOARDING_EASE }}
+        style={{
+          position: 'fixed',
+          inset: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+        }}
+      >
+        <div style={{ width: 'min(720px, 88vw)', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          {children}
+        </div>
+      </motion.div>
+
+      {showDots && (
+        <div style={{ position: 'fixed', bottom: 40, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 9 }}>
+          {Array.from({ length: totalSteps as number }).map((unused, i) => (
+            <span
+              key={i}
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                background: i === stepIndex ? S.accent : 'rgba(243,241,234,0.16)',
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/Payoff.tsx b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
new file mode 100644
index 00000000..b1819703
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
@@ -0,0 +1,103 @@
+// The payoff: name + quirky remark + insight + a prefilled runnable task + tailored "Ideas for you".
+// Presentational; the orchestrator feeds it content (persona-derived now, profile-derived later).
+
+import React, { useState } from 'react';
+import { ONBOARDING_SKIN as S } from './onboardingSkin';
+import { LineIcon } from './OnboardingIcons';
+import { Heading } from './OnboardingAtoms';
+import type { PayoffIdea } from './onboardingFlowTypes';
+
+const IdeaRow: React.FC<{ idea: PayoffIdea; onPick: () => void }> = ({ idea, onPick }) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <div
+      onClick={onPick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 13,
+        padding: '10px 10px',
+        fontSize: 15.5,
+        cursor: 'pointer',
+        borderRadius: 9,
+        background: hover ? S.surface : 'transparent',
+        transition: 'background .15s',
+      }}
+    >
+      <span style={{ color: S.muted, width: 22, display: 'flex', justifyContent: 'center' }}>
+        <LineIcon name={idea.icon} size={17} />
+      </span>
+      {idea.label}
+    </div>
+  );
+};
+
+export const Payoff: React.FC<{
+  greeting: string;
+  remark?: string;
+  insight: string;
+  prefilledPrompt: string;
+  ideas: PayoffIdea[];
+  onRun: () => void;
+  onPickIdea: (idea: PayoffIdea) => void;
+}> = ({ greeting, remark, insight, prefilledPrompt, ideas, onRun, onPickIdea }) => (
+  <>
+    <Heading>{greeting}</Heading>
+    {remark && <div style={{ marginTop: 10, fontSize: 15, color: S.muted, fontStyle: 'italic' }}>{remark}</div>}
+    <div style={{ marginTop: 20, fontSize: 16, color: S.muted, lineHeight: 1.5, maxWidth: 540 }}>{insight}</div>
+
+    <div
+      style={{
+        marginTop: 26,
+        width: '100%',
+        maxWidth: 600,
+        background: S.surface,
+        border: `1px solid ${S.border}`,
+        borderRadius: S.radius,
+        padding: '20px 22px',
+        textAlign: 'left',
+      }}
+    >
+      <div style={{ fontSize: 15.5, lineHeight: 1.55, color: S.text }}>{prefilledPrompt}</div>
+      <div
+        style={{
+          marginTop: 16,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          color: S.muted,
+          fontSize: 13,
+          borderTop: `1px solid ${S.border}`,
+          paddingTop: 14,
+        }}
+      >
+        <span>+</span>
+        <span>Cowork</span>
+        <span style={{ marginLeft: 8 }}>Opus 4.8</span>
+        <span
+          onClick={onRun}
+          style={{
+            marginLeft: 'auto',
+            background: S.ctaBg,
+            color: S.ctaText,
+            borderRadius: 9,
+            padding: '7px 15px',
+            fontWeight: 600,
+            cursor: 'pointer',
+          }}
+        >
+          Run
+        </span>
+      </div>
+    </div>
+
+    <div style={{ marginTop: 24, width: '100%', maxWidth: 600, textAlign: 'left' }}>
+      <div style={{ fontSize: 13, color: S.muted, marginBottom: 8 }}>Ideas for you</div>
+      {ideas.map((idea) => (
+        <IdeaRow key={idea.id} idea={idea} onPick={() => onPickIdea(idea)} />
+      ))}
+    </div>
+  </>
+);
diff --git a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
new file mode 100644
index 00000000..1871ac2f
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
@@ -0,0 +1,34 @@
+// Shared types for the onboarding flow. Bad states unrepresentable: step + persona are unions.
+
+export type IconName =
+  | 'work' | 'home' | 'build'
+  | 'mail' | 'doc' | 'chat'
+  | 'sun' | 'tray' | 'globe';
+
+export type PersonaId = 'work' | 'personal' | 'build';
+
+export interface PersonaOption {
+  id: PersonaId;
+  title: string;
+  description: string;
+  icon: IconName;
+  /** Written to settings.user_use_case; seeds the payoff generator. */
+  useCase: string;
+}
+
+export type FlowStepId = 'help' | 'name' | 'consent' | 'connect' | 'payoff';
+
+export interface ConnectorOption {
+  id: string;
+  name: string;
+  description: string;
+  icon: IconName;
+}
+
+export interface PayoffIdea {
+  id: string;
+  icon: IconName;
+  label: string;
+  /** The full runnable prompt this idea launches. */
+  prompt: string;
+}
diff --git a/frontend/src/app/components/Onboarding/flow/onboardingSkin.ts b/frontend/src/app/components/Onboarding/flow/onboardingSkin.ts
new file mode 100644
index 00000000..5cafc92d
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/onboardingSkin.ts
@@ -0,0 +1,22 @@
+// Always-dark premium skin for the onboarding flow, matching Claude.ai onboarding.
+// Deliberately NOT the app's theme tokens: onboarding is always this dark, like Claude's.
+
+export const ONBOARDING_SKIN = {
+  bg: '#1C1B19',
+  surface: '#252420',
+  surfaceHover: '#2B2A25',
+  text: '#F3F1EA',
+  muted: '#8F8D86',
+  ghost: '#6F6E68',
+  accent: '#D97757',
+  border: 'rgba(243,241,234,0.08)',
+  borderStrong: 'rgba(243,241,234,0.14)',
+  ctaBg: '#F3F1EA',
+  ctaText: '#1A1917',
+  serif: '"Copernicus", "Tiempos Headline", Georgia, "Times New Roman", serif',
+  sans: '"Styrene B", "Anthropic Sans", -apple-system, "SF Pro Text", system-ui, sans-serif',
+  radius: 16,
+} as const;
+
+// framer-motion cubic-bezier for entrances; matches the mock's --ease.
+export const ONBOARDING_EASE = [0.16, 1, 0.3, 1] as const;
diff --git a/frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts b/frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts
new file mode 100644
index 00000000..f9be2396
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts
@@ -0,0 +1,66 @@
+// Placeholder payoff content keyed by persona. This is the deterministic FLOOR; the real payoff is
+// generated per-user by the aux LLM (resolve_aux_model + the p_call_classifier pattern) in a later
+// step. Kept separate so swapping the source doesn't touch the orchestrator.
+
+import type { PersonaId, PayoffIdea } from './onboardingFlowTypes';
+
+export interface PayoffContent {
+  insight: string;
+  prefilledPrompt: string;
+  ideas: PayoffIdea[];
+}
+
+const WORK: PayoffContent = {
+  insight: "I see you're juggling client work and a launch. Here's one I can do right now, plus a few I lined up for you.",
+  prefilledPrompt:
+    "Send me a morning briefing: today's calendar, anything urgent in my email, and what my competitors shipped. Show me a sample before it goes live.",
+  ideas: [
+    { id: 'briefing', icon: 'sun', label: 'Send me a morning briefing', prompt: 'Set up a daily morning briefing with my calendar and any urgent email.' },
+    { id: 'invoices', icon: 'tray', label: 'Clean up + chase my overdue invoices', prompt: 'Find my overdue invoices and draft polite follow-ups, ready to send.' },
+    { id: 'tracker', icon: 'build', label: 'Build me a lightweight client tracker', prompt: 'Build and run a simple client tracker I can add clients and statuses to.' },
+    { id: 'competitors', icon: 'globe', label: 'Watch my 3 competitors, ping me on changes', prompt: 'Watch 3 competitor sites and notify me when they change.' },
+  ],
+};
+
+const PERSONAL: PayoffContent = {
+  insight: "Life admin piles up. Here's one I can knock out right now, plus a few I lined up for you.",
+  prefilledPrompt:
+    'Plan my week: pull my calendar, flag any conflicts, and draft a simple to-do for what is actually due. Show me before you save anything.',
+  ideas: [
+    { id: 'inbox', icon: 'tray', label: 'Sort out my inbox pileup', prompt: 'Triage my inbox: surface what needs a reply and draft quick responses.' },
+    { id: 'book', icon: 'globe', label: 'Find + book the best option for something', prompt: 'Find the best-rated option for what I need and walk me through booking it.' },
+    { id: 'digest', icon: 'sun', label: 'Set a morning digest of what matters today', prompt: 'Send me a short morning digest of today plans and anything urgent.' },
+    { id: 'goal', icon: 'build', label: 'Build me a simple tracker for a goal', prompt: 'Build and run a simple tracker for a personal goal.' },
+  ],
+};
+
+const BUILD: PayoffContent = {
+  insight: "Ideas are cheap, shipping is the thing. Here's one I can start right now, plus a few more.",
+  prefilledPrompt:
+    'Turn my idea into a working prototype: ask me 3 quick questions, then build and run a first version I can actually click.',
+  ideas: [
+    { id: 'prototype', icon: 'build', label: 'Build + run a small tool from a sentence', prompt: 'Build and run a small tool from a one-sentence description.' },
+    { id: 'stack', icon: 'globe', label: 'Research the best stack for my idea', prompt: 'Research and recommend the best stack for my idea, with tradeoffs.' },
+    { id: 'spec', icon: 'doc', label: 'Draft a spec from my rough notes', prompt: 'Turn my rough notes into a clean, buildable spec.' },
+    { id: 'board', icon: 'tray', label: 'Set up a simple task board', prompt: 'Build and run a simple task board for my project.' },
+  ],
+};
+
+const GENERIC: PayoffContent = {
+  insight: "Here's a taste of what I can actually do, watch, not just chat.",
+  prefilledPrompt:
+    'Find the 3 best-rated options for something under my budget, compare them side by side, and tell me which to get.',
+  ideas: [
+    { id: 'web', icon: 'globe', label: 'Do a real web task, live', prompt: 'Do a real task on the web for me, start to finish.' },
+    { id: 'tool', icon: 'build', label: 'Build + run a small tool', prompt: 'Build and run a small tool from a one-sentence description.' },
+    { id: 'digest', icon: 'sun', label: 'Set up a daily briefing', prompt: 'Set up a short daily briefing of what matters to me.' },
+    { id: 'clean', icon: 'tray', label: 'Clean up a messy list into a sheet', prompt: 'Turn a messy list into a clean, usable sheet.' },
+  ],
+};
+
+export function demoPayoff(persona: PersonaId | null): PayoffContent {
+  if (persona === 'work') return WORK;
+  if (persona === 'personal') return PERSONAL;
+  if (persona === 'build') return BUILD;
+  return GENERIC;
+}
diff --git a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
new file mode 100644
index 00000000..011c1502
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
@@ -0,0 +1,75 @@
+// D4: optional connect. The connectors the profiling agent may later read. Skippable; payoff still works.
+// UI-only here: real OAuth (integrations.tsx / POST /{tool_id}/oauth/start) wires in a follow step.
+
+import React from 'react';
+import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { LineIcon } from '../OnboardingIcons';
+import { Heading, Sub, PrimaryButton, GhostLink } from '../OnboardingAtoms';
+import type { ConnectorOption } from '../onboardingFlowTypes';
+
+const CONNECTORS: ConnectorOption[] = [
+  { id: 'google', name: 'Google', description: 'Gmail, Calendar, Drive', icon: 'mail' },
+  { id: 'notion', name: 'Notion', description: 'notes, docs, tasks', icon: 'doc' },
+  { id: 'slack', name: 'Slack', description: 'messages, channels', icon: 'chat' },
+];
+
+const Row: React.FC<{ option: ConnectorOption; connected: boolean; onConnect: () => void }> = ({
+  option,
+  connected,
+  onConnect,
+}) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 14,
+      background: S.surface,
+      border: `1px solid ${S.border}`,
+      borderRadius: 14,
+      padding: '16px 18px',
+      textAlign: 'left',
+    }}
+  >
+    <span style={{ color: S.text, opacity: 0.9, display: 'flex' }}>
+      <LineIcon name={option.icon} size={20} />
+    </span>
+    <div>
+      <div style={{ fontSize: 15, fontWeight: 500 }}>{option.name}</div>
+      <div style={{ fontSize: 12.5, color: S.muted, marginTop: 2 }}>{option.description}</div>
+    </div>
+    <span
+      onClick={connected ? undefined : onConnect}
+      style={{
+        marginLeft: 'auto',
+        fontSize: 13,
+        color: connected ? S.muted : S.text,
+        background: connected ? 'transparent' : S.surfaceHover,
+        border: `1px solid ${connected ? S.border : S.borderStrong}`,
+        borderRadius: 999,
+        padding: '6px 15px',
+        cursor: connected ? 'default' : 'pointer',
+      }}
+    >
+      {connected ? 'Connected' : 'Connect'}
+    </span>
+  </div>
+);
+
+export const ConnectApps: React.FC<{
+  connectedIds: string[];
+  onConnect: (id: string) => void;
+  onContinue: () => void;
+  onSkip: () => void;
+}> = ({ connectedIds, onConnect, onContinue, onSkip }) => (
+  <>
+    <Heading>Connect what I can work with</Heading>
+    <Sub>optional, and I&#39;ll only ever read it to understand you</Sub>
+    <div style={{ marginTop: 44, width: '100%', maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 11 }}>
+      {CONNECTORS.map((c) => (
+        <Row key={c.id} option={c} connected={connectedIds.includes(c.id)} onConnect={() => onConnect(c.id)} />
+      ))}
+    </div>
+    <PrimaryButton onClick={onContinue} style={{ maxWidth: 200 }}>Continue</PrimaryButton>
+    <GhostLink onClick={onSkip}>skip for now</GhostLink>
+  </>
+);
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
new file mode 100644
index 00000000..b322d947
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
@@ -0,0 +1,73 @@
+// D3: the personalize consent. One serif line types itself in, then a single Yes. "Yes" authorizes
+// the (later) background profiling read; copy states that plainly. This is a permission, not a checkbox.
+
+import React, { useEffect, useState } from 'react';
+import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
+import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { PrimaryButton, GhostLink } from '../OnboardingAtoms';
+
+const LINE =
+  "Want me to actually get you? Say yes and I'll take a quick look at whatever you connect, so everything I show is aimed at your world, not a generic demo.";
+
+export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }> = ({ onConsent }) => {
+  const reduce = useReducedMotion();
+  const [shown, setShown] = useState(reduce ? LINE.length : 0);
+  const done = shown >= LINE.length;
+
+  useEffect(() => {
+    if (reduce) { setShown(LINE.length); return; }
+    setShown(0);
+    let i = 0;
+    const id = window.setInterval(() => {
+      i += 1;
+      setShown(i);
+      if (i >= LINE.length) window.clearInterval(id);
+    }, 16);
+    return () => window.clearInterval(id);
+  }, [reduce]);
+
+  return (
+    <>
+      <div
+        style={{
+          fontFamily: S.serif,
+          fontWeight: 500,
+          fontSize: 29,
+          lineHeight: 1.4,
+          maxWidth: 620,
+          minHeight: '4.4em',
+          color: S.text,
+        }}
+      >
+        {LINE.slice(0, shown)}
+        <span
+          style={{
+            display: 'inline-block',
+            width: 2,
+            height: '1.02em',
+            background: S.accent,
+            marginLeft: 3,
+            verticalAlign: -3,
+            animation: reduce ? undefined : 'onboardingCaretBlink 1s steps(1) infinite',
+          }}
+        />
+      </div>
+      <div
+        style={{
+          marginTop: 14,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+          opacity: done ? 1 : 0,
+          transition: 'opacity .6s ease',
+          pointerEvents: done ? 'auto' : 'none',
+        }}
+      >
+        <PrimaryButton onClick={() => onConsent(true)}>Yes, get to know me</PrimaryButton>
+        <GhostLink style={{ marginTop: 2 }} onClick={() => onConsent(false)}>not now</GhostLink>
+      </div>
+      <style>{'@keyframes onboardingCaretBlink{50%{opacity:0}}'}</style>
+    </>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx b/frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx
new file mode 100644
index 00000000..03f8676f
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx
@@ -0,0 +1,47 @@
+// D2: one field, the name. Claude single-control screen. Enter or Continue advances.
+
+import React, { useState } from 'react';
+import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { Heading, Sub, PrimaryButton, GhostLink } from '../OnboardingAtoms';
+
+export const WhatShouldICallYou: React.FC<{
+  initialName?: string;
+  onContinue: (name: string) => void;
+  onSkip: () => void;
+}> = ({ initialName = '', onContinue, onSkip }) => {
+  const [name, setName] = useState(initialName);
+  const [focus, setFocus] = useState(false);
+  const submit = () => onContinue(name.trim());
+
+  return (
+    <>
+      <Heading>What should I call you?</Heading>
+      <Sub>so this feels like yours, not a demo</Sub>
+      <div style={{ marginTop: 46, width: '100%', maxWidth: 430 }}>
+        <input
+          autoFocus
+          value={name}
+          placeholder="Your name"
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+          style={{
+            width: '100%',
+            background: S.surface,
+            border: `1px solid ${focus ? S.accent : S.borderStrong}`,
+            borderRadius: 12,
+            padding: '15px 18px',
+            color: S.text,
+            fontSize: 16,
+            fontFamily: S.sans,
+            textAlign: 'left',
+            outline: 'none',
+          }}
+        />
+      </div>
+      <PrimaryButton onClick={submit}>Continue</PrimaryButton>
+      <GhostLink onClick={onSkip}>skip</GhostLink>
+    </>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx b/frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx
new file mode 100644
index 00000000..6086f5c3
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx
@@ -0,0 +1,59 @@
+// D1: one tap on a persona card. The single personalization seed. "just show me" skips to payoff.
+
+import React, { useState } from 'react';
+import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { LineIcon } from '../OnboardingIcons';
+import { Heading, GhostLink } from '../OnboardingAtoms';
+import type { PersonaOption } from '../onboardingFlowTypes';
+
+const PERSONAS: PersonaOption[] = [
+  { id: 'work', title: 'My work', description: 'clients, admin, the busywork', icon: 'work', useCase: 'work: clients, admin, busywork' },
+  { id: 'personal', title: 'My personal life', description: 'errands, plans, life admin', icon: 'home', useCase: 'personal life: errands, plans, admin' },
+  { id: 'build', title: 'Building things', description: 'tools, sites, ideas', icon: 'build', useCase: 'building: tools, sites, ideas' },
+];
+
+const Card: React.FC<{ option: PersonaOption; onPick: () => void }> = ({ option, onPick }) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <div
+      onClick={onPick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        flex: 1,
+        minHeight: 250,
+        padding: '34px 22px',
+        borderRadius: S.radius,
+        background: hover ? S.surfaceHover : S.surface,
+        border: `1px solid ${hover ? S.borderStrong : S.border}`,
+        cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        transform: hover ? 'translateY(-2px)' : 'none',
+        transition: 'background .18s ease, border-color .18s ease, transform .18s ease',
+      }}
+    >
+      <span style={{ color: S.text, marginTop: 10, marginBottom: 'auto', opacity: 0.92 }}>
+        <LineIcon name={option.icon} size={46} strokeWidth={1.3} />
+      </span>
+      <div style={{ fontFamily: S.serif, fontSize: 21, fontWeight: 500, marginTop: 28 }}>{option.title}</div>
+      <div style={{ marginTop: 8, fontSize: 13, color: S.muted, lineHeight: 1.4, maxWidth: 170 }}>{option.description}</div>
+    </div>
+  );
+};
+
+export const WhereDoYouWantHelp: React.FC<{
+  onPick: (persona: PersonaOption) => void;
+  onSkip: () => void;
+}> = ({ onPick, onSkip }) => (
+  <>
+    <Heading>Where do you want help first?</Heading>
+    <div style={{ marginTop: 52, display: 'flex', gap: 18, justifyContent: 'center', width: '100%' }}>
+      {PERSONAS.map((p) => (
+        <Card key={p.id} option={p} onPick={() => onPick(p)} />
+      ))}
+    </div>
+    <GhostLink onClick={onSkip}>just show me</GhostLink>
+  </>
+);
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index c9a8fec5..39c93dd4 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -73,6 +73,9 @@ export interface AppSettings {
   user_id?: string | null;
   user_email?: string | null;
   signin_method?: 'google' | 'email' | 'stripe' | null;
+  /** Self-reported onboarding persona + name (backend model already carries these); drive payoff personalization. */
+  user_name?: string | null;
+  user_use_case?: string | null;
   /** Anonymous device id (first-run generated); stitches anon to authed PostHog Persons. */
   installation_id?: string | null;
 }

From 10908c149019104f9e05fc4d8535df010cab4af2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:10:25 -0700
Subject: [PATCH 005/248] [eric] onboarding: portal the flow overlay to body at
 top z-index so it covers app chrome (the search bar)

---
 .../components/Onboarding/flow/OnboardingShell.tsx    | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
index 4eeebd38..f543564c 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
@@ -2,6 +2,7 @@
 // vertically centered, entrance fade (reduced-motion aware), and the discovery progress dots.
 
 import React from 'react';
+import { createPortal } from 'react-dom';
 import { motion } from 'framer-motion';
 import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
 import { ONBOARDING_SKIN as S, ONBOARDING_EASE } from './onboardingSkin';
@@ -16,10 +17,12 @@ interface Props {
   totalSteps?: number;
 }
 
+// Portaled to document.body + a near-max z-index so it escapes any ancestor transform's stacking
+// context and covers ALL app chrome (the ⌘K search bar, headers). This is the real takeover layer.
 const overlay: React.CSSProperties = {
   position: 'fixed',
   inset: 0,
-  zIndex: 2000,
+  zIndex: 2147483000,
   background: S.bg,
   color: S.text,
   fontFamily: S.sans,
@@ -30,8 +33,9 @@ const overlay: React.CSSProperties = {
 export const OnboardingShell: React.FC<Props> = ({ children, stepKey, stepIndex, totalSteps }) => {
   const reduce = useReducedMotion();
   const showDots = typeof stepIndex === 'number' && typeof totalSteps === 'number';
+  if (typeof document === 'undefined') return null;
 
-  return (
+  return createPortal(
     <div style={overlay}>
       <div
         style={{
@@ -85,6 +89,7 @@ export const OnboardingShell: React.FC<Props> = ({ children, stepKey, stepIndex,
           ))}
         </div>
       )}
-    </div>
+    </div>,
+    document.body,
   );
 };

From 9d32d7338d0d512d07032078009988c71c08f52a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:10:25 -0700
Subject: [PATCH 006/248] [eric] onboarding: read-only profiling agent (scoped,
 consent-gated, timeout, fail-open) + payoff progressive wiring + tests

---
 backend/apps/agents/agents.py                 |  16 ++
 backend/apps/agents/onboarding_profile.py     | 194 ++++++++++++++++++
 backend/tests/test_onboarding_profile.py      |  52 +++++
 .../Onboarding/flow/OnboardingFlow.tsx        |  23 ++-
 .../Onboarding/flow/onboardingFlowTypes.ts    |   6 +
 .../Onboarding/flow/useOnboardingProfile.ts   |  32 +++
 6 files changed, 320 insertions(+), 3 deletions(-)
 create mode 100644 backend/apps/agents/onboarding_profile.py
 create mode 100644 backend/tests/test_onboarding_profile.py
 create mode 100644 frontend/src/app/components/Onboarding/flow/useOnboardingProfile.ts

diff --git a/backend/apps/agents/agents.py b/backend/apps/agents/agents.py
index 081ab740..08e18c2b 100644
--- a/backend/apps/agents/agents.py
+++ b/backend/apps/agents/agents.py
@@ -119,6 +119,22 @@ async def send_message(session_id: str, body: dict):
     )
     return {"ok": True}
 
+@agents.router.post("/onboarding-profile")
+async def onboarding_profile(body: dict):
+    """Onboarding payoff: skim the user's connected Google account (read-only, consent-gated) and
+    return {observation, options}. Fail-open: any miss returns an empty observation so the frontend
+    keeps its persona floor. Never blocks the payoff (the frontend fires this in the background)."""
+    from backend.apps.agents.onboarding_profile import profile_user
+
+    try:
+        result = await profile_user(str(body.get("name") or ""), bool(body.get("consent")))
+    except Exception:
+        logger.exception("onboarding-profile endpoint failed")
+        result = None
+    if result is None:
+        return {"observation": "", "options": []}
+    return result.model_dump(mode="json")
+
 @agents.router.post("/sessions/{session_id}/stop")
 async def stop_agent(session_id: str):
     await agent_manager.stop_agent(session_id)
diff --git a/backend/apps/agents/onboarding_profile.py b/backend/apps/agents/onboarding_profile.py
new file mode 100644
index 00000000..ff6d960c
--- /dev/null
+++ b/backend/apps/agents/onboarding_profile.py
@@ -0,0 +1,194 @@
+"""Onboarding profiling: a scoped, read-only, one-shot agent that skims the user's connected
+Google account and returns a plain-English observation + a few concrete task options.
+
+Fail-safe by construction: consent-gated, hard timeout, and every failure path returns None so the
+onboarding payoff simply stays on its persona floor (never a spinner, never a fabricated observation).
+Rides the free-trial tier automatically (the run is tagged by session.id in configure_provider_env).
+
+NOT yet verified against a live connected Google account: the write-denial guarantee here is
+prompt-level ("read only, never send/change"); hardening it to a per-tool deny-list (so writes are
+undispatchable) is a follow-up that needs a connected account to confirm it sticks past the gate's
+disk re-read, plus the read tools' ask-policy must not stall a headless run. The hard timeout bounds
+both risks for now.
+"""
+
+import asyncio
+import json
+import logging
+import re
+from typing import List, Optional
+
+from pydantic import BaseModel, ConfigDict, Field
+from typeguard import typechecked
+
+from backend.apps.agents.agent_manager import agent_manager
+from backend.apps.agents.core.models import AgentSession
+from backend.apps.settings.settings import get_settings
+from backend.apps.tools_lib.mcp_config import sanitize_server_name
+from backend.apps.tools_lib.tools_lib import load_all_tools
+
+logger = logging.getLogger(__name__)
+
+GOOGLE_TOOL_NAME = "Google Workspace"
+PROFILE_TIMEOUT_S = 25.0
+PROFILE_MAX_TURNS = 4
+
+
+class ProfileOption(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+    label: str
+    prompt: str
+
+
+class ProfileResult(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+    # "" means "couldn't tell" — the frontend then shows no "I see you're..." line (truthful-or-silent).
+    observation: str = ""
+    options: List[ProfileOption] = Field(default_factory=list)
+
+
+def p_system_prompt(name: str) -> str:
+    who = name.strip() or "this person"
+    return (
+        f"You are quietly getting to know {who} so OpenSwarm can be useful on day one. You have "
+        "READ-ONLY access to their connected Google account (Gmail, Calendar, Drive). Take a quick, "
+        "shallow look at recent items, then do two things.\n"
+        "1) In ONE short, plain, warm sentence, say what they seem to be dealing with right now, "
+        "like a sharp assistant who just glanced at their desk. No jargon, no numbers-flexing, never "
+        "say 'I analyzed' and never mention tools or counts.\n"
+        "2) Offer 3-4 concrete things you could do about it, each a short verb-first phrase a busy "
+        "person instantly gets.\n"
+        "HARD RULES: read only. Never send, reply, draft, delete, or change anything. If you cannot "
+        "see enough to say something TRUE, return an empty observation rather than guessing.\n"
+        "End your reply with ONLY a JSON object and nothing else around it:\n"
+        '{"observation": "<one sentence, or empty string if you truly cannot tell>", '
+        '"options": [{"label": "<short phrase>", "prompt": "<a clear instruction I can run to do it>"}]}'
+    )
+
+
+def p_task_prompt(name: str) -> str:
+    who = name.strip() or "them"
+    return (
+        f"Take a quick, read-only skim of {who}'s recent email and calendar (just the last few days), "
+        "then give me the observation and options exactly as specified. Keep it fast and shallow."
+    )
+
+
+@typechecked
+def p_connected_google_enabled() -> bool:
+    """True only when the Google Workspace connector is actually connected AND enabled (both flags;
+    a 'connected' tool with enabled=false still won't build MCP servers)."""
+    try:
+        for tool in load_all_tools():
+            if tool.name == GOOGLE_TOOL_NAME and tool.enabled and tool.auth_status == "connected":
+                return True
+    except Exception:
+        logger.exception("onboarding-profile: load_all_tools failed")
+    return False
+
+
+@typechecked
+def p_extract_json(text: str) -> Optional[dict]:
+    """Pull the last JSON object out of a tool-using model's final message (it may wrap prose or
+    fences around it). Fence-strip, then take the last balanced {...}; fail returns None."""
+    if not text:
+        return None
+    cleaned = re.sub(r"```(?:json)?", "", text).strip()
+    depth = 0
+    end = -1
+    start = -1
+    for i in range(len(cleaned) - 1, -1, -1):
+        c = cleaned[i]
+        if c == "}":
+            if depth == 0:
+                end = i
+            depth += 1
+        elif c == "{":
+            depth -= 1
+            if depth == 0:
+                start = i
+                break
+    if start < 0 or end < 0 or end < start:
+        return None
+    try:
+        parsed = json.loads(cleaned[start : end + 1])
+        return parsed if isinstance(parsed, dict) else None
+    except Exception:
+        return None
+
+
+@typechecked
+def p_parse_profile(text: str) -> Optional[ProfileResult]:
+    raw = p_extract_json(text)
+    if raw is None:
+        return None
+    observation = raw.get("observation")
+    options_raw = raw.get("options")
+    if not isinstance(observation, str) or not isinstance(options_raw, list):
+        return None
+    options: List[ProfileOption] = []
+    for opt in options_raw:
+        if isinstance(opt, dict) and isinstance(opt.get("label"), str) and isinstance(opt.get("prompt"), str):
+            options.append(ProfileOption(label=opt["label"], prompt=opt["prompt"]))
+    return ProfileResult(observation=observation.strip(), options=options)
+
+
+def p_last_assistant_text(session: AgentSession) -> str:
+    for msg in reversed(session.messages):
+        if msg.role == "assistant":
+            content = msg.content
+            if isinstance(content, str):
+                return content
+            if isinstance(content, list):
+                return "\n".join(
+                    b.get("text", "") for b in content if isinstance(b, dict) and b.get("type") == "text"
+                )
+            return str(content)
+    return ""
+
+
+@typechecked
+async def profile_user(name: str, consent: bool) -> Optional[ProfileResult]:
+    """Run the scoped read-only profiling agent. Returns None on ANY miss (no consent, no connected
+    Google, timeout, empty/garbled output) so the caller falls back to the persona floor."""
+    if not consent or not p_connected_google_enabled():
+        return None
+
+    server = sanitize_server_name(GOOGLE_TOOL_NAME)
+    try:
+        settings = await get_settings()
+        model = settings.get("default_model") if isinstance(settings, dict) else getattr(settings, "default_model", "sonnet")
+    except Exception:
+        model = "sonnet"
+
+    # Built invisibly (no launch broadcast -> no dashboard card). allowed_tools activates ONLY the
+    # Google server; active_mcps is the non-bypassable gate; read-only is prompt-enforced (see module note).
+    session = AgentSession(
+        name="__onboarding_profile__",
+        model=model or "sonnet",
+        mode="agent",
+        system_prompt=p_system_prompt(name),
+        allowed_tools=[f"mcp:{GOOGLE_TOOL_NAME}"],
+        max_turns=PROFILE_MAX_TURNS,
+        active_mcps=[server],
+    )
+    agent_manager.sessions[session.id] = session
+    try:
+        await asyncio.wait_for(
+            agent_manager.run_agent_loop(session.id, p_task_prompt(name)),
+            timeout=PROFILE_TIMEOUT_S,
+        )
+        return p_parse_profile(p_last_assistant_text(session))
+    except asyncio.TimeoutError:
+        logger.info("onboarding-profile: timed out after %.0fs, falling back to floor", PROFILE_TIMEOUT_S)
+        return None
+    except Exception:
+        logger.exception("onboarding-profile: run failed, falling back to floor")
+        return None
+    finally:
+        task = agent_manager.tasks.get(session.id) if hasattr(agent_manager, "tasks") else None
+        if task and not task.done():
+            task.cancel()
+        agent_manager.sessions.pop(session.id, None)
+        if hasattr(agent_manager, "tasks"):
+            agent_manager.tasks.pop(session.id, None)
diff --git a/backend/tests/test_onboarding_profile.py b/backend/tests/test_onboarding_profile.py
new file mode 100644
index 00000000..46411d59
--- /dev/null
+++ b/backend/tests/test_onboarding_profile.py
@@ -0,0 +1,52 @@
+"""Onboarding profiling: parse + fail-open behavior. The live scoped-agent read is not covered here
+(it needs a connected Google account); these lock the parsing and the always-degrade-to-floor paths."""
+
+import asyncio
+
+from backend.apps.agents.onboarding_profile import p_extract_json, p_parse_profile, profile_user
+
+
+def test_parse_fenced_reply_with_prose():
+    text = (
+        "Here's what I found.\n```json\n"
+        '{"observation": "A few invoices are overdue and your week is busy.", '
+        '"options": [{"label": "Chase invoices", "prompt": "Find overdue invoices and draft follow-ups."}]}'
+        "\n```\nHope that helps!"
+    )
+    result = p_parse_profile(text)
+    assert result is not None
+    assert result.observation == "A few invoices are overdue and your week is busy."
+    assert len(result.options) == 1
+    assert result.options[0].label == "Chase invoices"
+
+
+def test_parse_takes_last_json_object():
+    text = '{"observation":"old"} then the real one {"observation":"new","options":[]}'
+    result = p_parse_profile(text)
+    assert result is not None
+    assert result.observation == "new"
+
+
+def test_parse_garbage_is_none():
+    assert p_parse_profile("no json in here at all") is None
+    assert p_extract_json("") is None
+
+
+def test_parse_empty_observation_kept_as_silent():
+    result = p_parse_profile('{"observation":"","options":[]}')
+    assert result is not None
+    assert result.observation == ""
+    assert result.options == []
+
+
+def test_parse_wrong_shape_is_none():
+    assert p_parse_profile('{"observation": 5, "options": "nope"}') is None
+
+
+def test_profile_user_no_consent_returns_none():
+    assert asyncio.run(profile_user("Eric", False)) is None
+
+
+def test_profile_user_no_connected_google_returns_none():
+    # No Google connector connected+enabled in the test env -> fail open to the floor.
+    assert asyncio.run(profile_user("Eric", True)) is None
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index fc451388..2d61e71c 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -12,7 +12,11 @@ import { PersonalizeConsent } from './steps/PersonalizeConsent';
 import { ConnectApps } from './steps/ConnectApps';
 import { Payoff } from './Payoff';
 import { demoPayoff } from './payoffDemoContent';
-import type { FlowStepId, PersonaId, PayoffIdea } from './onboardingFlowTypes';
+import { useOnboardingProfile } from './useOnboardingProfile';
+import type { FlowStepId, PersonaId, PayoffIdea, IconName } from './onboardingFlowTypes';
+
+// Icons for profile-generated ideas (the agent returns text, not icons); rotated for variety.
+const IDEA_ICONS: IconName[] = ['sun', 'tray', 'build', 'globe'];
 
 const DOT_INDEX: Record<FlowStepId, number | undefined> = {
   help: 0,
@@ -33,9 +37,22 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
   const [step, setStep] = useState<FlowStepId>('help');
   const [persona, setPersona] = useState<PersonaId | null>(null);
   const [name, setName] = useState('');
+  const [consent, setConsent] = useState(false);
   const [connectedIds, setConnectedIds] = useState<string[]>([]);
 
-  const payoff = useMemo(() => demoPayoff(persona), [persona]);
+  const floor = useMemo(() => demoPayoff(persona), [persona]);
+  // Background read-only profiling (only if they consented); upgrades the payoff in place when it lands.
+  const profile = useOnboardingProfile(name, consent, step === 'payoff');
+  const payoff = useMemo(() => {
+    if (profile && profile.observation.trim() && profile.options.length > 0) {
+      return {
+        insight: profile.observation,
+        prefilledPrompt: profile.options[0].prompt,
+        ideas: profile.options.map((o, i) => ({ id: `p${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt })),
+      };
+    }
+    return floor;
+  }, [profile, floor]);
 
   // The prefilled task / an idea is what actually launches the first agent. Real launch (createDraftSession
   // + prefillPrompt + launchAndSendFirstMessage) wires in a follow step; for now finishing exits the flow.
@@ -66,7 +83,7 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
           />
         );
       case 'consent':
-        return <PersonalizeConsent onConsent={(yes) => setStep(yes ? 'connect' : 'payoff')} />;
+        return <PersonalizeConsent onConsent={(yes) => { setConsent(yes); setStep(yes ? 'connect' : 'payoff'); }} />;
       case 'connect':
         return (
           <ConnectApps
diff --git a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
index 1871ac2f..2b91315b 100644
--- a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
+++ b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
@@ -32,3 +32,9 @@ export interface PayoffIdea {
   /** The full runnable prompt this idea launches. */
   prompt: string;
 }
+
+/** Shape returned by POST /api/agents/onboarding-profile (the read-only profiling agent). */
+export interface ProfileResultDto {
+  observation: string;
+  options: { label: string; prompt: string }[];
+}
diff --git a/frontend/src/app/components/Onboarding/flow/useOnboardingProfile.ts b/frontend/src/app/components/Onboarding/flow/useOnboardingProfile.ts
new file mode 100644
index 00000000..1107bb93
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/useOnboardingProfile.ts
@@ -0,0 +1,32 @@
+// Fires the read-only profiling agent in the BACKGROUND once the payoff is active, and returns its
+// result only when it's genuinely useful. Truthful-or-silent: an empty/failed observation stays
+// null, so the payoff keeps its persona floor and never shows a fabricated "I see you're...".
+
+import { useEffect, useState } from 'react';
+import { API_BASE } from '@/shared/config';
+import type { ProfileResultDto } from './onboardingFlowTypes';
+
+export function useOnboardingProfile(name: string, consent: boolean, active: boolean): ProfileResultDto | null {
+  const [result, setResult] = useState<ProfileResultDto | null>(null);
+
+  useEffect(() => {
+    if (!active || !consent) return;
+    let cancelled = false;
+    fetch(`${API_BASE}/agents/onboarding-profile`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, consent }),
+    })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data: ProfileResultDto | null) => {
+        // Only surface it if the observation is real (non-empty) and options came back.
+        if (!cancelled && data && typeof data.observation === 'string' && data.observation.trim() && Array.isArray(data.options) && data.options.length > 0) {
+          setResult(data);
+        }
+      })
+      .catch(() => { /* fail-open: keep the floor */ });
+    return () => { cancelled = true; };
+  }, [active, consent, name]);
+
+  return result;
+}

From 391df21b0ddf2833d7e55d05ebee4b51bb32da27 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:21:12 -0700
Subject: [PATCH 007/248] [eric] onboarding: theme-aware skin (follows
 light/dark), remove progress dots, smooth word-fade consent (no janky
 typewriter)

---
 .../Onboarding/flow/OnboardingAtoms.tsx       |  88 ++++++++-------
 .../Onboarding/flow/OnboardingFlow.tsx        |  14 +--
 .../Onboarding/flow/OnboardingShell.tsx       |  68 ++++-------
 .../app/components/Onboarding/flow/Payoff.tsx | 106 +++++++++---------
 .../Onboarding/flow/onboardingSkin.ts         |  57 ++++++++--
 .../Onboarding/flow/steps/ConnectApps.tsx     |  73 ++++++------
 .../flow/steps/PersonalizeConsent.tsx         |  75 ++++++-------
 .../flow/steps/WhatShouldICallYou.tsx         |   3 +-
 .../flow/steps/WhereDoYouWantHelp.tsx         |   3 +-
 9 files changed, 249 insertions(+), 238 deletions(-)

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx
index a6eb2dc8..fa1817e0 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingAtoms.tsx
@@ -1,54 +1,62 @@
-// Small shared UI atoms for the onboarding screens (serif heading, subtitle, white CTA, ghost link).
+// Small shared UI atoms for the onboarding screens (serif heading, subtitle, CTA, ghost link).
+// All theme-aware via useOnboardingSkin().
 
 import React from 'react';
-import { ONBOARDING_SKIN as S } from './onboardingSkin';
+import { useOnboardingSkin } from './onboardingSkin';
 
-export const Heading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <h1 style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 33, lineHeight: 1.15, letterSpacing: '-0.005em', color: S.text, margin: 0 }}>
-    {children}
-  </h1>
-);
+export const Heading: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const S = useOnboardingSkin();
+  return (
+    <h1 style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 33, lineHeight: 1.15, letterSpacing: '-0.005em', color: S.text, margin: 0 }}>
+      {children}
+    </h1>
+  );
+};
 
-export const Sub: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div style={{ marginTop: 12, fontSize: 15, color: S.muted }}>{children}</div>
-);
+export const Sub: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const S = useOnboardingSkin();
+  return <div style={{ marginTop: 12, fontSize: 15, color: S.muted }}>{children}</div>;
+};
 
 export const PrimaryButton: React.FC<{ onClick: () => void; children: React.ReactNode; style?: React.CSSProperties }> = ({
   onClick,
   children,
   style,
-}) => (
-  <button
-    onClick={onClick}
-    style={{
-      marginTop: 24,
-      width: '100%',
-      maxWidth: 430,
-      background: S.ctaBg,
-      color: S.ctaText,
-      border: 'none',
-      borderRadius: 11,
-      padding: 14,
-      fontFamily: S.sans,
-      fontSize: 15,
-      fontWeight: 600,
-      cursor: 'pointer',
-      ...style,
-    }}
-  >
-    {children}
-  </button>
-);
+}) => {
+  const S = useOnboardingSkin();
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        marginTop: 24,
+        width: '100%',
+        maxWidth: 430,
+        background: S.ctaBg,
+        color: S.ctaText,
+        border: 'none',
+        borderRadius: 11,
+        padding: 14,
+        fontFamily: S.sans,
+        fontSize: 15,
+        fontWeight: 600,
+        cursor: 'pointer',
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+};
 
 export const GhostLink: React.FC<{ onClick: () => void; children: React.ReactNode; style?: React.CSSProperties }> = ({
   onClick,
   children,
   style,
-}) => (
-  <div
-    onClick={onClick}
-    style={{ marginTop: 26, color: S.muted, fontSize: 14, cursor: 'pointer', ...style }}
-  >
-    {children}
-  </div>
-);
+}) => {
+  const S = useOnboardingSkin();
+  return (
+    <div onClick={onClick} style={{ marginTop: 26, color: S.muted, fontSize: 14, cursor: 'pointer', ...style }}>
+      {children}
+    </div>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index 2d61e71c..d8ed48f7 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -18,14 +18,6 @@ import type { FlowStepId, PersonaId, PayoffIdea, IconName } from './onboardingFl
 // Icons for profile-generated ideas (the agent returns text, not icons); rotated for variety.
 const IDEA_ICONS: IconName[] = ['sun', 'tray', 'build', 'globe'];
 
-const DOT_INDEX: Record<FlowStepId, number | undefined> = {
-  help: 0,
-  name: 1,
-  consent: 2,
-  connect: 3,
-  payoff: undefined,
-};
-
 function greetingFor(name: string): string {
   const h = new Date().getHours();
   const part = h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening';
@@ -108,9 +100,5 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
     }
   };
 
-  return (
-    <OnboardingShell stepKey={step} stepIndex={DOT_INDEX[step]} totalSteps={4}>
-      {body()}
-    </OnboardingShell>
-  );
+  return <OnboardingShell stepKey={step}>{body()}</OnboardingShell>;
 };
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
index f543564c..cd6a7647 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
@@ -1,53 +1,39 @@
-// The premium frame every onboarding screen sits in: brand pinned top-center, content
-// vertically centered, entrance fade (reduced-motion aware), and the discovery progress dots.
+// The premium frame every onboarding screen sits in: brand pinned top-center, content vertically
+// centered, entrance fade (reduced-motion aware). Theme-aware. Portaled to body + near-max z-index
+// so it escapes any ancestor transform's stacking context and covers ALL app chrome.
 
 import React from 'react';
 import { createPortal } from 'react-dom';
 import { motion } from 'framer-motion';
 import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
-import { ONBOARDING_SKIN as S, ONBOARDING_EASE } from './onboardingSkin';
+import { useOnboardingSkin, ONBOARDING_EASE } from './onboardingSkin';
 import { Spark } from './OnboardingIcons';
 
 interface Props {
   children: React.ReactNode;
   /** Changing this re-triggers the entrance fade (one per screen). */
   stepKey: string;
-  /** 0-based; when set with totalSteps, renders the bottom dots. */
-  stepIndex?: number;
-  totalSteps?: number;
 }
 
-// Portaled to document.body + a near-max z-index so it escapes any ancestor transform's stacking
-// context and covers ALL app chrome (the ⌘K search bar, headers). This is the real takeover layer.
-const overlay: React.CSSProperties = {
-  position: 'fixed',
-  inset: 0,
-  zIndex: 2147483000,
-  background: S.bg,
-  color: S.text,
-  fontFamily: S.sans,
-  WebkitFontSmoothing: 'antialiased',
-  overflow: 'hidden',
-};
-
-export const OnboardingShell: React.FC<Props> = ({ children, stepKey, stepIndex, totalSteps }) => {
+export const OnboardingShell: React.FC<Props> = ({ children, stepKey }) => {
   const reduce = useReducedMotion();
-  const showDots = typeof stepIndex === 'number' && typeof totalSteps === 'number';
+  const S = useOnboardingSkin();
   if (typeof document === 'undefined') return null;
 
   return createPortal(
-    <div style={overlay}>
-      <div
-        style={{
-          position: 'fixed',
-          top: 34,
-          left: '50%',
-          transform: 'translateX(-50%)',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 9,
-        }}
-      >
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 2147483000,
+        background: S.bg,
+        color: S.text,
+        fontFamily: S.sans,
+        WebkitFontSmoothing: 'antialiased',
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ position: 'fixed', top: 34, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', gap: 9 }}>
         <span style={{ lineHeight: 0 }}>
           <Spark size={20} color={S.accent} />
         </span>
@@ -73,22 +59,6 @@ export const OnboardingShell: React.FC<Props> = ({ children, stepKey, stepIndex,
           {children}
         </div>
       </motion.div>
-
-      {showDots && (
-        <div style={{ position: 'fixed', bottom: 40, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 9 }}>
-          {Array.from({ length: totalSteps as number }).map((unused, i) => (
-            <span
-              key={i}
-              style={{
-                width: 6,
-                height: 6,
-                borderRadius: '50%',
-                background: i === stepIndex ? S.accent : 'rgba(243,241,234,0.16)',
-              }}
-            />
-          ))}
-        </div>
-      )}
     </div>,
     document.body,
   );
diff --git a/frontend/src/app/components/Onboarding/flow/Payoff.tsx b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
index b1819703..6dd31cae 100644
--- a/frontend/src/app/components/Onboarding/flow/Payoff.tsx
+++ b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
@@ -1,13 +1,14 @@
 // The payoff: name + quirky remark + insight + a prefilled runnable task + tailored "Ideas for you".
-// Presentational; the orchestrator feeds it content (persona-derived now, profile-derived later).
+// Presentational + theme-aware; the orchestrator feeds it content (persona floor or profile-derived).
 
 import React, { useState } from 'react';
-import { ONBOARDING_SKIN as S } from './onboardingSkin';
+import { useOnboardingSkin } from './onboardingSkin';
 import { LineIcon } from './OnboardingIcons';
 import { Heading } from './OnboardingAtoms';
 import type { PayoffIdea } from './onboardingFlowTypes';
 
 const IdeaRow: React.FC<{ idea: PayoffIdea; onPick: () => void }> = ({ idea, onPick }) => {
+  const S = useOnboardingSkin();
   const [hover, setHover] = useState(false);
   return (
     <div
@@ -42,62 +43,65 @@ export const Payoff: React.FC<{
   ideas: PayoffIdea[];
   onRun: () => void;
   onPickIdea: (idea: PayoffIdea) => void;
-}> = ({ greeting, remark, insight, prefilledPrompt, ideas, onRun, onPickIdea }) => (
-  <>
-    <Heading>{greeting}</Heading>
-    {remark && <div style={{ marginTop: 10, fontSize: 15, color: S.muted, fontStyle: 'italic' }}>{remark}</div>}
-    <div style={{ marginTop: 20, fontSize: 16, color: S.muted, lineHeight: 1.5, maxWidth: 540 }}>{insight}</div>
+}> = ({ greeting, remark, insight, prefilledPrompt, ideas, onRun, onPickIdea }) => {
+  const S = useOnboardingSkin();
+  return (
+    <>
+      <Heading>{greeting}</Heading>
+      {remark && <div style={{ marginTop: 10, fontSize: 15, color: S.muted, fontStyle: 'italic' }}>{remark}</div>}
+      <div style={{ marginTop: 20, fontSize: 16, color: S.muted, lineHeight: 1.5, maxWidth: 540 }}>{insight}</div>
 
-    <div
-      style={{
-        marginTop: 26,
-        width: '100%',
-        maxWidth: 600,
-        background: S.surface,
-        border: `1px solid ${S.border}`,
-        borderRadius: S.radius,
-        padding: '20px 22px',
-        textAlign: 'left',
-      }}
-    >
-      <div style={{ fontSize: 15.5, lineHeight: 1.55, color: S.text }}>{prefilledPrompt}</div>
       <div
         style={{
-          marginTop: 16,
-          display: 'flex',
-          alignItems: 'center',
-          gap: 12,
-          color: S.muted,
-          fontSize: 13,
-          borderTop: `1px solid ${S.border}`,
-          paddingTop: 14,
+          marginTop: 26,
+          width: '100%',
+          maxWidth: 600,
+          background: S.surface,
+          border: `1px solid ${S.border}`,
+          borderRadius: S.radius,
+          padding: '20px 22px',
+          textAlign: 'left',
         }}
       >
-        <span>+</span>
-        <span>Cowork</span>
-        <span style={{ marginLeft: 8 }}>Opus 4.8</span>
-        <span
-          onClick={onRun}
+        <div style={{ fontSize: 15.5, lineHeight: 1.55, color: S.text }}>{prefilledPrompt}</div>
+        <div
           style={{
-            marginLeft: 'auto',
-            background: S.ctaBg,
-            color: S.ctaText,
-            borderRadius: 9,
-            padding: '7px 15px',
-            fontWeight: 600,
-            cursor: 'pointer',
+            marginTop: 16,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            color: S.muted,
+            fontSize: 13,
+            borderTop: `1px solid ${S.border}`,
+            paddingTop: 14,
           }}
         >
-          Run
-        </span>
+          <span>+</span>
+          <span>Cowork</span>
+          <span style={{ marginLeft: 8 }}>Opus 4.8</span>
+          <span
+            onClick={onRun}
+            style={{
+              marginLeft: 'auto',
+              background: S.ctaBg,
+              color: S.ctaText,
+              borderRadius: 9,
+              padding: '7px 15px',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Run
+          </span>
+        </div>
       </div>
-    </div>
 
-    <div style={{ marginTop: 24, width: '100%', maxWidth: 600, textAlign: 'left' }}>
-      <div style={{ fontSize: 13, color: S.muted, marginBottom: 8 }}>Ideas for you</div>
-      {ideas.map((idea) => (
-        <IdeaRow key={idea.id} idea={idea} onPick={() => onPickIdea(idea)} />
-      ))}
-    </div>
-  </>
-);
+      <div style={{ marginTop: 24, width: '100%', maxWidth: 600, textAlign: 'left' }}>
+        <div style={{ fontSize: 13, color: S.muted, marginBottom: 8 }}>Ideas for you</div>
+        {ideas.map((idea) => (
+          <IdeaRow key={idea.id} idea={idea} onPick={() => onPickIdea(idea)} />
+        ))}
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/onboardingSkin.ts b/frontend/src/app/components/Onboarding/flow/onboardingSkin.ts
index 5cafc92d..0574d4a3 100644
--- a/frontend/src/app/components/Onboarding/flow/onboardingSkin.ts
+++ b/frontend/src/app/components/Onboarding/flow/onboardingSkin.ts
@@ -1,7 +1,29 @@
-// Always-dark premium skin for the onboarding flow, matching Claude.ai onboarding.
-// Deliberately NOT the app's theme tokens: onboarding is always this dark, like Claude's.
+// Premium onboarding skin (Claude-onboarding aesthetic) that follows the user's light/dark theme.
+// Same layout/typography in both modes; only the palette flips.
 
-export const ONBOARDING_SKIN = {
+import { useThemeMode } from '@/shared/styles/ThemeContext';
+
+export interface OnboardingSkin {
+  bg: string;
+  surface: string;
+  surfaceHover: string;
+  text: string;
+  muted: string;
+  ghost: string;
+  accent: string;
+  border: string;
+  borderStrong: string;
+  ctaBg: string;
+  ctaText: string;
+  serif: string;
+  sans: string;
+  radius: number;
+}
+
+const SERIF = '"Copernicus", "Tiempos Headline", Georgia, "Times New Roman", serif';
+const SANS = '"Styrene B", "Anthropic Sans", -apple-system, "SF Pro Text", system-ui, sans-serif';
+
+const DARK: OnboardingSkin = {
   bg: '#1C1B19',
   surface: '#252420',
   surfaceHover: '#2B2A25',
@@ -13,10 +35,31 @@ export const ONBOARDING_SKIN = {
   borderStrong: 'rgba(243,241,234,0.14)',
   ctaBg: '#F3F1EA',
   ctaText: '#1A1917',
-  serif: '"Copernicus", "Tiempos Headline", Georgia, "Times New Roman", serif',
-  sans: '"Styrene B", "Anthropic Sans", -apple-system, "SF Pro Text", system-ui, sans-serif',
+  serif: SERIF,
+  sans: SANS,
   radius: 16,
-} as const;
+};
 
-// framer-motion cubic-bezier for entrances; matches the mock's --ease.
+const LIGHT: OnboardingSkin = {
+  bg: '#F5F5F0',
+  surface: '#FFFFFF',
+  surfaceHover: '#F5F4ED',
+  text: '#1A1A18',
+  muted: '#73726C',
+  ghost: 'rgba(115,114,108,0.65)',
+  accent: '#C4633A',
+  border: 'rgba(0,0,0,0.08)',
+  borderStrong: 'rgba(0,0,0,0.14)',
+  ctaBg: '#1A1A18',
+  ctaText: '#F5F5F0',
+  serif: SERIF,
+  sans: SANS,
+  radius: 16,
+};
+
+export function useOnboardingSkin(): OnboardingSkin {
+  return useThemeMode().mode === 'dark' ? DARK : LIGHT;
+}
+
+// framer-motion cubic-bezier for entrances.
 export const ONBOARDING_EASE = [0.16, 1, 0.3, 1] as const;
diff --git a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
index 011c1502..6b270b98 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
@@ -2,7 +2,7 @@
 // UI-only here: real OAuth (integrations.tsx / POST /{tool_id}/oauth/start) wires in a follow step.
 
 import React from 'react';
-import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { useOnboardingSkin } from '../onboardingSkin';
 import { LineIcon } from '../OnboardingIcons';
 import { Heading, Sub, PrimaryButton, GhostLink } from '../OnboardingAtoms';
 import type { ConnectorOption } from '../onboardingFlowTypes';
@@ -17,43 +17,46 @@ const Row: React.FC<{ option: ConnectorOption; connected: boolean; onConnect: ()
   option,
   connected,
   onConnect,
-}) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: 14,
-      background: S.surface,
-      border: `1px solid ${S.border}`,
-      borderRadius: 14,
-      padding: '16px 18px',
-      textAlign: 'left',
-    }}
-  >
-    <span style={{ color: S.text, opacity: 0.9, display: 'flex' }}>
-      <LineIcon name={option.icon} size={20} />
-    </span>
-    <div>
-      <div style={{ fontSize: 15, fontWeight: 500 }}>{option.name}</div>
-      <div style={{ fontSize: 12.5, color: S.muted, marginTop: 2 }}>{option.description}</div>
-    </div>
-    <span
-      onClick={connected ? undefined : onConnect}
+}) => {
+  const S = useOnboardingSkin();
+  return (
+    <div
       style={{
-        marginLeft: 'auto',
-        fontSize: 13,
-        color: connected ? S.muted : S.text,
-        background: connected ? 'transparent' : S.surfaceHover,
-        border: `1px solid ${connected ? S.border : S.borderStrong}`,
-        borderRadius: 999,
-        padding: '6px 15px',
-        cursor: connected ? 'default' : 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 14,
+        background: S.surface,
+        border: `1px solid ${S.border}`,
+        borderRadius: 14,
+        padding: '16px 18px',
+        textAlign: 'left',
       }}
     >
-      {connected ? 'Connected' : 'Connect'}
-    </span>
-  </div>
-);
+      <span style={{ color: S.text, opacity: 0.9, display: 'flex' }}>
+        <LineIcon name={option.icon} size={20} />
+      </span>
+      <div>
+        <div style={{ fontSize: 15, fontWeight: 500 }}>{option.name}</div>
+        <div style={{ fontSize: 12.5, color: S.muted, marginTop: 2 }}>{option.description}</div>
+      </div>
+      <span
+        onClick={connected ? undefined : onConnect}
+        style={{
+          marginLeft: 'auto',
+          fontSize: 13,
+          color: connected ? S.muted : S.text,
+          background: connected ? 'transparent' : S.surfaceHover,
+          border: `1px solid ${connected ? S.border : S.borderStrong}`,
+          borderRadius: 999,
+          padding: '6px 15px',
+          cursor: connected ? 'default' : 'pointer',
+        }}
+      >
+        {connected ? 'Connected' : 'Connect'}
+      </span>
+    </div>
+  );
+};
 
 export const ConnectApps: React.FC<{
   connectedIds: string[];
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
index b322d947..4fb19dde 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
@@ -1,60 +1,53 @@
-// D3: the personalize consent. One serif line types itself in, then a single Yes. "Yes" authorizes
-// the (later) background profiling read; copy states that plainly. This is a permission, not a checkbox.
+// D3: the personalize consent. The line reveals word-by-word (smooth, layout-stable, no jumpy
+// caret), then a single Yes. "Yes" authorizes the (later) background profiling read; copy says so.
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
-import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { useOnboardingSkin } from '../onboardingSkin';
 import { PrimaryButton, GhostLink } from '../OnboardingAtoms';
 
 const LINE =
   "Want me to actually get you? Say yes and I'll take a quick look at whatever you connect, so everything I show is aimed at your world, not a generic demo.";
 
+const WORD_STAGGER_S = 0.055;
+const WORD_DUR_S = 0.5;
+
 export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }> = ({ onConsent }) => {
   const reduce = useReducedMotion();
-  const [shown, setShown] = useState(reduce ? LINE.length : 0);
-  const done = shown >= LINE.length;
+  const S = useOnboardingSkin();
+  const words = useMemo(() => LINE.split(' '), []);
+  const [done, setDone] = useState(reduce);
 
   useEffect(() => {
-    if (reduce) { setShown(LINE.length); return; }
-    setShown(0);
-    let i = 0;
-    const id = window.setInterval(() => {
-      i += 1;
-      setShown(i);
-      if (i >= LINE.length) window.clearInterval(id);
-    }, 16);
-    return () => window.clearInterval(id);
-  }, [reduce]);
+    if (reduce) { setDone(true); return; }
+    setDone(false);
+    const totalMs = (words.length * WORD_STAGGER_S + WORD_DUR_S) * 1000;
+    const t = window.setTimeout(() => setDone(true), totalMs);
+    return () => window.clearTimeout(t);
+  }, [reduce, words.length]);
 
   return (
     <>
-      <div
-        style={{
-          fontFamily: S.serif,
-          fontWeight: 500,
-          fontSize: 29,
-          lineHeight: 1.4,
-          maxWidth: 620,
-          minHeight: '4.4em',
-          color: S.text,
-        }}
-      >
-        {LINE.slice(0, shown)}
-        <span
-          style={{
-            display: 'inline-block',
-            width: 2,
-            height: '1.02em',
-            background: S.accent,
-            marginLeft: 3,
-            verticalAlign: -3,
-            animation: reduce ? undefined : 'onboardingCaretBlink 1s steps(1) infinite',
-          }}
-        />
+      <div style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 29, lineHeight: 1.4, maxWidth: 620, color: S.text }}>
+        {words.map((w, i) => (
+          <React.Fragment key={i}>
+            <span
+              style={{
+                display: 'inline-block',
+                opacity: reduce ? 1 : 0,
+                animation: reduce ? undefined : `onboardingWordIn ${WORD_DUR_S}s cubic-bezier(0.16,1,0.3,1) forwards`,
+                animationDelay: reduce ? undefined : `${i * WORD_STAGGER_S}s`,
+              }}
+            >
+              {w}
+            </span>
+            {i < words.length - 1 ? ' ' : ''}
+          </React.Fragment>
+        ))}
       </div>
       <div
         style={{
-          marginTop: 14,
+          marginTop: 34,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
@@ -67,7 +60,7 @@ export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }>
         <PrimaryButton onClick={() => onConsent(true)}>Yes, get to know me</PrimaryButton>
         <GhostLink style={{ marginTop: 2 }} onClick={() => onConsent(false)}>not now</GhostLink>
       </div>
-      <style>{'@keyframes onboardingCaretBlink{50%{opacity:0}}'}</style>
+      <style>{'@keyframes onboardingWordIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}'}</style>
     </>
   );
 };
diff --git a/frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx b/frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx
index 03f8676f..874f373a 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/WhatShouldICallYou.tsx
@@ -1,7 +1,7 @@
 // D2: one field, the name. Claude single-control screen. Enter or Continue advances.
 
 import React, { useState } from 'react';
-import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { useOnboardingSkin } from '../onboardingSkin';
 import { Heading, Sub, PrimaryButton, GhostLink } from '../OnboardingAtoms';
 
 export const WhatShouldICallYou: React.FC<{
@@ -9,6 +9,7 @@ export const WhatShouldICallYou: React.FC<{
   onContinue: (name: string) => void;
   onSkip: () => void;
 }> = ({ initialName = '', onContinue, onSkip }) => {
+  const S = useOnboardingSkin();
   const [name, setName] = useState(initialName);
   const [focus, setFocus] = useState(false);
   const submit = () => onContinue(name.trim());
diff --git a/frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx b/frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx
index 6086f5c3..6f087b2f 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/WhereDoYouWantHelp.tsx
@@ -1,7 +1,7 @@
 // D1: one tap on a persona card. The single personalization seed. "just show me" skips to payoff.
 
 import React, { useState } from 'react';
-import { ONBOARDING_SKIN as S } from '../onboardingSkin';
+import { useOnboardingSkin } from '../onboardingSkin';
 import { LineIcon } from '../OnboardingIcons';
 import { Heading, GhostLink } from '../OnboardingAtoms';
 import type { PersonaOption } from '../onboardingFlowTypes';
@@ -13,6 +13,7 @@ const PERSONAS: PersonaOption[] = [
 ];
 
 const Card: React.FC<{ option: PersonaOption; onPick: () => void }> = ({ option, onPick }) => {
+  const S = useOnboardingSkin();
   const [hover, setHover] = useState(false);
   return (
     <div

From eb5da15dd382bfa503b4943b55590a5a80ce6c62 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:36:30 -0700
Subject: [PATCH 008/248] [eric] onboarding: shorten consent (short question +
 explainer), de-chatbot the payoff (drop composer chrome, 'a real agent does
 this' framing)

---
 .../app/components/Onboarding/flow/Payoff.tsx | 15 +++++------
 .../flow/steps/PersonalizeConsent.tsx         | 27 ++++++++++++++-----
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/components/Onboarding/flow/Payoff.tsx b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
index 6dd31cae..31437e6e 100644
--- a/frontend/src/app/components/Onboarding/flow/Payoff.tsx
+++ b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
@@ -69,35 +69,32 @@ export const Payoff: React.FC<{
             marginTop: 16,
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'space-between',
             gap: 12,
-            color: S.muted,
-            fontSize: 13,
             borderTop: `1px solid ${S.border}`,
             paddingTop: 14,
           }}
         >
-          <span>+</span>
-          <span>Cowork</span>
-          <span style={{ marginLeft: 8 }}>Opus 4.8</span>
+          <span style={{ fontSize: 13, color: S.muted }}>a real agent goes and does this, live</span>
           <span
             onClick={onRun}
             style={{
-              marginLeft: 'auto',
               background: S.ctaBg,
               color: S.ctaText,
               borderRadius: 9,
-              padding: '7px 15px',
+              padding: '8px 18px',
               fontWeight: 600,
               cursor: 'pointer',
+              whiteSpace: 'nowrap',
             }}
           >
-            Run
+            Do it &rarr;
           </span>
         </div>
       </div>
 
       <div style={{ marginTop: 24, width: '100%', maxWidth: 600, textAlign: 'left' }}>
-        <div style={{ fontSize: 13, color: S.muted, marginBottom: 8 }}>Ideas for you</div>
+        <div style={{ fontSize: 13, color: S.muted, marginBottom: 8 }}>Or put me on one of these</div>
         {ideas.map((idea) => (
           <IdeaRow key={idea.id} idea={idea} onPick={() => onPickIdea(idea)} />
         ))}
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
index 4fb19dde..b8701ae3 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
@@ -1,15 +1,15 @@
-// D3: the personalize consent. The line reveals word-by-word (smooth, layout-stable, no jumpy
-// caret), then a single Yes. "Yes" authorizes the (later) background profiling read; copy says so.
+// D3: the personalize consent. Short question reveals word-by-word, then a small explainer + Yes.
+// "Yes" authorizes the (later) background profiling read; the sub-line says exactly what that means.
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
 import { useOnboardingSkin } from '../onboardingSkin';
 import { PrimaryButton, GhostLink } from '../OnboardingAtoms';
 
-const LINE =
-  "Want me to actually get you? Say yes and I'll take a quick look at whatever you connect, so everything I show is aimed at your world, not a generic demo.";
+const LINE = 'Want me to make this yours?';
+const SUB = "I'll take a quick look at what you connect, nothing else.";
 
-const WORD_STAGGER_S = 0.055;
+const WORD_STAGGER_S = 0.06;
 const WORD_DUR_S = 0.5;
 
 export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }> = ({ onConsent }) => {
@@ -28,7 +28,7 @@ export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }>
 
   return (
     <>
-      <div style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 29, lineHeight: 1.4, maxWidth: 620, color: S.text }}>
+      <div style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 33, lineHeight: 1.25, color: S.text }}>
         {words.map((w, i) => (
           <React.Fragment key={i}>
             <span
@@ -45,9 +45,22 @@ export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }>
           </React.Fragment>
         ))}
       </div>
+
       <div
         style={{
-          marginTop: 34,
+          marginTop: 14,
+          fontSize: 15,
+          color: S.muted,
+          opacity: done ? 1 : 0,
+          transition: 'opacity .5s ease',
+        }}
+      >
+        {SUB}
+      </div>
+
+      <div
+        style={{
+          marginTop: 30,
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',

From 3f4a34092e11037a62f6a95039ce9f70529dd987 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:36:30 -0700
Subject: [PATCH 009/248] [eric] onboarding: reuse real logo.png + relocate
 connector catalog to shared/ (downward abstraction) + reuse real
 INTEGRATIONS/toolsSlice/startOAuth in Connect step

---
 .../Onboarding/flow/OnboardingFlow.tsx        |  10 +-
 .../Onboarding/flow/OnboardingIcons.tsx       |  22 ----
 .../Onboarding/flow/OnboardingShell.tsx       |   5 +-
 .../Onboarding/flow/onboardingFlowTypes.ts    |   7 --
 .../Onboarding/flow/steps/ConnectApps.tsx     | 110 ++++++++++--------
 frontend/src/app/pages/Tools/Tools.tsx        |   2 +-
 .../app/pages/Tools/cards/CustomToolCard.tsx  |   2 +-
 .../pages/Tools/cards/CustomToolConnect.tsx   |   2 +-
 .../Tools/cards/IntegrationGalleryCard.tsx    |   2 +-
 .../app/pages/Tools/cards/ServiceGroup.tsx    |   2 +-
 .../app/pages/Tools/dialogs/ToolDialogs.tsx   |   2 +-
 .../pages/Tools/hooks/useToolConnections.ts   |   2 +-
 .../app/pages/Tools/hooks/useToolsActions.ts  |   2 +-
 .../integrations/catalog.tsx}                 |   0
 14 files changed, 69 insertions(+), 101 deletions(-)
 rename frontend/src/{app/pages/Tools/integrations.tsx => shared/integrations/catalog.tsx} (100%)

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index d8ed48f7..69355859 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -30,7 +30,6 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
   const [persona, setPersona] = useState<PersonaId | null>(null);
   const [name, setName] = useState('');
   const [consent, setConsent] = useState(false);
-  const [connectedIds, setConnectedIds] = useState<string[]>([]);
 
   const floor = useMemo(() => demoPayoff(persona), [persona]);
   // Background read-only profiling (only if they consented); upgrades the payoff in place when it lands.
@@ -77,14 +76,7 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
       case 'consent':
         return <PersonalizeConsent onConsent={(yes) => { setConsent(yes); setStep(yes ? 'connect' : 'payoff'); }} />;
       case 'connect':
-        return (
-          <ConnectApps
-            connectedIds={connectedIds}
-            onConnect={(id) => setConnectedIds((ids) => (ids.includes(id) ? ids : [...ids, id]))}
-            onContinue={() => setStep('payoff')}
-            onSkip={() => setStep('payoff')}
-          />
-        );
+        return <ConnectApps onContinue={() => setStep('payoff')} onSkip={() => setStep('payoff')} />;
       case 'payoff':
         return (
           <Payoff
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx
index a193f681..a30a8c4b 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingIcons.tsx
@@ -34,25 +34,3 @@ export const LineIcon: React.FC<{ name: IconName; size?: number; strokeWidth?: n
     {ICON_INNER[name]}
   </svg>
 );
-
-// The 12-ray coral burst; drawn, not a font glyph, so it's crisp at any size.
-export const Spark: React.FC<{ size?: number; color?: string }> = ({ size = 20, color = '#D97757' }) => {
-  const rays = [];
-  for (let i = 0; i < 12; i++) {
-    const a = (i * 30 * Math.PI) / 180;
-    rays.push(
-      <line
-        key={i}
-        x1={12 + 3.1 * Math.cos(a)}
-        y1={12 + 3.1 * Math.sin(a)}
-        x2={12 + 9.3 * Math.cos(a)}
-        y2={12 + 9.3 * Math.sin(a)}
-      />,
-    );
-  }
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" stroke={color} strokeWidth={1.7} strokeLinecap="round" aria-hidden>
-      {rays}
-    </svg>
-  );
-};
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
index cd6a7647..a8f64e6e 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingShell.tsx
@@ -7,7 +7,6 @@ import { createPortal } from 'react-dom';
 import { motion } from 'framer-motion';
 import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
 import { useOnboardingSkin, ONBOARDING_EASE } from './onboardingSkin';
-import { Spark } from './OnboardingIcons';
 
 interface Props {
   children: React.ReactNode;
@@ -34,9 +33,7 @@ export const OnboardingShell: React.FC<Props> = ({ children, stepKey }) => {
       }}
     >
       <div style={{ position: 'fixed', top: 34, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', gap: 9 }}>
-        <span style={{ lineHeight: 0 }}>
-          <Spark size={20} color={S.accent} />
-        </span>
+        <img src="./logo.png" alt="OpenSwarm" style={{ width: 22, height: 22, borderRadius: 2, opacity: 0.9 }} />
         <span style={{ fontFamily: S.serif, fontSize: 25, fontWeight: 500, letterSpacing: 0.2 }}>OpenSwarm</span>
       </div>
 
diff --git a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
index 2b91315b..7995f8f9 100644
--- a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
+++ b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
@@ -18,13 +18,6 @@ export interface PersonaOption {
 
 export type FlowStepId = 'help' | 'name' | 'consent' | 'connect' | 'payoff';
 
-export interface ConnectorOption {
-  id: string;
-  name: string;
-  description: string;
-  icon: IconName;
-}
-
 export interface PayoffIdea {
   id: string;
   icon: IconName;
diff --git a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
index 6b270b98..afc5bd50 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
@@ -1,46 +1,45 @@
-// D4: optional connect. The connectors the profiling agent may later read. Skippable; payoff still works.
-// UI-only here: real OAuth (integrations.tsx / POST /{tool_id}/oauth/start) wires in a follow step.
+// D4: optional connect. Reuses the REAL shared connector catalog (icons + metadata), the REAL
+// connection state from toolsSlice, and the REAL startOAuth thunk. No hardcoded list, no fake toggle.
 
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { INTEGRATIONS, Integration } from '@/shared/integrations/catalog';
+import { fetchTools, startOAuth, ToolDefinition } from '@/shared/state/toolsSlice';
 import { useOnboardingSkin } from '../onboardingSkin';
-import { LineIcon } from '../OnboardingIcons';
 import { Heading, Sub, PrimaryButton, GhostLink } from '../OnboardingAtoms';
-import type { ConnectorOption } from '../onboardingFlowTypes';
 
-const CONNECTORS: ConnectorOption[] = [
-  { id: 'google', name: 'Google', description: 'Gmail, Calendar, Drive', icon: 'mail' },
-  { id: 'notion', name: 'Notion', description: 'notes, docs, tasks', icon: 'doc' },
-  { id: 'slack', name: 'Slack', description: 'messages, channels', icon: 'chat' },
-];
+// The connectors most useful for the profiling payoff; drawn from the real catalog by id.
+const SHOWN_IDS = ['google-workspace', 'notion', 'slack'];
 
-const Row: React.FC<{ option: ConnectorOption; connected: boolean; onConnect: () => void }> = ({
-  option,
-  connected,
-  onConnect,
-}) => {
+function toolFor(integration: Integration, items: Record<string, ToolDefinition>): ToolDefinition | undefined {
+  return Object.values(items).find((t) => t.name === integration.name);
+}
+
+const Row: React.FC<{ integration: Integration }> = ({ integration }) => {
   const S = useOnboardingSkin();
+  const dispatch = useAppDispatch();
+  const items = useAppSelector((s) => s.tools.items);
+  const tool = toolFor(integration, items);
+  const connected = tool?.auth_status === 'connected';
+
+  const connect = async () => {
+    try {
+      const res = await dispatch(startOAuth(tool?.id ?? integration.id)).unwrap();
+      if (res.auth_url) window.open(res.auth_url, '_blank');
+    } catch { /* connect failed; leave as-is */ }
+  };
+
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 14,
-        background: S.surface,
-        border: `1px solid ${S.border}`,
-        borderRadius: 14,
-        padding: '16px 18px',
-        textAlign: 'left',
-      }}
-    >
-      <span style={{ color: S.text, opacity: 0.9, display: 'flex' }}>
-        <LineIcon name={option.icon} size={20} />
-      </span>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: S.surface, border: `1px solid ${S.border}`, borderRadius: 14, padding: '16px 18px', textAlign: 'left' }}>
+      <span style={{ display: 'flex', width: 22, justifyContent: 'center' }}>{integration.icon}</span>
       <div>
-        <div style={{ fontSize: 15, fontWeight: 500 }}>{option.name}</div>
-        <div style={{ fontSize: 12.5, color: S.muted, marginTop: 2 }}>{option.description}</div>
+        <div style={{ fontSize: 15, fontWeight: 500 }}>{integration.name}</div>
+        <div style={{ fontSize: 12.5, color: S.muted, marginTop: 2 }}>
+          {connected && tool?.connected_account_email ? tool.connected_account_email : integration.description}
+        </div>
       </div>
       <span
-        onClick={connected ? undefined : onConnect}
+        onClick={connected ? undefined : connect}
         style={{
           marginLeft: 'auto',
           fontSize: 13,
@@ -50,6 +49,7 @@ const Row: React.FC<{ option: ConnectorOption; connected: boolean; onConnect: ()
           borderRadius: 999,
           padding: '6px 15px',
           cursor: connected ? 'default' : 'pointer',
+          whiteSpace: 'nowrap',
         }}
       >
         {connected ? 'Connected' : 'Connect'}
@@ -58,21 +58,29 @@ const Row: React.FC<{ option: ConnectorOption; connected: boolean; onConnect: ()
   );
 };
 
-export const ConnectApps: React.FC<{
-  connectedIds: string[];
-  onConnect: (id: string) => void;
-  onContinue: () => void;
-  onSkip: () => void;
-}> = ({ connectedIds, onConnect, onContinue, onSkip }) => (
-  <>
-    <Heading>Connect what I can work with</Heading>
-    <Sub>optional, and I&#39;ll only ever read it to understand you</Sub>
-    <div style={{ marginTop: 44, width: '100%', maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 11 }}>
-      {CONNECTORS.map((c) => (
-        <Row key={c.id} option={c} connected={connectedIds.includes(c.id)} onConnect={() => onConnect(c.id)} />
-      ))}
-    </div>
-    <PrimaryButton onClick={onContinue} style={{ maxWidth: 200 }}>Continue</PrimaryButton>
-    <GhostLink onClick={onSkip}>skip for now</GhostLink>
-  </>
-);
+export const ConnectApps: React.FC<{ onContinue: () => void; onSkip: () => void }> = ({ onContinue, onSkip }) => {
+  const dispatch = useAppDispatch();
+  const shown = INTEGRATIONS.filter((i) => SHOWN_IDS.includes(i.id));
+
+  // Load real connection state, and re-check when the user returns from the OAuth browser tab.
+  useEffect(() => {
+    dispatch(fetchTools());
+    const onFocus = () => dispatch(fetchTools());
+    window.addEventListener('focus', onFocus);
+    return () => window.removeEventListener('focus', onFocus);
+  }, [dispatch]);
+
+  return (
+    <>
+      <Heading>Connect what I can work with</Heading>
+      <Sub>optional, and I&#39;ll only ever read it to understand you</Sub>
+      <div style={{ marginTop: 44, width: '100%', maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 11 }}>
+        {shown.map((i) => (
+          <Row key={i.id} integration={i} />
+        ))}
+      </div>
+      <PrimaryButton onClick={onContinue} style={{ maxWidth: 200 }}>Continue</PrimaryButton>
+      <GhostLink onClick={onSkip}>skip for now</GhostLink>
+    </>
+  );
+};
diff --git a/frontend/src/app/pages/Tools/Tools.tsx b/frontend/src/app/pages/Tools/Tools.tsx
index c1048263..c2d3065a 100644
--- a/frontend/src/app/pages/Tools/Tools.tsx
+++ b/frontend/src/app/pages/Tools/Tools.tsx
@@ -29,7 +29,7 @@ import {
 import { Skeleton } from '@/app/components/feedback/Loading';
 
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { Integration, INTEGRATIONS } from './integrations';
+import { Integration, INTEGRATIONS } from '@/shared/integrations/catalog';
 import { CATEGORY_ORDER } from './toolsHelpers';
 import ToolSection from './cards/ToolSection';
 import BrowserPermissionCard from './cards/BrowserPermissionCard';
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
index 05248bd1..e1a10a50 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
@@ -23,7 +23,7 @@ import SecurityIcon from '@mui/icons-material/Security';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { ToolDefinition } from '@/shared/state/toolsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { Integration } from '../integrations';
+import { Integration } from '@/shared/integrations/catalog';
 import ServiceGroup from './ServiceGroup';
 import CustomToolDevInfo from './CustomToolDevInfo';
 import CustomToolConnect from './CustomToolConnect';
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx b/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
index 6adca560..5a195cbc 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
@@ -6,7 +6,7 @@ import LinkIcon from '@mui/icons-material/Link';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { ToolDefinition } from '@/shared/state/toolsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { Integration } from '../integrations';
+import { Integration } from '@/shared/integrations/catalog';
 
 interface CustomToolConnectProps {
   tool: ToolDefinition;
diff --git a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
index 5b1bcbc1..8e0442e1 100644
--- a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
@@ -8,7 +8,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Switch from '@mui/material/Switch';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { Integration } from '../integrations';
+import { Integration } from '@/shared/integrations/catalog';
 
 interface IntegrationGalleryCardProps {
   integration: Integration;
diff --git a/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx b/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
index aa919af7..618a2073 100644
--- a/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
+++ b/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
@@ -13,7 +13,7 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 import PanToolIcon from '@mui/icons-material/PanTool';
 import { ToolDefinition } from '@/shared/state/toolsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { Integration } from '../integrations';
+import { Integration } from '@/shared/integrations/catalog';
 
 const toDisplayName = (name: string, serviceName?: string) => {
   let display = name.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
diff --git a/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx b/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
index b27b26da..36576d28 100644
--- a/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
@@ -12,7 +12,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import LinkIcon from '@mui/icons-material/Link';
 import { McpServer } from '@/shared/state/mcpRegistrySlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { Integration } from '../integrations';
+import { Integration } from '@/shared/integrations/catalog';
 import { ToolForm } from '../toolsHelpers';
 import McpConfigDialog from './McpConfigDialog';
 
diff --git a/frontend/src/app/pages/Tools/hooks/useToolConnections.ts b/frontend/src/app/pages/Tools/hooks/useToolConnections.ts
index 68ca30ea..57d9c641 100644
--- a/frontend/src/app/pages/Tools/hooks/useToolConnections.ts
+++ b/frontend/src/app/pages/Tools/hooks/useToolConnections.ts
@@ -11,7 +11,7 @@ import {
   ToolDefinition,
 } from '@/shared/state/toolsSlice';
 import { API_BASE } from '@/shared/config';
-import { Integration } from '../integrations';
+import { Integration } from '@/shared/integrations/catalog';
 
 type Snackbar = { open: boolean; message: string; severity?: 'success' | 'error' };
 
diff --git a/frontend/src/app/pages/Tools/hooks/useToolsActions.ts b/frontend/src/app/pages/Tools/hooks/useToolsActions.ts
index 5b0d1ba6..81890ae5 100644
--- a/frontend/src/app/pages/Tools/hooks/useToolsActions.ts
+++ b/frontend/src/app/pages/Tools/hooks/useToolsActions.ts
@@ -11,7 +11,7 @@ import {
 } from '@/shared/state/toolsSlice';
 import { McpServer } from '@/shared/state/mcpRegistrySlice';
 import { ToolForm, emptyForm } from '../toolsHelpers';
-import { Integration } from '../integrations';
+import { Integration } from '@/shared/integrations/catalog';
 import { useToolConnections } from './useToolConnections';
 import { useRegistryBrowser } from './useRegistryBrowser';
 
diff --git a/frontend/src/app/pages/Tools/integrations.tsx b/frontend/src/shared/integrations/catalog.tsx
similarity index 100%
rename from frontend/src/app/pages/Tools/integrations.tsx
rename to frontend/src/shared/integrations/catalog.tsx

From a987f59ed2330390b56a18c41dfaeac316403383 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:40:59 -0700
Subject: [PATCH 010/248] [eric] onboarding: Connect step shows all connectable
 MCPs (scrollable) + fix OAuth 404 (create the tool before startOAuth)

---
 .../Onboarding/flow/steps/ConnectApps.tsx     | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
index afc5bd50..5aabb970 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
@@ -1,16 +1,13 @@
 // D4: optional connect. Reuses the REAL shared connector catalog (icons + metadata), the REAL
-// connection state from toolsSlice, and the REAL startOAuth thunk. No hardcoded list, no fake toggle.
+// connection state from toolsSlice, and the REAL create+OAuth thunks. All connectable MCPs, scrollable.
 
 import React, { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { INTEGRATIONS, Integration } from '@/shared/integrations/catalog';
-import { fetchTools, startOAuth, ToolDefinition } from '@/shared/state/toolsSlice';
+import { fetchTools, createTool, startOAuth, startDeviceCodeLogin, ToolDefinition } from '@/shared/state/toolsSlice';
 import { useOnboardingSkin } from '../onboardingSkin';
 import { Heading, Sub, PrimaryButton, GhostLink } from '../OnboardingAtoms';
 
-// The connectors most useful for the profiling payoff; drawn from the real catalog by id.
-const SHOWN_IDS = ['google-workspace', 'notion', 'slack'];
-
 function toolFor(integration: Integration, items: Record<string, ToolDefinition>): ToolDefinition | undefined {
   return Object.values(items).find((t) => t.name === integration.name);
 }
@@ -24,17 +21,31 @@ const Row: React.FC<{ integration: Integration }> = ({ integration }) => {
 
   const connect = async () => {
     try {
-      const res = await dispatch(startOAuth(tool?.id ?? integration.id)).unwrap();
-      if (res.auth_url) window.open(res.auth_url, '_blank');
+      // The tool has to exist before OAuth (fresh installs have none) -> create from the catalog first.
+      let t = tool;
+      if (!t) {
+        t = await dispatch(createTool({
+          name: integration.name,
+          description: integration.description,
+          mcp_config: integration.mcp_config,
+          auth_type: integration.authType ?? 'oauth2',
+        })).unwrap();
+      }
+      if (integration.authType === 'device_code') {
+        await dispatch(startDeviceCodeLogin(t.id));
+      } else {
+        const res = await dispatch(startOAuth(t.id)).unwrap();
+        if (res.auth_url) window.open(res.auth_url, '_blank');
+      }
     } catch { /* connect failed; leave as-is */ }
   };
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: S.surface, border: `1px solid ${S.border}`, borderRadius: 14, padding: '16px 18px', textAlign: 'left' }}>
-      <span style={{ display: 'flex', width: 22, justifyContent: 'center' }}>{integration.icon}</span>
-      <div>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: S.surface, border: `1px solid ${S.border}`, borderRadius: 14, padding: '15px 18px', textAlign: 'left' }}>
+      <span style={{ display: 'flex', width: 22, justifyContent: 'center', flexShrink: 0 }}>{integration.icon}</span>
+      <div style={{ minWidth: 0 }}>
         <div style={{ fontSize: 15, fontWeight: 500 }}>{integration.name}</div>
-        <div style={{ fontSize: 12.5, color: S.muted, marginTop: 2 }}>
+        <div style={{ fontSize: 12.5, color: S.muted, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
           {connected && tool?.connected_account_email ? tool.connected_account_email : integration.description}
         </div>
       </div>
@@ -42,6 +53,7 @@ const Row: React.FC<{ integration: Integration }> = ({ integration }) => {
         onClick={connected ? undefined : connect}
         style={{
           marginLeft: 'auto',
+          flexShrink: 0,
           fontSize: 13,
           color: connected ? S.muted : S.text,
           background: connected ? 'transparent' : S.surfaceHover,
@@ -60,9 +72,9 @@ const Row: React.FC<{ integration: Integration }> = ({ integration }) => {
 
 export const ConnectApps: React.FC<{ onContinue: () => void; onSkip: () => void }> = ({ onContinue, onSkip }) => {
   const dispatch = useAppDispatch();
-  const shown = INTEGRATIONS.filter((i) => SHOWN_IDS.includes(i.id));
+  // Every connectable MCP from the real catalog (skip the session-borrow ones that need no connecting).
+  const shown = INTEGRATIONS.filter((i) => i.authType && i.authType !== 'none');
 
-  // Load real connection state, and re-check when the user returns from the OAuth browser tab.
   useEffect(() => {
     dispatch(fetchTools());
     const onFocus = () => dispatch(fetchTools());
@@ -74,7 +86,19 @@ export const ConnectApps: React.FC<{ onContinue: () => void; onSkip: () => void
     <>
       <Heading>Connect what I can work with</Heading>
       <Sub>optional, and I&#39;ll only ever read it to understand you</Sub>
-      <div style={{ marginTop: 44, width: '100%', maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 11 }}>
+      <div
+        style={{
+          marginTop: 40,
+          width: '100%',
+          maxWidth: 460,
+          maxHeight: 340,
+          overflowY: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 11,
+          padding: '2px 6px',
+        }}
+      >
         {shown.map((i) => (
           <Row key={i.id} integration={i} />
         ))}

From 50d0a44d84824d23581cca5ecba5555771dcf536 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:52:20 -0700
Subject: [PATCH 011/248] [eric] onboarding: generate personalized payoff
 (insight+task+4 options) from persona via cheap free-trial LLM; layered
 profile > generated > floor

---
 backend/apps/agents/agents.py                 |  16 +++
 backend/apps/agents/onboarding_suggest.py     | 123 ++++++++++++++++++
 .../Onboarding/flow/OnboardingFlow.tsx        |  17 ++-
 .../Onboarding/flow/useOnboardingSuggest.ts   |  36 +++++
 4 files changed, 190 insertions(+), 2 deletions(-)
 create mode 100644 backend/apps/agents/onboarding_suggest.py
 create mode 100644 frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts

diff --git a/backend/apps/agents/agents.py b/backend/apps/agents/agents.py
index 08e18c2b..631200b4 100644
--- a/backend/apps/agents/agents.py
+++ b/backend/apps/agents/agents.py
@@ -135,6 +135,22 @@ async def onboarding_profile(body: dict):
         return {"observation": "", "options": []}
     return result.model_dump(mode="json")
 
+@agents.router.post("/onboarding-suggest")
+async def onboarding_suggest(body: dict):
+    """Onboarding payoff: generate a personalized insight + task + 4 options from the user's persona
+    (+ name) on the cheap/free-trial tier. Fail-open: any miss returns empty so the frontend keeps
+    its static fallback. No data is read here (that's onboarding-profile)."""
+    from backend.apps.agents.onboarding_suggest import suggest_payoff
+
+    try:
+        result = await suggest_payoff(str(body.get("persona") or ""), str(body.get("name") or ""))
+    except Exception:
+        logger.exception("onboarding-suggest endpoint failed")
+        result = None
+    if result is None:
+        return {"insight": "", "task": "", "options": []}
+    return result.model_dump(mode="json")
+
 @agents.router.post("/sessions/{session_id}/stop")
 async def stop_agent(session_id: str):
     await agent_manager.stop_agent(session_id)
diff --git a/backend/apps/agents/onboarding_suggest.py b/backend/apps/agents/onboarding_suggest.py
new file mode 100644
index 00000000..4177bf51
--- /dev/null
+++ b/backend/apps/agents/onboarding_suggest.py
@@ -0,0 +1,123 @@
+"""Onboarding payoff generation: a cheap, provider-agnostic LLM call that turns the user's persona
+(+ name) into a personalized landing: one honest insight line, one high-value task an agent could
+DO, and 4 concrete options. This replaces the hardcoded floor so the payoff is dynamic per user.
+
+No data is read here (that's the separate profiling agent) so it works for everyone, instantly, on
+the free-trial tier. Fail-open: any miss returns None and the frontend keeps its static fallback.
+"""
+
+import asyncio
+import json
+import logging
+import re
+from typing import List, Optional
+from uuid import uuid4
+
+from pydantic import BaseModel, ConfigDict, Field
+from typeguard import typechecked
+
+from backend.apps.agents.core.aux_llm import aux_max_tokens_for
+from backend.apps.agents.providers.registry import resolve_aux_model
+from backend.apps.settings.credentials import get_anthropic_client_for_model
+from backend.apps.settings.settings import load_settings
+
+logger = logging.getLogger(__name__)
+
+SUGGEST_TIMEOUT_S = 20.0
+
+SYSTEM_PROMPT = (
+    "You set up the first screen a brand-new OpenSwarm user sees. OpenSwarm is NOT a chatbot: its AI "
+    "agents go and DO real work, browse the web live, build and run little tools, automate chores, "
+    "watch things and ping you. Given who the user is, write their landing content.\n"
+    "RULES: plain language a non-dev instantly gets; NEVER invent specific facts about them (no 'your "
+    "launch next week' you cannot know, keep the insight general and true); everything is an ACTION an "
+    "agent DOES (go, build, watch, chase, clean up, find), never 'ask me' or 'let's chat'.\n"
+    "Return ONLY this JSON, nothing else:\n"
+    '{"insight": "<one short, warm, TRUE line about the kind of things someone like them deals with>", '
+    '"task": "<the single most useful thing an agent could DO for them right now, a concrete instruction, '
+    'something a chatbot cannot do>", '
+    '"options": [{"label": "<3-6 word verb-first phrase>", "prompt": "<a clear runnable instruction>"}]}\n'
+    "Give exactly 4 options."
+)
+
+
+class SuggestOption(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+    label: str
+    prompt: str
+
+
+class PayoffSuggestion(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+    insight: str
+    task: str
+    options: List[SuggestOption] = Field(default_factory=list)
+
+
+@typechecked
+def p_parse(text: str) -> Optional[PayoffSuggestion]:
+    """Fence-strip + take the last balanced {...} + validate shape. Fail returns None."""
+    if not text:
+        return None
+    cleaned = re.sub(r"```(?:json)?", "", text).strip()
+    depth = 0
+    start = end = -1
+    for i in range(len(cleaned) - 1, -1, -1):
+        c = cleaned[i]
+        if c == "}":
+            if depth == 0:
+                end = i
+            depth += 1
+        elif c == "{":
+            depth -= 1
+            if depth == 0:
+                start = i
+                break
+    if start < 0 or end < 0:
+        return None
+    try:
+        raw = json.loads(cleaned[start : end + 1])
+    except Exception:
+        return None
+    if not isinstance(raw, dict):
+        return None
+    insight, task, options_raw = raw.get("insight"), raw.get("task"), raw.get("options")
+    if not isinstance(insight, str) or not isinstance(task, str) or not isinstance(options_raw, list):
+        return None
+    options: List[SuggestOption] = []
+    for opt in options_raw:
+        if isinstance(opt, dict) and isinstance(opt.get("label"), str) and isinstance(opt.get("prompt"), str):
+            options.append(SuggestOption(label=opt["label"], prompt=opt["prompt"]))
+    if not insight.strip() or not task.strip() or len(options) < 1:
+        return None
+    return PayoffSuggestion(insight=insight.strip(), task=task.strip(), options=options)
+
+
+@typechecked
+async def suggest_payoff(persona: str, name: str) -> Optional[PayoffSuggestion]:
+    try:
+        settings = load_settings()
+        aux_model = (await resolve_aux_model(settings, preferred_tier="haiku"))[0]
+        client = get_anthropic_client_for_model(settings, aux_model)
+        user_turn = f"The user chose '{persona}' as where they want help first."
+        if name.strip():
+            user_turn += f" Their name is {name.strip()}."
+
+        chunks: List[str] = []
+
+        async def run() -> None:
+            async with client.messages.stream(
+                model=aux_model,
+                max_tokens=aux_max_tokens_for(aux_model),
+                system=SYSTEM_PROMPT,
+                messages=[{"role": "user", "content": user_turn}],
+                extra_headers={"X-Openswarm-Task-Id": uuid4().hex},
+            ) as stream:
+                async for text in stream.text_stream:
+                    chunks.append(text)
+
+        await asyncio.wait_for(run(), timeout=SUGGEST_TIMEOUT_S)
+        return p_parse("".join(chunks))
+    except Exception:
+        logger.exception("onboarding-suggest: generation failed, falling back to floor")
+        return None
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index 69355859..61233fff 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -13,6 +13,7 @@ import { ConnectApps } from './steps/ConnectApps';
 import { Payoff } from './Payoff';
 import { demoPayoff } from './payoffDemoContent';
 import { useOnboardingProfile } from './useOnboardingProfile';
+import { useOnboardingSuggest } from './useOnboardingSuggest';
 import type { FlowStepId, PersonaId, PayoffIdea, IconName } from './onboardingFlowTypes';
 
 // Icons for profile-generated ideas (the agent returns text, not icons); rotated for variety.
@@ -28,13 +29,17 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
   const dispatch = useAppDispatch();
   const [step, setStep] = useState<FlowStepId>('help');
   const [persona, setPersona] = useState<PersonaId | null>(null);
+  const [useCase, setUseCase] = useState('');
   const [name, setName] = useState('');
   const [consent, setConsent] = useState(false);
 
   const floor = useMemo(() => demoPayoff(persona), [persona]);
-  // Background read-only profiling (only if they consented); upgrades the payoff in place when it lands.
+  // Personalized payoff from the persona (cheap free-trial LLM); swaps in over the floor when ready.
+  const suggest = useOnboardingSuggest(useCase, name, step === 'payoff');
+  // Deeper: background read-only profiling (only if they consented); trumps the persona suggestion.
   const profile = useOnboardingProfile(name, consent, step === 'payoff');
   const payoff = useMemo(() => {
+    // Priority: real data profile > persona-generated suggestion > static floor.
     if (profile && profile.observation.trim() && profile.options.length > 0) {
       return {
         insight: profile.observation,
@@ -42,8 +47,15 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
         ideas: profile.options.map((o, i) => ({ id: `p${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt })),
       };
     }
+    if (suggest && suggest.options.length > 0) {
+      return {
+        insight: suggest.insight,
+        prefilledPrompt: suggest.task,
+        ideas: suggest.options.map((o, i) => ({ id: `s${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt })),
+      };
+    }
     return floor;
-  }, [profile, floor]);
+  }, [profile, suggest, floor]);
 
   // The prefilled task / an idea is what actually launches the first agent. Real launch (createDraftSession
   // + prefillPrompt + launchAndSendFirstMessage) wires in a follow step; for now finishing exits the flow.
@@ -57,6 +69,7 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
             onPick={(p) => {
               dispatch(updateSettingsPatch({ user_use_case: p.useCase }));
               setPersona(p.id);
+              setUseCase(p.useCase);
               setStep('name');
             }}
             onSkip={() => { setPersona(null); setStep('payoff'); }}
diff --git a/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts b/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
new file mode 100644
index 00000000..3e93b29d
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
@@ -0,0 +1,36 @@
+// Generates the payoff content (insight + task + 4 options) from the user's persona via the cheap
+// free-trial LLM. Progressive: returns null until it lands, so the payoff shows its static floor
+// first and swaps to the personalized version when ready. Fail-open on any miss.
+
+import { useEffect, useState } from 'react';
+import { API_BASE } from '@/shared/config';
+
+export interface SuggestDto {
+  insight: string;
+  task: string;
+  options: { label: string; prompt: string }[];
+}
+
+export function useOnboardingSuggest(persona: string, name: string, active: boolean): SuggestDto | null {
+  const [result, setResult] = useState<SuggestDto | null>(null);
+
+  useEffect(() => {
+    if (!active || !persona) return;
+    let cancelled = false;
+    fetch(`${API_BASE}/agents/onboarding-suggest`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ persona, name }),
+    })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data: SuggestDto | null) => {
+        if (!cancelled && data && data.insight?.trim() && data.task?.trim() && Array.isArray(data.options) && data.options.length > 0) {
+          setResult(data);
+        }
+      })
+      .catch(() => { /* fail-open: keep the floor */ });
+    return () => { cancelled = true; };
+  }, [active, persona, name]);
+
+  return result;
+}

From b49a5e72b548ea9c5206a7f2b00160ba8f8fa43c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 30 Jun 2026 23:52:20 -0700
Subject: [PATCH 012/248] [eric] onboarding: press-and-hold to launch (warm
 bloom grows to fill screen, ported from glowup CommitmentView) as the payoff
 commit transition

---
 .../Onboarding/flow/HoldToLaunch.tsx          | 124 ++++++++++++++++++
 .../app/components/Onboarding/flow/Payoff.tsx |  18 +--
 2 files changed, 127 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx

diff --git a/frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx b/frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx
new file mode 100644
index 00000000..e5755dd1
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx
@@ -0,0 +1,124 @@
+// Press-and-hold to launch, ported from the glowup CommitmentView. Holding fills a progress ring
+// AND grows a warm radial bloom from the button until it covers the screen, then hands off (a clean
+// "commit -> go" transition into the running agent). Release early and it shrinks back.
+// Reduced motion: a plain button, no bloom, instant.
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
+import { useOnboardingSkin } from './onboardingSkin';
+
+const HOLD_MS = 1100;
+
+export const HoldToLaunch: React.FC<{ label: string; onLaunch: () => void }> = ({ label, onLaunch }) => {
+  const S = useOnboardingSkin();
+  const reduce = useReducedMotion();
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const startRef = useRef<number>(0);
+  const [progress, setProgress] = useState(0);
+  const [committed, setCommitted] = useState(false);
+  const [origin, setOrigin] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  const stop = useCallback(() => {
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = null;
+  }, []);
+
+  const commit = useCallback(() => {
+    stop();
+    setCommitted(true);
+    // Let the bloom cover the screen (600ms) before handing off.
+    window.setTimeout(onLaunch, 600);
+  }, [stop, onLaunch]);
+
+  const tick = useCallback(() => {
+    const p = Math.min(1, (performance.now() - startRef.current) / HOLD_MS);
+    setProgress(p);
+    if (p >= 1) { commit(); return; }
+    rafRef.current = requestAnimationFrame(tick);
+  }, [commit]);
+
+  const begin = useCallback(() => {
+    if (committed) return;
+    if (reduce) { commit(); return; }
+    const r = btnRef.current?.getBoundingClientRect();
+    if (r) setOrigin({ x: r.left + r.width / 2, y: r.top + r.height / 2 });
+    startRef.current = performance.now();
+    rafRef.current = requestAnimationFrame(tick);
+  }, [committed, reduce, commit, tick]);
+
+  const cancel = useCallback(() => {
+    if (committed) return;
+    stop();
+    setProgress(0);
+  }, [committed, stop]);
+
+  useEffect(() => () => stop(), [stop]);
+
+  // Bloom radius: covers the screen from the button center once committed.
+  const maxR = Math.hypot(
+    Math.max(origin.x, window.innerWidth - origin.x),
+    Math.max(origin.y, window.innerHeight - origin.y),
+  ) * 1.25;
+  const bloomR = committed ? maxR : progress * maxR;
+
+  return (
+    <>
+      {/* Warm bloom growing from the button center; ignores pointer so the hold isn't interrupted. */}
+      {(progress > 0 || committed) && (
+        <div
+          style={{
+            position: 'fixed',
+            left: origin.x - bloomR,
+            top: origin.y - bloomR,
+            width: bloomR * 2,
+            height: bloomR * 2,
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${S.accent} 0%, ${S.accent} 40%, transparent 72%)`,
+            opacity: committed ? 1 : 0.9,
+            pointerEvents: 'none',
+            transition: committed ? 'width .6s ease, height .6s ease, left .6s ease, top .6s ease, opacity .6s ease' : 'none',
+            zIndex: 1,
+          }}
+        />
+      )}
+      <button
+        ref={btnRef}
+        onPointerDown={begin}
+        onPointerUp={cancel}
+        onPointerLeave={cancel}
+        style={{
+          position: 'relative',
+          zIndex: 2,
+          background: progress > 0.02 ? S.accent : S.ctaBg,
+          color: progress > 0.02 ? '#fff' : S.ctaText,
+          border: 'none',
+          borderRadius: 9,
+          padding: '8px 18px',
+          fontFamily: S.sans,
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: 'pointer',
+          whiteSpace: 'nowrap',
+          userSelect: 'none',
+          touchAction: 'none',
+          overflow: 'hidden',
+        }}
+      >
+        {/* fill sweeps left->right as you hold */}
+        <span
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: S.accent,
+            transform: `scaleX(${progress})`,
+            transformOrigin: 'left',
+            opacity: 0.35,
+            pointerEvents: 'none',
+          }}
+        />
+        <span style={{ position: 'relative' }}>{progress > 0.02 ? 'Hold…' : label}</span>
+      </button>
+    </>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/Payoff.tsx b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
index 31437e6e..12e75541 100644
--- a/frontend/src/app/components/Onboarding/flow/Payoff.tsx
+++ b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import { useOnboardingSkin } from './onboardingSkin';
 import { LineIcon } from './OnboardingIcons';
 import { Heading } from './OnboardingAtoms';
+import { HoldToLaunch } from './HoldToLaunch';
 import type { PayoffIdea } from './onboardingFlowTypes';
 
 const IdeaRow: React.FC<{ idea: PayoffIdea; onPick: () => void }> = ({ idea, onPick }) => {
@@ -75,21 +76,8 @@ export const Payoff: React.FC<{
             paddingTop: 14,
           }}
         >
-          <span style={{ fontSize: 13, color: S.muted }}>a real agent goes and does this, live</span>
-          <span
-            onClick={onRun}
-            style={{
-              background: S.ctaBg,
-              color: S.ctaText,
-              borderRadius: 9,
-              padding: '8px 18px',
-              fontWeight: 600,
-              cursor: 'pointer',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            Do it &rarr;
-          </span>
+          <span style={{ fontSize: 13, color: S.muted }}>hold to send a real agent on it, live</span>
+          <HoldToLaunch label="Hold to do it" onLaunch={onRun} />
         </div>
       </div>
 

From 6d83b2b0338c67f35848f03c1d66368f159ec160 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:02:39 -0700
Subject: [PATCH 013/248] [eric] onboarding: revert hold-to-launch gesture back
 to a plain 'Do it' click (the bloom read weird)

---
 .../Onboarding/flow/HoldToLaunch.tsx          | 124 ------------------
 .../app/components/Onboarding/flow/Payoff.tsx |  21 ++-
 2 files changed, 18 insertions(+), 127 deletions(-)
 delete mode 100644 frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx

diff --git a/frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx b/frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx
deleted file mode 100644
index e5755dd1..00000000
--- a/frontend/src/app/components/Onboarding/flow/HoldToLaunch.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-// Press-and-hold to launch, ported from the glowup CommitmentView. Holding fills a progress ring
-// AND grows a warm radial bloom from the button until it covers the screen, then hands off (a clean
-// "commit -> go" transition into the running agent). Release early and it shrinks back.
-// Reduced motion: a plain button, no bloom, instant.
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
-import { useOnboardingSkin } from './onboardingSkin';
-
-const HOLD_MS = 1100;
-
-export const HoldToLaunch: React.FC<{ label: string; onLaunch: () => void }> = ({ label, onLaunch }) => {
-  const S = useOnboardingSkin();
-  const reduce = useReducedMotion();
-  const btnRef = useRef<HTMLButtonElement>(null);
-  const rafRef = useRef<number | null>(null);
-  const startRef = useRef<number>(0);
-  const [progress, setProgress] = useState(0);
-  const [committed, setCommitted] = useState(false);
-  const [origin, setOrigin] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
-
-  const stop = useCallback(() => {
-    if (rafRef.current) cancelAnimationFrame(rafRef.current);
-    rafRef.current = null;
-  }, []);
-
-  const commit = useCallback(() => {
-    stop();
-    setCommitted(true);
-    // Let the bloom cover the screen (600ms) before handing off.
-    window.setTimeout(onLaunch, 600);
-  }, [stop, onLaunch]);
-
-  const tick = useCallback(() => {
-    const p = Math.min(1, (performance.now() - startRef.current) / HOLD_MS);
-    setProgress(p);
-    if (p >= 1) { commit(); return; }
-    rafRef.current = requestAnimationFrame(tick);
-  }, [commit]);
-
-  const begin = useCallback(() => {
-    if (committed) return;
-    if (reduce) { commit(); return; }
-    const r = btnRef.current?.getBoundingClientRect();
-    if (r) setOrigin({ x: r.left + r.width / 2, y: r.top + r.height / 2 });
-    startRef.current = performance.now();
-    rafRef.current = requestAnimationFrame(tick);
-  }, [committed, reduce, commit, tick]);
-
-  const cancel = useCallback(() => {
-    if (committed) return;
-    stop();
-    setProgress(0);
-  }, [committed, stop]);
-
-  useEffect(() => () => stop(), [stop]);
-
-  // Bloom radius: covers the screen from the button center once committed.
-  const maxR = Math.hypot(
-    Math.max(origin.x, window.innerWidth - origin.x),
-    Math.max(origin.y, window.innerHeight - origin.y),
-  ) * 1.25;
-  const bloomR = committed ? maxR : progress * maxR;
-
-  return (
-    <>
-      {/* Warm bloom growing from the button center; ignores pointer so the hold isn't interrupted. */}
-      {(progress > 0 || committed) && (
-        <div
-          style={{
-            position: 'fixed',
-            left: origin.x - bloomR,
-            top: origin.y - bloomR,
-            width: bloomR * 2,
-            height: bloomR * 2,
-            borderRadius: '50%',
-            background: `radial-gradient(circle, ${S.accent} 0%, ${S.accent} 40%, transparent 72%)`,
-            opacity: committed ? 1 : 0.9,
-            pointerEvents: 'none',
-            transition: committed ? 'width .6s ease, height .6s ease, left .6s ease, top .6s ease, opacity .6s ease' : 'none',
-            zIndex: 1,
-          }}
-        />
-      )}
-      <button
-        ref={btnRef}
-        onPointerDown={begin}
-        onPointerUp={cancel}
-        onPointerLeave={cancel}
-        style={{
-          position: 'relative',
-          zIndex: 2,
-          background: progress > 0.02 ? S.accent : S.ctaBg,
-          color: progress > 0.02 ? '#fff' : S.ctaText,
-          border: 'none',
-          borderRadius: 9,
-          padding: '8px 18px',
-          fontFamily: S.sans,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: 'pointer',
-          whiteSpace: 'nowrap',
-          userSelect: 'none',
-          touchAction: 'none',
-          overflow: 'hidden',
-        }}
-      >
-        {/* fill sweeps left->right as you hold */}
-        <span
-          style={{
-            position: 'absolute',
-            inset: 0,
-            background: S.accent,
-            transform: `scaleX(${progress})`,
-            transformOrigin: 'left',
-            opacity: 0.35,
-            pointerEvents: 'none',
-          }}
-        />
-        <span style={{ position: 'relative' }}>{progress > 0.02 ? 'Hold…' : label}</span>
-      </button>
-    </>
-  );
-};
diff --git a/frontend/src/app/components/Onboarding/flow/Payoff.tsx b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
index 12e75541..8f443bf2 100644
--- a/frontend/src/app/components/Onboarding/flow/Payoff.tsx
+++ b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
@@ -5,7 +5,6 @@ import React, { useState } from 'react';
 import { useOnboardingSkin } from './onboardingSkin';
 import { LineIcon } from './OnboardingIcons';
 import { Heading } from './OnboardingAtoms';
-import { HoldToLaunch } from './HoldToLaunch';
 import type { PayoffIdea } from './onboardingFlowTypes';
 
 const IdeaRow: React.FC<{ idea: PayoffIdea; onPick: () => void }> = ({ idea, onPick }) => {
@@ -76,8 +75,24 @@ export const Payoff: React.FC<{
             paddingTop: 14,
           }}
         >
-          <span style={{ fontSize: 13, color: S.muted }}>hold to send a real agent on it, live</span>
-          <HoldToLaunch label="Hold to do it" onLaunch={onRun} />
+          <span style={{ fontSize: 13, color: S.muted }}>a real agent goes and does this, live</span>
+          <button
+            onClick={onRun}
+            style={{
+              background: S.ctaBg,
+              color: S.ctaText,
+              border: 'none',
+              borderRadius: 9,
+              padding: '8px 18px',
+              fontFamily: S.sans,
+              fontSize: 14,
+              fontWeight: 600,
+              cursor: 'pointer',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Do it &rarr;
+          </button>
         </div>
       </div>
 

From 481005fddf5b9271d8395a8bbcdd7f41f4b1a72b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:02:39 -0700
Subject: [PATCH 014/248] [eric] onboarding: fix Connect doing nothing (extract
 shared useConnectIntegration: create->oauth->named popup->poll status; reused
 downward)

---
 .../Onboarding/flow/steps/ConnectApps.tsx     | 37 +++++--------
 .../integrations/useConnectIntegration.ts     | 54 +++++++++++++++++++
 2 files changed, 67 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/shared/integrations/useConnectIntegration.ts

diff --git a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
index 5aabb970..d2c06343 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/ConnectApps.tsx
@@ -1,10 +1,11 @@
 // D4: optional connect. Reuses the REAL shared connector catalog (icons + metadata), the REAL
 // connection state from toolsSlice, and the REAL create+OAuth thunks. All connectable MCPs, scrollable.
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { INTEGRATIONS, Integration } from '@/shared/integrations/catalog';
-import { fetchTools, createTool, startOAuth, startDeviceCodeLogin, ToolDefinition } from '@/shared/state/toolsSlice';
+import { useConnectIntegration } from '@/shared/integrations/useConnectIntegration';
+import { fetchTools, ToolDefinition } from '@/shared/state/toolsSlice';
 import { useOnboardingSkin } from '../onboardingSkin';
 import { Heading, Sub, PrimaryButton, GhostLink } from '../OnboardingAtoms';
 
@@ -14,30 +15,17 @@ function toolFor(integration: Integration, items: Record<string, ToolDefinition>
 
 const Row: React.FC<{ integration: Integration }> = ({ integration }) => {
   const S = useOnboardingSkin();
-  const dispatch = useAppDispatch();
+  const connectIntegration = useConnectIntegration();
   const items = useAppSelector((s) => s.tools.items);
   const tool = toolFor(integration, items);
   const connected = tool?.auth_status === 'connected';
+  const [connecting, setConnecting] = useState(false);
 
   const connect = async () => {
-    try {
-      // The tool has to exist before OAuth (fresh installs have none) -> create from the catalog first.
-      let t = tool;
-      if (!t) {
-        t = await dispatch(createTool({
-          name: integration.name,
-          description: integration.description,
-          mcp_config: integration.mcp_config,
-          auth_type: integration.authType ?? 'oauth2',
-        })).unwrap();
-      }
-      if (integration.authType === 'device_code') {
-        await dispatch(startDeviceCodeLogin(t.id));
-      } else {
-        const res = await dispatch(startOAuth(t.id)).unwrap();
-        if (res.auth_url) window.open(res.auth_url, '_blank');
-      }
-    } catch { /* connect failed; leave as-is */ }
+    if (connecting) return;
+    setConnecting(true);
+    await connectIntegration(integration, tool);
+    setConnecting(false);
   };
 
   return (
@@ -50,7 +38,7 @@ const Row: React.FC<{ integration: Integration }> = ({ integration }) => {
         </div>
       </div>
       <span
-        onClick={connected ? undefined : connect}
+        onClick={connected || connecting ? undefined : connect}
         style={{
           marginLeft: 'auto',
           flexShrink: 0,
@@ -60,11 +48,12 @@ const Row: React.FC<{ integration: Integration }> = ({ integration }) => {
           border: `1px solid ${connected ? S.border : S.borderStrong}`,
           borderRadius: 999,
           padding: '6px 15px',
-          cursor: connected ? 'default' : 'pointer',
+          cursor: connected || connecting ? 'default' : 'pointer',
           whiteSpace: 'nowrap',
+          opacity: connecting ? 0.6 : 1,
         }}
       >
-        {connected ? 'Connected' : 'Connect'}
+        {connected ? 'Connected' : connecting ? 'Connecting…' : 'Connect'}
       </span>
     </div>
   );
diff --git a/frontend/src/shared/integrations/useConnectIntegration.ts b/frontend/src/shared/integrations/useConnectIntegration.ts
new file mode 100644
index 00000000..3f184fcb
--- /dev/null
+++ b/frontend/src/shared/integrations/useConnectIntegration.ts
@@ -0,0 +1,54 @@
+// Shared connect primitive: create the tool (if needed) -> start OAuth / device-code -> open the
+// popup -> poll status until connected. Lives in shared/ so both the Tools page and Onboarding use
+// the SAME proven flow (downward abstraction), instead of each re-implementing it.
+
+import { useCallback } from 'react';
+import { useAppDispatch } from '@/shared/hooks';
+import { createTool, startOAuth, startDeviceCodeLogin, fetchToolStatus, ToolDefinition } from '@/shared/state/toolsSlice';
+import { Integration } from './catalog';
+
+const POLL_MS = 2000;
+const POLL_MAX = 60; // ~2 min
+
+export interface ConnectResult {
+  status: 'connected' | 'cancelled' | 'error';
+}
+
+export function useConnectIntegration(): (integration: Integration, existing?: ToolDefinition) => Promise<ConnectResult> {
+  const dispatch = useAppDispatch();
+
+  return useCallback(async (integration: Integration, existing?: ToolDefinition): Promise<ConnectResult> => {
+    try {
+      // The tool must exist before OAuth (fresh installs have none) -> create from the catalog.
+      let tool = existing;
+      if (!tool) {
+        tool = await dispatch(createTool({
+          name: integration.name,
+          description: integration.description,
+          mcp_config: integration.mcp_config,
+          auth_type: integration.authType ?? 'oauth2',
+        })).unwrap();
+      }
+
+      if (integration.authType === 'device_code') {
+        await dispatch(startDeviceCodeLogin(tool.id));
+        return { status: 'connected' };
+      }
+
+      const { auth_url } = await dispatch(startOAuth(tool.id)).unwrap();
+      if (!auth_url) return { status: 'error' };
+      // Named popup + features = the pattern that actually opens in Electron (a bare _blank is swallowed).
+      window.open(auth_url, 'oauth', 'width=500,height=700,left=200,top=100');
+
+      // Poll until the OAuth round-trip flips auth_status to connected.
+      for (let i = 0; i < POLL_MAX; i++) {
+        await new Promise((r) => setTimeout(r, POLL_MS));
+        const t = await dispatch(fetchToolStatus(tool.id)).unwrap();
+        if (t.auth_status === 'connected') return { status: 'connected' };
+      }
+      return { status: 'cancelled' };
+    } catch {
+      return { status: 'error' };
+    }
+  }, [dispatch]);
+}

From ec1c12fa2e013de0ea455587b5fa3eb1afa8edb9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:22:26 -0700
Subject: [PATCH 015/248] [eric] onboarding: fix payoff generation returning
 empty (max_tokens was 100, truncated the JSON mid-object); floor at 900 +
 forbid em-dashes/placeholders in the prompt

---
 backend/apps/agents/onboarding_suggest.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/backend/apps/agents/onboarding_suggest.py b/backend/apps/agents/onboarding_suggest.py
index 4177bf51..d5340912 100644
--- a/backend/apps/agents/onboarding_suggest.py
+++ b/backend/apps/agents/onboarding_suggest.py
@@ -24,6 +24,9 @@ from backend.apps.settings.settings import load_settings
 logger = logging.getLogger(__name__)
 
 SUGGEST_TIMEOUT_S = 20.0
+# aux_max_tokens_for is tuned for tiny labels (~100); this JSON (insight + task + 4 options) needs
+# real room or it truncates mid-object and the parse fails. Floor at 900, keep the GPT-5 bump.
+SUGGEST_MAX_TOKENS = 900
 
 SYSTEM_PROMPT = (
     "You set up the first screen a brand-new OpenSwarm user sees. OpenSwarm is NOT a chatbot: its AI "
@@ -31,7 +34,8 @@ SYSTEM_PROMPT = (
     "watch things and ping you. Given who the user is, write their landing content.\n"
     "RULES: plain language a non-dev instantly gets; NEVER invent specific facts about them (no 'your "
     "launch next week' you cannot know, keep the insight general and true); everything is an ACTION an "
-    "agent DOES (go, build, watch, chase, clean up, find), never 'ask me' or 'let's chat'.\n"
+    "agent DOES (go, build, watch, chase, clean up, find), never 'ask me' or 'let's chat'; no bracketed "
+    "placeholders like [framework]; never use em-dashes or en-dashes, use commas or periods.\n"
     "Return ONLY this JSON, nothing else:\n"
     '{"insight": "<one short, warm, TRUE line about the kind of things someone like them deals with>", '
     '"task": "<the single most useful thing an agent could DO for them right now, a concrete instruction, '
@@ -108,7 +112,7 @@ async def suggest_payoff(persona: str, name: str) -> Optional[PayoffSuggestion]:
         async def run() -> None:
             async with client.messages.stream(
                 model=aux_model,
-                max_tokens=aux_max_tokens_for(aux_model),
+                max_tokens=max(SUGGEST_MAX_TOKENS, aux_max_tokens_for(aux_model)),
                 system=SYSTEM_PROMPT,
                 messages=[{"role": "user", "content": user_turn}],
                 extra_headers={"X-Openswarm-Task-Id": uuid4().hex},

From df979193505319430e9198e8bce012450c09b956 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:23:52 -0700
Subject: [PATCH 016/248] [eric] onboarding: split payoff into 3 breathing
 beats (hello -> one task -> more), tap-a-task-to-run, no redundant card;
 floor reshaped to insight+hero+3 distinct

---
 .../Onboarding/flow/OnboardingFlow.tsx        |  72 ++++++------
 .../app/components/Onboarding/flow/Payoff.tsx | 107 ------------------
 .../Onboarding/flow/onboardingFlowTypes.ts    |   2 +-
 .../Onboarding/flow/payoffDemoContent.ts      |  62 +++++-----
 .../Onboarding/flow/steps/PayoffHello.tsx     |  32 ++++++
 .../Onboarding/flow/steps/PayoffMore.tsx      |  51 +++++++++
 .../Onboarding/flow/steps/PayoffTask.tsx      |  59 ++++++++++
 7 files changed, 209 insertions(+), 176 deletions(-)
 delete mode 100644 frontend/src/app/components/Onboarding/flow/Payoff.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/PayoffHello.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/PayoffMore.tsx
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index 61233fff..d6542a59 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -1,6 +1,6 @@
-// Orchestrates the onboarding flow: a small step machine (help -> name -> consent -> connect ->
-// payoff) that writes name + persona to settings and hands the payoff its content. The real launch,
-// consent persistence, and background profiling wire in as follow steps.
+// Orchestrates the onboarding flow: a step machine (help -> name -> consent -> connect -> the 3
+// payoff beats: greet -> task -> more). Writes name + persona to settings. The payoff content is
+// LLM-generated (profile > suggest > static floor); the floor is a last-resort fallback only.
 
 import React, { useMemo, useState } from 'react';
 import { useAppDispatch } from '@/shared/hooks';
@@ -10,13 +10,15 @@ import { WhereDoYouWantHelp } from './steps/WhereDoYouWantHelp';
 import { WhatShouldICallYou } from './steps/WhatShouldICallYou';
 import { PersonalizeConsent } from './steps/PersonalizeConsent';
 import { ConnectApps } from './steps/ConnectApps';
-import { Payoff } from './Payoff';
+import { PayoffHello } from './steps/PayoffHello';
+import { PayoffTask } from './steps/PayoffTask';
+import { PayoffMore } from './steps/PayoffMore';
 import { demoPayoff } from './payoffDemoContent';
 import { useOnboardingProfile } from './useOnboardingProfile';
 import { useOnboardingSuggest } from './useOnboardingSuggest';
 import type { FlowStepId, PersonaId, PayoffIdea, IconName } from './onboardingFlowTypes';
 
-// Icons for profile-generated ideas (the agent returns text, not icons); rotated for variety.
+// Icons for LLM-generated ideas (the model returns text, not icons); rotated for variety.
 const IDEA_ICONS: IconName[] = ['sun', 'tray', 'build', 'globe'];
 
 function greetingFor(name: string): string {
@@ -33,32 +35,29 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
   const [name, setName] = useState('');
   const [consent, setConsent] = useState(false);
 
+  const onPayoff = step === 'greet' || step === 'task' || step === 'more';
   const floor = useMemo(() => demoPayoff(persona), [persona]);
-  // Personalized payoff from the persona (cheap free-trial LLM); swaps in over the floor when ready.
-  const suggest = useOnboardingSuggest(useCase, name, step === 'payoff');
+  // Personalized payoff from the persona (cheap LLM); swaps in over the floor when ready.
+  const suggest = useOnboardingSuggest(useCase, name, onPayoff);
   // Deeper: background read-only profiling (only if they consented); trumps the persona suggestion.
-  const profile = useOnboardingProfile(name, consent, step === 'payoff');
-  const payoff = useMemo(() => {
-    // Priority: real data profile > persona-generated suggestion > static floor.
+  const profile = useOnboardingProfile(name, consent, onPayoff);
+
+  // Merge into { insight, hero, more[] }. Priority: real-data profile > persona-generated > floor.
+  const content = useMemo(() => {
     if (profile && profile.observation.trim() && profile.options.length > 0) {
-      return {
-        insight: profile.observation,
-        prefilledPrompt: profile.options[0].prompt,
-        ideas: profile.options.map((o, i) => ({ id: `p${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt })),
-      };
+      const opts = profile.options.map((o, i) => ({ id: `p${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt }));
+      return { insight: profile.observation, hero: opts[0], more: opts.slice(1) };
     }
-    if (suggest && suggest.options.length > 0) {
-      return {
-        insight: suggest.insight,
-        prefilledPrompt: suggest.task,
-        ideas: suggest.options.map((o, i) => ({ id: `s${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt })),
-      };
+    if (suggest && suggest.insight.trim() && suggest.task.trim() && suggest.options.length > 0) {
+      const opts = suggest.options.map((o, i) => ({ id: `s${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt }));
+      const hero: PayoffIdea = { id: 'hero', icon: 'sun', label: opts[0].label, prompt: suggest.task };
+      return { insight: suggest.insight, hero, more: opts };
     }
     return floor;
   }, [profile, suggest, floor]);
 
-  // The prefilled task / an idea is what actually launches the first agent. Real launch (createDraftSession
-  // + prefillPrompt + launchAndSendFirstMessage) wires in a follow step; for now finishing exits the flow.
+  // Tapping a task launches the first agent. Real launch (createDraftSession + launchAndSendFirstMessage)
+  // wires in a follow step; for now finishing exits the flow.
   const launch = (unusedPrompt: string) => onExit();
 
   const body = () => {
@@ -72,7 +71,7 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
               setUseCase(p.useCase);
               setStep('name');
             }}
-            onSkip={() => { setPersona(null); setStep('payoff'); }}
+            onSkip={() => { setPersona(null); setStep('greet'); }}
           />
         );
       case 'name':
@@ -87,21 +86,28 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
           />
         );
       case 'consent':
-        return <PersonalizeConsent onConsent={(yes) => { setConsent(yes); setStep(yes ? 'connect' : 'payoff'); }} />;
+        return <PersonalizeConsent onConsent={(yes) => { setConsent(yes); setStep(yes ? 'connect' : 'greet'); }} />;
       case 'connect':
-        return <ConnectApps onContinue={() => setStep('payoff')} onSkip={() => setStep('payoff')} />;
-      case 'payoff':
+        return <ConnectApps onContinue={() => setStep('greet')} onSkip={() => setStep('greet')} />;
+      case 'greet':
         return (
-          <Payoff
+          <PayoffHello
             greeting={greetingFor(name)}
             remark={persona ? "(someone's been busy, huh)" : undefined}
-            insight={payoff.insight}
-            prefilledPrompt={payoff.prefilledPrompt}
-            ideas={payoff.ideas}
-            onRun={() => launch(payoff.prefilledPrompt)}
-            onPickIdea={(idea: PayoffIdea) => launch(idea.prompt)}
+            onContinue={() => setStep('task')}
           />
         );
+      case 'task':
+        return (
+          <PayoffTask
+            insight={content.insight}
+            hero={content.hero}
+            onRun={(prompt: string) => launch(prompt)}
+            onMore={() => setStep('more')}
+          />
+        );
+      case 'more':
+        return <PayoffMore ideas={content.more} onPick={(prompt: string) => launch(prompt)} />;
     }
   };
 
diff --git a/frontend/src/app/components/Onboarding/flow/Payoff.tsx b/frontend/src/app/components/Onboarding/flow/Payoff.tsx
deleted file mode 100644
index 8f443bf2..00000000
--- a/frontend/src/app/components/Onboarding/flow/Payoff.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-// The payoff: name + quirky remark + insight + a prefilled runnable task + tailored "Ideas for you".
-// Presentational + theme-aware; the orchestrator feeds it content (persona floor or profile-derived).
-
-import React, { useState } from 'react';
-import { useOnboardingSkin } from './onboardingSkin';
-import { LineIcon } from './OnboardingIcons';
-import { Heading } from './OnboardingAtoms';
-import type { PayoffIdea } from './onboardingFlowTypes';
-
-const IdeaRow: React.FC<{ idea: PayoffIdea; onPick: () => void }> = ({ idea, onPick }) => {
-  const S = useOnboardingSkin();
-  const [hover, setHover] = useState(false);
-  return (
-    <div
-      onClick={onPick}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 13,
-        padding: '10px 10px',
-        fontSize: 15.5,
-        cursor: 'pointer',
-        borderRadius: 9,
-        background: hover ? S.surface : 'transparent',
-        transition: 'background .15s',
-      }}
-    >
-      <span style={{ color: S.muted, width: 22, display: 'flex', justifyContent: 'center' }}>
-        <LineIcon name={idea.icon} size={17} />
-      </span>
-      {idea.label}
-    </div>
-  );
-};
-
-export const Payoff: React.FC<{
-  greeting: string;
-  remark?: string;
-  insight: string;
-  prefilledPrompt: string;
-  ideas: PayoffIdea[];
-  onRun: () => void;
-  onPickIdea: (idea: PayoffIdea) => void;
-}> = ({ greeting, remark, insight, prefilledPrompt, ideas, onRun, onPickIdea }) => {
-  const S = useOnboardingSkin();
-  return (
-    <>
-      <Heading>{greeting}</Heading>
-      {remark && <div style={{ marginTop: 10, fontSize: 15, color: S.muted, fontStyle: 'italic' }}>{remark}</div>}
-      <div style={{ marginTop: 20, fontSize: 16, color: S.muted, lineHeight: 1.5, maxWidth: 540 }}>{insight}</div>
-
-      <div
-        style={{
-          marginTop: 26,
-          width: '100%',
-          maxWidth: 600,
-          background: S.surface,
-          border: `1px solid ${S.border}`,
-          borderRadius: S.radius,
-          padding: '20px 22px',
-          textAlign: 'left',
-        }}
-      >
-        <div style={{ fontSize: 15.5, lineHeight: 1.55, color: S.text }}>{prefilledPrompt}</div>
-        <div
-          style={{
-            marginTop: 16,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 12,
-            borderTop: `1px solid ${S.border}`,
-            paddingTop: 14,
-          }}
-        >
-          <span style={{ fontSize: 13, color: S.muted }}>a real agent goes and does this, live</span>
-          <button
-            onClick={onRun}
-            style={{
-              background: S.ctaBg,
-              color: S.ctaText,
-              border: 'none',
-              borderRadius: 9,
-              padding: '8px 18px',
-              fontFamily: S.sans,
-              fontSize: 14,
-              fontWeight: 600,
-              cursor: 'pointer',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            Do it &rarr;
-          </button>
-        </div>
-      </div>
-
-      <div style={{ marginTop: 24, width: '100%', maxWidth: 600, textAlign: 'left' }}>
-        <div style={{ fontSize: 13, color: S.muted, marginBottom: 8 }}>Or put me on one of these</div>
-        {ideas.map((idea) => (
-          <IdeaRow key={idea.id} idea={idea} onPick={() => onPickIdea(idea)} />
-        ))}
-      </div>
-    </>
-  );
-};
diff --git a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
index 7995f8f9..a2e4e5f3 100644
--- a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
+++ b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
@@ -16,7 +16,7 @@ export interface PersonaOption {
   useCase: string;
 }
 
-export type FlowStepId = 'help' | 'name' | 'consent' | 'connect' | 'payoff';
+export type FlowStepId = 'help' | 'name' | 'consent' | 'connect' | 'greet' | 'task' | 'more';
 
 export interface PayoffIdea {
   id: string;
diff --git a/frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts b/frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts
index f9be2396..82bd5743 100644
--- a/frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts
+++ b/frontend/src/app/components/Onboarding/flow/payoffDemoContent.ts
@@ -1,60 +1,52 @@
-// Placeholder payoff content keyed by persona. This is the deterministic FLOOR; the real payoff is
-// generated per-user by the aux LLM (resolve_aux_model + the p_call_classifier pattern) in a later
-// step. Kept separate so swapping the source doesn't touch the orchestrator.
+// Deterministic FLOOR content for the payoff, keyed by persona. The real payoff is generated per-user
+// (onboarding-suggest / onboarding-profile); this is the always-available fallback. Split to match
+// the 3-beat payoff: a short insight (hello), one hero task, and 3 distinct alternatives.
 
 import type { PersonaId, PayoffIdea } from './onboardingFlowTypes';
 
 export interface PayoffContent {
   insight: string;
-  prefilledPrompt: string;
-  ideas: PayoffIdea[];
+  hero: PayoffIdea;
+  more: PayoffIdea[];
 }
 
 const WORK: PayoffContent = {
-  insight: "I see you're juggling client work and a launch. Here's one I can do right now, plus a few I lined up for you.",
-  prefilledPrompt:
-    "Send me a morning briefing: today's calendar, anything urgent in my email, and what my competitors shipped. Show me a sample before it goes live.",
-  ideas: [
-    { id: 'briefing', icon: 'sun', label: 'Send me a morning briefing', prompt: 'Set up a daily morning briefing with my calendar and any urgent email.' },
-    { id: 'invoices', icon: 'tray', label: 'Clean up + chase my overdue invoices', prompt: 'Find my overdue invoices and draft polite follow-ups, ready to send.' },
-    { id: 'tracker', icon: 'build', label: 'Build me a lightweight client tracker', prompt: 'Build and run a simple client tracker I can add clients and statuses to.' },
-    { id: 'competitors', icon: 'globe', label: 'Watch my 3 competitors, ping me on changes', prompt: 'Watch 3 competitor sites and notify me when they change.' },
+  insight: "Looks like a lot's on your plate between clients and admin.",
+  hero: { id: 'briefing', icon: 'sun', label: 'Send me a morning briefing', prompt: 'Set up a daily morning briefing with my calendar and anything urgent in my email.' },
+  more: [
+    { id: 'invoices', icon: 'tray', label: 'Chase my overdue invoices', prompt: 'Find my overdue invoices and draft polite follow-ups, ready to send.' },
+    { id: 'tracker', icon: 'build', label: 'Build me a client tracker', prompt: 'Build and run a simple client tracker I can add clients and statuses to.' },
+    { id: 'competitors', icon: 'globe', label: 'Watch my competitors', prompt: 'Watch 3 competitor sites and notify me when they change.' },
   ],
 };
 
 const PERSONAL: PayoffContent = {
-  insight: "Life admin piles up. Here's one I can knock out right now, plus a few I lined up for you.",
-  prefilledPrompt:
-    'Plan my week: pull my calendar, flag any conflicts, and draft a simple to-do for what is actually due. Show me before you save anything.',
-  ideas: [
-    { id: 'inbox', icon: 'tray', label: 'Sort out my inbox pileup', prompt: 'Triage my inbox: surface what needs a reply and draft quick responses.' },
-    { id: 'book', icon: 'globe', label: 'Find + book the best option for something', prompt: 'Find the best-rated option for what I need and walk me through booking it.' },
-    { id: 'digest', icon: 'sun', label: 'Set a morning digest of what matters today', prompt: 'Send me a short morning digest of today plans and anything urgent.' },
-    { id: 'goal', icon: 'build', label: 'Build me a simple tracker for a goal', prompt: 'Build and run a simple tracker for a personal goal.' },
+  insight: 'Life admin has a way of piling up.',
+  hero: { id: 'week', icon: 'sun', label: 'Plan my week', prompt: 'Pull my calendar, flag any conflicts, and draft a simple to-do for what is due. Show me before saving.' },
+  more: [
+    { id: 'inbox', icon: 'tray', label: 'Sort out my inbox', prompt: 'Triage my inbox: surface what needs a reply and draft quick responses.' },
+    { id: 'book', icon: 'globe', label: 'Find + book something', prompt: 'Find the best-rated option for what I need and walk me through booking it.' },
+    { id: 'goal', icon: 'build', label: 'Track a personal goal', prompt: 'Build and run a simple tracker for a personal goal.' },
   ],
 };
 
 const BUILD: PayoffContent = {
-  insight: "Ideas are cheap, shipping is the thing. Here's one I can start right now, plus a few more.",
-  prefilledPrompt:
-    'Turn my idea into a working prototype: ask me 3 quick questions, then build and run a first version I can actually click.',
-  ideas: [
-    { id: 'prototype', icon: 'build', label: 'Build + run a small tool from a sentence', prompt: 'Build and run a small tool from a one-sentence description.' },
-    { id: 'stack', icon: 'globe', label: 'Research the best stack for my idea', prompt: 'Research and recommend the best stack for my idea, with tradeoffs.' },
-    { id: 'spec', icon: 'doc', label: 'Draft a spec from my rough notes', prompt: 'Turn my rough notes into a clean, buildable spec.' },
-    { id: 'board', icon: 'tray', label: 'Set up a simple task board', prompt: 'Build and run a simple task board for my project.' },
+  insight: 'Ideas are cheap, shipping is the thing.',
+  hero: { id: 'prototype', icon: 'build', label: 'Turn my idea into a prototype', prompt: 'Ask me 3 quick questions, then build and run a first version I can actually click.' },
+  more: [
+    { id: 'stack', icon: 'globe', label: 'Research the best stack', prompt: 'Research and recommend the best stack for my idea, with tradeoffs.' },
+    { id: 'spec', icon: 'doc', label: 'Draft a spec from my notes', prompt: 'Turn my rough notes into a clean, buildable spec.' },
+    { id: 'board', icon: 'tray', label: 'Set up a task board', prompt: 'Build and run a simple task board for my project.' },
   ],
 };
 
 const GENERIC: PayoffContent = {
-  insight: "Here's a taste of what I can actually do, watch, not just chat.",
-  prefilledPrompt:
-    'Find the 3 best-rated options for something under my budget, compare them side by side, and tell me which to get.',
-  ideas: [
-    { id: 'web', icon: 'globe', label: 'Do a real web task, live', prompt: 'Do a real task on the web for me, start to finish.' },
+  insight: "Here's a taste of what I can actually do, not just chat about.",
+  hero: { id: 'compare', icon: 'globe', label: 'Find + compare the best option', prompt: 'Find the 3 best-rated options for something under my budget, compare them, and tell me which to get.' },
+  more: [
     { id: 'tool', icon: 'build', label: 'Build + run a small tool', prompt: 'Build and run a small tool from a one-sentence description.' },
     { id: 'digest', icon: 'sun', label: 'Set up a daily briefing', prompt: 'Set up a short daily briefing of what matters to me.' },
-    { id: 'clean', icon: 'tray', label: 'Clean up a messy list into a sheet', prompt: 'Turn a messy list into a clean, usable sheet.' },
+    { id: 'clean', icon: 'tray', label: 'Clean a messy list into a sheet', prompt: 'Turn a messy list into a clean, usable sheet.' },
   ],
 };
 
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PayoffHello.tsx b/frontend/src/app/components/Onboarding/flow/steps/PayoffHello.tsx
new file mode 100644
index 00000000..52f609e0
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/PayoffHello.tsx
@@ -0,0 +1,32 @@
+// Payoff beat 1: the warm hello, alone. Greeting + an optional quirky remark, then Continue.
+
+import React, { useEffect, useState } from 'react';
+import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
+import { useOnboardingSkin } from '../onboardingSkin';
+import { Heading, PrimaryButton } from '../OnboardingAtoms';
+
+export const PayoffHello: React.FC<{ greeting: string; remark?: string; onContinue: () => void }> = ({
+  greeting,
+  remark,
+  onContinue,
+}) => {
+  const S = useOnboardingSkin();
+  const reduce = useReducedMotion();
+  // Let the hello land for a beat before the button fades in, so it feels like a moment, not a form.
+  const [ready, setReady] = useState(reduce);
+  useEffect(() => {
+    if (reduce) { setReady(true); return; }
+    const t = window.setTimeout(() => setReady(true), 700);
+    return () => window.clearTimeout(t);
+  }, [reduce]);
+
+  return (
+    <>
+      <Heading>{greeting}</Heading>
+      {remark && <div style={{ marginTop: 12, fontSize: 15, color: S.muted, fontStyle: 'italic' }}>{remark}</div>}
+      <div style={{ opacity: ready ? 1 : 0, transition: 'opacity .6s ease', pointerEvents: ready ? 'auto' : 'none' }}>
+        <PrimaryButton onClick={onContinue} style={{ maxWidth: 200 }}>Let&#39;s go</PrimaryButton>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PayoffMore.tsx b/frontend/src/app/components/Onboarding/flow/steps/PayoffMore.tsx
new file mode 100644
index 00000000..499523a3
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/PayoffMore.tsx
@@ -0,0 +1,51 @@
+// Payoff beat 3: the alternatives. A clean list of runnable tasks; tap one and a real agent runs it.
+
+import React, { useState } from 'react';
+import { useOnboardingSkin } from '../onboardingSkin';
+import { LineIcon } from '../OnboardingIcons';
+import { Heading } from '../OnboardingAtoms';
+import type { PayoffIdea } from '../onboardingFlowTypes';
+
+const Row: React.FC<{ idea: PayoffIdea; onPick: () => void }> = ({ idea, onPick }) => {
+  const S = useOnboardingSkin();
+  const [hover, setHover] = useState(false);
+  return (
+    <div
+      onClick={onPick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+        padding: '16px 18px',
+        borderRadius: 12,
+        cursor: 'pointer',
+        background: hover ? S.surfaceHover : S.surface,
+        border: `1px solid ${hover ? S.borderStrong : S.border}`,
+        transition: 'background .15s ease, border-color .15s ease',
+        textAlign: 'left',
+      }}
+    >
+      <span style={{ color: S.accent, display: 'flex', flexShrink: 0 }}>
+        <LineIcon name={idea.icon} size={20} />
+      </span>
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: 15.5, fontWeight: 500 }}>{idea.label}</div>
+        <div style={{ marginTop: 2, fontSize: 12.5, color: S.muted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{idea.prompt}</div>
+      </div>
+      <span style={{ marginLeft: 'auto', color: S.muted, flexShrink: 0 }}>&rarr;</span>
+    </div>
+  );
+};
+
+export const PayoffMore: React.FC<{ ideas: PayoffIdea[]; onPick: (prompt: string) => void }> = ({ ideas, onPick }) => (
+  <>
+    <Heading>Or put me on one of these</Heading>
+    <div style={{ marginTop: 32, width: '100%', maxWidth: 520, display: 'flex', flexDirection: 'column', gap: 11 }}>
+      {ideas.map((idea) => (
+        <Row key={idea.id} idea={idea} onPick={() => onPick(idea.prompt)} />
+      ))}
+    </div>
+  </>
+);
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx b/frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx
new file mode 100644
index 00000000..45979e4e
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx
@@ -0,0 +1,59 @@
+// Payoff beat 2: the insight + THE one task, as a single tappable card. Tap it and a real agent runs
+// it (0 -> 1). A quiet "or something else" leads to the alternatives beat.
+
+import React, { useState } from 'react';
+import { useOnboardingSkin } from '../onboardingSkin';
+import { LineIcon } from '../OnboardingIcons';
+import { Heading, GhostLink } from '../OnboardingAtoms';
+import type { PayoffIdea } from '../onboardingFlowTypes';
+
+export const PayoffTask: React.FC<{
+  insight: string;
+  hero: PayoffIdea;
+  onRun: (prompt: string) => void;
+  onMore: () => void;
+}> = ({ insight, hero, onRun, onMore }) => {
+  const S = useOnboardingSkin();
+  const [hover, setHover] = useState(false);
+
+  return (
+    <>
+      <Heading>{insight}</Heading>
+      <div style={{ marginTop: 14, fontSize: 15, color: S.muted }}>Here&#39;s the one I&#39;d start with:</div>
+
+      <div
+        onClick={() => onRun(hero.prompt)}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        style={{
+          marginTop: 22,
+          width: '100%',
+          maxWidth: 520,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 16,
+          background: hover ? S.surfaceHover : S.surface,
+          border: `1px solid ${hover ? S.borderStrong : S.border}`,
+          borderRadius: S.radius,
+          padding: '22px 24px',
+          cursor: 'pointer',
+          textAlign: 'left',
+          transform: hover ? 'translateY(-2px)' : 'none',
+          transition: 'background .18s ease, border-color .18s ease, transform .18s ease',
+        }}
+      >
+        <span style={{ color: S.accent, display: 'flex', flexShrink: 0 }}>
+          <LineIcon name={hero.icon} size={26} />
+        </span>
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontSize: 17, fontWeight: 550 }}>{hero.label}</div>
+          <div style={{ marginTop: 4, fontSize: 13.5, color: S.muted, lineHeight: 1.4 }}>{hero.prompt}</div>
+        </div>
+        <span style={{ marginLeft: 'auto', color: S.muted, flexShrink: 0 }}>&rarr;</span>
+      </div>
+
+      <div style={{ marginTop: 14, fontSize: 12.5, color: S.muted }}>a real agent goes and does this, live</div>
+      <GhostLink onClick={onMore}>or something else</GhostLink>
+    </>
+  );
+};

From b0bfdd146ce13f4221f98575cf312a7b961efb17 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:33:38 -0700
Subject: [PATCH 017/248] [eric] onboarding: fix blank-canvas dead-end (tap a
 task -> emit launch intent -> dashboard spawns the agent via
 handleToolbarSend); shorten+tune insight prompt (specific not fabricated)

---
 backend/apps/agents/onboarding_suggest.py     |  3 ++-
 .../Onboarding/flow/OnboardingFlow.tsx        |  7 ++++---
 .../hooks/state/useDashboardController.ts     |  9 ++++++++
 frontend/src/shared/onboardingLaunch.ts       | 21 +++++++++++++++++++
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/shared/onboardingLaunch.ts

diff --git a/backend/apps/agents/onboarding_suggest.py b/backend/apps/agents/onboarding_suggest.py
index d5340912..04d1684a 100644
--- a/backend/apps/agents/onboarding_suggest.py
+++ b/backend/apps/agents/onboarding_suggest.py
@@ -37,7 +37,8 @@ SYSTEM_PROMPT = (
     "agent DOES (go, build, watch, chase, clean up, find), never 'ask me' or 'let's chat'; no bracketed "
     "placeholders like [framework]; never use em-dashes or en-dashes, use commas or periods.\n"
     "Return ONLY this JSON, nothing else:\n"
-    '{"insight": "<one short, warm, TRUE line about the kind of things someone like them deals with>", '
+    '{"insight": "<ONE short warm sentence, max 12 words. Specific enough to feel like you get them '
+    '(name their kind of work), but never invent exact facts you cannot know>", '
     '"task": "<the single most useful thing an agent could DO for them right now, a concrete instruction, '
     'something a chatbot cannot do>", '
     '"options": [{"label": "<3-6 word verb-first phrase>", "prompt": "<a clear runnable instruction>"}]}\n'
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index d6542a59..a292d6f7 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -5,6 +5,7 @@
 import React, { useMemo, useState } from 'react';
 import { useAppDispatch } from '@/shared/hooks';
 import { updateSettingsPatch } from '@/shared/state/settingsSlice';
+import { emitOnboardingLaunch } from '@/shared/onboardingLaunch';
 import { OnboardingShell } from './OnboardingShell';
 import { WhereDoYouWantHelp } from './steps/WhereDoYouWantHelp';
 import { WhatShouldICallYou } from './steps/WhatShouldICallYou';
@@ -56,9 +57,9 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
     return floor;
   }, [profile, suggest, floor]);
 
-  // Tapping a task launches the first agent. Real launch (createDraftSession + launchAndSendFirstMessage)
-  // wires in a follow step; for now finishing exits the flow.
-  const launch = (unusedPrompt: string) => onExit();
+  // Tapping a task ends onboarding by DOING it: hand the prompt to the dashboard (it spawns the agent
+  // with its own proven path), then close the overlay so the user watches it run.
+  const launch = (prompt: string) => { emitOnboardingLaunch(prompt); onExit(); };
 
   const body = () => {
     switch (step) {
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index fff150d7..417f3353 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAppSelector } from '@/shared/hooks';
+import { onOnboardingLaunch } from '@/shared/onboardingLaunch';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 import { useCanvasControls } from '../interaction/useCanvasControls';
@@ -260,6 +261,14 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
     onWelcomeNewAgent: createWelcomeDraft,
   });
 
+  // Onboarding hands off its first task here: spawn a real agent with the chosen prompt using the
+  // same proven toolbar-send path, so onboarding ends by DOING the task instead of a blank canvas.
+  const defaultMode = useAppSelector((s) => s.settings.data.default_mode);
+  const defaultModel = useAppSelector((s) => s.settings.data.default_model);
+  useEffect(() => onOnboardingLaunch((prompt) => {
+    handleToolbarSend(prompt, defaultMode, defaultModel);
+  }), [handleToolbarSend, defaultMode, defaultModel]);
+
   const {
     handleAddView,
     handleAddBrowser,
diff --git a/frontend/src/shared/onboardingLaunch.ts b/frontend/src/shared/onboardingLaunch.ts
new file mode 100644
index 00000000..ae242f25
--- /dev/null
+++ b/frontend/src/shared/onboardingLaunch.ts
@@ -0,0 +1,21 @@
+// Decoupled hand-off from onboarding to the dashboard: onboarding declares "launch this task", the
+// dashboard executes it with its own proven spawn path. Onboarding never touches dashboard internals.
+
+const ONBOARDING_LAUNCH_EVENT = 'openswarm:onboarding-launch';
+
+export interface OnboardingLaunchDetail {
+  prompt: string;
+}
+
+export function emitOnboardingLaunch(prompt: string): void {
+  window.dispatchEvent(new CustomEvent<OnboardingLaunchDetail>(ONBOARDING_LAUNCH_EVENT, { detail: { prompt } }));
+}
+
+export function onOnboardingLaunch(handler: (prompt: string) => void): () => void {
+  const listener = (e: Event) => {
+    const detail = (e as CustomEvent<OnboardingLaunchDetail>).detail;
+    if (detail?.prompt) handler(detail.prompt);
+  };
+  window.addEventListener(ONBOARDING_LAUNCH_EVENT, listener);
+  return () => window.removeEventListener(ONBOARDING_LAUNCH_EVENT, listener);
+}

From 902d6c085e234f86f54e6209faa5ea66117f00a2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:37:04 -0700
Subject: [PATCH 018/248] [eric] onboarding: streaming feel (shared
 StreamingText, thinking->stream on payoff), simplify task beat (cut 2
 redundant meta-lines + lighter card); DRY consent onto StreamingText

---
 .../Onboarding/flow/OnboardingFlow.tsx        | 17 ++++--
 .../Onboarding/flow/StreamingText.tsx         | 48 +++++++++++++++
 .../Onboarding/flow/steps/PayoffTask.tsx      | 50 +++++++++++-----
 .../flow/steps/PersonalizeConsent.tsx         | 58 ++++---------------
 .../Onboarding/flow/useOnboardingSuggest.ts   | 20 +++++--
 5 files changed, 121 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/app/components/Onboarding/flow/StreamingText.tsx

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index a292d6f7..c0333b81 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -38,24 +38,28 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
 
   const onPayoff = step === 'greet' || step === 'task' || step === 'more';
   const floor = useMemo(() => demoPayoff(persona), [persona]);
-  // Personalized payoff from the persona (cheap LLM); swaps in over the floor when ready.
-  const suggest = useOnboardingSuggest(useCase, name, onPayoff);
+  // Personalized payoff from the persona (cheap LLM); status drives the thinking -> stream feel.
+  const { result: suggest, status: suggestStatus } = useOnboardingSuggest(useCase, name, onPayoff);
   // Deeper: background read-only profiling (only if they consented); trumps the persona suggestion.
   const profile = useOnboardingProfile(name, consent, onPayoff);
+  const profileReady = !!(profile && profile.observation.trim() && profile.options.length > 0);
 
   // Merge into { insight, hero, more[] }. Priority: real-data profile > persona-generated > floor.
   const content = useMemo(() => {
-    if (profile && profile.observation.trim() && profile.options.length > 0) {
+    if (profile && profileReady) {
       const opts = profile.options.map((o, i) => ({ id: `p${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt }));
       return { insight: profile.observation, hero: opts[0], more: opts.slice(1) };
     }
-    if (suggest && suggest.insight.trim() && suggest.task.trim() && suggest.options.length > 0) {
+    if (suggest && suggestStatus === 'ready') {
       const opts = suggest.options.map((o, i) => ({ id: `s${i}`, icon: IDEA_ICONS[i % IDEA_ICONS.length], label: o.label, prompt: o.prompt }));
-      const hero: PayoffIdea = { id: 'hero', icon: 'sun', label: opts[0].label, prompt: suggest.task };
+      const hero: PayoffIdea = { id: 'hero', icon: opts[0].icon, label: opts[0].label, prompt: suggest.task };
       return { insight: suggest.insight, hero, more: opts };
     }
     return floor;
-  }, [profile, suggest, floor]);
+  }, [profile, profileReady, suggest, suggestStatus, floor]);
+
+  // Still generating (no result yet): the task beat shows a brief "thinking" instead of the floor.
+  const generating = onPayoff && !profileReady && suggestStatus === 'loading';
 
   // Tapping a task ends onboarding by DOING it: hand the prompt to the dashboard (it spawns the agent
   // with its own proven path), then close the overlay so the user watches it run.
@@ -103,6 +107,7 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
           <PayoffTask
             insight={content.insight}
             hero={content.hero}
+            generating={generating}
             onRun={(prompt: string) => launch(prompt)}
             onMore={() => setStep('more')}
           />
diff --git a/frontend/src/app/components/Onboarding/flow/StreamingText.tsx b/frontend/src/app/components/Onboarding/flow/StreamingText.tsx
new file mode 100644
index 00000000..d0589541
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/StreamingText.tsx
@@ -0,0 +1,48 @@
+// Reveals text word-by-word (a gentle rise + fade), so generated lines feel like they stream in the
+// way Claude's responses do. Reduced-motion shows it all at once. Shared by the consent + payoff.
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
+
+const WORD_STAGGER_S = 0.05;
+const WORD_DUR_S = 0.45;
+
+export const StreamingText: React.FC<{
+  text: string;
+  style?: React.CSSProperties;
+  onDone?: () => void;
+}> = ({ text, style, onDone }) => {
+  const reduce = useReducedMotion();
+  const words = useMemo(() => text.split(' '), [text]);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    setDone(false);
+    if (reduce) { setDone(true); onDone?.(); return; }
+    const totalMs = (words.length * WORD_STAGGER_S + WORD_DUR_S) * 1000;
+    const t = window.setTimeout(() => { setDone(true); onDone?.(); }, totalMs);
+    return () => window.clearTimeout(t);
+    // onDone intentionally excluded: callers pass fresh closures; keying on text is enough.
+  }, [text, reduce, words.length]);
+
+  return (
+    <span style={style}>
+      {words.map((w, i) => (
+        <React.Fragment key={i}>
+          <span
+            style={{
+              display: 'inline-block',
+              opacity: reduce || done ? 1 : 0,
+              animation: reduce ? undefined : `onboardingWordIn ${WORD_DUR_S}s cubic-bezier(0.16,1,0.3,1) forwards`,
+              animationDelay: reduce ? undefined : `${i * WORD_STAGGER_S}s`,
+            }}
+          >
+            {w}
+          </span>
+          {i < words.length - 1 ? ' ' : ''}
+        </React.Fragment>
+      ))}
+      <style>{'@keyframes onboardingWordIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}'}</style>
+    </span>
+  );
+};
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx b/frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx
index 45979e4e..a752fd9c 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/PayoffTask.tsx
@@ -1,41 +1,66 @@
-// Payoff beat 2: the insight + THE one task, as a single tappable card. Tap it and a real agent runs
-// it (0 -> 1). A quiet "or something else" leads to the alternatives beat.
+// Payoff beat 2: a short streamed insight + THE one task as a single tappable card (tap = run, 0->1).
+// Minimal: no meta-labels stacked around the card. A quiet "or something else" leads to alternatives.
+// While the LLM is still generating, a brief thinking state holds the space so nothing pops in raw.
 
 import React, { useState } from 'react';
 import { useOnboardingSkin } from '../onboardingSkin';
 import { LineIcon } from '../OnboardingIcons';
-import { Heading, GhostLink } from '../OnboardingAtoms';
+import { GhostLink } from '../OnboardingAtoms';
+import { StreamingText } from '../StreamingText';
 import type { PayoffIdea } from '../onboardingFlowTypes';
 
+const Thinking: React.FC = () => {
+  const S = useOnboardingSkin();
+  return (
+    <div style={{ display: 'flex', gap: 6, height: 40, alignItems: 'center' }}>
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          style={{
+            width: 7, height: 7, borderRadius: '50%', background: S.muted,
+            animation: 'onboardingThink 1.2s ease-in-out infinite', animationDelay: `${i * 0.18}s`,
+          }}
+        />
+      ))}
+      <style>{'@keyframes onboardingThink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}'}</style>
+    </div>
+  );
+};
+
 export const PayoffTask: React.FC<{
   insight: string;
   hero: PayoffIdea;
+  generating: boolean;
   onRun: (prompt: string) => void;
   onMore: () => void;
-}> = ({ insight, hero, onRun, onMore }) => {
+}> = ({ insight, hero, generating, onRun, onMore }) => {
   const S = useOnboardingSkin();
   const [hover, setHover] = useState(false);
 
+  if (generating) return <Thinking />;
+
   return (
     <>
-      <Heading>{insight}</Heading>
-      <div style={{ marginTop: 14, fontSize: 15, color: S.muted }}>Here&#39;s the one I&#39;d start with:</div>
+      <StreamingText
+        text={insight}
+        style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 30, lineHeight: 1.2, letterSpacing: '-0.005em', color: S.text, maxWidth: 620 }}
+      />
 
       <div
         onClick={() => onRun(hero.prompt)}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
         style={{
-          marginTop: 22,
+          marginTop: 32,
           width: '100%',
-          maxWidth: 520,
+          maxWidth: 500,
           display: 'flex',
           alignItems: 'center',
           gap: 16,
           background: hover ? S.surfaceHover : S.surface,
           border: `1px solid ${hover ? S.borderStrong : S.border}`,
           borderRadius: S.radius,
-          padding: '22px 24px',
+          padding: '20px 22px',
           cursor: 'pointer',
           textAlign: 'left',
           transform: hover ? 'translateY(-2px)' : 'none',
@@ -43,16 +68,15 @@ export const PayoffTask: React.FC<{
         }}
       >
         <span style={{ color: S.accent, display: 'flex', flexShrink: 0 }}>
-          <LineIcon name={hero.icon} size={26} />
+          <LineIcon name={hero.icon} size={24} />
         </span>
         <div style={{ minWidth: 0 }}>
-          <div style={{ fontSize: 17, fontWeight: 550 }}>{hero.label}</div>
-          <div style={{ marginTop: 4, fontSize: 13.5, color: S.muted, lineHeight: 1.4 }}>{hero.prompt}</div>
+          <div style={{ fontSize: 16, fontWeight: 550 }}>{hero.label}</div>
+          <div style={{ marginTop: 3, fontSize: 13, color: S.muted, lineHeight: 1.4 }}>{hero.prompt}</div>
         </div>
         <span style={{ marginLeft: 'auto', color: S.muted, flexShrink: 0 }}>&rarr;</span>
       </div>
 
-      <div style={{ marginTop: 14, fontSize: 12.5, color: S.muted }}>a real agent goes and does this, live</div>
       <GhostLink onClick={onMore}>or something else</GhostLink>
     </>
   );
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
index b8701ae3..fe6dca02 100644
--- a/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
+++ b/frontend/src/app/components/Onboarding/flow/steps/PersonalizeConsent.tsx
@@ -1,63 +1,28 @@
-// D3: the personalize consent. Short question reveals word-by-word, then a small explainer + Yes.
-// "Yes" authorizes the (later) background profiling read; the sub-line says exactly what that means.
+// D3: the personalize consent. The short question streams in (shared StreamingText), then a small
+// explainer + Yes. "Yes" authorizes the (later) background profiling read; the sub-line says so.
 
-import React, { useEffect, useMemo, useState } from 'react';
-import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
+import React, { useState } from 'react';
 import { useOnboardingSkin } from '../onboardingSkin';
 import { PrimaryButton, GhostLink } from '../OnboardingAtoms';
+import { StreamingText } from '../StreamingText';
 
 const LINE = 'Want me to make this yours?';
 const SUB = "I'll take a quick look at what you connect, nothing else.";
 
-const WORD_STAGGER_S = 0.06;
-const WORD_DUR_S = 0.5;
-
 export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }> = ({ onConsent }) => {
-  const reduce = useReducedMotion();
   const S = useOnboardingSkin();
-  const words = useMemo(() => LINE.split(' '), []);
-  const [done, setDone] = useState(reduce);
-
-  useEffect(() => {
-    if (reduce) { setDone(true); return; }
-    setDone(false);
-    const totalMs = (words.length * WORD_STAGGER_S + WORD_DUR_S) * 1000;
-    const t = window.setTimeout(() => setDone(true), totalMs);
-    return () => window.clearTimeout(t);
-  }, [reduce, words.length]);
+  const [done, setDone] = useState(false);
 
   return (
     <>
-      <div style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 33, lineHeight: 1.25, color: S.text }}>
-        {words.map((w, i) => (
-          <React.Fragment key={i}>
-            <span
-              style={{
-                display: 'inline-block',
-                opacity: reduce ? 1 : 0,
-                animation: reduce ? undefined : `onboardingWordIn ${WORD_DUR_S}s cubic-bezier(0.16,1,0.3,1) forwards`,
-                animationDelay: reduce ? undefined : `${i * WORD_STAGGER_S}s`,
-              }}
-            >
-              {w}
-            </span>
-            {i < words.length - 1 ? ' ' : ''}
-          </React.Fragment>
-        ))}
-      </div>
-
-      <div
-        style={{
-          marginTop: 14,
-          fontSize: 15,
-          color: S.muted,
-          opacity: done ? 1 : 0,
-          transition: 'opacity .5s ease',
-        }}
-      >
+      <StreamingText
+        text={LINE}
+        onDone={() => setDone(true)}
+        style={{ fontFamily: S.serif, fontWeight: 500, fontSize: 33, lineHeight: 1.25, color: S.text }}
+      />
+      <div style={{ marginTop: 14, fontSize: 15, color: S.muted, opacity: done ? 1 : 0, transition: 'opacity .5s ease' }}>
         {SUB}
       </div>
-
       <div
         style={{
           marginTop: 30,
@@ -73,7 +38,6 @@ export const PersonalizeConsent: React.FC<{ onConsent: (yes: boolean) => void }>
         <PrimaryButton onClick={() => onConsent(true)}>Yes, get to know me</PrimaryButton>
         <GhostLink style={{ marginTop: 2 }} onClick={() => onConsent(false)}>not now</GhostLink>
       </div>
-      <style>{'@keyframes onboardingWordIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}'}</style>
     </>
   );
 };
diff --git a/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts b/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
index 3e93b29d..cb12f52c 100644
--- a/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
+++ b/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
@@ -1,6 +1,6 @@
 // Generates the payoff content (insight + task + 4 options) from the user's persona via the cheap
-// free-trial LLM. Progressive: returns null until it lands, so the payoff shows its static floor
-// first and swaps to the personalized version when ready. Fail-open on any miss.
+// LLM. Exposes status so the payoff can show a brief "thinking" state, then stream the result in.
+// Fail-open: on any miss the status goes 'failed' and the caller shows its static floor.
 
 import { useEffect, useState } from 'react';
 import { API_BASE } from '@/shared/config';
@@ -11,12 +11,16 @@ export interface SuggestDto {
   options: { label: string; prompt: string }[];
 }
 
-export function useOnboardingSuggest(persona: string, name: string, active: boolean): SuggestDto | null {
+export type SuggestStatus = 'idle' | 'loading' | 'ready' | 'failed';
+
+export function useOnboardingSuggest(persona: string, name: string, active: boolean): { result: SuggestDto | null; status: SuggestStatus } {
   const [result, setResult] = useState<SuggestDto | null>(null);
+  const [status, setStatus] = useState<SuggestStatus>('idle');
 
   useEffect(() => {
     if (!active || !persona) return;
     let cancelled = false;
+    setStatus('loading');
     fetch(`${API_BASE}/agents/onboarding-suggest`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -24,13 +28,17 @@ export function useOnboardingSuggest(persona: string, name: string, active: bool
     })
       .then((r) => (r.ok ? r.json() : null))
       .then((data: SuggestDto | null) => {
-        if (!cancelled && data && data.insight?.trim() && data.task?.trim() && Array.isArray(data.options) && data.options.length > 0) {
+        if (cancelled) return;
+        if (data && data.insight?.trim() && data.task?.trim() && Array.isArray(data.options) && data.options.length > 0) {
           setResult(data);
+          setStatus('ready');
+        } else {
+          setStatus('failed');
         }
       })
-      .catch(() => { /* fail-open: keep the floor */ });
+      .catch(() => { if (!cancelled) setStatus('failed'); });
     return () => { cancelled = true; };
   }, [active, persona, name]);
 
-  return result;
+  return { result, status };
 }

From ce782adb83d3a064ed21fcc1cadb456c54c9ad9a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:40:34 -0700
Subject: [PATCH 019/248] [eric] onboarding: 'just show me' runs an honest
 discovering transition (working animation while it generates) then reveals;
 seeds a broad use-case so generation still fires

---
 .../Onboarding/flow/OnboardingFlow.tsx        | 18 ++++++-
 .../Onboarding/flow/onboardingFlowTypes.ts    |  2 +-
 .../flow/steps/PayoffDiscovering.tsx          | 49 +++++++++++++++++++
 3 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/components/Onboarding/flow/steps/PayoffDiscovering.tsx

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index c0333b81..a098329e 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -14,6 +14,7 @@ import { ConnectApps } from './steps/ConnectApps';
 import { PayoffHello } from './steps/PayoffHello';
 import { PayoffTask } from './steps/PayoffTask';
 import { PayoffMore } from './steps/PayoffMore';
+import { PayoffDiscovering } from './steps/PayoffDiscovering';
 import { demoPayoff } from './payoffDemoContent';
 import { useOnboardingProfile } from './useOnboardingProfile';
 import { useOnboardingSuggest } from './useOnboardingSuggest';
@@ -36,7 +37,7 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
   const [name, setName] = useState('');
   const [consent, setConsent] = useState(false);
 
-  const onPayoff = step === 'greet' || step === 'task' || step === 'more';
+  const onPayoff = step === 'discovering' || step === 'greet' || step === 'task' || step === 'more';
   const floor = useMemo(() => demoPayoff(persona), [persona]);
   // Personalized payoff from the persona (cheap LLM); status drives the thinking -> stream feel.
   const { result: suggest, status: suggestStatus } = useOnboardingSuggest(useCase, name, onPayoff);
@@ -76,7 +77,13 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
               setUseCase(p.useCase);
               setStep('name');
             }}
-            onSkip={() => { setPersona(null); setStep('greet'); }}
+            onSkip={() => {
+              // "just show me": no persona, but seed a broad use-case so generation still fires, then
+              // run the honest discovering transition while it works.
+              setPersona(null);
+              setUseCase('someone new who wants to see the most impressive, genuinely useful things an AI agent can do for them');
+              setStep('discovering');
+            }}
           />
         );
       case 'name':
@@ -94,6 +101,13 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
         return <PersonalizeConsent onConsent={(yes) => { setConsent(yes); setStep(yes ? 'connect' : 'greet'); }} />;
       case 'connect':
         return <ConnectApps onContinue={() => setStep('greet')} onSkip={() => setStep('greet')} />;
+      case 'discovering':
+        return (
+          <PayoffDiscovering
+            ready={profileReady || suggestStatus === 'ready' || suggestStatus === 'failed'}
+            onDone={() => setStep('task')}
+          />
+        );
       case 'greet':
         return (
           <PayoffHello
diff --git a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
index a2e4e5f3..49567bd2 100644
--- a/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
+++ b/frontend/src/app/components/Onboarding/flow/onboardingFlowTypes.ts
@@ -16,7 +16,7 @@ export interface PersonaOption {
   useCase: string;
 }
 
-export type FlowStepId = 'help' | 'name' | 'consent' | 'connect' | 'greet' | 'task' | 'more';
+export type FlowStepId = 'help' | 'name' | 'consent' | 'connect' | 'discovering' | 'greet' | 'task' | 'more';
 
 export interface PayoffIdea {
   id: string;
diff --git a/frontend/src/app/components/Onboarding/flow/steps/PayoffDiscovering.tsx b/frontend/src/app/components/Onboarding/flow/steps/PayoffDiscovering.tsx
new file mode 100644
index 00000000..b2302f4d
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/flow/steps/PayoffDiscovering.tsx
@@ -0,0 +1,49 @@
+// Transition shown while the payoff is being generated (mainly the "just show me" path): a calm
+// working animation + one honest rotating line, then it auto-advances when the content is ready.
+// Honest by design: the lines describe thinking/pulling-together, never claim to read data it can't.
+
+import React, { useEffect, useState } from 'react';
+import { useReducedMotion } from '@/shared/hooks/useReducedMotion';
+import { useOnboardingSkin } from '../onboardingSkin';
+
+const LINES = [
+  'Getting a sense of what would actually help you',
+  'Lining up a few things I can just go do',
+  'Almost there',
+];
+
+// Advance when content is ready, but never flash: hold a minimum beat so it reads as "working".
+const MIN_MS = 1400;
+
+export const PayoffDiscovering: React.FC<{ ready: boolean; onDone: () => void }> = ({ ready, onDone }) => {
+  const S = useOnboardingSkin();
+  const reduce = useReducedMotion();
+  const [line, setLine] = useState(0);
+  const [minMet, setMinMet] = useState(false);
+
+  useEffect(() => {
+    const t = window.setTimeout(() => setMinMet(true), MIN_MS);
+    const rot = reduce ? null : window.setInterval(() => setLine((l) => Math.min(l + 1, LINES.length - 1)), 1400);
+    return () => { window.clearTimeout(t); if (rot) window.clearInterval(rot); };
+  }, [reduce]);
+
+  useEffect(() => { if (ready && minMet) onDone(); }, [ready, minMet, onDone]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 26 }}>
+      <div style={{ position: 'relative', width: 40, height: 40 }}>
+        <span
+          style={{
+            position: 'absolute', inset: 0, borderRadius: '50%',
+            border: `2px solid ${S.border}`, borderTopColor: S.accent,
+            animation: reduce ? undefined : 'onboardingSpin 0.9s linear infinite',
+          }}
+        />
+      </div>
+      <div style={{ fontFamily: S.serif, fontSize: 20, color: S.text, opacity: 0.9, minHeight: '1.4em', transition: 'opacity .4s ease' }}>
+        {LINES[line]}
+      </div>
+      <style>{'@keyframes onboardingSpin{to{transform:rotate(360deg)}}'}</style>
+    </div>
+  );
+};

From ebb8ab005495acf7d41e100f8527643d0a7e1765 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 1 Jul 2026 00:46:14 -0700
Subject: [PATCH 020/248] [eric] onboarding: fire persona generation the moment
 a persona is picked (runs in background through name/consent/connect) so the
 payoff is instant + magical, not a wait

---
 .../components/Onboarding/flow/OnboardingFlow.tsx  |  7 ++++---
 .../Onboarding/flow/useOnboardingSuggest.ts        | 14 ++++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index a098329e..67534708 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -39,9 +39,10 @@ export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) =>
 
   const onPayoff = step === 'discovering' || step === 'greet' || step === 'task' || step === 'more';
   const floor = useMemo(() => demoPayoff(persona), [persona]);
-  // Personalized payoff from the persona (cheap LLM); status drives the thinking -> stream feel.
-  const { result: suggest, status: suggestStatus } = useOnboardingSuggest(useCase, name, onPayoff);
-  // Deeper: background read-only profiling (only if they consented); trumps the persona suggestion.
+  // Persona generation fires the MOMENT a persona is picked, so it runs in the background through
+  // name/consent/connect and is already there (instant, no wait) by the time they hit the payoff.
+  const { result: suggest, status: suggestStatus } = useOnboardingSuggest(useCase);
+  // Deeper read-only profiling needs connected data, so it can only start after connect (onPayoff).
   const profile = useOnboardingProfile(name, consent, onPayoff);
   const profileReady = !!(profile && profile.observation.trim() && profile.options.length > 0);
 
diff --git a/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts b/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
index cb12f52c..c12a9d8b 100644
--- a/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
+++ b/frontend/src/app/components/Onboarding/flow/useOnboardingSuggest.ts
@@ -1,6 +1,8 @@
 // Generates the payoff content (insight + task + 4 options) from the user's persona via the cheap
-// LLM. Exposes status so the payoff can show a brief "thinking" state, then stream the result in.
-// Fail-open: on any miss the status goes 'failed' and the caller shows its static floor.
+// LLM. Fires as soon as the persona is known (not at the payoff), so it runs in the BACKGROUND while
+// the user goes through name/consent/connect and is ready by the time they land. Fail-open: on any
+// miss the status goes 'failed' and the caller shows its static floor. Name isn't used here (the task
+// content doesn't need it; the greeting adds the name separately), so it never re-fires mid-flow.
 
 import { useEffect, useState } from 'react';
 import { API_BASE } from '@/shared/config';
@@ -13,18 +15,18 @@ export interface SuggestDto {
 
 export type SuggestStatus = 'idle' | 'loading' | 'ready' | 'failed';
 
-export function useOnboardingSuggest(persona: string, name: string, active: boolean): { result: SuggestDto | null; status: SuggestStatus } {
+export function useOnboardingSuggest(persona: string): { result: SuggestDto | null; status: SuggestStatus } {
   const [result, setResult] = useState<SuggestDto | null>(null);
   const [status, setStatus] = useState<SuggestStatus>('idle');
 
   useEffect(() => {
-    if (!active || !persona) return;
+    if (!persona) return;
     let cancelled = false;
     setStatus('loading');
     fetch(`${API_BASE}/agents/onboarding-suggest`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ persona, name }),
+      body: JSON.stringify({ persona }),
     })
       .then((r) => (r.ok ? r.json() : null))
       .then((data: SuggestDto | null) => {
@@ -38,7 +40,7 @@ export function useOnboardingSuggest(persona: string, name: string, active: bool
       })
       .catch(() => { if (!cancelled) setStatus('failed'); });
     return () => { cancelled = true; };
-  }, [active, persona, name]);
+  }, [persona]);
 
   return { result, status };
 }

From e67dec985e32024f4f3b3eb9e6afeeb3afd326d8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 00:37:38 -0700
Subject: [PATCH 021/248] [eric] onboarding: preserve stale cinematic-flow WIP
 before v3 supersedes this line

---
 .../src/app/components/Onboarding/flow/OnboardingFlow.tsx     | 1 +
 .../app/components/Onboarding/flow/OnboardingFlowPreview.tsx  | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
index 67534708..34681125 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlow.tsx
@@ -30,6 +30,7 @@ function greetingFor(name: string): string {
 }
 
 export const OnboardingFlow: React.FC<{ onExit: () => void }> = ({ onExit }) => {
+  // Flow always starts at 'help'; editing this file Fast-Refreshes it back to the first screen.
   const dispatch = useAppDispatch();
   const [step, setStep] = useState<FlowStepId>('help');
   const [persona, setPersona] = useState<PersonaId | null>(null);
diff --git a/frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx b/frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx
index c8b283d6..a988c95f 100644
--- a/frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx
+++ b/frontend/src/app/components/Onboarding/flow/OnboardingFlowPreview.tsx
@@ -12,7 +12,9 @@ export const OnboardingFlowPreview: React.FC = () => {
   const [on, setOn] = useState(false);
 
   useEffect(() => {
-    try { setOn(window.localStorage.getItem(FLAG) === '1'); } catch { /* no localStorage */ }
+    // TEMP (live test): force-show so it appears on load. Revert to the flag read below when done.
+    setOn(true);
+    // try { setOn(window.localStorage.getItem(FLAG) === '1'); } catch { /* no localStorage */ }
   }, []);
 
   if (!on) return null;

From dd5a67b266cc1a6e779ec8e9f62069560d7d8565 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 01:23:39 -0700
Subject: [PATCH 022/248] [eric] theme: accent picker gets a Settings home;
 applies live like theme

---
 .../app/components/theme/AccentColorPad.tsx   | 96 +++++++++++++++++++
 frontend/src/app/pages/Settings/Settings.tsx  |  9 +-
 .../sections/general/GeneralInterface.tsx     | 14 +++
 3 files changed, 118 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/components/theme/AccentColorPad.tsx

diff --git a/frontend/src/app/components/theme/AccentColorPad.tsx b/frontend/src/app/components/theme/AccentColorPad.tsx
new file mode 100644
index 00000000..43750d46
--- /dev/null
+++ b/frontend/src/app/components/theme/AccentColorPad.tsx
@@ -0,0 +1,96 @@
+import React, { useCallback, useRef } from 'react';
+import { hexToHsl, hslToHex } from '@/shared/styles/claudeTokens';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+
+export const ACCENT_PRESETS = ['#ae5630', '#b0453c', '#8e5cb8', '#3a6fc4', '#2e8f6f', '#b08b2e', '#c2588f', '#5c6470'];
+
+// One control, two homes: the onboarding theme beat drives the live theme through it, and Settings > Interface edits the saved draft. Hue on x, lightness on y; the pad reports a hex and never knows who is listening.
+const AccentColorPad: React.FC<{
+  c: ClaudeTokens;
+  accent: string | null;
+  onPick: (hex: string | null) => void;
+  height?: number;
+}> = ({ c, accent, onPick, height = 240 }) => {
+  const padRef = useRef<HTMLDivElement | null>(null);
+  const draggingRef = useRef(false);
+  const lastApplyRef = useRef(0);
+
+  const applyFromEvent = useCallback((clientX: number, clientY: number) => {
+    const pad = padRef.current;
+    if (!pad) return;
+    // ~30ms throttle: a live listener re-derives tokens and re-renders the tree per apply, and pointermove fires far faster than paint needs.
+    const now = performance.now();
+    if (now - lastApplyRef.current < 30) return;
+    lastApplyRef.current = now;
+    const rect = pad.getBoundingClientRect();
+    const fx = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    const fy = Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
+    onPick(hslToHex({ h: fx, s: 0.72, l: 0.62 - fy * 0.34 }));
+  }, [onPick]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = true;
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    lastApplyRef.current = 0;
+    applyFromEvent(e.clientX, e.clientY);
+  }, [applyFromEvent]);
+
+  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (draggingRef.current) applyFromEvent(e.clientX, e.clientY);
+  }, [applyFromEvent]);
+
+  const onPointerUp = useCallback(() => { draggingRef.current = false; }, []);
+
+  const dot = accent ? hexToHsl(accent) : null;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }}>
+      <div
+        ref={padRef}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        style={{
+          position: 'relative', height, borderRadius: c.radius.lg, cursor: 'crosshair',
+          border: `1px solid ${c.border.medium}`, touchAction: 'none',
+          background: 'linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(0,0,0,0.45)), linear-gradient(to right, hsl(0,72%,55%), hsl(60,72%,55%), hsl(120,72%,55%), hsl(180,72%,55%), hsl(240,72%,55%), hsl(300,72%,55%), hsl(360,72%,55%))',
+        }}
+      >
+        {dot && (
+          <span style={{
+            position: 'absolute',
+            left: `${dot.h * 100}%`,
+            top: `${Math.min(100, Math.max(0, ((0.62 - dot.l) / 0.34) * 100))}%`,
+            transform: 'translate(-50%, -50%)',
+            width: 26, height: 26, borderRadius: 999, background: accent ?? 'transparent',
+            border: '3px solid #fff', boxShadow: '0 2px 8px rgba(0,0,0,0.35)', pointerEvents: 'none',
+          }} />
+        )}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 9, flexWrap: 'wrap' }}>
+        {ACCENT_PRESETS.map((hex) => (
+          <button
+            key={hex}
+            onClick={() => onPick(hex)}
+            style={{
+              width: 26, height: 26, borderRadius: 999, background: hex, cursor: 'pointer',
+              border: accent === hex ? '2.5px solid #fff' : '2.5px solid transparent',
+              boxShadow: accent === hex ? `0 0 0 2px ${hex}` : 'none', padding: 0,
+            }}
+          />
+        ))}
+        <button
+          onClick={() => onPick(null)}
+          style={{
+            marginLeft: 'auto', border: 'none', background: 'transparent', padding: 0,
+            color: '#8a8a86', fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
+          }}
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AccentColorPad;
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index f1eacc28..42c1e5a4 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -10,7 +10,7 @@ import { updateSettingsPatch, closeSettingsModal, AppSettings } from '@/shared/s
 import { onboardingBus } from '@/app/components/Onboarding/eventBus';
 import { fetchModels } from '@/shared/state/modelsSlice';
 import { fetchModes } from '@/shared/state/modesSlice';
-import { useThemeMode, useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useThemeMode, useThemeAccent, useClaudeTokens } from '@/shared/styles/ThemeContext';
 import DirectoryBrowser from '@/app/components/editor/DirectoryBrowser';
 import { CommandsContent } from '@/app/pages/Commands/Commands';
 import GeneralTab from './sections/general/GeneralTab';
@@ -58,6 +58,7 @@ const Settings: React.FC = () => {
   const loaded = useAppSelector((s) => s.settings.loaded);
   const modes = useAppSelector((s) => s.modes.items);
   const { setMode: setThemeMode } = useThemeMode();
+  const { setAccent } = useThemeAccent();
 
   const modesList = useMemo(() => Object.values(modes), [modes]);
 
@@ -168,6 +169,12 @@ const Settings: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form.theme]);
 
+  // Accent applies live too, same contract as theme: instant paint, debounced persist.
+  useEffect(() => {
+    if (open && loaded) setAccent(form.accent_color ?? null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form.accent_color]);
+
   useEffect(() => {
     if (!open || !loaded) return;
     if (!buildSubmit()) return;
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index bf06cae0..fe3582ad 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -12,6 +12,7 @@ import KeyboardIcon from '@mui/icons-material/Keyboard';
 import LanguageIcon from '@mui/icons-material/Language';
 import { AppSettings } from '@/shared/state/settingsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import AccentColorPad from '@/app/components/theme/AccentColorPad';
 import type { SettingsStyles } from '../settingsStyles';
 import { settingSelectAttrs } from '../settingSelect';
 
@@ -65,6 +66,19 @@ const GeneralInterface: React.FC<{
         </ToggleButtonGroup>
       </Box>
 
+      <Box sx={rowSx} {...settingSelectAttrs('accent_color', 'Accent color', 'Interface', 'The accent color used across the app.')}>
+        <Typography sx={labelSx}>Accent color</Typography>
+        <Typography sx={{ ...descSx, mb: 1.5 }}>
+          Pick any color; buttons, highlights, and glows follow it. Reset returns the stock accent.
+        </Typography>
+        <AccentColorPad
+          c={c}
+          accent={form.accent_color ?? null}
+          onPick={(hex) => setForm({ ...form, accent_color: hex })}
+          height={120}
+        />
+      </Box>
+
       <Box sx={rowSx} {...settingSelectAttrs('zoom_sensitivity', 'Zoom sensitivity', 'Interface', 'Scroll-to-zoom responsiveness.')}>
         <Typography sx={labelSx}>Zoom sensitivity</Typography>
         <Typography sx={{ ...descSx, mb: 1 }}>

From 99dbc414d62a56af1a6a228283338235f228a302 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 01:23:39 -0700
Subject: [PATCH 023/248] [eric] onboarding: schedule-offer toast +
 morning-brief chip turn the first win into a standing job

---
 .../components/nudges/ScheduleOfferToast.tsx  | 101 ++++++++++++++++++
 .../pages/AgentChat/WelcomeQuickReplies.tsx   |  57 +++++++++-
 .../Dashboard/canvas/DashboardOverlays.tsx    |   4 +
 3 files changed, 160 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/components/nudges/ScheduleOfferToast.tsx

diff --git a/frontend/src/app/components/nudges/ScheduleOfferToast.tsx b/frontend/src/app/components/nudges/ScheduleOfferToast.tsx
new file mode 100644
index 00000000..0ba759ac
--- /dev/null
+++ b/frontend/src/app/components/nudges/ScheduleOfferToast.tsx
@@ -0,0 +1,101 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { createWorkflow } from '@/shared/state/workflowsSlice';
+
+const OFFER_DONE_KEY = 'openswarm.schedule-offer.v1';
+
+function offerAlreadyResolved(): boolean {
+  try { return localStorage.getItem(OFFER_DONE_KEY) !== null; } catch { return false; }
+}
+
+// The dependency beat: the first personalized starter that COMPLETES earns one offer to become a standing weekly job. One-shot per install; accept creates a real scheduled workflow (Mondays 9am), dismiss never asks again.
+const ScheduleOfferToast: React.FC<{ dashboardId: string }> = ({ dashboardId }) => {
+  const c = useClaudeTokens();
+  const dispatch = useAppDispatch();
+  const [resolved, setResolved] = useState(offerAlreadyResolved);
+  const [scheduled, setScheduled] = useState(false);
+  const starters = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
+  const sessions = useAppSelector((s) => s.agents.sessions);
+  const model = useAppSelector((s) => s.settings.data.default_model);
+
+  const offer = useMemo(() => {
+    if (resolved || starters.length === 0) return null;
+    const prompts = new Map(starters.map((st) => [st.prompt.trim(), st]));
+    for (const session of Object.values(sessions)) {
+      if (session.status !== 'completed') continue;
+      const first = session.messages?.find((m) => m.role === 'user');
+      const text = typeof first?.content === 'string' ? first.content.trim() : '';
+      const starter = prompts.get(text);
+      if (starter) return starter;
+    }
+    return null;
+  }, [resolved, starters, sessions]);
+
+  const finishOffer = useCallback(() => {
+    try { localStorage.setItem(OFFER_DONE_KEY, new Date().toISOString()); } catch {}
+    setResolved(true);
+  }, []);
+
+  const accept = useCallback(async () => {
+    if (!offer) return;
+    try {
+      await dispatch(createWorkflow({
+        title: offer.title,
+        description: 'Created from your first run during onboarding.',
+        steps: [{ id: `step-${Date.now().toString(36)}`, text: offer.prompt, enabled: true }],
+        schedule: { enabled: true, repeat_every: 1, repeat_unit: 'week', on_days: [1], hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 },
+        dashboard_id: dashboardId,
+        model,
+      })).unwrap();
+      setScheduled(true);
+      window.setTimeout(finishOffer, 5000);
+    } catch {
+      finishOffer();
+    }
+  }, [offer, dispatch, dashboardId, model, finishOffer]);
+
+  return (
+    <Snackbar
+      open={!resolved && (!!offer || scheduled)}
+      autoHideDuration={null}
+      // Clickaway would kill the offer before it is read; only the X or a button resolves it.
+      onClose={(event, reason) => { if (reason !== 'clickaway') finishOffer(); }}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+    >
+      <Alert
+        icon={false}
+        severity="success"
+        sx={{
+          bgcolor: c.bg.surface,
+          color: c.text.primary,
+          border: `1px solid ${c.border.medium}`,
+          '& .MuiAlert-action': { alignItems: 'center', pt: 0 },
+        }}
+        action={
+          scheduled ? undefined : (
+            <>
+              <Button size="small" onClick={() => { void accept(); }} sx={{ color: c.accent.primary, fontWeight: 700 }}>
+                Every Monday
+              </Button>
+              <IconButton size="small" onClick={finishOffer} sx={{ color: c.text.tertiary }}>
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </>
+          )
+        }
+      >
+        {scheduled
+          ? 'Scheduled for Mondays at 9am. Manage it under Workflows.'
+          : `Nice, that worked. Want me to run "${offer?.title ?? ''}" every Monday at 9am?`}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default ScheduleOfferToast;
diff --git a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
index 692c62fc..c7216aee 100644
--- a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+++ b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
@@ -2,21 +2,53 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ArrowLeft, Sparkles } from 'lucide-react';
-import { useAppSelector } from '@/shared/hooks';
+import { ArrowLeft, CalendarClock, Check, Sparkles } from 'lucide-react';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { createWorkflow } from '@/shared/state/workflowsSlice';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { STARTER_CATEGORIES } from '@/shared/starterCategories';
 
+const MORNING_BRIEF_KEY = 'openswarm.morning-brief.v1';
+const MORNING_BRIEF_PROMPT =
+  'Put together my morning brief: today\'s date, the weather for my location, and the top headlines in tech and world news. ' +
+  'Keep it under 300 words and save it as a note on my dashboard titled with today\'s date.';
+
+function morningBriefCreated(): boolean {
+  try { return localStorage.getItem(MORNING_BRIEF_KEY) !== null; } catch { return false; }
+}
+
 // Quick-reply chips that sit UNDER the streamed greeting bubble. Two levels: category -> concrete prompts. Research/Write/Learn -> onPick (real run); Build -> onPickBuilder (prefill). The greeting itself is a real streamed assistant message (see useWelcomeGreeting); this is just the follow-up affordance. Pure UI, no run until the parent fires.
 const WelcomeQuickReplies: React.FC<{
   c: ClaudeTokens;
   onPick: (prompt: string) => void;
   onPickBuilder: (prompt: string) => void;
 }> = ({ c, onPick, onPickBuilder }) => {
+  const dispatch = useAppDispatch();
   const [expanded, setExpanded] = React.useState<string | null>(null);
   // Onboarding v3's prep wrote starters about THIS user's machine and apps; they lead, generic categories demote to "More ideas".
   const personalized = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
+  const model = useAppSelector((s) => s.settings.data.default_model);
   const [showCategories, setShowCategories] = React.useState(personalized.length === 0);
+  const [briefState, setBriefState] = React.useState<'offer' | 'creating' | 'created' | 'hidden'>(
+    morningBriefCreated() ? 'hidden' : 'offer',
+  );
+
+  const createMorningBrief = React.useCallback(async () => {
+    setBriefState('creating');
+    try {
+      await dispatch(createWorkflow({
+        title: 'Morning brief',
+        description: 'Created during onboarding.',
+        steps: [{ id: `step-${Date.now().toString(36)}`, text: MORNING_BRIEF_PROMPT, enabled: true }],
+        schedule: { enabled: true, repeat_every: 1, repeat_unit: 'day', on_days: [], hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 },
+        model,
+      })).unwrap();
+      try { localStorage.setItem(MORNING_BRIEF_KEY, new Date().toISOString()); } catch {}
+      setBriefState('created');
+    } catch {
+      setBriefState('offer');
+    }
+  }, [dispatch, model]);
   const currentCategory = STARTER_CATEGORIES.find((cat) => cat.id === expanded);
   const isAppBuilder = currentCategory?.target === 'app-builder';
   const currentPrompts = currentCategory?.prompts ?? [];
@@ -59,6 +91,27 @@ const WelcomeQuickReplies: React.FC<{
                   {s.title}
                 </motion.button>
               ))}
+              {briefState !== 'hidden' && (
+                <motion.button
+                  key="morning-brief"
+                  onClick={() => { if (briefState === 'offer') void createMorningBrief(); }}
+                  initial={{ opacity: 0, scale: 0.92 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ type: 'spring', stiffness: 420, damping: 26, delay: 0.08 + personalized.length * 0.06 }}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left',
+                    padding: '10px 14px', borderRadius: 11,
+                    border: `1px dashed ${briefState === 'created' ? c.status.success : c.border.strong}`,
+                    background: briefState === 'created' ? c.status.successBg : 'transparent',
+                    color: briefState === 'created' ? c.status.success : c.text.secondary,
+                    fontSize: '0.88rem', fontWeight: 500,
+                    cursor: briefState === 'offer' ? 'pointer' : 'default', fontFamily: 'inherit',
+                  }}
+                >
+                  {briefState === 'created' ? <Check size={14} style={{ flexShrink: 0 }} /> : <CalendarClock size={14} color={c.accent.primary} style={{ flexShrink: 0 }} />}
+                  {briefState === 'created' ? 'Morning brief scheduled, daily at 9am' : briefState === 'creating' ? 'Setting up your morning brief...' : 'Morning brief, every day at 9am'}
+                </motion.button>
+              )}
             </Box>
             <Box
               component="button"
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index 350e9b3e..895c524f 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -7,6 +7,7 @@ import DirectionHints from '../controls/DirectionHints';
 import WorkflowRunningToast from '@/app/pages/Workflows/WorkflowRunningToast';
 import MissedRunsToast from '@/app/pages/Workflows/MissedRunsToast';
 import ProviderHealthToast from '@/app/components/overlays/ProviderHealthToast';
+import ScheduleOfferToast from '@/app/components/nudges/ScheduleOfferToast';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -156,6 +157,9 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
 
       {/* Launch nudge when a subscription login died while the app was closed */}
       <ProviderHealthToast />
+
+      {/* One-shot dependency beat: first completed personalized starter offers to become a weekly job */}
+      <ScheduleOfferToast dashboardId={dashboardId} />
     </>
   );
 };

From 2b28193e15e345a882f2a29d5d8a9d799cbfdcc3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 01:23:39 -0700
Subject: [PATCH 024/248] [eric] onboarding: arc stagecraft (window birth,
 zigzag grain rooms, picker device, mini-canvas, swarm card)

---
 .../app/components/OnboardingV3/BeatApps.tsx  |  70 ---------
 .../app/components/OnboardingV3/BeatShell.tsx |  85 ----------
 .../app/components/OnboardingV3/BeatTheme.tsx | 131 ----------------
 .../OnboardingV3/OnboardingV3Root.tsx         | 148 +++++++++++-------
 .../OnboardingV3/beats/BeatApps.tsx           |  86 ++++++++++
 .../OnboardingV3/beats/BeatCard.tsx           | 102 ++++++++++++
 .../OnboardingV3/{ => beats}/BeatConnect.tsx  |   2 +-
 .../OnboardingV3/beats/BeatShell.tsx          | 101 ++++++++++++
 .../OnboardingV3/beats/BeatTheme.tsx          |  61 ++++++++
 frontend/src/shared/state/settingsSlice.ts    |   1 +
 10 files changed, 443 insertions(+), 344 deletions(-)
 delete mode 100644 frontend/src/app/components/OnboardingV3/BeatApps.tsx
 delete mode 100644 frontend/src/app/components/OnboardingV3/BeatShell.tsx
 delete mode 100644 frontend/src/app/components/OnboardingV3/BeatTheme.tsx
 create mode 100644 frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
 create mode 100644 frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
 rename frontend/src/app/components/OnboardingV3/{ => beats}/BeatConnect.tsx (99%)
 create mode 100644 frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
 create mode 100644 frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx

diff --git a/frontend/src/app/components/OnboardingV3/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/BeatApps.tsx
deleted file mode 100644
index c32511e0..00000000
--- a/frontend/src/app/components/OnboardingV3/BeatApps.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { Check } from 'lucide-react';
-import { INTEGRATIONS } from '@/app/pages/Tools/integrations';
-import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
-import BeatShell from './BeatShell';
-
-// Order matters: the first row should read as "your work lives here" for the widest audience.
-const PICKER_IDS = ['google-workspace', 'notion', 'slack', 'github', 'discord', 'microsoft-365', 'reddit', 'youtube', 'x', 'airtable', 'hubspot', 'tiktok'];
-
-// Picks do double duty: they brief the prep call on what this person's work looks like, and they seed which integrations we suggest connecting later. Nothing installs here; the MCP gate stays untouched.
-const BeatApps: React.FC<{
-  c: ClaudeTokens;
-  picks: string[];
-  setPicks: (ids: string[]) => void;
-  onNext: () => void;
-  onBack: () => void;
-}> = ({ c, picks, setPicks, onNext, onBack }) => {
-  const entries = PICKER_IDS
-    .map((id) => INTEGRATIONS.find((i) => i.id === id))
-    .filter((i): i is NonNullable<typeof i> => !!i);
-
-  const toggle = (id: string) => {
-    setPicks(picks.includes(id) ? picks.filter((p) => p !== id) : [...picks, id]);
-  };
-
-  return (
-    <BeatShell
-      c={c}
-      title="Choose the apps you live in."
-      body="I'll shape your starting canvas around them, and I can connect to them later so your agents work where you already do."
-      nextLabel={picks.length > 0 ? 'Continue' : 'Skip for now'}
-      onNext={onNext}
-      onBack={onBack}
-    >
-      <div style={{ width: 'min(520px, 100%)', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(112px, 1fr))', gap: 12 }}>
-        {entries.map((entry, i) => {
-          const picked = picks.includes(entry.id);
-          return (
-            <motion.button
-              key={entry.id}
-              onClick={() => toggle(entry.id)}
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ type: 'spring', stiffness: 360, damping: 24, delay: 0.06 + i * 0.04 }}
-              style={{
-                position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
-                padding: '18px 10px 14px', borderRadius: c.radius.md,
-                border: `1.5px solid ${picked ? c.accent.primary : c.border.medium}`,
-                background: c.bg.surface, cursor: 'pointer', fontFamily: 'inherit',
-                boxShadow: picked ? `0 0 0 3px ${c.accent.primary}22` : c.shadow.sm,
-                transition: 'border-color 140ms ease, box-shadow 140ms ease',
-              }}
-            >
-              {picked && (
-                <span style={{ position: 'absolute', top: 7, right: 7, width: 18, height: 18, borderRadius: 999, background: c.accent.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                  <Check size={12} color="#fff" />
-                </span>
-              )}
-              <span style={{ width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{entry.icon}</span>
-              <span style={{ fontSize: '0.8rem', fontWeight: 500, color: c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
-            </motion.button>
-          );
-        })}
-      </div>
-    </BeatShell>
-  );
-};
-
-export default BeatApps;
diff --git a/frontend/src/app/components/OnboardingV3/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/BeatShell.tsx
deleted file mode 100644
index f36bbf71..00000000
--- a/frontend/src/app/components/OnboardingV3/BeatShell.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
-import { ArrowLeft } from 'lucide-react';
-import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
-
-// Split-stage layout for the interactive beats: dark copy panel left, live artifact right. One loud button, a whisper Back, no progress bar; each beat is a room, not step 3 of 9.
-const BeatShell: React.FC<{
-  c: ClaudeTokens;
-  title: string;
-  body: string;
-  nextLabel: string;
-  nextDisabled?: boolean;
-  onNext: () => void;
-  onBack?: () => void;
-  children: React.ReactNode;
-}> = ({ c, title, body, nextLabel, nextDisabled, onNext, onBack, children }) => {
-  // Zen steal: controls stay inert until the entrance animation lands so a double-click from the prior beat can't fire them.
-  const [armed, setArmed] = useState(false);
-  useEffect(() => {
-    const t = window.setTimeout(() => setArmed(true), 450);
-    return () => window.clearTimeout(t);
-  }, []);
-
-  return (
-    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
-      <motion.div
-        initial={{ opacity: 0, x: -24 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
-        style={{
-          width: 'min(400px, 36%)', flexShrink: 0, display: 'flex', flexDirection: 'column',
-          justifyContent: 'center', padding: '48px 44px', boxSizing: 'border-box',
-          background: c.bg.inverse, color: c.text.inverse,
-        }}
-      >
-        {onBack && (
-          <button
-            onClick={() => armed && onBack()}
-            style={{
-              display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
-              marginBottom: 18, padding: 0, border: 'none', background: 'transparent',
-              color: c.text.inverse + '77', fontSize: '0.85rem', cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            <ArrowLeft size={14} /> Back
-          </button>
-        )}
-        <h1 style={{ margin: 0, fontSize: 'clamp(1.9rem, 3.2vw, 2.6rem)', lineHeight: 1.12, fontWeight: 700, letterSpacing: '-0.01em' }}>
-          {title}
-        </h1>
-        <p style={{ margin: '16px 0 0', fontSize: '0.98rem', lineHeight: 1.55, color: c.text.inverse + '99', maxWidth: '34ch' }}>
-          {body}
-        </p>
-        <div style={{ marginTop: 40 }}>
-          <button
-            onClick={() => armed && !nextDisabled && onNext()}
-            disabled={!!nextDisabled}
-            style={{
-              width: '100%', padding: '13px 18px', borderRadius: c.radius.md,
-              border: 'none', background: c.accent.primary, color: '#fff',
-              fontSize: '0.98rem', fontWeight: 600, cursor: nextDisabled ? 'default' : 'pointer',
-              opacity: nextDisabled ? 0.45 : 1, fontFamily: 'inherit',
-              transition: 'background 150ms ease, opacity 150ms ease',
-            }}
-          >
-            {nextLabel}
-          </button>
-        </div>
-      </motion.div>
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.55, delay: 0.12 }}
-        style={{
-          flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-          background: c.bg.page, padding: 36, boxSizing: 'border-box', overflow: 'auto',
-        }}
-      >
-        {children}
-      </motion.div>
-    </div>
-  );
-};
-
-export default BeatShell;
diff --git a/frontend/src/app/components/OnboardingV3/BeatTheme.tsx b/frontend/src/app/components/OnboardingV3/BeatTheme.tsx
deleted file mode 100644
index 2a6d14ef..00000000
--- a/frontend/src/app/components/OnboardingV3/BeatTheme.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { useCallback, useRef } from 'react';
-import { motion } from 'framer-motion';
-import { Moon, Sun } from 'lucide-react';
-import { useThemeAccent, useThemeMode } from '@/shared/styles/ThemeContext';
-import { hexToHsl, hslToHex } from '@/shared/styles/claudeTokens';
-import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
-import BeatShell from './BeatShell';
-
-const PRESETS = ['#ae5630', '#b0453c', '#8e5cb8', '#3a6fc4', '#2e8f6f', '#b08b2e', '#c2588f', '#5c6470'];
-
-// The IKEA-effect beat: dragging on the pad drives the REAL app theme live through ThemeContext, so the product becomes theirs before they've entered it. Persistence happens at finish(), not here.
-const BeatTheme: React.FC<{
-  c: ClaudeTokens;
-  onNext: () => void;
-  onBack: () => void;
-}> = ({ c, onNext, onBack }) => {
-  const { accent, setAccent } = useThemeAccent();
-  const { mode, setMode } = useThemeMode();
-  const padRef = useRef<HTMLDivElement | null>(null);
-  const draggingRef = useRef(false);
-  const lastApplyRef = useRef(0);
-
-  const applyFromEvent = useCallback((clientX: number, clientY: number) => {
-    const pad = padRef.current;
-    if (!pad) return;
-    // ~30ms throttle: every apply re-derives tokens and re-renders the tree, and pointermove fires far faster than paint needs.
-    const now = performance.now();
-    if (now - lastApplyRef.current < 30) return;
-    lastApplyRef.current = now;
-    const rect = pad.getBoundingClientRect();
-    const fx = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
-    const fy = Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
-    setAccent(hslToHex({ h: fx, s: 0.72, l: 0.62 - fy * 0.34 }));
-  }, [setAccent]);
-
-  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    draggingRef.current = true;
-    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
-    lastApplyRef.current = 0;
-    applyFromEvent(e.clientX, e.clientY);
-  }, [applyFromEvent]);
-
-  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (draggingRef.current) applyFromEvent(e.clientX, e.clientY);
-  }, [applyFromEvent]);
-
-  const onPointerUp = useCallback(() => { draggingRef.current = false; }, []);
-
-  const dot = accent ? hexToHsl(accent) : null;
-
-  return (
-    <BeatShell
-      c={c}
-      title="Make it yours."
-      body="Pick a color, any color. The whole app repaints as you drag; this is your home now."
-      nextLabel="Continue"
-      onNext={onNext}
-      onBack={onBack}
-    >
-      <div style={{ width: 'min(420px, 100%)', display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <motion.div
-          ref={padRef}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-          initial={{ opacity: 0, scale: 0.96 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.4 }}
-          style={{
-            position: 'relative', height: 240, borderRadius: c.radius.lg, cursor: 'crosshair',
-            border: `1px solid ${c.border.medium}`, touchAction: 'none',
-            background: 'linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(0,0,0,0.45)), linear-gradient(to right, hsl(0,72%,55%), hsl(60,72%,55%), hsl(120,72%,55%), hsl(180,72%,55%), hsl(240,72%,55%), hsl(300,72%,55%), hsl(360,72%,55%))',
-          }}
-        >
-          {dot && (
-            <span style={{
-              position: 'absolute',
-              left: `${dot.h * 100}%`,
-              top: `${((0.62 - dot.l) / 0.34) * 100}%`,
-              transform: 'translate(-50%, -50%)',
-              width: 26, height: 26, borderRadius: 999, background: accent ?? 'transparent',
-              border: '3px solid #fff', boxShadow: '0 2px 8px rgba(0,0,0,0.35)', pointerEvents: 'none',
-            }} />
-          )}
-        </motion.div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 9, flexWrap: 'wrap' }}>
-          {PRESETS.map((hex) => (
-            <button
-              key={hex}
-              onClick={() => setAccent(hex)}
-              style={{
-                width: 26, height: 26, borderRadius: 999, background: hex, cursor: 'pointer',
-                border: accent === hex ? '2.5px solid #fff' : '2.5px solid transparent',
-                boxShadow: accent === hex ? `0 0 0 2px ${hex}` : 'none', padding: 0,
-              }}
-            />
-          ))}
-          <button
-            onClick={() => setAccent(null)}
-            style={{
-              marginLeft: 'auto', border: 'none', background: 'transparent', padding: 0,
-              color: c.text.ghost, fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
-            }}
-          >
-            Reset
-          </button>
-        </div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          {(['light', 'dark'] as const).map((m) => (
-            <button
-              key={m}
-              onClick={() => setMode(m)}
-              style={{
-                flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
-                padding: '11px 0', borderRadius: c.radius.md, fontFamily: 'inherit', fontSize: '0.88rem', fontWeight: 500,
-                border: `1.5px solid ${mode === m ? c.accent.primary : c.border.medium}`,
-                background: c.bg.surface, color: c.text.secondary, cursor: 'pointer',
-                transition: 'border-color 140ms ease',
-              }}
-            >
-              {m === 'light' ? <Sun size={15} /> : <Moon size={15} />}
-              {m === 'light' ? 'Light' : 'Dark'}
-            </button>
-          ))}
-        </div>
-      </div>
-    </BeatShell>
-  );
-};
-
-export default BeatTheme;
diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index e3d959a4..7eadaf49 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -7,13 +7,16 @@ import { setFlowActive } from '@/shared/state/onboardingV3Slice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useOnboardingV3Pipeline } from './useOnboardingV3Pipeline';
-import BeatConnect from './BeatConnect';
-import BeatApps from './BeatApps';
-import BeatTheme from './BeatTheme';
+import { GRAIN_URL } from './beats/BeatShell';
+import BeatConnect from './beats/BeatConnect';
+import BeatApps from './beats/BeatApps';
+import BeatTheme from './beats/BeatTheme';
+import BeatCard from './beats/BeatCard';
 
-type Beat = 'welcome' | 'newos' | 'connect' | 'apps' | 'theme';
+type Beat = 'welcome' | 'newos' | 'connect' | 'apps' | 'theme' | 'card';
 
 const V2_STORAGE_KEY = 'openswarm.onboarding.v2';
+const WINDOWED_BEATS: Beat[] = ['welcome', 'newos'];
 
 // Decides whether the v3 full-screen flow owns this launch. Only genuinely fresh installs see it: anyone with the v2 tour key or existing sessions is auto-marked skipped so an update never re-onboards a veteran.
 function useOnboardingV3Gate(): boolean {
@@ -46,24 +49,25 @@ function useOnboardingV3Gate(): boolean {
   return flowActive && settingsLoaded && !v3State;
 }
 
-// Full-bleed intro rooms: a soft accent blob blooms behind giant type, one arrow, nothing else.
+// Full-bleed intro room: a soft accent blob drifts once behind giant type, one arrow, nothing else.
 const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext: () => void }> = ({ c, line, sub, onNext }) => (
   <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: c.bg.inverse, overflow: 'hidden' }}>
     <motion.div
-      initial={{ scale: 0.35, opacity: 0 }}
-      animate={{ scale: 1, opacity: 0.55 }}
-      transition={{ duration: 1.4, ease: [0.22, 1, 0.36, 1] }}
+      initial={{ scale: 0.35, opacity: 0, x: 0, y: 0 }}
+      animate={{ scale: [0.35, 1, 1.06, 1], opacity: [0, 0.55, 0.5, 0.55], x: [0, 0, 22, 0], y: [0, 0, -14, 0] }}
+      transition={{ duration: 9, times: [0, 0.16, 0.6, 1], ease: 'easeInOut' }}
       style={{
         position: 'absolute', width: 560, height: 560, borderRadius: 999,
         background: `radial-gradient(circle at 42% 38%, ${c.accent.hover}, ${c.accent.primary} 55%, transparent 75%)`,
         filter: 'blur(70px)', pointerEvents: 'none',
       }}
     />
+    <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.14, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
     <motion.h1
       initial={{ opacity: 0, y: 16, filter: 'blur(8px)' }}
       animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
       transition={{ duration: 0.7, delay: 0.35, ease: [0.22, 1, 0.36, 1] }}
-      style={{ position: 'relative', margin: 0, fontSize: 'clamp(2.6rem, 6vw, 4.4rem)', fontWeight: 700, color: c.text.inverse, letterSpacing: '-0.02em', textAlign: 'center', padding: '0 24px' }}
+      style={{ position: 'relative', margin: 0, fontSize: 'clamp(2.4rem, 5vw, 3.8rem)', fontWeight: 700, color: c.text.inverse, letterSpacing: '-0.02em', textAlign: 'center', padding: '0 24px' }}
     >
       {line}
     </motion.h1>
@@ -72,7 +76,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.6, delay: 0.8 }}
-        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1.05rem', color: c.text.inverse + '99' }}
+        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1.02rem', color: c.text.inverse + '99' }}
       >
         {sub}
       </motion.p>
@@ -84,7 +88,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
       transition={{ duration: 0.5, delay: 1.05 }}
       whileHover={{ scale: 1.06 }}
       style={{
-        position: 'relative', marginTop: 44, width: 54, height: 40, borderRadius: 12, border: 'none',
+        position: 'relative', marginTop: 40, width: 54, height: 40, borderRadius: 12, border: 'none',
         background: 'rgba(255,255,255,0.92)', color: '#1a1a18', cursor: 'pointer',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
       }}
@@ -94,10 +98,11 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
   </div>
 );
 
-// Onboarding v3: connect-first, Arc/Zen-style staged rooms over the live app. Each beat commits its side effect on exit; the overlay dissolving IS the reveal (the seeder has already dressed the canvas behind it).
+// Onboarding v3, staged like Arc: a floating window births over the dimmed canvas, expands to own the screen on the first commitment, then each beat is a room. Side effects commit on beat exit; the overlay dissolving IS the reveal.
 const OnboardingV3Root: React.FC = () => {
   const active = useOnboardingV3Gate();
   const c = useClaudeTokens();
+  const dispatch = useAppDispatch();
   const pipeline = useOnboardingV3Pipeline();
   const [beat, setBeat] = useState<Beat>('welcome');
   const [scanConsent, setScanConsent] = useState(true);
@@ -121,13 +126,20 @@ const OnboardingV3Root: React.FC = () => {
     setBeat('theme');
   }, [kickPrep, picks]);
 
-  const leaveTheme = useCallback(async () => {
+  const leaveCard = useCallback(async (name: string | null) => {
+    if (name) dispatch(updateSettingsPatch({ user_name: name }));
     setFinishing(true);
     await finish('done');
-  }, [finish]);
+  }, [dispatch, finish]);
 
   const skipAll = useCallback(() => { void finish('skipped'); }, [finish]);
 
+  const windowed = WINDOWED_BEATS.includes(beat);
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const stageW = windowed ? Math.min(900, Math.round(vw * 0.72)) : vw;
+  const stageH = windowed ? Math.min(560, Math.round(vh * 0.74)) : vh;
+
   // AnimatePresence stays mounted so the overlay's exit fade (the curtain lift) actually plays when active flips false.
   return (
     <AnimatePresence>
@@ -136,56 +148,78 @@ const OnboardingV3Root: React.FC = () => {
         key="onboarding-v3"
         exit={{ opacity: 0 }}
         transition={{ duration: 0.6 }}
-        style={{ position: 'fixed', inset: 0, zIndex: 100000, background: c.bg.page }}
+        style={{
+          position: 'fixed', inset: 0, zIndex: 100000,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: 'rgba(10, 10, 9, 0.42)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
+        }}
       >
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={beat}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.32 }}
-            style={{ width: '100%', height: '100%' }}
-          >
-            {beat === 'welcome' && <IntroBeat c={c} line="Welcome." onNext={() => setBeat('newos')} />}
-            {beat === 'newos' && <IntroBeat c={c} line="This is your new OS." sub="A canvas where AI agents do real work for you." onNext={() => setBeat('connect')} />}
-            {beat === 'connect' && (
-              <BeatConnect
-                c={c}
-                identity={pipeline.identity}
-                scanConsent={scanConsent}
-                setScanConsent={setScanConsent}
-                onConnected={onConnected}
-                onNext={leaveConnect}
-                onBack={() => setBeat('newos')}
-              />
-            )}
-            {beat === 'apps' && <BeatApps c={c} picks={picks} setPicks={setPicks} onNext={leaveApps} onBack={() => setBeat('connect')} />}
-            {beat === 'theme' && <BeatTheme c={c} onNext={() => { void leaveTheme(); }} onBack={() => setBeat('apps')} />}
-          </motion.div>
-        </AnimatePresence>
-        {finishing && (
-          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: c.bg.page }}>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.72, filter: 'blur(18px)' }}
+          animate={{ opacity: 1, scale: 1, filter: 'blur(0px)', width: stageW, height: stageH, borderRadius: windowed ? 14 : 0 }}
+          transition={{ type: 'spring', stiffness: 170, damping: 24, mass: 0.9 }}
+          style={{
+            position: 'relative', overflow: 'hidden',
+            boxShadow: windowed ? '0 30px 90px rgba(0,0,0,0.5)' : 'none',
+            background: c.bg.page,
+          }}
+        >
+          <AnimatePresence mode="wait">
             <motion.div
+              key={beat}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-              style={{ fontSize: '1.05rem', color: c.text.tertiary }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.32 }}
+              style={{ width: '100%', height: '100%' }}
             >
-              Setting up your canvas...
+              {beat === 'welcome' && <IntroBeat c={c} line="Welcome." onNext={() => setBeat('newos')} />}
+              {beat === 'newos' && <IntroBeat c={c} line="This is your new OS." sub="A canvas where AI agents do real work for you." onNext={() => setBeat('connect')} />}
+              {beat === 'connect' && (
+                <BeatConnect
+                  c={c}
+                  identity={pipeline.identity}
+                  scanConsent={scanConsent}
+                  setScanConsent={setScanConsent}
+                  onConnected={onConnected}
+                  onNext={leaveConnect}
+                  onBack={() => setBeat('newos')}
+                />
+              )}
+              {beat === 'apps' && <BeatApps c={c} picks={picks} setPicks={setPicks} onNext={leaveApps} onBack={() => setBeat('connect')} />}
+              {beat === 'theme' && <BeatTheme c={c} onNext={() => setBeat('card')} onBack={() => setBeat('apps')} />}
+              {beat === 'card' && <BeatCard c={c} identity={pipeline.identity} onFinish={(name) => { void leaveCard(name); }} onBack={() => setBeat('theme')} />}
             </motion.div>
-          </div>
-        )}
-        {!finishing && (
-          <button
-            onClick={skipAll}
-            style={{
-              position: 'absolute', bottom: 18, left: 20, border: 'none', background: 'transparent',
-              color: c.text.tertiary, fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', padding: 4,
-            }}
+          </AnimatePresence>
+          {/* Traffic lights sell the floating window during the intro; they fade as the window takes the screen. */}
+          <motion.div
+            animate={{ opacity: windowed ? 1 : 0 }}
+            transition={{ duration: 0.3 }}
+            style={{ position: 'absolute', top: 13, left: 14, display: 'flex', gap: 7, pointerEvents: 'none' }}
           >
-            Skip setup
-          </button>
-        )}
+            {[0, 1, 2].map((i) => (
+              <span key={i} style={{ width: 11, height: 11, borderRadius: 999, background: 'rgba(255,255,255,0.22)' }} />
+            ))}
+          </motion.div>
+          {finishing && (
+            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: c.bg.page }}>
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ fontSize: '1.05rem', color: c.text.tertiary }}>
+                Setting up your canvas...
+              </motion.div>
+            </div>
+          )}
+          {!finishing && (
+            <button
+              onClick={skipAll}
+              style={{
+                position: 'absolute', bottom: 18, left: 20, border: 'none', background: 'transparent',
+                color: c.text.tertiary, fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', padding: 4,
+              }}
+            >
+              Skip setup
+            </button>
+          )}
+        </motion.div>
       </motion.div>
       )}
     </AnimatePresence>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
new file mode 100644
index 00000000..7024836e
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Check } from 'lucide-react';
+import { INTEGRATIONS } from '@/app/pages/Tools/integrations';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import BeatShell from './BeatShell';
+
+// Order matters: the first row should read as "your work lives here" for the widest audience.
+const PICKER_IDS = ['google-workspace', 'notion', 'slack', 'github', 'discord', 'microsoft-365', 'reddit', 'youtube', 'x', 'airtable', 'hubspot', 'tiktok'];
+
+// Picks do double duty: they brief the prep call on what this person's work looks like, and they seed which integrations we suggest connecting later. Nothing installs here; the MCP gate stays untouched. Staged inside a miniature OpenSwarm window (Zen's diegetic picker) so the canvas metaphor lands before the canvas exists.
+const BeatApps: React.FC<{
+  c: ClaudeTokens;
+  picks: string[];
+  setPicks: (ids: string[]) => void;
+  onNext: () => void;
+  onBack: () => void;
+}> = ({ c, picks, setPicks, onNext, onBack }) => {
+  const entries = PICKER_IDS
+    .map((id) => INTEGRATIONS.find((i) => i.id === id))
+    .filter((i): i is NonNullable<typeof i> => !!i);
+
+  const toggle = (id: string) => {
+    setPicks(picks.includes(id) ? picks.filter((p) => p !== id) : [...picks, id]);
+  };
+
+  return (
+    <BeatShell
+      c={c}
+      title="Choose the apps you live in."
+      body="I'll shape your starting canvas around them, and I can connect to them later so your agents work where you already do."
+      nextLabel={picks.length > 0 ? 'Continue' : 'Skip for now'}
+      onNext={onNext}
+      onBack={onBack}
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 16, scale: 0.97 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', stiffness: 220, damping: 24, delay: 0.2 }}
+        style={{
+          width: 'min(600px, 100%)', borderRadius: 14, background: c.bg.surface,
+          border: `1px solid ${c.border.medium}`, boxShadow: '0 18px 50px rgba(0,0,0,0.22)', overflow: 'hidden',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 12px', borderBottom: `1px solid ${c.border.subtle}`, background: c.bg.elevated }}>
+          {[0, 1, 2].map((i) => (
+            <span key={i} style={{ width: 10, height: 10, borderRadius: 999, background: c.border.strong }} />
+          ))}
+          <span style={{ marginLeft: 8, fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
+        </div>
+        <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(108px, 1fr))', gap: 11 }}>
+          {entries.map((entry, i) => {
+            const picked = picks.includes(entry.id);
+            return (
+              <motion.button
+                key={entry.id}
+                onClick={() => toggle(entry.id)}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ type: 'spring', stiffness: 360, damping: 24, delay: 0.28 + i * 0.035 }}
+                style={{
+                  position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9,
+                  padding: '16px 8px 12px', borderRadius: c.radius.md,
+                  border: `1.5px solid ${picked ? c.accent.primary : c.border.medium}`,
+                  background: c.bg.surface, cursor: 'pointer', fontFamily: 'inherit',
+                  boxShadow: picked ? `0 0 0 3px ${c.accent.primary}22` : c.shadow.sm,
+                  transition: 'border-color 140ms ease, box-shadow 140ms ease',
+                }}
+              >
+                {picked && (
+                  <span style={{ position: 'absolute', top: 6, right: 6, width: 17, height: 17, borderRadius: 999, background: c.accent.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <Check size={11} color="#fff" />
+                  </span>
+                )}
+                <span style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{entry.icon}</span>
+                <span style={{ fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
+              </motion.button>
+            );
+          })}
+        </div>
+      </motion.div>
+    </BeatShell>
+  );
+};
+
+export default BeatApps;
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
new file mode 100644
index 00000000..c8b039b9
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -0,0 +1,102 @@
+import React, { useMemo, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Dices } from 'lucide-react';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import type { ProviderIdentity } from '../onboardingV3Api';
+import BeatShell from './BeatShell';
+
+const EPITHETS = [
+  'METHODICAL PERFECTIONIST', 'SAVORY ARCHIVIST', 'MIDNIGHT ORCHESTRATOR', 'GENTLE MAXIMALIST',
+  'PRACTICAL DREAMER', 'QUIET POWER USER', 'CURIOUS CARTOGRAPHER', 'SWARM WHISPERER',
+  'DELIBERATE TINKERER', 'WARM SYSTEMATIZER', 'PATIENT ACCELERATIONIST', 'ANALOG FUTURIST',
+];
+
+function nameFromIdentity(identity: ProviderIdentity[]): string {
+  const email = identity.find((p) => p.email)?.email ?? '';
+  const local = email.split('@')[0] ?? '';
+  const letters = local.replace(/[^a-zA-Z]/g, '');
+  if (!letters) return '';
+  return letters.charAt(0).toUpperCase() + letters.slice(1, 12);
+}
+
+// The Arc Card moment: onboarding ends with an identity artifact, not a settings screen. Name is editable in place, the epithet re-rolls, and the leaf wears the accent they just picked.
+const BeatCard: React.FC<{
+  c: ClaudeTokens;
+  identity: ProviderIdentity[];
+  onFinish: (name: string | null) => void;
+  onBack: () => void;
+}> = ({ c, identity, onFinish, onBack }) => {
+  const [name, setName] = useState(() => nameFromIdentity(identity));
+  const seed = useMemo(() => Math.floor(Math.random() * EPITHETS.length), []);
+  const [roll, setRoll] = useState(0);
+  const epithet = EPITHETS[(seed + roll) % EPITHETS.length];
+  const today = useMemo(() => new Date().toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }), []);
+
+  return (
+    <BeatShell
+      c={c}
+      title={name ? `Welcome to OpenSwarm, ${name}.` : 'Welcome to OpenSwarm.'}
+      body="Here's your Swarm Card. And with that, your canvas is ready."
+      nextLabel="Get started"
+      onNext={() => onFinish(name.trim() || null)}
+      onBack={onBack}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
+        <motion.div
+          initial={{ opacity: 0, y: 22, rotate: -3, scale: 0.94 }}
+          animate={{ opacity: 1, y: 0, rotate: 0, scale: 1 }}
+          transition={{ type: 'spring', stiffness: 200, damping: 22, delay: 0.25 }}
+          style={{
+            width: 290, height: 400, borderRadius: 18, background: '#FCFBF5',
+            boxShadow: '0 24px 60px rgba(0,0,0,0.28)', padding: '26px 24px', boxSizing: 'border-box',
+            display: 'flex', flexDirection: 'column', position: 'relative',
+          }}
+        >
+          <div style={{
+            width: 168, height: 158, alignSelf: 'flex-start',
+            borderRadius: '6% 64% 6% 64%',
+            background: `linear-gradient(135deg, ${c.accent.hover}, ${c.accent.primary} 70%, ${c.accent.pressed})`,
+          }} />
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value.slice(0, 18))}
+            placeholder="Your name"
+            style={{
+              marginTop: 26, border: 'none', outline: 'none', background: 'transparent',
+              fontSize: '1.7rem', fontWeight: 800, color: c.accent.pressed, fontFamily: 'inherit',
+              width: '100%', padding: 0,
+            }}
+          />
+          <div style={{ marginTop: 6, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.68rem', letterSpacing: '0.14em', color: c.accent.primary }}>
+            {epithet}
+          </div>
+          <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <span style={{
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.6rem', letterSpacing: '0.1em',
+              color: c.accent.primary, border: `1px solid ${c.accent.primary}55`, borderRadius: 4, padding: '2px 7px',
+            }}>
+              OPENSWARM · {today.toUpperCase()}
+            </span>
+            <span style={{ fontSize: '0.6rem', letterSpacing: '0.06em', color: c.accent.pressed, fontWeight: 700, textAlign: 'right', lineHeight: 1.35 }}>
+              OPEN<br />SWARM
+            </span>
+          </div>
+        </motion.div>
+        <motion.button
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.7 }}
+          onClick={() => setRoll((r) => r + 1)}
+          style={{
+            display: 'flex', alignItems: 'center', gap: 7, border: 'none', background: 'transparent',
+            color: c.text.tertiary, fontSize: '0.82rem', cursor: 'pointer', fontFamily: 'inherit', padding: 4,
+          }}
+        >
+          <Dices size={15} /> Re-roll the title
+        </motion.button>
+      </div>
+    </BeatShell>
+  );
+};
+
+export default BeatCard;
diff --git a/frontend/src/app/components/OnboardingV3/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
similarity index 99%
rename from frontend/src/app/components/OnboardingV3/BeatConnect.tsx
rename to frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index bbb28389..d64d2489 100644
--- a/frontend/src/app/components/OnboardingV3/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -10,7 +10,7 @@ import { hasFreeTrialActive, hasModelConnected } from '@/app/components/Onboardi
 import { SUBSCRIPTION_PROVIDERS } from '@/app/pages/Settings/sections/subscription/subscriptionProviders';
 import { runConnectFlow } from '@/app/pages/Settings/sections/subscription/subscriptionConnect';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
-import type { ProviderIdentity } from './onboardingV3Api';
+import type { ProviderIdentity } from '../onboardingV3Api';
 import BeatShell from './BeatShell';
 
 // The single ask of the whole flow. Reuses the proven Settings connect flow verbatim; the scan disclosure lives here as one honest line with an opt-out, and the scan runs during the OAuth wait.
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
new file mode 100644
index 00000000..c1277924
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ArrowLeft } from 'lucide-react';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+
+// Film grain as a data URI so the CSP never phones out; opacity keeps it a texture, not noise.
+export const GRAIN_URL = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")";
+
+// Arc's torn seam: the dark copy panel ends in a zigzag bite instead of a straight border.
+const ZIGZAG_CLIP = `polygon(0 0, 100% 0, ${Array.from({ length: 50 }, (unused, i) => `calc(100% - 6px) ${i * 2 + 1}%, 100% ${i * 2 + 2}%`).join(', ')}, 0 100%)`;
+
+const SPRING = { type: 'spring' as const, stiffness: 260, damping: 26 };
+
+// One idea per room: dark copy panel left (torn edge, grain, staggered spring+blur copy), live artifact on a grained stage right. Copy never moves after it lands; only the artifact is alive.
+const BeatShell: React.FC<{
+  c: ClaudeTokens;
+  title: string;
+  body: string;
+  nextLabel: string;
+  nextDisabled?: boolean;
+  onNext: () => void;
+  onBack?: () => void;
+  children: React.ReactNode;
+}> = ({ c, title, body, nextLabel, nextDisabled, onNext, onBack, children }) => {
+  // Zen steal: controls stay inert until the entrance lands so a double-click from the prior beat can't fire them.
+  const [armed, setArmed] = useState(false);
+  useEffect(() => {
+    const t = window.setTimeout(() => setArmed(true), 600);
+    return () => window.clearTimeout(t);
+  }, []);
+
+  const enter = (delay: number) => ({
+    initial: { opacity: 0, y: 14, filter: 'blur(6px)' },
+    animate: { opacity: 1, y: 0, filter: 'blur(0px)' },
+    transition: { ...SPRING, delay },
+  });
+
+  return (
+    <div style={{ display: 'flex', width: '100%', height: '100%', background: c.bg.secondary }}>
+      <div
+        style={{
+          position: 'relative', width: 'min(400px, 36%)', flexShrink: 0, display: 'flex', flexDirection: 'column',
+          justifyContent: 'center', padding: '48px 46px 48px 44px', boxSizing: 'border-box',
+          background: c.bg.inverse, color: c.text.inverse, clipPath: ZIGZAG_CLIP,
+        }}
+      >
+        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.16, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
+        {onBack && (
+          <motion.button
+            {...enter(0.05)}
+            onClick={() => armed && onBack()}
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
+              marginBottom: 18, padding: 0, border: 'none', background: 'transparent',
+              color: c.text.inverse + '77', fontSize: '0.85rem', cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <ArrowLeft size={14} /> Back
+          </motion.button>
+        )}
+        <motion.h1 {...enter(0.12)} style={{ margin: 0, fontSize: 'clamp(1.9rem, 3.2vw, 2.6rem)', lineHeight: 1.12, fontWeight: 700, letterSpacing: '-0.01em' }}>
+          {title}
+        </motion.h1>
+        <motion.p {...enter(0.26)} style={{ margin: '16px 0 0', fontSize: '0.98rem', lineHeight: 1.55, color: c.text.inverse + '99', maxWidth: '34ch' }}>
+          {body}
+        </motion.p>
+        <motion.div {...enter(0.42)} style={{ marginTop: 40 }}>
+          <button
+            onClick={() => armed && !nextDisabled && onNext()}
+            disabled={!!nextDisabled}
+            style={{
+              width: '100%', padding: '13px 18px', borderRadius: c.radius.md,
+              border: 'none', background: c.accent.primary, color: '#fff',
+              fontSize: '0.98rem', fontWeight: 600, cursor: nextDisabled ? 'default' : 'pointer',
+              opacity: nextDisabled ? 0.45 : 1, fontFamily: 'inherit',
+              transition: 'background 150ms ease, opacity 150ms ease',
+            }}
+          >
+            {nextLabel}
+          </button>
+        </motion.div>
+      </div>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.55, delay: 0.15 }}
+        style={{
+          position: 'relative', flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          padding: 36, boxSizing: 'border-box', overflow: 'auto',
+        }}
+      >
+        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.07, pointerEvents: 'none' }} />
+        <div style={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {children}
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default BeatShell;
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
new file mode 100644
index 00000000..14886f8c
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Moon, Sun } from 'lucide-react';
+import { useThemeAccent, useThemeMode } from '@/shared/styles/ThemeContext';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import AccentColorPad from '@/app/components/theme/AccentColorPad';
+import BeatShell from './BeatShell';
+
+// The IKEA-effect beat, staged as a physical picker device (Arc's theme gadget): mode icons on the bezel, the shared pad as the screen. Every touch drives the REAL app theme live; persistence happens at finish().
+const BeatTheme: React.FC<{
+  c: ClaudeTokens;
+  onNext: () => void;
+  onBack: () => void;
+}> = ({ c, onNext, onBack }) => {
+  const { accent, setAccent } = useThemeAccent();
+  const { mode, setMode } = useThemeMode();
+
+  return (
+    <BeatShell
+      c={c}
+      title="Make it yours."
+      body="Pick a color, any color. The whole app repaints as you drag; this is your home now."
+      nextLabel="Continue"
+      onNext={onNext}
+      onBack={onBack}
+    >
+      <motion.div
+        initial={{ opacity: 0, scale: 0.94, y: 14 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        transition={{ type: 'spring', stiffness: 220, damping: 24, delay: 0.2 }}
+        style={{
+          width: 'min(430px, 100%)', borderRadius: 20, background: c.bg.inverse,
+          boxShadow: '0 18px 50px rgba(0,0,0,0.3)', padding: '14px 16px 18px', boxSizing: 'border-box',
+          display: 'flex', flexDirection: 'column', gap: 12,
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'center', gap: 10 }}>
+          {(['light', 'dark'] as const).map((m) => (
+            <button
+              key={m}
+              onClick={() => setMode(m)}
+              title={m === 'light' ? 'Light' : 'Dark'}
+              style={{
+                width: 34, height: 28, borderRadius: 8, border: 'none', cursor: 'pointer',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                background: mode === m ? c.accent.primary : 'transparent',
+                color: mode === m ? '#fff' : c.text.inverse + '88',
+                transition: 'background 140ms ease, color 140ms ease',
+              }}
+            >
+              {m === 'light' ? <Sun size={15} /> : <Moon size={15} />}
+            </button>
+          ))}
+        </div>
+        <AccentColorPad c={c} accent={accent} onPick={setAccent} height={210} />
+      </motion.div>
+    </BeatShell>
+  );
+};
+
+export default BeatTheme;
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index e4441a41..37242795 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -71,6 +71,7 @@ export interface AppSettings {
   openswarm_usage_cached?: SubscriptionUsage | null;
   /** Identity populated by /api/auth/signin-activate; Stripe checkout also fills these. */
   user_id?: string | null;
+  user_name?: string | null;
   user_email?: string | null;
   signin_method?: 'google' | 'email' | 'stripe' | null;
   /** Anonymous device id (first-run generated); stitches anon to authed PostHog Persons. */

From db997818478707e2e2140c20b9b707df5f75d7fb Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 01:23:39 -0700
Subject: [PATCH 025/248] [eric] onboarding: prep tuning (swarm-shaped first
 starter, tangible results only, no em-dashes)

---
 backend/apps/onboarding/prep.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index b13df5d5..b9a62905 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -28,8 +28,12 @@ P_SYSTEM = (
     '{"greeting": string, "starters": [{"title": string, "prompt": string}]}. '
     "Exactly 4 starters. Each title is 2-5 words. Each prompt is a concrete, safe, immediately runnable task "
     "referencing the user's real folders, file counts, or picked apps when possible; never invent facts, never "
-    "propose deleting anything without review. The greeting is one warm sentence that names 2-3 specific things "
-    "found on the machine. No markdown, no commentary, JSON only."
+    "propose deleting anything without review. Make the FIRST starter a bigger multi-part task whose parts can "
+    "run in parallel (for example: research something on the web WHILE organizing a folder AND drafting a summary), "
+    "phrased as one natural request. Every starter must produce a tangible result the user can see (a sorted folder, "
+    "a report, a working page); never propose setup, documentation of preferences, or planning-only tasks. "
+    "The greeting is one warm sentence that names 2-3 specific things "
+    "found on the machine. Never use em-dashes or en-dashes anywhere. No markdown, no commentary, JSON only."
 )
 
 

From 6ad74bea0bbd09414eb169e5bdcef0040e068b43 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 01:38:12 -0700
Subject: [PATCH 026/248] [eric] onboarding: claude design language (starburst
 mark on intro, thinking-pulse finish, starburst card emblem)

---
 .../OnboardingV3/OnboardingV3Root.tsx         | 24 +++++++++++++++----
 .../app/components/OnboardingV3/Starburst.tsx | 21 ++++++++++++++++
 .../OnboardingV3/beats/BeatCard.tsx           |  9 ++++---
 3 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/app/components/OnboardingV3/Starburst.tsx

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 7eadaf49..7024b9ef 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -8,6 +8,7 @@ import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useOnboardingV3Pipeline } from './useOnboardingV3Pipeline';
 import { GRAIN_URL } from './beats/BeatShell';
+import Starburst from './Starburst';
 import BeatConnect from './beats/BeatConnect';
 import BeatApps from './beats/BeatApps';
 import BeatTheme from './beats/BeatTheme';
@@ -63,11 +64,19 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
       }}
     />
     <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.14, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
+    <motion.div
+      initial={{ opacity: 0, scale: 0.4, rotate: -80 }}
+      animate={{ opacity: 1, scale: 1, rotate: 0 }}
+      transition={{ type: 'spring', stiffness: 160, damping: 18, delay: 0.2 }}
+      style={{ position: 'relative', marginBottom: 22 }}
+    >
+      <Starburst size={44} from={c.accent.hover} to={c.accent.primary} />
+    </motion.div>
     <motion.h1
       initial={{ opacity: 0, y: 16, filter: 'blur(8px)' }}
       animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
-      transition={{ duration: 0.7, delay: 0.35, ease: [0.22, 1, 0.36, 1] }}
-      style={{ position: 'relative', margin: 0, fontSize: 'clamp(2.4rem, 5vw, 3.8rem)', fontWeight: 700, color: c.text.inverse, letterSpacing: '-0.02em', textAlign: 'center', padding: '0 24px' }}
+      transition={{ duration: 0.7, delay: 0.45, ease: [0.22, 1, 0.36, 1] }}
+      style={{ position: 'relative', margin: 0, fontSize: 'clamp(2.4rem, 5vw, 3.8rem)', fontWeight: 600, color: c.text.inverse, letterSpacing: '-0.01em', textAlign: 'center', padding: '0 24px' }}
     >
       {line}
     </motion.h1>
@@ -202,8 +211,15 @@ const OnboardingV3Root: React.FC = () => {
             ))}
           </motion.div>
           {finishing && (
-            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: c.bg.page }}>
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ fontSize: '1.05rem', color: c.text.tertiary }}>
+            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center', justifyContent: 'center', background: c.bg.page }}>
+              <motion.div
+                initial={{ opacity: 0, scale: 0.7 }}
+                animate={{ opacity: [0, 1, 0.55, 1], scale: [0.7, 1, 0.92, 1], rotate: [0, 0, 22, 45] }}
+                transition={{ duration: 4.5, times: [0, 0.2, 0.6, 1], repeat: 3 }}
+              >
+                <Starburst size={40} from={c.accent.hover} to={c.accent.pressed} />
+              </motion.div>
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ fontSize: '1.02rem', color: c.text.tertiary }}>
                 Setting up your canvas...
               </motion.div>
             </div>
diff --git a/frontend/src/app/components/OnboardingV3/Starburst.tsx b/frontend/src/app/components/OnboardingV3/Starburst.tsx
new file mode 100644
index 00000000..9acd5187
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/Starburst.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+// Claude's signature asterisk mark, drawn as 8 rounded rays around a hollow center; gradient runs hover->pressed so it wears whatever accent the user picked.
+const Starburst: React.FC<{ size: number; from: string; to: string }> = ({ size, from, to }) => {
+  const id = React.useId();
+  return (
+    <svg width={size} height={size} viewBox="-50 -50 100 100" style={{ display: 'block' }}>
+      <defs>
+        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor={from} />
+          <stop offset="100%" stopColor={to} />
+        </linearGradient>
+      </defs>
+      {Array.from({ length: 8 }, (unused, i) => (
+        <rect key={i} x={-7} y={-46} width={14} height={34} rx={7} fill={`url(#${id})`} transform={`rotate(${i * 45})`} />
+      ))}
+    </svg>
+  );
+};
+
+export default Starburst;
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index c8b039b9..b3653cef 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { Dices } from 'lucide-react';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import type { ProviderIdentity } from '../onboardingV3Api';
+import Starburst from '../Starburst';
 import BeatShell from './BeatShell';
 
 const EPITHETS = [
@@ -52,11 +53,9 @@ const BeatCard: React.FC<{
             display: 'flex', flexDirection: 'column', position: 'relative',
           }}
         >
-          <div style={{
-            width: 168, height: 158, alignSelf: 'flex-start',
-            borderRadius: '6% 64% 6% 64%',
-            background: `linear-gradient(135deg, ${c.accent.hover}, ${c.accent.primary} 70%, ${c.accent.pressed})`,
-          }} />
+          <div style={{ alignSelf: 'flex-start', marginLeft: -8, marginTop: -4 }}>
+            <Starburst size={158} from={c.accent.hover} to={c.accent.pressed} />
+          </div>
           <input
             value={name}
             onChange={(e) => setName(e.target.value.slice(0, 18))}

From 14d83bf499816c260fbd949a51a2ef3d17d5e45b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 11:20:05 -0700
Subject: [PATCH 027/248] [eric] theme: gradient engine (1-3 stops on the pad,
 canvas wash, gradient-tinted card emblem)

---
 backend/apps/settings/models.py               |   2 +
 frontend/src/app/Main.tsx                     |  10 +-
 .../OnboardingV3/beats/BeatCard.tsx           |   4 +-
 .../OnboardingV3/beats/BeatTheme.tsx          |  11 +-
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |   7 +-
 .../app/components/theme/AccentColorPad.tsx   | 141 +++++++++++++-----
 .../Dashboard/canvas/DashboardCanvas.tsx      |  14 ++
 frontend/src/app/pages/Settings/Settings.tsx  |  11 +-
 .../sections/general/GeneralInterface.tsx     |   6 +-
 frontend/src/shared/state/settingsSlice.ts    |   2 +
 frontend/src/shared/styles/ThemeContext.tsx   |  28 +++-
 11 files changed, 184 insertions(+), 52 deletions(-)

diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index 70ad7e70..9507599c 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -65,6 +65,8 @@ class AppSettings(BaseModel):
     onboarding_v3: Optional[str] = None
     # User-picked accent hex from the onboarding theme pad; None = stock accent.
     accent_color: Optional[str] = None
+    # Multi-stop gradient from the theme pad (2-3 hexes); washes the canvas.
+    accent_gradient: Optional[list[str]] = None
     personalized_greeting: Optional[str] = None
     personalized_starters: list["PersonalizedStarter"] = Field(default_factory=list)
     # Suppresses preflight suggestion modal entries the user dismissed; keyed by ToolDefinition.name, value ISO timestamp.
diff --git a/frontend/src/app/Main.tsx b/frontend/src/app/Main.tsx
index e2536068..127f92fd 100644
--- a/frontend/src/app/Main.tsx
+++ b/frontend/src/app/Main.tsx
@@ -203,9 +203,10 @@ const DeepLinkListener: React.FC<{ children: React.ReactNode }> = ({ children })
 const SettingsLoader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const dispatch = useAppDispatch();
   const { setMode: setThemeMode } = useThemeMode();
-  const { setAccent } = useThemeAccent();
+  const { setAccent, setGradient } = useThemeAccent();
   const theme = useAppSelector((s) => s.settings.data.theme);
   const accentColor = useAppSelector((s) => s.settings.data.accent_color);
+  const accentGradient = useAppSelector((s) => s.settings.data.accent_gradient);
   const loaded = useAppSelector((s) => s.settings.loaded);
   const allowExperimentalUpdates = useAppSelector((s) => s.settings.data.allow_experimental_updates);
   useEffect(() => {
@@ -263,6 +264,13 @@ const SettingsLoader: React.FC<{ children: React.ReactNode }> = ({ children }) =
     if (loaded) setAccent(accentColor ?? null);
   }, [loaded, accentColor, setAccent]);
 
+  // Object identity churns on every settings fetch, so key the effect on the serialized stops.
+  const gradientKey = JSON.stringify(accentGradient ?? null);
+  useEffect(() => {
+    if (loaded) setGradient(accentGradient ?? null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loaded, gradientKey, setGradient]);
+
   useEffect(() => {
     if (!loaded) return;
     (window as any).openswarm?.setAllowPrerelease?.(allowExperimentalUpdates);
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index b3653cef..219547d5 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { motion } from 'framer-motion';
+import { useThemeAccent } from '@/shared/styles/ThemeContext';
 import { Dices } from 'lucide-react';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import type { ProviderIdentity } from '../onboardingV3Api';
@@ -27,6 +28,7 @@ const BeatCard: React.FC<{
   onFinish: (name: string | null) => void;
   onBack: () => void;
 }> = ({ c, identity, onFinish, onBack }) => {
+  const { gradient } = useThemeAccent();
   const [name, setName] = useState(() => nameFromIdentity(identity));
   const seed = useMemo(() => Math.floor(Math.random() * EPITHETS.length), []);
   const [roll, setRoll] = useState(0);
@@ -54,7 +56,7 @@ const BeatCard: React.FC<{
           }}
         >
           <div style={{ alignSelf: 'flex-start', marginLeft: -8, marginTop: -4 }}>
-            <Starburst size={158} from={c.accent.hover} to={c.accent.pressed} />
+            <Starburst size={158} from={gradient?.[0] ?? c.accent.hover} to={gradient?.[gradient.length - 1] ?? c.accent.pressed} />
           </div>
           <input
             value={name}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
index 14886f8c..d88f57ee 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
@@ -12,14 +12,19 @@ const BeatTheme: React.FC<{
   onNext: () => void;
   onBack: () => void;
 }> = ({ c, onNext, onBack }) => {
-  const { accent, setAccent } = useThemeAccent();
+  const { accent, setAccent, gradient, setGradient } = useThemeAccent();
   const { mode, setMode } = useThemeMode();
+  const stops = gradient ?? (accent ? [accent] : []);
+  const onStops = (next: string[] | null) => {
+    setAccent(next?.[0] ?? null);
+    setGradient(next && next.length > 1 ? next : null);
+  };
 
   return (
     <BeatShell
       c={c}
       title="Make it yours."
-      body="Pick a color, any color. The whole app repaints as you drag; this is your home now."
+      body="Pick a color, or add a second dot for a gradient. The whole app repaints as you drag; this is your home now."
       nextLabel="Continue"
       onNext={onNext}
       onBack={onBack}
@@ -52,7 +57,7 @@ const BeatTheme: React.FC<{
             </button>
           ))}
         </div>
-        <AccentColorPad c={c} accent={accent} onPick={setAccent} height={210} />
+        <AccentColorPad c={c} stops={stops} onChange={onStops} height={210} />
       </motion.div>
     </BeatShell>
   );
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 41e762b1..80f107c3 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -11,7 +11,7 @@ import {
 // The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat, so by the reveal everything personal is already sitting in memory. Every stage fails soft; the flow never blocks on any of it.
 export function useOnboardingV3Pipeline() {
   const dispatch = useAppDispatch();
-  const { accent } = useThemeAccent();
+  const { accent, gradient } = useThemeAccent();
   const { mode } = useThemeMode();
   const [identity, setIdentity] = useState<ProviderIdentity[]>([]);
   const scanRef = useRef<Promise<ScanResult | null> | null>(null);
@@ -38,7 +38,7 @@ export function useOnboardingV3Pipeline() {
   const finish = useCallback(async (outcome: 'done' | 'skipped') => {
     if (outcome === 'skipped') {
       dispatch(setFlowActive(false));
-      dispatch(updateSettingsPatch({ onboarding_v3: 'skipped', accent_color: accent, theme: mode }));
+      dispatch(updateSettingsPatch({ onboarding_v3: 'skipped', accent_color: accent, accent_gradient: gradient, theme: mode }));
       return;
     }
     // Cap the wait so a slow aux call degrades to generic starters instead of a hung curtain.
@@ -51,6 +51,7 @@ export function useOnboardingV3Pipeline() {
       await dispatch(updateSettingsPatch({
         onboarding_v3: 'done',
         accent_color: accent,
+        accent_gradient: gradient,
         theme: mode,
         personalized_greeting: greeting,
         personalized_starters: starters,
@@ -58,7 +59,7 @@ export function useOnboardingV3Pipeline() {
     } catch {}
     dispatch(stageReveal({ greeting, starters, scanSummary: summarizeScan(scanResultRef.current) }));
     dispatch(setFlowActive(false));
-  }, [dispatch, accent, mode]);
+  }, [dispatch, accent, gradient, mode]);
 
   return { identity, kickIdentity, kickScan, kickPrep, finish };
 }
diff --git a/frontend/src/app/components/theme/AccentColorPad.tsx b/frontend/src/app/components/theme/AccentColorPad.tsx
index 43750d46..3a2e2919 100644
--- a/frontend/src/app/components/theme/AccentColorPad.tsx
+++ b/frontend/src/app/components/theme/AccentColorPad.tsx
@@ -1,47 +1,90 @@
 import React, { useCallback, useRef } from 'react';
+import { Minus, Plus } from 'lucide-react';
 import { hexToHsl, hslToHex } from '@/shared/styles/claudeTokens';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 
 export const ACCENT_PRESETS = ['#ae5630', '#b0453c', '#8e5cb8', '#3a6fc4', '#2e8f6f', '#b08b2e', '#c2588f', '#5c6470'];
+const MAX_STOPS = 3;
 
-// One control, two homes: the onboarding theme beat drives the live theme through it, and Settings > Interface edits the saved draft. Hue on x, lightness on y; the pad reports a hex and never knows who is listening.
+function stopToXY(hex: string): { x: number; y: number } | null {
+  const hsl = hexToHsl(hex);
+  if (!hsl) return null;
+  return { x: hsl.h, y: Math.min(1, Math.max(0, (0.62 - hsl.l) / 0.34)) };
+}
+
+// Arc's gradient engine, one control with two homes: 1-3 draggable stops on a hue/lightness field, + adds an analogous stop, - removes the newest. The first stop is the accent the tokens derive from; two or more stops become the canvas gradient wash. The pad reports stops and never knows who is listening.
 const AccentColorPad: React.FC<{
   c: ClaudeTokens;
-  accent: string | null;
-  onPick: (hex: string | null) => void;
+  stops: string[];
+  onChange: (stops: string[] | null) => void;
   height?: number;
-}> = ({ c, accent, onPick, height = 240 }) => {
+}> = ({ c, stops, onChange, height = 240 }) => {
   const padRef = useRef<HTMLDivElement | null>(null);
-  const draggingRef = useRef(false);
+  const grabbedRef = useRef<number | null>(null);
   const lastApplyRef = useRef(0);
 
-  const applyFromEvent = useCallback((clientX: number, clientY: number) => {
+  const pointToHex = useCallback((clientX: number, clientY: number): string | null => {
     const pad = padRef.current;
-    if (!pad) return;
-    // ~30ms throttle: a live listener re-derives tokens and re-renders the tree per apply, and pointermove fires far faster than paint needs.
-    const now = performance.now();
-    if (now - lastApplyRef.current < 30) return;
-    lastApplyRef.current = now;
+    if (!pad) return null;
     const rect = pad.getBoundingClientRect();
     const fx = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
     const fy = Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
-    onPick(hslToHex({ h: fx, s: 0.72, l: 0.62 - fy * 0.34 }));
-  }, [onPick]);
+    return hslToHex({ h: fx, s: 0.72, l: 0.62 - fy * 0.34 });
+  }, []);
+
+  const nearestStop = useCallback((clientX: number, clientY: number): number => {
+    const pad = padRef.current;
+    if (!pad || stops.length === 0) return 0;
+    const rect = pad.getBoundingClientRect();
+    let best = 0;
+    let bestDist = Infinity;
+    stops.forEach((hex, i) => {
+      const xy = stopToXY(hex);
+      if (!xy) return;
+      const dx = rect.left + xy.x * rect.width - clientX;
+      const dy = rect.top + xy.y * rect.height - clientY;
+      const d = dx * dx + dy * dy;
+      if (d < bestDist) { bestDist = d; best = i; }
+    });
+    return best;
+  }, [stops]);
+
+  const applyAt = useCallback((clientX: number, clientY: number) => {
+    // ~30ms throttle: a live listener re-derives tokens and re-renders the tree per apply.
+    const now = performance.now();
+    if (now - lastApplyRef.current < 30) return;
+    lastApplyRef.current = now;
+    const hex = pointToHex(clientX, clientY);
+    if (!hex) return;
+    const idx = grabbedRef.current ?? 0;
+    const next = stops.length === 0 ? [hex] : stops.map((s, i) => (i === idx ? hex : s));
+    onChange(next);
+  }, [pointToHex, stops, onChange]);
 
   const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    draggingRef.current = true;
+    grabbedRef.current = nearestStop(e.clientX, e.clientY);
     (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
     lastApplyRef.current = 0;
-    applyFromEvent(e.clientX, e.clientY);
-  }, [applyFromEvent]);
+    applyAt(e.clientX, e.clientY);
+  }, [nearestStop, applyAt]);
 
   const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (draggingRef.current) applyFromEvent(e.clientX, e.clientY);
-  }, [applyFromEvent]);
+    if (grabbedRef.current !== null) applyAt(e.clientX, e.clientY);
+  }, [applyAt]);
 
-  const onPointerUp = useCallback(() => { draggingRef.current = false; }, []);
+  const onPointerUp = useCallback(() => { grabbedRef.current = null; }, []);
 
-  const dot = accent ? hexToHsl(accent) : null;
+  const addStop = useCallback(() => {
+    if (stops.length >= MAX_STOPS) return;
+    const base = hexToHsl(stops[stops.length - 1] ?? ACCENT_PRESETS[0]);
+    const hue = ((base?.h ?? 0.08) + 0.11) % 1;
+    onChange([...stops, hslToHex({ h: hue, s: 0.72, l: base?.l ?? 0.45 })]);
+  }, [stops, onChange]);
+
+  const removeStop = useCallback(() => {
+    if (stops.length <= 1) return;
+    onChange(stops.slice(0, -1));
+  }, [stops, onChange]);
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }}>
@@ -56,31 +99,61 @@ const AccentColorPad: React.FC<{
           background: 'linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(0,0,0,0.45)), linear-gradient(to right, hsl(0,72%,55%), hsl(60,72%,55%), hsl(120,72%,55%), hsl(180,72%,55%), hsl(240,72%,55%), hsl(300,72%,55%), hsl(360,72%,55%))',
         }}
       >
-        {dot && (
-          <span style={{
-            position: 'absolute',
-            left: `${dot.h * 100}%`,
-            top: `${Math.min(100, Math.max(0, ((0.62 - dot.l) / 0.34) * 100))}%`,
-            transform: 'translate(-50%, -50%)',
-            width: 26, height: 26, borderRadius: 999, background: accent ?? 'transparent',
-            border: '3px solid #fff', boxShadow: '0 2px 8px rgba(0,0,0,0.35)', pointerEvents: 'none',
-          }} />
-        )}
+        {stops.map((hex, i) => {
+          const xy = stopToXY(hex);
+          if (!xy) return null;
+          return (
+            <span key={i} style={{
+              position: 'absolute', left: `${xy.x * 100}%`, top: `${xy.y * 100}%`,
+              transform: 'translate(-50%, -50%)',
+              width: i === 0 ? 28 : 22, height: i === 0 ? 28 : 22,
+              borderRadius: 999, background: hex,
+              border: '3px solid #fff', boxShadow: '0 2px 8px rgba(0,0,0,0.35)', pointerEvents: 'none',
+            }} />
+          );
+        })}
+        <div
+          onPointerDown={(e) => e.stopPropagation()}
+          style={{ position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 6 }}
+        >
+          <button
+            onClick={removeStop}
+            disabled={stops.length <= 1}
+            style={{
+              width: 26, height: 22, borderRadius: 7, border: 'none', cursor: stops.length > 1 ? 'pointer' : 'default',
+              background: 'rgba(20,20,19,0.55)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              opacity: stops.length > 1 ? 1 : 0.4,
+            }}
+          >
+            <Minus size={13} />
+          </button>
+          <button
+            onClick={addStop}
+            disabled={stops.length >= MAX_STOPS}
+            style={{
+              width: 26, height: 22, borderRadius: 7, border: 'none', cursor: stops.length < MAX_STOPS ? 'pointer' : 'default',
+              background: 'rgba(20,20,19,0.55)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              opacity: stops.length < MAX_STOPS ? 1 : 0.4,
+            }}
+          >
+            <Plus size={13} />
+          </button>
+        </div>
       </div>
       <div style={{ display: 'flex', alignItems: 'center', gap: 9, flexWrap: 'wrap' }}>
         {ACCENT_PRESETS.map((hex) => (
           <button
             key={hex}
-            onClick={() => onPick(hex)}
+            onClick={() => onChange([hex])}
             style={{
               width: 26, height: 26, borderRadius: 999, background: hex, cursor: 'pointer',
-              border: accent === hex ? '2.5px solid #fff' : '2.5px solid transparent',
-              boxShadow: accent === hex ? `0 0 0 2px ${hex}` : 'none', padding: 0,
+              border: stops[0] === hex && stops.length === 1 ? '2.5px solid #fff' : '2.5px solid transparent',
+              boxShadow: stops[0] === hex && stops.length === 1 ? `0 0 0 2px ${hex}` : 'none', padding: 0,
             }}
           />
         ))}
         <button
-          onClick={() => onPick(null)}
+          onClick={() => onChange(null)}
           style={{
             marginLeft: 'auto', border: 'none', background: 'transparent', padding: 0,
             color: '#8a8a86', fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 2bd9e73e..36f0f1ab 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -6,6 +6,7 @@ import DashboardCardLayer from './DashboardCardLayer';
 import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import { useThemeAccent } from '@/shared/styles/ThemeContext';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -153,6 +154,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   onTidy,
   onSearchPaletteClose,
 }) => {
+  const { gradient } = useThemeAccent();
   const dotSize = Math.max(1, 1.5 * canvas.zoom);
   const dotSpacing = 24 * canvas.zoom;
 
@@ -215,6 +217,18 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
                 : 'default',
         }}
       >
+        {/* Gradient wash: the user's theme-pad stops tint the canvas, Arc-window style; sits under the dot grid. */}
+        {gradient && gradient.length > 1 && (
+          <Box
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              pointerEvents: 'none',
+              background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}24 ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`,
+            }}
+          />
+        )}
+
         {/* Dot grid background */}
         <Box
           sx={{
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index 42c1e5a4..1516fe7e 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -58,7 +58,7 @@ const Settings: React.FC = () => {
   const loaded = useAppSelector((s) => s.settings.loaded);
   const modes = useAppSelector((s) => s.modes.items);
   const { setMode: setThemeMode } = useThemeMode();
-  const { setAccent } = useThemeAccent();
+  const { setAccent, setGradient } = useThemeAccent();
 
   const modesList = useMemo(() => Object.values(modes), [modes]);
 
@@ -169,11 +169,14 @@ const Settings: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form.theme]);
 
-  // Accent applies live too, same contract as theme: instant paint, debounced persist.
+  // Accent + gradient apply live too, same contract as theme: instant paint, debounced persist.
   useEffect(() => {
-    if (open && loaded) setAccent(form.accent_color ?? null);
+    if (open && loaded) {
+      setAccent(form.accent_color ?? null);
+      setGradient(form.accent_gradient ?? null);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [form.accent_color]);
+  }, [form.accent_color, form.accent_gradient]);
 
   useEffect(() => {
     if (!open || !loaded) return;
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index fe3582ad..12ca5ad9 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -69,12 +69,12 @@ const GeneralInterface: React.FC<{
       <Box sx={rowSx} {...settingSelectAttrs('accent_color', 'Accent color', 'Interface', 'The accent color used across the app.')}>
         <Typography sx={labelSx}>Accent color</Typography>
         <Typography sx={{ ...descSx, mb: 1.5 }}>
-          Pick any color; buttons, highlights, and glows follow it. Reset returns the stock accent.
+          Pick any color; buttons, highlights, and glows follow it. Add a second dot for a canvas gradient. Reset returns the stock accent.
         </Typography>
         <AccentColorPad
           c={c}
-          accent={form.accent_color ?? null}
-          onPick={(hex) => setForm({ ...form, accent_color: hex })}
+          stops={form.accent_gradient ?? (form.accent_color ? [form.accent_color] : [])}
+          onChange={(next) => setForm({ ...form, accent_color: next?.[0] ?? null, accent_gradient: next && next.length > 1 ? next : null })}
           height={120}
         />
       </Box>
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index 37242795..c7e481dd 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -80,6 +80,8 @@ export interface AppSettings {
   onboarding_v3?: string | null;
   /** User-picked accent hex from the onboarding theme pad; null = stock accent. */
   accent_color?: string | null;
+  /** Multi-stop gradient from the theme pad (2-3 hexes); washes the canvas. */
+  accent_gradient?: string[] | null;
   personalized_greeting?: string | null;
   personalized_starters?: PersonalizedStarter[];
 }
diff --git a/frontend/src/shared/styles/ThemeContext.tsx b/frontend/src/shared/styles/ThemeContext.tsx
index b4676fa3..e1279f1f 100644
--- a/frontend/src/shared/styles/ThemeContext.tsx
+++ b/frontend/src/shared/styles/ThemeContext.tsx
@@ -7,13 +7,24 @@ interface ThemeContextValue {
   mode: ThemeMode;
   tokens: ClaudeTokens;
   accent: string | null;
+  gradient: string[] | null;
   toggleMode: () => void;
   setMode: (mode: ThemeMode) => void;
   setAccent: (hex: string | null) => void;
+  setGradient: (stops: string[] | null) => void;
 }
 
 const STORAGE_KEY = 'self-swarm-theme-mode';
 const ACCENT_STORAGE_KEY = 'self-swarm-theme-accent';
+const GRADIENT_STORAGE_KEY = 'self-swarm-theme-gradient';
+
+function getInitialGradient(): string[] | null {
+  try {
+    const stored = JSON.parse(localStorage.getItem(GRADIENT_STORAGE_KEY) ?? 'null');
+    if (Array.isArray(stored) && stored.length > 1 && stored.every((v) => /^#[0-9a-f]{6}$/i.test(v))) return stored;
+  } catch {}
+  return null;
+}
 
 function getInitialAccent(): string | null {
   try {
@@ -46,14 +57,17 @@ const ThemeContext = createContext<ThemeContextValue>({
   mode: 'light',
   tokens: lightTokens,
   accent: null,
+  gradient: null,
   toggleMode: () => {},
   setMode: () => {},
   setAccent: () => {},
+  setGradient: () => {},
 });
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [mode, setModeState] = useState<ThemeMode>(getInitialMode);
   const [accent, setAccentState] = useState<string | null>(getInitialAccent);
+  const [gradient, setGradientState] = useState<string[] | null>(getInitialGradient);
   const firstMount = useRef(true);
 
   useEffect(() => {
@@ -70,14 +84,22 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     } catch {}
   }, [accent]);
 
+  useEffect(() => {
+    try {
+      if (gradient) localStorage.setItem(GRADIENT_STORAGE_KEY, JSON.stringify(gradient));
+      else localStorage.removeItem(GRADIENT_STORAGE_KEY);
+    } catch {}
+  }, [gradient]);
+
   const tokens = useMemo(() => withAccent(mode === 'dark' ? darkTokens : lightTokens, accent, mode), [mode, accent]);
 
   // Stable identities: SettingsLoader's "apply settings.theme" effect lists setMode in its deps, so a setter that changed every render made that effect re-fire on each toggle and re-assert the OLD persisted theme until the debounced save caught up: live theme snapped back for ~900ms = the switch flicker.
   const toggleMode = useCallback(() => setModeState((m) => (m === 'light' ? 'dark' : 'light')), []);
   const setMode = useCallback((m: ThemeMode) => setModeState(m), []);
   const setAccent = useCallback((hex: string | null) => setAccentState(hex), []);
+  const setGradient = useCallback((stops: string[] | null) => setGradientState(stops), []);
 
-  const value = useMemo(() => ({ mode, tokens, accent, toggleMode, setMode, setAccent }), [mode, tokens, accent, toggleMode, setMode, setAccent]);
+  const value = useMemo(() => ({ mode, tokens, accent, gradient, toggleMode, setMode, setAccent, setGradient }), [mode, tokens, accent, gradient, toggleMode, setMode, setAccent, setGradient]);
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
@@ -88,6 +110,6 @@ export const useThemeMode = () => {
   return { mode, toggleMode, setMode };
 };
 export const useThemeAccent = () => {
-  const { accent, setAccent } = useContext(ThemeContext);
-  return { accent, setAccent };
+  const { accent, setAccent, gradient, setGradient } = useContext(ThemeContext);
+  return { accent, setAccent, gradient, setGradient };
 };

From 410ba60b0e1591afda765cc4cc3575190fd539c5 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 11:50:33 -0700
Subject: [PATCH 028/248] [eric] onboarding: minimalism pass (arc radio rows,
 one-line copy, no icon spam, clean light stage)

---
 .../OnboardingV3/OnboardingV3Root.tsx         |  2 +-
 .../OnboardingV3/beats/BeatApps.tsx           |  4 +-
 .../OnboardingV3/beats/BeatCard.tsx           |  2 +-
 .../OnboardingV3/beats/BeatConnect.tsx        | 88 ++++++++++---------
 .../OnboardingV3/beats/BeatShell.tsx          |  3 +-
 .../OnboardingV3/beats/BeatTheme.tsx          |  4 +-
 .../pages/AgentChat/WelcomeQuickReplies.tsx   |  3 +-
 .../lifecycle/useOnboardingRevealSeed.ts      |  1 -
 8 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 7024b9ef..8ac12fed 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -183,7 +183,7 @@ const OnboardingV3Root: React.FC = () => {
               style={{ width: '100%', height: '100%' }}
             >
               {beat === 'welcome' && <IntroBeat c={c} line="Welcome." onNext={() => setBeat('newos')} />}
-              {beat === 'newos' && <IntroBeat c={c} line="This is your new OS." sub="A canvas where AI agents do real work for you." onNext={() => setBeat('connect')} />}
+              {beat === 'newos' && <IntroBeat c={c} line="This is your new OS." onNext={() => setBeat('connect')} />}
               {beat === 'connect' && (
                 <BeatConnect
                   c={c}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
index 7024836e..079d6d7c 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
@@ -28,8 +28,8 @@ const BeatApps: React.FC<{
     <BeatShell
       c={c}
       title="Choose the apps you live in."
-      body="I'll shape your starting canvas around them, and I can connect to them later so your agents work where you already do."
-      nextLabel={picks.length > 0 ? 'Continue' : 'Skip for now'}
+      body="I'll shape your starting canvas around them."
+      nextLabel={picks.length > 0 ? 'Next' : 'Skip for now'}
       onNext={onNext}
       onBack={onBack}
     >
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index 219547d5..df405342 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -39,7 +39,7 @@ const BeatCard: React.FC<{
     <BeatShell
       c={c}
       title={name ? `Welcome to OpenSwarm, ${name}.` : 'Welcome to OpenSwarm.'}
-      body="Here's your Swarm Card. And with that, your canvas is ready."
+      body="Here's your Swarm Card. Show it off or keep it to yourself."
       nextLabel="Get started"
       onNext={() => onFinish(name.trim() || null)}
       onBack={onBack}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index d64d2489..6efa91e5 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
-import { Check } from 'lucide-react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE } from '@/shared/config';
 import { fetchModels } from '@/shared/state/modelsSlice';
@@ -13,7 +12,7 @@ import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import type { ProviderIdentity } from '../onboardingV3Api';
 import BeatShell from './BeatShell';
 
-// The single ask of the whole flow. Reuses the proven Settings connect flow verbatim; the scan disclosure lives here as one honest line with an opt-out, and the scan runs during the OAuth wait.
+// The single ask of the whole flow, staged as Arc's import list: radio rows, no filler copy. Reuses the proven Settings connect flow verbatim; the scan disclosure is one quiet line, and the scan runs during the OAuth wait.
 const BeatConnect: React.FC<{
   c: ClaudeTokens;
   identity: ProviderIdentity[];
@@ -82,61 +81,64 @@ const BeatConnect: React.FC<{
     <BeatShell
       c={c}
       title="Connect your AI."
-      body="Use the subscription you already pay for. OpenSwarm runs on your own Claude, ChatGPT, or Gemini account, right from this Mac."
-      nextLabel={connected ? 'Continue' : 'Continue without connecting'}
+      body="Use the subscription you already pay for."
+      nextLabel="Continue"
       onNext={onNext}
       onBack={onBack}
     >
-      <div style={{ width: 'min(460px, 100%)', display: 'flex', flexDirection: 'column', gap: 12 }}>
-        {SUBSCRIPTION_PROVIDERS.map((p, i) => (
-          <motion.button
-            key={p.id}
-            onClick={() => !connected && handleConnect(p.id)}
-            initial={{ opacity: 0, y: 14 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px', textAlign: 'left',
-              borderRadius: c.radius.md, border: `1px solid ${c.border.medium}`, background: c.bg.surface,
-              cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit',
-              boxShadow: c.shadow.sm,
-            }}
-          >
-            <span style={{ width: 12, height: 12, borderRadius: 999, background: p.color, flexShrink: 0 }} />
-            <span style={{ flex: 1, minWidth: 0 }}>
-              <span style={{ display: 'block', fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>{p.name}</span>
-              <span style={{ display: 'block', fontSize: '0.82rem', color: c.text.tertiary }}>{p.desc}</span>
-            </span>
-            {connecting === p.id && !connected && <span style={{ fontSize: '0.8rem', color: c.text.tertiary }}>waiting for sign-in...</span>}
-            {connected && connecting === p.id && <Check size={18} color={c.status.success} />}
-          </motion.button>
-        ))}
+      <div style={{ width: 'min(440px, 100%)', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {SUBSCRIPTION_PROVIDERS.map((p, i) => {
+          const isThis = connecting === p.id;
+          const filled = connected && isThis;
+          return (
+            <motion.button
+              key={p.id}
+              onClick={() => !connected && handleConnect(p.id)}
+              initial={{ opacity: 0, y: 14 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 14, padding: '13px 14px 13px 16px', textAlign: 'left',
+                borderRadius: c.radius.md, border: `1px solid ${filled ? c.accent.primary : c.border.medium}`,
+                background: c.bg.surface, cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit',
+                boxShadow: c.shadow.sm,
+              }}
+            >
+              <span style={{
+                width: 18, height: 18, borderRadius: 999, flexShrink: 0, boxSizing: 'border-box',
+                border: `2px solid ${filled ? c.accent.primary : c.border.strong}`,
+                background: filled ? c.accent.primary : 'transparent',
+                boxShadow: filled ? `inset 0 0 0 3px ${c.bg.surface}` : 'none',
+              }} />
+              <span style={{ flex: 1, fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>
+                {p.name}
+                {isThis && !connected && <span style={{ marginLeft: 10, fontSize: '0.8rem', fontWeight: 400, color: c.text.tertiary }}>waiting for sign-in...</span>}
+              </span>
+              <span style={{
+                width: 36, height: 36, borderRadius: 9, flexShrink: 0, background: `${p.color}26`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}>
+                <span style={{ width: 13, height: 13, borderRadius: 999, background: p.color }} />
+              </span>
+            </motion.button>
+          );
+        })}
         {userCode && !connected && (
-          <div style={{ textAlign: 'center', padding: '10px 0', fontSize: '0.9rem', color: c.text.secondary }}>
+          <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.9rem', color: c.text.secondary }}>
             Your code: <strong style={{ fontFamily: c.font.mono, letterSpacing: '0.08em' }}>{userCode}</strong>
           </div>
         )}
         {connected && (
-          <motion.div
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-            style={{
-              padding: '12px 16px', borderRadius: c.radius.md, background: c.status.successBg,
-              color: c.status.success, fontSize: '0.9rem', fontWeight: 500,
-            }}
-          >
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ padding: '4px 2px', fontSize: '0.9rem', fontWeight: 500, color: c.status.success }}>
             Connected{connectedIdentity?.email ? ` as ${connectedIdentity.email}` : ''}
             {connectedIdentity?.plan ? ` · ${connectedIdentity.label} ${connectedIdentity.plan}` : ''}
           </motion.div>
         )}
-        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 6, cursor: 'pointer', fontSize: '0.8rem', color: c.text.tertiary, lineHeight: 1.5 }}>
+        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 8, cursor: 'pointer', fontSize: '0.82rem', color: c.text.tertiary, lineHeight: 1.5 }}>
           <input type="checkbox" checked={scanConsent} onChange={(e) => setScanConsent(e.target.checked)} style={{ marginTop: 2 }} />
-          <span>
-            While you sign in, take a quick local look around (app names and folder counts only) to personalize my suggestions.
-            Nothing is stored or sent anywhere except to your own AI.
-          </span>
+          <span>Take a quick local look around to personalize my setup. Nothing leaves this Mac.</span>
         </label>
-        <div style={{ display: 'flex', gap: 18, marginTop: 4 }}>
+        <div style={{ display: 'flex', gap: 18, marginTop: 2 }}>
           <button onClick={() => setShowKeys(!showKeys)} style={{ border: 'none', background: 'transparent', padding: 0, color: c.text.ghost, fontSize: '0.82rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline' }}>
             Use an API key instead
           </button>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
index c1277924..1d78e611 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -44,7 +44,7 @@ const BeatShell: React.FC<{
           background: c.bg.inverse, color: c.text.inverse, clipPath: ZIGZAG_CLIP,
         }}
       >
-        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.16, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
+        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.1, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
         {onBack && (
           <motion.button
             {...enter(0.05)}
@@ -89,7 +89,6 @@ const BeatShell: React.FC<{
           padding: 36, boxSizing: 'border-box', overflow: 'auto',
         }}
       >
-        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.07, pointerEvents: 'none' }} />
         <div style={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {children}
         </div>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
index d88f57ee..d786f17e 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
@@ -24,8 +24,8 @@ const BeatTheme: React.FC<{
     <BeatShell
       c={c}
       title="Make it yours."
-      body="Pick a color, or add a second dot for a gradient. The whole app repaints as you drag; this is your home now."
-      nextLabel="Continue"
+      body="The whole app repaints as you drag. Add a second dot for a gradient."
+      nextLabel="Next"
       onNext={onNext}
       onBack={onBack}
     >
diff --git a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
index c7216aee..1288820b 100644
--- a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+++ b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ArrowLeft, CalendarClock, Check, Sparkles } from 'lucide-react';
+import { ArrowLeft, CalendarClock, Check } from 'lucide-react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { createWorkflow } from '@/shared/state/workflowsSlice';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
@@ -87,7 +87,6 @@ const WelcomeQuickReplies: React.FC<{
                     cursor: 'pointer', fontFamily: 'inherit',
                   }}
                 >
-                  <Sparkles size={14} color={c.accent.primary} style={{ flexShrink: 0 }} />
                   {s.title}
                 </motion.button>
               ))}
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index 6a086085..1f3c137d 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -34,7 +34,6 @@ export function useOnboardingRevealSeed({ isActive, canvasEmpty, viewportRef, ca
         const lines: string[] = ['While you were setting up, I got some ideas ready.'];
         if (scanSummary) lines.push(`Spotted on this Mac: ${scanSummary}.`);
         if (starters.length > 0) lines.push(`Ready to run:\n${starters.map((s) => `- ${s.title}`).join('\n')}`);
-        lines.push('Pick one in the chat, or just type what you need.');
         dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + 48, y: cy - 140, color: 'yellow', content: lines.join('\n\n') }));
       }
       createWelcomeDraft();

From a771280fa932560c25e5404e1acfc040205a5ca7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 13:07:45 -0700
Subject: [PATCH 029/248] [eric] onboarding: small-detail pass (themed
 checkbox, chunky torn edge, themed stage, real traffic lights, crossfade
 transitions)

---
 .../components/OnboardingV3/OnboardingV3Root.tsx  | 12 ++++++------
 .../components/OnboardingV3/beats/BeatApps.tsx    |  4 ++--
 .../components/OnboardingV3/beats/BeatConnect.tsx | 15 +++++++++++++--
 .../components/OnboardingV3/beats/BeatShell.tsx   |  9 ++++++++-
 .../pages/Dashboard/canvas/DashboardCanvas.tsx    |  2 +-
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 8ac12fed..476cf582 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -55,7 +55,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
   <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: c.bg.inverse, overflow: 'hidden' }}>
     <motion.div
       initial={{ scale: 0.35, opacity: 0, x: 0, y: 0 }}
-      animate={{ scale: [0.35, 1, 1.06, 1], opacity: [0, 0.55, 0.5, 0.55], x: [0, 0, 22, 0], y: [0, 0, -14, 0] }}
+      animate={{ scale: [0.35, 1, 1.06, 1], opacity: [0, 0.62, 0.56, 0.62], x: [0, 0, 22, 0], y: [0, 0, -14, 0] }}
       transition={{ duration: 9, times: [0, 0.16, 0.6, 1], ease: 'easeInOut' }}
       style={{
         position: 'absolute', width: 560, height: 560, borderRadius: 999,
@@ -173,14 +173,14 @@ const OnboardingV3Root: React.FC = () => {
             background: c.bg.page,
           }}
         >
-          <AnimatePresence mode="wait">
+          <AnimatePresence initial={false}>
             <motion.div
               key={beat}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.32 }}
-              style={{ width: '100%', height: '100%' }}
+              transition={{ duration: 0.35, ease: 'easeInOut' }}
+              style={{ position: 'absolute', inset: 0 }}
             >
               {beat === 'welcome' && <IntroBeat c={c} line="Welcome." onNext={() => setBeat('newos')} />}
               {beat === 'newos' && <IntroBeat c={c} line="This is your new OS." onNext={() => setBeat('connect')} />}
@@ -206,8 +206,8 @@ const OnboardingV3Root: React.FC = () => {
             transition={{ duration: 0.3 }}
             style={{ position: 'absolute', top: 13, left: 14, display: 'flex', gap: 7, pointerEvents: 'none' }}
           >
-            {[0, 1, 2].map((i) => (
-              <span key={i} style={{ width: 11, height: 11, borderRadius: 999, background: 'rgba(255,255,255,0.22)' }} />
+            {['#FF5F57', '#FEBC2E', '#28C840'].map((dot) => (
+              <span key={dot} style={{ width: 11, height: 11, borderRadius: 999, background: dot, opacity: 0.9 }} />
             ))}
           </motion.div>
           {finishing && (
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
index 079d6d7c..408f085f 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
@@ -43,8 +43,8 @@ const BeatApps: React.FC<{
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 12px', borderBottom: `1px solid ${c.border.subtle}`, background: c.bg.elevated }}>
-          {[0, 1, 2].map((i) => (
-            <span key={i} style={{ width: 10, height: 10, borderRadius: 999, background: c.border.strong }} />
+          {['#FF5F57', '#FEBC2E', '#28C840'].map((dot) => (
+            <span key={dot} style={{ width: 10, height: 10, borderRadius: 999, background: dot, opacity: 0.85 }} />
           ))}
           <span style={{ marginLeft: 8, fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
         </div>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index 6efa91e5..8027a924 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
+import { Check } from 'lucide-react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE } from '@/shared/config';
 import { fetchModels } from '@/shared/state/modelsSlice';
@@ -101,7 +102,6 @@ const BeatConnect: React.FC<{
                 display: 'flex', alignItems: 'center', gap: 14, padding: '13px 14px 13px 16px', textAlign: 'left',
                 borderRadius: c.radius.md, border: `1px solid ${filled ? c.accent.primary : c.border.medium}`,
                 background: c.bg.surface, cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit',
-                boxShadow: c.shadow.sm,
               }}
             >
               <span style={{
@@ -135,7 +135,18 @@ const BeatConnect: React.FC<{
           </motion.div>
         )}
         <label style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 8, cursor: 'pointer', fontSize: '0.82rem', color: c.text.tertiary, lineHeight: 1.5 }}>
-          <input type="checkbox" checked={scanConsent} onChange={(e) => setScanConsent(e.target.checked)} style={{ marginTop: 2 }} />
+          <button
+            onClick={(e) => { e.preventDefault(); setScanConsent(!scanConsent); }}
+            style={{
+              width: 16, height: 16, marginTop: 2, borderRadius: 5, padding: 0, cursor: 'pointer', flexShrink: 0,
+              border: `1.5px solid ${scanConsent ? c.accent.primary : c.border.strong}`,
+              background: scanConsent ? c.accent.primary : 'transparent',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              transition: 'background 120ms ease, border-color 120ms ease',
+            }}
+          >
+            {scanConsent && <Check size={11} color="#fff" strokeWidth={3.2} />}
+          </button>
           <span>Take a quick local look around to personalize my setup. Nothing leaves this Mac.</span>
         </label>
         <div style={{ display: 'flex', gap: 18, marginTop: 2 }}>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
index 1d78e611..5895ad45 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { ArrowLeft } from 'lucide-react';
+import { useThemeAccent } from '@/shared/styles/ThemeContext';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 
 // Film grain as a data URI so the CSP never phones out; opacity keeps it a texture, not noise.
 export const GRAIN_URL = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")";
 
 // Arc's torn seam: the dark copy panel ends in a zigzag bite instead of a straight border.
-const ZIGZAG_CLIP = `polygon(0 0, 100% 0, ${Array.from({ length: 50 }, (unused, i) => `calc(100% - 6px) ${i * 2 + 1}%, 100% ${i * 2 + 2}%`).join(', ')}, 0 100%)`;
+const ZIGZAG_CLIP = `polygon(0 0, 100% 0, ${Array.from({ length: 30 }, (unused, i) => `calc(100% - 12px) ${i * 3.33 + 1.66}%, 100% ${i * 3.33 + 3.33}%`).join(', ')}, 0 100%)`;
 
 const SPRING = { type: 'spring' as const, stiffness: 260, damping: 26 };
 
@@ -22,6 +23,10 @@ const BeatShell: React.FC<{
   onBack?: () => void;
   children: React.ReactNode;
 }> = ({ c, title, body, nextLabel, nextDisabled, onNext, onBack, children }) => {
+  // Arc's post-theme screens wear the user's color everywhere; the stage drinks the picked stops (or accent) instead of staying flat paper.
+  const { accent, gradient } = useThemeAccent();
+  const stops = gradient ?? (accent ? [accent] : [c.accent.primary]);
+  const stageWash = `linear-gradient(115deg, ${stops.map((hex, i) => `${hex}2e ${stops.length > 1 ? (i / (stops.length - 1)) * 100 : 100}%`).join(', ')}), ${c.bg.secondary}`;
   // Zen steal: controls stay inert until the entrance lands so a double-click from the prior beat can't fire them.
   const [armed, setArmed] = useState(false);
   useEffect(() => {
@@ -87,8 +92,10 @@ const BeatShell: React.FC<{
         style={{
           position: 'relative', flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
           padding: 36, boxSizing: 'border-box', overflow: 'auto',
+          background: stageWash,
         }}
       >
+        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.08, pointerEvents: 'none' }} />
         <div style={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {children}
         </div>
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 36f0f1ab..fe02b730 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -224,7 +224,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
               position: 'absolute',
               inset: 0,
               pointerEvents: 'none',
-              background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}24 ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`,
+              background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}2b ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`,
             }}
           />
         )}

From 8f095505a0fdcf3b37124885cd90b9e734e3a9b9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 13:07:45 -0700
Subject: [PATCH 030/248] [eric] onboarding: reveal lands working
 (identity-profiled prep, first starter auto-runs as a live read-only audit)

---
 backend/apps/onboarding/models.py             |  1 +
 backend/apps/onboarding/prep.py               | 11 +++++---
 .../OnboardingV3/onboardingV3Api.ts           |  4 +--
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |  9 ++++---
 .../lifecycle/useOnboardingRevealSeed.ts      | 26 ++++++++++++++-----
 .../hooks/state/useDashboardController.ts     |  2 ++
 .../src/shared/state/onboardingV3Slice.ts     |  7 ++++-
 7 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index cd6019a2..756bd977 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -45,6 +45,7 @@ class PrepRequest(BaseModel):
 
     scan: Optional[ScanResult] = None
     picked_apps: List[str] = Field(default_factory=list)
+    identity: List[ProviderIdentity] = Field(default_factory=list)
 
 
 class PrepResponse(BaseModel):
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index b9a62905..c1f840c5 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -26,12 +26,15 @@ P_SYSTEM = (
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
     '{"greeting": string, "starters": [{"title": string, "prompt": string}]}. '
+    "First, silently infer a short profile of this user from the facts (developer or designer or student, work or "
+    "personal, from apps, folders, plan tier, and email domain); tune every task to that profile and do not output it. "
     "Exactly 4 starters. Each title is 2-5 words. Each prompt is a concrete, safe, immediately runnable task "
     "referencing the user's real folders, file counts, or picked apps when possible; never invent facts, never "
-    "propose deleting anything without review. Make the FIRST starter a bigger multi-part task whose parts can "
-    "run in parallel (for example: research something on the web WHILE organizing a folder AND drafting a summary), "
-    "phrased as one natural request. Every starter must produce a tangible result the user can see (a sorted folder, "
-    "a report, a working page); never propose setup, documentation of preferences, or planning-only tasks. "
+    "propose deleting anything without review. The FIRST starter must be an audit sized for parallel sub-work "
+    "(inspect folders, cross-reference, produce one report); it may create ONE new report file but must never "
+    "modify or delete existing files, because it may be run automatically on the user's behalf. Every starter "
+    "must produce a tangible result the user can see (a sorted "
+    "folder, a report, a working page); never propose setup, documentation of preferences, or planning-only tasks. "
     "The greeting is one warm sentence that names 2-3 specific things "
     "found on the machine. Never use em-dashes or en-dashes anywhere. No markdown, no commentary, JSON only."
 )
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 03fe84f8..1cad9b47 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -48,12 +48,12 @@ export async function runScan(): Promise<ScanResult | null> {
   }
 }
 
-export async function runPrep(scan: ScanResult | null, pickedApps: string[]): Promise<PrepResponse | null> {
+export async function runPrep(scan: ScanResult | null, pickedApps: string[], identity: ProviderIdentity[]): Promise<PrepResponse | null> {
   try {
     const res = await fetch(`${API_BASE}/onboarding/prep`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ scan, picked_apps: pickedApps }),
+      body: JSON.stringify({ scan, picked_apps: pickedApps, identity }),
     });
     if (!res.ok) return null;
     const data = (await res.json()) as PrepResponse;
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 80f107c3..ad865e98 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -14,12 +14,13 @@ export function useOnboardingV3Pipeline() {
   const { accent, gradient } = useThemeAccent();
   const { mode } = useThemeMode();
   const [identity, setIdentity] = useState<ProviderIdentity[]>([]);
+  const identityRef = useRef<ProviderIdentity[]>([]);
   const scanRef = useRef<Promise<ScanResult | null> | null>(null);
   const prepRef = useRef<Promise<PrepResponse | null> | null>(null);
   const scanResultRef = useRef<ScanResult | null>(null);
 
   const kickIdentity = useCallback(() => {
-    fetchIdentity().then(setIdentity).catch(() => {});
+    fetchIdentity().then((ids) => { identityRef.current = ids; setIdentity(ids); }).catch(() => {});
   }, []);
 
   const kickScan = useCallback((consented: boolean) => {
@@ -32,7 +33,7 @@ export function useOnboardingV3Pipeline() {
   const kickPrep = useCallback((pickedApps: string[]) => {
     if (prepRef.current) return;
     const scanPromise = scanRef.current ?? Promise.resolve(null);
-    prepRef.current = scanPromise.then((scan) => runPrep(scan, pickedApps)).catch(() => null);
+    prepRef.current = scanPromise.then((scan) => runPrep(scan, pickedApps, identityRef.current)).catch(() => null);
   }, []);
 
   const finish = useCallback(async (outcome: 'done' | 'skipped') => {
@@ -46,6 +47,8 @@ export function useOnboardingV3Pipeline() {
     const prep = await Promise.race([prepRef.current ?? Promise.resolve(null), timeout]);
     const greeting = prep?.greeting?.trim() || null;
     const starters = prep?.starters ?? [];
+    // Auto-run only a REAL prep result's first starter (the prompt contract makes it a read-only audit); the static fallback never auto-runs.
+    const autoPrompt = greeting && starters.length > 0 ? starters[0].prompt : null;
     // Await the PATCH so personalized_greeting/starters are IN settings before the reveal seeds the welcome chat; the greeting stream snapshots settings at mount.
     try {
       await dispatch(updateSettingsPatch({
@@ -57,7 +60,7 @@ export function useOnboardingV3Pipeline() {
         personalized_starters: starters,
       })).unwrap();
     } catch {}
-    dispatch(stageReveal({ greeting, starters, scanSummary: summarizeScan(scanResultRef.current) }));
+    dispatch(stageReveal({ greeting, starters, scanSummary: summarizeScan(scanResultRef.current), autoPrompt }));
     dispatch(setFlowActive(false));
   }, [dispatch, accent, gradient, mode]);
 
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index 1f3c137d..518d7c37 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -1,24 +1,30 @@
 import { useEffect, useRef, type RefObject } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { addNote, DEFAULT_CARD_W } from '@/shared/state/dashboardLayoutSlice';
+import { addNote, placeCard, DEFAULT_CARD_W, DEFAULT_CARD_H } from '@/shared/state/dashboardLayoutSlice';
+import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from '@/shared/state/agentsSlice';
+import { hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { clearReveal } from '@/shared/state/onboardingV3Slice';
 
 interface Args {
   isActive: boolean;
   canvasEmpty: boolean;
+  dashboardId: string;
+  expandedSessionIds: string[];
   viewportRef: RefObject<HTMLDivElement | null>;
   canvasStateRef: RefObject<{ panX: number; panY: number; zoom: number }>;
   createWelcomeDraft: () => void;
 }
 
-// The reveal: onboarding v3 finished behind the curtain, so dress the canvas BEFORE the overlay's exit fade lands. Welcome chat (with personalized greeting + chips) at center, a "while you were setting up" note docked beside it. Everything seeded is a draft or a note; nothing runs until the user clicks.
-export function useOnboardingRevealSeed({ isActive, canvasEmpty, viewportRef, canvasStateRef, createWelcomeDraft }: Args): void {
+// The reveal: onboarding v3 finished behind the curtain, so dress the canvas BEFORE the overlay's exit fade lands. Welcome chat (personalized greeting + chips) at center, the read-only audit RUNNING as a real agent on the left (only on a real connected sub; the fragile free-trial pool never carries the demo), and a "while you were setting up" note on the right. Nothing seeded can mutate the user's files.
+export function useOnboardingRevealSeed({ isActive, canvasEmpty, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft }: Args): void {
   const dispatch = useAppDispatch();
   const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
-  const greeting = useAppSelector((s) => s.onboardingV3.greeting);
   const starters = useAppSelector((s) => s.onboardingV3.starters);
   const scanSummary = useAppSelector((s) => s.onboardingV3.scanSummary);
+  const autoPrompt = useAppSelector((s) => s.onboardingV3.autoPrompt);
   const settingsLoaded = useAppSelector((s) => s.settings.loaded);
+  const model = useAppSelector((s) => s.settings.data.default_model);
+  const connected = useAppSelector((s) => hasModelConnected(s));
   const seededRef = useRef(false);
 
   useEffect(() => {
@@ -27,18 +33,26 @@ export function useOnboardingRevealSeed({ isActive, canvasEmpty, viewportRef, ca
     try {
       const vp = viewportRef.current;
       const cs = canvasStateRef.current;
+      const autoRun = !!autoPrompt && connected;
       if (vp && cs) {
         const vr = vp.getBoundingClientRect();
         const cx = (vr.width / 2 - cs.panX) / cs.zoom;
         const cy = (vr.height / 2 - cs.panY) / cs.zoom;
         const lines: string[] = ['While you were setting up, I got some ideas ready.'];
         if (scanSummary) lines.push(`Spotted on this Mac: ${scanSummary}.`);
-        if (starters.length > 0) lines.push(`Ready to run:\n${starters.map((s) => `- ${s.title}`).join('\n')}`);
+        if (autoRun && starters.length > 0) lines.push(`Already running: ${starters[0].title}.`);
+        if (starters.length > 0) lines.push(`Ready to run:\n${starters.slice(autoRun ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
         dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + 48, y: cy - 140, color: 'yellow', content: lines.join('\n\n') }));
+        if (autoRun) {
+          const config: AgentConfig = { name: starters[0]?.title || 'First look', model, mode: 'agent', dashboard_id: dashboardId };
+          const draftId = dispatch(createDraftSession({ mode: 'agent', model, dashboardId, setActive: false })).payload.draftId;
+          dispatch(placeCard({ sessionId: draftId, x: cx - DEFAULT_CARD_W * 1.5 - 48, y: cy - DEFAULT_CARD_H / 2, width: DEFAULT_CARD_W, height: DEFAULT_CARD_H, expandedSessionIds, exact: true }));
+          void dispatch(launchAndSendFirstMessage({ draftId, config, prompt: autoPrompt, mode: 'agent', model }));
+        }
       }
       createWelcomeDraft();
     } finally {
       dispatch(clearReveal());
     }
-  }, [revealPending, isActive, canvasEmpty, settingsLoaded, greeting, starters, scanSummary, viewportRef, canvasStateRef, createWelcomeDraft, dispatch]);
+  }, [revealPending, isActive, canvasEmpty, settingsLoaded, starters, scanSummary, autoPrompt, connected, model, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, dispatch]);
 }
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index c523af08..a0e1eaae 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -168,6 +168,8 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
   useOnboardingRevealSeed({
     isActive,
     canvasEmpty,
+    dashboardId,
+    expandedSessionIds,
     viewportRef: canvas.viewportRef,
     canvasStateRef,
     createWelcomeDraft,
diff --git a/frontend/src/shared/state/onboardingV3Slice.ts b/frontend/src/shared/state/onboardingV3Slice.ts
index 306ca3bb..8bdf1918 100644
--- a/frontend/src/shared/state/onboardingV3Slice.ts
+++ b/frontend/src/shared/state/onboardingV3Slice.ts
@@ -11,6 +11,8 @@ export interface OnboardingV3State {
   greeting: string | null;
   starters: PersonalizedStarter[];
   scanSummary: string | null;
+  /** Read-only audit prompt to launch as a live agent at reveal; null = chips only. */
+  autoPrompt: string | null;
 }
 
 const initialState: OnboardingV3State = {
@@ -19,6 +21,7 @@ const initialState: OnboardingV3State = {
   greeting: null,
   starters: [],
   scanSummary: null,
+  autoPrompt: null,
 };
 
 const onboardingV3Slice = createSlice({
@@ -28,15 +31,17 @@ const onboardingV3Slice = createSlice({
     setFlowActive(state, action: PayloadAction<boolean>) {
       state.flowActive = action.payload;
     },
-    stageReveal(state, action: PayloadAction<{ greeting: string | null; starters: PersonalizedStarter[]; scanSummary: string | null }>) {
+    stageReveal(state, action: PayloadAction<{ greeting: string | null; starters: PersonalizedStarter[]; scanSummary: string | null; autoPrompt: string | null }>) {
       state.revealPending = true;
       state.greeting = action.payload.greeting;
       state.starters = action.payload.starters;
       state.scanSummary = action.payload.scanSummary;
+      state.autoPrompt = action.payload.autoPrompt;
     },
     clearReveal(state) {
       state.revealPending = false;
       state.scanSummary = null;
+      state.autoPrompt = null;
     },
   },
 });

From d7904595803c691755a0d43516a8b4d64478319c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 13:30:57 -0700
Subject: [PATCH 031/248] [eric] onboarding: prep designs a personal app; audit
 + app build launch mid-flow; keep/discard toast at reveal

---
 backend/apps/onboarding/models.py             |  2 +
 backend/apps/onboarding/prep.py               | 12 ++-
 .../OnboardingV3/onboardingV3Api.ts           |  2 +
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 42 +++++++++--
 .../app/components/nudges/PrepKeepToast.tsx   | 75 +++++++++++++++++++
 .../Dashboard/canvas/DashboardOverlays.tsx    |  4 +
 .../lifecycle/useOnboardingRevealSeed.ts      | 42 ++++++-----
 .../hooks/state/useDashboardController.ts     |  1 -
 .../src/shared/state/onboardingV3Slice.ts     | 17 ++++-
 9 files changed, 167 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/app/components/nudges/PrepKeepToast.tsx

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 756bd977..5470a561 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -53,3 +53,5 @@ class PrepResponse(BaseModel):
 
     greeting: str = ""
     starters: List[PersonalizedStarter] = Field(default_factory=list)
+    app_title: str = ""
+    app_prompt: str = ""
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index c1f840c5..b2329e54 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -25,7 +25,7 @@ P_SYSTEM = (
     "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
-    '{"greeting": string, "starters": [{"title": string, "prompt": string}]}. '
+    '{"greeting": string, "starters": [{"title": string, "prompt": string}], "app_title": string, "app_prompt": string}. '
     "First, silently infer a short profile of this user from the facts (developer or designer or student, work or "
     "personal, from apps, folders, plan tier, and email domain); tune every task to that profile and do not output it. "
     "Exactly 4 starters. Each title is 2-5 words. Each prompt is a concrete, safe, immediately runnable task "
@@ -35,6 +35,9 @@ P_SYSTEM = (
     "modify or delete existing files, because it may be run automatically on the user's behalf. Every starter "
     "must produce a tangible result the user can see (a sorted "
     "folder, a report, a working page); never propose setup, documentation of preferences, or planning-only tasks. "
+    "Also design ONE small personal app for this user: app_title is 2-4 words, app_prompt starts with 'Build me' and "
+    "describes a small, immediately useful single-page app tailored to the profile (their files, habits, or picked "
+    "apps), self-contained with no accounts or API keys. "
     "The greeting is one warm sentence that names 2-3 specific things "
     "found on the machine. Never use em-dashes or en-dashes anywhere. No markdown, no commentary, JSON only."
 )
@@ -54,7 +57,12 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
         ]
         if not starters:
             return None
-        return PrepResponse(greeting=str(data.get("greeting", "")).strip(), starters=starters[:4])
+        return PrepResponse(
+            greeting=str(data.get("greeting", "")).strip(),
+            starters=starters[:4],
+            app_title=str(data.get("app_title", "")).strip(),
+            app_prompt=str(data.get("app_prompt", "")).strip(),
+        )
     except Exception:
         return None
 
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 1cad9b47..39e3b4a4 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -25,6 +25,8 @@ export interface ScanResult {
 export interface PrepResponse {
   greeting: string;
   starters: PersonalizedStarter[];
+  app_title: string;
+  app_prompt: string;
 }
 
 export async function fetchIdentity(): Promise<ProviderIdentity[]> {
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index ad865e98..84f3280c 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -1,14 +1,17 @@
 import { useCallback, useRef, useState } from 'react';
-import { useAppDispatch } from '@/shared/hooks';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { updateSettingsPatch } from '@/shared/state/settingsSlice';
-import { setFlowActive, stageReveal } from '@/shared/state/onboardingV3Slice';
+import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from '@/shared/state/agentsSlice';
+import { hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
+import { getLastDashboardId } from '@/shared/lastDashboardId';
+import { setFlowActive, stageReveal, addPreppedJob } from '@/shared/state/onboardingV3Slice';
 import { useThemeAccent, useThemeMode } from '@/shared/styles/ThemeContext';
 import {
   fetchIdentity, runPrep, runScan, summarizeScan,
   type PrepResponse, type ProviderIdentity, type ScanResult,
 } from './onboardingV3Api';
 
-// The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat, so by the reveal everything personal is already sitting in memory. Every stage fails soft; the flow never blocks on any of it.
+// The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat, and the moment prep resolves the audit AND the app build launch as REAL background agents, so the curtain lifts on work already in motion. Every stage fails soft; the flow never blocks on any of it.
 export function useOnboardingV3Pipeline() {
   const dispatch = useAppDispatch();
   const { accent, gradient } = useThemeAccent();
@@ -18,6 +21,11 @@ export function useOnboardingV3Pipeline() {
   const scanRef = useRef<Promise<ScanResult | null> | null>(null);
   const prepRef = useRef<Promise<PrepResponse | null> | null>(null);
   const scanResultRef = useRef<ScanResult | null>(null);
+  const connected = useAppSelector((s) => hasModelConnected(s));
+  const model = useAppSelector((s) => s.settings.data.default_model);
+  const launchCtxRef = useRef({ connected: false, model: 'sonnet' });
+  launchCtxRef.current = { connected, model };
+  const launchedRef = useRef(false);
 
   const kickIdentity = useCallback(() => {
     fetchIdentity().then((ids) => { identityRef.current = ids; setIdentity(ids); }).catch(() => {});
@@ -30,11 +38,33 @@ export function useOnboardingV3Pipeline() {
       : Promise.resolve(null);
   }, []);
 
+  // Fire one real background agent; the session exists in redux without a card until the reveal composes the canvas.
+  const launchJob = useCallback((title: string, prompt: string, kind: 'audit' | 'app') => {
+    const { model: liveModel } = launchCtxRef.current;
+    const dashboardId = getLastDashboardId() ?? undefined;
+    const config: AgentConfig = { name: title, model: liveModel, mode: 'agent', dashboard_id: dashboardId };
+    const draftId = dispatch(createDraftSession({ mode: 'agent', model: liveModel, dashboardId: dashboardId ?? '', setActive: false })).payload.draftId;
+    void dispatch(launchAndSendFirstMessage({ draftId, config, prompt, mode: 'agent', model: liveModel }))
+      .then((action) => {
+        if (launchAndSendFirstMessage.fulfilled.match(action)) {
+          dispatch(addPreppedJob({ sessionId: action.payload.session.id, title, kind }));
+        }
+      })
+      .catch(() => {});
+  }, [dispatch]);
+
   const kickPrep = useCallback((pickedApps: string[]) => {
     if (prepRef.current) return;
     const scanPromise = scanRef.current ?? Promise.resolve(null);
     prepRef.current = scanPromise.then((scan) => runPrep(scan, pickedApps, identityRef.current)).catch(() => null);
-  }, []);
+    // Launch the prepped work MID-FLOW (theme/card beats cover the latency): audit + app build, gated to a real connected model so the fragile free trial never carries it.
+    void prepRef.current.then((prep) => {
+      if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
+      launchedRef.current = true;
+      if (prep.starters.length > 0) launchJob(prep.starters[0].title, prep.starters[0].prompt, 'audit');
+      if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app');
+    });
+  }, [launchJob]);
 
   const finish = useCallback(async (outcome: 'done' | 'skipped') => {
     if (outcome === 'skipped') {
@@ -47,8 +77,8 @@ export function useOnboardingV3Pipeline() {
     const prep = await Promise.race([prepRef.current ?? Promise.resolve(null), timeout]);
     const greeting = prep?.greeting?.trim() || null;
     const starters = prep?.starters ?? [];
-    // Auto-run only a REAL prep result's first starter (the prompt contract makes it a read-only audit); the static fallback never auto-runs.
-    const autoPrompt = greeting && starters.length > 0 ? starters[0].prompt : null;
+    // Jobs already launched mid-flow at prep-resolve; the reveal only composes the canvas.
+    const autoPrompt = null;
     // Await the PATCH so personalized_greeting/starters are IN settings before the reveal seeds the welcome chat; the greeting stream snapshots settings at mount.
     try {
       await dispatch(updateSettingsPatch({
diff --git a/frontend/src/app/components/nudges/PrepKeepToast.tsx b/frontend/src/app/components/nudges/PrepKeepToast.tsx
new file mode 100644
index 00000000..95bb1560
--- /dev/null
+++ b/frontend/src/app/components/nudges/PrepKeepToast.tsx
@@ -0,0 +1,75 @@
+import React, { useCallback, useState } from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { deleteSession } from '@/shared/state/agentsSlice';
+import { removeCard } from '@/shared/state/dashboardLayoutSlice';
+import { clearPrepped } from '@/shared/state/onboardingV3Slice';
+
+const RESOLVED_KEY = 'openswarm.prep-keep.v1';
+
+function alreadyResolved(): boolean {
+  try { return localStorage.getItem(RESOLVED_KEY) !== null; } catch { return false; }
+}
+
+// Accept-or-deny for the work onboarding started on the user's behalf: keep dismisses, discard stops and deletes the prepped sessions. One-shot per install; nothing the flow prepped is forced on anyone.
+const PrepKeepToast: React.FC = () => {
+  const c = useClaudeTokens();
+  const dispatch = useAppDispatch();
+  const [resolved, setResolved] = useState(alreadyResolved);
+  const prepped = useAppSelector((s) => s.onboardingV3.prepped);
+  const flowActive = useAppSelector((s) => s.onboardingV3.flowActive);
+  const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
+
+  const finish = useCallback(() => {
+    try { localStorage.setItem(RESOLVED_KEY, new Date().toISOString()); } catch {}
+    dispatch(clearPrepped());
+    setResolved(true);
+  }, [dispatch]);
+
+  const discard = useCallback(() => {
+    for (const job of prepped) {
+      dispatch(removeCard(job.sessionId));
+      void dispatch(deleteSession({ sessionId: job.sessionId }));
+    }
+    finish();
+  }, [prepped, dispatch, finish]);
+
+  const names = prepped.map((j) => j.title).join(' and ');
+
+  return (
+    <Snackbar
+      open={!resolved && !flowActive && !revealPending && prepped.length > 0}
+      autoHideDuration={null}
+      onClose={(event, reason) => { if (reason !== 'clickaway') finish(); }}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+    >
+      <Alert
+        icon={false}
+        severity="info"
+        sx={{
+          bgcolor: c.bg.surface,
+          color: c.text.primary,
+          border: `1px solid ${c.border.medium}`,
+          '& .MuiAlert-action': { alignItems: 'center', pt: 0 },
+        }}
+        action={
+          <>
+            <Button size="small" onClick={finish} sx={{ color: c.accent.primary, fontWeight: 700 }}>
+              Keep
+            </Button>
+            <Button size="small" onClick={discard} sx={{ color: c.text.tertiary }}>
+              Discard
+            </Button>
+          </>
+        }
+      >
+        {`I started ${names} while you set up. Keep going?`}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default PrepKeepToast;
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index 895c524f..12a4a32c 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -8,6 +8,7 @@ import WorkflowRunningToast from '@/app/pages/Workflows/WorkflowRunningToast';
 import MissedRunsToast from '@/app/pages/Workflows/MissedRunsToast';
 import ProviderHealthToast from '@/app/components/overlays/ProviderHealthToast';
 import ScheduleOfferToast from '@/app/components/nudges/ScheduleOfferToast';
+import PrepKeepToast from '@/app/components/nudges/PrepKeepToast';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -160,6 +161,9 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
 
       {/* One-shot dependency beat: first completed personalized starter offers to become a weekly job */}
       <ScheduleOfferToast dashboardId={dashboardId} />
+
+      {/* Accept-or-deny for the audit + app the flow started on the user's behalf */}
+      <PrepKeepToast />
     </>
   );
 };
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index 518d7c37..09e7ee6c 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -1,13 +1,10 @@
 import { useEffect, useRef, type RefObject } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { addNote, placeCard, DEFAULT_CARD_W, DEFAULT_CARD_H } from '@/shared/state/dashboardLayoutSlice';
-import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from '@/shared/state/agentsSlice';
-import { hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { clearReveal } from '@/shared/state/onboardingV3Slice';
 
 interface Args {
   isActive: boolean;
-  canvasEmpty: boolean;
   dashboardId: string;
   expandedSessionIds: string[];
   viewportRef: RefObject<HTMLDivElement | null>;
@@ -15,44 +12,49 @@ interface Args {
   createWelcomeDraft: () => void;
 }
 
-// The reveal: onboarding v3 finished behind the curtain, so dress the canvas BEFORE the overlay's exit fade lands. Welcome chat (personalized greeting + chips) at center, the read-only audit RUNNING as a real agent on the left (only on a real connected sub; the fragile free-trial pool never carries the demo), and a "while you were setting up" note on the right. Nothing seeded can mutate the user's files.
-export function useOnboardingRevealSeed({ isActive, canvasEmpty, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft }: Args): void {
+// The reveal: onboarding v3 finished behind the curtain and the prepped agents (audit + app build) have been running since mid-flow. Compose the canvas: welcome chat center, running jobs stacked left, the "while you were setting up" note right. The keep/discard toast owns the jobs' fate afterward.
+export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft }: Args): void {
   const dispatch = useAppDispatch();
   const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
   const starters = useAppSelector((s) => s.onboardingV3.starters);
   const scanSummary = useAppSelector((s) => s.onboardingV3.scanSummary);
-  const autoPrompt = useAppSelector((s) => s.onboardingV3.autoPrompt);
+  const prepped = useAppSelector((s) => s.onboardingV3.prepped);
   const settingsLoaded = useAppSelector((s) => s.settings.loaded);
-  const model = useAppSelector((s) => s.settings.data.default_model);
-  const connected = useAppSelector((s) => hasModelConnected(s));
   const seededRef = useRef(false);
 
   useEffect(() => {
-    if (!revealPending || seededRef.current || !isActive || !canvasEmpty || !settingsLoaded) return;
+    if (!revealPending || seededRef.current || !isActive || !settingsLoaded) return;
     seededRef.current = true;
     try {
       const vp = viewportRef.current;
       const cs = canvasStateRef.current;
-      const autoRun = !!autoPrompt && connected;
       if (vp && cs) {
         const vr = vp.getBoundingClientRect();
         const cx = (vr.width / 2 - cs.panX) / cs.zoom;
         const cy = (vr.height / 2 - cs.panY) / cs.zoom;
-        const lines: string[] = ['While you were setting up, I got some ideas ready.'];
+        const audit = prepped.find((j) => j.kind === 'audit');
+        const app = prepped.find((j) => j.kind === 'app');
+        const lines: string[] = ['While you were setting up, I got started.'];
         if (scanSummary) lines.push(`Spotted on this Mac: ${scanSummary}.`);
-        if (autoRun && starters.length > 0) lines.push(`Already running: ${starters[0].title}.`);
-        if (starters.length > 0) lines.push(`Ready to run:\n${starters.slice(autoRun ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
+        if (audit) lines.push(`Already running: ${audit.title}.`);
+        if (app) lines.push(`Already building: ${app.title}.`);
+        if (starters.length > 0) lines.push(`Ready to run:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
         dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + 48, y: cy - 140, color: 'yellow', content: lines.join('\n\n') }));
-        if (autoRun) {
-          const config: AgentConfig = { name: starters[0]?.title || 'First look', model, mode: 'agent', dashboard_id: dashboardId };
-          const draftId = dispatch(createDraftSession({ mode: 'agent', model, dashboardId, setActive: false })).payload.draftId;
-          dispatch(placeCard({ sessionId: draftId, x: cx - DEFAULT_CARD_W * 1.5 - 48, y: cy - DEFAULT_CARD_H / 2, width: DEFAULT_CARD_W, height: DEFAULT_CARD_H, expandedSessionIds, exact: true }));
-          void dispatch(launchAndSendFirstMessage({ draftId, config, prompt: autoPrompt, mode: 'agent', model }));
-        }
+        prepped.forEach((job, i) => {
+          dispatch(placeCard({
+            sessionId: job.sessionId,
+            x: cx - DEFAULT_CARD_W * 1.5 - 48,
+            y: cy - DEFAULT_CARD_H / 2 + i * (DEFAULT_CARD_H + 32),
+            width: DEFAULT_CARD_W,
+            height: DEFAULT_CARD_H,
+            expandedSessionIds,
+            exact: true,
+          }));
+        });
       }
       createWelcomeDraft();
     } finally {
       dispatch(clearReveal());
     }
-  }, [revealPending, isActive, canvasEmpty, settingsLoaded, starters, scanSummary, autoPrompt, connected, model, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, dispatch]);
+  }, [revealPending, isActive, settingsLoaded, starters, scanSummary, prepped, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, dispatch]);
 }
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index a0e1eaae..96e5de99 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -167,7 +167,6 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
   // Onboarding v3 reveal: seeds the personalized note + welcome chat the instant the flow's curtain lifts.
   useOnboardingRevealSeed({
     isActive,
-    canvasEmpty,
     dashboardId,
     expandedSessionIds,
     viewportRef: canvas.viewportRef,
diff --git a/frontend/src/shared/state/onboardingV3Slice.ts b/frontend/src/shared/state/onboardingV3Slice.ts
index 8bdf1918..fa208262 100644
--- a/frontend/src/shared/state/onboardingV3Slice.ts
+++ b/frontend/src/shared/state/onboardingV3Slice.ts
@@ -3,6 +3,12 @@ import type { PersonalizedStarter } from '@/shared/state/settingsSlice';
 
 // Transient bridge between the v3 flow overlay and the dashboard: the overlay finishes, stashes the prep payload here, and the dashboard's reveal hook consumes it exactly once to seed the canvas.
 
+export interface PreppedJob {
+  sessionId: string;
+  title: string;
+  kind: 'audit' | 'app';
+}
+
 export interface OnboardingV3State {
   /** True while the full-screen flow owns the window; suppresses onboarding v2. */
   flowActive: boolean;
@@ -13,6 +19,8 @@ export interface OnboardingV3State {
   scanSummary: string | null;
   /** Read-only audit prompt to launch as a live agent at reveal; null = chips only. */
   autoPrompt: string | null;
+  /** Background jobs launched mid-flow (audit + app build); the keep/discard toast owns their fate. */
+  prepped: PreppedJob[];
 }
 
 const initialState: OnboardingV3State = {
@@ -22,6 +30,7 @@ const initialState: OnboardingV3State = {
   starters: [],
   scanSummary: null,
   autoPrompt: null,
+  prepped: [],
 };
 
 const onboardingV3Slice = createSlice({
@@ -38,6 +47,12 @@ const onboardingV3Slice = createSlice({
       state.scanSummary = action.payload.scanSummary;
       state.autoPrompt = action.payload.autoPrompt;
     },
+    addPreppedJob(state, action: PayloadAction<PreppedJob>) {
+      if (!state.prepped.some((j) => j.sessionId === action.payload.sessionId)) state.prepped.push(action.payload);
+    },
+    clearPrepped(state) {
+      state.prepped = [];
+    },
     clearReveal(state) {
       state.revealPending = false;
       state.scanSummary = null;
@@ -46,5 +61,5 @@ const onboardingV3Slice = createSlice({
   },
 });
 
-export const { setFlowActive, stageReveal, clearReveal } = onboardingV3Slice.actions;
+export const { setFlowActive, stageReveal, clearReveal, addPreppedJob, clearPrepped } = onboardingV3Slice.actions;
 export default onboardingV3Slice.reducer;

From 5fd158243d39046cea71d23c60313b3997a76bf0 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 14:43:30 -0700
Subject: [PATCH 032/248] [eric] onboarding: opt-in usage read (chatgpt memory
 + claude titles from logged-in card -> prep profile, raw discarded)

---
 backend/apps/onboarding/models.py             |  1 +
 backend/apps/onboarding/prep.py               |  5 +-
 .../OnboardingV3/OnboardingV3Root.tsx         | 10 +++-
 .../OnboardingV3/beats/BeatConnect.tsx        | 19 ++++++-
 .../OnboardingV3/onboardingV3Api.ts           |  4 +-
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 27 +++++++++-
 frontend/src/shared/providerUsage.ts          | 50 +++++++++++++++++++
 7 files changed, 107 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/shared/providerUsage.ts

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 5470a561..41cc0b79 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -46,6 +46,7 @@ class PrepRequest(BaseModel):
     scan: Optional[ScanResult] = None
     picked_apps: List[str] = Field(default_factory=list)
     identity: List[ProviderIdentity] = Field(default_factory=list)
+    usage_summary: str = ""
 
 
 class PrepResponse(BaseModel):
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index b2329e54..ab507880 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -26,8 +26,9 @@ P_SYSTEM = (
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
     '{"greeting": string, "starters": [{"title": string, "prompt": string}], "app_title": string, "app_prompt": string}. '
-    "First, silently infer a short profile of this user from the facts (developer or designer or student, work or "
-    "personal, from apps, folders, plan tier, and email domain); tune every task to that profile and do not output it. "
+    "First, silently infer a short profile of this user. If usage_summary is present it is the STRONGEST signal (it is "
+    "what they actually ask their AI about and facts their AI remembers about them); weight it above everything else, "
+    "then apps, folders, plan tier, email domain. Tune every task and the personal app to that profile; do not output the profile. "
     "Exactly 4 starters. Each title is 2-5 words. Each prompt is a concrete, safe, immediately runnable task "
     "referencing the user's real folders, file counts, or picked apps when possible; never invent facts, never "
     "propose deleting anything without review. The FIRST starter must be an audit sized for parallel sub-work "
diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 476cf582..ea59cb7b 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -4,6 +4,7 @@ import { ArrowRight } from 'lucide-react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { updateSettingsPatch } from '@/shared/state/settingsSlice';
 import { setFlowActive } from '@/shared/state/onboardingV3Slice';
+import { selectSubscriptionConnections } from '@/shared/state/subscriptionsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useOnboardingV3Pipeline } from './useOnboardingV3Pipeline';
@@ -115,15 +116,18 @@ const OnboardingV3Root: React.FC = () => {
   const pipeline = useOnboardingV3Pipeline();
   const [beat, setBeat] = useState<Beat>('welcome');
   const [scanConsent, setScanConsent] = useState(true);
+  const [usageConsent, setUsageConsent] = useState(true);
   const [picks, setPicks] = useState<string[]>([]);
+  const connectedProvider = useAppSelector((s) => selectSubscriptionConnections(s).find((cx) => cx.isActive !== false)?.provider ?? null);
   const [finishing, setFinishing] = useState(false);
 
-  const { kickIdentity, kickScan, kickPrep, finish } = pipeline;
+  const { kickIdentity, kickScan, kickUsageRead, kickPrep, finish } = pipeline;
 
   const onConnected = useCallback(() => {
     kickIdentity();
     kickScan(scanConsent);
-  }, [kickIdentity, kickScan, scanConsent]);
+    if (connectedProvider) kickUsageRead(connectedProvider, usageConsent);
+  }, [kickIdentity, kickScan, kickUsageRead, scanConsent, usageConsent, connectedProvider]);
 
   const leaveConnect = useCallback(() => {
     kickScan(scanConsent);
@@ -190,6 +194,8 @@ const OnboardingV3Root: React.FC = () => {
                   identity={pipeline.identity}
                   scanConsent={scanConsent}
                   setScanConsent={setScanConsent}
+                  usageConsent={usageConsent}
+                  setUsageConsent={setUsageConsent}
                   onConnected={onConnected}
                   onNext={leaveConnect}
                   onBack={() => setBeat('newos')}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index 8027a924..03259f5e 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -19,10 +19,12 @@ const BeatConnect: React.FC<{
   identity: ProviderIdentity[];
   scanConsent: boolean;
   setScanConsent: (v: boolean) => void;
+  usageConsent: boolean;
+  setUsageConsent: (v: boolean) => void;
   onConnected: () => void;
   onNext: () => void;
   onBack: () => void;
-}> = ({ c, identity, scanConsent, setScanConsent, onConnected, onNext, onBack }) => {
+}> = ({ c, identity, scanConsent, setScanConsent, usageConsent, setUsageConsent, onConnected, onNext, onBack }) => {
   const dispatch = useAppDispatch();
   const connected = useAppSelector((s) => hasModelConnected(s));
   const freeTrial = useAppSelector((s) => hasFreeTrialActive(s));
@@ -149,6 +151,21 @@ const BeatConnect: React.FC<{
           </button>
           <span>Take a quick local look around to personalize my setup. Nothing leaves this Mac.</span>
         </label>
+        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 9, cursor: 'pointer', fontSize: '0.82rem', color: c.text.tertiary, lineHeight: 1.5 }}>
+          <button
+            onClick={(e) => { e.preventDefault(); setUsageConsent(!usageConsent); }}
+            style={{
+              width: 16, height: 16, marginTop: 2, borderRadius: 5, padding: 0, cursor: 'pointer', flexShrink: 0,
+              border: `1.5px solid ${usageConsent ? c.accent.primary : c.border.strong}`,
+              background: usageConsent ? c.accent.primary : 'transparent',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              transition: 'background 120ms ease, border-color 120ms ease',
+            }}
+          >
+            {usageConsent && <Check size={11} color="#fff" strokeWidth={3.2} />}
+          </button>
+          <span>Learn what I work on from my chats (read once, never stored).</span>
+        </label>
         <div style={{ display: 'flex', gap: 18, marginTop: 2 }}>
           <button onClick={() => setShowKeys(!showKeys)} style={{ border: 'none', background: 'transparent', padding: 0, color: c.text.ghost, fontSize: '0.82rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline' }}>
             Use an API key instead
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 39e3b4a4..6bc0b7c6 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -50,12 +50,12 @@ export async function runScan(): Promise<ScanResult | null> {
   }
 }
 
-export async function runPrep(scan: ScanResult | null, pickedApps: string[], identity: ProviderIdentity[]): Promise<PrepResponse | null> {
+export async function runPrep(scan: ScanResult | null, pickedApps: string[], identity: ProviderIdentity[], usageSummary: string): Promise<PrepResponse | null> {
   try {
     const res = await fetch(`${API_BASE}/onboarding/prep`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ scan, picked_apps: pickedApps, identity }),
+      body: JSON.stringify({ scan, picked_apps: pickedApps, identity, usage_summary: usageSummary }),
     });
     if (!res.ok) return null;
     const data = (await res.json()) as PrepResponse;
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 84f3280c..03a54703 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -10,6 +10,8 @@ import {
   fetchIdentity, runPrep, runScan, summarizeScan,
   type PrepResponse, type ProviderIdentity, type ScanResult,
 } from './onboardingV3Api';
+import { USAGE_READ_JS, summarizeUsage, type ProviderUsage, type UsageProvider } from '@/shared/providerUsage';
+import { findWebviewByDomain } from '@/shared/browserRegistry';
 
 // The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat, and the moment prep resolves the audit AND the app build launch as REAL background agents, so the curtain lifts on work already in motion. Every stage fails soft; the flow never blocks on any of it.
 export function useOnboardingV3Pipeline() {
@@ -21,6 +23,8 @@ export function useOnboardingV3Pipeline() {
   const scanRef = useRef<Promise<ScanResult | null> | null>(null);
   const prepRef = useRef<Promise<PrepResponse | null> | null>(null);
   const scanResultRef = useRef<ScanResult | null>(null);
+  const usageSummaryRef = useRef<string>('');
+  const usageReadRef = useRef<Promise<void> | null>(null);
   const connected = useAppSelector((s) => hasModelConnected(s));
   const model = useAppSelector((s) => s.settings.data.default_model);
   const launchCtxRef = useRef({ connected: false, model: 'sonnet' });
@@ -31,6 +35,22 @@ export function useOnboardingV3Pipeline() {
     fetchIdentity().then((ids) => { identityRef.current = ids; setIdentity(ids); }).catch(() => {});
   }, []);
 
+  // Read what the user works on from an already-open, logged-in provider card (chatgpt.com / claude.ai) via the proven findWebviewByDomain + executeJavaScript path. Fail-open: no card, not logged in, or off-Electron => empty summary, prep falls back to scan + identity.
+  const kickUsageRead = useCallback((provider: string, consented: boolean) => {
+    if (usageReadRef.current || !consented) return;
+    const key: UsageProvider | null = provider === 'codex' ? 'codex' : provider === 'claude' ? 'claude' : null;
+    if (!key) return;
+    usageReadRef.current = (async () => {
+      try {
+        const domain = key === 'codex' ? 'chatgpt.com' : 'claude.ai';
+        const wv = findWebviewByDomain(domain);
+        if (!wv || typeof wv.executeJavaScript !== 'function') return;
+        const raw = (await wv.executeJavaScript(USAGE_READ_JS[key])) as ProviderUsage | null;
+        usageSummaryRef.current = summarizeUsage(raw);
+      } catch { /* fail-open */ }
+    })();
+  }, []);
+
   const kickScan = useCallback((consented: boolean) => {
     if (scanRef.current) return;
     scanRef.current = consented
@@ -56,7 +76,10 @@ export function useOnboardingV3Pipeline() {
   const kickPrep = useCallback((pickedApps: string[]) => {
     if (prepRef.current) return;
     const scanPromise = scanRef.current ?? Promise.resolve(null);
-    prepRef.current = scanPromise.then((scan) => runPrep(scan, pickedApps, identityRef.current)).catch(() => null);
+    const usagePromise = usageReadRef.current ?? Promise.resolve();
+    prepRef.current = Promise.all([scanPromise, usagePromise])
+      .then(([scan]) => runPrep(scan, pickedApps, identityRef.current, usageSummaryRef.current))
+      .catch(() => null);
     // Launch the prepped work MID-FLOW (theme/card beats cover the latency): audit + app build, gated to a real connected model so the fragile free trial never carries it.
     void prepRef.current.then((prep) => {
       if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
@@ -94,5 +117,5 @@ export function useOnboardingV3Pipeline() {
     dispatch(setFlowActive(false));
   }, [dispatch, accent, gradient, mode]);
 
-  return { identity, kickIdentity, kickScan, kickPrep, finish };
+  return { identity, kickIdentity, kickScan, kickUsageRead, kickPrep, finish };
 }
diff --git a/frontend/src/shared/providerUsage.ts b/frontend/src/shared/providerUsage.ts
new file mode 100644
index 00000000..aea6cbf0
--- /dev/null
+++ b/frontend/src/shared/providerUsage.ts
@@ -0,0 +1,50 @@
+// Reads what the user actually uses their AI for, from a logged-in provider website inside a browser-card webview: ChatGPT Memory + recent titles, or Claude conversation titles. Same-origin fetch using the site's own session (the proven extension technique). The RAW result never leaves the renderer; only the derived summary goes to prep, and even that is dropped after.
+
+export type UsageProvider = 'codex' | 'claude';
+
+export interface ProviderUsage {
+  ok: boolean;
+  titles: string[];
+  memories: string[];
+}
+
+// Runs in the WEBVIEW page context (chatgpt.com / claude.ai), so it inherits the live session. Kept as a string because it is injected via webview.executeJavaScript.
+export const USAGE_READ_JS: Record<UsageProvider, string> = {
+  codex: `(async () => {
+    try {
+      const sess = await fetch('/api/auth/session', {credentials:'include'}).then(r=>r.json());
+      if (!sess || !sess.accessToken) return {ok:false, titles:[], memories:[]};
+      const H = {headers:{Authorization:'Bearer '+sess.accessToken, accept:'application/json'}, credentials:'include'};
+      const conv = await fetch('/backend-api/conversations?offset=0&limit=25&order=updated', H).then(r=>r.ok?r.json():null).catch(()=>null);
+      const mem = await fetch('/backend-api/memories?include_memory_entries=true', H).then(r=>r.ok?r.json():null).catch(()=>null);
+      return {
+        ok: true,
+        titles: ((conv && conv.items) || []).map(c=>c.title).filter(Boolean).slice(0,25),
+        memories: ((mem && mem.memories) || []).map(m=>m.content).filter(Boolean).slice(0,25),
+      };
+    } catch (e) { return {ok:false, titles:[], memories:[]}; }
+  })()`,
+  claude: `(async () => {
+    try {
+      const orgs = await fetch('/api/organizations', {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
+      if (!Array.isArray(orgs) || !orgs.length) return {ok:false, titles:[], memories:[]};
+      const org = orgs[0].uuid;
+      const convs = await fetch('/api/organizations/'+org+'/chat_conversations?limit=30', {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
+      return {ok:true, titles:(Array.isArray(convs)?convs:[]).map(c=>c.name).filter(Boolean).slice(0,30), memories:[]};
+    } catch (e) { return {ok:false, titles:[], memories:[]}; }
+  })()`,
+};
+
+export const USAGE_ORIGIN: Record<UsageProvider, string> = {
+  codex: 'https://chatgpt.com/',
+  claude: 'https://claude.ai/',
+};
+
+// Turn the raw read into a compact block for the prep prompt. Cap hard so we never ship a wall of PII; titles + memory facts are the whole signal.
+export function summarizeUsage(u: ProviderUsage | null): string {
+  if (!u || !u.ok) return '';
+  const parts: string[] = [];
+  if (u.memories.length > 0) parts.push('Facts their AI remembers about them: ' + u.memories.join('; '));
+  if (u.titles.length > 0) parts.push('Recent things they asked their AI: ' + u.titles.join('; '));
+  return parts.join('\n').slice(0, 1500);
+}

From 96384285d5b05bc902238469cc3b49d4f39a2a60 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 15:42:00 -0700
Subject: [PATCH 033/248] [eric] onboarding: vivid off-brand signature bloom on
 the intro (electric blue to violet); user's picked color still owns theme +
 card

---
 .../app/components/OnboardingV3/OnboardingV3Root.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index ea59cb7b..961a8091 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -19,6 +19,8 @@ type Beat = 'welcome' | 'newos' | 'connect' | 'apps' | 'theme' | 'card';
 
 const V2_STORAGE_KEY = 'openswarm.onboarding.v2';
 const WINDOWED_BEATS: Beat[] = ['welcome', 'newos'];
+// The opening is its own vivid moment (electric blue -> indigo -> violet), deliberately off-brand; the user's picked color takes over from the theme beat on.
+const INTRO = { core: '#93b5ff', mid: '#5b6cff', edge: '#a855f7' };
 
 // Decides whether the v3 full-screen flow owns this launch. Only genuinely fresh installs see it: anyone with the v2 tour key or existing sessions is auto-marked skipped so an update never re-onboards a veteran.
 function useOnboardingV3Gate(): boolean {
@@ -56,12 +58,12 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
   <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: c.bg.inverse, overflow: 'hidden' }}>
     <motion.div
       initial={{ scale: 0.35, opacity: 0, x: 0, y: 0 }}
-      animate={{ scale: [0.35, 1, 1.06, 1], opacity: [0, 0.62, 0.56, 0.62], x: [0, 0, 22, 0], y: [0, 0, -14, 0] }}
+      animate={{ scale: [0.35, 1, 1.06, 1], opacity: [0, 0.7, 0.62, 0.7], x: [0, 0, 22, 0], y: [0, 0, -14, 0] }}
       transition={{ duration: 9, times: [0, 0.16, 0.6, 1], ease: 'easeInOut' }}
       style={{
-        position: 'absolute', width: 560, height: 560, borderRadius: 999,
-        background: `radial-gradient(circle at 42% 38%, ${c.accent.hover}, ${c.accent.primary} 55%, transparent 75%)`,
-        filter: 'blur(70px)', pointerEvents: 'none',
+        position: 'absolute', width: 620, height: 620, borderRadius: 999,
+        background: `radial-gradient(circle at 42% 38%, ${INTRO.core}, ${INTRO.mid} 46%, ${INTRO.edge} 70%, transparent 82%)`,
+        filter: 'blur(64px)', pointerEvents: 'none',
       }}
     />
     <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.14, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
@@ -71,7 +73,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
       transition={{ type: 'spring', stiffness: 160, damping: 18, delay: 0.2 }}
       style={{ position: 'relative', marginBottom: 22 }}
     >
-      <Starburst size={44} from={c.accent.hover} to={c.accent.primary} />
+      <Starburst size={44} from={INTRO.core} to={INTRO.edge} />
     </motion.div>
     <motion.h1
       initial={{ opacity: 0, y: 16, filter: 'blur(8px)' }}

From c836bd273174ec0ccfc78d33d8232076a792507b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 16:05:19 -0700
Subject: [PATCH 034/248] [eric] theme: zen-parity device (color-theory
 harmonies, intensity + grain dials, light/dark/system)

---
 .../OnboardingV3/beats/BeatTheme.tsx          | 53 ++++++++++++++-----
 .../app/components/theme/AccentColorPad.tsx   | 32 +++++++++--
 .../Dashboard/canvas/DashboardCanvas.tsx      | 18 +++++--
 .../sections/general/GeneralInterface.tsx     |  4 +-
 frontend/src/shared/styles/ThemeContext.tsx   | 32 ++++++++++-
 5 files changed, 117 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
index d786f17e..e8599311 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { motion } from 'framer-motion';
-import { Moon, Sun } from 'lucide-react';
-import { useThemeAccent, useThemeMode } from '@/shared/styles/ThemeContext';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useThemeAccent, useThemeMode, useThemeWash } from '@/shared/styles/ThemeContext';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import AccentColorPad from '@/app/components/theme/AccentColorPad';
 import BeatShell from './BeatShell';
 
-// The IKEA-effect beat, staged as a physical picker device (Arc's theme gadget): mode icons on the bezel, the shared pad as the screen. Every touch drives the REAL app theme live; persistence happens at finish().
+// The IKEA-effect beat, staged as a physical picker device (Arc/Zen theme gadget): light/dark/system on the bezel, the shared pad (color-theory stops + intensity + grain) as the screen. Every touch drives the REAL app theme live; persistence happens at finish().
 const BeatTheme: React.FC<{
   c: ClaudeTokens;
   onNext: () => void;
@@ -14,12 +14,35 @@ const BeatTheme: React.FC<{
 }> = ({ c, onNext, onBack }) => {
   const { accent, setAccent, gradient, setGradient } = useThemeAccent();
   const { mode, setMode } = useThemeMode();
+  const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
   const stops = gradient ?? (accent ? [accent] : []);
   const onStops = (next: string[] | null) => {
     setAccent(next?.[0] ?? null);
     setGradient(next && next.length > 1 ? next : null);
   };
 
+  // 'system' isn't a persisted mode; it applies the OS preference now and follows it while this beat is mounted.
+  const [choice, setChoice] = React.useState<'light' | 'dark' | 'system'>(mode);
+  const followSystem = useRef(false);
+  const pickSystem = useCallback(() => {
+    setChoice('system');
+    followSystem.current = true;
+    setMode(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  }, [setMode]);
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = () => { if (followSystem.current) setMode(mq.matches ? 'dark' : 'light'); };
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, [setMode]);
+  const pickMode = useCallback((m: 'light' | 'dark') => { followSystem.current = false; setChoice(m); setMode(m); }, [setMode]);
+
+  const MODES = [
+    { key: 'light' as const, Icon: Sun, onPick: () => pickMode('light') },
+    { key: 'dark' as const, Icon: Moon, onPick: () => pickMode('dark') },
+    { key: 'system' as const, Icon: Monitor, onPick: pickSystem },
+  ];
+
   return (
     <BeatShell
       c={c}
@@ -40,24 +63,30 @@ const BeatTheme: React.FC<{
         }}
       >
         <div style={{ display: 'flex', justifyContent: 'center', gap: 10 }}>
-          {(['light', 'dark'] as const).map((m) => (
+          {MODES.map(({ key, Icon, onPick }) => (
             <button
-              key={m}
-              onClick={() => setMode(m)}
-              title={m === 'light' ? 'Light' : 'Dark'}
+              key={key}
+              onClick={onPick}
+              title={key.charAt(0).toUpperCase() + key.slice(1)}
               style={{
                 width: 34, height: 28, borderRadius: 8, border: 'none', cursor: 'pointer',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
-                background: mode === m ? c.accent.primary : 'transparent',
-                color: mode === m ? '#fff' : c.text.inverse + '88',
+                background: choice === key ? c.accent.primary : 'transparent',
+                color: choice === key ? '#fff' : c.text.inverse + '88',
                 transition: 'background 140ms ease, color 140ms ease',
               }}
             >
-              {m === 'light' ? <Sun size={15} /> : <Moon size={15} />}
+              <Icon size={15} />
             </button>
           ))}
         </div>
-        <AccentColorPad c={c} stops={stops} onChange={onStops} height={210} />
+        <AccentColorPad
+          c={c}
+          stops={stops}
+          onChange={onStops}
+          height={210}
+          wash={{ opacity: washOpacity, grain, onOpacity: setWashOpacity, onGrain: setGrain }}
+        />
       </motion.div>
     </BeatShell>
   );
diff --git a/frontend/src/app/components/theme/AccentColorPad.tsx b/frontend/src/app/components/theme/AccentColorPad.tsx
index 3a2e2919..afc76983 100644
--- a/frontend/src/app/components/theme/AccentColorPad.tsx
+++ b/frontend/src/app/components/theme/AccentColorPad.tsx
@@ -12,13 +12,21 @@ function stopToXY(hex: string): { x: number; y: number } | null {
   return { x: hsl.h, y: Math.min(1, Math.max(0, (0.62 - hsl.l) / 0.34)) };
 }
 
-// Arc's gradient engine, one control with two homes: 1-3 draggable stops on a hue/lightness field, + adds an analogous stop, - removes the newest. The first stop is the accent the tokens derive from; two or more stops become the canvas gradient wash. The pad reports stops and never knows who is listening.
+export interface WashControls {
+  opacity: number;
+  grain: number;
+  onOpacity: (v: number) => void;
+  onGrain: (v: number) => void;
+}
+
+// Arc/Zen gradient engine, one control with two homes: 1-3 draggable stops on a hue/lightness field, + adds a color-theory-harmonized stop (analogous, then triadic), - removes the newest. The first stop is the accent the tokens derive from; 2+ stops become the canvas gradient wash, whose intensity + grain the optional sliders tune. The pad reports stops and never knows who is listening.
 const AccentColorPad: React.FC<{
   c: ClaudeTokens;
   stops: string[];
   onChange: (stops: string[] | null) => void;
   height?: number;
-}> = ({ c, stops, onChange, height = 240 }) => {
+  wash?: WashControls;
+}> = ({ c, stops, onChange, height = 240, wash }) => {
   const padRef = useRef<HTMLDivElement | null>(null);
   const grabbedRef = useRef<number | null>(null);
   const lastApplyRef = useRef(0);
@@ -76,9 +84,11 @@ const AccentColorPad: React.FC<{
 
   const addStop = useCallback(() => {
     if (stops.length >= MAX_STOPS) return;
-    const base = hexToHsl(stops[stops.length - 1] ?? ACCENT_PRESETS[0]);
-    const hue = ((base?.h ?? 0.08) + 0.11) % 1;
-    onChange([...stops, hslToHex({ h: hue, s: 0.72, l: base?.l ?? 0.45 })]);
+    // Color-theory harmony off the FIRST stop: 2nd = analogous (+30deg), 3rd = triadic (+120deg).
+    const anchor = hexToHsl(stops[0] ?? ACCENT_PRESETS[0]);
+    const h0 = anchor?.h ?? 0.08;
+    const hue = (h0 + (stops.length === 1 ? 0.083 : 0.333)) % 1;
+    onChange([...stops, hslToHex({ h: hue, s: anchor?.s ?? 0.72, l: anchor?.l ?? 0.5 })]);
   }, [stops, onChange]);
 
   const removeStop = useCallback(() => {
@@ -162,6 +172,18 @@ const AccentColorPad: React.FC<{
           Reset
         </button>
       </div>
+      {wash && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.78rem', color: c.text.tertiary }}>
+            <span style={{ width: 52, flexShrink: 0 }}>Intensity</span>
+            <input type="range" min={0} max={1} step={0.01} value={wash.opacity} onChange={(e) => wash.onOpacity(parseFloat(e.target.value))} style={{ flex: 1, accentColor: c.accent.primary }} />
+          </label>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.78rem', color: c.text.tertiary }}>
+            <span style={{ width: 52, flexShrink: 0 }}>Grain</span>
+            <input type="range" min={0} max={1} step={0.01} value={wash.grain} onChange={(e) => wash.onGrain(parseFloat(e.target.value))} style={{ flex: 1, accentColor: c.accent.primary }} />
+          </label>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index fe02b730..2f7a9f62 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -6,7 +6,7 @@ import DashboardCardLayer from './DashboardCardLayer';
 import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
-import { useThemeAccent } from '@/shared/styles/ThemeContext';
+import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -155,6 +155,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   onSearchPaletteClose,
 }) => {
   const { gradient } = useThemeAccent();
+  const { washOpacity, grain } = useThemeWash();
   const dotSize = Math.max(1, 1.5 * canvas.zoom);
   const dotSpacing = 24 * canvas.zoom;
 
@@ -217,14 +218,25 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
                 : 'default',
         }}
       >
-        {/* Gradient wash: the user's theme-pad stops tint the canvas, Arc-window style; sits under the dot grid. */}
+        {/* Gradient wash: the user's theme-pad stops tint the canvas, Arc-window style; intensity + grain come from the theme device; sits under the dot grid. */}
         {gradient && gradient.length > 1 && (
           <Box
             sx={{
               position: 'absolute',
               inset: 0,
               pointerEvents: 'none',
-              background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}2b ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`,
+              background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}${Math.round(washOpacity * 255).toString(16).padStart(2, '0')} ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`,
+            }}
+          />
+        )}
+        {gradient && gradient.length > 1 && grain > 0 && (
+          <Box
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              pointerEvents: 'none',
+              opacity: grain * 0.6,
+              backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")",
             }}
           />
         )}
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 12ca5ad9..94d62fa3 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -11,7 +11,7 @@ import DarkModeIcon from '@mui/icons-material/DarkMode';
 import KeyboardIcon from '@mui/icons-material/Keyboard';
 import LanguageIcon from '@mui/icons-material/Language';
 import { AppSettings } from '@/shared/state/settingsSlice';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useClaudeTokens, useThemeWash } from '@/shared/styles/ThemeContext';
 import AccentColorPad from '@/app/components/theme/AccentColorPad';
 import type { SettingsStyles } from '../settingsStyles';
 import { settingSelectAttrs } from '../settingSelect';
@@ -22,6 +22,7 @@ const GeneralInterface: React.FC<{
   styles: SettingsStyles;
 }> = ({ form, setForm, styles }) => {
   const c = useClaudeTokens();
+  const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
   const [recordingShortcut, setRecordingShortcut] = useState(false);
   const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx } = styles;
 
@@ -76,6 +77,7 @@ const GeneralInterface: React.FC<{
           stops={form.accent_gradient ?? (form.accent_color ? [form.accent_color] : [])}
           onChange={(next) => setForm({ ...form, accent_color: next?.[0] ?? null, accent_gradient: next && next.length > 1 ? next : null })}
           height={120}
+          wash={{ opacity: washOpacity, grain, onOpacity: setWashOpacity, onGrain: setGrain }}
         />
       </Box>
 
diff --git a/frontend/src/shared/styles/ThemeContext.tsx b/frontend/src/shared/styles/ThemeContext.tsx
index e1279f1f..f047f6e2 100644
--- a/frontend/src/shared/styles/ThemeContext.tsx
+++ b/frontend/src/shared/styles/ThemeContext.tsx
@@ -8,15 +8,30 @@ interface ThemeContextValue {
   tokens: ClaudeTokens;
   accent: string | null;
   gradient: string[] | null;
+  washOpacity: number;
+  grain: number;
   toggleMode: () => void;
   setMode: (mode: ThemeMode) => void;
   setAccent: (hex: string | null) => void;
   setGradient: (stops: string[] | null) => void;
+  setWashOpacity: (v: number) => void;
+  setGrain: (v: number) => void;
 }
 
 const STORAGE_KEY = 'self-swarm-theme-mode';
 const ACCENT_STORAGE_KEY = 'self-swarm-theme-accent';
 const GRADIENT_STORAGE_KEY = 'self-swarm-theme-gradient';
+const WASH_OPACITY_KEY = 'self-swarm-theme-wash-opacity';
+const GRAIN_KEY = 'self-swarm-theme-grain';
+export const DEFAULT_WASH_OPACITY = 0.17;
+
+function getInitialNum(key: string, def: number): number {
+  try {
+    const v = parseFloat(localStorage.getItem(key) ?? '');
+    if (Number.isFinite(v) && v >= 0 && v <= 1) return v;
+  } catch {}
+  return def;
+}
 
 function getInitialGradient(): string[] | null {
   try {
@@ -58,16 +73,22 @@ const ThemeContext = createContext<ThemeContextValue>({
   tokens: lightTokens,
   accent: null,
   gradient: null,
+  washOpacity: DEFAULT_WASH_OPACITY,
+  grain: 0,
   toggleMode: () => {},
   setMode: () => {},
   setAccent: () => {},
   setGradient: () => {},
+  setWashOpacity: () => {},
+  setGrain: () => {},
 });
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [mode, setModeState] = useState<ThemeMode>(getInitialMode);
   const [accent, setAccentState] = useState<string | null>(getInitialAccent);
   const [gradient, setGradientState] = useState<string[] | null>(getInitialGradient);
+  const [washOpacity, setWashOpacityState] = useState<number>(() => getInitialNum(WASH_OPACITY_KEY, DEFAULT_WASH_OPACITY));
+  const [grain, setGrainState] = useState<number>(() => getInitialNum(GRAIN_KEY, 0));
   const firstMount = useRef(true);
 
   useEffect(() => {
@@ -91,6 +112,9 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     } catch {}
   }, [gradient]);
 
+  useEffect(() => { try { localStorage.setItem(WASH_OPACITY_KEY, String(washOpacity)); } catch {} }, [washOpacity]);
+  useEffect(() => { try { localStorage.setItem(GRAIN_KEY, String(grain)); } catch {} }, [grain]);
+
   const tokens = useMemo(() => withAccent(mode === 'dark' ? darkTokens : lightTokens, accent, mode), [mode, accent]);
 
   // Stable identities: SettingsLoader's "apply settings.theme" effect lists setMode in its deps, so a setter that changed every render made that effect re-fire on each toggle and re-assert the OLD persisted theme until the debounced save caught up: live theme snapped back for ~900ms = the switch flicker.
@@ -98,8 +122,10 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
   const setMode = useCallback((m: ThemeMode) => setModeState(m), []);
   const setAccent = useCallback((hex: string | null) => setAccentState(hex), []);
   const setGradient = useCallback((stops: string[] | null) => setGradientState(stops), []);
+  const setWashOpacity = useCallback((v: number) => setWashOpacityState(Math.min(1, Math.max(0, v))), []);
+  const setGrain = useCallback((v: number) => setGrainState(Math.min(1, Math.max(0, v))), []);
 
-  const value = useMemo(() => ({ mode, tokens, accent, gradient, toggleMode, setMode, setAccent, setGradient }), [mode, tokens, accent, gradient, toggleMode, setMode, setAccent, setGradient]);
+  const value = useMemo(() => ({ mode, tokens, accent, gradient, washOpacity, grain, toggleMode, setMode, setAccent, setGradient, setWashOpacity, setGrain }), [mode, tokens, accent, gradient, washOpacity, grain, toggleMode, setMode, setAccent, setGradient, setWashOpacity, setGrain]);
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
@@ -113,3 +139,7 @@ export const useThemeAccent = () => {
   const { accent, setAccent, gradient, setGradient } = useContext(ThemeContext);
   return { accent, setAccent, gradient, setGradient };
 };
+export const useThemeWash = () => {
+  const { washOpacity, grain, setWashOpacity, setGrain } = useContext(ThemeContext);
+  return { washOpacity, grain, setWashOpacity, setGrain };
+};

From 324ff76ca564c6b4ce48166d51de157bf7e7a017 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 16:33:31 -0700
Subject: [PATCH 035/248] [eric] onboarding: expanded beats cap to a centered
 card (no beige-void layout on ultra-wide displays)

---
 .../src/app/components/OnboardingV3/OnboardingV3Root.tsx | 9 +++++----
 .../src/app/components/OnboardingV3/beats/BeatShell.tsx  | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 961a8091..1bc6bb0c 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -152,8 +152,9 @@ const OnboardingV3Root: React.FC = () => {
   const windowed = WINDOWED_BEATS.includes(beat);
   const vw = window.innerWidth;
   const vh = window.innerHeight;
-  const stageW = windowed ? Math.min(900, Math.round(vw * 0.72)) : vw;
-  const stageH = windowed ? Math.min(560, Math.round(vh * 0.74)) : vh;
+  // Expanded beats cap at a large centered card (not edge-to-edge) so on very wide displays the stage never balloons into a beige void around the sparse content.
+  const stageW = windowed ? Math.min(900, Math.round(vw * 0.72)) : Math.min(1680, Math.round(vw * 0.94));
+  const stageH = windowed ? Math.min(560, Math.round(vh * 0.74)) : Math.min(1000, Math.round(vh * 0.92));
 
   // AnimatePresence stays mounted so the overlay's exit fade (the curtain lift) actually plays when active flips false.
   return (
@@ -171,11 +172,11 @@ const OnboardingV3Root: React.FC = () => {
       >
         <motion.div
           initial={{ opacity: 0, scale: 0.72, filter: 'blur(18px)' }}
-          animate={{ opacity: 1, scale: 1, filter: 'blur(0px)', width: stageW, height: stageH, borderRadius: windowed ? 14 : 0 }}
+          animate={{ opacity: 1, scale: 1, filter: 'blur(0px)', width: stageW, height: stageH, borderRadius: 16 }}
           transition={{ type: 'spring', stiffness: 170, damping: 24, mass: 0.9 }}
           style={{
             position: 'relative', overflow: 'hidden',
-            boxShadow: windowed ? '0 30px 90px rgba(0,0,0,0.5)' : 'none',
+            boxShadow: '0 30px 90px rgba(0,0,0,0.5)',
             background: c.bg.page,
           }}
         >
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
index 5895ad45..84e047f9 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -44,7 +44,8 @@ const BeatShell: React.FC<{
     <div style={{ display: 'flex', width: '100%', height: '100%', background: c.bg.secondary }}>
       <div
         style={{
-          position: 'relative', width: 'min(400px, 36%)', flexShrink: 0, display: 'flex', flexDirection: 'column',
+          // vw (not %, which resolves oddly in the flex child) keeps the copy panel ~36% instead of a thin strip on ultra-wide screens, so the stage never balloons into a beige void.
+          position: 'relative', width: 'clamp(360px, 36vw, 600px)', flexShrink: 0, display: 'flex', flexDirection: 'column',
           justifyContent: 'center', padding: '48px 46px 48px 44px', boxSizing: 'border-box',
           background: c.bg.inverse, color: c.text.inverse, clipPath: ZIGZAG_CLIP,
         }}

From 236eb1f7b040a5feb149ed0844aafea239c4b641 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 16:46:18 -0700
Subject: [PATCH 036/248] [eric] onboarding: auto-jobs run on the cheap tier
 (not the user's premium default) + launch a beat earlier for more runway

---
 .../components/OnboardingV3/OnboardingV3Root.tsx |  4 +++-
 .../OnboardingV3/useOnboardingV3Pipeline.ts      | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 1bc6bb0c..e9394763 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -131,10 +131,12 @@ const OnboardingV3Root: React.FC = () => {
     if (connectedProvider) kickUsageRead(connectedProvider, usageConsent);
   }, [kickIdentity, kickScan, kickUsageRead, scanConsent, usageConsent, connectedProvider]);
 
+  // Fire prep + the background jobs at connect-exit (scan/usage/identity are all ready by now), so they run through the apps + theme + card beats (~three beats of runway) and the reveal lands on work well underway, not just-started. kickPrep is idempotent; picks arrive a beat later and feed the reveal's connect suggestions, not the already-launched jobs.
   const leaveConnect = useCallback(() => {
     kickScan(scanConsent);
+    kickPrep(picks);
     setBeat('apps');
-  }, [kickScan, scanConsent]);
+  }, [kickScan, kickPrep, scanConsent, picks]);
 
   const leaveApps = useCallback(() => {
     kickPrep(picks);
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 03a54703..2b50d01c 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -12,6 +12,18 @@ import {
 } from './onboardingV3Api';
 import { USAGE_READ_JS, summarizeUsage, type ProviderUsage, type UsageProvider } from '@/shared/providerUsage';
 import { findWebviewByDomain } from '@/shared/browserRegistry';
+import type { ModelOption } from '@/shared/state/modelsSlice';
+
+// The auto-launched onboarding jobs must ride the CHEAP tier, not the user's premium default; running two Sonnet/Opus agents unprompted on first launch would burn real quota. Pick the lowest-intelligence (cheapest) model in the default's provider group, so a Claude user's demo runs on Haiku, a ChatGPT user's on mini.
+function pickCheapModel(byProvider: Record<string, ModelOption[]>, def: string): string {
+  const groups = Object.values(byProvider);
+  const all = groups.flat();
+  if (!all.length) return def;
+  const defGroup = groups.find((g) => g.some((m) => m.value === def));
+  const pool = (defGroup && defGroup.length ? defGroup : all).filter((m) => Array.isArray(m.tiers));
+  if (!pool.length) return def;
+  return [...pool].sort((a, b) => (a.tiers![0]) - (b.tiers![0]))[0].value;
+}
 
 // The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat, and the moment prep resolves the audit AND the app build launch as REAL background agents, so the curtain lifts on work already in motion. Every stage fails soft; the flow never blocks on any of it.
 export function useOnboardingV3Pipeline() {
@@ -26,9 +38,9 @@ export function useOnboardingV3Pipeline() {
   const usageSummaryRef = useRef<string>('');
   const usageReadRef = useRef<Promise<void> | null>(null);
   const connected = useAppSelector((s) => hasModelConnected(s));
-  const model = useAppSelector((s) => s.settings.data.default_model);
+  const cheapModel = useAppSelector((s) => pickCheapModel(s.models.byProvider, s.settings.data.default_model));
   const launchCtxRef = useRef({ connected: false, model: 'sonnet' });
-  launchCtxRef.current = { connected, model };
+  launchCtxRef.current = { connected, model: cheapModel };
   const launchedRef = useRef(false);
 
   const kickIdentity = useCallback(() => {

From 4c912b17e5855f5f273b217bb001d04eeae5588f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 17:07:50 -0700
Subject: [PATCH 037/248] [eric] onboarding: prep proposes profile-aware
 automations; reveal shows one-click schedule chips

---
 backend/apps/onboarding/models.py             |  3 +-
 backend/apps/onboarding/prep.py               | 22 ++++-
 backend/apps/settings/models.py               |  8 ++
 .../OnboardingV3/onboardingV3Api.ts           |  3 +-
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |  4 +-
 .../app/components/nudges/AutomationChips.tsx | 84 +++++++++++++++++++
 .../pages/AgentChat/WelcomeQuickReplies.tsx   | 62 ++------------
 frontend/src/shared/state/settingsSlice.ts    |  7 ++
 8 files changed, 132 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/app/components/nudges/AutomationChips.tsx

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 41cc0b79..aba38d62 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -4,7 +4,7 @@ from typing import List, Optional
 
 from pydantic import BaseModel, ConfigDict, Field
 
-from backend.apps.settings.models import PersonalizedStarter
+from backend.apps.settings.models import PersonalizedAutomation, PersonalizedStarter
 
 
 class ProviderIdentity(BaseModel):
@@ -56,3 +56,4 @@ class PrepResponse(BaseModel):
     starters: List[PersonalizedStarter] = Field(default_factory=list)
     app_title: str = ""
     app_prompt: str = ""
+    automations: List[PersonalizedAutomation] = Field(default_factory=list)
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index ab507880..b4cc113b 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -12,7 +12,9 @@ from typeguard import typechecked
 
 from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
 from backend.apps.onboarding.models import PrepRequest, PrepResponse
-from backend.apps.settings.models import AppSettings, PersonalizedStarter
+from backend.apps.settings.models import AppSettings, PersonalizedAutomation, PersonalizedStarter
+
+VALID_CADENCE = {"daily", "weekday", "weekly"}
 
 FALLBACK_STARTERS: List[PersonalizedStarter] = [
     PersonalizedStarter(title="Clean up Downloads", prompt="Sort my Downloads folder into tidy subfolders. Show me the plan before moving anything."),
@@ -25,7 +27,7 @@ P_SYSTEM = (
     "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
-    '{"greeting": string, "starters": [{"title": string, "prompt": string}], "app_title": string, "app_prompt": string}. '
+    '{"greeting": string, "starters": [{"title": string, "prompt": string}], "app_title": string, "app_prompt": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
     "First, silently infer a short profile of this user. If usage_summary is present it is the STRONGEST signal (it is "
     "what they actually ask their AI about and facts their AI remembers about them); weight it above everything else, "
     "then apps, folders, plan tier, email domain. Tune every task and the personal app to that profile; do not output the profile. "
@@ -39,6 +41,10 @@ P_SYSTEM = (
     "Also design ONE small personal app for this user: app_title is 2-4 words, app_prompt starts with 'Build me' and "
     "describes a small, immediately useful single-page app tailored to the profile (their files, habits, or picked "
     "apps), self-contained with no accounts or API keys. "
+    "Also propose 2-3 automations: recurring routines worth running on a schedule for THIS user, drawn from their "
+    "profile and habits (for example a daily morning brief, a weekly folder cleanup, a weekday summary of their "
+    "connected apps). Each automation title is 2-4 words, prompt is one runnable instruction, cadence is exactly "
+    "'daily', 'weekday', or 'weekly'. Automations must be safe to run unattended (never delete without review). "
     "The greeting is one warm sentence that names 2-3 specific things "
     "found on the machine. Never use em-dashes or en-dashes anywhere. No markdown, no commentary, JSON only."
 )
@@ -58,11 +64,21 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
         ]
         if not starters:
             return None
+        automations = [
+            PersonalizedAutomation(
+                title=str(a.get("title", "")).strip(),
+                prompt=str(a.get("prompt", "")).strip(),
+                cadence=(str(a.get("cadence", "weekly")).strip().lower() if str(a.get("cadence", "")).strip().lower() in VALID_CADENCE else "weekly"),
+            )
+            for a in data.get("automations", [])
+            if isinstance(a, dict) and str(a.get("title", "")).strip() and str(a.get("prompt", "")).strip()
+        ]
         return PrepResponse(
             greeting=str(data.get("greeting", "")).strip(),
             starters=starters[:4],
             app_title=str(data.get("app_title", "")).strip(),
             app_prompt=str(data.get("app_prompt", "")).strip(),
+            automations=automations[:3],
         )
     except Exception:
         return None
@@ -79,7 +95,7 @@ async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepRespons
         client = get_anthropic_client_for_model(settings, aux_model)
         resp = await client.messages.create(
             model=aux_model,
-            max_tokens=aux_max_tokens_for(aux_model, base=700),
+            max_tokens=aux_max_tokens_for(aux_model, base=1100),
             system=P_SYSTEM,
             messages=[{"role": "user", "content": json.dumps(facts)}],
         )
diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index 9507599c..0c3dc256 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -69,6 +69,7 @@ class AppSettings(BaseModel):
     accent_gradient: Optional[list[str]] = None
     personalized_greeting: Optional[str] = None
     personalized_starters: list["PersonalizedStarter"] = Field(default_factory=list)
+    personalized_automations: list["PersonalizedAutomation"] = Field(default_factory=list)
     # Suppresses preflight suggestion modal entries the user dismissed; keyed by ToolDefinition.name, value ISO timestamp.
     dismissed_mcp_suggestions: dict[str, str] = Field(default_factory=dict)
     analytics_opt_in: bool = True
@@ -110,3 +111,10 @@ class CustomProvider(BaseModel):
 class PersonalizedStarter(BaseModel):
     title: str
     prompt: str
+
+
+class PersonalizedAutomation(BaseModel):
+    title: str
+    prompt: str
+    # 'daily' | 'weekday' | 'weekly'; the frontend maps this to a workflow schedule.
+    cadence: str = "weekly"
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 6bc0b7c6..ee69cb47 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -1,5 +1,5 @@
 import { API_BASE } from '@/shared/config';
-import type { PersonalizedStarter } from '@/shared/state/settingsSlice';
+import type { PersonalizedStarter, PersonalizedAutomation } from '@/shared/state/settingsSlice';
 
 export interface ProviderIdentity {
   provider: string;
@@ -27,6 +27,7 @@ export interface PrepResponse {
   starters: PersonalizedStarter[];
   app_title: string;
   app_prompt: string;
+  automations: PersonalizedAutomation[];
 }
 
 export async function fetchIdentity(): Promise<ProviderIdentity[]> {
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 2b50d01c..e4cb28a1 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -112,9 +112,10 @@ export function useOnboardingV3Pipeline() {
     const prep = await Promise.race([prepRef.current ?? Promise.resolve(null), timeout]);
     const greeting = prep?.greeting?.trim() || null;
     const starters = prep?.starters ?? [];
+    const automations = prep?.automations ?? [];
     // Jobs already launched mid-flow at prep-resolve; the reveal only composes the canvas.
     const autoPrompt = null;
-    // Await the PATCH so personalized_greeting/starters are IN settings before the reveal seeds the welcome chat; the greeting stream snapshots settings at mount.
+    // Await the PATCH so personalized_greeting/starters/automations are IN settings before the reveal seeds the welcome chat; the greeting stream snapshots settings at mount.
     try {
       await dispatch(updateSettingsPatch({
         onboarding_v3: 'done',
@@ -123,6 +124,7 @@ export function useOnboardingV3Pipeline() {
         theme: mode,
         personalized_greeting: greeting,
         personalized_starters: starters,
+        personalized_automations: automations,
       })).unwrap();
     } catch {}
     dispatch(stageReveal({ greeting, starters, scanSummary: summarizeScan(scanResultRef.current), autoPrompt }));
diff --git a/frontend/src/app/components/nudges/AutomationChips.tsx b/frontend/src/app/components/nudges/AutomationChips.tsx
new file mode 100644
index 00000000..17c9ea6e
--- /dev/null
+++ b/frontend/src/app/components/nudges/AutomationChips.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { motion } from 'framer-motion';
+import { CalendarClock, Check } from 'lucide-react';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { createWorkflow } from '@/shared/state/workflowsSlice';
+import type { PersonalizedAutomation } from '@/shared/state/settingsSlice';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+
+const DONE_KEY = 'openswarm.automations.v1';
+
+// Cadence -> a real workflow schedule. Weekday = Mon-Fri (JS weekday Sun=0), weekly = Mondays, daily = every day.
+function scheduleFor(cadence: string) {
+  const base = { enabled: true, repeat_every: 1, hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 };
+  if (cadence === 'daily') return { ...base, repeat_unit: 'day' as const, on_days: [] as number[] };
+  if (cadence === 'weekday') return { ...base, repeat_unit: 'week' as const, on_days: [1, 2, 3, 4, 5] };
+  return { ...base, repeat_unit: 'week' as const, on_days: [1] };
+}
+
+const CADENCE_LABEL: Record<string, string> = { daily: 'daily at 9am', weekday: 'weekdays at 9am', weekly: 'Mondays at 9am' };
+
+// Prep proposed routines worth automating for THIS user; each chip is one click to a real scheduled workflow. Falls back to a generic morning brief when prep gave none. One-shot per install (localStorage), so a returning user is never re-nagged.
+const AutomationChips: React.FC<{ c: ClaudeTokens }> = ({ c }) => {
+  const dispatch = useAppDispatch();
+  const model = useAppSelector((s) => s.settings.data.default_model);
+  const proposed = useAppSelector((s) => s.settings.data.personalized_automations ?? []);
+  const items: PersonalizedAutomation[] = proposed.length > 0 ? proposed.slice(0, 3) : [
+    { title: 'Morning brief', prompt: "Put together my morning brief: today's date, my location's weather, and top tech + world headlines. Keep it under 300 words and save it as a dated note on my dashboard.", cadence: 'daily' },
+  ];
+
+  const [scheduled, setScheduled] = React.useState<Record<string, boolean>>(() => {
+    try { return JSON.parse(localStorage.getItem(DONE_KEY) ?? '{}'); } catch { return {}; }
+  });
+
+  const schedule = React.useCallback(async (a: PersonalizedAutomation) => {
+    try {
+      await dispatch(createWorkflow({
+        title: a.title,
+        description: 'Suggested during onboarding.',
+        steps: [{ id: `step-${Date.now().toString(36)}`, text: a.prompt, enabled: true }],
+        schedule: scheduleFor(a.cadence),
+        model,
+      })).unwrap();
+      setScheduled((prev) => {
+        const next = { ...prev, [a.title]: true };
+        try { localStorage.setItem(DONE_KEY, JSON.stringify(next)); } catch {}
+        return next;
+      });
+    } catch { /* leave the chip in its offer state */ }
+  }, [dispatch, model]);
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.7, mt: 0.7 }}>
+      {items.map((a, i) => {
+        const done = !!scheduled[a.title];
+        return (
+          <motion.button
+            key={a.title}
+            onClick={() => { if (!done) void schedule(a); }}
+            initial={{ opacity: 0, scale: 0.92 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ type: 'spring', stiffness: 420, damping: 26, delay: 0.1 + i * 0.06 }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left',
+              padding: '10px 14px', borderRadius: 11,
+              border: `1px dashed ${done ? c.status.success : c.border.strong}`,
+              background: done ? c.status.successBg : 'transparent',
+              color: done ? c.status.success : c.text.secondary,
+              fontSize: '0.88rem', fontWeight: 500,
+              cursor: done ? 'default' : 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            {done
+              ? <Check size={14} style={{ flexShrink: 0 }} />
+              : <CalendarClock size={14} color={c.accent.primary} style={{ flexShrink: 0 }} />}
+            {done ? `${a.title} scheduled, ${CADENCE_LABEL[a.cadence] ?? 'weekly'}` : `${a.title}, ${CADENCE_LABEL[a.cadence] ?? 'weekly'}`}
+          </motion.button>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default AutomationChips;
diff --git a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
index 1288820b..c6a55c48 100644
--- a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+++ b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
@@ -2,20 +2,11 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ArrowLeft, CalendarClock, Check } from 'lucide-react';
-import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { createWorkflow } from '@/shared/state/workflowsSlice';
+import { ArrowLeft } from 'lucide-react';
+import { useAppSelector } from '@/shared/hooks';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { STARTER_CATEGORIES } from '@/shared/starterCategories';
-
-const MORNING_BRIEF_KEY = 'openswarm.morning-brief.v1';
-const MORNING_BRIEF_PROMPT =
-  'Put together my morning brief: today\'s date, the weather for my location, and the top headlines in tech and world news. ' +
-  'Keep it under 300 words and save it as a note on my dashboard titled with today\'s date.';
-
-function morningBriefCreated(): boolean {
-  try { return localStorage.getItem(MORNING_BRIEF_KEY) !== null; } catch { return false; }
-}
+import AutomationChips from '@/app/components/nudges/AutomationChips';
 
 // Quick-reply chips that sit UNDER the streamed greeting bubble. Two levels: category -> concrete prompts. Research/Write/Learn -> onPick (real run); Build -> onPickBuilder (prefill). The greeting itself is a real streamed assistant message (see useWelcomeGreeting); this is just the follow-up affordance. Pure UI, no run until the parent fires.
 const WelcomeQuickReplies: React.FC<{
@@ -23,32 +14,10 @@ const WelcomeQuickReplies: React.FC<{
   onPick: (prompt: string) => void;
   onPickBuilder: (prompt: string) => void;
 }> = ({ c, onPick, onPickBuilder }) => {
-  const dispatch = useAppDispatch();
   const [expanded, setExpanded] = React.useState<string | null>(null);
   // Onboarding v3's prep wrote starters about THIS user's machine and apps; they lead, generic categories demote to "More ideas".
   const personalized = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
-  const model = useAppSelector((s) => s.settings.data.default_model);
   const [showCategories, setShowCategories] = React.useState(personalized.length === 0);
-  const [briefState, setBriefState] = React.useState<'offer' | 'creating' | 'created' | 'hidden'>(
-    morningBriefCreated() ? 'hidden' : 'offer',
-  );
-
-  const createMorningBrief = React.useCallback(async () => {
-    setBriefState('creating');
-    try {
-      await dispatch(createWorkflow({
-        title: 'Morning brief',
-        description: 'Created during onboarding.',
-        steps: [{ id: `step-${Date.now().toString(36)}`, text: MORNING_BRIEF_PROMPT, enabled: true }],
-        schedule: { enabled: true, repeat_every: 1, repeat_unit: 'day', on_days: [], hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 },
-        model,
-      })).unwrap();
-      try { localStorage.setItem(MORNING_BRIEF_KEY, new Date().toISOString()); } catch {}
-      setBriefState('created');
-    } catch {
-      setBriefState('offer');
-    }
-  }, [dispatch, model]);
   const currentCategory = STARTER_CATEGORIES.find((cat) => cat.id === expanded);
   const isAppBuilder = currentCategory?.target === 'app-builder';
   const currentPrompts = currentCategory?.prompts ?? [];
@@ -90,28 +59,11 @@ const WelcomeQuickReplies: React.FC<{
                   {s.title}
                 </motion.button>
               ))}
-              {briefState !== 'hidden' && (
-                <motion.button
-                  key="morning-brief"
-                  onClick={() => { if (briefState === 'offer') void createMorningBrief(); }}
-                  initial={{ opacity: 0, scale: 0.92 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ type: 'spring', stiffness: 420, damping: 26, delay: 0.08 + personalized.length * 0.06 }}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left',
-                    padding: '10px 14px', borderRadius: 11,
-                    border: `1px dashed ${briefState === 'created' ? c.status.success : c.border.strong}`,
-                    background: briefState === 'created' ? c.status.successBg : 'transparent',
-                    color: briefState === 'created' ? c.status.success : c.text.secondary,
-                    fontSize: '0.88rem', fontWeight: 500,
-                    cursor: briefState === 'offer' ? 'pointer' : 'default', fontFamily: 'inherit',
-                  }}
-                >
-                  {briefState === 'created' ? <Check size={14} style={{ flexShrink: 0 }} /> : <CalendarClock size={14} color={c.accent.primary} style={{ flexShrink: 0 }} />}
-                  {briefState === 'created' ? 'Morning brief scheduled, daily at 9am' : briefState === 'creating' ? 'Setting up your morning brief...' : 'Morning brief, every day at 9am'}
-                </motion.button>
-              )}
             </Box>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.78rem', mt: 1.4, mb: 0.6 }}>
+              worth putting on a schedule
+            </Typography>
+            <AutomationChips c={c} />
             <Box
               component="button"
               onClick={() => setShowCategories(true)}
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index c7e481dd..f1d85a1f 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -84,6 +84,7 @@ export interface AppSettings {
   accent_gradient?: string[] | null;
   personalized_greeting?: string | null;
   personalized_starters?: PersonalizedStarter[];
+  personalized_automations?: PersonalizedAutomation[];
 }
 
 export interface PersonalizedStarter {
@@ -91,6 +92,12 @@ export interface PersonalizedStarter {
   prompt: string;
 }
 
+export interface PersonalizedAutomation {
+  title: string;
+  prompt: string;
+  cadence: 'daily' | 'weekday' | 'weekly';
+}
+
 export interface ActivateSubscriptionPayload {
   token: string;
   plan?: string | null;

From 01ea10d88888f558e495c943780a4944177a2527 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 17:30:21 -0700
Subject: [PATCH 038/248] [eric] onboarding: clearer reveal (no leftover v2
 tour, plain-english note + keep/remove copy)

---
 .../app/components/Onboarding/OnboardingRoot.tsx    |  4 ++--
 .../src/app/components/nudges/PrepKeepToast.tsx     |  6 +++---
 .../hooks/lifecycle/useOnboardingRevealSeed.ts      | 13 ++++++++-----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/Onboarding/OnboardingRoot.tsx b/frontend/src/app/components/Onboarding/OnboardingRoot.tsx
index e4b71fef..300334dc 100644
--- a/frontend/src/app/components/Onboarding/OnboardingRoot.tsx
+++ b/frontend/src/app/components/Onboarding/OnboardingRoot.tsx
@@ -65,8 +65,8 @@ const OnboardingRoot: React.FC = () => {
       !(s.onboardingProgress.completedSteps ?? []).includes('launch_agent') &&
       Object.keys(s.agents?.sessions ?? {}).length === 0,
   );
-  // Onboarding v3 owns the window on a fresh install; the v2 cursor tour stays dormant until the flow resolves.
-  const v3Owns = useAppSelector((s) => s.onboardingV3.flowActive);
+  // Onboarding v3 owns the window on a fresh install; the v2 cursor tour + panel stay dormant while the flow runs AND forever after it resolves (a v3'd user has already onboarded, so the v2 "connect your model / Show me" tour on top of the v3 reveal is contradictory clutter).
+  const v3Owns = useAppSelector((s) => s.onboardingV3.flowActive || !!s.settings.data.onboarding_v3);
   const welcomeFiredRef = useRef(false);
   const welcomeTimerRef = useRef<number | null>(null);
   useEffect(() => {
diff --git a/frontend/src/app/components/nudges/PrepKeepToast.tsx b/frontend/src/app/components/nudges/PrepKeepToast.tsx
index 95bb1560..5b9a9358 100644
--- a/frontend/src/app/components/nudges/PrepKeepToast.tsx
+++ b/frontend/src/app/components/nudges/PrepKeepToast.tsx
@@ -58,15 +58,15 @@ const PrepKeepToast: React.FC = () => {
         action={
           <>
             <Button size="small" onClick={finish} sx={{ color: c.accent.primary, fontWeight: 700 }}>
-              Keep
+              Keep them
             </Button>
             <Button size="small" onClick={discard} sx={{ color: c.text.tertiary }}>
-              Discard
+              Stop &amp; remove
             </Button>
           </>
         }
       >
-        {`I started ${names} while you set up. Keep going?`}
+        {`These are ${names}, which I started for you during setup. Keep them, or stop and remove them?`}
       </Alert>
     </Snackbar>
   );
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index 09e7ee6c..fb4c3dab 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -34,11 +34,14 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
         const cy = (vr.height / 2 - cs.panY) / cs.zoom;
         const audit = prepped.find((j) => j.kind === 'audit');
         const app = prepped.find((j) => j.kind === 'app');
-        const lines: string[] = ['While you were setting up, I got started.'];
-        if (scanSummary) lines.push(`Spotted on this Mac: ${scanSummary}.`);
-        if (audit) lines.push(`Already running: ${audit.title}.`);
-        if (app) lines.push(`Already building: ${app.title}.`);
-        if (starters.length > 0) lines.push(`Ready to run:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
+        const lines: string[] = ['Here is what I set up for you.'];
+        if (scanSummary) lines.push(`Looked around: ${scanSummary}.`);
+        const cards: string[] = [];
+        if (audit) cards.push(`- ${audit.title} (running now, on the left)`);
+        if (app) cards.push(`- ${app.title} (building now)`);
+        if (cards.length > 0) lines.push(`Working on:\n${cards.join('\n')}`);
+        if (starters.length > 0) lines.push(`Ready when you are:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
+        lines.push('Nothing is saved or deleted without you. Keep or discard anytime.');
         dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + 48, y: cy - 140, color: 'yellow', content: lines.join('\n\n') }));
         prepped.forEach((job, i) => {
           dispatch(placeCard({

From b73ff9ab6fff437f6d9eb2c39f371f5a79ec9231 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 17:57:11 -0700
Subject: [PATCH 039/248] [eric] onboarding: reveal shows what it saw and why
 it acted (per-job personalized reasons)

---
 backend/apps/onboarding/models.py                 |  1 +
 backend/apps/onboarding/prep.py                   | 11 ++++++++---
 backend/apps/settings/models.py                   |  2 ++
 backend/tests/test_onboarding.py                  | 14 ++++++++++++++
 .../components/OnboardingV3/onboardingV3Api.ts    |  1 +
 .../OnboardingV3/useOnboardingV3Pipeline.ts       |  8 ++++----
 .../hooks/lifecycle/useOnboardingRevealSeed.ts    | 15 ++++++++-------
 frontend/src/shared/state/onboardingV3Slice.ts    |  2 ++
 frontend/src/shared/state/settingsSlice.ts        |  1 +
 9 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index aba38d62..c57f6c83 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -56,4 +56,5 @@ class PrepResponse(BaseModel):
     starters: List[PersonalizedStarter] = Field(default_factory=list)
     app_title: str = ""
     app_prompt: str = ""
+    app_reason: str = ""
     automations: List[PersonalizedAutomation] = Field(default_factory=list)
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index b4cc113b..0092268b 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -27,7 +27,7 @@ P_SYSTEM = (
     "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
-    '{"greeting": string, "starters": [{"title": string, "prompt": string}], "app_title": string, "app_prompt": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
+    '{"greeting": string, "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
     "First, silently infer a short profile of this user. If usage_summary is present it is the STRONGEST signal (it is "
     "what they actually ask their AI about and facts their AI remembers about them); weight it above everything else, "
     "then apps, folders, plan tier, email domain. Tune every task and the personal app to that profile; do not output the profile. "
@@ -38,9 +38,13 @@ P_SYSTEM = (
     "modify or delete existing files, because it may be run automatically on the user's behalf. Every starter "
     "must produce a tangible result the user can see (a sorted "
     "folder, a report, a working page); never propose setup, documentation of preferences, or planning-only tasks. "
+    "Each starter's 'reason' is ONE short standalone clause (max 12 words, no leading 'because') naming the SPECIFIC "
+    "real thing you observed (a folder, a file count, a picked app, a usage fact) that makes this task useful for THIS "
+    "user; it must be grounded in the input facts, never invented, and read like a person pointing at what they saw. "
     "Also design ONE small personal app for this user: app_title is 2-4 words, app_prompt starts with 'Build me' and "
     "describes a small, immediately useful single-page app tailored to the profile (their files, habits, or picked "
-    "apps), self-contained with no accounts or API keys. "
+    "apps), self-contained with no accounts or API keys. app_reason follows the same one-clause grounded-observation "
+    "rule as a starter reason. "
     "Also propose 2-3 automations: recurring routines worth running on a schedule for THIS user, drawn from their "
     "profile and habits (for example a daily morning brief, a weekly folder cleanup, a weekday summary of their "
     "connected apps). Each automation title is 2-4 words, prompt is one runnable instruction, cadence is exactly "
@@ -58,7 +62,7 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
     try:
         data = json.loads(match.group(0))
         starters = [
-            PersonalizedStarter(title=str(s.get("title", "")).strip(), prompt=str(s.get("prompt", "")).strip())
+            PersonalizedStarter(title=str(s.get("title", "")).strip(), prompt=str(s.get("prompt", "")).strip(), reason=str(s.get("reason", "")).strip())
             for s in data.get("starters", [])
             if isinstance(s, dict) and str(s.get("title", "")).strip() and str(s.get("prompt", "")).strip()
         ]
@@ -78,6 +82,7 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
             starters=starters[:4],
             app_title=str(data.get("app_title", "")).strip(),
             app_prompt=str(data.get("app_prompt", "")).strip(),
+            app_reason=str(data.get("app_reason", "")).strip(),
             automations=automations[:3],
         )
     except Exception:
diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index 0c3dc256..db37fc8b 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -111,6 +111,8 @@ class CustomProvider(BaseModel):
 class PersonalizedStarter(BaseModel):
     title: str
     prompt: str
+    # One short clause tying this task to something real we saw about the user; the reveal shows it off.
+    reason: str = ""
 
 
 class PersonalizedAutomation(BaseModel):
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index 07fd81a8..c277becd 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -84,10 +84,24 @@ def test_parse_prep_strict_and_lenient():
     assert parsed is not None
     assert parsed.greeting == "Hey!"
     assert [s.title for s in parsed.starters] == ["A", "B"]
+    # Reason is optional; missing reason defaults to empty, never drops the starter.
+    assert parsed.starters[0].reason == ""
     assert parse_prep("no json here") is None
     assert parse_prep('{"greeting": "hi", "starters": []}') is None
 
 
+def test_parse_prep_carries_reasons():
+    rich = (
+        '{"greeting": "Hey!", "app_title": "Lift Log", "app_prompt": "Build me a lifting tracker", '
+        '"app_reason": "you plan lifts with ChatGPT daily", '
+        '"starters": [{"title": "Audit Downloads", "prompt": "audit it", "reason": "1,305 files piling up there"}]}'
+    )
+    parsed = parse_prep(rich)
+    assert parsed is not None
+    assert parsed.starters[0].reason == "1,305 files piling up there"
+    assert parsed.app_reason == "you plan lifts with ChatGPT daily"
+
+
 @pytest.mark.asyncio
 async def test_build_prep_fails_open_without_provider(monkeypatch):
     async def boom(*args, **kwargs):
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index ee69cb47..6c5c119f 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -27,6 +27,7 @@ export interface PrepResponse {
   starters: PersonalizedStarter[];
   app_title: string;
   app_prompt: string;
+  app_reason: string;
   automations: PersonalizedAutomation[];
 }
 
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index e4cb28a1..6b8fd7ba 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -71,7 +71,7 @@ export function useOnboardingV3Pipeline() {
   }, []);
 
   // Fire one real background agent; the session exists in redux without a card until the reveal composes the canvas.
-  const launchJob = useCallback((title: string, prompt: string, kind: 'audit' | 'app') => {
+  const launchJob = useCallback((title: string, prompt: string, kind: 'audit' | 'app', reason: string) => {
     const { model: liveModel } = launchCtxRef.current;
     const dashboardId = getLastDashboardId() ?? undefined;
     const config: AgentConfig = { name: title, model: liveModel, mode: 'agent', dashboard_id: dashboardId };
@@ -79,7 +79,7 @@ export function useOnboardingV3Pipeline() {
     void dispatch(launchAndSendFirstMessage({ draftId, config, prompt, mode: 'agent', model: liveModel }))
       .then((action) => {
         if (launchAndSendFirstMessage.fulfilled.match(action)) {
-          dispatch(addPreppedJob({ sessionId: action.payload.session.id, title, kind }));
+          dispatch(addPreppedJob({ sessionId: action.payload.session.id, title, kind, reason }));
         }
       })
       .catch(() => {});
@@ -96,8 +96,8 @@ export function useOnboardingV3Pipeline() {
     void prepRef.current.then((prep) => {
       if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
       launchedRef.current = true;
-      if (prep.starters.length > 0) launchJob(prep.starters[0].title, prep.starters[0].prompt, 'audit');
-      if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app');
+      if (prep.starters.length > 0) launchJob(prep.starters[0].title, prep.starters[0].prompt, 'audit', prep.starters[0].reason ?? '');
+      if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app', prep.app_reason ?? '');
     });
   }, [launchJob]);
 
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index fb4c3dab..c6f1e05d 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -34,14 +34,15 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
         const cy = (vr.height / 2 - cs.panY) / cs.zoom;
         const audit = prepped.find((j) => j.kind === 'audit');
         const app = prepped.find((j) => j.kind === 'app');
-        const lines: string[] = ['Here is what I set up for you.'];
-        if (scanSummary) lines.push(`Looked around: ${scanSummary}.`);
+        const jobLine = (j: typeof prepped[number]) => (j.reason ? `- ${j.title}: ${j.reason}` : `- ${j.title}`);
+        const lines: string[] = ['While you were setting up, I got a head start.'];
+        if (scanSummary) lines.push(`I looked around your Mac and saw ${scanSummary}.`);
         const cards: string[] = [];
-        if (audit) cards.push(`- ${audit.title} (running now, on the left)`);
-        if (app) cards.push(`- ${app.title} (building now)`);
-        if (cards.length > 0) lines.push(`Working on:\n${cards.join('\n')}`);
-        if (starters.length > 0) lines.push(`Ready when you are:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
-        lines.push('Nothing is saved or deleted without you. Keep or discard anytime.');
+        if (audit) cards.push(jobLine(audit));
+        if (app) cards.push(jobLine(app));
+        if (cards.length > 0) lines.push(`So here is what I already have going (cards on your left):\n${cards.join('\n')}`);
+        if (starters.length > 0) lines.push(`Ready whenever you want:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
+        lines.push('Nothing is saved or deleted without you. Keep it going or clear it anytime.');
         dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + 48, y: cy - 140, color: 'yellow', content: lines.join('\n\n') }));
         prepped.forEach((job, i) => {
           dispatch(placeCard({
diff --git a/frontend/src/shared/state/onboardingV3Slice.ts b/frontend/src/shared/state/onboardingV3Slice.ts
index fa208262..cff6a0bd 100644
--- a/frontend/src/shared/state/onboardingV3Slice.ts
+++ b/frontend/src/shared/state/onboardingV3Slice.ts
@@ -7,6 +7,8 @@ export interface PreppedJob {
   sessionId: string;
   title: string;
   kind: 'audit' | 'app';
+  /** The one-clause "why we started this for you", shown in the reveal note. */
+  reason?: string;
 }
 
 export interface OnboardingV3State {
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index f1d85a1f..87b4a479 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -90,6 +90,7 @@ export interface AppSettings {
 export interface PersonalizedStarter {
   title: string;
   prompt: string;
+  reason?: string;
 }
 
 export interface PersonalizedAutomation {

From 40cb5dd8dd4058cbaf2f815224c0e4fdfae305a2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 18:36:01 -0700
Subject: [PATCH 040/248] [eric] onboarding: harvest the full subscription chat
 history (all titles paginated + memory), not just 25

---
 frontend/src/shared/providerUsage.test.ts | 28 +++++++++++
 frontend/src/shared/providerUsage.ts      | 57 +++++++++++++++++------
 2 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/shared/providerUsage.test.ts

diff --git a/frontend/src/shared/providerUsage.test.ts b/frontend/src/shared/providerUsage.test.ts
new file mode 100644
index 00000000..b73ba917
--- /dev/null
+++ b/frontend/src/shared/providerUsage.test.ts
@@ -0,0 +1,28 @@
+// Run: node --test frontend/src/shared/providerUsage.test.ts
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { summarizeUsage, type ProviderUsage } from './providerUsage.ts';
+
+test('failed or null read yields empty summary', () => {
+  assert.equal(summarizeUsage(null), '');
+  assert.equal(summarizeUsage({ ok: false, total: 0, titles: [], memories: [] }), '');
+});
+
+test('summary leads with memory, names scale, and lists recent topics', () => {
+  const u: ProviderUsage = {
+    ok: true,
+    total: 812,
+    titles: ['Swift concurrency', 'Deadlift form check', 'Tax on RSUs'],
+    memories: ['Has an Akita', 'Squats 495'],
+  };
+  const s = summarizeUsage(u);
+  assert.match(s, /812 past AI conversations/);
+  assert.match(s, /Has an Akita; Squats 495/);
+  assert.match(s, /Swift concurrency; Deadlift form check; Tax on RSUs/);
+});
+
+test('summary is hard-capped so a heavy user never ships a wall of PII', () => {
+  const titles = Array.from({ length: 1000 }, (_, i) => `conversation number ${i} about a very specific topic`);
+  const s = summarizeUsage({ ok: true, total: 1000, titles, memories: [] });
+  assert.ok(s.length <= 4000, `summary length ${s.length} exceeded 4000`);
+});
diff --git a/frontend/src/shared/providerUsage.ts b/frontend/src/shared/providerUsage.ts
index aea6cbf0..58370f77 100644
--- a/frontend/src/shared/providerUsage.ts
+++ b/frontend/src/shared/providerUsage.ts
@@ -1,37 +1,65 @@
-// Reads what the user actually uses their AI for, from a logged-in provider website inside a browser-card webview: ChatGPT Memory + recent titles, or Claude conversation titles. Same-origin fetch using the site's own session (the proven extension technique). The RAW result never leaves the renderer; only the derived summary goes to prep, and even that is dropped after.
+// Reads what the user actually uses their AI for, from a logged-in provider website (chatgpt.com / claude.ai) using that site's own session. Sweeps the FULL conversation history (all titles, paginated) plus ChatGPT Memory, so prep can profile what the user keeps coming back to. Same-origin fetch from the page context (the proven technique); the RAW result never leaves the renderer, only the derived summary goes to prep, and even that is dropped after.
 
 export type UsageProvider = 'codex' | 'claude';
 
 export interface ProviderUsage {
   ok: boolean;
+  total: number;
   titles: string[];
   memories: string[];
 }
 
-// Runs in the WEBVIEW page context (chatgpt.com / claude.ai), so it inherits the live session. Kept as a string because it is injected via webview.executeJavaScript.
+// Runs in the WEBVIEW/offscreen page context (chatgpt.com / claude.ai), so it inherits the live session. Kept as a string because it is injected via executeJavaScript. Hard caps (pages, titles, memory) bound the work + the PII footprint even for a user with thousands of chats; every fetch fails open to empty.
 export const USAGE_READ_JS: Record<UsageProvider, string> = {
   codex: `(async () => {
+    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
     try {
       const sess = await fetch('/api/auth/session', {credentials:'include'}).then(r=>r.json());
-      if (!sess || !sess.accessToken) return {ok:false, titles:[], memories:[]};
+      if (!sess || !sess.accessToken) return {ok:false, total:0, titles:[], memories:[]};
       const H = {headers:{Authorization:'Bearer '+sess.accessToken, accept:'application/json'}, credentials:'include'};
-      const conv = await fetch('/backend-api/conversations?offset=0&limit=25&order=updated', H).then(r=>r.ok?r.json():null).catch(()=>null);
+      const seen = new Set(); const titles = [];
+      let offset = 0, page = 0;
+      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
+        const j = await fetch('/backend-api/conversations?offset='+offset+'&limit='+PAGE+'&order=updated', H).then(r=>r.ok?r.json():null).catch(()=>null);
+        const items = (j && j.items) || [];
+        if (!items.length) break;
+        let fresh = 0;
+        for (const c of items) { if (c && c.id && !seen.has(c.id)) { seen.add(c.id); if (c.title) titles.push(c.title); fresh++; } }
+        if (fresh === 0) break;
+        if (items.length < PAGE) break;
+        offset += PAGE; page++;
+        await new Promise(r=>setTimeout(r, GAP_MS));
+      }
       const mem = await fetch('/backend-api/memories?include_memory_entries=true', H).then(r=>r.ok?r.json():null).catch(()=>null);
       return {
         ok: true,
-        titles: ((conv && conv.items) || []).map(c=>c.title).filter(Boolean).slice(0,25),
-        memories: ((mem && mem.memories) || []).map(m=>m.content).filter(Boolean).slice(0,25),
+        total: seen.size,
+        titles: titles.slice(0, CAP_TITLES),
+        memories: ((mem && mem.memories) || []).map(m=>m.content).filter(Boolean).slice(0, 40),
       };
-    } catch (e) { return {ok:false, titles:[], memories:[]}; }
+    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
   })()`,
   claude: `(async () => {
+    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
     try {
       const orgs = await fetch('/api/organizations', {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
-      if (!Array.isArray(orgs) || !orgs.length) return {ok:false, titles:[], memories:[]};
+      if (!Array.isArray(orgs) || !orgs.length) return {ok:false, total:0, titles:[], memories:[]};
       const org = orgs[0].uuid;
-      const convs = await fetch('/api/organizations/'+org+'/chat_conversations?limit=30', {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
-      return {ok:true, titles:(Array.isArray(convs)?convs:[]).map(c=>c.name).filter(Boolean).slice(0,30), memories:[]};
-    } catch (e) { return {ok:false, titles:[], memories:[]}; }
+      const seen = new Set(); const titles = [];
+      let offset = 0, page = 0;
+      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
+        const convs = await fetch('/api/organizations/'+org+'/chat_conversations?limit='+PAGE+'&offset='+offset, {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
+        const items = Array.isArray(convs) ? convs : [];
+        if (!items.length) break;
+        let fresh = 0;
+        for (const c of items) { const id = c && c.uuid; if (id && !seen.has(id)) { seen.add(id); if (c.name) titles.push(c.name); fresh++; } }
+        if (fresh === 0) break;
+        if (items.length < PAGE) break;
+        offset += PAGE; page++;
+        await new Promise(r=>setTimeout(r, GAP_MS));
+      }
+      return {ok:true, total:seen.size, titles:titles.slice(0, CAP_TITLES), memories:[]};
+    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
   })()`,
 };
 
@@ -40,11 +68,12 @@ export const USAGE_ORIGIN: Record<UsageProvider, string> = {
   claude: 'https://claude.ai/',
 };
 
-// Turn the raw read into a compact block for the prep prompt. Cap hard so we never ship a wall of PII; titles + memory facts are the whole signal.
+// Turn the raw read into a compact profile block for the prep prompt: the memory facts (strongest), the scale, and the most-recent topics. Capped hard so we never ship a wall of PII even for a heavy user; the aux model turns this into the profile.
 export function summarizeUsage(u: ProviderUsage | null): string {
   if (!u || !u.ok) return '';
   const parts: string[] = [];
+  if (u.total > 0) parts.push(`They have ${u.total} past AI conversations.`);
   if (u.memories.length > 0) parts.push('Facts their AI remembers about them: ' + u.memories.join('; '));
-  if (u.titles.length > 0) parts.push('Recent things they asked their AI: ' + u.titles.join('; '));
-  return parts.join('\n').slice(0, 1500);
+  if (u.titles.length > 0) parts.push('Topics they keep coming back to (recent first): ' + u.titles.slice(0, 150).join('; '));
+  return parts.join('\n').slice(0, 4000);
 }

From 2e3de37a54aabc28f0b500b2ceb422fcc7105fd2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 18:40:40 -0700
Subject: [PATCH 041/248] [eric] onboarding: harvest subscription history
 silently offscreen (no card, no extra login step)

---
 electron/hiddenBrowser.js                     | 15 +++-
 electron/main.js                              |  9 ++
 electron/preload.js                           |  2 +
 electron/usageHarvest.js                      | 82 +++++++++++++++++++
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 12 ++-
 frontend/src/shared/providerUsage.ts          | 61 +-------------
 frontend/src/types/electron.d.ts              |  1 +
 7 files changed, 114 insertions(+), 68 deletions(-)
 create mode 100644 electron/usageHarvest.js

diff --git a/electron/hiddenBrowser.js b/electron/hiddenBrowser.js
index 99bb5e64..a01007db 100644
--- a/electron/hiddenBrowser.js
+++ b/electron/hiddenBrowser.js
@@ -68,6 +68,19 @@ async function hiddenFetch(partition, url) {
   });
 }
 
+// Load a URL offscreen on the given partition (so it inherits that partition's
+// logged-in session) and run an app-authored script in the page context, returning
+// whatever it resolves to. Used to read the user's own provider history (chatgpt.com /
+// claude.ai) with no visible card. The script is caller-owned and must be app code,
+// never anything a remote page or the renderer can choose; the offscreen window is
+// destroyed in withWindow's finally regardless of outcome.
+async function hiddenEval(partition, url, js) {
+  return withWindow(partition, async (win) => {
+    await loadAndSettle(win, url);
+    return win.webContents.executeJavaScript(js, true).catch(() => null);
+  });
+}
+
 // Google first (direct result URLs, best quality); DuckDuckGo in a real browser
 // second (immune to the httpx 202 throttle); Bing last (results are redirect-wrapped).
 const ENGINES = [
@@ -101,4 +114,4 @@ async function hiddenSearch(partition, query, numResults) {
   return { error: 'all browser search engines failed', detail: errors.join('; ') };
 }
 
-module.exports = { hiddenFetch, hiddenSearch };
+module.exports = { hiddenFetch, hiddenSearch, hiddenEval };
diff --git a/electron/main.js b/electron/main.js
index f6debeac..c74d28ea 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -54,6 +54,7 @@ const { spawn, execFileSync } = require('child_process');
 const os = require('os');
 const fs = require('fs');
 const hiddenBrowser = require('./hiddenBrowser');
+const usageHarvest = require('./usageHarvest');
 const getPort = require('get-port');
 const http = require('http');
 const affiliateTracking = require('./affiliateTracking');
@@ -2809,6 +2810,14 @@ async function readPartitionCookies(domain) {
 }
 ipcMain.handle('get-partition-cookies', (_e, domain) => readPartitionCookies(domain));
 
+// Silently read the user's own chatgpt.com / claude.ai history from the browser
+// partition's logged-in session (offscreen, no card) so onboarding can personalize.
+// Provider-gated + main-owned script (see usageHarvest.js); fails open to the empty
+// shape when no session exists in the partition.
+ipcMain.handle('harvest-usage', (_e, provider) =>
+  usageHarvest.harvest(BROWSER_PARTITION, provider).catch(() => ({ ok: false, total: 0, titles: [], memories: [] })),
+);
+
 // Suspend/resume state capsules: the app renderer stages a resumed webview's sessionStorage snapshot here (keyed by that guest's webContents id) right before loadURL; the guest preload sync-takes it at document-start with an origin match, so page scripts see restored state and logins survive suspension. In-memory only, single-shot, short TTL; a guest can only ever take its OWN capsule.
 const pendingSessionCapsules = new Map();
 const SESSION_CAPSULE_TTL_MS = 2 * 60 * 1000;
diff --git a/electron/preload.js b/electron/preload.js
index 93a1e8b2..e82275ca 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -62,6 +62,8 @@ contextBridge.exposeInMainWorld('openswarm', {
   connectSlack: () => ipcRenderer.invoke('connect-slack'),
   // Hands a vetted social platform's partition cookies to its session-backed MCP shim (allowlisted domains only, gated again in the main process).
   getPartitionCookies: (domain) => ipcRenderer.invoke('get-partition-cookies', domain),
+  // Silently reads the user's own chatgpt.com/claude.ai history offscreen (no card) for onboarding personalization; main owns the injected script + gates the provider.
+  harvestUsage: (provider) => ipcRenderer.invoke('harvest-usage', provider),
   // Suspend/resume state capsule: stages a resumed webview's sessionStorage snapshot in main (keyed by webContents id, short TTL) so the guest preload can sync-take it at document-start. Fire-and-forget; main validates the sender.
   setSessionCapsule: (wcId, capsule) => ipcRenderer.send('browser-capsule-set', wcId, capsule),
   sendCdpCommand: (wcId, method, params, sessionId) => ipcRenderer.invoke('send-cdp-command', wcId, method, params, sessionId),
diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
new file mode 100644
index 00000000..a55d6629
--- /dev/null
+++ b/electron/usageHarvest.js
@@ -0,0 +1,82 @@
+// Silently read the user's OWN provider chat history (chatgpt.com / claude.ai) from
+// the browser partition's logged-in session, with no visible card. Onboarding prep
+// uses the result to profile what the user actually cares about. The injected script
+// is defined HERE (main-owned), so the offscreen exec can never be pointed at a script
+// the renderer or a remote page chose. Only reachable when a session already exists in
+// the partition; otherwise it fails open to {ok:false} and prep falls back to the scan.
+//
+// The RAW read never touches disk or redux: it is returned once to the renderer, which
+// derives a capped summary for prep and drops the rest. See summarizeUsage (frontend).
+
+const hiddenBrowser = require('./hiddenBrowser');
+
+const ORIGIN = {
+  codex: 'https://chatgpt.com/',
+  claude: 'https://claude.ai/',
+};
+
+// Runs in the page context. Sweeps the full conversation history (all titles,
+// paginated + deduped) plus ChatGPT Memory. Hard caps bound the work + PII footprint
+// even for a user with thousands of chats; every fetch fails open to empty.
+const SCRIPT = {
+  codex: `(async () => {
+    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
+    try {
+      const sess = await fetch('/api/auth/session', {credentials:'include'}).then(r=>r.json());
+      if (!sess || !sess.accessToken) return {ok:false, total:0, titles:[], memories:[]};
+      const H = {headers:{Authorization:'Bearer '+sess.accessToken, accept:'application/json'}, credentials:'include'};
+      const seen = new Set(); const titles = [];
+      let offset = 0, page = 0;
+      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
+        const j = await fetch('/backend-api/conversations?offset='+offset+'&limit='+PAGE+'&order=updated', H).then(r=>r.ok?r.json():null).catch(()=>null);
+        const items = (j && j.items) || [];
+        if (!items.length) break;
+        let fresh = 0;
+        for (const c of items) { if (c && c.id && !seen.has(c.id)) { seen.add(c.id); if (c.title) titles.push(c.title); fresh++; } }
+        if (fresh === 0) break;
+        if (items.length < PAGE) break;
+        offset += PAGE; page++;
+        await new Promise(r=>setTimeout(r, GAP_MS));
+      }
+      const mem = await fetch('/backend-api/memories?include_memory_entries=true', H).then(r=>r.ok?r.json():null).catch(()=>null);
+      return {
+        ok: true,
+        total: seen.size,
+        titles: titles.slice(0, CAP_TITLES),
+        memories: ((mem && mem.memories) || []).map(m=>m.content).filter(Boolean).slice(0, 40),
+      };
+    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
+  })()`,
+  claude: `(async () => {
+    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
+    try {
+      const orgs = await fetch('/api/organizations', {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
+      if (!Array.isArray(orgs) || !orgs.length) return {ok:false, total:0, titles:[], memories:[]};
+      const org = orgs[0].uuid;
+      const seen = new Set(); const titles = [];
+      let offset = 0, page = 0;
+      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
+        const convs = await fetch('/api/organizations/'+org+'/chat_conversations?limit='+PAGE+'&offset='+offset, {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
+        const items = Array.isArray(convs) ? convs : [];
+        if (!items.length) break;
+        let fresh = 0;
+        for (const c of items) { const id = c && c.uuid; if (id && !seen.has(id)) { seen.add(id); if (c.name) titles.push(c.name); fresh++; } }
+        if (fresh === 0) break;
+        if (items.length < PAGE) break;
+        offset += PAGE; page++;
+        await new Promise(r=>setTimeout(r, GAP_MS));
+      }
+      return {ok:true, total:seen.size, titles:titles.slice(0, CAP_TITLES), memories:[]};
+    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
+  })()`,
+};
+
+const EMPTY = { ok: false, total: 0, titles: [], memories: [] };
+
+async function harvest(partition, provider) {
+  if (provider !== 'codex' && provider !== 'claude') return EMPTY;
+  const res = await hiddenBrowser.hiddenEval(partition, ORIGIN[provider], SCRIPT[provider]).catch(() => null);
+  return res && typeof res === 'object' && res.ok ? res : EMPTY;
+}
+
+module.exports = { harvest };
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 6b8fd7ba..7e7c816e 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -10,8 +10,7 @@ import {
   fetchIdentity, runPrep, runScan, summarizeScan,
   type PrepResponse, type ProviderIdentity, type ScanResult,
 } from './onboardingV3Api';
-import { USAGE_READ_JS, summarizeUsage, type ProviderUsage, type UsageProvider } from '@/shared/providerUsage';
-import { findWebviewByDomain } from '@/shared/browserRegistry';
+import { summarizeUsage, type ProviderUsage, type UsageProvider } from '@/shared/providerUsage';
 import type { ModelOption } from '@/shared/state/modelsSlice';
 
 // The auto-launched onboarding jobs must ride the CHEAP tier, not the user's premium default; running two Sonnet/Opus agents unprompted on first launch would burn real quota. Pick the lowest-intelligence (cheapest) model in the default's provider group, so a Claude user's demo runs on Haiku, a ChatGPT user's on mini.
@@ -47,17 +46,16 @@ export function useOnboardingV3Pipeline() {
     fetchIdentity().then((ids) => { identityRef.current = ids; setIdentity(ids); }).catch(() => {});
   }, []);
 
-  // Read what the user works on from an already-open, logged-in provider card (chatgpt.com / claude.ai) via the proven findWebviewByDomain + executeJavaScript path. Fail-open: no card, not logged in, or off-Electron => empty summary, prep falls back to scan + identity.
+  // Read what the user works on, silently and with no card: main opens the provider site offscreen on the browser partition and runs its own harvest script (see electron/usageHarvest.js). Fail-open: no session in the partition, off-Electron, or an error => empty summary, prep falls back to scan + identity.
   const kickUsageRead = useCallback((provider: string, consented: boolean) => {
     if (usageReadRef.current || !consented) return;
     const key: UsageProvider | null = provider === 'codex' ? 'codex' : provider === 'claude' ? 'claude' : null;
     if (!key) return;
     usageReadRef.current = (async () => {
       try {
-        const domain = key === 'codex' ? 'chatgpt.com' : 'claude.ai';
-        const wv = findWebviewByDomain(domain);
-        if (!wv || typeof wv.executeJavaScript !== 'function') return;
-        const raw = (await wv.executeJavaScript(USAGE_READ_JS[key])) as ProviderUsage | null;
+        const harvestUsage = window.openswarm?.harvestUsage;
+        if (typeof harvestUsage !== 'function') return;
+        const raw = (await harvestUsage(key)) as ProviderUsage | null;
         usageSummaryRef.current = summarizeUsage(raw);
       } catch { /* fail-open */ }
     })();
diff --git a/frontend/src/shared/providerUsage.ts b/frontend/src/shared/providerUsage.ts
index 58370f77..6afa85d8 100644
--- a/frontend/src/shared/providerUsage.ts
+++ b/frontend/src/shared/providerUsage.ts
@@ -1,4 +1,4 @@
-// Reads what the user actually uses their AI for, from a logged-in provider website (chatgpt.com / claude.ai) using that site's own session. Sweeps the FULL conversation history (all titles, paginated) plus ChatGPT Memory, so prep can profile what the user keeps coming back to. Same-origin fetch from the page context (the proven technique); the RAW result never leaves the renderer, only the derived summary goes to prep, and even that is dropped after.
+// The user's provider chat history is read offscreen in the main process (see electron/usageHarvest.js), which owns the injected script + the partition session. This module holds only the shared shape + the pure summarizer that turns the raw read into the compact profile block prep sees. The raw read is dropped after; only this summary travels.
 
 export type UsageProvider = 'codex' | 'claude';
 
@@ -9,65 +9,6 @@ export interface ProviderUsage {
   memories: string[];
 }
 
-// Runs in the WEBVIEW/offscreen page context (chatgpt.com / claude.ai), so it inherits the live session. Kept as a string because it is injected via executeJavaScript. Hard caps (pages, titles, memory) bound the work + the PII footprint even for a user with thousands of chats; every fetch fails open to empty.
-export const USAGE_READ_JS: Record<UsageProvider, string> = {
-  codex: `(async () => {
-    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
-    try {
-      const sess = await fetch('/api/auth/session', {credentials:'include'}).then(r=>r.json());
-      if (!sess || !sess.accessToken) return {ok:false, total:0, titles:[], memories:[]};
-      const H = {headers:{Authorization:'Bearer '+sess.accessToken, accept:'application/json'}, credentials:'include'};
-      const seen = new Set(); const titles = [];
-      let offset = 0, page = 0;
-      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
-        const j = await fetch('/backend-api/conversations?offset='+offset+'&limit='+PAGE+'&order=updated', H).then(r=>r.ok?r.json():null).catch(()=>null);
-        const items = (j && j.items) || [];
-        if (!items.length) break;
-        let fresh = 0;
-        for (const c of items) { if (c && c.id && !seen.has(c.id)) { seen.add(c.id); if (c.title) titles.push(c.title); fresh++; } }
-        if (fresh === 0) break;
-        if (items.length < PAGE) break;
-        offset += PAGE; page++;
-        await new Promise(r=>setTimeout(r, GAP_MS));
-      }
-      const mem = await fetch('/backend-api/memories?include_memory_entries=true', H).then(r=>r.ok?r.json():null).catch(()=>null);
-      return {
-        ok: true,
-        total: seen.size,
-        titles: titles.slice(0, CAP_TITLES),
-        memories: ((mem && mem.memories) || []).map(m=>m.content).filter(Boolean).slice(0, 40),
-      };
-    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
-  })()`,
-  claude: `(async () => {
-    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
-    try {
-      const orgs = await fetch('/api/organizations', {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
-      if (!Array.isArray(orgs) || !orgs.length) return {ok:false, total:0, titles:[], memories:[]};
-      const org = orgs[0].uuid;
-      const seen = new Set(); const titles = [];
-      let offset = 0, page = 0;
-      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
-        const convs = await fetch('/api/organizations/'+org+'/chat_conversations?limit='+PAGE+'&offset='+offset, {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
-        const items = Array.isArray(convs) ? convs : [];
-        if (!items.length) break;
-        let fresh = 0;
-        for (const c of items) { const id = c && c.uuid; if (id && !seen.has(id)) { seen.add(id); if (c.name) titles.push(c.name); fresh++; } }
-        if (fresh === 0) break;
-        if (items.length < PAGE) break;
-        offset += PAGE; page++;
-        await new Promise(r=>setTimeout(r, GAP_MS));
-      }
-      return {ok:true, total:seen.size, titles:titles.slice(0, CAP_TITLES), memories:[]};
-    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
-  })()`,
-};
-
-export const USAGE_ORIGIN: Record<UsageProvider, string> = {
-  codex: 'https://chatgpt.com/',
-  claude: 'https://claude.ai/',
-};
-
 // Turn the raw read into a compact profile block for the prep prompt: the memory facts (strongest), the scale, and the most-recent topics. Capped hard so we never ship a wall of PII even for a heavy user; the aux model turns this into the profile.
 export function summarizeUsage(u: ProviderUsage | null): string {
   if (!u || !u.ok) return '';
diff --git a/frontend/src/types/electron.d.ts b/frontend/src/types/electron.d.ts
index 7148492a..38f904cc 100644
--- a/frontend/src/types/electron.d.ts
+++ b/frontend/src/types/electron.d.ts
@@ -50,6 +50,7 @@ declare global {
     onReloadShortcut?: (cb: () => void) => () => void;
     onBrowserShortcut?: (cb: (payload: { action: string; webContentsId: number }) => void) => () => void;
     openExternal: (url: string) => Promise<void>;
+    harvestUsage?: (provider: string) => Promise<{ ok: boolean; total: number; titles: string[]; memories: string[] } | null>;
     hardReset?: () => Promise<void>;
     clearBrowserData?: () => Promise<{ ok: boolean }>;
     onAuthUrl?: (cb: (url: string) => void) => () => void;

From b57de380493566d07e0313a8d09ee26eca3256c6 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 19:35:03 -0700
Subject: [PATCH 042/248] [eric] onboarding: harvest fires when you open
 ChatGPT/Claude in-app, then sharpens saved suggestions

---
 backend/apps/settings/models.py               |  2 +
 .../lifecycle/useOpportunisticUsageHarvest.ts | 61 +++++++++++++++++++
 .../hooks/state/useDashboardController.ts     |  4 ++
 frontend/src/shared/state/settingsSlice.ts    |  1 +
 4 files changed, 68 insertions(+)
 create mode 100644 frontend/src/app/pages/Dashboard/hooks/lifecycle/useOpportunisticUsageHarvest.ts

diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index db37fc8b..191ac6cf 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -70,6 +70,8 @@ class AppSettings(BaseModel):
     personalized_greeting: Optional[str] = None
     personalized_starters: list["PersonalizedStarter"] = Field(default_factory=list)
     personalized_automations: list["PersonalizedAutomation"] = Field(default_factory=list)
+    # Distilled from the user's provider chat history the first time they open ChatGPT/Claude in-app; re-feeds prep to sharpen suggestions.
+    personalized_usage_summary: Optional[str] = None
     # Suppresses preflight suggestion modal entries the user dismissed; keyed by ToolDefinition.name, value ISO timestamp.
     dismissed_mcp_suggestions: dict[str, str] = Field(default_factory=dict)
     analytics_opt_in: bool = True
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOpportunisticUsageHarvest.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOpportunisticUsageHarvest.ts
new file mode 100644
index 00000000..7a68e180
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOpportunisticUsageHarvest.ts
@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { updateSettingsPatch } from '@/shared/state/settingsSlice';
+import { summarizeUsage, type ProviderUsage, type UsageProvider } from '@/shared/providerUsage';
+import { runPrep } from '@/app/components/OnboardingV3/onboardingV3Api';
+
+const HOST_PROVIDER: Array<{ host: string; provider: UsageProvider }> = [
+  { host: 'chatgpt.com', provider: 'codex' },
+  { host: 'claude.ai', provider: 'claude' },
+];
+
+function providerForUrl(url: string): UsageProvider | null {
+  try {
+    const host = new URL(url).hostname;
+    for (const hp of HOST_PROVIDER) if (host === hp.host || host.endsWith('.' + hp.host)) return hp.provider;
+  } catch { /* not a url */ }
+  return null;
+}
+
+// The first-run provider login always escapes the app (magic-link / embed-block), so the ONLY moment the browser partition holds a readable session is when the user opens ChatGPT/Claude in an in-app card themselves. Catch exactly that: harvest silently offscreen, then re-feed prep so the saved greeting + starters sharpen to what they actually work on. At most one successful run per provider per session; a not-logged-in read (empty summary) leaves it armed to retry on the next visit.
+export function useOpportunisticUsageHarvest(): void {
+  const dispatch = useAppDispatch();
+  const providerKey = useAppSelector((s) => {
+    const found = new Set<string>();
+    for (const card of Object.values(s.dashboardLayout.browserCards)) {
+      for (const tab of card.tabs) { const p = providerForUrl(tab.url); if (p) found.add(p); }
+    }
+    return Array.from(found).sort().join(',');
+  });
+  const doneRef = useRef<Set<string>>(new Set());
+  const busyRef = useRef(false);
+
+  useEffect(() => {
+    if (!providerKey || busyRef.current) return;
+    const provider = providerKey.split(',').find((p) => p && !doneRef.current.has(p)) as UsageProvider | undefined;
+    if (!provider) return;
+    const harvestUsage = window.openswarm?.harvestUsage;
+    if (typeof harvestUsage !== 'function') return;
+    busyRef.current = true;
+    // Let the page settle so the session cookie is live before the offscreen read.
+    const timer = window.setTimeout(async () => {
+      try {
+        const raw = (await harvestUsage(provider)) as ProviderUsage | null;
+        const summary = summarizeUsage(raw);
+        if (!summary) return;
+        doneRef.current.add(provider);
+        await dispatch(updateSettingsPatch({ personalized_usage_summary: summary }));
+        const prep = await runPrep(null, [], [], summary);
+        if (prep && prep.starters.length > 0) {
+          await dispatch(updateSettingsPatch({
+            personalized_greeting: prep.greeting || null,
+            personalized_starters: prep.starters,
+            personalized_automations: prep.automations,
+          }));
+        }
+      } catch { /* fail-open */ }
+      finally { busyRef.current = false; }
+    }, 3000);
+    return () => window.clearTimeout(timer);
+  }, [providerKey, dispatch]);
+}
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index 96e5de99..cc6a837d 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -18,6 +18,7 @@ import { useSubAgentLifecycle } from '../lifecycle/useSubAgentLifecycle';
 import { useDashboardLifecycle } from '../lifecycle/useDashboardLifecycle';
 import { useWelcomeDraft } from '../lifecycle/useWelcomeDraft';
 import { useOnboardingRevealSeed } from '../lifecycle/useOnboardingRevealSeed';
+import { useOpportunisticUsageHarvest } from '../lifecycle/useOpportunisticUsageHarvest';
 import { useDashboardThumbnail } from './useDashboardThumbnail';
 import { useSiblingRestack } from '../lifecycle/useSiblingRestack';
 import { useAgentSpawn } from '../lifecycle/useAgentSpawn';
@@ -174,6 +175,9 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
     createWelcomeDraft,
   });
 
+  // Silently harvest the user's provider chat history the first time they open ChatGPT/Claude in-app, then sharpen their saved suggestions.
+  useOpportunisticUsageHarvest();
+
   // ---- Auto-reveal / collapse / unreveal sub-agent cards ----
   useSubAgentLifecycle({
     isActive,
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index 87b4a479..4ed91b4d 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -85,6 +85,7 @@ export interface AppSettings {
   personalized_greeting?: string | null;
   personalized_starters?: PersonalizedStarter[];
   personalized_automations?: PersonalizedAutomation[];
+  personalized_usage_summary?: string | null;
 }
 
 export interface PersonalizedStarter {

From 1bbc8d7dfca681fb9c2e64fc1c27ef078edbdce3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 19:35:03 -0700
Subject: [PATCH 043/248] [eric] onboarding: sharpen the scan-driven reveal
 (surface telling apps, insight-led greeting)

---
 backend/apps/onboarding/local_scan.py         | 26 ++++++++++++++++++-
 backend/apps/onboarding/models.py             |  2 ++
 backend/apps/onboarding/prep.py               | 14 ++++++----
 backend/tests/test_onboarding.py              | 13 +++++++++-
 .../OnboardingV3/onboardingV3Api.ts           | 10 ++++---
 5 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/backend/apps/onboarding/local_scan.py b/backend/apps/onboarding/local_scan.py
index 39d075c4..c9cfba68 100644
--- a/backend/apps/onboarding/local_scan.py
+++ b/backend/apps/onboarding/local_scan.py
@@ -21,6 +21,18 @@ SCAN_FOLDERS = ("Downloads", "Desktop", "Documents")
 REPO_PARENT_CANDIDATES = ("dev", "code", "projects", "src", "repos", "Documents/GitHub")
 SCREENSHOT_PREFIXES = ("screenshot", "screen shot", "screen recording")
 
+# The high-signal tools that actually tell prep who this person is (an IDE, a design app, a DAW) so the greeting can lead with a confident read instead of drowning in Calculator + System Settings. Matched by exact name or "name " prefix so "Arc" never trips on "Search".
+NOTABLE_APP_KEYWORDS = (
+    "xcode", "visual studio code", "cursor", "zed", "sublime text", "intellij idea",
+    "pycharm", "webstorm", "android studio", "docker", "orbstack", "postman", "iterm",
+    "warp", "ghostty", "tableplus", "github desktop", "figma", "sketch",
+    "adobe photoshop", "adobe illustrator", "adobe xd", "affinity", "framer", "blender",
+    "cinema 4d", "final cut pro", "davinci resolve", "adobe premiere pro",
+    "adobe after effects", "screenflow", "capcut", "obs", "logic pro", "ableton live",
+    "fl studio", "garageband", "unity", "unreal engine", "godot", "notion", "obsidian",
+    "ulysses", "scrivener", "craft", "linear", "tableau", "rstudio", "ollama", "lm studio", "arc",
+)
+
 
 @typechecked
 def p_list_apps() -> List[str]:
@@ -66,6 +78,16 @@ def p_summarize_folder(folder: Path) -> FolderSummary:
     return summary
 
 
+@typechecked
+def detect_signal_apps(apps: List[str]) -> List[str]:
+    out: List[str] = []
+    for name in apps:
+        low = name.lower()
+        if any(low == kw or low.startswith(kw + " ") for kw in NOTABLE_APP_KEYWORDS):
+            out.append(name)
+    return out[:20]
+
+
 @typechecked
 def p_count_git_repos(home: Path) -> int:
     count = 0
@@ -90,8 +112,10 @@ def p_count_git_repos(home: Path) -> int:
 @typechecked
 def run_local_scan(home: Path) -> ScanResult:
     folders = [p_summarize_folder(home / name) for name in SCAN_FOLDERS]
+    apps = p_list_apps()
     return ScanResult(
-        apps=p_list_apps(),
+        apps=apps,
+        signal_apps=detect_signal_apps(apps),
         folders=folders,
         git_repo_count=p_count_git_repos(home),
         has_gitconfig=(home / ".gitconfig").is_file(),
diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index c57f6c83..4637a652 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -35,6 +35,8 @@ class ScanResult(BaseModel):
     model_config = ConfigDict(validate_assignment=True)
 
     apps: List[str] = Field(default_factory=list)
+    # The high-signal subset of apps (IDEs, design/creative tools); the profile leans on these.
+    signal_apps: List[str] = Field(default_factory=list)
     folders: List[FolderSummary] = Field(default_factory=list)
     git_repo_count: int = 0
     has_gitconfig: bool = False
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index 0092268b..8e1f7034 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -28,9 +28,11 @@ P_SYSTEM = (
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
     '{"greeting": string, "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
-    "First, silently infer a short profile of this user. If usage_summary is present it is the STRONGEST signal (it is "
-    "what they actually ask their AI about and facts their AI remembers about them); weight it above everything else, "
-    "then apps, folders, plan tier, email domain. Tune every task and the personal app to that profile; do not output the profile. "
+    "First, silently infer a short, confident profile of this user: who they are and what they are working on. "
+    "If usage_summary is present it is the STRONGEST signal (it is what they actually ask their AI about and facts "
+    "their AI remembers about them); weight it above everything else, then signal_apps (the high-signal tools they "
+    "have installed, like an IDE, a design app, or a DAW: these reveal their craft), then folders, plan tier, email "
+    "domain. Tune every task and the personal app to that profile; do not output the profile. "
     "Exactly 4 starters. Each title is 2-5 words. Each prompt is a concrete, safe, immediately runnable task "
     "referencing the user's real folders, file counts, or picked apps when possible; never invent facts, never "
     "propose deleting anything without review. The FIRST starter must be an audit sized for parallel sub-work "
@@ -49,8 +51,10 @@ P_SYSTEM = (
     "profile and habits (for example a daily morning brief, a weekly folder cleanup, a weekday summary of their "
     "connected apps). Each automation title is 2-4 words, prompt is one runnable instruction, cadence is exactly "
     "'daily', 'weekday', or 'weekly'. Automations must be safe to run unattended (never delete without review). "
-    "The greeting is one warm sentence that names 2-3 specific things "
-    "found on the machine. Never use em-dashes or en-dashes anywhere. No markdown, no commentary, JSON only."
+    "The greeting is one or two warm sentences: first say out loud, specifically and confidently, what this person is "
+    "into or working on (grounded in usage_summary, signal_apps, and folders, for example 'Looks like you live in "
+    "Xcode and ship iOS apps'), then name 2-3 concrete things you actually saw. Be specific, never generic, and never "
+    "name boring system apps. Never use em-dashes or en-dashes anywhere. No markdown, no commentary, JSON only."
 )
 
 
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index c277becd..7fb78a3b 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -7,7 +7,7 @@ from pathlib import Path
 import pytest
 
 from backend.apps.onboarding.identity import build_identity, decode_jwt_payload
-from backend.apps.onboarding.local_scan import run_local_scan
+from backend.apps.onboarding.local_scan import detect_signal_apps, run_local_scan
 from backend.apps.onboarding.models import PrepRequest, ScanResult
 from backend.apps.onboarding.prep import FALLBACK_STARTERS, build_prep, parse_prep
 from backend.apps.settings.models import AppSettings
@@ -78,6 +78,17 @@ def test_run_local_scan_counts_names_only(tmp_path: Path):
     assert "[user]" not in serialized
 
 
+def test_signal_apps_picks_tools_not_noise_and_avoids_substring_traps():
+    apps = ["Calculator", "Xcode", "Visual Studio Code", "Figma", "Search", "System Settings", "Adobe Photoshop 2024", "Arc"]
+    signal = detect_signal_apps(apps)
+    assert "Xcode" in signal and "Visual Studio Code" in signal and "Figma" in signal
+    assert "Adobe Photoshop 2024" in signal  # prefix match on a versioned name
+    assert "Arc" in signal
+    # "Search" contains "arc" as a substring but must NOT be treated as the Arc browser.
+    assert "Search" not in signal
+    assert "Calculator" not in signal and "System Settings" not in signal
+
+
 def test_parse_prep_strict_and_lenient():
     good = '{"greeting": "Hey!", "starters": [{"title": "A", "prompt": "do a"}, {"title": "B", "prompt": "do b"}]}'
     parsed = parse_prep(f"Sure! Here you go: {good}")
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 6c5c119f..1e6e784e 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -17,6 +17,7 @@ export interface FolderSummary {
 
 export interface ScanResult {
   apps: string[];
+  signal_apps: string[];
   folders: FolderSummary[];
   git_repo_count: number;
   has_gitconfig: boolean;
@@ -67,14 +68,15 @@ export async function runPrep(scan: ScanResult | null, pickedApps: string[], ide
   }
 }
 
-// One human-readable line about what the scan found, reused by the reveal note so the user can see exactly what informed their starters.
+// One human-readable line about what the scan found, reused by the reveal note so the user can see exactly what informed their starters. Leads with the telling apps (the sharp part), then repos + folder volume.
 export function summarizeScan(scan: ScanResult | null): string | null {
   if (!scan) return null;
   const parts: string[] = [];
+  if (scan.signal_apps?.length) parts.push(scan.signal_apps.slice(0, 3).join(', '));
+  if (scan.git_repo_count > 0) parts.push(`${scan.git_repo_count} git repo${scan.git_repo_count === 1 ? '' : 's'}`);
   for (const f of scan.folders) {
     if (f.screenshot_count > 20) parts.push(`${f.screenshot_count} screenshots on your ${f.name}`);
-    else if (f.entry_count > 300) parts.push(`${f.entry_count} items in ${f.name}`);
+    else if (f.entry_count > 300) parts.push(`${f.entry_count} files in ${f.name}`);
   }
-  if (scan.git_repo_count > 0) parts.push(`${scan.git_repo_count} git repo${scan.git_repo_count === 1 ? '' : 's'}`);
-  return parts.length > 0 ? parts.slice(0, 3).join(', ') : null;
+  return parts.length > 0 ? parts.slice(0, 4).join(', ') : null;
 }

From 0f4ac4e009bee0e5d68412c62ee0696b341bc405 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 22:34:10 -0700
Subject: [PATCH 044/248] [eric] onboarding: read real ChatGPT history at first
 run via the codex connect token (no login/browser)

---
 backend/apps/onboarding/chatgpt_usage.py | 99 ++++++++++++++++++++++++
 backend/apps/onboarding/onboarding.py    |  7 ++
 backend/tests/test_onboarding.py         | 19 +++++
 3 files changed, 125 insertions(+)
 create mode 100644 backend/apps/onboarding/chatgpt_usage.py

diff --git a/backend/apps/onboarding/chatgpt_usage.py b/backend/apps/onboarding/chatgpt_usage.py
new file mode 100644
index 00000000..fc654158
--- /dev/null
+++ b/backend/apps/onboarding/chatgpt_usage.py
@@ -0,0 +1,99 @@
+"""Read the user's own ChatGPT conversation titles + Memory straight from ChatGPT's
+backend using the codex connect token, no website login or browser session needed.
+
+The token 9Router already holds from "Sign in with ChatGPT" is a valid bearer for
+chatgpt.com/backend-api (that is how Codex runs); paired with the chatgpt-account-id
+claim from the id token it reaches /conversations and /memories from the user's own
+machine. Read-only, capped, and fails open to "" on anything (expired token,
+Cloudflare, shape drift) so prep just falls back to the local scan.
+"""
+
+from typing import List, Optional, Tuple
+
+import httpx
+from typeguard import typechecked
+
+from backend.apps.nine_router.process import read_persisted_connections
+from backend.apps.onboarding.identity import decode_jwt_payload
+
+BASE = "https://chatgpt.com/backend-api"
+PAGE = 100
+CAP_PAGES = 40
+CAP_TITLES = 1000
+UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36"
+
+
+@typechecked
+def p_codex_creds() -> Optional[Tuple[str, Optional[str]]]:
+    for c in read_persisted_connections():
+        if c.get("provider") == "codex" and c.get("isActive") and c.get("accessToken"):
+            claims = decode_jwt_payload(c.get("idToken") or "")
+            auth = claims.get("https://api.openai.com/auth", {}) if isinstance(claims, dict) else {}
+            acct = auth.get("chatgpt_account_id") if isinstance(auth, dict) else None
+            return (str(c["accessToken"]), str(acct) if acct else None)
+    return None
+
+
+@typechecked
+def summarize_chatgpt_usage(total: int, memories: List[str], titles: List[str]) -> str:
+    parts: List[str] = []
+    if total > 0:
+        parts.append(f"They have {total} past AI conversations.")
+    if memories:
+        parts.append("Facts their AI remembers about them: " + "; ".join(memories))
+    if titles:
+        parts.append("Topics they keep coming back to (recent first): " + "; ".join(titles[:150]))
+    return "\n".join(parts)[:4000]
+
+
+@typechecked
+async def harvest_chatgpt_usage() -> str:
+    creds = p_codex_creds()
+    if creds is None:
+        return ""
+    token, acct = creds
+    headers = {
+        "Authorization": f"Bearer {token}",
+        "Accept": "application/json",
+        "User-Agent": UA,
+        "Origin": "https://chatgpt.com",
+        "Referer": "https://chatgpt.com/",
+    }
+    if acct:
+        headers["chatgpt-account-id"] = acct
+    titles: List[str] = []
+    seen: set = set()
+    memories: List[str] = []
+    try:
+        async with httpx.AsyncClient(timeout=15.0, headers=headers) as client:
+            offset = 0
+            for _ in range(CAP_PAGES):
+                if len(titles) >= CAP_TITLES:
+                    break
+                r = await client.get(f"{BASE}/conversations", params={"offset": offset, "limit": PAGE, "order": "updated"})
+                if r.status_code != 200:
+                    return ""  # expired token / Cloudflare / shape drift: fail open, prep uses the scan
+                items = (r.json() or {}).get("items") or []
+                if not items:
+                    break
+                fresh = 0
+                for it in items:
+                    cid = it.get("id")
+                    if cid and cid not in seen:
+                        seen.add(cid)
+                        title = it.get("title")
+                        if title:
+                            titles.append(str(title))
+                        fresh += 1
+                if fresh == 0 or len(items) < PAGE:
+                    break
+                offset += PAGE
+            try:
+                mr = await client.get(f"{BASE}/memories", params={"include_memory_entries": "true"})
+                if mr.status_code == 200:
+                    memories = [str(m.get("content")) for m in (mr.json() or {}).get("memories", []) if m.get("content")][:40]
+            except Exception:
+                pass
+    except Exception:
+        return ""
+    return summarize_chatgpt_usage(len(seen), memories, titles)
diff --git a/backend/apps/onboarding/onboarding.py b/backend/apps/onboarding/onboarding.py
index c24f3eab..f7d52283 100644
--- a/backend/apps/onboarding/onboarding.py
+++ b/backend/apps/onboarding/onboarding.py
@@ -43,6 +43,13 @@ def post_scan() -> dict:
 @onboarding.router.post("/prep")
 @typechecked
 async def post_prep(body: PrepRequest) -> dict:
+    from backend.apps.onboarding.chatgpt_usage import harvest_chatgpt_usage
     from backend.apps.settings.store import load_settings
 
+    # The frontend read needs a logged-in provider CARD, which a fresh install lacks; the codex connect token reads the ChatGPT backend directly, so fill the gap here.
+    if not body.usage_summary.strip():
+        harvested = await harvest_chatgpt_usage()
+        if harvested:
+            body.usage_summary = harvested
+
     return (await build_prep(load_settings(), body)).model_dump()
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index 7fb78a3b..ffab5ae6 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -113,6 +113,25 @@ def test_parse_prep_carries_reasons():
     assert parsed.app_reason == "you plan lifts with ChatGPT daily"
 
 
+def test_summarize_chatgpt_usage_leads_with_memory_and_caps():
+    from backend.apps.onboarding.chatgpt_usage import summarize_chatgpt_usage
+
+    s = summarize_chatgpt_usage(812, ["Has an Akita", "Squats 495"], ["Swift concurrency", "Deadlift form"])
+    assert "812 past AI conversations" in s
+    assert "Has an Akita; Squats 495" in s
+    assert "Swift concurrency; Deadlift form" in s
+    big = summarize_chatgpt_usage(1000, [], [f"topic number {i} about something" for i in range(1000)])
+    assert len(big) <= 4000
+
+
+@pytest.mark.asyncio
+async def test_harvest_chatgpt_usage_fails_open_without_codex(monkeypatch):
+    from backend.apps.onboarding import chatgpt_usage
+
+    monkeypatch.setattr(chatgpt_usage, "read_persisted_connections", lambda: [])
+    assert await chatgpt_usage.harvest_chatgpt_usage() == ""
+
+
 @pytest.mark.asyncio
 async def test_build_prep_fails_open_without_provider(monkeypatch):
     async def boom(*args, **kwargs):

From b5fcf56d24ddd0f5c671c9342cdc270d1bef85a9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 23:41:43 -0700
Subject: [PATCH 045/248] [eric] onboarding: harvest real chat history at first
 run via browser-session cookies (Claude proven live)

---
 backend/apps/onboarding/onboarding.py         |  17 +-
 backend/apps/onboarding/usage/__init__.py     |   0
 .../apps/onboarding/usage/browser_cookies.py  | 173 ++++++++++++++++++
 .../onboarding/{ => usage}/chatgpt_usage.py   |   0
 backend/apps/onboarding/usage/claude_usage.py |  76 ++++++++
 backend/tests/test_onboarding.py              |  30 ++-
 6 files changed, 289 insertions(+), 7 deletions(-)
 create mode 100644 backend/apps/onboarding/usage/__init__.py
 create mode 100644 backend/apps/onboarding/usage/browser_cookies.py
 rename backend/apps/onboarding/{ => usage}/chatgpt_usage.py (100%)
 create mode 100644 backend/apps/onboarding/usage/claude_usage.py

diff --git a/backend/apps/onboarding/onboarding.py b/backend/apps/onboarding/onboarding.py
index f7d52283..866f47b3 100644
--- a/backend/apps/onboarding/onboarding.py
+++ b/backend/apps/onboarding/onboarding.py
@@ -43,13 +43,20 @@ def post_scan() -> dict:
 @onboarding.router.post("/prep")
 @typechecked
 async def post_prep(body: PrepRequest) -> dict:
-    from backend.apps.onboarding.chatgpt_usage import harvest_chatgpt_usage
+    from backend.apps.onboarding.usage.chatgpt_usage import harvest_chatgpt_usage
+    from backend.apps.onboarding.usage.claude_usage import harvest_claude_usage
     from backend.apps.settings.store import load_settings
 
-    # The frontend read needs a logged-in provider CARD, which a fresh install lacks; the codex connect token reads the ChatGPT backend directly, so fill the gap here.
+    # The frontend read needs a logged-in provider CARD, which a fresh install lacks. Fill the gap from what we already have: ChatGPT via the codex connect token, Claude via the user's own browser session cookies. Each fails open to "", so a missing one just drops out.
     if not body.usage_summary.strip():
-        harvested = await harvest_chatgpt_usage()
-        if harvested:
-            body.usage_summary = harvested
+        parts: list[str] = []
+        chatgpt = await harvest_chatgpt_usage()
+        if chatgpt:
+            parts.append("ChatGPT usage:\n" + chatgpt)
+        claude = await harvest_claude_usage()
+        if claude:
+            parts.append("Claude usage:\n" + claude)
+        if parts:
+            body.usage_summary = "\n\n".join(parts)
 
     return (await build_prep(load_settings(), body)).model_dump()
diff --git a/backend/apps/onboarding/usage/__init__.py b/backend/apps/onboarding/usage/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/backend/apps/onboarding/usage/browser_cookies.py b/backend/apps/onboarding/usage/browser_cookies.py
new file mode 100644
index 00000000..6039cf4f
--- /dev/null
+++ b/backend/apps/onboarding/usage/browser_cookies.py
@@ -0,0 +1,173 @@
+"""Read the user's own logged-in provider cookies from their real browser, so
+onboarding can harvest their actual chat history at first run without an in-app login.
+
+macOS + Chromium only for now (Chrome/Arc/Brave/Edge). We first find WHICH store holds
+the session by counting cookie names in the SQLite (no decryption, no keychain), then
+decrypt only that one store, so the "Safe Storage" keychain is touched at most once per
+browser (cached for the process). Values are v10/v11 AES-CBC. Fails open to {} on
+anything (no browser, app-bound v20 cookies, denied keychain, Safari-only user), so
+prep just falls back to the local scan.
+
+Only ever reads the specific provider domain asked for; never a general cookie sweep.
+The values are session secrets: used in-process for the harvest, never logged or stored.
+"""
+
+import hashlib
+import os
+import shutil
+import sqlite3
+import subprocess
+import tempfile
+from typing import Dict, List, Optional, Tuple
+
+from typeguard import typechecked
+
+CHROMIUM_ROOTS = {
+    "Chrome": "Library/Application Support/Google/Chrome",
+    "Arc": "Library/Application Support/Arc/User Data",
+    "Brave": "Library/Application Support/BraveSoftware/Brave-Browser",
+    "Edge": "Library/Application Support/Microsoft Edge",
+}
+KEYCHAIN_SERVICE = {
+    "Chrome": "Chrome Safe Storage",
+    "Arc": "Arc Safe Storage",
+    "Brave": "Brave Safe Storage",
+    "Edge": "Microsoft Edge Safe Storage",
+}
+PROFILES = ["Default"] + [f"Profile {i}" for i in range(1, 12)]
+
+# One keychain read per browser per process; "Always Allow" then never re-prompts.
+p_key_cache: Dict[str, Optional[bytes]] = {}
+
+
+@typechecked
+def p_safe_storage_key(browser: str) -> Optional[bytes]:
+    if browser in p_key_cache:
+        return p_key_cache[browser]
+    key: Optional[bytes] = None
+    try:
+        r = subprocess.run(
+            ["security", "find-generic-password", "-w", "-s", KEYCHAIN_SERVICE[browser]],
+            capture_output=True, text=True, timeout=20,
+        )
+        pw = r.stdout.strip()
+        if pw:
+            key = hashlib.pbkdf2_hmac("sha1", pw.encode(), b"saltysalt", 1003, 16)
+    except Exception:
+        key = None
+    p_key_cache[browser] = key
+    return key
+
+
+@typechecked
+def p_count_domain(db_path: str, domain: str) -> int:
+    tmp = tempfile.mktemp()
+    try:
+        shutil.copy2(db_path, tmp)
+        con = sqlite3.connect(f"file:{tmp}?mode=ro", uri=True)
+        cur = con.cursor()
+        cur.execute("SELECT count(*) FROM cookies WHERE host_key LIKE ?", (f"%{domain}",))
+        n = int(cur.fetchone()[0])
+        con.close()
+        return n
+    except Exception:
+        return 0
+    finally:
+        try:
+            os.remove(tmp)
+        except OSError:
+            pass
+
+
+@typechecked
+def p_best_store(domain: str) -> Optional[Tuple[str, str]]:
+    """The (browser, db_path) holding the most cookies for `domain`, found WITHOUT the keychain."""
+    home = os.path.expanduser("~")
+    best: Optional[Tuple[str, str]] = None
+    best_score = (0, -1.0)
+    for browser, rel in CHROMIUM_ROOTS.items():
+        base = os.path.join(home, rel)
+        if not os.path.isdir(base):
+            continue
+        for prof in PROFILES:
+            for sub in ("Cookies", "Network/Cookies"):
+                path = os.path.join(base, prof, sub)
+                if not os.path.isfile(path):
+                    continue
+                n = p_count_domain(path, domain)
+                if n:
+                    score = (n, os.path.getmtime(path))
+                    if score > best_score:
+                        best, best_score = (browser, path), score
+    return best
+
+
+@typechecked
+def p_decrypt(enc: bytes, key: bytes) -> Optional[str]:
+    if enc[:3] not in (b"v10", b"v11"):
+        return None  # v20 = app-bound encryption, out of reach without the browser
+    try:
+        from cryptography.hazmat.backends import default_backend
+        from cryptography.hazmat.primitives.ciphers import Cipher, algorithms, modes
+
+        c = Cipher(algorithms.AES(key), modes.CBC(b" " * 16), backend=default_backend())
+        d = c.decryptor()
+        dec = d.update(enc[3:]) + d.finalize()
+        dec = dec[: -dec[-1]]  # strip PKCS7 padding
+        for cut in (0, 32):  # newer Chromium prepends a 32-byte domain hash
+            try:
+                return dec[cut:].decode("utf-8")
+            except UnicodeDecodeError:
+                continue
+    except Exception:
+        return None
+    return None
+
+
+@typechecked
+def read_provider_cookies(domain: str) -> Dict[str, str]:
+    """Decrypted cookie jar for `domain`, from whichever browser store actually has the session. At most one keychain touch (that store's browser), cached for the process."""
+    store = p_best_store(domain)
+    if store is None:
+        return {}
+    browser, db_path = store
+    key = p_safe_storage_key(browser)
+    if key is None:
+        return {}
+    jar: Dict[str, str] = {}
+    tmp = tempfile.mktemp()
+    try:
+        shutil.copy2(db_path, tmp)
+        con = sqlite3.connect(f"file:{tmp}?mode=ro", uri=True)
+        cur = con.cursor()
+        cur.execute("SELECT name, encrypted_value FROM cookies WHERE host_key LIKE ?", (f"%{domain}",))
+        for name, enc in cur.fetchall():
+            if not enc:
+                continue
+            val = p_decrypt(bytes(enc), key)
+            if val:
+                jar[str(name)] = val
+        con.close()
+    except Exception:
+        pass
+    finally:
+        try:
+            os.remove(tmp)
+        except OSError:
+            pass
+    return jar
+
+
+@typechecked
+def cookie_header(jar: Dict[str, str]) -> str:
+    return "; ".join(f"{k}={v}" for k, v in jar.items())
+
+
+@typechecked
+def logged_in_providers() -> List[str]:
+    """Which providers have a readable session, WITHOUT decrypting or touching the keychain: safe for a UI presence check."""
+    out: List[str] = []
+    for provider, domain in (("codex", "chatgpt.com"), ("claude", "claude.ai"), ("gemini", "gemini.google.com")):
+        if p_best_store(domain) is not None:
+            out.append(provider)
+    return out
diff --git a/backend/apps/onboarding/chatgpt_usage.py b/backend/apps/onboarding/usage/chatgpt_usage.py
similarity index 100%
rename from backend/apps/onboarding/chatgpt_usage.py
rename to backend/apps/onboarding/usage/chatgpt_usage.py
diff --git a/backend/apps/onboarding/usage/claude_usage.py b/backend/apps/onboarding/usage/claude_usage.py
new file mode 100644
index 00000000..634011d1
--- /dev/null
+++ b/backend/apps/onboarding/usage/claude_usage.py
@@ -0,0 +1,76 @@
+"""Read the user's real Claude conversation topics from claude.ai using their own
+logged-in browser cookies (see browser_cookies), no in-app login. Claude's website
+session is the only way in (its API token is a different realm), and a plain request
+carries it fine (unlike ChatGPT, claude.ai does not fingerprint-block). Capped,
+read-only, fails open to "" on anything so prep falls back to the local scan.
+"""
+
+from typing import List
+
+import httpx
+from typeguard import typechecked
+
+from backend.apps.onboarding.usage.browser_cookies import cookie_header, read_provider_cookies
+
+BASE = "https://claude.ai"
+UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36"
+PAGE = 100
+CAP_PAGES = 40
+CAP_TITLES = 1000
+
+
+@typechecked
+def summarize_claude_usage(total: int, titles: List[str]) -> str:
+    parts: List[str] = []
+    if total > 0:
+        parts.append(f"They have {total} past Claude conversations.")
+    if titles:
+        parts.append("Topics they keep coming back to (recent first): " + "; ".join(titles[:150]))
+    return "\n".join(parts)[:4000]
+
+
+@typechecked
+async def harvest_claude_usage() -> str:
+    jar = read_provider_cookies("claude.ai")
+    if not jar:
+        return ""
+    headers = {"Cookie": cookie_header(jar), "User-Agent": UA, "Accept": "application/json"}
+    titles: List[str] = []
+    seen: set = set()
+    try:
+        async with httpx.AsyncClient(timeout=15.0, headers=headers) as client:
+            org_res = await client.get(f"{BASE}/api/organizations")
+            if org_res.status_code != 200:
+                return ""
+            orgs = org_res.json()
+            if not isinstance(orgs, list) or not orgs:
+                return ""
+            org = orgs[0].get("uuid")
+            offset = 0
+            for _ in range(CAP_PAGES):
+                if len(titles) >= CAP_TITLES:
+                    break
+                cr = await client.get(
+                    f"{BASE}/api/organizations/{org}/chat_conversations",
+                    params={"limit": PAGE, "offset": offset},
+                )
+                if cr.status_code != 200:
+                    break
+                items = cr.json()
+                if not isinstance(items, list) or not items:
+                    break
+                fresh = 0
+                for it in items:
+                    cid = it.get("uuid")
+                    if cid and cid not in seen:
+                        seen.add(cid)
+                        name = it.get("name")
+                        if name:
+                            titles.append(str(name))
+                        fresh += 1
+                if fresh == 0 or len(items) < PAGE:
+                    break
+                offset += PAGE
+    except Exception:
+        return ""
+    return summarize_claude_usage(len(seen), titles)
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index ffab5ae6..54fbb75f 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -114,7 +114,7 @@ def test_parse_prep_carries_reasons():
 
 
 def test_summarize_chatgpt_usage_leads_with_memory_and_caps():
-    from backend.apps.onboarding.chatgpt_usage import summarize_chatgpt_usage
+    from backend.apps.onboarding.usage.chatgpt_usage import summarize_chatgpt_usage
 
     s = summarize_chatgpt_usage(812, ["Has an Akita", "Squats 495"], ["Swift concurrency", "Deadlift form"])
     assert "812 past AI conversations" in s
@@ -126,12 +126,38 @@ def test_summarize_chatgpt_usage_leads_with_memory_and_caps():
 
 @pytest.mark.asyncio
 async def test_harvest_chatgpt_usage_fails_open_without_codex(monkeypatch):
-    from backend.apps.onboarding import chatgpt_usage
+    from backend.apps.onboarding.usage import chatgpt_usage
 
     monkeypatch.setattr(chatgpt_usage, "read_persisted_connections", lambda: [])
     assert await chatgpt_usage.harvest_chatgpt_usage() == ""
 
 
+def test_read_provider_cookies_fails_open_without_a_store(monkeypatch):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # No browser store has the domain -> empty jar, and the keychain is never touched.
+    monkeypatch.setattr(browser_cookies, "p_best_store", lambda domain: None)
+    assert browser_cookies.read_provider_cookies("claude.ai") == {}
+
+
+def test_summarize_claude_usage_counts_and_caps():
+    from backend.apps.onboarding.usage.claude_usage import summarize_claude_usage
+
+    s = summarize_claude_usage(490, ["Yuji Itadori and Buddhism", "B2B SaaS Startup Ideas"])
+    assert "490 past Claude conversations" in s
+    assert "Yuji Itadori and Buddhism; B2B SaaS Startup Ideas" in s
+    big = summarize_claude_usage(1000, [f"topic number {i} about something specific" for i in range(1000)])
+    assert len(big) <= 4000
+
+
+@pytest.mark.asyncio
+async def test_harvest_claude_usage_fails_open_without_cookies(monkeypatch):
+    from backend.apps.onboarding.usage import claude_usage
+
+    monkeypatch.setattr(claude_usage, "read_provider_cookies", lambda domain: {})
+    assert await claude_usage.harvest_claude_usage() == ""
+
+
 @pytest.mark.asyncio
 async def test_build_prep_fails_open_without_provider(monkeypatch):
     async def boom(*args, **kwargs):

From 2d499f8316234a5dc8bef49605cac6e1a7c64df2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 16 Jul 2026 00:33:28 -0700
Subject: [PATCH 046/248] [eric] onboarding: offscreen real-browser harvest
 with injected cookies (beats Cloudflare, unifies providers)

---
 .../apps/onboarding/usage/browser_cookies.py  | 43 ++++++++++++++++++-
 backend/apps/onboarding/usage/dump_cookies.py | 25 +++++++++++
 backend/tests/test_onboarding.py              | 18 +++++++-
 electron/hiddenBrowser.js                     | 38 +++++++++++++++-
 electron/main.js                              | 29 +++++++++++++
 electron/usageHarvest.js                      | 41 +++++++++++++++---
 6 files changed, 185 insertions(+), 9 deletions(-)
 create mode 100644 backend/apps/onboarding/usage/dump_cookies.py

diff --git a/backend/apps/onboarding/usage/browser_cookies.py b/backend/apps/onboarding/usage/browser_cookies.py
index 6039cf4f..9f4148f9 100644
--- a/backend/apps/onboarding/usage/browser_cookies.py
+++ b/backend/apps/onboarding/usage/browser_cookies.py
@@ -18,7 +18,7 @@ import shutil
 import sqlite3
 import subprocess
 import tempfile
-from typing import Dict, List, Optional, Tuple
+from typing import Any, Dict, List, Optional, Tuple
 
 from typeguard import typechecked
 
@@ -158,6 +158,47 @@ def read_provider_cookies(domain: str) -> Dict[str, str]:
     return jar
 
 
+@typechecked
+def read_provider_cookie_records(domain: str) -> List[Dict[str, Any]]:
+    """Full cookie records ({name,value,domain,path,secure,httponly}) for `domain`, so Electron's offscreen browser can re-inject the session faithfully and pass Cloudflare with a real Chrome TLS handshake. Same one-store, one-keychain-touch path as read_provider_cookies."""
+    store = p_best_store(domain)
+    if store is None:
+        return []
+    browser, db_path = store
+    key = p_safe_storage_key(browser)
+    if key is None:
+        return []
+    records: List[Dict[str, Any]] = []
+    tmp = tempfile.mktemp()
+    try:
+        shutil.copy2(db_path, tmp)
+        con = sqlite3.connect(f"file:{tmp}?mode=ro", uri=True)
+        cur = con.cursor()
+        cur.execute(
+            "SELECT name, encrypted_value, host_key, path, is_secure, is_httponly FROM cookies WHERE host_key LIKE ?",
+            (f"%{domain}",),
+        )
+        for name, enc, host_key, path, is_secure, is_httponly in cur.fetchall():
+            if not enc:
+                continue
+            val = p_decrypt(bytes(enc), key)
+            if val is None:
+                continue
+            records.append({
+                "name": str(name), "value": val, "domain": str(host_key),
+                "path": str(path) or "/", "secure": bool(is_secure), "httponly": bool(is_httponly),
+            })
+        con.close()
+    except Exception:
+        pass
+    finally:
+        try:
+            os.remove(tmp)
+        except OSError:
+            pass
+    return records
+
+
 @typechecked
 def cookie_header(jar: Dict[str, str]) -> str:
     return "; ".join(f"{k}={v}" for k, v in jar.items())
diff --git a/backend/apps/onboarding/usage/dump_cookies.py b/backend/apps/onboarding/usage/dump_cookies.py
new file mode 100644
index 00000000..aa6f95d5
--- /dev/null
+++ b/backend/apps/onboarding/usage/dump_cookies.py
@@ -0,0 +1,25 @@
+"""One-shot CLI: print the user's provider cookie records as JSON for a domain.
+
+Electron main spawns `python -m backend.apps.onboarding.usage.dump_cookies <domain>`
+to get the session cookies to inject into its offscreen browser (real Chrome TLS to
+beat Cloudflare). Kept as a spawned one-shot, not an HTTP endpoint, so a token-holding
+agent can never reach it: only the trusted app shell can invoke it. Prints [] on
+anything (bad domain, no session, denied keychain). Never logs the cookie values.
+"""
+
+import json
+import sys
+
+from backend.apps.onboarding.usage.browser_cookies import read_provider_cookie_records
+
+ALLOWED_DOMAINS = {"chatgpt.com", "claude.ai", "gemini.google.com"}
+
+
+def main() -> None:
+    domain = sys.argv[1] if len(sys.argv) > 1 else ""
+    records = read_provider_cookie_records(domain) if domain in ALLOWED_DOMAINS else []
+    sys.stdout.write(json.dumps(records))
+
+
+if __name__ == "__main__":
+    main()
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index 54fbb75f..780a97b6 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -135,9 +135,25 @@ async def test_harvest_chatgpt_usage_fails_open_without_codex(monkeypatch):
 def test_read_provider_cookies_fails_open_without_a_store(monkeypatch):
     from backend.apps.onboarding.usage import browser_cookies
 
-    # No browser store has the domain -> empty jar, and the keychain is never touched.
+    # No browser store has the domain -> empty jar/records, and the keychain is never touched.
     monkeypatch.setattr(browser_cookies, "p_best_store", lambda domain: None)
     assert browser_cookies.read_provider_cookies("claude.ai") == {}
+    assert browser_cookies.read_provider_cookie_records("claude.ai") == []
+
+
+def test_dump_cookies_only_serves_allowlisted_domains(monkeypatch, capsys):
+    from backend.apps.onboarding.usage import dump_cookies
+
+    # Patch the name in dump_cookies' own namespace, so a real read (+ keychain) never fires.
+    monkeypatch.setattr(dump_cookies, "read_provider_cookie_records", lambda domain: [{"name": "x", "value": "y"}])
+    # An off-list domain must never trigger a read, prints [].
+    monkeypatch.setattr("sys.argv", ["dump_cookies", "evil.example.com"])
+    dump_cookies.main()
+    assert capsys.readouterr().out == "[]"
+    # An allowlisted domain passes through to the reader.
+    monkeypatch.setattr("sys.argv", ["dump_cookies", "claude.ai"])
+    dump_cookies.main()
+    assert '"name": "x"' in capsys.readouterr().out
 
 
 def test_summarize_claude_usage_counts_and_caps():
diff --git a/electron/hiddenBrowser.js b/electron/hiddenBrowser.js
index a01007db..f3872cd0 100644
--- a/electron/hiddenBrowser.js
+++ b/electron/hiddenBrowser.js
@@ -6,7 +6,7 @@
 //
 // Main-process only (offscreen BrowserWindow isn't a renderer webview). Every
 // path destroys its window in a finally, so a failure can never leak a window.
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, session } = require('electron');
 
 const SCRAPE_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36';
 const SETTLE_MS = 2800;
@@ -81,6 +81,40 @@ async function hiddenEval(partition, url, js) {
   });
 }
 
+// Inject the user's own session cookies (read + decrypted by the Python backend) into a
+// throwaway IN-MEMORY session, then run an app-authored read from a real Chromium context.
+// This is how we beat provider Cloudflare: a raw HTTP client's TLS handshake gets fingerprint-
+// blocked, but this IS Chrome, so it passes exactly like the user's browser. The partition has
+// no "persist:" prefix, so nothing ever hits disk; cookies are cleared before AND after.
+const HARVEST_PARTITION = 'osw-usage-harvest';
+
+async function hiddenEvalWithCookies(url, cookieRecords, js) {
+  const ses = session.fromPartition(HARVEST_PARTITION);
+  const wipe = async () => { try { await ses.clearStorageData({ storages: ['cookies'] }); } catch (_) {} };
+  await wipe();
+  for (const c of cookieRecords || []) {
+    try {
+      await ses.cookies.set({
+        url,
+        name: c.name,
+        value: c.value,
+        domain: c.domain || undefined,
+        path: c.path || '/',
+        secure: c.secure !== false,
+        httpOnly: !!c.httponly,
+      });
+    } catch (_) { /* skip a malformed cookie, never abort the set */ }
+  }
+  try {
+    return await withWindow(HARVEST_PARTITION, async (win) => {
+      await loadAndSettle(win, url);
+      return win.webContents.executeJavaScript(js, true).catch(() => null);
+    });
+  } finally {
+    await wipe();
+  }
+}
+
 // Google first (direct result URLs, best quality); DuckDuckGo in a real browser
 // second (immune to the httpx 202 throttle); Bing last (results are redirect-wrapped).
 const ENGINES = [
@@ -114,4 +148,4 @@ async function hiddenSearch(partition, query, numResults) {
   return { error: 'all browser search engines failed', detail: errors.join('; ') };
 }
 
-module.exports = { hiddenFetch, hiddenSearch, hiddenEval };
+module.exports = { hiddenFetch, hiddenSearch, hiddenEval, hiddenEvalWithCookies };
diff --git a/electron/main.js b/electron/main.js
index c74d28ea..4c9427c6 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -767,6 +767,35 @@ function getPythonPath() {
   return path.join(__dirname, '..', 'backend', '.venv', 'bin', 'python3');
 }
 
+// Read the user's provider session cookies via a one-shot bundled-python invocation, so the
+// offscreen harvest can inject them and pass provider Cloudflare with a real Chrome TLS
+// handshake. Spawned, NEVER an HTTP endpoint, so a token-holding agent can't reach it: only
+// the app shell invokes it. Always resolves (to [] on any failure) so the harvest just falls
+// back to the opportunistic path. mirrors startBackend's python env (projectRoot + site-packages).
+function p_readProviderCookies(domain) {
+  return new Promise((resolve) => {
+    let done = false;
+    const finish = (v) => { if (!done) { done = true; resolve(v); } };
+    try {
+      const root = isPackaged ? process.resourcesPath : path.join(__dirname, '..');
+      const env = { ...process.env, PYTHONUTF8: '1', PYTHONDONTWRITEBYTECODE: '1' };
+      if (isPackaged) {
+        const sitePackages = process.platform === 'win32'
+          ? path.join(process.resourcesPath, 'python-env', 'Lib', 'site-packages')
+          : path.join(process.resourcesPath, 'python-env', 'lib', 'python3.13', 'site-packages');
+        env.PYTHONPATH = [root, sitePackages].join(path.delimiter);
+      }
+      const proc = spawn(getPythonPath(), ['-m', 'backend.apps.onboarding.usage.dump_cookies', String(domain)], { cwd: root, env });
+      let out = '';
+      proc.stdout.on('data', (d) => { out += d.toString(); });
+      proc.on('error', () => finish([]));
+      proc.on('close', () => { try { const j = JSON.parse(out); finish(Array.isArray(j) ? j : []); } catch (_) { finish([]); } });
+      setTimeout(() => { try { proc.kill(); } catch (_) {} finish([]); }, 25000);
+    } catch (_) { finish([]); }
+  });
+}
+usageHarvest.configure({ readCookies: p_readProviderCookies });
+
 // Path to a real Node.js binary bundled in extraResources, or null if not
 // shipped (dev mode, or build that skipped the node-fetch step). Backend
 // reads OPENSWARM_NODE_PATH env var to prefer this over both system `node`
diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index a55d6629..fc366664 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -15,6 +15,18 @@ const ORIGIN = {
   claude: 'https://claude.ai/',
 };
 
+const DOMAIN = {
+  codex: 'chatgpt.com',
+  claude: 'claude.ai',
+};
+
+// Main injects a (domain) => Promise<cookieRecords[]> that spawns the Python cookie reader.
+// Left null off-Electron / before boot, so harvest silently skips the imported-cookie path.
+let p_readCookies = null;
+function configure(opts) {
+  if (opts && typeof opts.readCookies === 'function') p_readCookies = opts.readCookies;
+}
+
 // Runs in the page context. Sweeps the full conversation history (all titles,
 // paginated + deduped) plus ChatGPT Memory. Hard caps bound the work + PII footprint
 // even for a user with thousands of chats; every fetch fails open to empty.
@@ -73,10 +85,29 @@ const SCRIPT = {
 
 const EMPTY = { ok: false, total: 0, titles: [], memories: [] };
 
-async function harvest(partition, provider) {
-  if (provider !== 'codex' && provider !== 'claude') return EMPTY;
-  const res = await hiddenBrowser.hiddenEval(partition, ORIGIN[provider], SCRIPT[provider]).catch(() => null);
-  return res && typeof res === 'object' && res.ok ? res : EMPTY;
+function p_usable(res) {
+  return res && typeof res === 'object' && res.ok &&
+    (res.total > 0 || (res.memories && res.memories.length) || (res.titles && res.titles.length));
 }
 
-module.exports = { harvest };
+async function harvest(partition, provider) {
+  if (provider !== 'codex' && provider !== 'claude') return EMPTY;
+  // First run: read the user's own browser session cookies, inject into a throwaway real-Chrome
+  // context, and harvest there. This is the only path that beats provider Cloudflare AND works
+  // before the user has opened the site in-app.
+  if (p_readCookies) {
+    try {
+      const records = await p_readCookies(DOMAIN[provider]);
+      if (records && records.length) {
+        const viaCookies = await hiddenBrowser.hiddenEvalWithCookies(ORIGIN[provider], records, SCRIPT[provider]).catch(() => null);
+        if (p_usable(viaCookies)) return viaCookies;
+      }
+    } catch (_) { /* fall through to the opportunistic path */ }
+  }
+  // Opportunistic: the user already logged into the site in an in-app card, so the browser
+  // partition holds the session; read it directly (also a real Chrome context).
+  const res = await hiddenBrowser.hiddenEval(partition, ORIGIN[provider], SCRIPT[provider]).catch(() => null);
+  return p_usable(res) ? res : EMPTY;
+}
+
+module.exports = { harvest, configure };

From 7ee9837f7afa24e5967cf6400b54ef6965ac10ac Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 16 Jul 2026 10:28:35 -0700
Subject: [PATCH 047/248] [eric] onboarding: bound harvest pagination (ChatGPT
 ~4s/page) so it can't wedge the offscreen read

---
 electron/hiddenBrowser.js | 13 +++++++----
 electron/usageHarvest.js  | 46 +++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/electron/hiddenBrowser.js b/electron/hiddenBrowser.js
index f3872cd0..df85186c 100644
--- a/electron/hiddenBrowser.js
+++ b/electron/hiddenBrowser.js
@@ -36,9 +36,9 @@ function makeWindow(partition) {
   }
 }
 
-async function withWindow(partition, fn) {
+async function withWindow(partition, fn, extraGraceMs = 0) {
   const win = makeWindow(partition);
-  const killer = setTimeout(() => { try { win.destroy(); } catch (_) {} }, LOAD_TIMEOUT_MS + SETTLE_MS + 8000);
+  const killer = setTimeout(() => { try { win.destroy(); } catch (_) {} }, LOAD_TIMEOUT_MS + SETTLE_MS + 8000 + extraGraceMs);
   try {
     return await fn(win);
   } finally {
@@ -47,6 +47,11 @@ async function withWindow(partition, fn) {
   }
 }
 
+// The provider-history harvest paginates a genuinely slow endpoint (ChatGPT's
+// /backend-api/conversations runs ~4s/page), so its offscreen window must outlive a
+// plain fetch/search window or it gets killed mid-pagination and the whole read is lost.
+const HARVEST_GRACE_MS = 20000;
+
 async function loadAndSettle(win, url) {
   // loadURL rejects on a sub-resource abort even when the main frame is fine, so a rejection is a warning, not a failure; we still try to read the DOM.
   const load = win.loadURL(url, { userAgent: SCRAPE_UA }).catch(() => {});
@@ -78,7 +83,7 @@ async function hiddenEval(partition, url, js) {
   return withWindow(partition, async (win) => {
     await loadAndSettle(win, url);
     return win.webContents.executeJavaScript(js, true).catch(() => null);
-  });
+  }, HARVEST_GRACE_MS);
 }
 
 // Inject the user's own session cookies (read + decrypted by the Python backend) into a
@@ -109,7 +114,7 @@ async function hiddenEvalWithCookies(url, cookieRecords, js) {
     return await withWindow(HARVEST_PARTITION, async (win) => {
       await loadAndSettle(win, url);
       return win.webContents.executeJavaScript(js, true).catch(() => null);
-    });
+    }, HARVEST_GRACE_MS);
   } finally {
     await wipe();
   }
diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index fc366664..e74d1ade 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -27,30 +27,40 @@ function configure(opts) {
   if (opts && typeof opts.readCookies === 'function') p_readCookies = opts.readCookies;
 }
 
-// Runs in the page context. Sweeps the full conversation history (all titles,
-// paginated + deduped) plus ChatGPT Memory. Hard caps bound the work + PII footprint
-// even for a user with thousands of chats; every fetch fails open to empty.
+// Runs in the page context. Sweeps recent conversation titles (paginated + deduped)
+// plus ChatGPT Memory. Bounded on EVERY dimension so no provider's endpoint speed can
+// wedge the read: a wall-clock BUDGET_MS (ChatGPT's /conversations is ~4s/page, so an
+// unbounded loop over a many-chat account would run minutes and outlive the offscreen
+// window, losing everything), a per-fetch abort, and hard page/title caps. The most
+// recent titles are the strongest personalization signal, so a partial is a good result.
+const PREAMBLE = `
+  const BUDGET_MS=14000, PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=120, FETCH_MS=6000;
+  const startedAt = Date.now();
+  const haveTime = () => Date.now() - startedAt < BUDGET_MS;
+  const jget = async (url, extra) => {
+    const ac = new AbortController(); const t = setTimeout(() => ac.abort(), FETCH_MS);
+    try { const r = await fetch(url, Object.assign({credentials:'include', signal:ac.signal}, extra||{})); return r.ok ? await r.json() : null; }
+    catch (e) { return null; } finally { clearTimeout(t); }
+  };`;
 const SCRIPT = {
-  codex: `(async () => {
-    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
+  codex: `(async () => {${PREAMBLE}
     try {
-      const sess = await fetch('/api/auth/session', {credentials:'include'}).then(r=>r.json());
+      const sess = await jget('/api/auth/session');
       if (!sess || !sess.accessToken) return {ok:false, total:0, titles:[], memories:[]};
-      const H = {headers:{Authorization:'Bearer '+sess.accessToken, accept:'application/json'}, credentials:'include'};
+      const H = {headers:{Authorization:'Bearer '+sess.accessToken, accept:'application/json'}};
       const seen = new Set(); const titles = [];
       let offset = 0, page = 0;
-      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
-        const j = await fetch('/backend-api/conversations?offset='+offset+'&limit='+PAGE+'&order=updated', H).then(r=>r.ok?r.json():null).catch(()=>null);
+      while (page < CAP_PAGES && titles.length < CAP_TITLES && haveTime()) {
+        const j = await jget('/backend-api/conversations?offset='+offset+'&limit='+PAGE+'&order=updated', H);
         const items = (j && j.items) || [];
         if (!items.length) break;
         let fresh = 0;
         for (const c of items) { if (c && c.id && !seen.has(c.id)) { seen.add(c.id); if (c.title) titles.push(c.title); fresh++; } }
-        if (fresh === 0) break;
-        if (items.length < PAGE) break;
+        if (fresh === 0 || items.length < PAGE) break;
         offset += PAGE; page++;
         await new Promise(r=>setTimeout(r, GAP_MS));
       }
-      const mem = await fetch('/backend-api/memories?include_memory_entries=true', H).then(r=>r.ok?r.json():null).catch(()=>null);
+      const mem = await jget('/backend-api/memories?include_memory_entries=true', H);
       return {
         ok: true,
         total: seen.size,
@@ -59,22 +69,20 @@ const SCRIPT = {
       };
     } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
   })()`,
-  claude: `(async () => {
-    const PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=90;
+  claude: `(async () => {${PREAMBLE}
     try {
-      const orgs = await fetch('/api/organizations', {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
+      const orgs = await jget('/api/organizations', {headers:{accept:'application/json'}});
       if (!Array.isArray(orgs) || !orgs.length) return {ok:false, total:0, titles:[], memories:[]};
       const org = orgs[0].uuid;
       const seen = new Set(); const titles = [];
       let offset = 0, page = 0;
-      while (page < CAP_PAGES && titles.length < CAP_TITLES) {
-        const convs = await fetch('/api/organizations/'+org+'/chat_conversations?limit='+PAGE+'&offset='+offset, {credentials:'include', headers:{accept:'application/json'}}).then(r=>r.ok?r.json():null).catch(()=>null);
+      while (page < CAP_PAGES && titles.length < CAP_TITLES && haveTime()) {
+        const convs = await jget('/api/organizations/'+org+'/chat_conversations?limit='+PAGE+'&offset='+offset, {headers:{accept:'application/json'}});
         const items = Array.isArray(convs) ? convs : [];
         if (!items.length) break;
         let fresh = 0;
         for (const c of items) { const id = c && c.uuid; if (id && !seen.has(id)) { seen.add(id); if (c.name) titles.push(c.name); fresh++; } }
-        if (fresh === 0) break;
-        if (items.length < PAGE) break;
+        if (fresh === 0 || items.length < PAGE) break;
         offset += PAGE; page++;
         await new Promise(r=>setTimeout(r, GAP_MS));
       }

From b9f755da30a028526d2fa8bd22f60c2cb945ac49 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 16 Jul 2026 14:11:12 -0700
Subject: [PATCH 048/248] [eric] onboarding: gemini history harvest via
 offscreen scrape + scoped google SSO cookies

---
 .../apps/onboarding/usage/browser_cookies.py  | 16 +++++++++++
 backend/apps/onboarding/usage/dump_cookies.py | 16 +++++++++--
 backend/tests/test_onboarding.py              | 28 ++++++++++++++++++-
 electron/usageHarvest.js                      | 25 ++++++++++++++++-
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |  3 +-
 frontend/src/shared/providerUsage.ts          |  2 +-
 6 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/backend/apps/onboarding/usage/browser_cookies.py b/backend/apps/onboarding/usage/browser_cookies.py
index 9f4148f9..828ee62d 100644
--- a/backend/apps/onboarding/usage/browser_cookies.py
+++ b/backend/apps/onboarding/usage/browser_cookies.py
@@ -199,6 +199,22 @@ def read_provider_cookie_records(domain: str) -> List[Dict[str, Any]]:
     return records
 
 
+# Gemini authenticates on the parent .google.com SSO domain, not gemini.google.com, so its
+# session lives in these named cookies. We read ONLY these (never the whole google cookie
+# jar) and only to load a Gemini page offscreen, keeping the ChatGPT/Claude trust frame.
+GOOGLE_AUTH_COOKIE_NAMES = {
+    "SID", "HSID", "SSID", "APISID", "SAPISID", "SIDCC", "NID",
+    "__Secure-1PSID", "__Secure-3PSID", "__Secure-1PSIDTS", "__Secure-3PSIDTS",
+    "__Secure-1PSIDCC", "__Secure-3PSIDCC", "__Secure-1PAPISID", "__Secure-3PAPISID",
+}
+
+
+@typechecked
+def read_google_session_records() -> List[Dict[str, Any]]:
+    """The named Google SSO cookies from .google.com, so the offscreen browser can load Gemini logged in. Scoped to the auth set by name, never a general google-cookie sweep."""
+    return [r for r in read_provider_cookie_records(".google.com") if r.get("name") in GOOGLE_AUTH_COOKIE_NAMES]
+
+
 @typechecked
 def cookie_header(jar: Dict[str, str]) -> str:
     return "; ".join(f"{k}={v}" for k, v in jar.items())
diff --git a/backend/apps/onboarding/usage/dump_cookies.py b/backend/apps/onboarding/usage/dump_cookies.py
index aa6f95d5..565611db 100644
--- a/backend/apps/onboarding/usage/dump_cookies.py
+++ b/backend/apps/onboarding/usage/dump_cookies.py
@@ -9,15 +9,27 @@ anything (bad domain, no session, denied keychain). Never logs the cookie values
 
 import json
 import sys
+from typing import Any, Dict, List
 
-from backend.apps.onboarding.usage.browser_cookies import read_provider_cookie_records
+from backend.apps.onboarding.usage.browser_cookies import (
+    read_google_session_records,
+    read_provider_cookie_records,
+)
 
 ALLOWED_DOMAINS = {"chatgpt.com", "claude.ai", "gemini.google.com"}
 
 
+def records_for(domain: str) -> List[Dict[str, Any]]:
+    # Gemini's login lives on the parent .google.com SSO domain, so read the scoped google
+    # auth set for it; every other provider reads only its own domain.
+    if domain == "gemini.google.com":
+        return read_google_session_records()
+    return read_provider_cookie_records(domain)
+
+
 def main() -> None:
     domain = sys.argv[1] if len(sys.argv) > 1 else ""
-    records = read_provider_cookie_records(domain) if domain in ALLOWED_DOMAINS else []
+    records = records_for(domain) if domain in ALLOWED_DOMAINS else []
     sys.stdout.write(json.dumps(records))
 
 
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index 780a97b6..c2546db9 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -144,8 +144,9 @@ def test_read_provider_cookies_fails_open_without_a_store(monkeypatch):
 def test_dump_cookies_only_serves_allowlisted_domains(monkeypatch, capsys):
     from backend.apps.onboarding.usage import dump_cookies
 
-    # Patch the name in dump_cookies' own namespace, so a real read (+ keychain) never fires.
+    # Patch the names in dump_cookies' own namespace, so a real read (+ keychain) never fires.
     monkeypatch.setattr(dump_cookies, "read_provider_cookie_records", lambda domain: [{"name": "x", "value": "y"}])
+    monkeypatch.setattr(dump_cookies, "read_google_session_records", lambda: [{"name": "SID", "value": "g"}])
     # An off-list domain must never trigger a read, prints [].
     monkeypatch.setattr("sys.argv", ["dump_cookies", "evil.example.com"])
     dump_cookies.main()
@@ -154,6 +155,31 @@ def test_dump_cookies_only_serves_allowlisted_domains(monkeypatch, capsys):
     monkeypatch.setattr("sys.argv", ["dump_cookies", "claude.ai"])
     dump_cookies.main()
     assert '"name": "x"' in capsys.readouterr().out
+    # Gemini routes to the SCOPED google reader, not a raw gemini.google.com read.
+    monkeypatch.setattr("sys.argv", ["dump_cookies", "gemini.google.com"])
+    dump_cookies.main()
+    assert '"name": "SID"' in capsys.readouterr().out
+
+
+def test_read_google_session_records_scopes_to_named_auth_cookies(monkeypatch):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    seen_domain = {}
+
+    def fake_records(domain: str):
+        seen_domain["d"] = domain
+        return [
+            {"name": "SID", "value": "a"},
+            {"name": "__Secure-1PSID", "value": "b"},
+            {"name": "SEARCH_SAMESITE", "value": "c"},  # non-auth google cookie
+            {"name": "OTZ", "value": "d"},  # non-auth google cookie
+        ]
+
+    monkeypatch.setattr(browser_cookies, "read_provider_cookie_records", fake_records)
+    recs = browser_cookies.read_google_session_records()
+    # Reads the parent SSO domain, then keeps ONLY the named auth cookies (never a full sweep).
+    assert seen_domain["d"] == ".google.com"
+    assert {r["name"] for r in recs} == {"SID", "__Secure-1PSID"}
 
 
 def test_summarize_claude_usage_counts_and_caps():
diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index e74d1ade..414d96bf 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -13,11 +13,13 @@ const hiddenBrowser = require('./hiddenBrowser');
 const ORIGIN = {
   codex: 'https://chatgpt.com/',
   claude: 'https://claude.ai/',
+  gemini: 'https://gemini.google.com/app',
 };
 
 const DOMAIN = {
   codex: 'chatgpt.com',
   claude: 'claude.ai',
+  gemini: 'gemini.google.com',
 };
 
 // Main injects a (domain) => Promise<cookieRecords[]> that spawns the Python cookie reader.
@@ -89,6 +91,27 @@ const SCRIPT = {
       return {ok:true, total:seen.size, titles:titles.slice(0, CAP_TITLES), memories:[]};
     } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
   })()`,
+  // Gemini has no clean history JSON (it's the obfuscated batchexecute RPC), so we scrape the
+  // rendered rail instead: it starts collapsed, so click "Open sidebar", then read the recent
+  // conversation titles as they hydrate. Each title is length-capped so a stray long node can't
+  // pollute the profile; bounded by the same wall-clock budget as the fetch providers.
+  gemini: `(async () => {
+    const BUDGET_MS=14000, CAP_TITLES=200, TITLE_MAX=140; const startedAt=Date.now();
+    try {
+      const btn = Array.from(document.querySelectorAll('button,[role="button"]')).find(b => /open sidebar|main menu|expand/i.test(b.getAttribute('aria-label')||''));
+      if (btn) { try { btn.click(); } catch(_){} }
+      const seen = new Set(); const titles = []; let zeroStreak = 0;
+      while (Date.now()-startedAt < BUDGET_MS && titles.length < CAP_TITLES) {
+        let nodes = document.querySelectorAll('[data-test-id="conversation"] .title-text');
+        if (!nodes.length) nodes = document.querySelectorAll('[data-test-id="conversation"] a');
+        let fresh = 0;
+        nodes.forEach(e => { const t=(e.textContent||'').trim().slice(0, TITLE_MAX); if (t && !seen.has(t)) { seen.add(t); titles.push(t); fresh++; } });
+        if (titles.length > 0 && fresh === 0) { if (++zeroStreak >= 2) break; } else { zeroStreak = 0; }
+        await new Promise(r=>setTimeout(r, 700));
+      }
+      return { ok: titles.length>0, total: titles.length, titles: titles.slice(0, CAP_TITLES), memories: [] };
+    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
+  })()`,
 };
 
 const EMPTY = { ok: false, total: 0, titles: [], memories: [] };
@@ -99,7 +122,7 @@ function p_usable(res) {
 }
 
 async function harvest(partition, provider) {
-  if (provider !== 'codex' && provider !== 'claude') return EMPTY;
+  if (provider !== 'codex' && provider !== 'claude' && provider !== 'gemini') return EMPTY;
   // First run: read the user's own browser session cookies, inject into a throwaway real-Chrome
   // context, and harvest there. This is the only path that beats provider Cloudflare AND works
   // before the user has opened the site in-app.
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 7e7c816e..418fac79 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -49,7 +49,8 @@ export function useOnboardingV3Pipeline() {
   // Read what the user works on, silently and with no card: main opens the provider site offscreen on the browser partition and runs its own harvest script (see electron/usageHarvest.js). Fail-open: no session in the partition, off-Electron, or an error => empty summary, prep falls back to scan + identity.
   const kickUsageRead = useCallback((provider: string, consented: boolean) => {
     if (usageReadRef.current || !consented) return;
-    const key: UsageProvider | null = provider === 'codex' ? 'codex' : provider === 'claude' ? 'claude' : null;
+    const geminiIds = provider === 'antigravity' || provider === 'gemini-cli' || provider === 'gemini';
+    const key: UsageProvider | null = provider === 'codex' ? 'codex' : provider === 'claude' ? 'claude' : geminiIds ? 'gemini' : null;
     if (!key) return;
     usageReadRef.current = (async () => {
       try {
diff --git a/frontend/src/shared/providerUsage.ts b/frontend/src/shared/providerUsage.ts
index 6afa85d8..dbf8040f 100644
--- a/frontend/src/shared/providerUsage.ts
+++ b/frontend/src/shared/providerUsage.ts
@@ -1,6 +1,6 @@
 // The user's provider chat history is read offscreen in the main process (see electron/usageHarvest.js), which owns the injected script + the partition session. This module holds only the shared shape + the pure summarizer that turns the raw read into the compact profile block prep sees. The raw read is dropped after; only this summary travels.
 
-export type UsageProvider = 'codex' | 'claude';
+export type UsageProvider = 'codex' | 'claude' | 'gemini';
 
 export interface ProviderUsage {
   ok: boolean;

From 9115e5161728aa6af1161be6e86324e7a6085844 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 16 Jul 2026 14:28:04 -0700
Subject: [PATCH 049/248] [eric] onboarding: robust gemini scrape (stable
 test-id expand, scrape-first, fallback selector)

---
 electron/usageHarvest.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index 414d96bf..6f049a96 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -92,22 +92,33 @@ const SCRIPT = {
     } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
   })()`,
   // Gemini has no clean history JSON (it's the obfuscated batchexecute RPC), so we scrape the
-  // rendered rail instead: it starts collapsed, so click "Open sidebar", then read the recent
-  // conversation titles as they hydrate. Each title is length-capped so a stray long node can't
-  // pollute the profile; bounded by the same wall-clock budget as the fetch providers.
+  // rendered rail. Robust by design: the rail's open state is sticky per account, so scrape
+  // FIRST and only expand when empty (never toggle an open rail shut); expand via a stable
+  // test-id / icon handle, not an English label, so a non-English UI still works; read titles
+  // through a fallback selector so one class rename can't zero the harvest; length-cap each so a
+  // stray long node can't pollute the profile. Bounded by the same wall-clock budget; fails open.
   gemini: `(async () => {
     const BUDGET_MS=14000, CAP_TITLES=200, TITLE_MAX=140; const startedAt=Date.now();
+    const nodes = () => {
+      const n = document.querySelectorAll('[data-test-id="conversation"] .title-text');
+      return n.length ? n : document.querySelectorAll('[data-test-id="conversation"] a');
+    };
+    const anyText = () => Array.from(nodes()).some(e => (e.textContent||'').trim());
     try {
-      const btn = Array.from(document.querySelectorAll('button,[role="button"]')).find(b => /open sidebar|main menu|expand/i.test(b.getAttribute('aria-label')||''));
-      if (btn) { try { btn.click(); } catch(_){} }
+      if (!anyText()) {
+        const btns = Array.from(document.querySelectorAll('button,[role="button"]'));
+        const iconIs = (b, name) => { const i = b.querySelector('mat-icon'); return !!i && (i.getAttribute('data-mat-icon-name') === name || (i.textContent||'').trim() === name); };
+        const toggle = document.querySelector('button[data-test-id="side-nav-sparkle-button"]')
+          || btns.find(b => iconIs(b, 'side_nav_expand'))
+          || btns.find(b => /expand|open.*(sidebar|menu|nav)/i.test(b.getAttribute('aria-label')||''));
+        if (toggle) { try { toggle.click(); } catch(_){} }
+      }
       const seen = new Set(); const titles = []; let zeroStreak = 0;
       while (Date.now()-startedAt < BUDGET_MS && titles.length < CAP_TITLES) {
-        let nodes = document.querySelectorAll('[data-test-id="conversation"] .title-text');
-        if (!nodes.length) nodes = document.querySelectorAll('[data-test-id="conversation"] a');
         let fresh = 0;
-        nodes.forEach(e => { const t=(e.textContent||'').trim().slice(0, TITLE_MAX); if (t && !seen.has(t)) { seen.add(t); titles.push(t); fresh++; } });
+        nodes().forEach(e => { const t=(e.textContent||'').trim().slice(0, TITLE_MAX); if (t && !seen.has(t)) { seen.add(t); titles.push(t); fresh++; } });
         if (titles.length > 0 && fresh === 0) { if (++zeroStreak >= 2) break; } else { zeroStreak = 0; }
-        await new Promise(r=>setTimeout(r, 700));
+        await new Promise(r=>setTimeout(r, 600));
       }
       return { ok: titles.length>0, total: titles.length, titles: titles.slice(0, CAP_TITLES), memories: [] };
     } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }

From 7a35ed4ed8c9221661fe1380b3d2e24c240835c2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 16 Jul 2026 15:35:00 -0700
Subject: [PATCH 050/248] [eric] onboarding: hard-cap harvest +
 bounded/retry-expand gemini loop (no empty-case budget spin)

---
 electron/usageHarvest.js | 60 +++++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index 6f049a96..d7a5af3c 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -92,33 +92,28 @@ const SCRIPT = {
     } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
   })()`,
   // Gemini has no clean history JSON (it's the obfuscated batchexecute RPC), so we scrape the
-  // rendered rail. Robust by design: the rail's open state is sticky per account, so scrape
-  // FIRST and only expand when empty (never toggle an open rail shut); expand via a stable
-  // test-id / icon handle, not an English label, so a non-English UI still works; read titles
-  // through a fallback selector so one class rename can't zero the harvest; length-cap each so a
-  // stray long node can't pollute the profile. Bounded by the same wall-clock budget; fails open.
+  // rendered rail. Robust by design, one bounded loop that: gates on real TEXT (empty conversation
+  // shells persist even when the rail is collapsed, so container count lies); RE-tries the expand
+  // every poll (the SPA can mount the toggle after settle, and a one-shot click would miss it),
+  // via a stable test-id / icon handle (not an English label) so a non-English UI works, and a
+  // no-op once open so an open rail is never toggled shut; reads titles through a fallback
+  // selector so a .title-text rename can't zero the harvest; length-caps each; and gives up fast
+  // when no text renders (no history / broken DOM) so an empty account can't burn the budget.
   gemini: `(async () => {
-    const BUDGET_MS=14000, CAP_TITLES=200, TITLE_MAX=140; const startedAt=Date.now();
-    const nodes = () => {
-      const n = document.querySelectorAll('[data-test-id="conversation"] .title-text');
-      return n.length ? n : document.querySelectorAll('[data-test-id="conversation"] a');
-    };
-    const anyText = () => Array.from(nodes()).some(e => (e.textContent||'').trim());
+    const BUDGET_MS=14000, TEXT_DEADLINE_MS=8000, POLL_MS=500, CAP_TITLES=200, TITLE_MAX=140;
+    const startedAt=Date.now();
+    const sleep=(ms)=>new Promise(r=>setTimeout(r,ms));
+    const titleNodes=()=>{const n=document.querySelectorAll('[data-test-id="conversation"] .title-text');return n.length?n:document.querySelectorAll('[data-test-id="conversation"] a');};
+    const iconIs=(b,name)=>{const i=b.querySelector('mat-icon');return !!i&&(i.getAttribute('data-mat-icon-name')===name||(i.textContent||'').trim()===name);};
+    const findExpand=()=>{const bs=Array.from(document.querySelectorAll('button,[role="button"]'));return document.querySelector('button[data-test-id="side-nav-sparkle-button"]')||bs.find(b=>iconIs(b,'side_nav_expand'))||bs.find(b=>/expand|open.*(sidebar|menu|nav)/i.test(b.getAttribute('aria-label')||''));};
     try {
-      if (!anyText()) {
-        const btns = Array.from(document.querySelectorAll('button,[role="button"]'));
-        const iconIs = (b, name) => { const i = b.querySelector('mat-icon'); return !!i && (i.getAttribute('data-mat-icon-name') === name || (i.textContent||'').trim() === name); };
-        const toggle = document.querySelector('button[data-test-id="side-nav-sparkle-button"]')
-          || btns.find(b => iconIs(b, 'side_nav_expand'))
-          || btns.find(b => /expand|open.*(sidebar|menu|nav)/i.test(b.getAttribute('aria-label')||''));
-        if (toggle) { try { toggle.click(); } catch(_){} }
-      }
-      const seen = new Set(); const titles = []; let zeroStreak = 0;
+      const seen=new Set(); const titles=[]; let stable=0;
       while (Date.now()-startedAt < BUDGET_MS && titles.length < CAP_TITLES) {
-        let fresh = 0;
-        nodes().forEach(e => { const t=(e.textContent||'').trim().slice(0, TITLE_MAX); if (t && !seen.has(t)) { seen.add(t); titles.push(t); fresh++; } });
-        if (titles.length > 0 && fresh === 0) { if (++zeroStreak >= 2) break; } else { zeroStreak = 0; }
-        await new Promise(r=>setTimeout(r, 600));
+        let fresh=0;
+        titleNodes().forEach(e=>{const t=(e.textContent||'').trim().slice(0,TITLE_MAX); if(t&&!seen.has(t)){seen.add(t);titles.push(t);fresh++;}});
+        if (titles.length>0) { if (fresh===0){ if(++stable>=2) break; } else stable=0; }
+        else { const b=findExpand(); if(b){try{b.click();}catch(_){}} if (Date.now()-startedAt > TEXT_DEADLINE_MS) break; }
+        await sleep(POLL_MS);
       }
       return { ok: titles.length>0, total: titles.length, titles: titles.slice(0, CAP_TITLES), memories: [] };
     } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
@@ -132,8 +127,7 @@ function p_usable(res) {
     (res.total > 0 || (res.memories && res.memories.length) || (res.titles && res.titles.length));
 }
 
-async function harvest(partition, provider) {
-  if (provider !== 'codex' && provider !== 'claude' && provider !== 'gemini') return EMPTY;
+async function p_harvestOnce(partition, provider) {
   // First run: read the user's own browser session cookies, inject into a throwaway real-Chrome
   // context, and harvest there. This is the only path that beats provider Cloudflare AND works
   // before the user has opened the site in-app.
@@ -152,4 +146,18 @@ async function harvest(partition, provider) {
   return p_usable(res) ? res : EMPTY;
 }
 
+// Hard ceiling on the WHOLE harvest (both attempts): a stale-session provider does two full
+// offscreen loads, and a hung redirect could otherwise churn a background window toward the
+// window-killer. This guarantees harvest() always resolves fast (fail-open); the offscreen
+// windows still self-destruct via withWindow. Comfortably above a healthy harvest (~6s).
+const HARVEST_HARD_CAP_MS = 30000;
+
+async function harvest(partition, provider) {
+  if (provider !== 'codex' && provider !== 'claude' && provider !== 'gemini') return EMPTY;
+  return Promise.race([
+    p_harvestOnce(partition, provider),
+    new Promise((resolve) => setTimeout(() => resolve(EMPTY), HARVEST_HARD_CAP_MS)),
+  ]);
+}
+
 module.exports = { harvest, configure };

From 8710c651b278a61e0cd69608409f6eaa16e3037a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 16 Jul 2026 15:37:59 -0700
Subject: [PATCH 051/248] [eric] onboarding: cooldown guard so a provider is
 never rapid-reharvested (anti-abuse / logout safety)

---
 electron/usageHarvest.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index d7a5af3c..2e4b9621 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -152,12 +152,24 @@ async function p_harvestOnce(partition, provider) {
 // windows still self-destruct via withWindow. Comfortably above a healthy harvest (~6s).
 const HARVEST_HARD_CAP_MS = 30000;
 
+// Never re-hit a provider we've already read successfully within this window. Rapid repeated
+// reads of the SAME session (especially Google's rotating __Secure-1PSIDTS) can trip provider
+// anti-abuse and log the user OUT of their real account, so every caller funnels through this
+// one cooldown. Failed reads are NOT cached, so a not-yet-logged-in provider stays retryable;
+// a cached success also serves an instant re-request with zero extra network.
+const HARVEST_COOLDOWN_MS = 15 * 60 * 1000;
+const p_okCache = {};
+
 async function harvest(partition, provider) {
   if (provider !== 'codex' && provider !== 'claude' && provider !== 'gemini') return EMPTY;
-  return Promise.race([
+  const cached = p_okCache[provider];
+  if (cached && Date.now() - cached.at < HARVEST_COOLDOWN_MS) return cached.result;
+  const result = await Promise.race([
     p_harvestOnce(partition, provider),
     new Promise((resolve) => setTimeout(() => resolve(EMPTY), HARVEST_HARD_CAP_MS)),
   ]);
+  if (p_usable(result)) p_okCache[provider] = { at: Date.now(), result };
+  return result;
 }
 
 module.exports = { harvest, configure };

From 74309a7cef91e7e63645eed6046de63da3c4d4cb Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:00 -0700
Subject: [PATCH 052/248] [eric] agents: read-only session flag for the
 unattended onboarding audit (Edit/Bash hard-blocked)

---
 backend/apps/agents/core/models.py                  |  6 ++++++
 backend/apps/agents/manager/AgentLaunch.py          |  1 +
 .../permissions/build_effective_tool_lists.py       | 13 +++++++++++++
 frontend/src/shared/state/agentsSlice.ts            |  2 ++
 4 files changed, 22 insertions(+)

diff --git a/backend/apps/agents/core/models.py b/backend/apps/agents/core/models.py
index 48bc5bc3..bc93cdff 100644
--- a/backend/apps/agents/core/models.py
+++ b/backend/apps/agents/core/models.py
@@ -17,6 +17,10 @@ class AgentConfig(BaseModel):
     workflow_edit_id: Optional[str] = None
     # App cards the user picked to edit. When exactly one resolves, launch binds the chat's cwd to that app instead of seeding a new "Untitled App".
     selected_app_output_ids: Optional[list[str]] = None
+    # Onboarding auto-launches an audit over the user's REAL files with nobody watching, so it runs
+    # read-only: Read/Grep/Glob + Write (its one report) allowed, Edit/Bash/NotebookEdit hard-blocked
+    # so "modify or delete an existing file" is unrepresentable, not just discouraged by the prompt.
+    read_only: bool = False
 
 class ApprovalRequest(BaseModel):
     id: str = Field(default_factory=lambda: uuid4().hex)
@@ -84,6 +88,8 @@ class AgentSession(BaseModel):
     sdk_session_id: Optional[str] = None
     system_prompt: Optional[str] = None
     allowed_tools: list[str] = Field(default_factory=list)
+    # Hard-block the mutation/exec tools for this session (onboarding's unattended audit); see AgentConfig.read_only.
+    read_only: bool = False
     max_turns: Optional[int] = None
     cwd: Optional[str] = None
     # Resolved at session start so resume reattaches to the same repo even after the user cd's elsewhere.
diff --git a/backend/apps/agents/manager/AgentLaunch.py b/backend/apps/agents/manager/AgentLaunch.py
index 83c5057d..abf3a806 100644
--- a/backend/apps/agents/manager/AgentLaunch.py
+++ b/backend/apps/agents/manager/AgentLaunch.py
@@ -110,6 +110,7 @@ class AgentLaunch(AgentManagerProtocol):
             mode=config.mode,
             system_prompt=config.system_prompt,
             allowed_tools=tools,
+            read_only=config.read_only,
             max_turns=config.max_turns,
             cwd=effective_cwd,
             repo_url=repo_url,
diff --git a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
index eb916bcd..7d308f6e 100644
--- a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
+++ b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
@@ -19,6 +19,10 @@ from backend.apps.tools_lib.tools_lib import (
     sanitize_server_name as sanitize_server_name,
 )
 
+# Mutation/exec tools a read-only session must never reach: Edit (rewrites files), Bash (rm/mv/overwrite),
+# NotebookEdit (rewrites notebooks). Write is intentionally NOT here, the audit needs its one report.
+READ_ONLY_BLOCKED_TOOLS = ("Edit", "Bash", "NotebookEdit")
+
 
 @typechecked
 def build_effective_tool_lists(
@@ -108,4 +112,13 @@ def build_effective_tool_lists(
     # The claude_code preset ships its own bare `Skill` tool that reads ~/.claude/skills directly; always withhold it so skills only ever load through our provider-agnostic mcp__openswarm-skill__Skill (or not at all).
     if "Skill" not in effective_disallowed:
         effective_disallowed.append("Skill")
+    # Read-only session (onboarding's unattended audit over the user's real files): the mutation/exec
+    # tools are HARD-blocked, not just left out of allowed, so a background agent can never modify or
+    # delete an existing file. Write stays permitted for its single report. Also drop them from allowed
+    # in case a preset seeded them, disallowed wins in the SDK but keep the two lists coherent.
+    if getattr(session, "read_only", False):
+        for dt in READ_ONLY_BLOCKED_TOOLS:
+            if dt not in effective_disallowed:
+                effective_disallowed.append(dt)
+        effective_allowed = [t for t in effective_allowed if t not in READ_ONLY_BLOCKED_TOOLS]
     return effective_allowed, effective_disallowed
diff --git a/frontend/src/shared/state/agentsSlice.ts b/frontend/src/shared/state/agentsSlice.ts
index 18c72f5b..a3628a97 100644
--- a/frontend/src/shared/state/agentsSlice.ts
+++ b/frontend/src/shared/state/agentsSlice.ts
@@ -137,6 +137,8 @@ export interface AgentConfig {
   target_directory?: string;
   dashboard_id?: string;
   selected_app_output_ids?: string[];
+  // Onboarding's unattended audit runs read-only over the user's real files (Edit/Bash hard-blocked).
+  read_only?: boolean;
 }
 
 export interface HistorySession {

From 01aa0ed7b17b03f9b422352703c25216f94f8636 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:11 -0700
Subject: [PATCH 053/248] [eric] onboarding: faster harvest (200-title cap) +
 honest N+ conversation counts

---
 backend/apps/onboarding/usage/chatgpt_usage.py | 10 ++++++----
 electron/usageHarvest.js                       |  7 +++++--
 frontend/src/shared/providerUsage.ts           |  4 +++-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/backend/apps/onboarding/usage/chatgpt_usage.py b/backend/apps/onboarding/usage/chatgpt_usage.py
index fc654158..95fdd4e7 100644
--- a/backend/apps/onboarding/usage/chatgpt_usage.py
+++ b/backend/apps/onboarding/usage/chatgpt_usage.py
@@ -19,7 +19,9 @@ from backend.apps.onboarding.identity import decode_jwt_payload
 BASE = "https://chatgpt.com/backend-api"
 PAGE = 100
 CAP_PAGES = 40
-CAP_TITLES = 1000
+# Prep only reads ~150 titles; this endpoint is ~4s/page, so fetching 1000 cost 38s of onboarding
+# runway for nothing. Cap the title pull; the real conversation total comes from the API's own count.
+CAP_TITLES = 200
 UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36"
 
 
@@ -35,10 +37,10 @@ def p_codex_creds() -> Optional[Tuple[str, Optional[str]]]:
 
 
 @typechecked
-def summarize_chatgpt_usage(total: int, memories: List[str], titles: List[str]) -> str:
+def summarize_chatgpt_usage(total: int, memories: List[str], titles: List[str], capped: bool = False) -> str:
     parts: List[str] = []
     if total > 0:
-        parts.append(f"They have {total} past AI conversations.")
+        parts.append(f"They have {total}{'+' if capped else ''} past AI conversations.")
     if memories:
         parts.append("Facts their AI remembers about them: " + "; ".join(memories))
     if titles:
@@ -96,4 +98,4 @@ async def harvest_chatgpt_usage() -> str:
                 pass
     except Exception:
         return ""
-    return summarize_chatgpt_usage(len(seen), memories, titles)
+    return summarize_chatgpt_usage(len(seen), memories, titles, capped=len(titles) >= CAP_TITLES)
diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index 2e4b9621..fd3320ba 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -36,7 +36,9 @@ function configure(opts) {
 // window, losing everything), a per-fetch abort, and hard page/title caps. The most
 // recent titles are the strongest personalization signal, so a partial is a good result.
 const PREAMBLE = `
-  const BUDGET_MS=14000, PAGE=100, CAP_PAGES=60, CAP_TITLES=1000, GAP_MS=120, FETCH_MS=6000;
+  // Prep reads only ~150 titles, so pulling 1000 just burned onboarding runway (up to the 14s budget)
+  // for signal we throw away. Cap the pull; the count becomes an honest "N+" floor when we stop early.
+  const BUDGET_MS=14000, PAGE=100, CAP_PAGES=60, CAP_TITLES=200, GAP_MS=120, FETCH_MS=6000;
   const startedAt = Date.now();
   const haveTime = () => Date.now() - startedAt < BUDGET_MS;
   const jget = async (url, extra) => {
@@ -66,6 +68,7 @@ const SCRIPT = {
       return {
         ok: true,
         total: seen.size,
+        capped: seen.size >= CAP_TITLES,
         titles: titles.slice(0, CAP_TITLES),
         memories: ((mem && mem.memories) || []).map(m=>m.content).filter(Boolean).slice(0, 40),
       };
@@ -88,7 +91,7 @@ const SCRIPT = {
         offset += PAGE; page++;
         await new Promise(r=>setTimeout(r, GAP_MS));
       }
-      return {ok:true, total:seen.size, titles:titles.slice(0, CAP_TITLES), memories:[]};
+      return {ok:true, total:seen.size, capped:seen.size >= CAP_TITLES, titles:titles.slice(0, CAP_TITLES), memories:[]};
     } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
   })()`,
   // Gemini has no clean history JSON (it's the obfuscated batchexecute RPC), so we scrape the
diff --git a/frontend/src/shared/providerUsage.ts b/frontend/src/shared/providerUsage.ts
index dbf8040f..2013f36f 100644
--- a/frontend/src/shared/providerUsage.ts
+++ b/frontend/src/shared/providerUsage.ts
@@ -5,6 +5,8 @@ export type UsageProvider = 'codex' | 'claude' | 'gemini';
 export interface ProviderUsage {
   ok: boolean;
   total: number;
+  // We stop fetching titles early (prep only needs ~150), so total is a floor when this is set.
+  capped?: boolean;
   titles: string[];
   memories: string[];
 }
@@ -13,7 +15,7 @@ export interface ProviderUsage {
 export function summarizeUsage(u: ProviderUsage | null): string {
   if (!u || !u.ok) return '';
   const parts: string[] = [];
-  if (u.total > 0) parts.push(`They have ${u.total} past AI conversations.`);
+  if (u.total > 0) parts.push(`They have ${u.total}${u.capped ? '+' : ''} past AI conversations.`);
   if (u.memories.length > 0) parts.push('Facts their AI remembers about them: ' + u.memories.join('; '));
   if (u.titles.length > 0) parts.push('Topics they keep coming back to (recent first): ' + u.titles.slice(0, 150).join('; '));
   return parts.join('\n').slice(0, 4000);

From 936bad0008025f23f9dd36ef8e1cae26c0722fb3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:11 -0700
Subject: [PATCH 054/248] [eric] onboarding: 4-job reveal (personal dashboard
 app, live research, cleanup, scheduled task) + grounded self-contained
 prompts

---
 backend/apps/onboarding/models.py             |   5 +
 backend/apps/onboarding/prep.py               | 256 +++++++++++++++---
 .../OnboardingV3/onboardingV3Api.ts           |   3 +
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |  63 ++++-
 .../app/components/nudges/PrepKeepToast.tsx   |  12 +-
 .../src/shared/state/onboardingV3Slice.ts     |  17 +-
 6 files changed, 305 insertions(+), 51 deletions(-)

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 4637a652..46bf0bbe 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -59,4 +59,9 @@ class PrepResponse(BaseModel):
     app_title: str = ""
     app_prompt: str = ""
     app_reason: str = ""
+    # The "looked into this for you" card: a live web-research task aimed at the ONE thing this user
+    # keeps asking their AI about, so the reveal shows OpenSwarm going and finding it, not just planning.
+    research_title: str = ""
+    research_prompt: str = ""
+    research_reason: str = ""
     automations: List[PersonalizedAutomation] = Field(default_factory=list)
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index 8e1f7034..0efd999d 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -27,13 +27,14 @@ P_SYSTEM = (
     "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
-    '{"greeting": string, "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
+    '{"greeting": string, "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "research_title": string, "research_prompt": string, "research_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
     "First, silently infer a short, confident profile of this user: who they are and what they are working on. "
     "If usage_summary is present it is the STRONGEST signal (it is what they actually ask their AI about and facts "
     "their AI remembers about them); weight it above everything else, then signal_apps (the high-signal tools they "
     "have installed, like an IDE, a design app, or a DAW: these reveal their craft), then folders, plan tier, email "
     "domain. Tune every task and the personal app to that profile; do not output the profile. "
-    "Exactly 4 starters. Each title is 2-5 words. Each prompt is a concrete, safe, immediately runnable task "
+    "Exactly 4 starters. Each title is 2-5 words that PLAINLY say what the task does (like 'Sort my "
+    "Downloads' or 'Compare headphones'), never clever, punny, or brand-style. Each prompt is a concrete, safe, immediately runnable task "
     "referencing the user's real folders, file counts, or picked apps when possible; never invent facts, never "
     "propose deleting anything without review. The FIRST starter must be an audit sized for parallel sub-work "
     "(inspect folders, cross-reference, produce one report); it may create ONE new report file but must never "
@@ -43,14 +44,29 @@ P_SYSTEM = (
     "Each starter's 'reason' is ONE short standalone clause (max 12 words, no leading 'because') naming the SPECIFIC "
     "real thing you observed (a folder, a file count, a picked app, a usage fact) that makes this task useful for THIS "
     "user; it must be grounded in the input facts, never invented, and read like a person pointing at what they saw. "
-    "Also design ONE small personal app for this user: app_title is 2-4 words, app_prompt starts with 'Build me' and "
-    "describes a small, immediately useful single-page app tailored to the profile (their files, habits, or picked "
-    "apps), self-contained with no accounts or API keys. app_reason follows the same one-clause grounded-observation "
-    "rule as a starter reason. "
+    "Design ONE personal app and make it the CENTERPIECE: an interactive single-page dashboard that mirrors THIS "
+    "user's world, drawn from usage_summary and their files. It surfaces the real projects they are juggling, the "
+    "threads or questions they keep returning to, and what they have been focused on lately, laid out as a clean "
+    "visual dashboard they will want to keep open (cards, lists, a simple chart), seeded with their REAL specifics so "
+    "it is unmistakably about them, not a generic template. app_title is 2-4 words that PLAINLY say what it is (like "
+    "'Your Work Dashboard' or 'Project Hub'), never clever or punny; app_prompt starts with 'Build me' and names the "
+    "actual sections to include using the user's real projects and topics; self-contained, no accounts or API keys. "
+    "app_reason follows the same one-clause grounded-observation rule as a starter reason. "
+    "Also pick the SINGLE topic this user most repeatedly asks their AI about (from usage_summary; if it is thin, use "
+    "their strongest work signal from signal_apps or folders) and turn it into a live web-research task. research_title "
+    "is 2-4 words plainly naming the topic (like 'App Store Fees' or 'Best Vector DBs'), never clever or punny. "
+    "research_prompt is one instruction telling the agent to search the web RIGHT NOW and produce a tight, useful, "
+    "current answer or comparison of THAT topic for this user (an actual answer, never a plan); it must demand "
+    "THIS-YEAR information with publication dates on sources, so the answer cannot quietly be stale training data. "
+    "research_reason follows the one-clause grounded-observation rule and names the specific recurring question you saw. "
     "Also propose 2-3 automations: recurring routines worth running on a schedule for THIS user, drawn from their "
     "profile and habits (for example a daily morning brief, a weekly folder cleanup, a weekday summary of their "
-    "connected apps). Each automation title is 2-4 words, prompt is one runnable instruction, cadence is exactly "
-    "'daily', 'weekday', or 'weekly'. Automations must be safe to run unattended (never delete without review). "
+    "connected apps). Each automation title is 2-4 words that plainly name the routine (like 'Downloads Cleanup' or "
+    "'Morning Brief'), cadence is exactly 'daily', 'weekday', or 'weekly'. The prompt is the COMPLETE instruction an "
+    "agent executes alone on each scheduled run with NO human present: it must produce its result in one pass, never "
+    "ask questions, never wait for input, and never set up schedules or reminders (the schedule already exists; "
+    "writing 'remind me' or 'set up a log' is wrong, 'summarize X into a file' is right). "
+    "Automations must be safe to run unattended (never delete without review). "
     "The greeting is one or two warm sentences: first say out loud, specifically and confidently, what this person is "
     "into or working on (grounded in usage_summary, signal_apps, and folders, for example 'Looks like you live in "
     "Xcode and ship iOS apps'), then name 2-3 concrete things you actually saw. Be specific, never generic, and never "
@@ -58,44 +74,201 @@ P_SYSTEM = (
 )
 
 
+P_CURLY_QUOTES = {"“": '"', "”": '"', "‘": "'", "’": "'"}
+
+
 @typechecked
-def parse_prep(text: str) -> Optional[PrepResponse]:
+def p_normalize_json_text(text: str) -> str:
+    for bad, good in P_CURLY_QUOTES.items():
+        text = text.replace(bad, good)
+    return text
+
+
+@typechecked
+def p_strip_trailing_commas(s: str) -> str:
+    return re.sub(r",(\s*[}\]])", r"\1", s)
+
+
+@typechecked
+def p_strip_dashes(s: str) -> str:
+    """The house style bans em/en dashes and the model slips them into the greeting anyway, so
+    guarantee it in code: turn a dash-clause into a comma-clause, then tidy any doubled punctuation."""
+    s = s.replace(" — ", ", ").replace("—", ", ").replace(" – ", ", ").replace("–", ", ")
+    s = re.sub(r"\s+([,.;:])", r"\1", s)
+    s = re.sub(r",\s*,", ", ", s)
+    s = re.sub(r"\s{2,}", " ", s)
+    return s.strip()
+
+
+@typechecked
+def p_load_object(text: str) -> dict:
+    """Best-effort load of the outermost JSON object: strict first, then a
+    trailing-comma repair. Returns {} if neither parses (salvage handles the rest)."""
     match = re.search(r"\{.*\}", text, re.DOTALL)
     if not match:
-        return None
-    try:
-        data = json.loads(match.group(0))
-        starters = [
-            PersonalizedStarter(title=str(s.get("title", "")).strip(), prompt=str(s.get("prompt", "")).strip(), reason=str(s.get("reason", "")).strip())
-            for s in data.get("starters", [])
-            if isinstance(s, dict) and str(s.get("title", "")).strip() and str(s.get("prompt", "")).strip()
-        ]
-        if not starters:
-            return None
-        automations = [
-            PersonalizedAutomation(
-                title=str(a.get("title", "")).strip(),
-                prompt=str(a.get("prompt", "")).strip(),
-                cadence=(str(a.get("cadence", "weekly")).strip().lower() if str(a.get("cadence", "")).strip().lower() in VALID_CADENCE else "weekly"),
-            )
-            for a in data.get("automations", [])
-            if isinstance(a, dict) and str(a.get("title", "")).strip() and str(a.get("prompt", "")).strip()
-        ]
-        return PrepResponse(
-            greeting=str(data.get("greeting", "")).strip(),
-            starters=starters[:4],
-            app_title=str(data.get("app_title", "")).strip(),
-            app_prompt=str(data.get("app_prompt", "")).strip(),
-            app_reason=str(data.get("app_reason", "")).strip(),
-            automations=automations[:3],
+        return {}
+    for candidate in (match.group(0), p_strip_trailing_commas(match.group(0))):
+        try:
+            parsed = json.loads(candidate)
+            if isinstance(parsed, dict):
+                return parsed
+        except Exception:
+            continue
+    return {}
+
+
+@typechecked
+def p_salvage_flat_objects(text: str) -> List[dict]:
+    """Pull every complete flat {..} object out of a truncated/malformed blob so a
+    cut-off response still yields the starters it did finish (partial > generic)."""
+    out: List[dict] = []
+    for m in re.finditer(r"\{[^{}]*\}", text):
+        try:
+            obj = json.loads(p_strip_trailing_commas(m.group(0)))
+        except Exception:
+            continue
+        if isinstance(obj, dict):
+            out.append(obj)
+    return out
+
+
+@typechecked
+def p_build_starters(rows: List[dict]) -> List[PersonalizedStarter]:
+    return [
+        PersonalizedStarter(title=p_strip_dashes(str(s.get("title", ""))), prompt=p_strip_dashes(str(s.get("prompt", ""))), reason=p_strip_dashes(str(s.get("reason", ""))))
+        for s in rows
+        if isinstance(s, dict) and str(s.get("title", "")).strip() and str(s.get("prompt", "")).strip() and "cadence" not in s
+    ]
+
+
+@typechecked
+def p_extract_string_field(text: str, name: str) -> str:
+    """Pull a top-level "name": "value" string straight out of the raw blob, for the fields that
+    aren't objects (greeting, app_*) so they survive when the strict JSON load failed and we salvage."""
+    m = re.search(rf'"{name}"\s*:\s*"((?:[^"\\]|\\.)*)"', text)
+    return m.group(1).strip() if m else ""
+
+
+@typechecked
+def p_build_automations(rows: List[dict]) -> List[PersonalizedAutomation]:
+    return [
+        PersonalizedAutomation(
+            title=p_strip_dashes(str(a.get("title", ""))),
+            prompt=p_strip_dashes(str(a.get("prompt", ""))),
+            cadence=(str(a.get("cadence", "weekly")).strip().lower() if str(a.get("cadence", "")).strip().lower() in VALID_CADENCE else "weekly"),
         )
-    except Exception:
+        for a in rows
+        if isinstance(a, dict) and str(a.get("title", "")).strip() and str(a.get("prompt", "")).strip()
+    ]
+
+
+@typechecked
+def parse_prep(text: str) -> Optional[PrepResponse]:
+    text = p_normalize_json_text(text)
+    data = p_load_object(text)
+    starters = p_build_starters(data.get("starters") if isinstance(data.get("starters"), list) else [])
+    automations = p_build_automations(data.get("automations") if isinstance(data.get("automations"), list) else [])
+    greeting = str(data.get("greeting", "")).strip()
+    app_title = str(data.get("app_title", "")).strip()
+    app_prompt = str(data.get("app_prompt", "")).strip()
+    app_reason = str(data.get("app_reason", "")).strip()
+    research_title = str(data.get("research_title", "")).strip()
+    research_prompt = str(data.get("research_prompt", "")).strip()
+    research_reason = str(data.get("research_reason", "")).strip()
+
+    # Truncation / trailing comma / smart quotes broke the strict load: salvage the complete pieces
+    # rather than throwing the whole personalized reveal away for one bad character.
+    if not starters or not automations:
+        objs = p_salvage_flat_objects(text)
+        if not starters:
+            starters = p_build_starters([o for o in objs if "cadence" not in o])
+        if not automations:
+            automations = p_build_automations([o for o in objs if "cadence" in o])
+    # Top-level string fields don't live in the flat objects above, so recover them by name when the
+    # strict load dropped them (a malformed response was still yielding starters but a blank app).
+    if not greeting:
+        greeting = p_extract_string_field(text, "greeting")
+    if not app_title:
+        app_title = p_extract_string_field(text, "app_title")
+    if not app_prompt:
+        app_prompt = p_extract_string_field(text, "app_prompt")
+    if not app_reason:
+        app_reason = p_extract_string_field(text, "app_reason")
+    if not research_title:
+        research_title = p_extract_string_field(text, "research_title")
+    if not research_prompt:
+        research_prompt = p_extract_string_field(text, "research_prompt")
+    if not research_reason:
+        research_reason = p_extract_string_field(text, "research_reason")
+
+    if not starters:
         return None
+    return PrepResponse(
+        greeting=p_strip_dashes(greeting),
+        starters=starters[:4],
+        app_title=p_strip_dashes(app_title),
+        app_prompt=p_strip_dashes(app_prompt),
+        app_reason=p_strip_dashes(app_reason),
+        research_title=p_strip_dashes(research_title),
+        research_prompt=p_strip_dashes(research_prompt),
+        research_reason=p_strip_dashes(research_reason),
+        automations=automations[:3],
+    )
+
+
+@typechecked
+def p_scan_grounded_fallback(request: PrepRequest) -> PrepResponse:
+    """When the aux call can't be made (a sole gemini/codex lane returns empty on 0.3.60, provider
+    down, no anthropic-reachable model), still ground the reveal in the REAL scan via a template so a
+    cross-provider user gets their-Mac-specific starters, not generic stubs. No LLM, so it never fails."""
+    scan = request.scan
+    if scan is None:
+        return PrepResponse(greeting="", starters=list(FALLBACK_STARTERS))
+    downloads = next((f for f in scan.folders if f.name == "Downloads" and f.entry_count > 0), None)
+    apps = scan.signal_apps[:3]
+    bits: List[str] = []
+    if downloads:
+        bits.append(f"{downloads.entry_count} files in Downloads")
+    if apps:
+        bits.append(", ".join(apps))
+    greeting = f"I took a look around your Mac: {'; '.join(bits)}. Here is where I would start." if bits else ""
+    starters: List[PersonalizedStarter] = []
+    if downloads:
+        starters.append(PersonalizedStarter(
+            title="Audit Downloads",
+            prompt=f"Scan my Downloads folder ({downloads.entry_count} files) and produce one report grouping files by type with cleanup suggestions. Do not move or delete anything; write only the report.",
+            reason=f"Downloads has {downloads.entry_count} files worth sorting.",
+        ))
+    for s in FALLBACK_STARTERS:
+        if len(starters) >= 4:
+            break
+        if all(s.title != existing.title for existing in starters):
+            starters.append(s)
+    # Ground the research card on their top tool so the "looked into this" card still appears cross-provider.
+    research_title = ""
+    research_prompt = ""
+    research_reason = ""
+    if apps:
+        research_title = f"{apps[0]} Tips"
+        research_prompt = f"Search the web right now for the most useful current tips, shortcuts, and workflows for {apps[0]}, and give me a tight summary with sources."
+        research_reason = f"You have {apps[0]} installed and use it a lot."
+    return PrepResponse(
+        greeting=greeting,
+        starters=starters[:4],
+        research_title=research_title,
+        research_prompt=research_prompt,
+        research_reason=research_reason,
+    )
 
 
 @typechecked
 async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepResponse:
+    from datetime import date
+
     facts = request.model_dump()
+    # The aux otherwise assumes its training-cutoff year and writes stale ranges like "2024-2025"
+    # into research prompts; telling it today's date keeps "current" meaning current.
+    facts["today"] = date.today().isoformat()
     try:
         from backend.apps.agents.providers.registry import resolve_aux_model
         from backend.apps.settings.credentials import get_anthropic_client_for_model
@@ -104,13 +277,20 @@ async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepRespons
         client = get_anthropic_client_for_model(settings, aux_model)
         resp = await client.messages.create(
             model=aux_model,
-            max_tokens=aux_max_tokens_for(aux_model, base=1100),
+            # The full shape (greeting + 4 starters w/ prompts + app + 3 automations) runs ~1.5-2K
+            # tokens for a rich user; 1100 truncated the JSON mid-object so parse silently fell back.
+            max_tokens=aux_max_tokens_for(aux_model, base=2200),
             system=P_SYSTEM,
             messages=[{"role": "user", "content": json.dumps(facts)}],
+            # Bound the wait: the SDK default is ~10min, so a wedged router/provider would hang the
+            # auto-launch (which awaits this) instead of degrading to the static starters.
+            timeout=45.0,
         )
         parsed = parse_prep(safe_resp_text(resp))
         if parsed is not None:
             return parsed
     except Exception:
         pass
-    return PrepResponse(greeting="", starters=list(FALLBACK_STARTERS))
+    # Aux unusable (empty gemini/codex response on 0.3.60, provider down, no anthropic lane): still
+    # ground the reveal in the real scan rather than shipping generic stubs.
+    return p_scan_grounded_fallback(request)
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 1e6e784e..2cf9145d 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -29,6 +29,9 @@ export interface PrepResponse {
   app_title: string;
   app_prompt: string;
   app_reason: string;
+  research_title: string;
+  research_prompt: string;
+  research_reason: string;
   automations: PersonalizedAutomation[];
 }
 
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 418fac79..0308fb3e 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -1,7 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { updateSettingsPatch } from '@/shared/state/settingsSlice';
+import { updateSettingsPatch, type PersonalizedAutomation } from '@/shared/state/settingsSlice';
 import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from '@/shared/state/agentsSlice';
+import { createWorkflow } from '@/shared/state/workflowsSlice';
 import { hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { getLastDashboardId } from '@/shared/lastDashboardId';
 import { setFlowActive, stageReveal, addPreppedJob } from '@/shared/state/onboardingV3Slice';
@@ -24,6 +25,22 @@ function pickCheapModel(byProvider: Record<string, ModelOption[]>, def: string):
   return [...pool].sort((a, b) => (a.tiers![0]) - (b.tiers![0]))[0].value;
 }
 
+// Turn an automation's cadence into a real schedule (9am local): daily = every day, weekday = Mon-Fri,
+// weekly = Mondays. The first run is always in the future, so the keep/discard toast can cancel it first.
+function cadenceToSchedule(cadence: string): Record<string, unknown> {
+  const base = { enabled: true, repeat_every: 1, hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 };
+  if (cadence === 'daily') return { ...base, repeat_unit: 'day', on_days: [] };
+  if (cadence === 'weekday') return { ...base, repeat_unit: 'week', on_days: [1, 2, 3, 4, 5] };
+  return { ...base, repeat_unit: 'week', on_days: [1] };
+}
+
+// Used when prep's aux dropped the automations field, so the reveal always demonstrates automation.
+const SCHEDULE_FALLBACK: PersonalizedAutomation = {
+  title: 'Weekly Downloads Sweep',
+  prompt: 'Review my Downloads folder for files added this past week and suggest what to keep, archive, or organize into folders. Report only, never move or delete anything.',
+  cadence: 'weekly',
+};
+
 // The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat, and the moment prep resolves the audit AND the app build launch as REAL background agents, so the curtain lifts on work already in motion. Every stage fails soft; the flow never blocks on any of it.
 export function useOnboardingV3Pipeline() {
   const dispatch = useAppDispatch();
@@ -70,12 +87,15 @@ export function useOnboardingV3Pipeline() {
   }, []);
 
   // Fire one real background agent; the session exists in redux without a card until the reveal composes the canvas.
-  const launchJob = useCallback((title: string, prompt: string, kind: 'audit' | 'app', reason: string) => {
+  const launchJob = useCallback((title: string, prompt: string, kind: 'audit' | 'app' | 'research', reason: string) => {
     const { model: liveModel } = launchCtxRef.current;
     const dashboardId = getLastDashboardId() ?? undefined;
-    const config: AgentConfig = { name: title, model: liveModel, mode: 'agent', dashboard_id: dashboardId };
+    // The audit reads the user's REAL files unattended, so it runs read-only (Edit/Bash blocked); the
+    // app build writes into its own fresh workspace, so it keeps full tools.
+    const config: AgentConfig = { name: title, model: liveModel, mode: 'agent', dashboard_id: dashboardId, read_only: kind === 'audit' };
     const draftId = dispatch(createDraftSession({ mode: 'agent', model: liveModel, dashboardId: dashboardId ?? '', setActive: false })).payload.draftId;
-    void dispatch(launchAndSendFirstMessage({ draftId, config, prompt, mode: 'agent', model: liveModel }))
+    // expand: false keeps the reveal's left stack as compact cards instead of overlapping transcripts.
+    void dispatch(launchAndSendFirstMessage({ draftId, config, prompt, mode: 'agent', model: liveModel, expand: false }))
       .then((action) => {
         if (launchAndSendFirstMessage.fulfilled.match(action)) {
           dispatch(addPreppedJob({ sessionId: action.payload.session.id, title, kind, reason }));
@@ -84,6 +104,26 @@ export function useOnboardingV3Pipeline() {
       .catch(() => {});
   }, [dispatch]);
 
+  // Set up ONE real scheduled task from the automations, so the reveal shows OpenSwarm having already
+  // automated something for the user, not just run one-off jobs. It's a real workflow on a real schedule
+  // (first run in the future); the keep/discard toast can delete it. Rides the cheap model like the jobs.
+  const createScheduledJob = useCallback((auto: PersonalizedAutomation) => {
+    const { model: liveModel } = launchCtxRef.current;
+    const dashboardId = getLastDashboardId() ?? undefined;
+    void dispatch(createWorkflow({
+      title: auto.title,
+      description: 'Set up for you during onboarding.',
+      steps: [{ id: `step-${Date.now().toString(36)}`, text: auto.prompt, enabled: true }],
+      schedule: cadenceToSchedule(auto.cadence) as never,
+      dashboard_id: dashboardId,
+      model: liveModel,
+    })).unwrap()
+      .then((wf) => {
+        dispatch(addPreppedJob({ sessionId: '', workflowId: wf.id, title: auto.title, kind: 'schedule', reason: `runs ${auto.cadence} on its own` }));
+      })
+      .catch(() => {});
+  }, [dispatch]);
+
   const kickPrep = useCallback((pickedApps: string[]) => {
     if (prepRef.current) return;
     const scanPromise = scanRef.current ?? Promise.resolve(null);
@@ -97,8 +137,15 @@ export function useOnboardingV3Pipeline() {
       launchedRef.current = true;
       if (prep.starters.length > 0) launchJob(prep.starters[0].title, prep.starters[0].prompt, 'audit', prep.starters[0].reason ?? '');
       if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app', prep.app_reason ?? '');
+      // The "looked into this for you" card: a real live web-research task on the one thing this user
+      // keeps asking about, so the reveal shows OpenSwarm going and finding it, not just planning.
+      if (prep.research_title && prep.research_prompt) launchJob(prep.research_title, prep.research_prompt, 'research', prep.research_reason ?? '');
+      // The scheduled task is a first-class part of the reveal (the "it automates for me" capability), so
+      // guarantee one: use the model's automation when it emitted one (it sometimes drops the last JSON
+      // field), else fall back to a safe, universally-useful weekly Downloads sweep.
+      createScheduledJob(prep.automations[0] ?? SCHEDULE_FALLBACK);
     });
-  }, [launchJob]);
+  }, [launchJob, createScheduledJob]);
 
   const finish = useCallback(async (outcome: 'done' | 'skipped') => {
     if (outcome === 'skipped') {
@@ -106,8 +153,10 @@ export function useOnboardingV3Pipeline() {
       dispatch(updateSettingsPatch({ onboarding_v3: 'skipped', accent_color: accent, accent_gradient: gradient, theme: mode }));
       return;
     }
-    // Cap the wait so a slow aux call degrades to generic starters instead of a hung curtain.
-    const timeout = new Promise<null>((resolve) => { window.setTimeout(() => resolve(null), 15000); });
+    // Cap the wait so a slow aux call degrades to generic starters instead of a hung curtain. Sized
+    // above the real harvest+prep (~17-22s) so a user who rushes the beats still gets the personalized
+    // reveal, not generic; the backend's own 45s aux timeout is the hard backstop behind this.
+    const timeout = new Promise<null>((resolve) => { window.setTimeout(() => resolve(null), 24000); });
     const prep = await Promise.race([prepRef.current ?? Promise.resolve(null), timeout]);
     const greeting = prep?.greeting?.trim() || null;
     const starters = prep?.starters ?? [];
diff --git a/frontend/src/app/components/nudges/PrepKeepToast.tsx b/frontend/src/app/components/nudges/PrepKeepToast.tsx
index 5b9a9358..ba826c23 100644
--- a/frontend/src/app/components/nudges/PrepKeepToast.tsx
+++ b/frontend/src/app/components/nudges/PrepKeepToast.tsx
@@ -5,7 +5,8 @@ import Button from '@mui/material/Button';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { deleteSession } from '@/shared/state/agentsSlice';
-import { removeCard } from '@/shared/state/dashboardLayoutSlice';
+import { removeCard, removeWorkflowCard } from '@/shared/state/dashboardLayoutSlice';
+import { deleteWorkflow } from '@/shared/state/workflowsSlice';
 import { clearPrepped } from '@/shared/state/onboardingV3Slice';
 
 const RESOLVED_KEY = 'openswarm.prep-keep.v1';
@@ -31,8 +32,13 @@ const PrepKeepToast: React.FC = () => {
 
   const discard = useCallback(() => {
     for (const job of prepped) {
-      dispatch(removeCard(job.sessionId));
-      void dispatch(deleteSession({ sessionId: job.sessionId }));
+      if (job.kind === 'schedule' && job.workflowId) {
+        dispatch(removeWorkflowCard(job.workflowId));
+        void dispatch(deleteWorkflow(job.workflowId));
+      } else {
+        dispatch(removeCard(job.sessionId));
+        void dispatch(deleteSession({ sessionId: job.sessionId }));
+      }
     }
     finish();
   }, [prepped, dispatch, finish]);
diff --git a/frontend/src/shared/state/onboardingV3Slice.ts b/frontend/src/shared/state/onboardingV3Slice.ts
index cff6a0bd..f596c844 100644
--- a/frontend/src/shared/state/onboardingV3Slice.ts
+++ b/frontend/src/shared/state/onboardingV3Slice.ts
@@ -4,11 +4,14 @@ import type { PersonalizedStarter } from '@/shared/state/settingsSlice';
 // Transient bridge between the v3 flow overlay and the dashboard: the overlay finishes, stashes the prep payload here, and the dashboard's reveal hook consumes it exactly once to seed the canvas.
 
 export interface PreppedJob {
+  /** Agent-session id for audit/app/research jobs; '' for a scheduled workflow (keyed by workflowId instead). */
   sessionId: string;
   title: string;
-  kind: 'audit' | 'app';
+  kind: 'audit' | 'app' | 'schedule' | 'research';
   /** The one-clause "why we started this for you", shown in the reveal note. */
   reason?: string;
+  /** Set for kind 'schedule': the created scheduled workflow, placed as a workflow card + deletable on discard. */
+  workflowId?: string;
 }
 
 export interface OnboardingV3State {
@@ -23,6 +26,8 @@ export interface OnboardingV3State {
   autoPrompt: string | null;
   /** Background jobs launched mid-flow (audit + app build); the keep/discard toast owns their fate. */
   prepped: PreppedJob[];
+  /** Canvas center the reveal composed around; lets the app view card be born at the arc-end spot. */
+  revealAnchor: { cx: number; cy: number } | null;
 }
 
 const initialState: OnboardingV3State = {
@@ -33,6 +38,7 @@ const initialState: OnboardingV3State = {
   scanSummary: null,
   autoPrompt: null,
   prepped: [],
+  revealAnchor: null,
 };
 
 const onboardingV3Slice = createSlice({
@@ -50,10 +56,15 @@ const onboardingV3Slice = createSlice({
       state.autoPrompt = action.payload.autoPrompt;
     },
     addPreppedJob(state, action: PayloadAction<PreppedJob>) {
-      if (!state.prepped.some((j) => j.sessionId === action.payload.sessionId)) state.prepped.push(action.payload);
+      const key = action.payload.workflowId || action.payload.sessionId;
+      if (!state.prepped.some((j) => (j.workflowId || j.sessionId) === key)) state.prepped.push(action.payload);
+    },
+    setRevealAnchor(state, action: PayloadAction<{ cx: number; cy: number }>) {
+      state.revealAnchor = action.payload;
     },
     clearPrepped(state) {
       state.prepped = [];
+      state.revealAnchor = null;
     },
     clearReveal(state) {
       state.revealPending = false;
@@ -63,5 +74,5 @@ const onboardingV3Slice = createSlice({
   },
 });
 
-export const { setFlowActive, stageReveal, clearReveal, addPreppedJob, clearPrepped } = onboardingV3Slice.actions;
+export const { setFlowActive, stageReveal, clearReveal, addPreppedJob, setRevealAnchor, clearPrepped } = onboardingV3Slice.actions;
 export default onboardingV3Slice.reducer;

From 8ef0cc1c5b8c4313393fe515128bcce2489551d7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:21 -0700
Subject: [PATCH 055/248] [eric] onboarding: composed reveal cluster + camera
 fit, app card born at the arc end

---
 .../hooks/lifecycle/useDashboardLifecycle.ts  |  20 ++-
 .../lifecycle/useOnboardingRevealSeed.ts      | 125 ++++++++++++++----
 .../hooks/state/useDashboardController.ts     |   1 +
 3 files changed, 116 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
index 40472bcd..50e2572b 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, type MutableRefObject } from 'react';
 import { report } from '@/shared/serviceClient';
 import { store } from '@/shared/state/store';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { revealAppSpot } from './useOnboardingRevealSeed';
 import {
   fetchSessions,
   fetchHistory,
@@ -344,14 +345,27 @@ export function useDashboardLifecycle({
       if (sess.dashboard_id !== dashboardId) continue;
       autoOpenedOutputsRef.current.add(output.id);
       if (viewCards[output.id]) continue;
-      dispatch(addViewCard({ outputId: output.id, expandedSessionIds, parentSessionId: sid }));
+      // The onboarding reveal's app is born at its composed arc-end spot (right of the note), not in
+      // the parent's column, so no post-hoc move ever races layout persistence. One-shot per reveal.
+      const v3 = store.getState().onboardingV3;
+      const revealSpot = (v3.revealAnchor && v3.prepped.some((j) => j.kind === 'app' && j.sessionId === sid))
+        ? revealAppSpot(v3.revealAnchor)
+        : null;
+      if (revealSpot) {
+        dispatch(addViewCard({ outputId: output.id, expandedSessionIds, x: revealSpot.x, y: revealSpot.y }));
+      } else {
+        dispatch(addViewCard({ outputId: output.id, expandedSessionIds, parentSessionId: sid }));
+      }
       const outputId = output.id;
       setTimeout(() => {
         const vc = store.getState().dashboardLayout.viewCards[outputId];
         if (!vc) return;
         const rects = [{ x: vc.x, y: vc.y, width: vc.width, height: vc.height }];
-        const ac = store.getState().dashboardLayout.cards[sid];
-        if (ac) rects.push({ x: ac.x, y: ac.y, width: ac.width, height: ac.height });
+        // Reveal spot: frame just the app (the note edges into frame on its left); otherwise include the parent chat.
+        if (!revealSpot) {
+          const ac = store.getState().dashboardLayout.cards[sid];
+          if (ac) rects.push({ x: ac.x, y: ac.y, width: ac.width, height: ac.height });
+        }
         canvasActions.fitToCards(rects, 1.15, true);
         handleHighlightCard(outputId);
       }, 200);
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index c6f1e05d..90c56c8c 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -1,7 +1,11 @@
-import { useEffect, useRef, type RefObject } from 'react';
+import { useCallback, useEffect, useRef, type RefObject } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { addNote, placeCard, DEFAULT_CARD_W, DEFAULT_CARD_H } from '@/shared/state/dashboardLayoutSlice';
-import { clearReveal } from '@/shared/state/onboardingV3Slice';
+import { store } from '@/shared/state/store';
+import {
+  addNote, setNoteSize, placeCard, addWorkflowCard, setWorkflowCardPosition, setViewCardPosition,
+  DEFAULT_CARD_W, DEFAULT_CARD_H, EXPANDED_CARD_MIN_H,
+} from '@/shared/state/dashboardLayoutSlice';
+import { clearReveal, setRevealAnchor } from '@/shared/state/onboardingV3Slice';
 
 interface Args {
   isActive: boolean;
@@ -10,10 +14,20 @@ interface Args {
   viewportRef: RefObject<HTMLDivElement | null>;
   canvasStateRef: RefObject<{ panX: number; panY: number; zoom: number }>;
   createWelcomeDraft: () => void;
+  fitToCards: (rects: Array<{ x: number; y: number; width: number; height: number }>, maxZoom?: number, animate?: boolean, minZoom?: number, centered?: boolean) => void;
 }
 
-// The reveal: onboarding v3 finished behind the curtain and the prepped agents (audit + app build) have been running since mid-flow. Compose the canvas: welcome chat center, running jobs stacked left, the "while you were setting up" note right. The keep/discard toast owns the jobs' fate afterward.
-export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft }: Args): void {
+const GAP = 48;
+const NOTE_W = 340;
+const NOTE_H = 440;
+
+/** Where the reveal's app view card is born: the end of the reading arc, jobs -> chat -> note -> APP, top-aligned. */
+export function revealAppSpot(anchor: { cx: number; cy: number }): { x: number; y: number } {
+  return { x: anchor.cx + DEFAULT_CARD_W / 2 + GAP + NOTE_W + GAP, y: anchor.cy - EXPANDED_CARD_MIN_H / 2 };
+}
+
+// The reveal: onboarding v3 finished behind the curtain and the prepped work (a personal dashboard app, a live web-research dig, a read-only file tidy-up, and one recurring task) has been running since mid-flow. Compose one tight readable cluster: welcome chat center, jobs stacked left, the plain-English note right; the app view card is born at the arc end (via revealAnchor + the lifecycle auto-add) and the camera glides to it when it arrives. The keep/discard toast owns the jobs' fate afterward.
+export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards }: Args): void {
   const dispatch = useAppDispatch();
   const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
   const starters = useAppSelector((s) => s.onboardingV3.starters);
@@ -21,7 +35,34 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
   const prepped = useAppSelector((s) => s.onboardingV3.prepped);
   const settingsLoaded = useAppSelector((s) => s.settings.loaded);
   const seededRef = useRef(false);
+  // Jobs launch async at prep-resolve, so some land in `prepped` a beat AFTER the curtain lifts. The
+  // anchor + placed-set let us keep dropping those cards in the same left stack instead of losing them.
+  const anchorRef = useRef<{ cx: number; cy: number } | null>(null);
+  const placedRef = useRef<Set<string>>(new Set());
 
+  const placeJobs = useCallback(() => {
+    const a = anchorRef.current;
+    if (!a) return;
+    prepped.forEach((job) => {
+      const key = job.workflowId || job.sessionId;
+      if (placedRef.current.has(key)) return;
+      const i = placedRef.current.size;
+      // Left column, top-aligned with the expanded welcome chat, tight vertical rhythm.
+      const x = a.cx - DEFAULT_CARD_W / 2 - GAP - DEFAULT_CARD_W;
+      const y = a.cy - EXPANDED_CARD_MIN_H / 2 + i * (DEFAULT_CARD_H + 24);
+      if (job.kind === 'schedule' && job.workflowId) {
+        // The scheduled task is a workflow, not an agent session: place its workflow card in the same stack.
+        dispatch(addWorkflowCard({ workflowId: job.workflowId, expandedSessionIds }));
+        dispatch(setWorkflowCardPosition({ workflowId: job.workflowId, x, y }));
+      } else {
+        dispatch(placeCard({ sessionId: job.sessionId, x, y, width: DEFAULT_CARD_W, height: DEFAULT_CARD_H, expandedSessionIds, exact: true }));
+      }
+      placedRef.current.add(key);
+    });
+  }, [prepped, dispatch, expandedSessionIds]);
+
+  // One-time: fix the anchor, seed the welcome chat + the "head start" note, place jobs present so far,
+  // then frame the camera on the whole cluster so the curtain lifts onto a composed, readable scene.
   useEffect(() => {
     if (!revealPending || seededRef.current || !isActive || !settingsLoaded) return;
     seededRef.current = true;
@@ -32,33 +73,63 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
         const vr = vp.getBoundingClientRect();
         const cx = (vr.width / 2 - cs.panX) / cs.zoom;
         const cy = (vr.height / 2 - cs.panY) / cs.zoom;
+        anchorRef.current = { cx, cy };
+        dispatch(setRevealAnchor({ cx, cy }));
         const audit = prepped.find((j) => j.kind === 'audit');
         const app = prepped.find((j) => j.kind === 'app');
-        const jobLine = (j: typeof prepped[number]) => (j.reason ? `- ${j.title}: ${j.reason}` : `- ${j.title}`);
-        const lines: string[] = ['While you were setting up, I got a head start.'];
+        const research = prepped.find((j) => j.kind === 'research');
+        const schedule = prepped.find((j) => j.kind === 'schedule');
+        // Lead every card with a plain everyday label so a first-time non-dev instantly gets WHAT each
+        // one is. Phrased as work in motion: at curtain-lift these jobs are usually still running, and
+        // "already done" would be a lie for a few minutes. The cards themselves show live status.
+        const jobSentence = (j: typeof prepped[number]): string => {
+          if (j.kind === 'app') return `App: I'm building you "${j.title}", a dashboard of everything you're working on, in one place. It opens right here when it's ready.`;
+          if (j.kind === 'research') return `Research: I'm looking into "${j.title}" for you on the live web and writing up what's worth knowing.`;
+          if (j.kind === 'schedule') return `Auto-task: "${j.title}" now runs by itself on a schedule, so you don't have to.`;
+          return `Cleanup: I'm going through your files and writing you a plan for what to keep or toss. Nothing gets moved or deleted.`;
+        };
+        const lines: string[] = [`While you were setting up, I got a head start.`];
         if (scanSummary) lines.push(`I looked around your Mac and saw ${scanSummary}.`);
-        const cards: string[] = [];
-        if (audit) cards.push(jobLine(audit));
-        if (app) cards.push(jobLine(app));
-        if (cards.length > 0) lines.push(`So here is what I already have going (cards on your left):\n${cards.join('\n')}`);
-        if (starters.length > 0) lines.push(`Ready whenever you want:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
-        lines.push('Nothing is saved or deleted without you. Keep it going or clear it anytime.');
-        dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + 48, y: cy - 140, color: 'yellow', content: lines.join('\n\n') }));
-        prepped.forEach((job, i) => {
-          dispatch(placeCard({
-            sessionId: job.sessionId,
-            x: cx - DEFAULT_CARD_W * 1.5 - 48,
-            y: cy - DEFAULT_CARD_H / 2 + i * (DEFAULT_CARD_H + 32),
-            width: DEFAULT_CARD_W,
-            height: DEFAULT_CARD_H,
-            expandedSessionIds,
-            exact: true,
-          }));
-        });
+        // Dashboard first (the star), then the web research, the tidy-up, and the recurring task.
+        const jobs = [app, research, audit, schedule].filter((j): j is typeof prepped[number] => Boolean(j));
+        if (jobs.length > 0) lines.push(`Here's what I already have going for you, on the cards to your left:\n${jobs.map((j) => `- ${jobSentence(j)}`).join('\n')}`);
+        if (starters.length > 0) lines.push(`A few more things I can do whenever you want:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
+        lines.push(`Nothing's ever saved or deleted without you. Keep any of it going, or clear it anytime.`);
+        dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + GAP, y: cy - EXPANDED_CARD_MIN_H / 2, color: 'yellow', content: lines.join('\n\n') }));
+        // addNote mints its own id; it lands in pendingFocusNoteId, which nothing else consumes.
+        const noteId = store.getState().dashboardLayout.pendingFocusNoteId;
+        if (noteId) dispatch(setNoteSize({ noteId, width: NOTE_W, height: NOTE_H }));
+        placeJobs();
+        // The app agent often creates its output BEFORE the curtain lifts (it gets a head start at
+        // connect), so its view card was auto-added with no anchor to stage against. Move it to the
+        // arc-end spot now; the birth-position path in useDashboardLifecycle covers late arrivals.
+        if (app?.sessionId) {
+          const now = store.getState();
+          const out = Object.values(now.outputs.items).find((o) => o.session_id === app.sessionId);
+          if (out && now.dashboardLayout.viewCards[out.id]) {
+            const spot = revealAppSpot({ cx, cy });
+            dispatch(setViewCardPosition({ outputId: out.id, x: spot.x, y: spot.y }));
+          }
+        }
+        createWelcomeDraft();
+        // Frame the whole cluster (jobs column + chat + note) so the reveal is readable, not scattered.
+        const left = cx - DEFAULT_CARD_W / 2 - GAP - DEFAULT_CARD_W;
+        const top = cy - EXPANDED_CARD_MIN_H / 2;
+        fitToCards(
+          [{ x: left, y: top, width: (DEFAULT_CARD_W * 2) + NOTE_W + (GAP * 2), height: Math.max(EXPANDED_CARD_MIN_H, DEFAULT_CARD_H * 3 + 48) }],
+          0.9,
+          true,
+        );
+      } else {
+        createWelcomeDraft();
       }
-      createWelcomeDraft();
     } finally {
       dispatch(clearReveal());
     }
-  }, [revealPending, isActive, settingsLoaded, starters, scanSummary, prepped, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, dispatch]);
+  }, [revealPending, isActive, settingsLoaded, starters, scanSummary, prepped, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards, dispatch, placeJobs]);
+
+  // Jobs that launched after the curtain lifted: drop their cards in as they arrive.
+  useEffect(() => {
+    if (seededRef.current) placeJobs();
+  }, [prepped, placeJobs]);
 }
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index cc6a837d..c7f5af3d 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -173,6 +173,7 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
     viewportRef: canvas.viewportRef,
     canvasStateRef,
     createWelcomeDraft,
+    fitToCards: canvas.actions.fitToCards,
   });
 
   // Silently harvest the user's provider chat history the first time they open ChatGPT/Claude in-app, then sharpen their saved suggestions.

From 9e8760e0482d1b978adbe451f81db2f5000a8ed5 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:21 -0700
Subject: [PATCH 056/248] [eric] onboarding: connected state lives on the
 provider tabs; drop consent checkboxes + api-key link

---
 .../OnboardingV3/OnboardingV3Root.tsx         | 127 ++++++++---------
 .../OnboardingV3/beats/BeatConnect.tsx        | 133 +++++-------------
 2 files changed, 100 insertions(+), 160 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index e9394763..cf7801e6 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -1,15 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowRight } from 'lucide-react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { updateSettingsPatch } from '@/shared/state/settingsSlice';
 import { setFlowActive } from '@/shared/state/onboardingV3Slice';
 import { selectSubscriptionConnections } from '@/shared/state/subscriptionsSlice';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useClaudeTokens, useThemeAccent } from '@/shared/styles/ThemeContext';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useOnboardingV3Pipeline } from './useOnboardingV3Pipeline';
-import { GRAIN_URL } from './beats/BeatShell';
-import Starburst from './Starburst';
+import { GRAIN_URL } from '@/shared/styles/grainTexture';
+import { ARC_BLUE_BG, ONBOARDING_SANS } from './beats/BeatShell';
+import OnboardingLogo from './OnboardingLogo';
 import BeatConnect from './beats/BeatConnect';
 import BeatApps from './beats/BeatApps';
 import BeatTheme from './beats/BeatTheme';
@@ -19,8 +20,6 @@ type Beat = 'welcome' | 'newos' | 'connect' | 'apps' | 'theme' | 'card';
 
 const V2_STORAGE_KEY = 'openswarm.onboarding.v2';
 const WINDOWED_BEATS: Beat[] = ['welcome', 'newos'];
-// The opening is its own vivid moment (electric blue -> indigo -> violet), deliberately off-brand; the user's picked color takes over from the theme beat on.
-const INTRO = { core: '#93b5ff', mid: '#5b6cff', edge: '#a855f7' };
 
 // Decides whether the v3 full-screen flow owns this launch. Only genuinely fresh installs see it: anyone with the v2 tour key or existing sessions is auto-marked skipped so an update never re-onboards a veteran.
 function useOnboardingV3Gate(): boolean {
@@ -34,52 +33,51 @@ function useOnboardingV3Gate(): boolean {
     try { return localStorage.getItem(V2_STORAGE_KEY) !== null; } catch { return false; }
   }, []);
 
+  // Dev/QA only (stripped from production builds): localStorage 'osw_force_onboarding'='1' replays the
+  // v3 flow on a non-fresh install, since the gate is otherwise first-install-only. Lets us showcase
+  // + live-test the whole flow without a truly clean profile.
+  const forceShow = useMemo(() => {
+    if (process.env.NODE_ENV === 'production') return false;
+    try { return localStorage.getItem('osw_force_onboarding') === '1'; } catch { return false; }
+  }, []);
+
+  // Under the replay flag we open the flow exactly ONCE (a ref, not on every v3State change) so that
+  // finish() setting flowActive=false actually closes the curtain instead of the effect re-opening it.
+  const forcedOpenRef = useRef(false);
   useEffect(() => {
+    if (forceShow) {
+      if (!forcedOpenRef.current) { forcedOpenRef.current = true; dispatch(setFlowActive(true)); }
+      return;
+    }
     if (!settingsLoaded || v3State) return;
     if (hasV2History) {
       dispatch(updateSettingsPatch({ onboarding_v3: 'skipped' }));
       return;
     }
     dispatch(setFlowActive(true));
-  }, [settingsLoaded, v3State, hasV2History, dispatch]);
+  }, [settingsLoaded, v3State, hasV2History, dispatch, forceShow]);
 
-  // Backstop for a veteran who cleared localStorage: real sessions arriving mid-flow means this is not a fresh install.
+  // Backstop for a veteran who cleared localStorage: real sessions arriving mid-flow means this is not a fresh install. (Skipped under the dev replay flag, whose demo dashboard legitimately has sessions.)
   useEffect(() => {
-    if (!flowActive || sessionCount === 0) return;
+    if (forceShow || !flowActive || sessionCount === 0) return;
     dispatch(setFlowActive(false));
     dispatch(updateSettingsPatch({ onboarding_v3: 'skipped' }));
-  }, [flowActive, sessionCount, dispatch]);
+  }, [flowActive, sessionCount, dispatch, forceShow]);
 
-  return flowActive && settingsLoaded && !v3State;
+  // forceShow bypasses the v2/v3 ENTRY block but still respects flowActive, so finish() closes it.
+  return forceShow ? (flowActive && settingsLoaded) : (flowActive && settingsLoaded && !v3State);
 }
 
-// Full-bleed intro room: a soft accent blob drifts once behind giant type, one arrow, nothing else.
+// Full-bleed intro room, Arc's "A browser for you.": giant heavy white type centered on the grained
+// electric-blue gradient, one arrow, nothing else.
 const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext: () => void }> = ({ c, line, sub, onNext }) => (
-  <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: c.bg.inverse, overflow: 'hidden' }}>
-    <motion.div
-      initial={{ scale: 0.35, opacity: 0, x: 0, y: 0 }}
-      animate={{ scale: [0.35, 1, 1.06, 1], opacity: [0, 0.7, 0.62, 0.7], x: [0, 0, 22, 0], y: [0, 0, -14, 0] }}
-      transition={{ duration: 9, times: [0, 0.16, 0.6, 1], ease: 'easeInOut' }}
-      style={{
-        position: 'absolute', width: 620, height: 620, borderRadius: 999,
-        background: `radial-gradient(circle at 42% 38%, ${INTRO.core}, ${INTRO.mid} 46%, ${INTRO.edge} 70%, transparent 82%)`,
-        filter: 'blur(64px)', pointerEvents: 'none',
-      }}
-    />
-    <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.14, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
-    <motion.div
-      initial={{ opacity: 0, scale: 0.4, rotate: -80 }}
-      animate={{ opacity: 1, scale: 1, rotate: 0 }}
-      transition={{ type: 'spring', stiffness: 160, damping: 18, delay: 0.2 }}
-      style={{ position: 'relative', marginBottom: 22 }}
-    >
-      <Starburst size={44} from={INTRO.core} to={INTRO.edge} />
-    </motion.div>
+  <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: ARC_BLUE_BG, overflow: 'hidden', fontFamily: ONBOARDING_SANS }}>
+    <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.32, pointerEvents: 'none' }} />
     <motion.h1
       initial={{ opacity: 0, y: 16, filter: 'blur(8px)' }}
       animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
       transition={{ duration: 0.7, delay: 0.45, ease: [0.22, 1, 0.36, 1] }}
-      style={{ position: 'relative', margin: 0, fontSize: 'clamp(2.4rem, 5vw, 3.8rem)', fontWeight: 600, color: c.text.inverse, letterSpacing: '-0.01em', textAlign: 'center', padding: '0 24px' }}
+      style={{ position: 'relative', margin: 0, fontSize: 'clamp(2.8rem, 5.4vw, 4.4rem)', fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', textAlign: 'center', padding: '0 24px', fontFamily: 'inherit' }}
     >
       {line}
     </motion.h1>
@@ -88,7 +86,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.6, delay: 0.8 }}
-        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1.02rem', color: c.text.inverse + '99' }}
+        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1.02rem', color: 'rgba(255,255,255,0.75)' }}
       >
         {sub}
       </motion.p>
@@ -117,26 +115,37 @@ const OnboardingV3Root: React.FC = () => {
   const dispatch = useAppDispatch();
   const pipeline = useOnboardingV3Pipeline();
   const [beat, setBeat] = useState<Beat>('welcome');
-  const [scanConsent, setScanConsent] = useState(true);
-  const [usageConsent, setUsageConsent] = useState(true);
   const [picks, setPicks] = useState<string[]>([]);
   const connectedProvider = useAppSelector((s) => selectSubscriptionConnections(s).find((cx) => cx.isActive !== false)?.provider ?? null);
   const [finishing, setFinishing] = useState(false);
+  // The curtain wears whatever the user just picked (their gradient under a soft veil), Arc's post-theme rule.
+  const { accent, gradient } = useThemeAccent();
+  const finishStops = gradient ?? (accent ? [accent] : null);
+  const finishBackdrop = finishStops
+    ? `linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)), linear-gradient(160deg, ${finishStops.map((hex, i) => `${hex} ${finishStops.length > 1 ? (i / (finishStops.length - 1)) * 100 : 100}%`).join(', ')})`
+    : ARC_BLUE_BG;
 
   const { kickIdentity, kickScan, kickUsageRead, kickPrep, finish } = pipeline;
 
+  // Start ALL the background work the instant they connect: identity + scan + usage + prep + the
+  // audit/app jobs. They then run through the entire rest of the flow (connect -> apps -> theme ->
+  // card), so the reveal lands on work already well underway. Personalization is default-on (no
+  // opt-in checkbox), so scan + chat-read always fire here. kickPrep is idempotent and awaits the
+  // scan/usage promises just kicked here; picks aren't in yet and prep doesn't gate on them.
   const onConnected = useCallback(() => {
     kickIdentity();
-    kickScan(scanConsent);
-    if (connectedProvider) kickUsageRead(connectedProvider, usageConsent);
-  }, [kickIdentity, kickScan, kickUsageRead, scanConsent, usageConsent, connectedProvider]);
+    kickScan(true);
+    if (connectedProvider) kickUsageRead(connectedProvider, true);
+    kickPrep(picks);
+  }, [kickIdentity, kickScan, kickUsageRead, kickPrep, connectedProvider, picks]);
 
-  // Fire prep + the background jobs at connect-exit (scan/usage/identity are all ready by now), so they run through the apps + theme + card beats (~three beats of runway) and the reveal lands on work well underway, not just-started. kickPrep is idempotent; picks arrive a beat later and feed the reveal's connect suggestions, not the already-launched jobs.
+  // Backstop: onConnected fires prep for subscription/api-key connects; this covers any path where it
+  // didn't (e.g. free trial). Idempotent, so it's a no-op when prep already started at connect.
   const leaveConnect = useCallback(() => {
-    kickScan(scanConsent);
+    kickScan(true);
     kickPrep(picks);
     setBeat('apps');
-  }, [kickScan, kickPrep, scanConsent, picks]);
+  }, [kickScan, kickPrep, picks]);
 
   const leaveApps = useCallback(() => {
     kickPrep(picks);
@@ -149,7 +158,6 @@ const OnboardingV3Root: React.FC = () => {
     await finish('done');
   }, [dispatch, finish]);
 
-  const skipAll = useCallback(() => { void finish('skipped'); }, [finish]);
 
   const windowed = WINDOWED_BEATS.includes(beat);
   const vw = window.innerWidth;
@@ -197,10 +205,6 @@ const OnboardingV3Root: React.FC = () => {
                 <BeatConnect
                   c={c}
                   identity={pipeline.identity}
-                  scanConsent={scanConsent}
-                  setScanConsent={setScanConsent}
-                  usageConsent={usageConsent}
-                  setUsageConsent={setUsageConsent}
                   onConnected={onConnected}
                   onNext={leaveConnect}
                   onBack={() => setBeat('newos')}
@@ -211,41 +215,32 @@ const OnboardingV3Root: React.FC = () => {
               {beat === 'card' && <BeatCard c={c} identity={pipeline.identity} onFinish={(name) => { void leaveCard(name); }} onBack={() => setBeat('theme')} />}
             </motion.div>
           </AnimatePresence>
-          {/* Traffic lights sell the floating window during the intro; they fade as the window takes the screen. */}
+          {/* Traffic lights on every beat: Arc's onboarding is a real window and never hides them. */}
           <motion.div
-            animate={{ opacity: windowed ? 1 : 0 }}
+            animate={{ opacity: 1 }}
             transition={{ duration: 0.3 }}
-            style={{ position: 'absolute', top: 13, left: 14, display: 'flex', gap: 7, pointerEvents: 'none' }}
+            style={{ position: 'absolute', top: 13, left: 14, display: 'flex', gap: 7, pointerEvents: 'none', zIndex: 10 }}
           >
             {['#FF5F57', '#FEBC2E', '#28C840'].map((dot) => (
               <span key={dot} style={{ width: 11, height: 11, borderRadius: 999, background: dot, opacity: 0.9 }} />
             ))}
           </motion.div>
           {finishing && (
-            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center', justifyContent: 'center', background: c.bg.page }}>
+            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center', justifyContent: 'center', background: finishBackdrop, fontFamily: ONBOARDING_SANS }}>
+              <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.3, pointerEvents: 'none' }} />
               <motion.div
                 initial={{ opacity: 0, scale: 0.7 }}
-                animate={{ opacity: [0, 1, 0.55, 1], scale: [0.7, 1, 0.92, 1], rotate: [0, 0, 22, 45] }}
-                transition={{ duration: 4.5, times: [0, 0.2, 0.6, 1], repeat: 3 }}
+                animate={{ opacity: [0.55, 1, 0.55], scale: [0.9, 1.06, 0.9] }}
+                transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
+                style={{ position: 'relative' }}
               >
-                <Starburst size={40} from={c.accent.hover} to={c.accent.pressed} />
+                <OnboardingLogo size={54} />
               </motion.div>
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ fontSize: '1.02rem', color: c.text.tertiary }}>
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ position: 'relative', fontSize: '1.02rem', fontWeight: 600, color: '#fff', textShadow: '0 1px 8px rgba(0,0,0,0.25)' }}>
                 Setting up your canvas...
               </motion.div>
             </div>
           )}
-          {!finishing && (
-            <button
-              onClick={skipAll}
-              style={{
-                position: 'absolute', bottom: 18, left: 20, border: 'none', background: 'transparent',
-                color: c.text.tertiary, fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', padding: 4,
-              }}
-            >
-              Skip setup
-            </button>
-          )}
         </motion.div>
       </motion.div>
       )}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index 03259f5e..3e35db89 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -1,37 +1,31 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
-import { Check } from 'lucide-react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE } from '@/shared/config';
 import { fetchModels } from '@/shared/state/modelsSlice';
-import { fetchSubscriptionStatus, markSubscriptionConnected } from '@/shared/state/subscriptionsSlice';
-import { updateSettingsPatch } from '@/shared/state/settingsSlice';
+import { fetchSubscriptionStatus, markSubscriptionConnected, selectSubscriptionConnections } from '@/shared/state/subscriptionsSlice';
 import { hasFreeTrialActive, hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { SUBSCRIPTION_PROVIDERS } from '@/app/pages/Settings/sections/subscription/subscriptionProviders';
 import { runConnectFlow } from '@/app/pages/Settings/sections/subscription/subscriptionConnect';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import type { ProviderIdentity } from '../onboardingV3Api';
+import OnboardingLogo from '../OnboardingLogo';
+import { providerLogo } from '../providerLogos';
 import BeatShell from './BeatShell';
 
-// The single ask of the whole flow, staged as Arc's import list: radio rows, no filler copy. Reuses the proven Settings connect flow verbatim; the scan disclosure is one quiet line, and the scan runs during the OAuth wait.
+// The single ask of the whole flow, staged as Arc's import list: radio rows, no filler copy. Reuses the proven Settings connect flow verbatim. Personalization (local scan + one-time chat read) just happens the moment they connect; it's not an opt-in checkbox anymore.
 const BeatConnect: React.FC<{
   c: ClaudeTokens;
   identity: ProviderIdentity[];
-  scanConsent: boolean;
-  setScanConsent: (v: boolean) => void;
-  usageConsent: boolean;
-  setUsageConsent: (v: boolean) => void;
   onConnected: () => void;
   onNext: () => void;
   onBack: () => void;
-}> = ({ c, identity, scanConsent, setScanConsent, usageConsent, setUsageConsent, onConnected, onNext, onBack }) => {
+}> = ({ c, identity, onConnected, onNext, onBack }) => {
   const dispatch = useAppDispatch();
   const connected = useAppSelector((s) => hasModelConnected(s));
   const freeTrial = useAppSelector((s) => hasFreeTrialActive(s));
   const [connecting, setConnecting] = useState<string | null>(null);
   const [userCode, setUserCode] = useState('');
-  const [showKeys, setShowKeys] = useState(false);
-  const [keyDraft, setKeyDraft] = useState('');
   const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const connectedOnce = useRef(false);
 
@@ -70,15 +64,14 @@ const BeatConnect: React.FC<{
     }
   }, [dispatch]);
 
-  const saveKey = useCallback(() => {
-    const v = keyDraft.trim();
-    if (!v) return;
-    const field = v.startsWith('sk-ant-') ? 'anthropic_api_key' : v.startsWith('sk-or-') ? 'openrouter_api_key' : v.startsWith('AIza') ? 'google_api_key' : 'openai_api_key';
-    dispatch(updateSettingsPatch({ [field]: v }));
-    setKeyDraft('');
-  }, [keyDraft, dispatch]);
-
-  const connectedIdentity = identity.length > 0 ? identity[0] : null;
+  // Which provider rows are live, so the tab itself shows "Connected", not a floating label below.
+  const connections = useAppSelector(selectSubscriptionConnections);
+  const connectedIds = new Set(connections.filter((cx) => cx.isActive !== false).map((cx) => cx.provider));
+  const identityFor = (pid: string): ProviderIdentity | undefined =>
+    identity.find((id) => id.provider === pid) ?? (pid === 'antigravity' ? identity.find((id) => id.provider === 'gemini') : undefined);
+  // The whole flow leans on a real connection (identity, chat-history read, personalized reveal), so
+  // there is no skip: Continue stays locked until a provider is connected or the free trial is armed.
+  const canContinue = connected || freeTrial;
 
   return (
     <BeatShell
@@ -87,12 +80,16 @@ const BeatConnect: React.FC<{
       body="Use the subscription you already pay for."
       nextLabel="Continue"
       onNext={onNext}
+      nextDisabled={!canContinue}
       onBack={onBack}
+      wide
+      logo={<OnboardingLogo size={52} />}
     >
       <div style={{ width: 'min(440px, 100%)', display: 'flex', flexDirection: 'column', gap: 10 }}>
         {SUBSCRIPTION_PROVIDERS.map((p, i) => {
           const isThis = connecting === p.id;
-          const filled = connected && isThis;
+          const isConnected = connectedIds.has(p.id);
+          const ident = isConnected ? identityFor(p.id) : undefined;
           return (
             <motion.button
               key={p.id}
@@ -101,95 +98,43 @@ const BeatConnect: React.FC<{
               animate={{ opacity: 1, y: 0 }}
               transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }}
               style={{
-                display: 'flex', alignItems: 'center', gap: 14, padding: '13px 14px 13px 16px', textAlign: 'left',
-                borderRadius: c.radius.md, border: `1px solid ${filled ? c.accent.primary : c.border.medium}`,
-                background: c.bg.surface, cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit',
+                display: 'flex', alignItems: 'center', gap: 14, padding: '0 0 0 18px', textAlign: 'left', overflow: 'hidden',
+                borderRadius: 14, border: 'none', boxShadow: isConnected ? '0 0 0 2px #1a9e6a, 0 10px 26px rgba(20,16,80,0.22)' : '0 10px 26px rgba(20,16,80,0.22)',
+                background: '#ffffff', cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit', minHeight: 64,
               }}
             >
               <span style={{
-                width: 18, height: 18, borderRadius: 999, flexShrink: 0, boxSizing: 'border-box',
-                border: `2px solid ${filled ? c.accent.primary : c.border.strong}`,
-                background: filled ? c.accent.primary : 'transparent',
-                boxShadow: filled ? `inset 0 0 0 3px ${c.bg.surface}` : 'none',
+                width: 19, height: 19, borderRadius: 999, flexShrink: 0, boxSizing: 'border-box',
+                border: `1.5px solid ${isConnected ? '#1a9e6a' : '#c9c7c2'}`,
+                background: isConnected ? '#1a9e6a' : 'transparent',
+                boxShadow: isConnected ? 'inset 0 0 0 3px #ffffff' : 'none',
               }} />
-              <span style={{ flex: 1, fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>
-                {p.name}
-                {isThis && !connected && <span style={{ marginLeft: 10, fontSize: '0.8rem', fontWeight: 400, color: c.text.tertiary }}>waiting for sign-in...</span>}
+              <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
+                <span style={{ fontSize: '0.98rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
+                {isConnected
+                  ? <span style={{ fontSize: '0.78rem', fontWeight: 600, color: '#1a9e6a' }}>Connected{ident?.email ? ` as ${ident.email}` : ''}</span>
+                  : isThis && !connected
+                    ? <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
+                    : null}
               </span>
+              {/* Arc's icon tile: a full-height soft-tinted zone on the row's right edge, real brand mark inside. */}
               <span style={{
-                width: 36, height: 36, borderRadius: 9, flexShrink: 0, background: `${p.color}26`,
+                alignSelf: 'stretch', width: 78, flexShrink: 0, background: `linear-gradient(135deg, ${p.color}30, ${p.color}14)`,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}>
-                <span style={{ width: 13, height: 13, borderRadius: 999, background: p.color }} />
+                {providerLogo(p.id, 28)}
               </span>
             </motion.button>
           );
         })}
         {userCode && !connected && (
-          <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.9rem', color: c.text.secondary }}>
+          <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.9rem', color: 'rgba(255,255,255,0.92)' }}>
             Your code: <strong style={{ fontFamily: c.font.mono, letterSpacing: '0.08em' }}>{userCode}</strong>
           </div>
         )}
-        {connected && (
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ padding: '4px 2px', fontSize: '0.9rem', fontWeight: 500, color: c.status.success }}>
-            Connected{connectedIdentity?.email ? ` as ${connectedIdentity.email}` : ''}
-            {connectedIdentity?.plan ? ` · ${connectedIdentity.label} ${connectedIdentity.plan}` : ''}
-          </motion.div>
-        )}
-        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 8, cursor: 'pointer', fontSize: '0.82rem', color: c.text.tertiary, lineHeight: 1.5 }}>
-          <button
-            onClick={(e) => { e.preventDefault(); setScanConsent(!scanConsent); }}
-            style={{
-              width: 16, height: 16, marginTop: 2, borderRadius: 5, padding: 0, cursor: 'pointer', flexShrink: 0,
-              border: `1.5px solid ${scanConsent ? c.accent.primary : c.border.strong}`,
-              background: scanConsent ? c.accent.primary : 'transparent',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              transition: 'background 120ms ease, border-color 120ms ease',
-            }}
-          >
-            {scanConsent && <Check size={11} color="#fff" strokeWidth={3.2} />}
-          </button>
-          <span>Take a quick local look around to personalize my setup. Nothing leaves this Mac.</span>
-        </label>
-        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 9, cursor: 'pointer', fontSize: '0.82rem', color: c.text.tertiary, lineHeight: 1.5 }}>
-          <button
-            onClick={(e) => { e.preventDefault(); setUsageConsent(!usageConsent); }}
-            style={{
-              width: 16, height: 16, marginTop: 2, borderRadius: 5, padding: 0, cursor: 'pointer', flexShrink: 0,
-              border: `1.5px solid ${usageConsent ? c.accent.primary : c.border.strong}`,
-              background: usageConsent ? c.accent.primary : 'transparent',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              transition: 'background 120ms ease, border-color 120ms ease',
-            }}
-          >
-            {usageConsent && <Check size={11} color="#fff" strokeWidth={3.2} />}
-          </button>
-          <span>Learn what I work on from my chats (read once, never stored).</span>
-        </label>
-        <div style={{ display: 'flex', gap: 18, marginTop: 2 }}>
-          <button onClick={() => setShowKeys(!showKeys)} style={{ border: 'none', background: 'transparent', padding: 0, color: c.text.ghost, fontSize: '0.82rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline' }}>
-            Use an API key instead
-          </button>
-          {freeTrial && !connected && (
-            <button onClick={onNext} style={{ border: 'none', background: 'transparent', padding: 0, color: c.text.ghost, fontSize: '0.82rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline' }}>
-              Start free, connect later
-            </button>
-          )}
-        </div>
-        {showKeys && (
-          <div style={{ display: 'flex', gap: 8 }}>
-            <input
-              value={keyDraft}
-              onChange={(e) => setKeyDraft(e.target.value)}
-              placeholder="Paste an Anthropic, OpenAI, Google, or OpenRouter key"
-              style={{
-                flex: 1, padding: '10px 12px', borderRadius: c.radius.sm, border: `1px solid ${c.border.medium}`,
-                background: c.bg.surface, color: c.text.primary, fontSize: '0.85rem', fontFamily: c.font.mono,
-              }}
-            />
-            <button onClick={saveKey} style={{ padding: '10px 16px', borderRadius: c.radius.sm, border: 'none', background: c.accent.primary, color: '#fff', fontSize: '0.85rem', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
-              Save
-            </button>
+        {!canContinue && (
+          <div style={{ fontSize: '0.82rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
+            Pick a subscription above to continue.
           </div>
         )}
       </div>

From ef2bb4edce48060fc537a1b84b42227093d5e7fa Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:33 -0700
Subject: [PATCH 057/248] [eric] onboarding: arc visuals (swarm card leaf +
 tinted logo, brand-lit app tiles, theme device, grain)

---
 frontend/public/grain-texture.png             | Bin 0 -> 32478 bytes
 .../OnboardingV3/OnboardingLogo.tsx           |  16 +
 .../app/components/OnboardingV3/Starburst.tsx |  21 --
 .../OnboardingV3/beats/BeatApps.tsx           |  30 +-
 .../OnboardingV3/beats/BeatCard.tsx           | 281 ++++++++++++++----
 .../OnboardingV3/beats/BeatShell.tsx          | 214 +++++++++----
 .../OnboardingV3/beats/BeatTheme.tsx          |   6 +-
 .../components/OnboardingV3/providerLogos.tsx |  36 +++
 .../app/components/theme/AccentColorPad.tsx   |  54 +++-
 .../src/app/components/theme/WashDials.tsx    |  62 ++++
 frontend/src/shared/styles/grainTexture.ts    |   4 +
 11 files changed, 558 insertions(+), 166 deletions(-)
 create mode 100644 frontend/public/grain-texture.png
 create mode 100644 frontend/src/app/components/OnboardingV3/OnboardingLogo.tsx
 delete mode 100644 frontend/src/app/components/OnboardingV3/Starburst.tsx
 create mode 100644 frontend/src/app/components/OnboardingV3/providerLogos.tsx
 create mode 100644 frontend/src/app/components/theme/WashDials.tsx
 create mode 100644 frontend/src/shared/styles/grainTexture.ts

diff --git a/frontend/public/grain-texture.png b/frontend/public/grain-texture.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4777a5ad6c6d4fc7241aa7766e8b937eec0c9bf
GIT binary patch
literal 32478
zcmV)UK(N1wP)<h;3K|Lk000e1NJLTq007(o007(w0{{R3EQCL^0001BP)t-sV`F2K
zl$366ZVL+w_V)Gy0s{8-_Uh{D>gwtj7Z)cdCpR}YH#avI7Z)cdCwF&umzS4^hlh7}
zcZY|E3kwUEmzSlbr9whN_V)HeLqnvbr0VMGH#avYCnpyd7nhfpypPN80000WbW%=J
zLP8-zF9Z@V5-%?=5)u+GFE0`jFA^^=LK6}~LPA19<+?jw004dsNkl<Zc-k%92bLp8
zk_6BMDz(-E^8UBvcQohijv!gpKxTvsb2Ia#Xp6osi(>5SX5H&1OUEruleA9CrM_4F
zoOby-J+gk<nl;V$^X#j+&C4wts$#m8=Ui5Eoi>jwtEO?g$|5c2vfsA6Y>r2|4|7!)
zM>(f`mabLR=ILikhqB%3>&%vVysERv^R#;0vc1Wh$FZ(yQ|4{C=36<gk9E!J?f8yG
z+Eqta*F{=a-BwNcn7@lQ-_xP#i}IB=TRW#!ot9mi{^jQ*@B3FW+{WVZOzSdj&-ymz
zN1HBfH|<F==U0~Y>8I_+&sn8yllnwO@tB^)k~e$t%y0Q|jDF)Y&-S4l$}G<t59aSG
znorwI9$VgZ`%$;+qsjK-s*7x{^V5?|n|;W}I&X%$%sr{wR8?#G=(ldqvt?S-wrbXH
z>x!=2%CyOE(<9A?Jgui}e4gc4X3N&5`PCG8mnGd&p2I#(b(<GyKR&uNoBFBllI%+J
zWv#a??~8hV=Xp1Db?!TkOEs2Nx~ysHubg@I^@C}ic3E~C(sz-zX_fV7_Ijp8Q6F`e
ze}>wV8*Wo^mHnQd=h9~RzCMeode+CYuKO-e&$jQz{F#ludp9Lzo44sU>|@@K=_?<r
ze9rv6a<6aIUr}aFk$$^wZl13+EBm6U()nFB^LO;W>VD0pw5pn-DLk}28}qy_{6lS<
z)@h%V$*mmfC9U(UZj1Su=2=nY{Z!4>SyxS4rv25eRqfAs6~67Xr2Srd9COpBSJNl$
zQN6e9?il4+Q>N=uc8@GgOUI|Fp7}Js?%7_qX}TSG*G^@c{}o%-52;hVR(*4C(={(W
z=-$yRyWWAFmv}R?KRb7l%dT1a`F5mPI_Kk~N&BhD+dSKbz8J@<+cyt<a7*GtW_fvQ
zv#IPeuVOuts;~02zm@YmFHKutb-wQJ%wyWK=P|YCqj=0mT6~HwZL;#Hrqr_<y0IPl
zSN&+NttiT(J?E-;4vEj5IXZRK?%C`MXKUW{KJl|II~T7ht2(dixoo=4r)|2r%ib=H
z|H#MJdiHDMFZTK7K$pi6Zzb>Q(QPh@yspx*+{b?E3a7j2%Au;hTj2x6fmn|%D~mes
z+sgU!eW$4}lm45Z%~hxK*f<jN*1XeZEz7oB3$GyW5BIfeJO3*B=FEpAO+VK)uKS~O
zuqt0=sg|be?zN-*O{Z$8+h$%p*6;U`rfWLQS5Z8-&$!Q5d#360+4N&G_eZ|A>5y&x
zxn4(~)=fQlG+F8_-uAqyiYgmk{*kn3nz^pBtnlBLK?s@Gs;%a%&a(b_wE|7ur)|-U
z{sCXG$<{|TG`a7Yyt29;o!Y}syCHoyq(z>lSH9-mB8)xT$tM)~+WdZIRksvbx@6Un
zZBAc$-1EZ?&9|zZr>4y6B5^p1>b8&m*!=J+ukzuVZ>>04W@lQjY33#gYLB$akKvu(
zvm*7$^K%nj)1_$p@!1rQe00+LA*+Pzs`5j5Q!d|gXl_}bw@sahGp{bMv)?<dhkMb~
zg1e_9Pz_zv9(mH%TfL`$&8MldyehqpZvKq*y~z%zuWB<NX>9xIo6d#%eh6;ecH7RX
zU6y=Z(sa-J_g4OO*~2s0=AyYqcjcR2&!QWrDm(p;%yT}<>del5SY3&(nX7BbhBoiY
z^Dq61Ci&9mLps%2-?Vf2jH8*>M>=<<5I5#?UAnZB>)F<;XfZm~<I&!-TXt4sb_p(L
z=>?U0*SUg`f0`n3)#g&3%a8l5uZyR2*GLBKTzu>O`1oqo^YjMOynQc+@8&`a2X$Y2
z^^Yp+YJu~8eZGySKcp_Sv^7nOaG4&3U@Z&y>-Dir>2gjFA$abjfU4TFtjpv7Zq+X0
z6}P79WWytOfuCbhU1Rp_hxfw`6&CCL+yv;N81h=W>(;hS#%`%wvA|u+&hI#uTizx`
z<1HU`_A07Gnrgo3_;{Z6+DXXc<2IN3nHKj>+}+#EyBi(5eQte@DjyzyY2G!d)cEfD
zKD*X(8nSs!_g=8*$4yXw<;7TCMOk)bQI1PInAQ0ipYB*!q@ysJzuUd(s%-QM>TK=X
zvO4a=+!gslRCMBZF?}9{$o^3ZQe`bFw&f{TjMd)zr@f^vyAR@&1YUG<Zk4oCE}FzW
znG1I|*|+xjZqvRJy0a-S4i9tstGaeRyDm#_tq?KJbN3n2{A|m2^(gzX>$fr!v_wO%
zDecyEc?kBN@9O3jX)#IEl_Fqn1g^ZVZ`oK#$XPwQf4B9MwVyIOuDocQ;+fUmXNvIj
zyl?ARRb!gYVo8>^w@3N7{W(0t_H8zWL)>lwRC39`#W3IUYOLb-m-CjV<5_K^1m30j
z_TKVtP8^c^^sd%yRvo#+5plY*T+(42sxr-#WyfB+1nuQERekCx9?Q))z3%CiD$nM*
z-S<b~nwNV%Z^criYf*dLg-9S*J+e>P?23nMljuB);wZ{vuZ!V2YQ;+L1?A6qD^+#1
zf+NebJiX@PQ8_x>{E{@s{k_!1Ic%xRl=WFub9tHU)wOPwL$)sKHs6;nzYkfN7Q^P%
zrs<eG-Oze#I$yTPr%%?Tds)fAY0)27zh{#-EjO;E{M0v>Q_>FEZHx$4DtN}L=yn%V
zF;$ITce$^gNqZ_Fjx4`El6fkR$&PDNRP`^_71`f16zTFF<mq{6o(i0<7*!X!vzTwr
zZdzw)_b$qO^oU+#=L~FRRZfaGm#o?c*)d&8@wCkz-IS$6l@~?7RQ0_OKX2u8es53Z
zu`?u(<;|ZOwf`s<(&3ntIfCanMt0enK7aH{`e?l1qG(h|r7Te?zaHNHUO1{nRw>8Q
zVtp6uphh0nV$JqFeH>G*-mF_c>d;<AuAHkfsekOU<0$TvAeq;``?S_WKlSbXlx*re
zZ92bD+$iee+PY2ZDVk--*6!mk3F*%w>#`<p?p}4Dv4|Ab4_CT*l3u?coh4J(WZqD9
zR>!!lilCRAA=&n;D|4z-J7=R8F8iaH_O7VLcQG$%*EIV+ZhpPDx(n{NUJ7=`%OjnX
z8SR?P*RWq*DWuD@Qgm5edH1<BYBaTaH}7%yMXR>hKlft&2t=8BKsYX^CSF*!x)!}3
z{$%;!ePrV~D`A`TRaHq}c9SpQX8ZkX)l8XSnqTMr(N&(pL+R5dgGyh)??<X3bAYNS
z=H$MtD6c)@#L$&jc?tk&+rH9s5&-&fDbBQfoEj15$0w}v`n-}c?FK1v+nck>-a=j7
zZ^@>`8Pz*gUtVgJe5rf+ytp}05BD!C^SzoMDy&Q$E*!Q;*D8H<FV}XTl{CfhuG(js
zK9;su`6$}UrvL1^gsaG&dY0il%X(^#^jUiwTT!plrsq+prnbp#n7VQlMTbchI^X(n
z+K+4eOPjwwRaLx(`e=qZs*GNlxt5Y?n&jiQJS4tbz2?tNv~{A#KCWoL?$0bQ_BpM`
z^ybSyt462gpH%_oWfk>%nz;p%d;OV;<+-QFkyb~O*L##dRoj;Sre^aj<F=Q5Q|%Ef
zm#UOyT?(hW8}2gnCl_Aor+!NiNTZG&v-GNNeL5wJLc<+OUx{B*x*T)0Pu<=Kc$NBf
zY87&2_EB3ol3I)28<ax*CTFI}S0(4LsCN!^fxmNzm~QZMzvj9x(km*&p{ZU+^+^u>
zU3)Z}EIF+0GAh^db*;83o%AmGC)=}C4KB5wZSiVz+21$F>r3z&iU|LC>L5?sG!*?-
zS5n_9nANR*wc6{CrspP0MP^R7DBF@uKrTA9N^_U@1>YpPxnkKgFA6@-uaw)DRu8?7
zi3_g@j(Wd7R!6p9^h%8;V`<Z7E~6VS^Q5^sOO;k!=W`A3yjGK!o~vHv)<5%7Yge?{
z?EHxQ%ds?Dw#?@?PT7)f4_E$H`7WNn$5*%0nq*yHh>d^sI&S%AX_|BWRyyQ%?&Un~
z&#Ero<k!uwEL}8NNjZ}=b$JRpxpMkmMx(!U-y%<Xg;1w)EAOeqF;+LvCzpu*uS{3r
z$*ek;VwAq-vQ|NyS{&u2MD4K_<tEH^{WO*Jywq`AiZ%VqUiUKJu0xFZ{idoLySp~A
zT1w4*De;!&rqJ|zmUsRL^h1kR6<4Ew@gU1#Ij>#r*d(g0RE52&y4&Vq8qQk%u?SVI
zO6JTb=dUahh{0VBkWkXH>i+b8&wc32ys6dVI*9h_%PoD?!w|?yEA=!o%bX7NV;>cd
z=OFTz@BSUJVr+ahCA?JrRdoqm>y$sl9;x#jx@?~F{+p%ysNvnyDWBYj;W5ZB(`(%G
z+!F`bd|t0JZQq?z^IGHwh3)X31k$W~D^qf3wg$R5ZCBPjmxqsg&Y%QErA+FDWJe@<
z(GnW*%-7l>OzWkohH}y7x7k?sIRGenPt~3XrvMq&tQ7gr_owNyr!rLk+qNoWE!<vA
z9<*|-?!Qon^l#MRD#Zl0Y-|+Ng`#t)bqqS8a_fuz7@MY^9&P<7(p<aN&OjAWT*;yv
z5`KzrAR^h{t(<mmPO_}Zsu64E^reVQZwk9Wsj>%TXBg`F_*DJ2Naj*K^rtI@5ml^H
zuChtGy&tC3aXqx>b?ak(j;#Fj<#@Y*5OufgS2JWwnJ)P_Yc-GTaXq?K)2`$3BUPOE
zsCtjcU@EM!fSi;OeR_3MQEiX-%FU8Tz|YeAx;L#>H#^(wy*p7Fe~=Fp;Sn&_GztQ9
zdMc~BcG>!>N%Xl8HW5&bFE_x>bd2IgspL|%baSyUfGA(>vkXao$m?6(9D^6#f0{}A
z;clrh(m8FFP>#=>{Rtk&`OP|4U|k==t}ojO>U~}xV;qm-QpjoP`f03+xh-1Z@VMn?
zqFl&}$=~cm#HxK{+fo(p_qny|1_`22Lf7wF0Lq>^(CRG-%AZpqHK<eS;;(9YwR1Wo
z)eE8{tqxt<MjYG6?4>Rl(=BTFqCcG;NBogVsN;FlC8SB&Ofqc#d)E0AUeUB!aqG%@
z>ADK+)vr>^4~Frj=I#;qG2hl3oKg!R4EEZpxIaLqtkB>#b$Se-qZt|%U4vG0tIsx0
zoM&1s?<{*ktDGWWKsj7laTmjzD5vVQ9R-$1TDR2I&S%Fluz@x!&qTHyoYWQu(JZG-
z*#~;KYENaXSLK*M|2nwAt=8AJi71c{Q=xC#^g?;tcIBLC%Gas50Tt_AVL#`)$XN7%
zv^@Jfujeqj7Jj`?IQw<ap$C1q;O7hw&HMeS*vYfC%2aMq<ty`h{nMgC@euQKZJs^`
zB<N_Mz*+m8mCNd4z<_t4l!E>wZx|pHK!}08t%Ldv`smkAlUC8wm7u+BvHY(Z5B0qW
z3aw2+#A3ee=AJduyz8fvnMxg3)D1awO=ub&iVYa|eD<$G+3)am`64&~hl)jfEw`n3
z$oqqYGp6NPtO|(c-Dk`9^IVosHz{l&#jo~&@B(}5cbU)N<Y&a*e4DdtE{nTf05IAO
zW!=0y#xXK?3RwXe?75D&QCMpR;Th@n3^ZqMlv<@cSf-t*;Www*O*`J#=>lqUk=!bP
z1@x;~q%CJ!s*d(cCzJc#DxwLVJEc*L>i`BI7euwlpN_bee|+THLr7d!)Xh1c?F5%j
zN3~DA<y+tDg{H2SR5!t|Y~KN#tXbkUX)r3KsrspW`i?~+(p}xS1(2UX;r3053M;s@
zWc$*5-&zCpZFa_YbKKl(x&E;L?_^70cN-l_kv@;*n;(DyAr#!TX7@Ci!3o;>sem&t
zUo~90YCyB?Jo0uZ-UH}0$|7NYa1Yw_)%fK})g80n*mjk>rU`J6+9@D}>I0SQ&l(m4
z{g&SIeX6wd%GhUrs$sLT%HPY!w@f={%C*j`J*~gv+E-Zv7Q3cWE0DkX^XLl=Q@70O
z{`BU}ibUUX0dMLzGnf8W)X&@19R0mqo|4}%!kXt)sU>nP-JbNba(-2*+&pkWqx;H3
zjZ>tdZ+uE`@=!0pAiAf+*Gp+&-maLEE}cOGW09OnvJK>2T!6W*xcVu*ACGw+J-@t2
zAlT`#HBjC~lUWR(;cRj({aFss)N)llIeQL{f;&69xRlZX1Su7@zY0^cgJJ2Wacp2g
zok7f`D+fHPFwzICzT7HZOiVSj^g~&Qpb`qiT7^<n!&3wT#BL|pM>!eeoU2Oi&)S=J
zry`PPyTdz`e_A$|N2XAa^ty(;9P=wqv#NFg>)cymq)4^a{j}VR=<2u8mrNi2w5_~f
z@RChupxm!CW)j-D)$JlpGzK@_yB9&yPw|`qc%Nh5hP0iM8Z>z?rUw+IepDA^(Iss2
z@x8XY{v?fPz6#ym@nedPA@Hay%H*rjzPC^KcrQDBUFZ8#?2(|M(YLu$5O?+MeY|Ur
zL}lC+e_AgEg@#S9z4eD@*9EpB5vZRujcz-<bt{|nu4vom!_!Kep>2Watqa*GPb;IS
z{fO%=bi7uzb4*6o7*+sL$K)N5?Ks}{C(vm0CAxrLm!XSMPNRUHfW~mG$8&lu;Bk+v
zoUSygHC1D(j_DIHoy!g=p69yQ--SM>Y&_^lW_=c=Y@|}SjNko$BjnH|7~YU}{cYAV
zt*K5>pa4%sIuN5Z6;o3wg{1>uVVURWvJUe!B+Yb)7W44XN)&+L<}BOCTEU|<b8f?a
z_x2}frIRcY`U*aXIZ&ET>MetV@iu^FWdm`m{<{~2)~s(fDCMFl)O%ISGAxnhyZZae
z5{F}In^tE$0jS67F~!3iTeaO@MJZAQ)SP;lc?1SPyP`kwcc4JStpH`NDy&xY1f6T?
zJcG$ikdYeCv3!8fGXFDGV*=m4+4EHHJv`j`Gi8OBe@+L){h6DTv|A3BP-}anexNG4
zzw|tsOI(USS2!;Q4Y~ot4q(&3K-8z!(9%Ezww(mzT|4Ve)|ofSkZ7aE{PihMHMmgd
zx(J$MDhJ5D>)h+&I(W5K3F5KKIfiFWm{M}y1VZSa4pc!B!yXs2tzR8X0QzBY_;`so
zIS{ufK!}yXy%@KxON!;CDbR%1&60sf<(A@M2=v@P<y5^L44}tRPo^GlTD8^D?9sId
z@<)EGP$9?unKk?NUK~7kA@E{TjkYf8>yt{=E0Fq~xbkV#oa6P9{OZ%#=sl%vbPR>0
zqCov5<rD{UOorB>$pzVF6(O}$pIl?(D`l_WvsOXnPpITmU$VAimAD+M4rMebYCwc#
zeyN4l>?nq#7RQU?en5U+dmsc=A-s6?&-E8eOS6Og>K_3Y?`o5@coeNuFh6ub<-?pJ
z&2}@^tL}W&Vw~<esJR&cR7%lXc9f3-iljqUuUt!&{FzVd&gZG9J0Ppkim~jH8*QoQ
zjUe))>?gIfrdCw#q>Fb<n5tS!1})pJEK5uiP8DSfpel;Z7{c$F%C$8%S26m1-Y=-Z
zWI8VCJIntZNMWK&s>9v!Or2%u!Eu>KL=3L4T*oN-^{?&l2b)m|M>4KPX)v7bqgjvA
zv8akc<{kV&TH*Q1(<Fcqpr&GLo}2bk_Ajc%M-L*N6};|GIT$%+kKK6zJ+>#f3c@O{
z>@np%GDqvFLj^5Pnf^9Q-py2Nzl(hs<22n|w<$_f$G6cFR!WD|c;C$WYpOea%^!8l
zuW{MEvGy5rt0Vtv6!WjpU(GRHDBD+COt3KZLgigVsgpy6Z=k!%+i|Hi4u5sNodXog
z0qLhEQAC^kRr)zNtw-+5fKH?^-`2P>P_cP~oG8y5KPGW&D$?vchpKsI+o(Zr+Ov7)
zf#7^zE}w&w_JZ+ID)XhD3u>SXcDTm$US39LQ(*Q=sPPP(qy~pXD6Eq<yIk+x80uwc
zG%fjG{RhCCn_F`lt_UXp@&3MO0lh7Ci@9_6mcs{!zDc`N%??g>pP!n=LA3O`ioaf;
z**Fx&3ZKKwbxZ5p8TBhPGm7CdsVBD#0@M~uZRRnq=1!0OUQS1$wGtl{Ey~3@Ui>J@
zXkb$4@o}|Le!dC?ifW)V0~U3iU?{el`yApT83aF?ZO!CjT|ER%m+wg5mbiJ<vZso!
zN^02`O=cgh!knK^;Ga?h=(WI(Hc)o`ZvKkZY|Ry{(GcE=NiBBBU;dG=gth%6d1cq*
zF}Uuv^dyHLAk8CpeEr3@$?euW{xl*mf3?guM?NgpdT;uri;;JFOpi}?j(gy|yRywA
zN^1G(2`y56HhXpRX`{M?ufiSW<6Z?-!Q9&7%HxQw=9Bvk7@s9;>$e^=JW4qSqcWm=
zZOtMy3VB&`LeH^08pGC`mLvHK?5X!~fDcKv3H#G+a@{*^^Vsk3AQXuS9%;<yljYya
zi>=HLvUYb?+MtK5&<?;#Q4dMXUd8@4&f2?!`l)H_af#0M?4oP-rwvi=!P|G=q?Kj0
z8)Ig2qO$;tj9KT_6~nhl|J?qquV4OJ6A%!X+hj1!?`8Mx`zwv%?c*b~<?o~NY*hIh
z^xL6L@(l(j7{9OpX3gZ}k=`3c*{hrphkotEG>EEgsnZwOOsF$J<7E8Q^a_V^7S~0+
z`1S|~MpjZo;X%%2ySA_CbaD^PNdv0LtF5_=p>i{jEm~|Lq<Ua@_-eqv6BvBJ<s;Te
z{e69j&_l1^{Q-ZNBj5actIzUnB9tH#!H_$()QLG0iK(BTYoK$w$o%c^Kht-<DkA;X
zV*Y!Ifn(w<KAQl!##Vxv_MnrP9P4D(<|7$M*B_0V-Z)D?S(W6?h`?}E)zzA)RZ}zT
z0nEI`qv9zDL5b_>l$+~pnq?qZiC~%zH}4lqWvHhZ7kH1RWaThUO^ib80M6m6NKeT(
z8KMnUQM;^wzo_Ci5aIbqT^;8boU2s+TgBv0<GO?6<XkO%<*dQ{Q+?#EdtB*(<aJ%`
zQeQ_`_0Bi8fE%lu%%7vYJeCP)M2&>#Av$gOQuF{uVD_!_Afc3F8P)Efo;QqAzg=xT
zcsP1I<F8ZF(xs|Sv%@)qMk>7X>WDZs6#zU{^YW@X=!!R;C5_?R?2NW~^~QH<vw%xf
z@iDRM+n@kwy*(wMao%((j4i(xpLftWL|bXG5SBF1)p(V_So86<Ek&N;R&MWir%LcA
zDu)b~3Nwd6xNdhJ1F^_ysJ>8_=dV4Nt`)7Ff+A*sQI$!bnyG4Z1eepl^+Cr{!8}Sy
z&qH6Jh=AHnIFE`rg>37E-o;~0^wrgT$%pS(Rk|QpFKcIXs81+msA?MGN3eSYpc|w)
zz1qZ_vesfQ+98a*Rl6>RH2Zr@)$WR+bV~r8fw2akBaK2%pIT~Vn<;Xaj-ZTVb3D{a
zO;C)y)d^ZunXzLxd8gNS4Aa|;`>_sr^^NhU-f8@n*8y`>VjAv<N($+|dMJ^y;FA@l
z0&$KvlEtXl^>!qx6Hcg=P0M3}Ms7`Ga*-;)27Oa7=c;?uCoymv4QH>yY3~N@z-Kq9
zZr7r_jA#ppv<9+U72rwSl6Cip;NX#ol)`8WPvC@#ICH8m<UFUxdox(yw4)8`oe%bM
zCYxak{Ly`r_vY!bm56wa0z{?Z_^9R5v${>k9^;&L8;0pqzM3q#Vp3J88~Wl}iq{N4
zz(HweM3Vy0Vi41)n)9)(6JNntVfReBV}C633awsRxcyvZ<^gac=x%ijSg8<b3-r5N
zHcUr7XMF;k#Fl!T%Vipls<oM2VqDZ^2^Z9LogI44v8UCUPM01wuK(-hHuwU-<(Iy%
z(h_+n0|ch;E*W=F_Q2ZE7+oiP1DMnKkOV)YapxFAn_N3Pb=q8MbTAJw>@K$xp(|?+
z<9&BvEX@*pKjXyi86+$;#&`Z~6P07U>@O_fn)9Yj{tQbWpgtvk`mV<1CHj4kq&%kd
z0mgn}z~CmWipVbiO}8@WK};5Oa2aBSq6G6K(It-}yolo3{d+S5y2F^8zd-26>}J5S
zrI9KE>>pFuqPEi@+LYi`wXZQKjn1g2;qQLHpsvrnEiIHVdzZh#5<Vs1Xg3xdS~Q3$
zh86pf{%xg6k<o?;ga$+=gJa#NK@lxJP3hnH?f}1wA?rQ`jqvJ{dP6;tTY<Ks&w%s_
z-x2q*?y4=v)H0P_n*Hk!?2sE~r?xy0jQ+~OaWrr_J#Oz8O#2x>{W|Bvvqg}tzMs*Y
zcId#sIs$VXSR1gn9(y-OkyK)gp7#ziI=S@KB8G!44yb#&za=C!+1vNXiuVK<b5|;8
zn~A-~&pb1S0b(K)%DE;#>({w13slh<_B}}+P1C<~slbVP=~wp;is5KFkp8W&=XT%}
zoMuy#sYh0B4+t!fEp?8%!h7z=&-c(7X>uO>V$Ly?P|mXMjLj8@2)?3!%zvfWLODF?
z4GtrNe)<%{z4@_XS~c+x#>~%e8(?Ing@7TJzQ&PH4enjrKBACC2NTTA=l7dit=rIb
zD-8v(JUf6vZM;u_p=brQP*}Nzs{oULauvGcq{mh42eTj(6_zc@w%38e;A0x;xFU6Z
z8qbt#{naNfFMKkS8ys7iNQmrY8I412aNHxIjT&L3i93SVZt|-q#!?t?!bXwfe%zAQ
z)hW@X-q)>J1ULn*LK~VLV-&ShV{BZm@oS_6q}W^D?m*6^Lr5OXcORMw@bxo#xo@5b
z4j3!h!|=!zQQI{xUY2}>n?qK6J`@yCh$TO}x2EY&cjg1@T2(1}Vl8|wI>(=;OYG$&
zU_CCTk{V4JC9Z=#Ob^JYdniT&ZBwYnYl=7@*fd(}kS`+hfrm8a`ktno4};F7FZ*)J
zK1GyWPQDA7lwZZ>h)4p-*FSj+y|ZY14f_De7#jx~Gz8I4a{(0$USr@zZSd-nT!+`Z
z%H%87zIJEZkV7su1_al76*76B-pw{N&-?Z;<2FZZ%OZ$qPRlt($?G4{oqG3rP<=J5
zbbH?GVw$IqvBZ6D!2vo#IT1wkOy;dSRk<cAYK;r5zRgV)F}yTl!{_LI(->==3ra~Z
z1#M>BZHDdgO^YYuYWdnV@DKgXyV!3AkAfF$7Sz%}^3W!|97pNnLy4#cVu}bSFX;tC
zLH6D&%&S{^*63P#t1oUfBx#PaBI--f?DLTZZC&c|#f1#S9ULJ<kAQM6EH|Kdy#p8$
zm7d5j;=ijs`?ep7dc%w<^stZYG4DO}<t=pTf@|y|&qvuQo*JUTTk<~fo0@&btX6pb
ziOs+hVE`Qhts9Z~9L_Apv0%2ZL6Z`1Q9m2CZ*83gVyae7`{vW(&h=1GY0Yc~*cmk%
zpuTofieEa1?c6c@+aS6I@n_LD8X=)?`+hzeqEwZ8!ogwt=K0<U71D3>_fU7YJJN{*
zo?m&g*N%DinP*{of@{|OX%1ytVQy`voxgG8HV*<t=e?u_9wNYI%@BhYgZ`=f7<fe+
z-pck(qK&~m8>H;neeLy957pLkpSIIXJZ%l4W~gHob-6zIr9K+HGGC~~tgGIp^m4%3
zz%PTL8gV1{ygF5_r<Qf@0H7Ufy>Q8-KENfav?t&gcePG0U`l;}ysaKbA8WVbS)#L5
zeZLnD9k3ZEwtNDOUv7i&pWZ~E&9J6))sF@xv;Rk9)h~`1UK7|29pFTTPLQWQMqyc?
zD6mh{xHi3@wsW0K&7OT!@h=x-LSC(a8{;a*2;^mN4q-CWD`w^xT2e+x-T6x`jtkKn
zRu|h8M2*zdd0yMg+Zo3*4IsFZ%o=3XHW(@Z)VQ%I(+D2e%xZG41lR5i=DFivX4{6x
z323-J5P7PD$U(y)kxK!cKmgti_8<PkhFjtv+#B@dn=#jj%5<7%XcBu3sCj3uPn?T6
znas%gxj5-IWQ9%>jY+iz*{M8(wOFjkL@=S=3r<k?M^BdM0eiW)UZ-kwSakoX9>2W>
zM`yjQP~xa=r?y>#&*~E8H+^cC72qD=#IOanW2$4awnR@e$Kx;<I~KD+2LW?YDPipG
z4lCmDa5{-bj8FGh<NKNXVHhZo9i_f`qCA~LOic}4S`eRD@z53DB8WV*X>U}X_}r++
zrZ1>Tx{NIN$K7^etV92^TOWv4^vGUBgh?k;1abGX05OfG-7mCmvo6=CuCcxH>CvA#
z-dMH=8EJ^=l-sHa18)~D?PmI}Yia(vl?DQ;^c~dx6-AKqp){)^_Q4aO0%sImXj=0!
z&2mVMQsk5>3CVg0W16|UWvBvV9w?=lkR3|>m{jB-!Hf=wU+ty%8D5akJCL<G(67-k
z%E%MfXk>4+SH2Pi_T0xhcc<kU&HNxN=(p7iv$iaExpc_xe{csBUeAKMgq*_^6lWc~
zeMZtW|3Q@7(b~@^xsIQLQGeBo&-_!4XECg0OktF3+pdxINHD4$Znq#)J-Hs$1qTWk
z<@H|01+*P;DuX_iK?GKDH%W%Rjwpd}cjB;CkrKuIsJ!&p*bUJlBfB|WXtK>(8#-nI
z^E;b(9XExf2ZX%pQG1W=G|mt3A<;^AIFy^m46zkB@+V;pxE!=<`rHQ@aYFf4qvLQJ
zJRzz{-ow!D=rT~pm+#j>lZ*J>psq+J0Giz^+4r-Kc{ki;OmHoipt5<z-!uvjXX|~g
zqN2%;5&Cd{sSClf@`<6xt!(Zz8iCBEL1;=SPWD^%x;da%-HZ;&L#ZGcZ+L-OuqPEv
zN@|@KY7a)-?YlPP5+wd6aVr$Ea6#e=xKUZ%Pyl@qr(ZzqqJwCfFG#)$62Lep_{y>C
z-pvOi-bXyw^nYZ(x#JZKK9oYsZQI_>(X8|QIC7nVT-_^7>+DZw7b9J>ag0;d>;+*l
zpMa8k0?CG=FqX||7C@4tEXCvzGjq}fOufx0yb6^IF%2-Y3XlvJzn%_Fw>Vmrm>*yz
zC}rfTm=!@pzJFvwJvO?jfg)NMr>M~E=+UI~tsMq=r9ZYG>Ez`JMBnJV7#!~ghMt`G
zI<-$Uq~JLFnP>ha#fpS$)U1`v{($m&tIGtSJA+C$5ltM~JzG|)B$yfu(ZkGx{`CO6
zw63kIoPHdL^fBvJ%Db<D(b0uKM)B{Pp$jYH%iV18Qvde%7gj7*pn+(Bp8F5B5$THK
z+w>#|h4DTnJg&BmFh+)^Qj+}`y`0k7yy)0T;0~lLuWWp^pEU(g<DBVWRbxdGL&95B
zh&NN8;?bf<$LvGnXO!RT#Kxr^6b5>FK&j859Mb~Ss7T`nodmU>qz#R(!4;38r#xM0
z`fyA-Wddkp?t56UKe6iE9bIshLX;6avwru|eQMC{3)c}`W_W)&x(cRRYJ@hduNO$O
z+K`=YxKzLzeD3j?!Gg$0G@s;;<pm{Q{+t`^et)7tV5D+PI7%ph-U3skR}!AqI#@C|
ztP#m|q5$l`@}Zp?a=5Whf5<=U90U$?>c442Qtl3&Y^3ja_PRZXfjZ-Plx7`px7qmZ
zqlNMa5Kkn;wtBR_G={cnr3RE``D@(Xm2^wracwu@UMNLdq>=JkiasGFQ?p0yJpI6*
zQ1>B&V6Umm=R%tUGT*Pg^W!QEc(t=NEWszfPRO_3L9131AHqS_U?-#o+4s4AIxua_
z3gWTM<>g|Pt;rO+mY&1N#6bHc6cb%#SWl);2I|U@;;sRZrE_BmKMXcm{i|3BT#a3{
zoK0w%TJS&QDy^bzbqzj*eT|`DQ1*ieAbEC=M~l$mdse644uz!Q+=J7Qqh#jgHzrO~
zC^;f(dyIwT^P!V$$2x%Zn07Z~Fv>8L-Kj_0POrH6(sFGo*d^l?1a!O&0wU@^N+xKA
z3a^V%sj=&V{V&3f*>nL2j3EDs8VpieogLbFc7yoOZ9T?mULgx*ed&>-o|1IIB*o`1
z2y3c`V1bOrD)MY7>nbIcU`wze6(d!&Xwlh%R|rkRY5^VX=9KlQXY{jwondo^G>5sc
zl5h$0f`Wmu@fBsv`2dAGehTO<j`Z^y4Ig*7v<fVL7569XDu@unGnu|o1(-j*I|GcE
zg9THiemz%wk5H+BQOoMPdmftk;&>l%ft~uG+zMdnh@v={GBo{P{(5L3O<TmN%19vn
zJ)rUjBj*$m`!iI5f>Yhz5Qv}Gd7)7UUrf`h9S!+JmL5{3yS}$&(2wxcq77~$B$?zQ
zz1L*LzE(MSSs*6p*7-}o`x90?N9Tfd^C6g+`uB5*F)xI|b-J(%uUGMt>vj6(LwWjs
zYqC_=xjO<MR^MP61(5SVn{1x=sF?Eo`YPi^4^AYQ2%wX`Wf^bx#3`80agtVY^Gw)`
zGnaqxS$qibXFDfszz#_~q^l2TCv<vT8);p*_NNXf?3wl}ZDL@AB&tm!T%n+(yu)QO
zij!o`R`vsJk_M!K)vrrW!>o>mH=W1<GgK2RE3NMOwNMN{V@MU_5`m<6My1$3ixT$^
zDZp!!n}sf|70TlM)0?f8p$#LA-KmTnpx_*4pDsv>%G?=2BI_?5hylGKH#od~a5=!-
zI{06nY?|Stt{yIVGlo5aY-Afzp!^#NO9Y4*fa1m#(JmRMV*9*4!<x9@;LsdsWp;QS
zH@$hl`{s(uc;}6N$9L01jIa1g<LCNov-cd47RKq{>ie7Q4O}foJk$Q2ofwB_3{h*N
z4)-i(kCG3(pu^Yz;$*@1*V$HR$@R7)IFYa8J<B<!^N(k}Q>q6`?{?OEIW*f7Gue2e
z|GXg0ijAOshn9j;9#<2M-Ar+Mg~(6Ct^V@YtEeP>mGe1b!_!!O8=`O!O{qN;S-?&x
zRM#@qTIcaDO4D{+!($Z(>0`!tXGCr2&v*d_PW3h)H~b<U$kE)A;+QGP<iKI}%zIMo
zQ3V7HY_<oXGbU{QCM(bx^*vNXBia7#Pxu;I(R*o%w=r^}F5ZH-f5*}t9r~|+r3dHe
zl|NlOJTsSLQ4q{?-@TK~t^OKlsf}Iy;z;hnL(z|#K%NWK5WB_e9Za-vL6u1`#Zy~r
z;(dfj<<*-~_R)*$r1e*nke$%gX^)$bSr3q;`B8R%#n_Pgl;*pbaF|y=Qiw5c)UvhE
zfAR*P3!>&GPzpX!736R=B>sF^I@N-TQo1azue4n|1CqbNTaVcQyX^k7Q_6opmDc`1
z=6ICr@FEXsyW7=wu2*R$juJ)K*5wzLsTvW}I*4PBqi|i<NE)hkTADUws%wu{VNNN%
zdv)y#Otw-pfMF_3<?sBUGwt+n*o#wCa6w+moK*AE0k0Y_06Hz<B~3J+Utv0nX)_LW
z7ZRO%@4wW$<W^Yje!mMyl4o#ZHjvOq)R7{K=rbv7-o9Hl4j~0CAH*4<!i|EObR=3o
z@CgfsAOV#jmr+^=v51@wfnOC0yrfwSb%Bx0T%g7Wd|Dw6YpdlWB-EAaYn)76;RYa~
z-3+d2d-X_2@v$df`cm&#dt6qsh@nYs3KAR{v0F4P6y{Ta!ByzE6?g~+T|=9`M_!yr
z+>E0Eq`4utX_V1dM&O1WmwmQPDp0^PQ)rETMyYwKZf4Qq5e>Ii5>bDP4w__YQetd>
z%ri!Sy~qJ?4TgoeJ{)W}snG+X3{h7A2gZ<1YfWyZwphq8{E#Su!%b5uL#uW>Jg?&j
zv7N@|+OZw->VmW7p}qIXjXF?Hw9bat?H51mnIQmwg!$QwV`ng-U&HB8IcPkb_ftm!
zWJBb<PCAAUI?45VJ+NsV-yMlKW`}60Lc?AsGdQyw62m?MA&Fk)Ra2~c*Cl3(!#SB!
z04*N@#hd9XijF7+F0Z%ybnnMwF0$Xt?mwzCa6>QI!Jx*F+B;f@DUJiK$MCtPAdPi_
zGB35N0o<Vl0y+Je3gbEO7<i2^P}3Irjou?Pyn9|`*6Cll7{~-`IP#LB=6H7rQKl<k
z629V`V)v*KX6T;o(jm#?6y93S5#eY+5vv|ChObR;0bu^-`0-l1CLy%O!<xF#uWqU@
z{R0-XiU3zho2(*V>)uelT$6H#a}i`=qX*e^_@ZJUd&{x<L&acsMgmf}&HNss6DMMs
zuH8&;4eb=t96CCtS_O~9$izdGA?T4WbcN?LE1$afIpejEjh`n2k{@$-`bOEmgh)+t
zLIUZlzksxeO7=66wLWyTuzyd7Ld}cqI3dW;3ihDA8?9#mDqRP$-rovy+lUz}G>!Lk
zEK7)0gWDr2r6H#>QFzt&=edPQuvnM<MJ%2e8+7sXhfnw!ASAru+&48mxfX&{4eBRm
z8;b1@WaM{XFb~1+;`4zK;h&(UW(M&X%(ZC}U~vAb0}rS9XbHu0{AXDYyC@Vy5lmn%
z3DyjiBAW;#HI+4B7w-<I`fb!G0q9c=XZ1<G;}FTi@zAmCO?@G0KqX89cnqZOO8^EJ
zvk3xX6SOkBfAbD2pxh^opv;Vn^)`HzXR|HT*;w1os(Ko=0?L~PIH(NsltHXHSueoR
zldj_WG&8xsDryOB@4f>+xZ3#gcmY+IHw;DSR{U6HhV|F$HM8z`Cwk9u4W$f<m8Xs-
z(8e#(N9aw8W4trqac33tDDfzOF64>$cBo-OM}r_+Qp6Ze5jXk;0F3+MGb7^wO59`o
zp9v%Cc(_v9fBz)_r|b%O+A5(tOF$G~+1LXq@g{^BjrDgzL8_%m)r)hYPE-WuZ^;Zb
z*nC-P{$!d(@L&iiKS%v?-#w#6h@1Ntnu2SI7;jW`5a`Xp_;u^fbX&J6hbSwF<j-#4
z%d>Xm8WAUoi|%gAS7Y9@zpFWGV_g0q#>S!Xp^w&7OK4_sJZj2_S@<?)(PM<yO@J7a
z8VcbG5(@NC*QEV><VR1hm0{O;y&#FT5KKNrixDdM!h`6e6!=3BdC3+R05_L|WrxfN
zUGyps^TlDRXjaaaPS5oaf1U}%VPkGIqSpXSo|-F<R;Id}v@da^WA3l}ORu%de|8)`
zn}1S`IwA<Snz^VRD?H^4k9`T2F%px>i|PxdU<<t{a#InUk6VE<N2C6Nj}!n?W6S8I
zas<hWENJwO_KMsj$&jecqy)eL{S~no*_LYwNImFqns2Wn$btwO?ZwETH~<)f$dnZ4
zVk~@&<@(noqyAQ8GGxX(z&VpKFoO0Vt*LinWY-8Qfi`5_Y+k1~mVbZ(mAdrB5C{Xx
zw>F(&kfe281A|BI$HJ?s2MkHm0?KeKzTsx@4Vgq4@B$fU01K7EVn=1DV%opXY)VMs
zrbr$A^mjhtg%rsPR4KjR_~zt5O%_cvz+#H=`^RW9(3R(pU5E8HXU*-I8BFRA5*^JB
zu_@1^GNo;rPuPuoknV<ZV&d^o>$l+CV!B>fIrv^?jw#9}-=Q%W4G;nS_|20D9Gnud
zoqe?qZR{Wmyl;FxfIQbFNY)t+4tANzvAR+=U(!IenAsel*fJ=F<&nhMPiOR7@*&Z0
z@E%HaUw9M&E`k@nVxYc@dV%f9vQvl|UY~%pO%&2E`3^^>>D|qXUT8T~=OF&~AFYSN
z5<Z%GXOn=K-()f5&k*H|#J5H^h6&(Lr#_1bD5)c09oXu4XgVCW<TbC|y%|7yPuzo;
zROn%6?a6VgVgM=Hm}#ug4_`0XpiFZv08tEwS`Jjrf&vc3ycy?ApFK-FE$0WZNw3p~
zoaIsCFXL!sLe=t;#lq%h_)Z6F0V1FuSq(K$g`zg@XePs5q+ju5Ppr{A3HobT8)?vm
z@;6SawlRv&vslKD#+f^UPXHXaQvA3H=_7Z!VayjP)VuL?)iQ=cvs%p;Y0Dtm!rTUC
z0qUQJhT-O@xi<NUTnoyb_ExL8EmZb#jU@nH5cyx2lSs6|FzZdQLj5~dANjMs(fq!Z
za@$#MR56iK_8^YC1KZw*CsP6wq+R5+P^SAAJ&Rezv%V4s+GS$Fq2Iz?OJ}|D<7#gL
zfN?V}ReN&mz{xE>>>J3bBwEr5b(Xw%VfCifi!Q++!?e`#TYRWwMpiOV(ZGK1<zVKa
z>=jP>;4QH%LK?z4zyIN+1(c7xFgprH&*504(Lr=O2YvSzV)lTA0ZrruqGd0WXKOe+
zDWB=yVJ2%TQ$IStTyV|4$N?&wtG<W%m2UQT_;2G5EXXB%KXQ@7s(M~sz)|QRc?=8J
z;_naLmQxNliZBVFmF{#v@)vtA0JchzO6>6MsN(5weDd}rmJz-bX4Nh6LE7W(!T3y}
zX6dskA}uL|l3nk1n0YSgLQ=Q<d<DiXtVi$wD2-zhK9HCdNq5pG%MtCn89Dld-ZV*1
zN3SIv3U?)daY*F)j9XX!e0=z9MJMz#u1Fu*`Mwm9iiYO)xL7i@4$>bkdSH>kCw*Tg
z9;RT<sIif=i2{<|-nXz$fyJ)nojG1Hb&uP9UbQ?;NC<NLhJzj(Ug>z=l$+`CHD3%z
z7LT3k0y!vnqzb*oB+5Sp1^r&;?26l{seo=MT%Q_3@c@dracywHvEsnT-w$ZU{gAGM
zb^mU_X*xsBL=x5_$AuUgtbE>n^TO}ht!Q_l^M~i__x|WCy4*Y%5lDi^BUax<ZJ<l@
zXX~mN;TY2@67G5N7rbx5J%5zyohxt{2NbA3a0fck&$jjMaZcfSRz@$MN{x4eUc%?>
z`3x^XILgvQ__)GrWrL<AM|_$#c%<v8f2}gzPL+IBsY;FJYvi<2*rHiz0?qo}G}Gqr
z1PhI`f+vl(Z#dS?SQXcK{z4Y8KIb2<v-&WKsBtH1B(~*$1^6q&p$<p!sopU-3qmbH
zJS8`jPI1OS$9(rW-bMY&AcnyJViI&*()^pMEo``C6fPIS3t{3zRVi-GhW=I1ob!->
zAJfKc4PT~UJhts-gjv98(54HAsy!~BT?zHrqmSvM+&8zy5DH)oSdXj{J(xD74^)PP
z7N8I<BAIgNjQbdU`-1Oi7s(DjQly;O8JjYGpa1~h3ID@iTLnh!Mz24s5cl+fCy+gn
zPBqf6^5|ceyQ+NB!dEL68a|(!m|qNi{EGn&Ni^;z*D-er4nM`f%8*i-sD0VCw^aTX
zo7~83F7FAAnbENHaTVcWCvp;BJ0q*+y$lZ_N&LdR?_#X-*GL6z7zP$Ycvl)=%>FK(
zm2&gymPNJOM2?#c?;u)u6%+Q<UwdqF!FJA<ptRog7KTRJw`Yuw<mTq7jxv)tq5%*!
zq*h)4R1rNo1e-<0kbthf#e;SWXd3s`6~GKXknS&8mgXDe&l^cmMrq-Aim(aK0D*p3
zE|jsM=3N6@37`xE$$NX6R1EL%eB>jS-_d5I52tGdFfp-eT4N!9>BMX~x@V~5$@utv
zg1h<!%0$%>*a+2ayX^?X7mcH?AkYhqW2z7&bulp>>Ce7zT~{_xnYi$?8FjdUf*I%S
z)NvK>BU()z=d^9AZOymI13u6nkW{bu?t=}Rh76y&-}UBBnXrbLDHNZD86RA^K3{j3
zPFoyZOnReg^kJqNiB7Mch2~P>S4Qa+I0#}jwrvpuXsRg%OZ*aVzh>%HguhyW+-L9<
zBDpz#u~FRkkLYwzvGKrEoX@QXqo86N0~s&Z4d}hA2*Sr;>mW2$%mkY&s4P>=pF)=K
zacY;_HxE03O9vi?8W4bX`?+R`L^^HcsX0mSV=w_;ZOgevq^*M187#iJ_$!09%V+6p
z4n<7y#xhdq#88r*n37CmsIVGBNGKJ&jG$G*KM{#=Hm^}L$#GiJV!O*AUxe+`?NjTC
z$8}73Jb@=aPh<j<YE*zo<v3K05wTf*BFawWZDspmnM41nwB+K*7(^XOEwPxW?lICs
z(%2=Lb`C>Boonw;{+NIlZ<$TA>~P{zRML#v2i_TY2+$;NAHb~g>#5cgFfD8@r$CH~
z(0G2H<AaDUkCW!Q@?K%i2TQ@yZMl<bS@M0aMwPGQ-NT_YlX0GEn8<E|am~S&4hzH^
za{!;_SI%$G4g42~8v4KUVTcu#U#O390p8i3Jkf*y(ka+~*kdoxAPz3KQNEAdZMd`)
zdh9v5!dMBFg53T?m9#zXYZ+jxq-nz31(A}zkCM^sC%{skd?Co=-82qc{_M4`MbPQN
zZmw4dVgU8puw@D|A9>>)e3m#t7{)M3Xnga_vPcQQwA&0aZr-0~p~+|dgf<=Vzo@Y<
zLwj=fgGG=Z+w_bnH!p?z!vqPP^#(3Xl0qvA=-_Io5et(8DU>3G7;0N?40FZwl18_<
zX^Z>FmfPpy%3<_``df(xG5LyzZe1A`9+jzQ9iw|bZ;qaE38rr`;>1o%puc2Wh$!JL
z2WvLb;EhO(=LMNa6LcC0_>eIE72zg=+CbCZeCt4F%liAcO4ffv5Ge53HNEF@#5qeJ
zD}<in3=h+(EWh=SuJ^m`jzxNboC4n8^JyW1^T!#upc3JK-QmKB$1j#EeHAHO0Y+wb
zk+n2I@UHS3;(M*jr4GeXH2-S3V#!Ct_Izzuklora)<Ye-!6s&+HB|5qnhcMTnSPaZ
znt#VD$=~lpv<j=FDVvh&hG!A%ng^EKq6x0~Xes_x8u*LkTqEpY=UAbe%9i9iJNK7o
z0;5x7)h`?ay$SaD9_~k=D%@p)p1)8x5>03s?!hxx2R`AApSLPgZ#3!4o&?_wa`@qo
z^mFNkAHqO%3xS~i;ISS`Mri-lK1^2Hn?lG4#>c}`y__t~qp~zS^w6~ZX?N=PZgLZF
z?Z<m4r<+iqD9#pUH2Nu;DHsOAV))?t>`WaA?0))cE!tKOOGMsTd2B?}LE0!Vw3-G;
zHxr0pqOo(xKE~KCDX(F`4STsVzZr^AUW}n*H#!|TL~aORuQ~uKbJ(EYg-^i=miUOt
zwYM19X0Q@nx)1Cdtxdz!)lC2D#e4<1z(e?k!w?G-EkkWa?7MDb(k1|XP$4`z^4XaO
zu}ae};<Gn9+n=~pN_}3@K~qh>X$3(#I&b~l_L|Ts6<Tvtd0ebv&&5~D#?Ca!RJ5pz
zwWV}DSZ8a86-)dyjl<r|`;7&4SSqz_U2p`dAV-<Tld_gSEy`IUp(vZp6ld@uEpf3e
z9RwX{QN005VS%RVp~HHSZyLkDnRyQSZ!}0I7n9%sT*C`^yn-f^hBI&dWz!Z!iEM{_
z@Q3(gEKsRM^8v}GRr`mMAKK`FP&fSyJ#hHQS1+=eU@8^(zVybgu+CseL|4FTr@c5*
zgVTz~<Bx@#D^~}3HQWXx0!uwh|0gyV=dPm&#HO6aEBtP&t7G@Fx+-OU*QQ+GGq~UT
z_yj=q;lqdZ=P@umWTUOJ+QyIZ_VCvm3DMkFBmxtVnS9V->4sj!AkKAiF!XDCIOq7u
zGx$R0YvB~i#H0fEU_5~GpNmo@JaVTXY%U*z`|GywD-q<SiA3xEh17imziMLQ@0NoQ
z&&L=}mxC$!TU}2c3pGE0>dE8hZ~c02hYlk(4RENi6#=in9wv$V{JzY;(<p{O7A{Ud
zg8Y<06c7T#^;9lske;~M;lvpTBU1w1aihUk7e4Yq8SOLktU*5RLp0a~i11t(m0i<0
z1;cUK_gkWKUe@+=na2ir5!3h)yPbbApzLo=F#lA{H-L&@gDVZ-BatYkZC$_FU<R!M
zG&%G!Ym?IG&95Lr@`Ob`WhET5kubnLRx=D#>(i+DkK~`_)%g&a$hJIj6mFwZZp15E
zBJ;^Typ;H_g?Kv;L&}h~D#xj8aXh^GSvzR%0+!9*9$dJhtFD4~A`_<Tth_}Ygl!r;
zCPGN<Z1Y2D<~Nh7T8F~fi%Cwnk8Nvr>Z12<3h}6lp}#_aPon{kK5)T<B9e!jL=^OU
zcOu;8ZyxBl8aEz%Y=`)QIDndQ-oRV-{>snCII^mIA+I3IvR0+|2AIz}ubHbmj~z&j
zb_zIXTE?&1Sz$%Ko~8w1zi8s9@qI_9ZJ_&C{!NFp#L<c)8fhOI^KZEBgTQ|^u5=_}
zTpJ!OqKq~S_n13jMssMI%eZ7_1f;$|FJti3-;;C1*JLXp3T1JHbE>!gP4CO=5@>KS
zUoba+IXFl_;f>*WWKnmQO}LiSzp`QoCRA}5-JsImfnT)XD<@yo7^GqbOK$hl^Dd+Z
z-JkjmGGi<+u5flT&7#Y`jAzL8LTi^#Moc(urUXFeo@*-fbY6+9$g#?Vym&MVfEI!#
zpbU{Eu&*~>xY{5IKeS?(Hc~-FXx%qV9$2cb`d_}jp{Cn{es)An<7xO%8BbaU(I_Pz
zx?ilX;%Q<O5eKW9z8HxptmQ8&6DCk|X%1=;*<<lpz?g*X)0wdMR)<OsSU6nBT18M5
zmN4~)!wD5w8Eh5_x`#6b!PF?akQflOkb8p1TrBrAB(nIR+-aGFfg`D_*<1<5Gux35
zy;HXN)l8r^l=R?)qEKQ}vTu3bnM}V;ae}xEiJUlTz;~IoDj5hf;8QK$CcLXIQNAHd
z#=0@o*hS|2VhRV$dS;&;1nsYO#DnGM-d^??IH4d(bF3;_moJWdD8^NIB@edfGO94k
zI_ii%)C~$&uaxUR!B=oH&j<y)zOZ~c@cyj89%C%TfxHM`FgowOeX`uW!N$T}6VQ~$
z6l08vszPLXk8wiIa1xB!TM^o^Fd+d0IBvK;0=jcUg$C?a>I`WVGNx2vyrk6oNJLC%
zgPIvo??aKRqC^%5t772=CPT{3mmu6AM1Ld|#!7^hwEFEUP>sC^nC%RUjXD~60i_5i
zfXmUmi`$xDcf(-7z~%x-JAH{(*N=@sFFLdonv6ptM>d6FA0ft-P?`{5ggPoTE-<rq
zFhO288uVl<;&BL>9h)G0n$;n>GF)c%hcIRqT?HAZyFfPDsP{A6{u*U^xUi7zu_pxJ
z5Y(C2_whSqnyo_2Zuc$-Ujr?re}r*HehcR;(X*)xItf)nmSMEzXRaR0N7i^webR*z
zep!^2FD|0dQ={~Qu?KC?U+@?q2(qdN^TM@ZXt0K^cA!Bp{s4W}LE0U$Dq{B1k0&vz
zH0T*U6=_{e$7B`VmU-wKqeC(a|F7XKQlczt*+Hv(8v`aKOK(E7UOYyiI+v2+c<z(9
zR^(s4-p;Io1tH<B&rygQ6xJw3M3a6Y$LlxUc=Tan=A&BzyYK>;uk)XGdCEjfPuff;
zrXBWV@C-dk|C|WO8PdzD9156J8Z6hal~6dqM^s_Q5_44Lg&0t=fmGOKfja!Om}%Ix
zPv<rAvohLyhFLW>6$k{?gY@|b&Q;m{M$_Cl1PODmCX8i3VpVuc8;l*-rw=PW_e#(r
zs3$I3+DCO5SK{5UqPdG6#KVv>!G!lWo*<d>8m84YS>S%bnEr^;W=8h`P78;5EO$Tw
zE9<0h1Cb6Wg)M-~ER~+S)5(dLG%sv{^O7^n&e0;pHD+?OXuMV>DUdh|5i)GSwhR%t
zTc;a87MK*1aL@6Nr42}gb-@z%o-?sXJqHMC(jksDfpuQ*m|0060Ma~?wpXK4Pk%J?
z8PO)o{yZ7=W*QC;Ryt_0y%|J0WYQ;RQ`4_)UPJC@&`<>v9ks#f&cjCyjkvw``4dYY
zfC=9VFy9^EHUr~q@UvME-nQZe_#}vH(?6XSnPU1}0;+zHb!4I7<V6-1s!*@~BS8(H
zGL}QsH@r5}S)+S?X^zq-YD-^H!{pFXON2OQVJI$sm_@oq$h8oIdU=@YJKVa`=6Zt3
zDM?726VoIOcO64KICK_v2%-Go@Eer_%tsAau^bgVX)y0;1WH-k%Xx-xRtV}s!+O&p
zD;NDPqgY@(e))9;6dvEl2jC3LqW1zig!|()1wbwTqE#_GtHNA1_S2w+oWn>f8fIuo
z6{Dx^{@lYIbp8@v>T#gFCCeu!BKa8PCv8%Ma!~MY1P(RL?@KT#5xRtICl&d%czztC
zZHNYlA5nh;eUewfTKJ{+!8XsreJR(n0xG&=j6EKh`@ZMeg-WCQd{``D=`d~^)L<D(
z0j;`@mLi#{t+=0ttIslreQ$OhD=UC<4)nT?F>feuoRM|BLuUP1u}7hK)CcvNl0iiP
zv8_AWl3=)Dq9}kuohwa4UjJ-LF{6I{l^_d~7h-P)0TgnPFr}*Qc_!;IG_QtInHHd7
zYFn1y@NJ>mwXUJGAHgG%m>(NM3A~8=@a*)n`W&{l%;J^Rg1gvIyzep(UI>Fge?-U}
ztJ*a4kJBI$G`9<yE+juTCgyNQEZ9N3b!y(XCnd>FOx6a6blpKtJ4&%ewcl^FbHu$Y
zl&L_t$qmLcoJ>ZuSaOILVNnshWHu2<;FOqQJBL$S58cZ_O#<;X++q{SDmqNIf~}K=
zW~O10$d|};lL6_tpJ8mJBt(il+GB)5nqZ?nki=scD>lUh2a6S;Qf&GQ$9k>#9Il>w
zyuB!DWwtRa?AoY&+ZD74r$SpKJF#|QxHT<~8Ja}{bphULr%{ueU=&#g0ct)Djz(ZC
zvpS_K<$BjmA3TBJVd91J=6dW2ahHm^dlomWJ@Sci9KV2DQwB^P7_^s)-6hQ(C6UPV
zVFVhtg&N#k@~XdqJV(mbmk>O%NrCoOQSw}2e7i-$J;F6HK|6`c)C_|#sF)BkHrrD&
z4vDx{(7~To0_mo;L*79ZR&K7Dq4k{vfpcUQqp4bvlbce&0RH52UjA2@LGH0L%V%Pd
z&<>VI6$xEj7=Iex-&<WIf0c*S`=y6anX_kCPVmC!Rfjv=8@n;K!jW$HHiS_n`@QDz
zP?q<mlK_*(T|&oHy@nGxT3U|5tY^{9WzqE};pZRmuy_YK5{hoY5-^VH$c^OVrVzw)
z_+h=05o?-RJ2ZqDJ;1688nh7(Km@eIkq=}DPF8c3e<7@>a%qs4+IRkHM8084Cz}_+
zD>Zge;3n)xHGnoGVN{|j#%QyA#-brk-F5!%f2n{=Jd|U!bYoj+0E>I<D5;y@st`G+
ztcdDpVavG>eka?6HbN?HevE6i61ND(;i$jN$*VLoE`#fWWj!eo(H4iFZ5ek+Wysrr
zX+O|6m>0+pRa>`mFlVXmwwtqq$58VDn7DmG1P>@<3?1l8hRTDGI6ms^XL0gPX4{~U
zj!l4VC7WMLl%AhS7O@3zCQJ2UE3t*QXRNqlh3@z)?4`rQrO8B}$1@3>zW-?--Dmx$
zNu5EC|M$C1El*FU3c#qFV0YN6EK7)tZ@LY?j`WaR+lXur*J7a&Qst1zZ@;1s+g+UL
z$0T$&%+Vi@XhRU-P)RTm!(2#Sd=u3={ydw_7U*jNPOKAIf)N#o-Dv%cI)uV>#IS24
zF1HHCE)1ioFXm!t5&?t(Gpqz6@+#h(M!!eUx|m#=t1SGIRAjd!tb6&q!JgYqOZW+%
zS83vrKR?`cF@?fiVhPVRd{FEYNd}oF3o8aCgaJ#qHS3d&88)T|T>?HM4iM3|r?<wW
zl<C0z`Z=DA;RX}%Pcox#GN?jC9kFj+?<NVam*Dq79LA2fFdy+?5P&6qOQ^hR$5cyw
z3(NN~NQs63*e3XQv4TxQpvP6`I)996>29VbTCfjBUCc1FQJ6M?n=j?}FFV@zF^0K8
z{@4R4R5KqlS&cr85eYfjT=AW>XW}oGHza(F*AN#J42;;-EYT?kEvTvP;g6=1fZP!W
zhBcn4XB!vH*kYh=Hl$+=b2g7}BXMpwt4(y%S*U`4e%_Bz46~g6d0`3xZ(ZAi+~&T{
zVNOjdS(yykZ6sV>0WN$LlFCGp@KMS263b~oU=BT6EO6dJu4~W1@FX*NqE@<svF1Zd
z)`rn~3xh;nz+Fe6OT)4R;=TmGDBPF4Pc|X8gm6kJL$1X2fpHQmuq}+ky6eU-A$F|6
zC94p1l$UW}x84Gw3&@EJZ@6>Zt`|y)Xxj&rl>S-l)rL>II}zJpkX3B=Vs&4KIg$GD
zT*JZu665MX2gNL<iD@v_OCJTDCK(Ll?Sy%&a{12~$|Nzk-EUKi*a{fdk9u0)p>q*J
zvS&3(7y`#iL)^yW>1n_+DF9FsOQlyAFAn$%q>RD2l_y}IheECo!v1>e!p-&_vu2W>
z;FYVd!WO_3UO9~cQ~oBUJZiGg(1~X{2rA<&)C~bSC9!ABtqYJb4}))AG@X+mLJ}oz
zV*P=Gf)sA3$^XOKox@@&Ow&2aXR$TOQj_y1JQsiVC)a_Psak8X5_wI*5;C9yBy{2K
z6%S7v+{}Mj#0yCo)TK)sfwlg_XAaF!=zTF?h`t>`cqd_AAT6#p+u=7fj$hJU0t$^+
z*o2f}f5~d;jNMf`H4J=tt#6V|$4vN!JF4CUT)vc``VOlsEx0<YW2yNtvZ1*#Z!1k}
zJF{Z2A*f=ynS<y&f^TK#$RiRLZj$-XGR2aU`T=qu%uQXub&E-uE6F&;EEgEsRkt`I
zf6eXZgRcU^B-L4?n%@n#jNtClb>ajhuX<)FT=q9&g+2-{s&A}6?tRWFBXE)}Kqx0S
zN(1e(>3)ABTeCwCHRD5nNf_;kpM3<P@MPcO+4o<f7OazP3uBMrr6y|o<f;a1G>qj{
zCL`asd}a$EC&q>qUvOPEfFo@n5b^>@bn$r}#4XZ^rh?FfwGQ)icC5B$T<7s+Hy7sc
z;Qbk)+{__1x#<z9PY6$Xyu*%X8l8ki3x#O4R|b|~Y^2ukP>kkO+eznG8SGN(ThPNq
zw3$K+vWBE=+gMuG?Yn=P%EtNtF;ym+SXYKmJo{1p*sdWs*Co8g5)Q-)o)N`D>$B;k
ztMJ?VUC)wMoLx*g-^cH=y<&PluYa10kD)f~$i$zh0x3*%(Y7kgtoSKo;h(X3`ENTE
zQ*Cl}Gj+L7(Myq)+1#KxiA`{ZH$g~eP{DhNxN9APFr!n4@2Rx4Bd7<4smObV2|x$Q
zzKU^GAkWipwI$WkoggT&E<xYchHft8<gHsQ4`lCC^b7Yjqa!sO-en)_B}~jeu@)=X
zNdAP<e$@v3kZRJFrzyYbjQ!t;=+YAy$>x7nf3!F;LJw_=l;4pZswsZbs|2^)Av}U|
z@R7?6ntEWpreDYMHd_f(C>OT4FrIJ`*m1q6AT%m<`-+9DGyGD7V;%?tH}JFvh8qp7
zZW`*$V2G7r@kF_HK4W88)_uA1QE0&=!)*gob=%+xw#w~?9UuAjjP*dFGWL2Dtlal`
zKEEVWfOX8Aj46hnr+7E9t6)`L&!?eE5YJ<RzH~ZhxNRjBn9RmjFB1pAEU_ekT1bS3
zkb0@0vZu>}?6Zw57tj~l*jKjl4#go@V+9_EQEkX|npa~hk*nirT)33#bZjri+#;t9
zw(J&v_&G<5Si;8-P`e1l-D69gJ`5kB_;9)q@EjVEv#~%lHeJ1LmW$HPg#hVfd&aj!
zieaLtWe5mX$3BLJ_ZeD==N?25&W&n5Lf1s;95PXG`N>Tm$^7K$uBYh3a0w2z!Vn(y
zZ}`u^1EW7XJd{{E)u3wn5PF&U6)tTzvT?%{%+U~O8@!`I>PjqRu$z!&{YwvHo^2}4
zrUV)CsizD-^A9q59S%oa_o-}vqabrY8>ZCp)Y$WNz@D4VJs==^JmYYRM{TUKjPXzG
zq*OFKr@NpRf`V98hK19dNr{&Y+z9e>_aqkzGucDcT`;xE=ex;au>~-a$Iua+NRtTV
zMGRwR$^rp|#O0Js*^j3$J_JZ2=c!(@jFL}rW}J?*YS81&@TIAObOL2Q9|Nu~$d+KU
zVn5BeOZUP{wma{40JzhG^F76RrLJf60N+%+WU(ev-c;cjHyHDl>?$;_%)#RK*fV2L
z_*<Q77tn9jS!|eKKoZ=YWQ#*|QRo~){&SO+Jygco7CTp~s2zRaBSbVxAG4bL9!?o3
zDH1+fQ#f*xs%in{+X?;1=n3*2M$VyggJhjp5Xpr6PEHg@4THUmzYGx$cS+vB^6qG#
zUiy65OcMKgRQdZ4d8m>);lQg#K#?jH*2%a8cZr*N%JC)27iPM{YD^raBm7Vh(;&WB
z$xIJf7(tAEgFD313IPJ5$*R7kKx}WvTL{f!%^MZ+9!tjTsun%Ts6aO=AZBgVOFY^|
zPoKx5vI-`4<8k;`Lf(oOrh_3Li83u}r9vIUz}e@l?3`%>$UEz44*5z*#9j@lR+vs&
z&B4%vJ(`~DnMHxF%ZlYW8;jxC_V(D0;V}i!S%h>YeZw~Rkaw0$SVduaUq&2Z-u$%+
z*w&Rgq&!vo4*I|Mr@woy{e%mFt|!by#(Gn+Ti9nUpLlDYwZeXiJA(4A*OF^UD3omB
z9E*8Sgde1_qhVw0Vo9+k+K=r+x-0qme*Ly__d!YGp|#zDF5sPfs1rC8Q|j9mM9i23
z&6dpRBx2MaDo@!)xrCwrQk(IKL|TeHQmFU4t}}6Ql}~RFeEk8GI7KB&yG;%uBI<AW
z1@;c&u6d5`1tI?&Mn@inC`Fg&fJ7OMFm^(a40d?Yu#2GYQMm2(*~j?zfQMs6;b7Cu
z#M&oaEcBMsJ+p+DrN}MPJO`_pKj~Q|mU^GzM!~ek^|`j65hbR48fc#|8{2-Guy-MN
zL%IW#N(0!}8cQ^C;eL9u3ZUmnV&ICnIq}+Koo^Im=Z}eVSswvahmD1pdU19vk2A(F
z?=EC6v42;0<-#eI_lUe3mh)&7hbUL<cu_trj)F!D+9u%w-sMhQH+8<3sD5k$b8C8q
zs@D`6*di8PV675%DQtj6OT8!l=Hfnn4Ch(4fr7&Qff6{j)=-3XJri7oZ`hq+%>~H@
zqs{*E9kI@+C_L=%m`~aulu0(=)C%0f)1Zu0C#nq&Rq-RP1zTKY9JZbo0U?@3RcE#=
zZ#>gy>}DV5u=7acYL~J4?GZ&CqaULv0J>>ku!cG6h1RbQdD%y%KEt0EI!OWq?XXN`
zHLFl0j=@!fIbE?X#+ARh=~3^qVFYME%f>EJZHbt8yE{cI)}D!87$p}63y&~+sTb};
zJ~5o44>^n^`xch$ZZtVGWA=<d98qNWJYVovtVy7z!+H<4T-yCb-dyWwd5xUlk;<GU
z`|gA~BbQmOT_W53W3^(6vPX%fWe7e#bTE(}4k-<(=tg6Q3;zi%`El!b0H8;`Uw5r|
zXpyjLLlXQ@3Bmwli7T;B8`2q#f|V43H73~aI{t_{8e0~v-p+IVRm_$kTMVZftKOkQ
zHm0xz8S!!bZD}I0)GoxzA%OT2L|gK>Eb7U>!GNd^oifHug{|9!#a=LF*q0SAwvVi`
zRTYK?(cqq;gIm1ABZ)%cPKN&KV(p5;Bt;Xhhd)^hWeDHg9HNMyWq29wPwb>RW9ME6
zTvF&+SJ_d{@B`N6B}`_+ZSf$y0}GLEBqGLmthhS+HvB1gaWO_EbNl=nl;zP4*t7wT
zxBrRGNWNWGd=Fa|gpPc->j%He44->QAN(*J>)JIhUxxPvq_J)YobzkwW5H8?(vm2m
zTO4^St-@8S`g;Uiy2ulMAE@^=Xa>!Y6YJk>&{_D=_2Ik~0)*`%r73S=6ikz&CW!qM
z=i0T2rPW^k#g2)F6Dpv%r;NG6T7{F{8f#Qye_0a_O*DYILoA6i30%&_5&s@0n=UJX
zO%}o$XL4U2b<h~X^qe{bRHTg^!xtcCoWQXv{5Ty!2cnDtUpBtNoP@1kuoq*Zh4kQ|
zgjLOXM#V7xy!WILyG^}xQvriYeD+UMydEL4%!2#<;GIdkyz*|erik05$xHASl7+Yx
zwyk;7s3gl7suQ`Q39)%BlEWXQj3{C;g-31hN3&zWSn#LX`nNvO*eEo!Q&2dvZ|w9$
z#Y5Cr{|CTo<p$Caa;cFy==hGDi;6mgS9OEv(*#`j^dr!+E4HI`mJFx+-}5q|O~O9W
z24M)zZ?lY-tgn31CK^(|EO+a$vdnNzi!@eCEU;tEW2DGF!2(k7M@y5cU*2sTBZD0I
zc7*DQwKVZ0kn60ka|$yCWp7NqVi{}}&bc_3fOEXI`(#bswHf?#cT}7(QRm|irzUKx
zf9l;jbj|vlcy$y4;al|y!ol3$!`^1O)d4b_@Oc{X6<}H)9V;J7ggo2te7If=?luxD
z#45zxaH5Mit&pmeccy%K<ZCM~_zex=yl+Pm6LWis_P8L%C&?oWL9Z=VKxctk*#`Z3
ztZ?QdrZ4;xkhx6yjb*kV2EFr-^<rH5O(kNgZ~1xbV@|_O$t;M6kM%y|-6{LAVz73x
zcq}uqw^7kg|G=6<xWK5w%Fmk5%c@G{qfK<LJxpDL0E?R+-CQ|Xb4O>OsZzyGE`VU-
zym=m_^|ZM)N`2@-fh2jP$=NjaYTmTMsstq#PN&?d4-h?(q!><E4#1^<d1%%j=u)&t
zZS3t+ccAnpKO2~E0x|j~*OPMmCDq)C=N^)4%u9O~WgFcS8e>mzz3<PjHsrHBVjaVD
zyrpwTru-S?S;J)VLg`3QSYE^i4l)GOiXF`Avs;uOYZy{nGcF<>$N~JCyYZeFeYW|7
zU&;-b&3b=pO`dFm;*rR)^GRdyU8vL%COX*_G{Nr;R<MRxf@Wb4uK>-rLC9XkZiq7f
zK12QZ2n>$g?J+*~lCfm$IuHRL+tURIqtqPPNd6__byTrf#E<q8K@5hD_jQloY2pQ^
zD2ty{)nm2S;WDhUxhutP^=2*dgA=STv6j|4z4rGOQ<bp@>XNAWe8kpY?<b<!97-h<
z<AkyO7b=Nl%3f6=7`{0W#@HwmYcANv>)3>eI@Byk!SC$1{cj8+AC?`SG-?#4fN4wo
zckzR7b*S0fVDF}^O~V2lGSZ{QsZI^~biT`%sIrW=34{#c*}HnPioMoxh`f*l<ybb~
zLf;leOA&Te@7u8`SzI8kj~Au0BBo}Kue@>mob7PFWD6F0G)uDc5cC>x*S?!sq$j6A
z0v(g6!8-2dX_m{t2h@G~*{gnkqYP7FmdlrSqVyW%K^5pTEat;2gTWH_RL%9t)=b#N
z#&MRk6iMuzMyg{8_JG$#xlKd50p~4Qz!q`kJw5O*-HW9>hMm@)UJpmOTHi8wxQyC$
zXvJ+ADivjmkJUxIawN<rroY$(cEsrDBmpnNYFVrn%ple{I((k3x!1q1poiF8Vbx9_
zcqbL_h#C*b3XO+~DHdz5OY9_i1dz9WH)F+*32ZPIFl%(8HR08l-3G)LwP#twIKpTM
zC&T>kH!?DE^gQU<Up3btbD+vAHPMQ-kjP`{q4j^6kD(-^nF^IOS=6LkrU{~P8ve#)
zDIq<1%-<_($>|`&Xgdv7LUh|f&x*hcRWsPLb>m2EhcWv596UBVL#gN(JbzF$3n&Er
z10Dlw-DCgd5c(~R7Ip|{ita%t(1m-SEQwS)jOE>EkYSxpLCi0Lg%OKwkwDWZ29KES
zpu1iufhJt!oIC98c=KNjwx1?Y=~4bRIAkICWEqGS5TYYMXx$y*J=$|%68a%w*9Xy=
zn&!;LFyNSu7!?Q4AVFIpF=W;ftb86+s4O8_6V|n2P%H~v#i|J7o1GCa+0;=F;Rde|
z04?zuGHyo1WgWcTG`?fh4zUhK>8wqt!e1bKCmyYKfa^euzJWw!5JgK_#fCo@WQoOV
zf4+xF9pCOc_PSR;!<bmH&7aXY6TI4lLvr^8V41}*FMJDN+x<_|jCvn2m@GL4$+w%3
z+QeRTmV>0VDOZgT?XRK0QPgj&r5n};5sQ3%+k+1#a-c~V?bxZi*7Ir+K-izg+qFxp
z3|pw`WldLVy4J#<Z0sdfn8V^vqnM%^ka#D??@92@PW-yq*k{i@rJ&`ihRI+OV;h@5
z!kn~<vS<whsWkp~xN*WlBv|A#R>o0W&atdUhMhR^&9uX|7<|IRKX^+-JS+2LVu0A{
zDdUny4C+oD9dOG9$-;NgBGT9mWYPpw8LQa_Hzu*nN4>=m=@#KBzI~^7dVNqG+6VB(
z&M$pZ@G;-PdlX@jN%Wy@IGHlF({GwA2}c0$57Mj5uO@B2;LwD9i$QW4J1xr;(m{8N
zn}y-T2ZL-f=QC{%##|lV6OwfL5VsRcA?WK1#JG%g5RRPrA_as_)^1~)9s=AiVjvcy
zT1AbX6(ysHvi9PYoic~Bt2R2H{<XiOvGWhp+Ssm2e4E;OF~=1ajo&vayFTWn*NNNv
zyk|NeS}~YO%7Wet`3DK@Cv-1_R^graEn^dhGWdMF!Y>w1eheQQ%kXVX%56_?ZumnS
zsbznrWCo1O7TXDhQ=wKYwSt|oo$u5I&K>fJ{uf)4ps{{q!$>otLY(DcKweB?(}21n
zUJ4@25K4?9NHr<z<EH6F9};5>8Uic7hv^VUG+ysGN$87Xd<nxTY;=Qp3@ko0XAHw8
z8{%=-*sc7H;)=04@&q91N^e|Bv+AeF2vfv6_G%Fxmf^@G@bzXEg<KgLp(d6eX+F{P
zIn)!Fe>F|<z8JMV=RQnI@v-R+S^MkqG)-%a5+SKZR}LW+i5NBUcdbJr7>l1n_#L}U
zG-U>Y0dEd5g*P%Yp+!OPb&;q0E$r0w|ASjxdFKUe@b@yB;uGDxwm=dR!_XJQlS=)4
zBh*_h%y=%b7)CURK}ncs#AFV=gyt)DYUrwItfxM<Xl!-tHPqs1?DRhtC)o*BhnJO>
zc!)}ZGBxSX<VMQ(`xk~OaEz$(Iq#gL4-Ai3Ue@r|l2K!i`lD?upRlDCsdtE7T}Y)S
zYI5TazSqxpkg6aP^$J~#MTF2XFv>2J0}})=toZ{Sf&{QY3!`#n{CBv=>cVXOSd|Hd
zx+zll38@K{Yg51-^MdV#hrj&9{aNyjy;b<Tv7fyRfFG}G2_u!M`r^)&zbW*FcY(yA
zGPc;2ey8cqHM)u*S9d{j2({ILZF`0Rho>E~sTkFP3-EHG4tZ>8L8CO-<U%bfV*~56
z=tOL^3`rJMV$=LhvFM2zP%L(QGwxdvyHs_upsoxdH?|a%7NPgIaQRdx#U>lA2uSj`
z4F+$VCE|-T7kVdg4Nwgvi<9bCpP0w`48AU`k676NuuVFS_B2|wL^c?|1~9jn@5?Bv
zF|K>1RaS(F5M|hW5u167z;Vq9ZzsiiFge0AqY6&2{q!FwkJ_YaN>K7jNm&Oq&D`UC
z#CR|Rb`wzz`w@bVmVY^(hw*3<R<`xS6DY6Pf@6^uvY}`2SWxTUpDFo3@XW=3Mhjm0
zjSIiE7U<L4rwV0jZB3PNVLypEIldV79gj*niNSIQl*I7kbq8rc{q6OBi+73~0KsPG
z-r^q@p=^u&W)E92=p|yAILi+*>}ZxzW!^A!0|jTqx@FAkI|@{qBtHYpf;ZI=yEyJk
zXb^ORPeytmFNl<N>oKZ~T~|{7^yP*Wdz@4?es6=!^~F!d>Qf&5PPC<>;5)tMZwqxG
z6v%_ofihPj4}CDJ7$aU$+o2nxPfan0>w_}Vg*8mu6RZTgRgdQn*21pa(QVr!Yzv-j
z^8Ip~j=b$3kB@OQV7rfHw)ph9@~{m01c4Ha3)UMmzu2$=@1!vy(?ylAMOfdr7eUgr
z&k&cNv-k65$cQX5+q>J!FZ3ZKiFC$Rzs5=pH=z$@YqSw=Gs*K9D5b2R;_+v4S5_^A
z#Lo4tqPbQ|CGS`ZdBdX`7%!~hCo;$q8`z#f46MNNTG<Su39Gmazw?Kui=v3STRg6C
z6p$!H5{(d7yI99$r4I+-4b1iU5YC)D?`8se&w_3iwPweAzN*+X5&M&;uX9NFwX*}y
zAE-@1HiJQjO*)5B)*G5b`c;kSXL8`{7)?t-{QZbwM}r)4A}Uaz51AM86H8(rM$wn^
z1h1HDJUbQw!(np;dcrprX@#6N%=vARN<z<o@|4FKcan?rZoqi_aX~lpAy>3S3dzza
z1kkM=?{UAd@qAPBfOozHcr=>R*?<Ajum)WlV7&z%*Sz6C)sfSI2aY3lAnJG+xuJeK
zJgnh}614E43&YQmXqmYh+OJWFJk0#+5a!0TE*yD`gOm6BQNE)V9xz|P>GBfGtn#>m
zgWrS?>^uiFf}EjpA{^A#hIhA(7DAPcV{Lw;0x_Uj3@#LuX11D~{T=pD5-=YSXS2G(
zLdEWb@c)?tlX--|kx2e$I=Pa_AKE*Cf+6YW5ht{W87hO04i7`wgY36|Qd-97suXJs
zy88a}+c_A6XN)au+ZaK9?9>4h@d~2%fAjUE`pdy5x1cOO7<*uWz%$WYJs#e~d2GTE
zP#5dSJ~L3=)>J~~G?>J0Mj4}L`X$T|lQd=QdshL*R`hVN!!lL>0kzF0viOFqCu7&H
z!sbD95EAY&NU(Z;9?j}&t_VT-jtzd%5J<Gnj^S({k^hzj^$z+U`x{x>=>7a#{@VV=
z^7(s&P85Tj3utQal!YPZsqYTfg)L^R?GtGwZZ<(Mm<2+G7%j;07wa^|=Kwm6?Oh)~
zfXEg)pSP$og#Bn(YGO9%PpVCiiH&qA4{W9?M2~%r<=wHE9;kE=3&!e<;emx!&jrvp
zbELDzBsO|tE%{RW$VsgO2kg`KcrDj39=88B6M8$ikgNe1L1_NUo{uu3;1OdX2<Nl?
zxH(JuBuY{#+GAjUB4cCrBd&~I;Du3aXYTw!*sembD;d}@fRFrR!6#we>Gj(e)3EO_
zqfv|&+1F+uDkFw!v1wABW~Su0V-N{i98;25lY95c3<9GOhHU7ibbST)5&|#ukLnc`
z0bEK@wSQEz&KMA^I|rIVdTg0FD|1EICjBbBrm&z13Kje3Ipj>bI%O};C<EH;Z0!sM
zXKJmJmXD48+txoFM95X-Ys&^v%gvtG)@oBv;;U2Dp@n2h@51qf$k~XT7kFkndH<k^
z-F3}6FZc#8B3RGKxYX^)ULCL(TZ`|i$)Y_BOatR<SkA1a1gx3kiFmP{N#udWp25YT
z2`j@(FQ!;sB(D@7FMFc3lVjYTH;#T>dv5|H4`^b^pwa1XW8+XvPH=~_;2z+-D-U6h
z$nl<<fCbUoV$~*+lnCKodDgyB9V@c6(=nXm;u$P6TbAF3QEO~ghWfCX-qi?M_!0zT
zs1Jxt9pEAK$AKh^;r;c`PlJSMR&kH{GoQ9x2;3SA&A{rD3Gu{NCM=Ciy@JUU*GSV3
zeIp`KZ1G<LwIP8TrHQ;p`lgjC0}$Wdv5y+v;H>^)<9ZSwNh`KRc8%?lv09>Q&c8vg
z@z&uRu?sRz$c2&XYyniT@)QjUcSkSQ{20v}8rAWvyRU{JSc9yO%B8s@3^`d44%ALr
z*Z(*l3BW7-{fYP!TO;0V$-5hK@>fc+ymFu_!~OWq?98fno+?ZrJ<;~PlWxT3AKkzn
z0tHoR+uvbb=C_89R`>C#xPgW*dW5H=upzbuCKkSz&Nbiyz_?5-nq&EjfRB<Vr<4J7
zfkMNfK<gjN#Dg0WGduT(t0sDnanTot;XIZrR{A<~ns_Qfy)bTz2?f=<1ek`wI8y?x
z67#)1UavVh+j~ng@kaqgmL0@QvZw}tNm#);W@9jWHVC!1TPZ$x?`S<tUBd>|2N<F0
z`F(q%Y5np871DiLk~&<I@9?BO|Lti@BZFc$ZiLOi4NejSKK25I+Se^akxfBW2+VkG
zq6V5`kB!(HFU6*sun!S4Mk6r0Ph(Y8^;;TYS{I8`W@E>)dV=GiJZy8v@XfSI+PZb7
zmNJG0G5wJqBHXL;Z2{5cVM|a_G(p^fLPZt-il>YSSgyeUtYgL1f`ntVNKVY(;g*zd
z^4K(xa`*cY7Kca*v|$D)-z1jESEMIIDmcF4s45fm{+zcju+SbVl@h~sms!~30Iq-!
z>SnBYThExQlSVRSds?x;Zd86VJ#F_q3{ek^nNVgwzg7gYub6FUZDtsC|3HADb7X+)
zmx|<e!xG!4u?~CUdu7TAhZUN`y%(uhGcQARSN7ZJW(fqA9Oy}|3a#R5#hbijVvitF
zvG|Ma7<h|EYX8JvtaXxysLhs;)$o4QplkSS>y>*S)&Tn>x;Y@8K&!x?OhMA^X}2^Z
z5%y}j2K~APK&pb5ejOV4_<89Dqm)5F`SUum<L4dQSkaF-@Ts{KMy5h|7V`BZLm%6d
zsDAx2@AE5U9Hv!|^`$-)Uu}+v{aRU27Q#SXJXF*FEUK7PHz8qGwHfsjdK%$|@h#h~
zkE=e#LJWKAf=M>;EOtWZJcjGH9deMxf>sumNJGQ>4nNjr4pw7CoON)t>`qe=Jo<-C
z+&sdACAQ<gF0uVORzWBhIhR!*OP<l8r>Kd~*l-fu9GJYN6u?4PtTuw@oEszlSl%As
z)y@JEvo(}NhBpzXV^SjbCSZq<n<eu*_7yagOu^+<E@ALfT4n2-dJIU{j}PT*kcb$T
z$J)xkZ`@th)ktTq5y&7`0(mnkdNP&HD32HsgUj-zE~Kj?OT~75Mf;i?GiiU!TTc2{
zBWmSQr~s-U3$g2&_3Z|E{;L8$Mu7#R=i)t|TOAs2uz6-tfE^wWH`KsFL}L5IjKnYP
zVu5OYLt535jG=Q3Eg>lp20~oqBizU4UTeid1S%1>uRn$K?%`a&IWUAfoG@%<_u}f;
zj96$3)3j7?La$IQ2mgpOiprkXc9ndTjbVSh8SwW?i6Itxk|Fad!)@V68?y^Hftyhb
z-&BlHFSHHvm3_bSE|FWt7){%tsIPY#mu9&5SzM&TAto{=3AH;?%3v5uO)=ZD%XgrU
z&2CnaqEZFGJ6{hc$yOnMdiC{~Nuu!11d1>g5hT))U;7OiX7Hu)|E?WJqJGA3*dl|E
zkfnaf=l-px&jHh#s<)@e*eG~XAvMrO;p18EBgQs=1UQD-ORQTgw_EhI%$rlYX&vdq
z)v+f`0fTvUM|dzoyTzUj6V5UWk~NZ-{R|OXLJNi0{fw!sy6+Y{2(;@oNkG|?s%Z?j
zTHSOT^}x@!yHh^!X&wO#wl7rG&$gn7r7U4bSH>blOObtF8!}lKv8zyPs@1}#CKa_i
z3vXf(A|SO`xfgT(4X?H92)Y13-ay45IXqCbFG1#easYGZhB_n<<e+Lc<udOP2ro&G
zEeMusALF}@btPto)VLr599$y@3I$#&)_G_zG45eH#73tr(Lh;DC%5Bn#1x{8Ivme4
z5T6vHxbbzFK-@wL@u49zkX)hR=Un~;0g?k$1{>N39>qvp8LR#9yJ3GHzNTcNLm2pz
zT^s5>4x(f-39FvNF+}6et^Vgw2uqLhFNn()J3aI*a2&)sr3!-$#IuFfg?F5VA?Vd2
zaQ!^~ITHd3aeT|q<NJ)oH~D3QpbdTGm{i}SAS$tg7PYnx?YJpZA#DWM0GF1p!G>Ac
zbBH*|P8BlS`%ItQ!zpfznN@V4-)y{LVQjH1K2+PS{`d@yXQAsTdiD7a2QNbPA3o%S
zT5;RUFuAE?cTx3oNw@CG*b3$1w@r<kOjN{14Pm{M$7<Lc5{z+_a>n{P=#q9ANs7D$
z^mWF<Fv$!{Obhb3qaKZt<O<L)KCuM=?>xl4MTozCmeG8^gWu{G=v`=8&<a=_#C+Fg
z7JD>jn_Xk$!Wh_)*@4Lf97Yk<CwDT?TK=o|?YoDr4k78E_$4u(4kFjh8Vtf@y1Aqz
zjAvR>M&O8@3`^KA{D_R^<)wWpLBoH)$ME-s<x{B!lCSF&sxWVWo=uq5Uo7W>Vcde>
zNNJ}!(9R_6zSIj62+C6%yT^gjc5d{fbxkZ474q0!g51-veOWmYXTb$Ip9J&EehbEw
z-)_+gqAkshlCVH1kZ;1$J(!-VS*$rKWombmrWGx}<>3#3uev9?qT1Sep507yMW$4e
zJ6~u(VTD?>ajSlYiQVghZ5c;Im#WId<4}KR$1|3dWU<`VTW8T!F8F~*@%eD-NK{hn
zW52O02tCuJvJX18ZSJy_HM~PCSPmwQ4KA9)uz_IB%V``f$RjpE^P~`K0g@yp+*7cl
zG)WX|o`qe<K;DHTM-~chsf0&-)DS)m9v)o%M%Kx<Nl>^20O9b%jcNm4`Osk*W0l_;
z?MEza4&49sijDC_^V*#K@WKN>ut>7|LA|wv*9ogt@AcjDt&HZh`RzI-2nRhSR2hGB
zyN8{nexZ$iwG9^0L=zf))0Mt}hMG$3Yw>3#^b<!PNRr_nqt!WS+?Vi7#AtkUu~5A~
zSfGaqKx>#SY4c0enEwUaYKp$ZGasxSb|E7uCmSjbP~k+eN6bV%BIJ4!9R?Szu+J%2
z)6%ROIwliH#(qdK!3FPm*nXLYQ)GyCm0y;Bch!lRkp$=RGVf%(9(yLt>R@`csmzE#
zb%_Xi-7!FD5+F#@*V<D4L8{p3Nzk9S^AhdV9E1sDZ1B<xX2Hn~q2U(FaKklR`ID~4
z_a8_`qe$BnjLN@IW)1hGSy{W-T1w&gSN4zT##G)=FUAVm)AE635R1ZNAa(l@4vdQy
zq<T%)$R^j)YhS7ii-of>ba40|+{R*<XGU=el1I2<GLB{lq5Thne(>6QW9wy)QRs^s
zg*M0d12OFtqUTp*_`Ltv$2!n;XMl(vv4?+%&-RF66nAKs@aGzxhp7P#ny%^2EG~F6
zKm#T~o;Gu}lO3rc_$w}oxjpp$fJ%8R>V<j(h(zOw&||8=BsL~Kv=eC<eyDA)R{#&+
z*c!FZ1|cK`zny?6%b)4`L<sn!Y{NfA$$=y-z8W`Tr`@zqaSZQ4M)Ov!1Ou=31)*lh
zwd@k+_ymf988$GBi<wcV?|4w?Q-0>5*?OZqK>IaRG@>z2vP_OoX)L1Uh<AU+7!aUk
zO%kvB_1p8}BEF@SRSq|S5raOaEw+AlI?h+nK?Cq-H=!0WKxBdPV>uGQX+Q8#;4j1=
zR%~Ih@SwI_Hn!8c9-4G8km*UD{9*PdKZ&OwGzpgA0FV5Ywx9qq^#vrOpgYO_O3ce3
z@Ig?&?GMH+nAzba^Vme;LqT@Len5<cim#`MZusxXF|f8b@j9Pj{F^4+Pt}Xrj)aAZ
zf|U!M28eOV=fJ0+k996+Bt@wG#QKxY;A1i#h~g5DbO?@fbXj3(4-way#O7s&QY^cT
zaUR+!6CG80xLj1vfnDcKKEWJ>xG6sD;F-4DJ3Dx9qN2Kh>qlKoVk&fn*5(Szv*lQI
zP_Z2%dkjF}W<s%&(b+MQJ;M3`3?^PPN`%~mk$n3it5M)7DIi^D9HU^lY+5_9BwQ?F
z<3sqE+;!7I2#UdO6T?-k$tk3XmKBT%VDlrgEp{=#@9+l{P^-+kU`Rhg=UFG=>T&U@
zey6ecrH!c-!Z#>uDPozPVdDYJi)F}=5yO)vRAW?L9x#o%JE-Ee$tF6Pph6*mZA29T
zDT{U<{yV4rL4hMSMhfg>ok6%nr-7odD9yK9aJsPfgBFQw@xY8C@L|aqES@?RVk;Rr
z6ij^fkQ>7O7ViRnXeIXiA?Gz-qQS;o>S6>vw!XfRmk&@znZybT9!|6IWa<zBp$uEI
zSP{vuEA1a5PyBX6C0%gLVeMK(9D$<hbaaZb9r+Iz-`abD_WH@OAh^*J(h@b+>guku
zO>3`%{4LPoKVCk_ES*BNNeJz$`Wf673?r~9f9J4f4{QIl|Lctfw~C!dkatLQe@&0%
zmz4Jxv?+G2?$IeDAJnmkPcal;6AD=fxbiU^d=mC+ee~UEijyUnZJ0-hipYa$a2?5I
z<wh1gwweWr%Je<jt<b-}x&2CvZZ_iwVILrB7vpd@MJ3U&#KH~cp|{1JBbvqesXHQR
zE`#;q=rqA+F%F7w@Tg+KEgf03qdApb9uip=c5$H%ry>;|q4p8rG_K*1m&Y#ZHdaKM
z#Z8*dNhjT8XMjZdGmI_h-xjjdkYL>}Em<CmNUO(#xMQOd4)dd+ZpCCG=J0!jXbDY{
z54ZQWqK-cp#OC3Q7b<1TR1y49hsB~MA^;`xH)rV7r{BT?#^Uxy@B{<b$;GP8Qu#AL
z6I;u%MeEplhUO`u@M<*B9O^J4;9(z9!zTSD`NY~Hdts%NN4{7LW=7&mxm-;wI>^JM
zUEA>pTXGZ8s)K1h7%da{TQ{RWQoaP0d3iYs2<1Qw!*c}^G)pz5ym9OyOJKpy$}mH^
zGUVA_P%<8mkHF;_37pT>dhEqMQ!Iyf{*Xu!NUU`TdVw2;c=d&ny0RBk5WaD77>X*$
zBT>YN)pD-iYXzpDi{OTNFpiZ#VfEF4b_gE8;0|C48~u{HFdG<NuItZuUb!|Vv0+z#
z{YS+e8i7QcPB5x`8e^38P&imNNE#{Joqf>$9a1a?9XZA6y*)nG7mZy|U>HSRvEVfn
zG-+@ahylqPmq!$b<*d<xOAcWHG|X|*JDbuhEGA^6Btc5~#+0^<b&B{C;`<n)@7k6$
zST)?uxxz@W3yXpMb%UbCsvS4W)XG#C#vhJ>uJlh8*j4>gu-=0)ARUL>I2#J{BS=Ua
zt#o2}I1;(-++lnHcUOZ@PiXD7KZ7p&ydtH^U_yUx&Y=2p64j$kxUw?=JKHaF-Y}hI
zhJT_x*uA!~fETqWpTzGAndA{b*iX2?ShI=M=%nd&^u^j1?ZcXX-kEj|jBIAn#~L~>
z{@Da+M+Iyc+l<;T5S6t*V}S6#b?>CaKM0Rr9$6+hKDG@7KSUgY`Zce(*|D@%>e+^{
zGmS-jd*9-~g3JyEM4u0K4qqGZ0jXt<zOv%d3$IcY<DHQ&S$J}6Z*bv+)27<4?H;c`
z*50-fRLu^uu}8!HjR}Coy&$I1a`khKT@Y+@S&k$X*#$f=7@yR}D%oaR<RtRWhAkOV
zLH+|F9{R?Ct_519v@)tO_%#$2D1|`(Zz=nQ9&vm9(Y?MXM)-@M68$a4hbROegTxCX
z%#I0yeC&WNTmm)wEN!XtUhnj23s$f;LoUXtiy^(vs>c|#ZO3DuV}D8*{urs)=XS)-
z)F?EE@VOFyP@tw5tfqMA1p3xRDr^<l19NUNExUjdBh=s#Gop4lFtnawGG!u;e58X6
z--|5Nf}L=C#L7%9b_D;p<x%R*Zd&6wf@MPhT7Ysc!jLl7H~{i_q=vV^6umN$TbLA~
zqi6j+|I+~r!<-?@IO0$QCcKx$c~W>p?M1L*U)skCw>c&U1AhPUiT%E5sDkmo*`5%E
z4=6FrI0}-w2Lt|`_4~l^%PzZTr*Q7WTKsLFH1n1##_H`V&TmJoRx+;)m5P()nu1b~
zp9OyvTxG}4fI_0I>sY^{xx}wrUkLij2PQMc$M%Y_#|)+J8Z$N!&Oi5)SoH8vs^}4e
zIcS#)A+t(9=wt_r^ke7W;w*0Sg->ZOp^ZRCbzI2Qe1P4s*dJYnP5Uy(tVh%~)`#}T
z7J)tfp2aijOv?-j7gV$2ugRl$am+)zIWTFws0Ox&{T|CdhcK)QQbC*rqrKFi5jWl=
z@dWRx6BA;hou1BAf&cxpt2;uU?QubSRs%>Lcb-|i;2?Dh9t{BY&f-CG;g9lGDaRcu
zR%P<*LcN~W#qx5*ffj2gCd=Kui~sa%$+igLz!EsP({V(ccKDG^nUbZ^eq3SnWZ+ME
zEUGC8jh$&EQL&2;jN=HIfkjHeXaUi%HdIiW47WEtQTY1L(a~rwjj2_@8o^yM-@J){
zeJG4kwXW=AZN{}G;Ayz)WgS5i#0a#|^~V)pVIhK@N<6*sZ&hZP<s^ML{_y3U>*deF
z@eWJtBk7PQOZCMM+TO<bo&MOUq?@tUJPWnX4bV43n_zB9c*<IA4<87pa%}ArMcM8!
zhzvWmz#Lt`FxHiFz}cF_`D49;4Z0jUjak{OA-d=HOP>J&kPw^rV~SUl#DXDr4R8_O
zC<CZ8j8>@yS4KyAV+jfq3ltNhrN}&KtoijfOHEUM#-fB7Atb6U&|eo&<{LfWn<Lp+
zLINCkhAcPGaFt^0scW7~*cz)ZCW9_QgVm0ZyS2mNX~70C7B2<(aD)~~jPi);@Tb$w
z1sdTG4kD@AU$=qCitK61h`R!23?Bo_p0I)Pu*lFW`uL00(CBCrgY=_5+I53>_H)?W
z83|Ug&uRVb$i*bI$f6S!j3&OUCnQp%WsRsF1g#N!J^ysE@s*>rD^4f>VO0>7DYQ|f
z-kkT;j4Zaga7fJg3_&k+Jrim0Jxpv`UNjay#8w|GU8m)UIzdLa927n^KxD(2$mmC{
zGsZqUV+ce!j(t$vFm1xGQoqKg9K7c&_9W-FlV|(acAN3jUT>;>y!@w28RvvCPTB#m
z`GH)k#V-oW*sYtyVjIJA3phj&LTI2g+%T`$H@%}iMa4)kBZOaTHx)QSbu7^89`|tc
z4PP=bJ-iYVVhj(6^e$Fcq_GIP*=7zJXsBU-rbIx{Ltn^Z6KL$ib&c`sNe8UV?M5n5
zcErDO)t-mVU0!Jx;9C%OW%Y0@UsE`*fgw9p&k=kgR(s{`$tDY-le!~|@kmg{XZsj}
zSBLEaIot06=-4o|`CO)5n{B=(&J;vd)b|W;uz;Rk6jMX3o{mfW563x+QCza&+}h;&
z%tqjUa5H8U2)aljvD}&{bH2%yY1qW45k0OV<TXYnZ;`g&_6Iabc(hjY;I=bjLcfL(
zEd@p#;wbql8=0o=)*j^bYmItod_{NSPCi&_MH=lxW}HQ9Y}05sOsGXGe_d{b%RxL>
zU5Sl1&>IAeSX&$DXdP2y9)%U6H?&?=&XTILJnFvQbd?1R>1OFfmwdv=HUyX2-2fRb
zt25X#EYZHO)OvTCL!K(dm+zi}QPvKVHTO1jN<1^DLv9O)v@G;c_5P_biWGMt#h27M
z-q^hs3Ja56i-}h(_3{rG#g?r!nf3iicU99eLny>=8jLZ3Nqc844Kw769S-n*6v$!k
z*rw2E<hRpkId)N+1E`EO9p!dczs!iP;rI?~ixGUE$Tai->?^rA#JESA!K}@<aAt#w
z9Qav*8a7|Gql<ES|1m`eT$#TokqKk0k%iD=G{K@Ue3|AV<p9Yaczx_gl<%)-)9bf(
zzec3?Bvr1sF^|wy@Wu}carb^fGiOdq!XVH?+~tyAVRY6vUREGwYYLoGuqQ%CXdGiH
tiBjyGAu-9Uue~@f1(P+8?lw*P{{T4L2pS!BE=2$U002ovPDHLkV1fsqYFq#S

literal 0
HcmV?d00001

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingLogo.tsx b/frontend/src/app/components/OnboardingV3/OnboardingLogo.tsx
new file mode 100644
index 00000000..f9c1d034
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/OnboardingLogo.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+// The OpenSwarm octopus, our actual brand mark. A raster (its coral already sits right next to the
+// default accent), so unlike the old asterisk it wears its own color rather than the picked gradient.
+const OnboardingLogo: React.FC<{ size: number; style?: React.CSSProperties }> = ({ size, style }) => (
+  <img
+    src="./logo.png"
+    width={size}
+    height={size}
+    alt="OpenSwarm"
+    draggable={false}
+    style={{ display: 'block', objectFit: 'contain', ...style }}
+  />
+);
+
+export default OnboardingLogo;
diff --git a/frontend/src/app/components/OnboardingV3/Starburst.tsx b/frontend/src/app/components/OnboardingV3/Starburst.tsx
deleted file mode 100644
index 9acd5187..00000000
--- a/frontend/src/app/components/OnboardingV3/Starburst.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-// Claude's signature asterisk mark, drawn as 8 rounded rays around a hollow center; gradient runs hover->pressed so it wears whatever accent the user picked.
-const Starburst: React.FC<{ size: number; from: string; to: string }> = ({ size, from, to }) => {
-  const id = React.useId();
-  return (
-    <svg width={size} height={size} viewBox="-50 -50 100 100" style={{ display: 'block' }}>
-      <defs>
-        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor={from} />
-          <stop offset="100%" stopColor={to} />
-        </linearGradient>
-      </defs>
-      {Array.from({ length: 8 }, (unused, i) => (
-        <rect key={i} x={-7} y={-46} width={14} height={34} rx={7} fill={`url(#${id})`} transform={`rotate(${i * 45})`} />
-      ))}
-    </svg>
-  );
-};
-
-export default Starburst;
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
index 408f085f..8ee41e18 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Check } from 'lucide-react';
 import { INTEGRATIONS } from '@/app/pages/Tools/integrations';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import BeatShell from './BeatShell';
@@ -29,9 +28,11 @@ const BeatApps: React.FC<{
       c={c}
       title="Choose the apps you live in."
       body="I'll shape your starting canvas around them."
-      nextLabel={picks.length > 0 ? 'Next' : 'Skip for now'}
+      nextLabel="Next"
       onNext={onNext}
       onBack={onBack}
+      secondaryLabel="Skip for now"
+      onSecondary={onNext}
     >
       <motion.div
         initial={{ opacity: 0, y: 16, scale: 0.97 }}
@@ -48,9 +49,10 @@ const BeatApps: React.FC<{
           ))}
           <span style={{ marginLeft: 8, fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
         </div>
-        <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(108px, 1fr))', gap: 11 }}>
+        <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(118px, 1fr))', gap: 12 }}>
           {entries.map((entry, i) => {
             const picked = picks.includes(entry.id);
+            // Arc's picked tile lights up in the APP's own brand color, not one shared accent.
             return (
               <motion.button
                 key={entry.id}
@@ -59,21 +61,17 @@ const BeatApps: React.FC<{
                 animate={{ opacity: 1, scale: 1 }}
                 transition={{ type: 'spring', stiffness: 360, damping: 24, delay: 0.28 + i * 0.035 }}
                 style={{
-                  position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9,
-                  padding: '16px 8px 12px', borderRadius: c.radius.md,
-                  border: `1.5px solid ${picked ? c.accent.primary : c.border.medium}`,
-                  background: c.bg.surface, cursor: 'pointer', fontFamily: 'inherit',
-                  boxShadow: picked ? `0 0 0 3px ${c.accent.primary}22` : c.shadow.sm,
-                  transition: 'border-color 140ms ease, box-shadow 140ms ease',
+                  position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 9,
+                  padding: '18px 8px', borderRadius: 16,
+                  border: `2px solid ${picked ? entry.color : 'transparent'}`,
+                  background: picked ? `${entry.color}14` : c.bg.secondary,
+                  cursor: 'pointer', fontFamily: 'inherit',
+                  boxShadow: picked ? `0 0 0 4px ${entry.color}22` : 'none',
+                  transition: 'border-color 150ms ease, box-shadow 150ms ease, background 150ms ease',
                 }}
               >
-                {picked && (
-                  <span style={{ position: 'absolute', top: 6, right: 6, width: 17, height: 17, borderRadius: 999, background: c.accent.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                    <Check size={11} color="#fff" />
-                  </span>
-                )}
-                <span style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{entry.icon}</span>
-                <span style={{ fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
+                <span style={{ width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{entry.icon}</span>
+                <span style={{ fontSize: '0.76rem', fontWeight: 500, color: picked ? c.text.primary : c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
               </motion.button>
             );
           })}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index df405342..c8ce1aa2 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -1,11 +1,13 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { motion } from 'framer-motion';
-import { useThemeAccent } from '@/shared/styles/ThemeContext';
-import { Dices } from 'lucide-react';
+import { Check, Copy, Dices, Download, Share } from 'lucide-react';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import { hexToHsl, hslToHex } from '@/shared/styles/claudeTokens';
+import { useThemeAccent } from '@/shared/styles/ThemeContext';
 import type { ProviderIdentity } from '../onboardingV3Api';
-import Starburst from '../Starburst';
-import BeatShell from './BeatShell';
+import BeatShell, { ONBOARDING_SANS } from './BeatShell';
+
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
 
 const EPITHETS = [
   'METHODICAL PERFECTIONIST', 'SAVORY ARCHIVIST', 'MIDNIGHT ORCHESTRATOR', 'GENTLE MAXIMALIST',
@@ -21,80 +23,255 @@ function nameFromIdentity(identity: ProviderIdentity[]): string {
   return letters.charAt(0).toUpperCase() + letters.slice(1, 12);
 }
 
-// The Arc Card moment: onboarding ends with an identity artifact, not a settings screen. Name is editable in place, the epithet re-rolls, and the leaf wears the accent they just picked.
+// The card's leaf takes the two ends of the user's picked theme gradient (or a dark->light pair
+// derived from the single accent), so the artifact literally wears the theme they just chose.
+function leafStops(gradient: string[] | null, base: string, c: ClaudeTokens): [string, string] {
+  if (gradient && gradient.length >= 2) return [gradient[0], gradient[gradient.length - 1]];
+  const hsl = hexToHsl(base);
+  if (!hsl) return [c.accent.pressed, c.accent.primary];
+  const dark = hslToHex({ h: hsl.h, s: Math.min(1, hsl.s * 1.02), l: Math.max(0.34, hsl.l - 0.1) });
+  const light = hslToHex({ h: (hsl.h + 0.015) % 1, s: Math.max(0.55, hsl.s * 0.92), l: Math.min(0.74, hsl.l + 0.18) });
+  return [dark, light];
+}
+
+// One accent-hued ink dark enough to read on the cream card, for every bit of card type.
+function readableInk(base: string, c: ClaudeTokens): string {
+  const hsl = hexToHsl(base);
+  if (!hsl) return c.accent.pressed;
+  return hslToHex({ h: hsl.h, s: Math.max(0.5, hsl.s), l: Math.min(0.42, hsl.l) });
+}
+
+// The Arc Card moment: onboarding ends with an identity artifact, not a settings screen. A gradient
+// leaf wearing the picked theme, the name + a re-rollable epithet, and a real PNG you can save,
+// copy, or share, an artifact you show off has to be takeable.
 const BeatCard: React.FC<{
   c: ClaudeTokens;
   identity: ProviderIdentity[];
   onFinish: (name: string | null) => void;
   onBack: () => void;
 }> = ({ c, identity, onFinish, onBack }) => {
-  const { gradient } = useThemeAccent();
+  const { accent, gradient } = useThemeAccent();
   const [name, setName] = useState(() => nameFromIdentity(identity));
   const seed = useMemo(() => Math.floor(Math.random() * EPITHETS.length), []);
   const [roll, setRoll] = useState(0);
   const epithet = EPITHETS[(seed + roll) % EPITHETS.length];
   const today = useMemo(() => new Date().toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }), []);
+  const [tilt, setTilt] = useState<{ rx: number; ry: number; mx: number; my: number } | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const baseHex = (gradient && gradient[0]) || accent || c.accent.primary;
+  const [dark, light] = leafStops(gradient, baseHex, c);
+  const ink = readableInk(baseHex, c);
+
+  const drawCard = useCallback(async (): Promise<HTMLCanvasElement> => {
+    const W = 580;
+    const H = 800;
+    const cv = document.createElement('canvas');
+    cv.width = W;
+    cv.height = H;
+    const ctx = cv.getContext('2d');
+    if (!ctx) return cv;
+    ctx.fillStyle = '#FCFBF5';
+    ctx.beginPath();
+    ctx.roundRect(0, 0, W, H, 36);
+    ctx.fill();
+    // The leaf: three round corners + one soft point at bottom-right, wearing the theme gradient.
+    const grad = ctx.createLinearGradient(48, 44, 532, 400);
+    grad.addColorStop(0, dark);
+    grad.addColorStop(1, light);
+    ctx.fillStyle = grad;
+    ctx.beginPath();
+    ctx.roundRect(48, 44, W - 96, 340, [150, 150, 12, 150]);
+    ctx.fill();
+    // Small brand mark in the corner, tinted with the same gradient (source-in keeps the octopus alpha).
+    const logo = new Image();
+    logo.src = './logo.png';
+    await new Promise<void>((res) => { logo.onload = () => res(); logo.onerror = () => res(); });
+    if (logo.naturalWidth > 0) {
+      const lc = document.createElement('canvas');
+      lc.width = 72;
+      lc.height = 72;
+      const lctx = lc.getContext('2d');
+      if (lctx) {
+        lctx.drawImage(logo, 0, 0, 72, 72);
+        lctx.globalCompositeOperation = 'source-in';
+        const lg = lctx.createLinearGradient(0, 0, 72, 72);
+        lg.addColorStop(0, dark);
+        lg.addColorStop(1, light);
+        lctx.fillStyle = lg;
+        lctx.fillRect(0, 0, 72, 72);
+        ctx.drawImage(lc, 34, 30, 42, 42);
+      }
+    }
+    ctx.fillStyle = ink;
+    ctx.font = `800 58px ${ONBOARDING_SANS}`;
+    ctx.fillText(name.trim() || 'Your name', 52, 476);
+    ctx.font = `600 21px ${MONO}`;
+    ctx.fillText(epithet.split('').join(' '), 54, 520);
+    // Bottom-left stamp: OPENSWARM | hatch | date, outlined; bottom-right OPEN / SWARM lockup.
+    const stampText = `OPENSWARM     ${today.toUpperCase()}`;
+    ctx.font = `600 18px ${MONO}`;
+    const stampW = ctx.measureText(stampText).width + 30;
+    ctx.strokeStyle = `${ink}88`;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.roundRect(48, H - 96, stampW, 42, 8);
+    ctx.stroke();
+    ctx.fillStyle = ink;
+    ctx.fillText(stampText, 63, H - 68);
+    ctx.textAlign = 'right';
+    ctx.font = `800 19px ${ONBOARDING_SANS}`;
+    ctx.fillText('OPEN', W - 48, H - 84);
+    ctx.fillText('SWARM', W - 48, H - 62);
+    ctx.textAlign = 'left';
+    return cv;
+  }, [name, epithet, today, dark, light, ink]);
+
+  const saveCard = useCallback(() => {
+    void drawCard().then((cv) => {
+      const a = document.createElement('a');
+      a.download = 'swarm-card.png';
+      a.href = cv.toDataURL('image/png');
+      a.click();
+    });
+  }, [drawCard]);
+
+  const copyCard = useCallback(() => {
+    void drawCard().then((cv) => {
+      cv.toBlob((blob) => {
+        if (!blob || !navigator.clipboard || typeof ClipboardItem === 'undefined') return;
+        void navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).then(() => {
+          setCopied(true);
+          window.setTimeout(() => setCopied(false), 1600);
+        });
+      });
+    });
+  }, [drawCard]);
+
+  // Native share sheet when the platform offers one (Arc's first card action); quietly absent otherwise.
+  const canShare = typeof navigator.canShare === 'function' && typeof File !== 'undefined'
+    && navigator.canShare({ files: [new File([''], 'swarm-card.png', { type: 'image/png' })] });
+  const shareCard = useCallback(() => {
+    void drawCard().then((cv) => {
+      cv.toBlob((blob) => {
+        if (!blob) return;
+        const file = new File([blob], 'swarm-card.png', { type: 'image/png' });
+        void navigator.share({ files: [file], title: 'My Swarm Card' }).catch(() => {});
+      });
+    });
+  }, [drawCard]);
+
+  // Arc's card actions: quiet icon-only buttons under the card on the dark stage.
+  const chip = (label: string, Icon: typeof Dices, onClick: () => void): React.ReactElement => (
+    <button
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34,
+        border: 'none', background: 'transparent', color: 'rgba(255,255,255,0.62)',
+        cursor: 'pointer', borderRadius: 8, transition: 'color 140ms ease',
+      }}
+      onMouseEnter={(e) => { e.currentTarget.style.color = 'rgba(255,255,255,0.95)'; }}
+      onMouseLeave={(e) => { e.currentTarget.style.color = 'rgba(255,255,255,0.62)'; }}
+    >
+      <Icon size={17} />
+    </button>
+  );
 
   return (
     <BeatShell
       c={c}
-      title={name ? `Welcome to OpenSwarm, ${name}.` : 'Welcome to OpenSwarm.'}
-      body="Here's your Swarm Card. Show it off or keep it to yourself."
+      title={name ? `Welcome to OpenSwarm, ${name}` : 'Welcome to OpenSwarm'}
+      body={"Here's your Swarm Card. Show it off to the world or keep it to yourself.\n\nAnd with that, you're ready to run your new OS."}
       nextLabel="Get started"
       onNext={() => onFinish(name.trim() || null)}
       onBack={onBack}
+      stageDark
     >
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, perspective: 900 }}>
         <motion.div
           initial={{ opacity: 0, y: 22, rotate: -3, scale: 0.94 }}
           animate={{ opacity: 1, y: 0, rotate: 0, scale: 1 }}
           transition={{ type: 'spring', stiffness: 200, damping: 22, delay: 0.25 }}
-          style={{
-            width: 290, height: 400, borderRadius: 18, background: '#FCFBF5',
-            boxShadow: '0 24px 60px rgba(0,0,0,0.28)', padding: '26px 24px', boxSizing: 'border-box',
-            display: 'flex', flexDirection: 'column', position: 'relative',
-          }}
         >
-          <div style={{ alignSelf: 'flex-start', marginLeft: -8, marginTop: -4 }}>
-            <Starburst size={158} from={gradient?.[0] ?? c.accent.hover} to={gradient?.[gradient.length - 1] ?? c.accent.pressed} />
-          </div>
-          <input
-            value={name}
-            onChange={(e) => setName(e.target.value.slice(0, 18))}
-            placeholder="Your name"
-            style={{
-              marginTop: 26, border: 'none', outline: 'none', background: 'transparent',
-              fontSize: '1.7rem', fontWeight: 800, color: c.accent.pressed, fontFamily: 'inherit',
-              width: '100%', padding: 0,
+          <div
+            onMouseMove={(e) => {
+              const r = e.currentTarget.getBoundingClientRect();
+              const px = (e.clientX - r.left) / r.width;
+              const py = (e.clientY - r.top) / r.height;
+              setTilt({ rx: -(py - 0.5) * 13, ry: (px - 0.5) * 13, mx: px * 100, my: py * 100 });
             }}
-          />
-          <div style={{ marginTop: 6, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.68rem', letterSpacing: '0.14em', color: c.accent.primary }}>
-            {epithet}
-          </div>
-          <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <span style={{
-              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.6rem', letterSpacing: '0.1em',
-              color: c.accent.primary, border: `1px solid ${c.accent.primary}55`, borderRadius: 4, padding: '2px 7px',
-            }}>
-              OPENSWARM · {today.toUpperCase()}
-            </span>
-            <span style={{ fontSize: '0.6rem', letterSpacing: '0.06em', color: c.accent.pressed, fontWeight: 700, textAlign: 'right', lineHeight: 1.35 }}>
-              OPEN<br />SWARM
-            </span>
+            onMouseLeave={() => setTilt(null)}
+            style={{
+              width: 300, height: 414, borderRadius: 18, background: '#FCFBF5',
+              border: '1px solid rgba(0,0,0,0.05)',
+              boxShadow: tilt ? '0 30px 70px rgba(0,0,0,0.34)' : '0 24px 60px rgba(0,0,0,0.28)',
+              padding: '22px 22px 20px', boxSizing: 'border-box',
+              display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
+              transform: tilt ? `rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)` : 'rotateX(0deg) rotateY(0deg)',
+              transition: tilt ? 'box-shadow 200ms ease' : 'transform 320ms ease, box-shadow 200ms ease',
+              willChange: 'transform',
+            }}
+          >
+            {/* Cursor-following shine, the ProfileCard glare. */}
+            <div style={{
+              position: 'absolute', inset: 0, pointerEvents: 'none', opacity: tilt ? 1 : 0, transition: 'opacity 250ms ease',
+              background: tilt ? `radial-gradient(280px circle at ${tilt.mx}% ${tilt.my}%, rgba(255,255,255,0.45), transparent 62%)` : undefined,
+            }} />
+            {/* Small brand mark in the corner, wearing the same theme gradient (masked octopus). */}
+            <div style={{
+              position: 'absolute', top: 14, left: 16, width: 22, height: 22, zIndex: 3,
+              WebkitMaskImage: 'url(./logo.png)', maskImage: 'url(./logo.png)',
+              WebkitMaskSize: 'contain', maskSize: 'contain',
+              WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
+              WebkitMaskPosition: 'center', maskPosition: 'center',
+              background: `linear-gradient(138deg, ${dark}, ${light})`,
+            }} />
+            {/* The leaf: three round corners + one soft point, bottom-right, wearing the theme gradient. */}
+            <div style={{
+              width: '100%', height: 152, flexShrink: 0,
+              borderRadius: '47% 47% 8px 47%',
+              background: `linear-gradient(138deg, ${dark} 0%, ${light} 100%)`,
+            }} />
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value.slice(0, 18))}
+              placeholder="Your name"
+              style={{
+                marginTop: 20, border: 'none', outline: 'none', background: 'transparent',
+                fontSize: '1.7rem', fontWeight: 800, color: ink, fontFamily: 'inherit',
+                width: '100%', padding: 0,
+              }}
+            />
+            <div style={{ marginTop: 5, fontFamily: MONO, fontSize: '0.66rem', letterSpacing: '0.14em', color: ink }}>
+              {epithet}
+            </div>
+            <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+              <span style={{
+                display: 'inline-flex', alignItems: 'center', gap: 7,
+                fontFamily: MONO, fontSize: '0.56rem', letterSpacing: '0.08em',
+                color: ink, border: `1px solid ${ink}55`, borderRadius: 5, padding: '3px 7px',
+              }}>
+                OPENSWARM
+                <span style={{
+                  width: 11, height: 13, borderRadius: 1,
+                  background: `repeating-linear-gradient(45deg, ${ink} 0 1.6px, transparent 1.6px 3.6px)`,
+                }} />
+                {today.toUpperCase()}
+              </span>
+              <span style={{ fontSize: '0.6rem', letterSpacing: '0.06em', color: ink, fontWeight: 800, textAlign: 'right', lineHeight: 1.35 }}>
+                OPEN<br />SWARM
+              </span>
+            </div>
           </div>
         </motion.div>
-        <motion.button
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.7 }}
-          onClick={() => setRoll((r) => r + 1)}
-          style={{
-            display: 'flex', alignItems: 'center', gap: 7, border: 'none', background: 'transparent',
-            color: c.text.tertiary, fontSize: '0.82rem', cursor: 'pointer', fontFamily: 'inherit', padding: 4,
-          }}
-        >
-          <Dices size={15} /> Re-roll the title
-        </motion.button>
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.7 }} style={{ display: 'flex', gap: 6 }}>
+          {chip('Re-roll the title', Dices, () => setRoll((r) => r + 1))}
+          {canShare && chip('Share', Share, shareCard)}
+          {chip('Save as image', Download, saveCard)}
+          {chip(copied ? 'Copied' : 'Copy to clipboard', copied ? Check : Copy, copyCard)}
+        </motion.div>
       </div>
     </BeatShell>
   );
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
index 84e047f9..b6263170 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -1,18 +1,40 @@
 import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { ArrowLeft } from 'lucide-react';
-import { useThemeAccent } from '@/shared/styles/ThemeContext';
+import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import { GRAIN_URL } from '@/shared/styles/grainTexture';
 
-// Film grain as a data URI so the CSP never phones out; opacity keeps it a texture, not noise.
-export const GRAIN_URL = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")";
+// Arc's torn seam as a SMOOTH wave: a sine sampled densely enough that the polygon reads as a
+// soft ripple (no sharp points), ~18px wavelength, 6px swell.
+const WAVE_PERIODS = 52;
+const WAVE_SAMPLES = WAVE_PERIODS * 8;
+const ZIGZAG_CLIP = `polygon(0 0, ${Array.from({ length: WAVE_SAMPLES + 1 }, (unused, i) => {
+  const inset = 3 + 3 * Math.sin((i / WAVE_SAMPLES) * WAVE_PERIODS * 2 * Math.PI);
+  return `calc(100% - ${inset.toFixed(2)}px) ${((i / WAVE_SAMPLES) * 100).toFixed(3)}%`;
+}).join(', ')}, 0 100%)`;
 
-// Arc's torn seam: the dark copy panel ends in a zigzag bite instead of a straight border.
-const ZIGZAG_CLIP = `polygon(0 0, 100% 0, ${Array.from({ length: 30 }, (unused, i) => `calc(100% - 12px) ${i * 3.33 + 1.66}%, 100% ${i * 3.33 + 3.33}%`).join(', ')}, 0 100%)`;
+// Arc's electric indigo CTA: onboarding buttons are brand-colored, not user-accent (the accent doesn't exist until the theme beat).
+export const CTA_BLUE = '#4b48f8';
+// Arc sets its onboarding in a heavy grotesque; the app's token "sans" actually falls back to a
+// serif (Anthropic Sans isn't bundled), so the flow pins a real sans stack.
+export const ONBOARDING_SANS = '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif';
+// Arc's onboarding-window backdrop: cold azure light from the top-left, deep indigo mid, a WARM
+// violet-magenta glow rising from the bottom-right corner, always grained.
+export const ARC_BLUE_BG = [
+  'radial-gradient(110% 95% at 92% 100%, rgba(186, 70, 235, 0.55) 0%, rgba(146, 60, 244, 0.28) 34%, transparent 62%)',
+  'radial-gradient(120% 100% at 6% 4%, rgba(148, 178, 255, 0.85) 0%, rgba(110, 135, 255, 0.35) 38%, transparent 66%)',
+  'linear-gradient(152deg, #5f7bff 0%, #4a4ff6 44%, #4338ef 68%, #6f3af3 100%)',
+].join(', ');
+// Arc's neutral stage: warm mauve-gray under heavy grain (their import beat), until the user picks a color.
+const STAGE_MAUVE = '#a8a5b3';
 
 const SPRING = { type: 'spring' as const, stiffness: 260, damping: 26 };
 
-// One idea per room: dark copy panel left (torn edge, grain, staggered spring+blur copy), live artifact on a grained stage right. Copy never moves after it lands; only the artifact is alive.
+// One idea per room, staged EXACTLY like Arc: the whole window is grained electric blue, a rounded
+// split card floats centered in it, dark copy panel (torn right edge, grain, staggered spring+blur
+// copy, bottom-pinned CTA) beside a heavily grained stage. `wide` = Arc's account layout instead:
+// edge-to-edge 50/50 split, centered copy, no floating card.
 const BeatShell: React.FC<{
   c: ClaudeTokens;
   title: string;
@@ -22,11 +44,31 @@ const BeatShell: React.FC<{
   onNext: () => void;
   onBack?: () => void;
   children: React.ReactNode;
-}> = ({ c, title, body, nextLabel, nextDisabled, onNext, onBack, children }) => {
-  // Arc's post-theme screens wear the user's color everywhere; the stage drinks the picked stops (or accent) instead of staying flat paper.
+  wide?: boolean;
+  logo?: React.ReactNode;
+  stageDark?: boolean;
+  secondaryLabel?: string;
+  onSecondary?: () => void;
+}> = ({ c, title, body, nextLabel, nextDisabled, onNext, onBack, children, wide, logo, stageDark, secondaryLabel, onSecondary }) => {
+  // Once the user has picked stops the stage wears them (our theme beat repaints live); before that it stays Arc-mauve.
   const { accent, gradient } = useThemeAccent();
-  const stops = gradient ?? (accent ? [accent] : [c.accent.primary]);
-  const stageWash = `linear-gradient(115deg, ${stops.map((hex, i) => `${hex}2e ${stops.length > 1 ? (i / (stops.length - 1)) * 100 : 100}%`).join(', ')}), ${c.bg.secondary}`;
+  const { washOpacity, grain } = useThemeWash();
+  const stops = gradient ?? (accent ? [accent] : null);
+  // Picked color reads VIVID on the stage (alpha floor over near-white), not muddied into the mauve.
+  const washAlpha = Math.round(Math.max(0.5, washOpacity) * 255).toString(16).padStart(2, '0');
+  const stageBg = stageDark
+    ? '#262320'
+    : stops
+      ? `linear-gradient(115deg, ${stops.map((hex, i) => `${hex}${washAlpha} ${stops.length > 1 ? (i / (stops.length - 1)) * 100 : 100}%`).join(', ')}), #edebe7`
+      : STAGE_MAUVE;
+  // Arc post-theme: the CTA flips to cream (dark label) and the window backdrop wears the user's
+  // stops under a soft white veil; before any pick both stay brand blue.
+  const themed = !!stops;
+  const ctaBg = themed ? '#F5EFDF' : CTA_BLUE;
+  const ctaFg = themed ? '#232320' : '#fff';
+  const backdrop = stops
+    ? `linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)), linear-gradient(160deg, ${stops.map((hex, i) => `${hex} ${stops.length > 1 ? (i / (stops.length - 1)) * 100 : 100}%`).join(', ')})`
+    : ARC_BLUE_BG;
   // Zen steal: controls stay inert until the entrance lands so a double-click from the prior beat can't fire them.
   const [armed, setArmed] = useState(false);
   useEffect(() => {
@@ -40,66 +82,118 @@ const BeatShell: React.FC<{
     transition: { ...SPRING, delay },
   });
 
-  return (
-    <div style={{ display: 'flex', width: '100%', height: '100%', background: c.bg.secondary }}>
-      <div
-        style={{
-          // vw (not %, which resolves oddly in the flex child) keeps the copy panel ~36% instead of a thin strip on ultra-wide screens, so the stage never balloons into a beige void.
-          position: 'relative', width: 'clamp(360px, 36vw, 600px)', flexShrink: 0, display: 'flex', flexDirection: 'column',
-          justifyContent: 'center', padding: '48px 46px 48px 44px', boxSizing: 'border-box',
-          background: c.bg.inverse, color: c.text.inverse, clipPath: ZIGZAG_CLIP,
-        }}
-      >
-        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.1, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
-        {onBack && (
-          <motion.button
-            {...enter(0.05)}
-            onClick={() => armed && onBack()}
-            style={{
-              display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
-              marginBottom: 18, padding: 0, border: 'none', background: 'transparent',
-              color: c.text.inverse + '77', fontSize: '0.85rem', cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            <ArrowLeft size={14} /> Back
-          </motion.button>
-        )}
-        <motion.h1 {...enter(0.12)} style={{ margin: 0, fontSize: 'clamp(1.9rem, 3.2vw, 2.6rem)', lineHeight: 1.12, fontWeight: 700, letterSpacing: '-0.01em' }}>
-          {title}
-        </motion.h1>
-        <motion.p {...enter(0.26)} style={{ margin: '16px 0 0', fontSize: '0.98rem', lineHeight: 1.55, color: c.text.inverse + '99', maxWidth: '34ch' }}>
-          {body}
-        </motion.p>
-        <motion.div {...enter(0.42)} style={{ marginTop: 40 }}>
+  const panel = (
+    <div
+      style={{
+        position: 'relative', flexShrink: 0, display: 'flex', flexDirection: 'column',
+        width: wide ? '50%' : 'clamp(300px, 36%, 460px)',
+        justifyContent: wide ? 'center' : 'flex-start',
+        alignItems: wide ? 'center' : 'stretch',
+        textAlign: wide ? 'center' : 'left',
+        padding: wide ? '48px 64px' : '56px 40px 36px 44px', boxSizing: 'border-box',
+        // Fixed white-on-near-black: the panel is ALWAYS dark, so it never reads theme tokens (dark mode used to turn the copy invisible).
+        background: '#1e1e1d', color: '#ffffff', clipPath: ZIGZAG_CLIP,
+        fontFamily: ONBOARDING_SANS,
+        // Overlap the stage by one tooth-depth (+ sit above it) so the torn edge bites INTO the stage color instead of leaving a dead paper gap.
+        marginRight: -6, zIndex: 1,
+      }}
+    >
+      <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.07, pointerEvents: 'none', mixBlendMode: 'overlay' }} />
+      {onBack && (
+        <motion.button
+          {...enter(0.05)}
+          onClick={() => armed && onBack()}
+          style={{
+            display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
+            marginBottom: 18, padding: 0, border: 'none', background: 'transparent',
+            color: 'rgba(255,255,255,0.47)', fontSize: '0.85rem', cursor: 'pointer', fontFamily: 'inherit',
+            position: wide ? 'absolute' : 'relative', top: wide ? 24 : undefined, left: wide ? 28 : undefined,
+          }}
+        >
+          <ArrowLeft size={14} /> Back
+        </motion.button>
+      )}
+      {logo && <motion.div {...enter(0.08)} style={{ marginBottom: 18 }}>{logo}</motion.div>}
+      <motion.h1 {...enter(0.12)} style={{ margin: 0, fontSize: wide ? 'clamp(2.1rem, 2.8vw, 2.7rem)' : 'clamp(2.1rem, 3.2vw, 3rem)', lineHeight: 1.06, fontWeight: 800, letterSpacing: '-0.02em', fontFamily: 'inherit' }}>
+        {title}
+      </motion.h1>
+      <motion.p {...enter(0.26)} style={{ margin: '18px 0 0', fontSize: '1.04rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: '36ch', whiteSpace: 'pre-line' }}>
+        {body}
+      </motion.p>
+      {/* Arc pins the CTA to the panel's bottom on card beats; on the wide account beat it follows the content. */}
+      <motion.div {...enter(0.42)} style={{ marginTop: wide ? 34 : 'auto', paddingTop: wide ? 0 : 28, width: wide ? 'min(340px, 100%)' : '100%' }}>
+        <button
+          onClick={() => armed && !nextDisabled && onNext()}
+          disabled={!!nextDisabled}
+          style={{
+            width: '100%', padding: '15px 18px', borderRadius: 10,
+            border: 'none', background: ctaBg, color: ctaFg,
+            fontSize: '1rem', fontWeight: 700, cursor: nextDisabled ? 'default' : 'pointer',
+            opacity: nextDisabled ? 0.45 : 1, fontFamily: 'inherit',
+            transition: 'background 150ms ease, opacity 150ms ease',
+          }}
+        >
+          {nextLabel}
+        </button>
+        {/* Arc's quiet escape hatch under the primary CTA. */}
+        {secondaryLabel && onSecondary && (
           <button
-            onClick={() => armed && !nextDisabled && onNext()}
-            disabled={!!nextDisabled}
+            onClick={() => armed && onSecondary()}
             style={{
-              width: '100%', padding: '13px 18px', borderRadius: c.radius.md,
-              border: 'none', background: c.accent.primary, color: '#fff',
-              fontSize: '0.98rem', fontWeight: 600, cursor: nextDisabled ? 'default' : 'pointer',
-              opacity: nextDisabled ? 0.45 : 1, fontFamily: 'inherit',
-              transition: 'background 150ms ease, opacity 150ms ease',
+              marginTop: 12, width: '100%', border: 'none', background: 'transparent',
+              color: 'rgba(255,255,255,0.55)', fontSize: '0.88rem', fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit', padding: 4,
             }}
           >
-            {nextLabel}
+            {secondaryLabel}
           </button>
-        </motion.div>
+        )}
+      </motion.div>
+    </div>
+  );
+
+  const stage = (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.55, delay: 0.15 }}
+      style={{
+        position: 'relative', flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+        padding: 32, boxSizing: 'border-box', overflow: 'auto',
+        background: wide ? ARC_BLUE_BG : stageBg,
+      }}
+    >
+      {/* Arc's stage always wears texture; the slider can add more but never strips it during onboarding. */}
+      <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: Math.max(0.22, grain), pointerEvents: 'none' }} />
+      <div style={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        {children}
       </div>
+    </motion.div>
+  );
+
+  if (wide) {
+    return (
+      <div style={{ display: 'flex', width: '100%', height: '100%', fontFamily: ONBOARDING_SANS }}>
+        {panel}
+        {stage}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: backdrop, fontFamily: ONBOARDING_SANS }}>
+      <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.3, pointerEvents: 'none' }} />
       <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.55, delay: 0.15 }}
+        initial={{ opacity: 0, y: 18, scale: 0.985 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ ...SPRING, delay: 0.05 }}
         style={{
-          position: 'relative', flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-          padding: 36, boxSizing: 'border-box', overflow: 'auto',
-          background: stageWash,
+          position: 'relative', display: 'flex', width: 'min(1240px, 82%)', height: 'min(880px, 82%)',
+          borderRadius: 24, overflow: 'hidden', boxShadow: '0 30px 80px rgba(20, 16, 80, 0.35)',
         }}
       >
-        <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.08, pointerEvents: 'none' }} />
-        <div style={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          {children}
-        </div>
+        {panel}
+        {stage}
       </motion.div>
     </div>
   );
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
index e8599311..62ad72b0 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
@@ -51,13 +51,15 @@ const BeatTheme: React.FC<{
       nextLabel="Next"
       onNext={onNext}
       onBack={onBack}
+      stageDark
     >
       <motion.div
         initial={{ opacity: 0, scale: 0.94, y: 14 }}
         animate={{ opacity: 1, scale: 1, y: 0 }}
         transition={{ type: 'spring', stiffness: 220, damping: 24, delay: 0.2 }}
         style={{
-          width: 'min(430px, 100%)', borderRadius: 20, background: c.bg.inverse,
+          // Fixed dark: the picker is a physical device, it doesn't repaint with the theme it edits.
+          width: 'min(430px, 100%)', borderRadius: 20, background: '#141413',
           boxShadow: '0 18px 50px rgba(0,0,0,0.3)', padding: '14px 16px 18px', boxSizing: 'border-box',
           display: 'flex', flexDirection: 'column', gap: 12,
         }}
@@ -72,7 +74,7 @@ const BeatTheme: React.FC<{
                 width: 34, height: 28, borderRadius: 8, border: 'none', cursor: 'pointer',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
                 background: choice === key ? c.accent.primary : 'transparent',
-                color: choice === key ? '#fff' : c.text.inverse + '88',
+                color: choice === key ? '#fff' : 'rgba(255,255,255,0.55)',
                 transition: 'background 140ms ease, color 140ms ease',
               }}
             >
diff --git a/frontend/src/app/components/OnboardingV3/providerLogos.tsx b/frontend/src/app/components/OnboardingV3/providerLogos.tsx
new file mode 100644
index 00000000..caf0e692
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/providerLogos.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+// Real brand marks (simple-icons paths) for the connect rows; the dots read as placeholders.
+const CLAUDE_PATH = 'M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312z';
+
+const GEMINI_PATH = 'M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81z';
+
+const OPENAI_PATH = 'M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z';
+
+export function providerLogo(providerId: string, size = 24): React.ReactElement | null {
+  if (providerId === 'claude') {
+    return (
+      <svg viewBox="0 0 24 24" width={size} height={size}><path fill="#D97757" d={CLAUDE_PATH} /></svg>
+    );
+  }
+  if (providerId === 'antigravity') {
+    return (
+      <svg viewBox="0 0 24 24" width={size} height={size}>
+        <defs>
+          <linearGradient id="osw-gem" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#4285F4" />
+            <stop offset="60%" stopColor="#9B72CB" />
+            <stop offset="100%" stopColor="#D96570" />
+          </linearGradient>
+        </defs>
+        <path fill="url(#osw-gem)" d={GEMINI_PATH} />
+      </svg>
+    );
+  }
+  if (providerId === 'codex') {
+    return (
+      <svg viewBox="0 0 24 24" width={size} height={size}><path fill="#10A37F" d={OPENAI_PATH} /></svg>
+    );
+  }
+  return null;
+}
diff --git a/frontend/src/app/components/theme/AccentColorPad.tsx b/frontend/src/app/components/theme/AccentColorPad.tsx
index afc76983..7a51de91 100644
--- a/frontend/src/app/components/theme/AccentColorPad.tsx
+++ b/frontend/src/app/components/theme/AccentColorPad.tsx
@@ -1,9 +1,14 @@
-import React, { useCallback, useRef } from 'react';
-import { Minus, Plus } from 'lucide-react';
+import React, { useCallback, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight, Minus, Plus } from 'lucide-react';
 import { hexToHsl, hslToHex } from '@/shared/styles/claudeTokens';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import { Knob, SquiggleSlider } from './WashDials';
 
-export const ACCENT_PRESETS = ['#ae5630', '#b0453c', '#8e5cb8', '#3a6fc4', '#2e8f6f', '#b08b2e', '#c2588f', '#5c6470'];
+export const ACCENT_PRESETS = [
+  '#ae5630', '#b0453c', '#8e5cb8', '#3a6fc4', '#2e8f6f', '#b08b2e', '#c2588f', '#5c6470',
+  '#e8b4b8', '#f2d0a4', '#a8d8b9', '#9ec5e8', '#c3aed6', '#f7e8a4', '#87d1c6', '#d98cb3',
+];
+const PRESETS_PER_PAGE = 8;
 const MAX_STOPS = 3;
 
 function stopToXY(hex: string): { x: number; y: number } | null {
@@ -30,6 +35,8 @@ const AccentColorPad: React.FC<{
   const padRef = useRef<HTMLDivElement | null>(null);
   const grabbedRef = useRef<number | null>(null);
   const lastApplyRef = useRef(0);
+  const [presetPage, setPresetPage] = useState(0);
+  const presetPages = Math.ceil(ACCENT_PRESETS.length / PRESETS_PER_PAGE);
 
   const pointToHex = useCallback((clientX: number, clientY: number): string | null => {
     const pad = padRef.current;
@@ -104,9 +111,16 @@ const AccentColorPad: React.FC<{
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
         style={{
+          // Arc's pad: dark dot-grid field with the spectrum only ghosting through, the picked dots carry the color.
           position: 'relative', height, borderRadius: c.radius.lg, cursor: 'crosshair',
           border: `1px solid ${c.border.medium}`, touchAction: 'none',
-          background: 'linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(0,0,0,0.45)), linear-gradient(to right, hsl(0,72%,55%), hsl(60,72%,55%), hsl(120,72%,55%), hsl(180,72%,55%), hsl(240,72%,55%), hsl(300,72%,55%), hsl(360,72%,55%))',
+          background: [
+            'radial-gradient(rgba(255,255,255,0.13) 1px, transparent 1.4px)',
+            'linear-gradient(rgba(30,29,27,0.84), rgba(30,29,27,0.84))',
+            'linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(0,0,0,0.45))',
+            'linear-gradient(to right, hsl(0,72%,55%), hsl(60,72%,55%), hsl(120,72%,55%), hsl(180,72%,55%), hsl(240,72%,55%), hsl(300,72%,55%), hsl(360,72%,55%))',
+          ].join(', '),
+          backgroundSize: '14px 14px, auto, auto, auto',
         }}
       >
         {stops.map((hex, i) => {
@@ -150,8 +164,16 @@ const AccentColorPad: React.FC<{
           </button>
         </div>
       </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 9, flexWrap: 'wrap' }}>
-        {ACCENT_PRESETS.map((hex) => (
+      {/* Arc's preset carousel: a page of dots between chevrons. */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
+        <button
+          onClick={() => setPresetPage((p) => Math.max(0, p - 1))}
+          disabled={presetPage === 0}
+          style={{ border: 'none', background: 'transparent', padding: 0, cursor: presetPage === 0 ? 'default' : 'pointer', color: c.text.tertiary, opacity: presetPage === 0 ? 0.35 : 1, display: 'flex' }}
+        >
+          <ChevronLeft size={15} />
+        </button>
+        {ACCENT_PRESETS.slice(presetPage * PRESETS_PER_PAGE, (presetPage + 1) * PRESETS_PER_PAGE).map((hex) => (
           <button
             key={hex}
             onClick={() => onChange([hex])}
@@ -162,6 +184,13 @@ const AccentColorPad: React.FC<{
             }}
           />
         ))}
+        <button
+          onClick={() => setPresetPage((p) => Math.min(presetPages - 1, p + 1))}
+          disabled={presetPage >= presetPages - 1}
+          style={{ border: 'none', background: 'transparent', padding: 0, cursor: presetPage >= presetPages - 1 ? 'default' : 'pointer', color: c.text.tertiary, opacity: presetPage >= presetPages - 1 ? 0.35 : 1, display: 'flex' }}
+        >
+          <ChevronRight size={15} />
+        </button>
         <button
           onClick={() => onChange(null)}
           style={{
@@ -172,16 +201,11 @@ const AccentColorPad: React.FC<{
           Reset
         </button>
       </div>
+      {/* Arc's dials row: wavy line = grain, round knob = intensity. */}
       {wash && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.78rem', color: c.text.tertiary }}>
-            <span style={{ width: 52, flexShrink: 0 }}>Intensity</span>
-            <input type="range" min={0} max={1} step={0.01} value={wash.opacity} onChange={(e) => wash.onOpacity(parseFloat(e.target.value))} style={{ flex: 1, accentColor: c.accent.primary }} />
-          </label>
-          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.78rem', color: c.text.tertiary }}>
-            <span style={{ width: 52, flexShrink: 0 }}>Grain</span>
-            <input type="range" min={0} max={1} step={0.01} value={wash.grain} onChange={(e) => wash.onGrain(parseFloat(e.target.value))} style={{ flex: 1, accentColor: c.accent.primary }} />
-          </label>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, color: c.text.tertiary }}>
+          <SquiggleSlider value={wash.grain} onChange={wash.onGrain} width={190} />
+          <Knob value={wash.opacity} onChange={wash.onOpacity} />
         </div>
       )}
     </div>
diff --git a/frontend/src/app/components/theme/WashDials.tsx b/frontend/src/app/components/theme/WashDials.tsx
new file mode 100644
index 00000000..88543815
--- /dev/null
+++ b/frontend/src/app/components/theme/WashDials.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback, useRef } from 'react';
+
+// Arc's theme-device dials: grain is a wavy line with a pill thumb, intensity is a round dotted
+// knob. Strokes ride currentColor so the same dials read on the dark device and light Settings.
+
+export const SquiggleSlider: React.FC<{ value: number; onChange: (v: number) => void; width?: number }> = ({ value, onChange, width = 170 }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const dragging = useRef(false);
+  const apply = useCallback((clientX: number) => {
+    const el = ref.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    onChange(Math.min(1, Math.max(0, (clientX - r.left) / r.width)));
+  }, [onChange]);
+  const H = 30;
+  const wavePath = Array.from({ length: 61 }, (unused, i) => {
+    const x = (i / 60) * width;
+    const y = H / 2 + Math.sin((i / 60) * Math.PI * 2 * 5) * 6;
+    return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+  }).join(' ');
+  return (
+    <div
+      ref={ref}
+      title="Grain"
+      onPointerDown={(e) => { dragging.current = true; (e.target as HTMLElement).setPointerCapture?.(e.pointerId); apply(e.clientX); }}
+      onPointerMove={(e) => { if (dragging.current) apply(e.clientX); }}
+      onPointerUp={() => { dragging.current = false; }}
+      style={{ position: 'relative', width, height: H, cursor: 'pointer', touchAction: 'none', flexShrink: 0 }}
+    >
+      <svg width={width} height={H} style={{ display: 'block' }}>
+        <path d={wavePath} stroke="currentColor" strokeOpacity={0.5} strokeWidth={2} fill="none" strokeLinecap="round" />
+      </svg>
+      <div style={{
+        position: 'absolute', top: '50%', left: value * width, transform: 'translate(-50%, -50%)',
+        width: 14, height: 26, borderRadius: 999, background: '#fff',
+        boxShadow: '0 1px 5px rgba(0,0,0,0.4)', pointerEvents: 'none',
+      }} />
+    </div>
+  );
+};
+
+export const Knob: React.FC<{ value: number; onChange: (v: number) => void; size?: number }> = ({ value, onChange, size = 34 }) => {
+  const dragging = useRef<{ startY: number; startV: number } | null>(null);
+  const angle = -135 + value * 270;
+  return (
+    <div
+      title="Intensity"
+      onPointerDown={(e) => { dragging.current = { startY: e.clientY, startV: value }; (e.target as HTMLElement).setPointerCapture?.(e.pointerId); }}
+      onPointerMove={(e) => { const d = dragging.current; if (!d) return; onChange(Math.min(1, Math.max(0, d.startV + (d.startY - e.clientY) / 120))); }}
+      onPointerUp={() => { dragging.current = null; }}
+      style={{
+        position: 'relative', width: size + 10, height: size + 10, display: 'flex', alignItems: 'center',
+        justifyContent: 'center', cursor: 'ns-resize', touchAction: 'none', flexShrink: 0,
+      }}
+    >
+      <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: '2px dotted currentColor', opacity: 0.4 }} />
+      <div style={{ width: size - 8, height: size - 8, borderRadius: 999, background: '#3a3835', transform: `rotate(${angle}deg)`, display: 'flex', justifyContent: 'center' }}>
+        <div style={{ width: 3, height: 9, borderRadius: 2, background: '#fff', marginTop: 2 }} />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/shared/styles/grainTexture.ts b/frontend/src/shared/styles/grainTexture.ts
new file mode 100644
index 00000000..30382438
--- /dev/null
+++ b/frontend/src/shared/styles/grainTexture.ts
@@ -0,0 +1,4 @@
+// Zen-style film grain: a static 220px PNG tile of sparse BIPOLAR speckle (some pixels lighten,
+// some darken, most near-transparent), so at full slider it reads as texture in the paint rather
+// than gray haze on top. Opacity IS the grain slider, exactly like Zen's --zen-grainy-background-opacity.
+export const GRAIN_URL = 'url("./grain-texture.png")';

From 089bbd621af5d6ea28ecde3c516bf8ad3a3dc058 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:46 -0700
Subject: [PATCH 058/248] [eric] dashboard: traffic-light window controls on
 chat/app/note cards + top glare scrim removed

---
 .../Dashboard/canvas/DashboardCanvas.tsx      |  35 +++++-
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  77 +++++++------
 .../Dashboard/cards/DashboardViewCard.tsx     |  75 +++++++------
 .../app/pages/Dashboard/cards/NoteCard.tsx    |  80 ++++++++------
 .../pages/Dashboard/cards/WindowControls.tsx  |  92 ++++++++++++++++
 .../app/pages/Dashboard/cards/tileZones.ts    | 103 ++++++++++++++++++
 .../src/shared/state/dashboardLayoutSlice.ts  |  44 ++++++++
 7 files changed, 398 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
 create mode 100644 frontend/src/app/pages/Dashboard/cards/tileZones.ts

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 2f7a9f62..33a3193b 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -1,5 +1,7 @@
-import React, { type RefObject } from 'react';
+import React, { useEffect, type RefObject } from 'react';
 import Box from '@mui/material/Box';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { clearTiledCard, selectFullscreenCardId } from '@/shared/state/dashboardLayoutSlice';
 import DashboardHeader from './DashboardHeader';
 import TetherLayer from './TetherLayer';
 import DashboardCardLayer from './DashboardCardLayer';
@@ -7,6 +9,7 @@ import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
+import { GRAIN_URL } from '@/shared/styles/grainTexture';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -161,12 +164,27 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
 
   useWebviewSuspend(browserCards, canvas.panX, canvas.panY, canvas.zoom, canvas.viewportRef);
 
+  // macOS full screen: one card owns the whole window, every piece of chrome steps aside; Esc exits.
+  const dispatch = useAppDispatch();
+  const fullscreenCardId = useAppSelector(selectFullscreenCardId);
+  useEffect(() => {
+    if (!fullscreenCardId) return undefined;
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== 'Escape') return;
+      e.stopPropagation();
+      dispatch(clearTiledCard(fullscreenCardId));
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [fullscreenCardId, dispatch]);
+
   return (
     <>
     <Box sx={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
       {/* Floating header overlay */}
       <Box
         sx={{
+          display: fullscreenCardId ? 'none' : undefined,
           position: 'absolute',
           top: 0,
           left: 0,
@@ -176,7 +194,8 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
           // p: 3 (24px) was leaving a chunky air gap between the sidebar edge and the dashboard header that read as "two disconnected panels" rather than one continuous surface. 0.75 (6px) tightens the inset so the header floats just inside the content area without losing its breathing room from the top-most pixel.
           p: 0.75,
           pb: 0,
-          background: `linear-gradient(to bottom, ${c.bg.page} 60%, transparent)`,
+          // No scrim: the header carries its own translucent pill (DashboardHeader), so a full-width
+          // page->transparent fade here just read as a light-leak band over the themed canvas.
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', pointerEvents: 'auto' }}>
@@ -201,6 +220,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
       {/* Canvas viewport */}
       <Box
         ref={canvas.viewportRef}
+        data-canvas-viewport
         onMouseDown={onViewportMouseDown}
         onMouseMove={onViewportMouseMove}
         onMouseUp={onViewportMouseUp}
@@ -229,14 +249,14 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
             }}
           />
         )}
-        {gradient && gradient.length > 1 && grain > 0 && (
+        {grain > 0 && (
           <Box
             sx={{
               position: 'absolute',
               inset: 0,
               pointerEvents: 'none',
-              opacity: grain * 0.6,
-              backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")",
+              opacity: grain,
+              backgroundImage: GRAIN_URL,
             }}
           />
         )}
@@ -304,11 +324,13 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
             />
           </div>
         )}
-        {sessionList.length === 0 && Object.keys(viewCards).length === 0 && Object.keys(browserCards).length === 0 && Object.keys(workflowCards).length === 0 && !workflowsHub && (
+        {sessionList.length === 0 && Object.keys(viewCards).length === 0 && Object.keys(browserCards).length === 0 && Object.keys(workflowCards).length === 0 && !workflowsHub && !fullscreenCardId && (
           <DashboardEmptyState c={c} onLaunch={onToolbarSend} onStarter={onStarter} />
         )}
       </Box>
 
+      {/* display:contents when visible so the overlays' absolute children keep positioning against the canvas root; display:none (not unmount) so the toolbar composer draft survives fullscreen. */}
+      <Box sx={{ display: fullscreenCardId ? 'none' : 'contents' }}>
       <DashboardOverlays
         canvas={canvas}
         dashboardId={dashboardId}
@@ -339,6 +361,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         toolbarPrefill={toolbarPrefill}
         toolbarPrefillMode={toolbarPrefillMode}
       />
+      </Box>
     </Box>
     </>
   );
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 693e898c..5b4fc18f 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -11,7 +11,6 @@ import CheckIcon from '@mui/icons-material/Check';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CloseIcon from '@mui/icons-material/Close';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import { motion } from 'framer-motion';
 import {
@@ -31,7 +30,11 @@ import {
   clearGlowingAgentCard,
   removeCard,
   recordClosedCard,
+  setTiledCard,
+  clearTiledCard,
 } from '@/shared/state/dashboardLayoutSlice';
+import WindowControls from './WindowControls';
+import { useTiledStyle } from './tileZones';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { QuestionForm } from '@/app/pages/AgentChat/shell/ApprovalBar';
 import AgentChat from '@/app/pages/AgentChat/AgentChat';
@@ -620,9 +623,9 @@ const AgentCard: React.FC<Props> = ({
     (e.target as HTMLElement).releasePointerCapture(e.pointerId);
   }, [computeResize, dispatch, session.id]);
 
-  const handleRemove = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
+  const handleRemove = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    e?.preventDefault();
     if (linkedWorkflowSidecarId) {
       dispatch(setCardSidecar({ workflowId: linkedWorkflowSidecarId, sessionId: null, kind: null }));
     }
@@ -639,6 +642,27 @@ const AgentCard: React.FC<Props> = ({
     }
   };
 
+  const tileZone = useAppSelector((s) => s.dashboardLayout.tiledCards[session.id]);
+  const isFullscreen = tileZone === 'fullscreen';
+  // Fullscreen pins the card to the viewport, so while tiled the geometry must track canvas pan/zoom.
+  // Chat cards read the camera via a getter (not props) to avoid re-rendering on every pan tick, so
+  // we subscribe to the pan event ONLY while tiled (one card at most), and read fresh camera then.
+  const [tileTick, setTileTick] = useState(0);
+  useEffect(() => {
+    if (!tileZone) return undefined;
+    const onPan = (): void => setTileTick((t) => t + 1);
+    window.addEventListener('openswarm:canvas-pan-changed', onPan);
+    return () => window.removeEventListener('openswarm:canvas-pan-changed', onPan);
+  }, [tileZone]);
+  void tileTick;
+  const cam = getCanvasState();
+  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+  const onMinimize = (): void => { dispatch(collapseSession(session.id)); };
+  const onTile = (zone: string): void => {
+    if (zone === 'restore') dispatch(clearTiledCard(session.id));
+    else dispatch(setTiledCard({ cardId: session.id, zone }));
+  };
+
 
   // ElapsedTimer owns its own 1Hz tick so AgentCard doesn't re-render every second.
 
@@ -692,17 +716,19 @@ const AgentCard: React.FC<Props> = ({
     <motion.div
       layout={false}
       initial={spawnInitial}
-      animate={{ opacity: 1, scale: 1, left: activeX, top: activeY }}
+      animate={{ opacity: 1, scale: 1, left: tiledStyle ? tiledStyle.left : activeX, top: tiledStyle ? tiledStyle.top : activeY }}
       exit={exitAnimation}
-      transition={spawnTransition}
+      // While tiled the card is pinned to the viewport: position must track pan instantly, never spring.
+      transition={tiledStyle ? { ...spawnTransition, left: { duration: 0 }, top: { duration: 0 } } : spawnTransition}
       onPointerDownCapture={() => onBringToFront?.(session.id, 'agent')}
       style={{
         position: 'absolute',
-        zIndex: isDragging || isResizing ? 999999 : cardZOrder,
+        zIndex: tiledStyle ? 999990 : isDragging || isResizing ? 999999 : cardZOrder,
       }}
     >
     <Box
       ref={cardBoxRef}
+      className="osw-card"
       data-select-type="agent-card"
       data-select-id={session.id}
       data-select-meta={JSON.stringify({ name: session.name || session.id, status: session.status, model: session.model, mode: session.mode })}
@@ -726,8 +752,10 @@ const AgentCard: React.FC<Props> = ({
         contain: 'layout style',
         // Each card gets its own compositor layer; hover-cross used to cost 100-200ms PRESENTATION by re-painting the whole canvas.
         willChange: 'transform',
-        width: localResize ? activeW : Math.max(cardWidth, MIN_W),
-        height: localResize ? activeH : (expanded ? Math.max(EXPANDED_OVERLAY_H, cardHeight) : 'auto'),
+        width: tiledStyle ? tiledStyle.width : (localResize ? activeW : Math.max(cardWidth, MIN_W)),
+        height: tiledStyle ? tiledStyle.height : (localResize ? activeH : (expanded ? Math.max(EXPANDED_OVERLAY_H, cardHeight) : 'auto')),
+        transform: tiledStyle ? tiledStyle.transform : undefined,
+        transformOrigin: tiledStyle ? tiledStyle.transformOrigin : undefined,
         bgcolor: c.bg.surface,
         border: isHighlighted
           ? `2px solid ${c.accent.primary}`
@@ -740,7 +768,7 @@ const AgentCard: React.FC<Props> = ({
                 : expanded
                   ? `1px solid ${c.border.strong}`
                   : `1px solid ${c.border.subtle}`,
-        borderRadius: 3,
+        borderRadius: isFullscreen ? '12px' : 3,
         p: 2,
         cursor: expanded ? 'default' : 'pointer',
         transition: noTransition
@@ -884,14 +912,10 @@ const AgentCard: React.FC<Props> = ({
         >
           <Box
             className="drag-handle"
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              mr: 0.5,
-              color: c.text.ghost,
-            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            sx={{ display: 'flex', alignItems: 'center', mr: 0.75, flexShrink: 0 }}
           >
-            <DragIndicatorIcon sx={{ fontSize: 16 }} />
+            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
           </Box>
           <Box
             sx={{
@@ -958,25 +982,6 @@ const AgentCard: React.FC<Props> = ({
               </Tooltip>
             </Fade>
           </Box>
-          <Box
-            onPointerDown={(e) => e.stopPropagation()}
-            sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0, ml: 0.5 }}
-          >
-            <Tooltip title={isDraft ? 'Remove' : 'Close chat'}>
-              <IconButton
-                size="small"
-                onClick={handleRemove}
-                onMouseDown={(e) => e.stopPropagation()}
-                sx={{
-                  color: c.text.ghost,
-                  p: 0.5,
-                  '&:hover': { color: c.status.error, bgcolor: `${c.status.errorBg}` },
-                }}
-              >
-                <CloseIcon sx={{ fontSize: 16 }} />
-              </IconButton>
-            </Tooltip>
-          </Box>
         </Box>
 
         <Box
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index e31453a5..ef8caa26 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -7,7 +7,6 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import CloseIcon from '@mui/icons-material/Close';
 import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
 import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
@@ -16,8 +15,10 @@ import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
 import AddIcon from '@mui/icons-material/Add';
 import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
 import { Output, SERVE_BASE } from '@/shared/state/outputsSlice';
-import { setViewCardPosition, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard } from '@/shared/state/dashboardLayoutSlice';
+import { setViewCardPosition, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard } from '@/shared/state/dashboardLayoutSlice';
 import { removeViewCardCleanly } from '@/shared/viewTeardown';
+import WindowControls from './WindowControls';
+import { useTiledStyle } from './tileZones';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE, getAuthToken } from '@/shared/config';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
@@ -135,6 +136,10 @@ const DashboardViewCard: React.FC<Props> = ({
   const previewRef = useRef<ViewPreviewHandle>(null);
   const activeViewCardId = useAppSelector((s) => s.dashboardLayout.activeViewCardId);
   const interactive = activeViewCardId === cardKey;
+  const tileZone = useAppSelector((s) => s.dashboardLayout.tiledCards[cardKey]);
+  const isMinimized = useAppSelector((s) => !!s.dashboardLayout.minimizedCards[cardKey]);
+  const tiledStyle = useTiledStyle(tileZone, panX, panY, zoom);
+  const isFullscreen = tileZone === 'fullscreen';
 
   // Deselecting the card exits interact mode (click anywhere else on canvas).
   useEffect(() => {
@@ -361,11 +366,16 @@ const DashboardViewCard: React.FC<Props> = ({
     (e.target as HTMLElement).releasePointerCapture(e.pointerId);
   }, [computeResize, dispatch, cardKey]);
 
-  const handleRemove = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleRemove = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
     dispatch(recordClosedCard({ kind: 'view', id: cardKey }));
     void removeViewCardCleanly(cardKey, dispatch);
   };
+  const onMinimize = () => dispatch(toggleMinimizeCard({ cardId: cardKey }));
+  const onTile = (zone: string) => {
+    if (zone === 'restore') dispatch(clearTiledCard(cardKey));
+    else dispatch(setTiledCard({ cardId: cardKey, zone }));
+  };
 
   // Spawn ANOTHER independent instance of this app (own runtime + ports); the reducer picks the next #N and the lifecycle hook fits + highlights it.
   const handleOpenAnother = (e: React.MouseEvent) => {
@@ -415,6 +425,7 @@ const DashboardViewCard: React.FC<Props> = ({
       data-select-type="view-card"
       data-select-id={cardKey}
       data-select-meta={JSON.stringify({ name: output.name, description: output.description, path: output.workspace_path })}
+      className="osw-card"
       onPointerDownCapture={() => onBringToFront?.(cardKey, 'view')}
       onClick={(e: React.MouseEvent) => {
         if (justDraggedRef.current) return;
@@ -429,11 +440,13 @@ const DashboardViewCard: React.FC<Props> = ({
         // contain + willChange: own compositor layer so paint stays scoped (see AgentCard for full rationale).
         contain: 'layout style',
         willChange: 'transform',
-        left: displayX,
-        top: displayY,
-        width: displayW,
-        height: displayH,
-        borderRadius: `${c.radius.lg}px`,
+        left: tiledStyle ? tiledStyle.left : displayX,
+        top: tiledStyle ? tiledStyle.top : displayY,
+        width: tiledStyle ? tiledStyle.width : (isMinimized ? 220 : displayW),
+        height: tiledStyle ? tiledStyle.height : (isMinimized ? 44 : displayH),
+        transform: tiledStyle ? tiledStyle.transform : undefined,
+        transformOrigin: tiledStyle ? tiledStyle.transformOrigin : undefined,
+        borderRadius: isFullscreen ? '12px' : `${c.radius.lg}px`,
         border: isHighlighted
           ? `2px solid ${c.accent.primary}`
           : interactive
@@ -450,7 +463,7 @@ const DashboardViewCard: React.FC<Props> = ({
         overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
-        zIndex: (isDragging || isResizing) ? 999999 : cardZOrder,
+        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : cardZOrder,
         transition: noTransition ? 'none' : 'box-shadow 0.2s',
         '&:hover .resize-handle': { opacity: 1 },
         ...(isHighlighted && {
@@ -517,7 +530,10 @@ const DashboardViewCard: React.FC<Props> = ({
           userSelect: 'none',
         }}
       >
-        <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />
+        <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}>
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+        </Box>
+        {!isMinimized && <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
         <Typography
           sx={{
             flex: 1,
@@ -537,7 +553,7 @@ const DashboardViewCard: React.FC<Props> = ({
           </Typography>
         )}
 
-        {showControls && (
+        {showControls && !isMinimized && (
           <>
             {hasWorkspace && (
               <Box
@@ -616,27 +632,18 @@ const DashboardViewCard: React.FC<Props> = ({
           </>
         )}
 
-        <Tooltip title={headerCollapsed ? 'Show toolbar' : 'Hide toolbar'} placement="top">
-          <IconButton
-            size="small"
-            onClick={(e) => { e.stopPropagation(); setHeaderPeek(false); setHeaderCollapsed((v) => !v); }}
-            onPointerDown={(e) => e.stopPropagation()}
-            sx={{ color: c.text.ghost, p: 0.5, '&:hover': { color: c.text.primary } }}
-          >
-            <KeyboardArrowUpRounded sx={{ fontSize: 18, transition: 'transform 0.15s', transform: headerCollapsed ? 'rotate(180deg)' : 'none' }} />
-          </IconButton>
-        </Tooltip>
-
-        <Tooltip title="Remove from dashboard" placement="top">
-          <IconButton
-            size="small"
-            onClick={handleRemove}
-            onPointerDown={(e) => e.stopPropagation()}
-            sx={{ color: c.text.ghost, p: 0.5, '&:hover': { color: c.status.error } }}
-          >
-            <CloseIcon sx={{ fontSize: 16 }} />
-          </IconButton>
-        </Tooltip>
+        {!isMinimized && (
+          <Tooltip title={headerCollapsed ? 'Show toolbar' : 'Hide toolbar'} placement="top">
+            <IconButton
+              size="small"
+              onClick={(e) => { e.stopPropagation(); setHeaderPeek(false); setHeaderCollapsed((v) => !v); }}
+              onPointerDown={(e) => e.stopPropagation()}
+              sx={{ color: c.text.ghost, p: 0.5, '&:hover': { color: c.text.primary } }}
+            >
+              <KeyboardArrowUpRounded sx={{ fontSize: 18, transition: 'transform 0.15s', transform: headerCollapsed ? 'rotate(180deg)' : 'none' }} />
+            </IconButton>
+          </Tooltip>
+        )}
       </Box>
 
       {/* Preview body */}
@@ -677,7 +684,7 @@ const DashboardViewCard: React.FC<Props> = ({
       </Box>
 
       {/* Resize handles */}
-      {HANDLE_DEFS.map(({ dir, sx }) => (
+      {!isMinimized && HANDLE_DEFS.map(({ dir, sx }) => (
         <Box
           key={dir}
           className="resize-handle"
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index d6a48e19..dd93e35b 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
 import PaletteOutlinedIcon from '@mui/icons-material/PaletteOutlined';
 import {
   setNotePosition,
@@ -10,10 +9,16 @@ import {
   updateNoteContent,
   setNoteColor,
   recordClosedCard,
+  toggleMinimizeCard,
+  setTiledCard,
+  clearTiledCard,
+  clearCardWindowState,
   NoteColor,
 } from '@/shared/state/dashboardLayoutSlice';
-import { useAppDispatch } from '@/shared/hooks';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import WindowControls from './WindowControls';
+import { useTiledStyle } from './tileZones';
 
 type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
 
@@ -81,6 +86,8 @@ const NoteCard: React.FC<Props> = ({
   const c = useClaudeTokens();
   const dispatch = useAppDispatch();
   const palette = NOTE_PALETTE[color] || NOTE_PALETTE.yellow;
+  const isMinimized = useAppSelector((s) => !!s.dashboardLayout.minimizedCards[noteId]);
+  const tileZone = useAppSelector((s) => s.dashboardLayout.tiledCards[noteId]);
 
   const DRAG_THRESHOLD = 3;
   const dragState = useRef<{ startX: number; startY: number; origX: number; origY: number; startPanX: number; startPanY: number } | null>(null);
@@ -237,11 +244,19 @@ const NoteCard: React.FC<Props> = ({
     (e.target as HTMLElement).releasePointerCapture(e.pointerId);
   }, [computeResize, dispatch, noteId]);
 
-  const handleRemove = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleRemove = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    dispatch(clearCardWindowState(noteId));
     dispatch(recordClosedCard({ kind: 'note', id: noteId }));
     dispatch(removeNote(noteId));
   };
+  const onMinimize = () => dispatch(toggleMinimizeCard({ cardId: noteId }));
+  const onTile = (zone: string) => {
+    if (zone === 'restore') dispatch(clearTiledCard(noteId));
+    else dispatch(setTiledCard({ cardId: noteId, zone }));
+  };
+  const tiledStyle = useTiledStyle(tileZone, panX, panY, zoom);
+  const isFullscreen = tileZone === 'fullscreen';
 
   const mdDx = (!isDragging && isSelected && multiDragDelta) ? multiDragDelta.dx : 0;
   const mdDy = (!isDragging && isSelected && multiDragDelta) ? multiDragDelta.dy : 0;
@@ -252,6 +267,7 @@ const NoteCard: React.FC<Props> = ({
 
   return (
     <Box
+      className="osw-card"
       data-select-type="note-card"
       data-select-id={noteId}
       data-select-meta={JSON.stringify({ name: 'Note', content: content.slice(0, 60) })}
@@ -266,14 +282,16 @@ const NoteCard: React.FC<Props> = ({
       }}
       sx={{
         position: 'absolute',
-        left: displayX,
-        top: displayY,
-        width: displayW,
-        height: displayH,
+        left: tiledStyle ? tiledStyle.left : displayX,
+        top: tiledStyle ? tiledStyle.top : displayY,
+        width: tiledStyle ? tiledStyle.width : (isMinimized ? 190 : displayW),
+        height: tiledStyle ? tiledStyle.height : (isMinimized ? 32 : displayH),
+        transform: tiledStyle ? tiledStyle.transform : undefined,
+        transformOrigin: tiledStyle ? tiledStyle.transformOrigin : undefined,
         // contain + willChange: own compositor layer so paint stays scoped (see AgentCard for full rationale).
         contain: 'layout style',
         willChange: 'transform',
-        borderRadius: `${c.radius.md}px`,
+        borderRadius: isFullscreen ? '12px' : `${c.radius.md}px`,
         bgcolor: palette.bg,
         border: isHighlighted
           ? `2px solid ${c.accent.primary}`
@@ -285,7 +303,7 @@ const NoteCard: React.FC<Props> = ({
             : isSelected
               ? `0 0 0 1px #3b82f6, ${c.shadow.md}`
               : c.shadow.sm,
-        zIndex: (isDragging || isResizing) ? 999999 : cardZOrder,
+        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : cardZOrder,
         display: 'flex',
         flexDirection: 'column',
         '&:hover .note-controls': { opacity: 1 },
@@ -298,19 +316,27 @@ const NoteCard: React.FC<Props> = ({
         onPointerUp={handleDragPointerUp}
         onPointerCancel={handleDragPointerUp}
         sx={{
-          height: HEADER_H,
+          height: isMinimized ? '100%' : HEADER_H,
           flexShrink: 0,
           cursor: isDragging ? 'grabbing' : 'grab',
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'space-between',
+          gap: 0.75,
           px: 0.75,
           touchAction: 'none',
         }}
       >
+        <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+        </Box>
+        {isMinimized && (
+          <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {content.trim() || 'Note'}
+          </Box>
+        )}
         <Box
           className="note-controls"
-          sx={{ display: 'flex', alignItems: 'center', gap: 0.25, opacity: 0, transition: 'opacity 0.15s' }}
+          sx={{ ml: 'auto', opacity: 0, transition: 'opacity 0.15s', display: isMinimized ? 'none' : 'flex' }}
           onPointerDown={(e) => e.stopPropagation()}
         >
           <IconButton
@@ -321,19 +347,6 @@ const NoteCard: React.FC<Props> = ({
             <PaletteOutlinedIcon sx={{ fontSize: 13 }} />
           </IconButton>
         </Box>
-        <Box
-          className="note-controls"
-          sx={{ opacity: 0, transition: 'opacity 0.15s' }}
-          onPointerDown={(e) => e.stopPropagation()}
-        >
-          <IconButton
-            size="small"
-            onClick={handleRemove}
-            sx={{ p: 0.25, color: palette.text, opacity: 0.55, '&:hover': { opacity: 1, bgcolor: 'rgba(0,0,0,0.06)' } }}
-          >
-            <CloseIcon sx={{ fontSize: 13 }} />
-          </IconButton>
-        </Box>
       </Box>
 
       {showColorPicker && (
@@ -378,8 +391,9 @@ const NoteCard: React.FC<Props> = ({
         </Box>
       )}
 
-      {/* Editable content */}
-      <Box sx={{ flex: 1, p: 1, pt: 0.25, display: 'flex', minHeight: 0 }}>
+      {/* Editable content. Fullscreen = focus-writing mode: reading-size type in a centered column, like Bear/Arc, not 12px lost in a 2800px card. */}
+      {!isMinimized && (
+      <Box sx={{ flex: 1, p: 1, pt: 0.25, display: 'flex', justifyContent: 'center', minHeight: 0 }}>
         <textarea
           ref={textareaRef}
           value={content}
@@ -396,15 +410,17 @@ const NoteCard: React.FC<Props> = ({
             background: 'transparent',
             color: palette.text,
             fontFamily: c.font.sans,
-            fontSize: '0.85rem',
-            lineHeight: 1.45,
-            padding: 0,
+            fontSize: isFullscreen ? 'clamp(1.1rem, 1.3vw, 1.5rem)' : '0.85rem',
+            lineHeight: isFullscreen ? 1.6 : 1.45,
+            padding: isFullscreen ? '4vh 0 0' : 0,
+            maxWidth: isFullscreen ? 'min(72ch, 82%)' : undefined,
           }}
         />
       </Box>
+      )}
 
       {/* Resize handles */}
-      {HANDLE_DEFS.map(({ dir, sx }) => (
+      {!isMinimized && HANDLE_DEFS.map(({ dir, sx }) => (
         <Box
           key={dir}
           onPointerDown={handleResizeDown(dir)}
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
new file mode 100644
index 00000000..dd5f9599
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import { TILE_ZONES } from './tileZones';
+
+interface WindowControlsProps {
+  onClose: () => void;
+  onMinimize: () => void;
+  onTile: (zone: string) => void; // a TILE_ZONES key, or 'restore'
+  tiled?: boolean;
+}
+
+// macOS-style traffic lights on every card = the "AI OS" window feel. Grey at rest so a canvas
+// full of cards isn't a wall of color; they colorize when the parent .osw-card is hovered, and the
+// × – + symbols reveal on hovering the group. Hovering the GREEN dot opens the tiling menu (Fill,
+// Halves, Quarters, Thirds), exactly like macOS; clicking green = Full Screen (or restore if tiled).
+const RED = '#ff5f57';
+const YELLOW = '#febc2e';
+const GREEN = '#28c840';
+
+const GROUPS: { label: string; zones: string[] }[] = [
+  { label: 'Fill & Halves', zones: ['fill', 'left', 'right', 'top', 'bottom'] },
+  { label: 'Quarters', zones: ['tl', 'tr', 'bl', 'br'] },
+  { label: 'Thirds', zones: ['t3l', 't3c', 't3r'] },
+];
+
+const dotSx = (color: string): Record<string, unknown> => ({
+  width: 12, height: 12, p: 0, m: 0, borderRadius: '50%', border: '0.5px solid rgba(0,0,0,0.06)',
+  background: '#cccac4', cursor: 'pointer', position: 'relative', display: 'flex', alignItems: 'center',
+  justifyContent: 'center', lineHeight: 1, transition: 'background 150ms',
+  '.osw-card:hover &': { background: color },
+  '& > span': { fontSize: 9, fontWeight: 800, lineHeight: 1, color: 'rgba(0,0,0,0.5)', opacity: 0, transition: 'opacity 120ms', pointerEvents: 'none' },
+});
+
+function WindowControls({ onClose, onMinimize, onTile, tiled }: WindowControlsProps): React.ReactElement {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const closeTimer = useRef<number | null>(null);
+  const openMenu = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
+  const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
+  const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
+
+  const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
+    <Box component="button" type="button" aria-label={label}
+      onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick(); }} onPointerDown={stop} sx={dotSx(color)}>
+      <span>{symbol}</span>
+    </Box>
+  );
+
+  return (
+    <Box className="osw-window-lights" onPointerDown={stop}
+      sx={{ display: 'flex', gap: '8px', alignItems: 'center', flex: 'none', '&:hover span': { opacity: 1 } }}>
+      {btn(RED, '×', onClose, 'Close')}
+      {btn(YELLOW, '–', onMinimize, 'Minimize')}
+      <Box sx={{ position: 'relative', display: 'flex', alignItems: 'center' }}
+        onMouseEnter={openMenu} onMouseLeave={scheduleClose}>
+        <Box component="button" type="button" aria-label={tiled ? 'Exit Full Screen' : 'Full Screen'}
+          onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile(tiled ? 'restore' : 'fullscreen'); }}
+          onPointerDown={stop} sx={dotSx(GREEN)}>
+          <span>{tiled ? '–' : '+'}</span>
+        </Box>
+        <Box className="osw-tilemenu" onPointerDown={stop} onClick={stop}
+          onMouseEnter={openMenu} onMouseLeave={scheduleClose}
+          sx={{
+            position: 'absolute', top: 19, left: -8, width: 216, background: '#FFFFFF',
+            border: '1px solid rgba(0,0,0,0.06)', borderRadius: '12px', boxShadow: '0 .5rem 2rem rgba(0,0,0,.14)',
+            p: 1.25, zIndex: 1200, transformOrigin: 'top left',
+            opacity: menuOpen ? 1 : 0, transform: menuOpen ? 'none' : 'translateY(-6px) scale(0.96)',
+            pointerEvents: menuOpen ? 'auto' : 'none', transition: 'opacity .16s, transform .18s cubic-bezier(.3,.9,.3,1)',
+          }}>
+          {GROUPS.map((g) => (
+            <Box key={g.label} sx={{ mb: 0.75, '&:last-of-type': { mb: 0 } }}>
+              <Box sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(115,114,108,0.65)', textTransform: 'uppercase', mb: 0.5 }}>{g.label}</Box>
+              <Box sx={{ display: 'flex', gap: '7px' }}>
+                {g.zones.map((zone) => {
+                  const z = TILE_ZONES[zone];
+                  return (
+                    <Box key={zone} role="button" aria-label={zone}
+                      onClick={(e: React.MouseEvent) => { e.stopPropagation(); setMenuOpen(false); onTile(zone); }}
+                      sx={{ position: 'relative', flex: 1, height: 32, border: '1px solid rgba(0,0,0,0.08)', borderRadius: '6px', background: '#F5F4ED', cursor: 'pointer', overflow: 'hidden', transition: 'border-color .12s, background .12s', '&:hover': { borderColor: '#ae5630', background: '#ae56300d' } }}>
+                      <Box sx={{ position: 'absolute', left: `${z.x * 100 + 8}%`, top: `${z.y * 100 + 14}%`, width: `${z.w * 100 - 16}%`, height: `${z.h * 100 - 28}%`, background: '#ae5630', opacity: 0.8, borderRadius: '2px' }} />
+                    </Box>
+                  );
+                })}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default WindowControls;
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
new file mode 100644
index 00000000..e2d8660b
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -0,0 +1,103 @@
+import React from 'react';
+
+// macOS-style tiling zones (fractions of the workspace) + the math to render a tiled card at a
+// screen-space viewport region WITHOUT leaving the transformed canvas layer, so a browser/app
+// card's webview is never remounted (which would log the user out). The card stays a child of the
+// pan/zoom layer; we counter-transform (scale 1/zoom) and place it in canvas coords so it lands
+// pixel-exact at the viewport region at 100% content scale. Recompute on pan/zoom to stay put.
+
+export const TILE_ZONES: Record<string, { x: number; y: number; w: number; h: number }> = {
+  fill:   { x: 0,     y: 0,   w: 1,     h: 1 },
+  left:   { x: 0,     y: 0,   w: 0.5,   h: 1 },
+  right:  { x: 0.5,   y: 0,   w: 0.5,   h: 1 },
+  top:    { x: 0,     y: 0,   w: 1,     h: 0.5 },
+  bottom: { x: 0,     y: 0.5, w: 1,     h: 0.5 },
+  tl:     { x: 0,     y: 0,   w: 0.5,   h: 0.5 },
+  tr:     { x: 0.5,   y: 0,   w: 0.5,   h: 0.5 },
+  bl:     { x: 0,     y: 0.5, w: 0.5,   h: 0.5 },
+  br:     { x: 0.5,   y: 0.5, w: 0.5,   h: 0.5 },
+  t3l:    { x: 0,     y: 0,   w: 1 / 3, h: 1 },
+  t3c:    { x: 1 / 3, y: 0,   w: 1 / 3, h: 1 },
+  t3r:    { x: 2 / 3, y: 0,   w: 1 / 3, h: 1 },
+};
+
+// macOS Sequoia leaves a small gap between tiled windows; we match it.
+const GAP = 8;
+
+export interface TiledStyle {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  transform: string;
+  transformOrigin: string;
+}
+
+// The workspace = the canvas viewport element (already below the app header, dock floats over it),
+// measured live so we never hardcode chrome sizes that drift. Its screen origin cancels out of the
+// math below because the card shares the viewport's coordinate system, so we only need its size.
+function workspaceSize(): { w: number; h: number } {
+  const el = document.querySelector('[data-canvas-viewport]');
+  if (el) {
+    const r = el.getBoundingClientRect();
+    if (r.width > 0 && r.height > 0) return { w: r.width, h: r.height };
+  }
+  return { w: window.innerWidth, h: window.innerHeight };
+}
+
+export function computeTiledStyle(zone: string, panX: number, panY: number, zoom: number): TiledStyle | null {
+  // 'fullscreen' = macOS full screen: the app chrome hides (AppShell/DashboardCanvas react to
+  // selectFullscreenCardId) and the card covers the window minus a thin PEEK sliver, the Zen/Arc
+  // touch where the surroundings stay ever-so-slightly visible. Target is WINDOW space here, so
+  // the viewport origin does NOT cancel; once the chrome collapses that origin goes to ~0 anyway.
+  if (zone === 'fullscreen') {
+    const PEEK = 10;
+    const el = document.querySelector('[data-canvas-viewport]');
+    const r = el ? el.getBoundingClientRect() : null;
+    const ox = r ? r.left : 0;
+    const oy = r ? r.top : 0;
+    return {
+      left: (PEEK - ox - panX) / zoom,
+      top: (PEEK - oy - panY) / zoom,
+      width: window.innerWidth - PEEK * 2,
+      height: window.innerHeight - PEEK * 2,
+      transform: `scale(${1 / zoom})`,
+      transformOrigin: 'top left',
+    };
+  }
+  const z = TILE_ZONES[zone];
+  if (!z) return null;
+  const { w: vpW, h: vpH } = workspaceSize();
+  // Screen region (vpX + GAP, vpY + GAP, ...) converted to canvas coords: card lives inside the
+  // pan/zoom layer, so screen = viewportOrigin + pan + canvasPos*zoom, and viewportOrigin cancels.
+  return {
+    left: (z.x * vpW + GAP - panX) / zoom,
+    top: (z.y * vpH + GAP - panY) / zoom,
+    width: z.w * vpW - GAP * 2,
+    height: z.h * vpH - GAP * 2,
+    transform: `scale(${1 / zoom})`,
+    transformOrigin: 'top left',
+  };
+}
+
+// Tiled geometry depends on live DOM measurements, so re-render when the workspace resizes:
+// the chrome collapsing on fullscreen-enter, a window resize, a banner appearing. The initial
+// ResizeObserver fire also re-measures right after the same-commit layout change that set the zone.
+export function useTiledStyle(zone: string | undefined, panX: number, panY: number, zoom: number): TiledStyle | null {
+  const [, bump] = React.useReducer((n: number) => n + 1, 0);
+  React.useEffect(() => {
+    if (!zone) return undefined;
+    const el = document.querySelector('[data-canvas-viewport]');
+    const ro = new ResizeObserver(() => bump());
+    if (el) ro.observe(el);
+    const onResize = (): void => bump();
+    window.addEventListener('resize', onResize);
+    // The chrome collapse commits in the same flush that set the zone, so the first compute
+    // measures the pre-collapse viewport; re-measure after layout settles. Timeouts, not rAF:
+    // rAF (and ResizeObserver delivery, which rides it) freezes in non-focused tabs.
+    // 700ms outlives the banner Collapse (350ms) plus easing tail; RO covers focused tabs live.
+    const timers = [60, 250, 700].map((ms) => window.setTimeout(() => bump(), ms));
+    return () => { ro.disconnect(); window.removeEventListener('resize', onResize); timers.forEach((t) => window.clearTimeout(t)); };
+  }, [zone]);
+  return zone ? computeTiledStyle(zone, panX, panY, zoom) : null;
+}
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index 772607b1..e6016fc1 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -144,6 +144,10 @@ export interface DashboardLayoutState {
   recentlyClosed: ClosedCard[];
   glowingBrowserCards: Record<string, { sourceId: string; fading: boolean; label?: string }>;
   glowingAgentCards: Record<string, { sourceId: string; fading: boolean; sourceYRatio?: number; label?: string }>;
+  /** Window controls: cards collapsed to a title pill (many at once). Keyed by any card id (session/note/browser/view/workflow). */
+  minimizedCards: Record<string, boolean>;
+  /** macOS-style tiling: card id -> zone ('fullscreen' | 'fill' | 'left'|'right'|'top'|'bottom' | 'tl'|'tr'|'bl'|'br' | 't3l'|'t3c'|'t3r'). A tiled card renders at that viewport region (webview stays mounted); 'fullscreen' also hides the app chrome. */
+  tiledCards: Record<string, string>;
   persistedExpandedSessionIds: string[];
   nextZOrder: number;
   loading: boolean;
@@ -193,6 +197,8 @@ const initialState: DashboardLayoutState = {
   recentlyClosed: [],
   glowingBrowserCards: {},
   glowingAgentCards: {},
+  minimizedCards: {},
+  tiledCards: {},
   persistedExpandedSessionIds: [],
   nextZOrder: 1,
   loading: false,
@@ -530,6 +536,34 @@ const dashboardLayoutSlice = createSlice({
   name: 'dashboardLayout',
   initialState,
   reducers: {
+    // Window controls (traffic lights). Minimize toggles a per-card pill; tiling snaps a card to a
+    // macOS-style viewport zone (green = 'fill'). Minimizing an un-tiles and vice-versa, so a card
+    // is never both pill'd and tiled at once.
+    toggleMinimizeCard(state, action: PayloadAction<{ cardId: string }>) {
+      const id = action.payload.cardId;
+      if (state.minimizedCards[id]) {
+        delete state.minimizedCards[id];
+      } else {
+        state.minimizedCards[id] = true;
+        if (state.tiledCards[id]) delete state.tiledCards[id];
+      }
+    },
+    setTiledCard(state, action: PayloadAction<{ cardId: string; zone: string }>) {
+      const { cardId, zone } = action.payload;
+      state.tiledCards[cardId] = zone;
+      if (state.minimizedCards[cardId]) delete state.minimizedCards[cardId];
+    },
+    clearTiledCard(state, action: PayloadAction<string>) {
+      if (state.tiledCards[action.payload]) delete state.tiledCards[action.payload];
+    },
+    clearAllTiles(state) {
+      state.tiledCards = {};
+    },
+    clearCardWindowState(state, action: PayloadAction<string>) {
+      const id = action.payload;
+      if (state.minimizedCards[id]) delete state.minimizedCards[id];
+      if (state.tiledCards[id]) delete state.tiledCards[id];
+    },
     setCardPosition(
       state,
       action: PayloadAction<{ sessionId: string; x: number; y: number }>
@@ -1729,6 +1763,11 @@ export const {
   setGlowingAgentCard,
   fadeGlowingAgentCard,
   clearGlowingAgentCard,
+  toggleMinimizeCard,
+  setTiledCard,
+  clearTiledCard,
+  clearAllTiles,
+  clearCardWindowState,
   clearPendingFocusBrowserId,
   clearPendingFocusViewCardId,
   addWorkflowCard,
@@ -1783,4 +1822,9 @@ export const reopenLastClosed = createAsyncThunk(
   }
 );
 
+export const selectFullscreenCardId = (state: { dashboardLayout: DashboardLayoutState }): string | null => {
+  const entry = Object.entries(state.dashboardLayout.tiledCards).find(([, zone]) => zone === 'fullscreen');
+  return entry ? entry[0] : null;
+};
+
 export default dashboardLayoutSlice.reducer;

From 9f730d2ff1f7bb3af246d9cdd2d3b01fa0a1929d Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:46 -0700
Subject: [PATCH 059/248] [eric] shell: arc ux batch (inline app rename,
 undoable delete, hover peek, dashboard swipe, ctrl shortcuts on windows)

---
 .../src/app/components/Layout/AppShell.tsx    | 476 +++++++++++++-----
 .../interaction/useDashboardShortcuts.ts      |   9 +-
 2 files changed, 346 insertions(+), 139 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 2b47615c..95eb2a26 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -21,8 +21,11 @@ import { LayoutDashboard } from 'lucide-react';
 import { LayoutGrid } from 'lucide-react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Settings as LucideSettings } from 'lucide-react';
-import { ArrowLeft, ArrowRight, Plus, Clock } from 'lucide-react';
+import { ArrowLeft, ArrowRight, Plus, Clock, Search as SearchGlyph, X as CloseGlyph } from 'lucide-react';
+import ButtonBase from '@mui/material/ButtonBase';
 import { AnimatedPanelLeft } from './animatedIcons';
+
+const SEARCH_HOTKEY_LABEL = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? '⌘K' : 'Ctrl+K';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
 import CloseIcon from '@mui/icons-material/Close';
@@ -40,9 +43,10 @@ import { shallowEqual } from 'react-redux';
 import { fetchDashboards, createDashboard, renameDashboard } from '@/shared/state/dashboardsSlice';
 import { Typewriter } from '@/app/components/feedback/Animated';
 import { setPendingFocusAgentId } from '@/shared/state/tempStateSlice';
-import { addBrowserCard, addBrowserTab, cycleBrowserTab, reopenLastClosed, addViewCard } from '@/shared/state/dashboardLayoutSlice';
+import { addBrowserCard, addBrowserTab, cycleBrowserTab, reopenLastClosed, addViewCard, selectFullscreenCardId } from '@/shared/state/dashboardLayoutSlice';
 import { setPendingBrowserUrl } from '@/shared/state/tempStateSlice';
-import { fetchOutputs } from '@/shared/state/outputsSlice';
+import { fetchOutputs, deleteOutput, updateOutput } from '@/shared/state/outputsSlice';
+import { removeViewCardCleanly } from '@/shared/viewTeardown';
 import { setInstalling } from '@/shared/state/updateSlice';
 import { findBrowserByWebContentsId } from '@/shared/browserRegistry';
 import { byPreviewRecency } from '@/shared/previewOrder';
@@ -79,9 +83,22 @@ const AppShell: React.FC = () => {
   const [dashboardsExpanded, setDashboardsExpanded] = useState(true);
   const [appsExpanded, setAppsExpanded] = useState(true);
   // Starts collapsed so a fresh boot lands on a clean canvas; the toggle brings it back.
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+  // Arc/Zen: the sidebar is the primary chrome (search + nav live here), shown by default.
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [renamingDashboardId, setRenamingDashboardId] = useState<string | null>(null);
+  const [renamingAppId, setRenamingAppId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
+  // Arc-style delete: the row vanishes at once but the real delete waits behind an Undo toast.
+  const [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null);
+  const pendingDeleteRef = useRef<{ id: string; name: string } | null>(null);
+  const deleteTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Arc-style peek: hovering an app row (with intent, not a fly-by) floats a preview beside the sidebar.
+  const [peek, setPeek] = useState<{ name: string; description: string; thumbnail: string | null; top: number } | null>(null);
+  const peekTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Arc-style Space switching: a horizontal two-finger swipe over the sidebar flips dashboards. Kept OFF
+  // the canvas (which owns horizontal pan) so the two never fight. accum + cooldown = one flip per swipe.
+  const swipeAccumRef = useRef(0);
+  const swipeCooldownRef = useRef(false);
   const [sidebarWidth, setSidebarWidth] = useState(() => {
     try {
       const stored = localStorage.getItem(SIDEBAR_WIDTH_KEY);
@@ -420,11 +437,61 @@ const AppShell: React.FC = () => {
 
   const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard/');
   const isDashboardViewActive = location.pathname.startsWith('/dashboard/');
+  // macOS full screen: a fullscreen-tiled card owns the window, so every shell chrome piece hides. Gated on the dashboard view so navigating away restores the chrome even mid-fullscreen.
+  const fullscreenCardId = useAppSelector(selectFullscreenCardId);
+  // Zen compact mode: the sidebar is the only chrome now, so whenever it's "away" (user collapsed it,
+  // OR a fullscreen card hides everything) a left-edge hover floats it back in as an overlay.
+  const fsActive = !!fullscreenCardId && isDashboardViewActive;
+  const sidebarAway = (sidebarCollapsed || fsActive) && isDashboardViewActive;
+  const [sidePeek, setSidePeek] = useState(false);
+  useEffect(() => { if (!sidebarAway) setSidePeek(false); }, [sidebarAway]);
+  useEffect(() => {
+    if (!sidePeek) return undefined;
+    const onMove = (e: MouseEvent): void => { if (e.clientX > sidebarWidth + 60) setSidePeek(false); };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, [sidePeek, sidebarWidth]);
+  // Fullscreen still hides the top-center island anchor + banners; the sidebar floats in on peek.
+  const fsHideChrome = fsActive;
+  // In overlay mode the panel stays MOUNTED (so it can slide out, not vanish); sidePeek only drives the slide.
+  const sideOverlay = sidebarAway;
   const isAppsRoute = false;  // /apps route removed; app cards live on the dashboard now.
   const activeDashboardId = location.pathname.startsWith('/dashboard/')
     ? location.pathname.split('/dashboard/')[1]
     : null;
 
+  // Flip to the previous/next dashboard, clamped at the ends (no surprise wrap). Shared by the sidebar
+  // swipe and the Cmd/Ctrl+Alt+arrow keyboard path.
+  const switchDashboard = useCallback((dir: -1 | 1) => {
+    if (dashboardList.length < 2) return;
+    const idx = dashboardList.findIndex((d) => d.id === activeDashboardId);
+    if (idx < 0) return;
+    const next = Math.min(dashboardList.length - 1, Math.max(0, idx + dir));
+    if (next !== idx) navigate(`/dashboard/${dashboardList[next].id}`);
+  }, [dashboardList, activeDashboardId, navigate]);
+
+  const handleSidebarSwipe = useCallback((e: React.WheelEvent) => {
+    if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) { swipeAccumRef.current = 0; return; }  // vertical = list scroll
+    if (swipeCooldownRef.current) return;
+    swipeAccumRef.current += e.deltaX;
+    if (Math.abs(swipeAccumRef.current) >= 80) {
+      switchDashboard(swipeAccumRef.current > 0 ? 1 : -1);
+      swipeAccumRef.current = 0;
+      swipeCooldownRef.current = true;
+      setTimeout(() => { swipeCooldownRef.current = false; }, 450);
+    }
+  }, [switchDashboard]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey) || !e.altKey || e.shiftKey) return;
+      if (e.key === 'ArrowLeft') { e.preventDefault(); switchDashboard(-1); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); switchDashboard(1); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [switchDashboard]);
+
   const [lastDashboardId, setLastDashboardId] = useLastDashboardId();
   // Apps no longer have a full-page editor; clicking one in the sidebar drops (or focuses) its live card on the current dashboard. Fold-in of the old App Builder.
   const navigateToApp = useCallback((id: string) => {
@@ -433,6 +500,58 @@ const AppShell: React.FC = () => {
       navigate(`/dashboard/${lastDashboardId}`);
     }
   }, [dispatch, navigate, lastDashboardId, location.pathname]);
+  // The real delete, run only once Undo has lapsed: tear the live view card down cleanly (never rip a
+  // webview GPU surface mid-composite), then delete the output for good.
+  const commitDeleteApp = useCallback((id: string) => {
+    void removeViewCardCleanly(id, dispatch);
+    dispatch(deleteOutput(id));
+  }, [dispatch]);
+
+  // Arc-style delete: the row hides immediately and an Undo toast holds for 6s. Undo restores it;
+  // silence commits it. A second delete flushes the first (only one pending at a time).
+  const handleDeleteApp = useCallback((e: React.MouseEvent, id: string, name: string) => {
+    e.stopPropagation();
+    if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current);
+    const prev = pendingDeleteRef.current;
+    if (prev && prev.id !== id) commitDeleteApp(prev.id);
+    const entry = { id, name };
+    pendingDeleteRef.current = entry;
+    setPendingDelete(entry);
+    deleteTimerRef.current = setTimeout(() => {
+      commitDeleteApp(id);
+      pendingDeleteRef.current = null;
+      setPendingDelete(null);
+      deleteTimerRef.current = null;
+    }, 6000);
+  }, [commitDeleteApp]);
+
+  const handleUndoDeleteApp = useCallback(() => {
+    if (deleteTimerRef.current) { clearTimeout(deleteTimerRef.current); deleteTimerRef.current = null; }
+    pendingDeleteRef.current = null;
+    setPendingDelete(null);
+  }, []);
+
+  // Leaving the app while a delete is still pending shouldn't strand a half-deleted ghost: commit it.
+  useEffect(() => () => {
+    if (deleteTimerRef.current) { clearTimeout(deleteTimerRef.current); }
+    if (pendingDeleteRef.current) commitDeleteApp(pendingDeleteRef.current.id);
+    if (peekTimerRef.current) clearTimeout(peekTimerRef.current);
+  }, [commitDeleteApp]);
+
+  const handleStartAppRename = (id: string, currentName: string) => {
+    setRenamingDashboardId(null);
+    setRenamingAppId(id);
+    setRenameValue(currentName);
+  };
+
+  const handleAppRenameSubmit = (id: string) => {
+    const trimmed = renameValue.trim();
+    const previousName = outputItems[id]?.name;
+    if (trimmed && trimmed !== previousName) {
+      dispatch(updateOutput({ id, name: trimmed }));
+    }
+    setRenamingAppId(null);
+  };
   // With the /apps route gone, an app row is "active" when its card is open on the dashboard, not from the URL.
   const openViewCardOutputIds = useAppSelector((s) =>
     new Set(Object.values(s.dashboardLayout.viewCards).map((vc) => vc.output_id)),
@@ -453,6 +572,7 @@ const AppShell: React.FC = () => {
   };
 
   const handleStartDashboardRename = (id: string, currentName: string) => {
+    setRenamingAppId(null);
     setRenamingDashboardId(id);
     setRenameValue(currentName);
   };
@@ -480,116 +600,24 @@ const AppShell: React.FC = () => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary }}>
+      {sidebarAway && !sidePeek && (
+        <Box onMouseEnter={() => setSidePeek(true)} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
+      )}
+      {/* Top bar dropped (Arc/Zen): a zero-height anchor left only to float the agent-activity island at top-center; the island renders nothing when idle. */}
       <Box
         sx={{
-          height: 38,
+          height: 0,
           flexShrink: 0,
-          bgcolor: 'transparent',
-          display: 'flex',
-          alignItems: 'center',
           position: 'relative',
           overflow: 'visible',
-          WebkitAppRegion: 'drag',
-          userSelect: 'none',
-          pl: '78px',
-          gap: 0.25,
+          zIndex: 10,
+          display: fsHideChrome ? 'none' : 'block',
         }}
       >
-        <Tooltip title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}>
-          <IconButton
-            size="small"
-            onClick={() => setSidebarCollapsed((prev) => !prev)}
-            // Onboarding runtime reads aria-expanded to detect a collapsed sidebar.
-            data-onboarding="sidebar-toggle"
-            aria-expanded={!sidebarCollapsed}
-            sx={{
-              WebkitAppRegion: 'no-drag',
-              color: c.text.tertiary,
-              p: 0.5,
-              borderRadius: 1,
-              '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
-            }}
-          >
-            <AnimatedPanelLeft size={18} />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title="Back">
-          {/* span wrapper so a disabled button still shows its Tooltip; lucide
-              glyph + hover-slide kept from the redesign, disabled-state from #68. */}
-          <span>
-            <IconButton
-              size="small"
-              onClick={() => navigate(-1)}
-              disabled={!canGoBack}
-              sx={{
-                WebkitAppRegion: 'no-drag',
-                color: c.text.tertiary,
-                p: 0.5,
-                borderRadius: 1,
-                '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
-                '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
-                '&:hover svg': { transform: 'translateX(-2px)' },
-              }}
-            >
-              <ArrowLeft size={18} />
-            </IconButton>
-          </span>
-        </Tooltip>
-        <Tooltip title="Forward">
-          <span>
-            <IconButton
-              size="small"
-              onClick={() => navigate(1)}
-              disabled={!canGoForward}
-              sx={{
-                WebkitAppRegion: 'no-drag',
-                color: c.text.tertiary,
-                p: 0.5,
-                borderRadius: 1,
-                '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
-                '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
-                '&:hover svg': { transform: 'translateX(2px)' },
-              }}
-            >
-              <ArrowRight size={18} />
-            </IconButton>
-          </span>
-        </Tooltip>
-
         <DynamicIsland />
-
-        <Box sx={{ flex: 1 }} />
-
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.75,
-            pr: 1.5,
-            WebkitAppRegion: 'no-drag',
-          }}
-        >
-          <Box
-            component="img"
-            src="./logo.png"
-            alt="OpenSwarm"
-            sx={{ width: 20, height: 20, borderRadius: 0.5, opacity: 0.85 }}
-          />
-          <Typography
-            sx={{
-              color: c.text.secondary,
-              fontSize: '0.9rem',
-              fontWeight: 600,
-              letterSpacing: 0.2,
-              lineHeight: 1,
-            }}
-          >
-            OpenSwarm
-          </Typography>
-        </Box>
       </Box>
 
-      <Collapse in={showWarningBanner} timeout={350} unmountOnExit>
+      <Collapse in={showWarningBanner && !fsHideChrome} timeout={350} unmountOnExit>
         <Box
           sx={{
             display: 'flex',
@@ -634,7 +662,7 @@ const AppShell: React.FC = () => {
         </Box>
       </Collapse>
 
-      <Collapse in={showFreeTrialNudge} timeout={300} unmountOnExit>
+      <Collapse in={showFreeTrialNudge && !fsHideChrome} timeout={300} unmountOnExit>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2, py: 0.5, flexShrink: 0 }}>
           <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, flex: 1, letterSpacing: '0.01em' }}>
             {freeTrialSpent
@@ -662,7 +690,7 @@ const AppShell: React.FC = () => {
         </Box>
       </Collapse>
 
-      <Collapse in={showUsageNudge} timeout={300} unmountOnExit>
+      <Collapse in={showUsageNudge && !fsHideChrome} timeout={300} unmountOnExit>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2, py: 0.5, flexShrink: 0 }}>
           {/* the bar is the message: how full your Pro window is. calm accent, never red. */}
           <Box sx={{ width: 132, height: 5, borderRadius: 3, bgcolor: c.border.medium, overflow: 'hidden', flexShrink: 0 }}>
@@ -686,7 +714,7 @@ const AppShell: React.FC = () => {
         </Box>
       </Collapse>
 
-      {showUpdateBanner && (
+      {showUpdateBanner && !fsHideChrome && (
         <Box
           sx={{
             display: 'flex',
@@ -782,17 +810,72 @@ const AppShell: React.FC = () => {
       )}
 
       <Box sx={{ display: 'flex', flex: 1, minHeight: 0 }}>
-      {!sidebarCollapsed && (
+      {((!sidebarCollapsed && !fsHideChrome) || sideOverlay) && (
       <>
       <Box
+        onMouseLeave={() => { if (sideOverlay) setSidePeek(false); }}
+        onWheel={handleSidebarSwipe}
         sx={{
           width: sidebarWidth,
           flexShrink: 0,
           bgcolor: c.bg.secondary,
           display: 'flex',
           flexDirection: 'column',
+          // Zen/Arc compact mode: a detached, rounded panel that SLIDES in and out from the left edge
+          // (sidePeek drives the transform both ways; it stays mounted so leaving glides it away, not vanish).
+          ...(sideOverlay ? {
+            position: 'fixed', top: 10, left: 10, bottom: 10, zIndex: 1000002,
+            borderRadius: '14px', overflow: 'hidden',
+            boxShadow: '0 16px 48px rgba(0,0,0,0.34)', border: `1px solid ${c.border.medium}`,
+            transform: sidePeek ? 'translateX(0)' : 'translateX(-118%)',
+            transition: 'transform 240ms cubic-bezier(0.22,1,0.36,1)',
+            pointerEvents: sidePeek ? 'auto' : 'none',
+          } : {}),
         }}
       >
+        {/* Sidebar header = the app's chrome home (Arc/Zen): window-light clearance, back/forward, collapse, then the search command bar. */}
+        <Box sx={{ pt: '30px', px: 1, pb: 0.75, display: 'flex', flexDirection: 'column', gap: 0.75, WebkitAppRegion: 'drag', flexShrink: 0 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, WebkitAppRegion: 'no-drag' }}>
+            <Tooltip title="Back">
+              <span>
+                <IconButton size="small" onClick={() => navigate(-1)} disabled={!canGoBack}
+                  sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '& svg': { transition: 'transform 0.2s cubic-bezier(0.34,1.56,0.64,1)' }, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` }, '&:hover svg': { transform: 'translateX(-2px)' } }}>
+                  <ArrowLeft size={17} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip title="Forward">
+              <span>
+                <IconButton size="small" onClick={() => navigate(1)} disabled={!canGoForward}
+                  sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '& svg': { transition: 'transform 0.2s cubic-bezier(0.34,1.56,0.64,1)' }, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` }, '&:hover svg': { transform: 'translateX(2px)' } }}>
+                  <ArrowRight size={17} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Box sx={{ flex: 1 }} />
+            <Tooltip title="Hide sidebar">
+              <IconButton size="small" onClick={() => setSidebarCollapsed(true)}
+                data-onboarding="sidebar-toggle" aria-expanded
+                sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` } }}>
+                <AnimatedPanelLeft size={17} />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <ButtonBase
+            onClick={() => window.dispatchEvent(new CustomEvent('openswarm:open-search'))}
+            sx={{
+              WebkitAppRegion: 'no-drag',
+              display: 'flex', alignItems: 'center', gap: 1, width: '100%', justifyContent: 'flex-start',
+              px: 1.25, py: 0.9, borderRadius: 2, border: `1px solid ${c.border.medium}`, bgcolor: c.bg.surface,
+              color: c.text.tertiary, transition: 'border-color 0.15s, background 0.15s',
+              '&:hover': { borderColor: c.border.strong, bgcolor: c.bg.page },
+            }}
+          >
+            <SearchGlyph size={15} />
+            <Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.86rem', color: c.text.muted }}>Search</Typography>
+            <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
+          </ButtonBase>
+        </Box>
         <Box sx={{
           flex: 1,
           overflow: 'auto',
@@ -1024,44 +1107,99 @@ const AppShell: React.FC = () => {
                 }}
               >
                 {appsList.map((app) => {
+                  if (pendingDelete?.id === app.id) return null;  // hidden while its Undo toast is up
                   const isActive = openViewCardOutputIds.has(app.id);
+                  const isRenamingApp = renamingAppId === app.id;
+                  const appName = app.name || 'Untitled App';
                   return (
                     <Box
                       key={app.id}
-                      onClick={() => navigateToApp(app.id)}
+                      onClick={() => { if (!isRenamingApp) navigateToApp(app.id); }}
+                      onMouseEnter={(e) => {
+                        if (isRenamingApp) return;
+                        const top = e.currentTarget.getBoundingClientRect().top;
+                        if (peekTimerRef.current) clearTimeout(peekTimerRef.current);
+                        peekTimerRef.current = setTimeout(() => setPeek({ name: appName, description: app.description || '', thumbnail: app.thumbnail || null, top }), 350);
+                      }}
+                      onMouseLeave={() => {
+                        if (peekTimerRef.current) { clearTimeout(peekTimerRef.current); peekTimerRef.current = null; }
+                        setPeek(null);
+                      }}
                       sx={{
                         display: 'flex',
                         alignItems: 'center',
                         gap: 0.75,
                         pl: 1.25,
-                        pr: 1,
-                        py: 0.5,
+                        pr: 0.5,
+                        py: isRenamingApp ? 0.25 : 0.5,
                         mx: 0.5,
-                        cursor: 'pointer',
+                        cursor: isRenamingApp ? 'default' : 'pointer',
                         borderRadius: `${c.radius.md}px`,
                         bgcolor: isActive ? `${c.accent.primary}40` : 'transparent',
                         '&:hover': { bgcolor: isActive ? `${c.accent.primary}55` : `${c.text.tertiary}0A` },
+                        '& .app-del-btn': { opacity: 0, transition: 'opacity 0.12s' },
+                        '&:hover .app-del-btn': { opacity: 1 },
                         transition: 'background-color 0.12s',
                       }}
                     >
-                      <Typewriter value={app.name || 'Untitled App'} enabled={!!app.name && app.name !== 'Untitled App'}>
-                        {(t) => (
-                          <Typography
-                            sx={{
-                              color: isActive ? c.text.secondary : c.text.ghost,
-                              fontSize: '0.86rem',
-                              fontWeight: isActive ? 500 : 400,
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                              whiteSpace: 'nowrap',
-                              flex: 1,
-                              minWidth: 0,
-                            }}
+                      {isRenamingApp ? (
+                        <InputBase
+                          autoFocus
+                          value={renameValue}
+                          onChange={(e) => setRenameValue(e.target.value)}
+                          onBlur={() => handleAppRenameSubmit(app.id)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') handleAppRenameSubmit(app.id);
+                            if (e.key === 'Escape') setRenamingAppId(null);
+                          }}
+                          onClick={(e) => e.stopPropagation()}
+                          onFocus={(e) => e.target.select()}
+                          sx={{
+                            flex: 1,
+                            minWidth: 0,
+                            fontSize: '0.86rem',
+                            fontWeight: isActive ? 500 : 400,
+                            color: isActive ? c.text.secondary : c.text.ghost,
+                            py: 0,
+                            px: 0.5,
+                            borderRadius: 0.75,
+                            border: `1px solid ${c.accent.primary}80`,
+                            bgcolor: `${c.bg.page}`,
+                            '& input': { padding: '1px 0' },
+                          }}
+                        />
+                      ) : (
+                        <>
+                          <Typewriter value={appName} enabled={!!app.name && app.name !== 'Untitled App'}>
+                            {(t) => (
+                              <Typography
+                                onDoubleClick={(e) => { e.stopPropagation(); handleStartAppRename(app.id, appName); }}
+                                sx={{
+                                  color: isActive ? c.text.secondary : c.text.ghost,
+                                  fontSize: '0.86rem',
+                                  fontWeight: isActive ? 500 : 400,
+                                  overflow: 'hidden',
+                                  textOverflow: 'ellipsis',
+                                  whiteSpace: 'nowrap',
+                                  flex: 1,
+                                  minWidth: 0,
+                                }}
+                              >
+                                {t}
+                              </Typography>
+                            )}
+                          </Typewriter>
+                          <IconButton
+                            className="app-del-btn"
+                            size="small"
+                            aria-label={`Delete ${appName}`}
+                            onClick={(e) => handleDeleteApp(e, app.id, appName)}
+                            sx={{ p: 0.25, flexShrink: 0, color: c.text.ghost, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}18` } }}
                           >
-                            {t}
-                          </Typography>
-                        )}
-                      </Typewriter>
+                            <CloseGlyph size={13} />
+                          </IconButton>
+                        </>
+                      )}
                     </Box>
                   );
                 })}
@@ -1124,6 +1262,8 @@ const AppShell: React.FC = () => {
         onMouseDown={handleResizeStart}
         onDoubleClick={handleResizeDoubleClick}
         sx={{
+          // Hide the resize seam when the sidebar is a floating overlay (nothing to resize against).
+          display: sideOverlay ? 'none' : 'block',
           // 6px hit-target at -3px margin overlaps the seam so the drag region doesn't read as a visible empty strip.
           width: 6,
           marginLeft: '-3px',
@@ -1159,12 +1299,12 @@ const AppShell: React.FC = () => {
         overflow: 'hidden',
         bgcolor: c.bg.page,
         position: 'relative',
-        // Float the content as a rounded inset panel ("column pill"): the chrome (bg.secondary) frames it, so there are no divider lines, just air + radius.
-        mt: '6px',
-        mr: '6px',
-        mb: '6px',
-        ml: '6px',
-        borderRadius: '14px',
+        // Float the content as a rounded inset panel ("column pill"): the chrome (bg.secondary) frames it, so there are no divider lines, just air + radius. Fullscreen drops the frame entirely.
+        mt: fsHideChrome ? 0 : '6px',
+        mr: fsHideChrome ? 0 : '6px',
+        mb: fsHideChrome ? 0 : '6px',
+        ml: fsHideChrome ? 0 : '6px',
+        borderRadius: fsHideChrome ? 0 : '14px',
       }}>
         {/* Hidden (not unmounted) when the dashboard view is active so the persistent Dashboard layered above can take over. */}
         <Box
@@ -1263,6 +1403,72 @@ const AppShell: React.FC = () => {
           {updateStatus === 'downloaded' && `OpenSwarm${verSuffix} downloaded; restart to update`}
         </Alert>
       </Snackbar>
+
+      {/* Arc-style peek: a live-thumbnail preview beside the sidebar while hovering an app row. Non-interactive so it never steals the hover. */}
+      {peek && !sidebarCollapsed && (
+        <Box
+          sx={{
+            position: 'fixed',
+            left: sidebarWidth + 8,
+            top: Math.min(Math.max(peek.top - 8, 12), window.innerHeight - 232),
+            width: 264,
+            zIndex: 1400,
+            pointerEvents: 'none',
+            borderRadius: `${c.radius.lg}px`,
+            overflow: 'hidden',
+            bgcolor: c.bg.surface,
+            border: `1px solid ${c.border.medium}`,
+            boxShadow: c.shadow.lg,
+            '@keyframes peekIn': { from: { opacity: 0, transform: 'translateX(-6px)' }, to: { opacity: 1, transform: 'none' } },
+            animation: 'peekIn 0.14s ease-out',
+          }}
+        >
+          {peek.thumbnail ? (
+            <Box component="img" src={peek.thumbnail} alt="" sx={{ width: '100%', height: 150, objectFit: 'cover', objectPosition: 'top left', display: 'block' }} />
+          ) : (
+            <Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.78rem' }}>
+              No preview yet
+            </Box>
+          )}
+          <Box sx={{ p: 1.25 }}>
+            <Typography sx={{ fontWeight: 600, fontSize: '0.9rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
+            {peek.description && (
+              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                {peek.description}
+              </Typography>
+            )}
+          </Box>
+        </Box>
+      )}
+
+      {/* Arc-style Undo for a just-deleted app. Open while the delete is pending; our own 6s timer commits it and closes this. */}
+      <Snackbar
+        open={!!pendingDelete}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      >
+        <Alert
+          severity="info"
+          icon={false}
+          action={
+            <Button
+              size="small"
+              onClick={handleUndoDeleteApp}
+              sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8rem', minWidth: 'auto' }}
+            >
+              Undo
+            </Button>
+          }
+          sx={{
+            bgcolor: c.bg.surface,
+            color: c.text.primary,
+            border: `1px solid ${c.border.medium}`,
+            boxShadow: c.shadow.md,
+            '& .MuiAlert-action': { alignItems: 'center', pt: 0 },
+          }}
+        >
+          {`Deleted "${pendingDelete?.name ?? ''}"`}
+        </Alert>
+      </Snackbar>
     </Box>
   );
 };
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts
index fb42d328..96d5da6f 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts
@@ -32,16 +32,17 @@ export function useDashboardShortcuts({
   useEffect(() => {
     const parts = (newAgentShortcut || '').toLowerCase().split('+');
     const key = parts[parts.length - 1];
-    const needsMeta = parts.includes('meta');
-    const needsCtrl = parts.includes('ctrl');
+    // Cmd on Mac == Ctrl on Windows: collapse both into one "primary" modifier so a shortcut stored
+    // as meta+n still fires when a Windows user presses Ctrl+N (matches the metaKey||ctrlKey idiom used
+    // by every other handler in this file).
+    const needsPrimary = parts.includes('meta') || parts.includes('ctrl');
     const needsShift = parts.includes('shift');
     const needsAlt = parts.includes('alt');
 
     const handleShortcut = (e: KeyboardEvent) => {
       if (!isActive) return;  // Don't fire shortcuts when dashboard is hidden
       if (e.key.toLowerCase() !== key) return;
-      if (needsMeta !== e.metaKey) return;
-      if (needsCtrl !== e.ctrlKey) return;
+      if (needsPrimary !== (e.metaKey || e.ctrlKey)) return;
       if (needsShift !== e.shiftKey) return;
       if (needsAlt !== e.altKey) return;
       e.preventDefault();

From 60948ede517925f73038fbb629b49db7c5f6c72a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 12:07:46 -0700
Subject: [PATCH 060/248] [eric] ui: crisp reddit mark + island search polish

---
 .../app/components/overlays/DynamicIsland.tsx | 70 +++----------------
 frontend/src/app/pages/Tools/integrations.tsx |  8 ++-
 2 files changed, 15 insertions(+), 63 deletions(-)

diff --git a/frontend/src/app/components/overlays/DynamicIsland.tsx b/frontend/src/app/components/overlays/DynamicIsland.tsx
index bc2bdd80..4e795839 100644
--- a/frontend/src/app/components/overlays/DynamicIsland.tsx
+++ b/frontend/src/app/components/overlays/DynamicIsland.tsx
@@ -4,7 +4,6 @@ import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Collapse from '@mui/material/Collapse';
-import SearchIcon from '@mui/icons-material/Search';
 import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
 import CloseIcon from '@mui/icons-material/Close';
 import CheckIcon from '@mui/icons-material/Check';
@@ -239,7 +238,7 @@ const DynamicIsland: React.FC = () => {
   const [userExpanded, setUserExpanded] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
 
-  // Global Cmd/Ctrl+K opens search palette from anywhere.
+  // Global Cmd/Ctrl+K, or the sidebar search pill, opens the palette from anywhere.
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'k') {
@@ -247,8 +246,13 @@ const DynamicIsland: React.FC = () => {
         setSearchOpen((prev) => !prev);
       }
     };
+    const openFromSidebar = (): void => setSearchOpen(true);
     window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
+    window.addEventListener('openswarm:open-search', openFromSidebar);
+    return () => {
+      window.removeEventListener('keydown', handler);
+      window.removeEventListener('openswarm:open-search', openFromSidebar);
+    };
   }, []);
 
   // Cmd/Ctrl+L: clear the chat (focused card > activeSessionId > sole session); same as /clear.
@@ -501,6 +505,8 @@ const DynamicIsland: React.FC = () => {
   return (
     <>
     {islandState === 'compact-actionable' && <style>{glowKeyframes}</style>}
+    {/* Search moved to the sidebar, so the island only appears for live agent activity, not idle. */}
+    {islandState !== 'idle' && (
     <motion.div
       ref={islandRef}
       layout
@@ -538,9 +544,6 @@ const DynamicIsland: React.FC = () => {
         }}
       >
         <AnimatePresence mode="wait">
-          {islandState === 'idle' && (
-            <IdlePill key="idle" c={c} onClick={() => setSearchOpen(true)} />
-          )}
           {islandState === 'compact' && (
             <CompactPill
               key="compact"
@@ -584,65 +587,12 @@ const DynamicIsland: React.FC = () => {
         </AnimatePresence>
       </motion.div>
     </motion.div>
+    )}
     <GlobalSearchPalette open={searchOpen} onClose={() => setSearchOpen(false)} />
     </>
   );
 };
 
-const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-const SEARCH_HOTKEY = isMac ? '⌘K' : 'Ctrl+K';
-
-const IdlePill: React.FC<{ c: ReturnType<typeof useClaudeTokens>; onClick: () => void }> = ({ c, onClick }) => (
-  <motion.div
-    initial={{ opacity: 0, scale: 0.92 }}
-    animate={{ opacity: 1, scale: 1 }}
-    exit={{ opacity: 0, scale: 0.92 }}
-    transition={{ duration: 0.2 }}
-  >
-    <Tooltip title={`Search (${SEARCH_HOTKEY})`} arrow placement="bottom">
-      <Box
-        onClick={(e) => { e.stopPropagation(); onClick(); }}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-          px: 1.5,
-          height: 30,
-          userSelect: 'none',
-          cursor: 'pointer',
-          transition: 'background 0.15s',
-          '&:hover': { bgcolor: 'rgba(255,255,255,0.04)' },
-        }}
-      >
-        <SearchIcon sx={{ fontSize: 16, color: c.text.muted, flexShrink: 0 }} />
-        <Typography
-          sx={{
-            color: c.text.muted,
-            fontSize: '0.78rem',
-            fontWeight: 400,
-            lineHeight: 1,
-            whiteSpace: 'nowrap',
-            flex: 1,
-          }}
-        >
-          Search…
-        </Typography>
-        <Typography
-          sx={{
-            color: c.text.ghost,
-            fontSize: '0.7rem',
-            fontFamily: c.font.mono,
-            lineHeight: 1,
-            opacity: 0.7,
-          }}
-        >
-          {SEARCH_HOTKEY}
-        </Typography>
-      </Box>
-    </Tooltip>
-  </motion.div>
-);
-
 const CompactPill: React.FC<{
   c: ReturnType<typeof useClaudeTokens>;
   text: string;
diff --git a/frontend/src/app/pages/Tools/integrations.tsx b/frontend/src/app/pages/Tools/integrations.tsx
index f1fe529c..68958a4b 100644
--- a/frontend/src/app/pages/Tools/integrations.tsx
+++ b/frontend/src/app/pages/Tools/integrations.tsx
@@ -70,8 +70,7 @@ export const INTEGRATIONS: Integration[] = [
     connectInstructions: 'Uses your own Reddit account: open reddit.com in an OpenSwarm browser card and sign in once. Nothing is stored, the integration borrows your live session per request and paces itself to stay within human limits.',
     icon: (
       <svg viewBox="0 0 24 24" width="22" height="22">
-        <circle cx="12" cy="12" r="12" fill="#FF4500"/>
-        <path d="M19.5 12c0-.6-.5-1.1-1.1-1.1-.3 0-.6.1-.8.3-1-.7-2.3-1.1-3.7-1.1l.6-3 2.1.5c0 .6.5 1.1 1.1 1.1.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1-.4 0-.8.3-1 .6l-2.3-.5c-.1 0-.2 0-.2.1l-.7 3.3c-1.4 0-2.7.4-3.7 1.1-.2-.2-.5-.3-.8-.3-.6 0-1.1.5-1.1 1.1 0 .4.2.8.6 1-.1.3-.1.6-.1.9 0 2.3 2.6 4.1 5.8 4.1s5.8-1.8 5.8-4.1c0-.3 0-.6-.1-.9.4-.2.6-.6.6-1zm-9.8 1.1c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1zm6.2 2.9c-.8.8-2 .9-2.9.9s-2.1-.1-2.9-.9c-.1-.1-.1-.3 0-.4.1-.1.3-.1.4 0 .6.6 1.6.8 2.5.8s1.9-.2 2.5-.8c.1-.1.3-.1.4 0 .1.1.1.3 0 .4zm-.2-1.8c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1z" fill="#fff"/>
+        <path fill="#FF4500" d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.688-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.91 2.961.91.477 0 2.105-.056 2.961-.91a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
       </svg>
     ),
   },
@@ -129,7 +128,10 @@ export const INTEGRATIONS: Integration[] = [
     website: 'https://www.npmjs.com/package/@softeria/ms-365-mcp-server',
     icon: (
       <svg viewBox="0 0 24 24" width="22" height="22">
-        <path d="M11.4 24H0V12.6L11.4 24zM24 24H12.6V12.6L24 24zM11.4 11.4H0V0l11.4 11.4zM24 11.4H12.6V0L24 11.4z" fill="#0078D4"/>
+        <rect x="1" y="1" width="10.4" height="10.4" fill="#F25022"/>
+        <rect x="12.6" y="1" width="10.4" height="10.4" fill="#7FBA00"/>
+        <rect x="1" y="12.6" width="10.4" height="10.4" fill="#00A4EF"/>
+        <rect x="12.6" y="12.6" width="10.4" height="10.4" fill="#FFB900"/>
       </svg>
     ),
     authType: 'device_code',

From 5088eae51876ebf15427fac0f2817f01eea02590 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 13:49:02 -0700
Subject: [PATCH 061/248] [eric] agents: read-only lockdown was bypassable
 (disallowed_tools clobbered by reassignment; Write could overwrite existing
 files) - both sealed

---
 .../agents/manager/permissions/gate_hooks.py    | 17 +++++++++++++++++
 backend/apps/agents/manager/run/RunOptions.py   |  3 +++
 2 files changed, 20 insertions(+)

diff --git a/backend/apps/agents/manager/permissions/gate_hooks.py b/backend/apps/agents/manager/permissions/gate_hooks.py
index fbd3bb06..d85b683b 100644
--- a/backend/apps/agents/manager/permissions/gate_hooks.py
+++ b/backend/apps/agents/manager/permissions/gate_hooks.py
@@ -6,6 +6,7 @@ are the claude_agent_sdk hook protocol (hookSpecificOutput), not internal state.
 
 import asyncio
 import logging
+import os
 import time
 from typing import Dict, Optional, Union
 
@@ -67,6 +68,22 @@ async def pre_tool_hook(ctx: HookContext, input_data: dict, tool_use_id: Optiona
     tool_name = input_data.get("tool_name", "")
     hook_event = input_data.get("hook_event_name", "PreToolUse")
 
+    # Read-only sessions (onboarding's unattended audit) block Edit/Bash/NotebookEdit at the tool-list
+    # level, but Write survives so the audit can drop its ONE report file. Write also CLOBBERS an
+    # existing path, though, so without this a read-only agent could overwrite ~/Downloads/taxes.pdf.
+    # Deny Write when its target already exists: new report file yes, destroying an existing file no.
+    if getattr(ctx.session, "read_only", False) and tool_name == "Write":
+        p = (input_data.get("tool_input") or {}).get("file_path", "")
+        if p and os.path.exists(os.path.expanduser(p)):
+            note_tool_used(ctx.session_id, tool_name, False)
+            return {
+                "hookSpecificOutput": {
+                    "hookEventName": hook_event,
+                    "permissionDecision": "deny",
+                    "permissionDecisionReason": "This is a read-only audit: it may create a new report but must never overwrite an existing file. Choose a filename that does not exist yet.",
+                }
+            }
+
     # ToolSearch loop-breaker. Gated MCP servers are withheld from the SDK until MCPActivate, so the CLI's native ToolSearch can never find them; small models thrash (empty ToolSearch, retry) for minutes until the user pauses. Let the first couple through, then redirect to the gate. Any non-ToolSearch call is real progress, so the counter resets. Gated-server lookup is deferred behind the threshold so the common (non-looping) path stays free.
     if tool_name == "ToolSearch":
         ctx.ts_loop_count += 1
diff --git a/backend/apps/agents/manager/run/RunOptions.py b/backend/apps/agents/manager/run/RunOptions.py
index 37b7f3da..bab69e7a 100644
--- a/backend/apps/agents/manager/run/RunOptions.py
+++ b/backend/apps/agents/manager/run/RunOptions.py
@@ -227,7 +227,10 @@ class RunOptions(AgentManagerProtocol):
             options_kwargs["extra_args"] = p_ea
 
         # The claude_code preset auto-attaches the user's claude.ai- connected partner MCPs (`mcp__claude_ai_*`). Those bypass our MCPActivate gate, don't share OAuth state with the OpenSwarm Gmail/Calendar/Drive connectors the user actually configured here, and confuse the model into picking the partner shim instead of our vetted server. Hard-block them at the SDK layer so the model can't even attempt the call.
+        # EXTEND, never reassign: a plain assignment here silently discarded every effective_disallowed
+        # entry (read-only sessions could still run Bash). Same fix as eric/dev ce3e67d6.
         options_kwargs["disallowed_tools"] = [
+            *(options_kwargs.get("disallowed_tools") or []),
             "mcp__claude_ai_*",
         ]
 

From 0c473e995c73273ab019712ed08a92e5ae0df0b9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 13:49:02 -0700
Subject: [PATCH 062/248] [eric] electron: OPENSWARM_DEV_URL override so a
 worktree stack can run its own dev Electron

---
 electron/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/electron/main.js b/electron/main.js
index 4c9427c6..d89f755e 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1239,7 +1239,8 @@ function createWindow() {
   });
 
   if (isDev) {
-    mainWindow.loadURL(`http://localhost:3000`);
+    // OPENSWARM_DEV_URL lets a worktree stack (webpack on an alternate port) run its own Electron.
+    mainWindow.loadURL(process.env.OPENSWARM_DEV_URL || `http://localhost:3000`);
   } else if (frontendServerPort) {
     mainWindow.loadURL(`http://127.0.0.1:${frontendServerPort}/index.html`);
   } else {

From 6ebe5e78df780cb51a9eda80bb90989932ced338 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 17:31:19 -0700
Subject: [PATCH 063/248] [eric] onboarding: lift the reveal curtain instantly
 (no 'setting up' spinner); greeting waits-then-streams

---
 .../OnboardingV3/OnboardingV3Root.tsx         | 30 ++---------
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 50 ++++++++++---------
 .../app/pages/AgentChat/useWelcomeGreeting.ts | 20 ++++++--
 3 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index cf7801e6..b3c28052 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -10,7 +10,6 @@ import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useOnboardingV3Pipeline } from './useOnboardingV3Pipeline';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
 import { ARC_BLUE_BG, ONBOARDING_SANS } from './beats/BeatShell';
-import OnboardingLogo from './OnboardingLogo';
 import BeatConnect from './beats/BeatConnect';
 import BeatApps from './beats/BeatApps';
 import BeatTheme from './beats/BeatTheme';
@@ -117,13 +116,7 @@ const OnboardingV3Root: React.FC = () => {
   const [beat, setBeat] = useState<Beat>('welcome');
   const [picks, setPicks] = useState<string[]>([]);
   const connectedProvider = useAppSelector((s) => selectSubscriptionConnections(s).find((cx) => cx.isActive !== false)?.provider ?? null);
-  const [finishing, setFinishing] = useState(false);
-  // The curtain wears whatever the user just picked (their gradient under a soft veil), Arc's post-theme rule.
   const { accent, gradient } = useThemeAccent();
-  const finishStops = gradient ?? (accent ? [accent] : null);
-  const finishBackdrop = finishStops
-    ? `linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)), linear-gradient(160deg, ${finishStops.map((hex, i) => `${hex} ${finishStops.length > 1 ? (i / (finishStops.length - 1)) * 100 : 100}%`).join(', ')})`
-    : ARC_BLUE_BG;
 
   const { kickIdentity, kickScan, kickUsageRead, kickPrep, finish } = pipeline;
 
@@ -152,10 +145,11 @@ const OnboardingV3Root: React.FC = () => {
     setBeat('theme');
   }, [kickPrep, picks]);
 
-  const leaveCard = useCallback(async (name: string | null) => {
+  const leaveCard = useCallback((name: string | null) => {
     if (name) dispatch(updateSettingsPatch({ user_name: name }));
-    setFinishing(true);
-    await finish('done');
+    // finish() is now non-blocking: it stages the reveal + drops flowActive immediately, so the overlay
+    // fades straight onto the live canvas (jobs already in motion). No "Setting up your canvas" spinner.
+    void finish('done');
   }, [dispatch, finish]);
 
 
@@ -225,22 +219,6 @@ const OnboardingV3Root: React.FC = () => {
               <span key={dot} style={{ width: 11, height: 11, borderRadius: 999, background: dot, opacity: 0.9 }} />
             ))}
           </motion.div>
-          {finishing && (
-            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center', justifyContent: 'center', background: finishBackdrop, fontFamily: ONBOARDING_SANS }}>
-              <div style={{ position: 'absolute', inset: 0, backgroundImage: GRAIN_URL, opacity: 0.3, pointerEvents: 'none' }} />
-              <motion.div
-                initial={{ opacity: 0, scale: 0.7 }}
-                animate={{ opacity: [0.55, 1, 0.55], scale: [0.9, 1.06, 0.9] }}
-                transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
-                style={{ position: 'relative' }}
-              >
-                <OnboardingLogo size={54} />
-              </motion.div>
-              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} style={{ position: 'relative', fontSize: '1.02rem', fontWeight: 600, color: '#fff', textShadow: '0 1px 8px rgba(0,0,0,0.25)' }}>
-                Setting up your canvas...
-              </motion.div>
-            </div>
-          )}
         </motion.div>
       </motion.div>
       )}
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 0308fb3e..40d39e06 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -50,6 +50,10 @@ export function useOnboardingV3Pipeline() {
   const identityRef = useRef<ProviderIdentity[]>([]);
   const scanRef = useRef<Promise<ScanResult | null> | null>(null);
   const prepRef = useRef<Promise<PrepResponse | null> | null>(null);
+  // The resolved prep, readable SYNCHRONOUSLY at finish() time: lets the reveal seed with the real
+  // jobs/greeting the instant they're ready (the common case, prep finishes during the beats) without
+  // awaiting, so the curtain never blocks behind a spinner.
+  const prepReadyRef = useRef<PrepResponse | null>(null);
   const scanResultRef = useRef<ScanResult | null>(null);
   const usageSummaryRef = useRef<string>('');
   const usageReadRef = useRef<Promise<void> | null>(null);
@@ -133,6 +137,7 @@ export function useOnboardingV3Pipeline() {
       .catch(() => null);
     // Launch the prepped work MID-FLOW (theme/card beats cover the latency): audit + app build, gated to a real connected model so the fragile free trial never carries it.
     void prepRef.current.then((prep) => {
+      prepReadyRef.current = prep;
       if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
       launchedRef.current = true;
       if (prep.starters.length > 0) launchJob(prep.starters[0].title, prep.starters[0].prompt, 'audit', prep.starters[0].reason ?? '');
@@ -153,30 +158,29 @@ export function useOnboardingV3Pipeline() {
       dispatch(updateSettingsPatch({ onboarding_v3: 'skipped', accent_color: accent, accent_gradient: gradient, theme: mode }));
       return;
     }
-    // Cap the wait so a slow aux call degrades to generic starters instead of a hung curtain. Sized
-    // above the real harvest+prep (~17-22s) so a user who rushes the beats still gets the personalized
-    // reveal, not generic; the backend's own 45s aux timeout is the hard backstop behind this.
-    const timeout = new Promise<null>((resolve) => { window.setTimeout(() => resolve(null), 24000); });
-    const prep = await Promise.race([prepRef.current ?? Promise.resolve(null), timeout]);
-    const greeting = prep?.greeting?.trim() || null;
-    const starters = prep?.starters ?? [];
-    const automations = prep?.automations ?? [];
-    // Jobs already launched mid-flow at prep-resolve; the reveal only composes the canvas.
-    const autoPrompt = null;
-    // Await the PATCH so personalized_greeting/starters/automations are IN settings before the reveal seeds the welcome chat; the greeting stream snapshots settings at mount.
-    try {
-      await dispatch(updateSettingsPatch({
-        onboarding_v3: 'done',
-        accent_color: accent,
-        accent_gradient: gradient,
-        theme: mode,
-        personalized_greeting: greeting,
-        personalized_starters: starters,
-        personalized_automations: automations,
-      })).unwrap();
-    } catch {}
-    dispatch(stageReveal({ greeting, starters, scanSummary: summarizeScan(scanResultRef.current), autoPrompt }));
+    // NEVER block the curtain behind a spinner. The connect head-start means prep has usually resolved
+    // during the beats, so seed with the real jobs/greeting synchronously; if a fast user beat prep to
+    // this point, seed with what we have and let the late-jobs effect + the async patch below fill in.
+    // The whole point of gating on connect is this head start, so the reveal must show it in motion.
+    const ready = prepReadyRef.current;
+    dispatch(updateSettingsPatch({ onboarding_v3: 'done', accent_color: accent, accent_gradient: gradient, theme: mode }));
+    dispatch(stageReveal({
+      greeting: ready?.greeting?.trim() || null,
+      starters: ready?.starters ?? [],
+      scanSummary: summarizeScan(scanResultRef.current),
+      autoPrompt: null,
+    }));
     dispatch(setFlowActive(false));
+    // Personalized fields land the instant prep resolves (often already have): the welcome greeting
+    // waits for personalized_greeting then streams it in, and the starter chips read it live.
+    void (prepRef.current ?? Promise.resolve(null)).then((prep) => {
+      if (!prep) return;
+      dispatch(updateSettingsPatch({
+        personalized_greeting: prep.greeting?.trim() || null,
+        personalized_starters: prep.starters ?? [],
+        personalized_automations: prep.automations ?? [],
+      }));
+    });
   }, [dispatch, accent, gradient, mode]);
 
   return { identity, kickIdentity, kickScan, kickUsageRead, kickPrep, finish };
diff --git a/frontend/src/app/pages/AgentChat/useWelcomeGreeting.ts b/frontend/src/app/pages/AgentChat/useWelcomeGreeting.ts
index 9cdb598e..822bf2b3 100644
--- a/frontend/src/app/pages/AgentChat/useWelcomeGreeting.ts
+++ b/frontend/src/app/pages/AgentChat/useWelcomeGreeting.ts
@@ -25,12 +25,24 @@ export function useWelcomeGreeting(
   const branchId = session?.active_branch_id || 'main';
   // Onboarding v3's prep wrote a greeting about THIS machine; when present it replaces the stock opener.
   const personalized = useAppSelector((s) => s.settings.data.personalized_greeting);
-  const greetingText = personalized?.trim()
-    ? `${personalized.trim()}\n\nWhere do you want to start?`
+  const hasPersonalized = !!personalized?.trim();
+  const greetingText = hasPersonalized
+    ? `${personalized!.trim()}\n\nWhere do you want to start?`
     : WELCOME_GREETING;
 
+  // The curtain now lifts BEFORE prep necessarily finishes, so the personalized greeting may land a
+  // beat later. Hold the stream until it arrives (so we never snapshot the stock opener and freeze the
+  // personal one out), then fall back to stock after a grace so it can't hang if prep failed.
+  const [graceElapsed, setGraceElapsed] = useState(false);
   useEffect(() => {
-    if (!eligible || !sessionId || startedRef.current) return;
+    if (!eligible) return;
+    const t = window.setTimeout(() => setGraceElapsed(true), 18000);
+    return () => window.clearTimeout(t);
+  }, [eligible]);
+  const greetingReady = hasPersonalized || graceElapsed;
+
+  useEffect(() => {
+    if (!eligible || !sessionId || !greetingReady || startedRef.current) return;
     startedRef.current = true;
 
     dispatch(streamStart({ sessionId, messageId: GREETING_MSG_ID, role: 'assistant' }));
@@ -63,7 +75,7 @@ export function useWelcomeGreeting(
 
     return () => window.clearInterval(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [eligible, sessionId, branchId, dispatch]);
+  }, [eligible, sessionId, greetingReady, branchId, dispatch]);
 
   return { greetingDone };
 }

From 4f1144cc7ffbc50b49a3455aaac92598ed44d944 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 17:35:54 -0700
Subject: [PATCH 064/248] [eric] shell: peeked sidebar no longer collapses
 mid-reach (grace-delayed close, cancel on re-enter)

---
 .../src/app/components/Layout/AppShell.tsx    | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 95eb2a26..1351d93f 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -445,12 +445,16 @@ const AppShell: React.FC = () => {
   const sidebarAway = (sidebarCollapsed || fsActive) && isDashboardViewActive;
   const [sidePeek, setSidePeek] = useState(false);
   useEffect(() => { if (!sidebarAway) setSidePeek(false); }, [sidebarAway]);
-  useEffect(() => {
-    if (!sidePeek) return undefined;
-    const onMove = (e: MouseEvent): void => { if (e.clientX > sidebarWidth + 60) setSidePeek(false); };
-    window.addEventListener('mousemove', onMove);
-    return () => window.removeEventListener('mousemove', onMove);
-  }, [sidePeek, sidebarWidth]);
+  // Close-on-leave with a grace delay (cancelled on re-enter): a bare mouseLeave closed the peek the
+  // instant the cursor dipped past the panel edge while reaching for an item, so clicks never landed.
+  const peekCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelPeekClose = useCallback(() => {
+    if (peekCloseTimerRef.current) { clearTimeout(peekCloseTimerRef.current); peekCloseTimerRef.current = null; }
+  }, []);
+  const schedulePeekClose = useCallback(() => {
+    cancelPeekClose();
+    peekCloseTimerRef.current = setTimeout(() => setSidePeek(false), 260);
+  }, [cancelPeekClose]);
   // Fullscreen still hides the top-center island anchor + banners; the sidebar floats in on peek.
   const fsHideChrome = fsActive;
   // In overlay mode the panel stays MOUNTED (so it can slide out, not vanish); sidePeek only drives the slide.
@@ -601,7 +605,7 @@ const AppShell: React.FC = () => {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary }}>
       {sidebarAway && !sidePeek && (
-        <Box onMouseEnter={() => setSidePeek(true)} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
+        <Box onMouseEnter={() => { cancelPeekClose(); setSidePeek(true); }} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
       )}
       {/* Top bar dropped (Arc/Zen): a zero-height anchor left only to float the agent-activity island at top-center; the island renders nothing when idle. */}
       <Box
@@ -813,7 +817,8 @@ const AppShell: React.FC = () => {
       {((!sidebarCollapsed && !fsHideChrome) || sideOverlay) && (
       <>
       <Box
-        onMouseLeave={() => { if (sideOverlay) setSidePeek(false); }}
+        onMouseEnter={() => { if (sideOverlay) cancelPeekClose(); }}
+        onMouseLeave={() => { if (sideOverlay) schedulePeekClose(); }}
         onWheel={handleSidebarSwipe}
         sx={{
           width: sidebarWidth,

From 9efcc3d3d02969aae3ea85f5524e84c90e11845f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 17:54:58 -0700
Subject: [PATCH 065/248] [eric] shell: sidebar peek closes reliably on
 move-away (window-level, generous buffer) without snapping shut mid-reach

---
 frontend/src/app/components/Layout/AppShell.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 1351d93f..10d193ee 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -455,6 +455,18 @@ const AppShell: React.FC = () => {
     cancelPeekClose();
     peekCloseTimerRef.current = setTimeout(() => setSidePeek(false), 260);
   }, [cancelPeekClose]);
+  // Reliable window-level close: the panel's own mouseLeave can get eaten (webview/overlay capture),
+  // leaving the peek stuck open. This fires on every move and closes ONLY when the cursor is clearly
+  // to the right of the floating panel (generous 130px buffer so reaching for an item never closes it).
+  useEffect(() => {
+    if (!sidePeek) return undefined;
+    const onMove = (e: MouseEvent): void => {
+      if (e.clientX > 10 + sidebarWidth + 130) schedulePeekClose();
+      else cancelPeekClose();
+    };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, [sidePeek, sidebarWidth, schedulePeekClose, cancelPeekClose]);
   // Fullscreen still hides the top-center island anchor + banners; the sidebar floats in on peek.
   const fsHideChrome = fsActive;
   // In overlay mode the panel stays MOUNTED (so it can slide out, not vanish); sidePeek only drives the slide.

From 5b57165aba77110d5a6d08015bbc9992fba3b84e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 17:55:49 -0700
Subject: [PATCH 066/248] [eric] app-builder: hide vite error overlay (no red
 crash screen mid-build) + MUI v7 Grid rule (Grid2 doesn't exist)

---
 backend/apps/outputs/app_builder_skill.md            | 12 +++++++++++-
 .../outputs/webapp_template/frontend/vite.config.ts  |  4 ++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/backend/apps/outputs/app_builder_skill.md b/backend/apps/outputs/app_builder_skill.md
index c4f15882..4d2e2346 100644
--- a/backend/apps/outputs/app_builder_skill.md
+++ b/backend/apps/outputs/app_builder_skill.md
@@ -206,6 +206,11 @@ import Typography from '@mui/material/Typography';
 import { Button, Box, Stack, Typography } from '@mui/material';
 ```
 
+**This template is MUI v7.** For layout use `import Grid from '@mui/material/Grid'` (the v7 Grid takes
+`size={{ xs: 12, md: 6 }}`). Do NOT import `@mui/material/Grid2` or `@mui/material/Unstable_Grid2` —
+those are v5/v6 paths and DO NOT EXIST here, they crash the build with "Failed to resolve import". When
+unsure a component or path exists, prefer plain `Box` with fl*/grid `sx` instead of guessing a package path.
+
 Same rule for icons — even more important there because
 `@mui/icons-material` re-exports thousands of SVG components:
 
@@ -617,5 +622,10 @@ When making a new app from scratch:
 4. Add additional pages under `frontend/src/pages/`.
 5. If using a sidebar, update its nav entries in
    `frontend/src/app/components/Layout/Sidebar.tsx`.
-6. Style with `useClaudeTokens()` and MUI's `sx`.
+6. Style with `useClaudeTokens()` and MUI's `sx`. **The moment you type
+   `useClaudeTokens()` in a file, add its import to that SAME file:**
+   `import { useClaudeTokens } from '@/shared/styles/ThemeContext';` — you are
+   rewriting `pages/index.tsx` from scratch (step 2), so the import the starter
+   had is GONE. A missing import here is the #1 way a rewritten page throws
+   "useClaudeTokens is not defined" and the whole app fails to boot.
 7. If you need a backend: `bash backend_init.sh`, then add a SubApp under `backend/apps/<name>/`.
diff --git a/backend/apps/outputs/webapp_template/frontend/vite.config.ts b/backend/apps/outputs/webapp_template/frontend/vite.config.ts
index 086c468f..7e89e36e 100644
--- a/backend/apps/outputs/webapp_template/frontend/vite.config.ts
+++ b/backend/apps/outputs/webapp_template/frontend/vite.config.ts
@@ -78,6 +78,10 @@ export default defineConfig(({ mode }) => {
       port: Number(process.env.FRONTEND_PORT) || 3000,
       strictPort: true,
       open: false,
+      // Never show Vite's full-screen red error overlay: a transient bad import mid-build (the agent is
+      // still writing files) would flash a scary crash screen at the user. Errors still hit the console
+      // + terminal.log, which the agent reads to fix; the card shows a clean "building" state instead.
+      hmr: { overlay: false },
       proxy: backendEnabled
         ? {
             '/api': {

From d493744680f9bf3a9365b6cde61820e36f270e25 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 18:03:29 -0700
Subject: [PATCH 067/248] [eric] onboarding: drop beat traffic lights; sidebar
 toggle now docks permanently (arc-style pin) instead of one-way collapse

---
 frontend/src/app/components/Layout/AppShell.tsx        |  8 +++++---
 .../app/components/OnboardingV3/OnboardingV3Root.tsx   | 10 ----------
 .../src/app/components/OnboardingV3/beats/BeatApps.tsx |  7 ++-----
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 10d193ee..8d411f62 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -870,9 +870,11 @@ const AppShell: React.FC = () => {
               </span>
             </Tooltip>
             <Box sx={{ flex: 1 }} />
-            <Tooltip title="Hide sidebar">
-              <IconButton size="small" onClick={() => setSidebarCollapsed(true)}
-                data-onboarding="sidebar-toggle" aria-expanded
+            <Tooltip title={sideOverlay ? 'Dock sidebar' : 'Hide sidebar'}>
+              {/* Arc-style pin: from the floating peek this DOCKS the sidebar permanently (pushes the
+                  canvas), from docked it collapses back to peek. Toggle, not one-way collapse. */}
+              <IconButton size="small" onClick={() => setSidebarCollapsed((v) => !v)}
+                data-onboarding="sidebar-toggle" aria-expanded={!sidebarCollapsed}
                 sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` } }}>
                 <AnimatedPanelLeft size={17} />
               </IconButton>
diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index b3c28052..80da455d 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -209,16 +209,6 @@ const OnboardingV3Root: React.FC = () => {
               {beat === 'card' && <BeatCard c={c} identity={pipeline.identity} onFinish={(name) => { void leaveCard(name); }} onBack={() => setBeat('theme')} />}
             </motion.div>
           </AnimatePresence>
-          {/* Traffic lights on every beat: Arc's onboarding is a real window and never hides them. */}
-          <motion.div
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.3 }}
-            style={{ position: 'absolute', top: 13, left: 14, display: 'flex', gap: 7, pointerEvents: 'none', zIndex: 10 }}
-          >
-            {['#FF5F57', '#FEBC2E', '#28C840'].map((dot) => (
-              <span key={dot} style={{ width: 11, height: 11, borderRadius: 999, background: dot, opacity: 0.9 }} />
-            ))}
-          </motion.div>
         </motion.div>
       </motion.div>
       )}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
index 8ee41e18..ed939f6d 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
@@ -43,11 +43,8 @@ const BeatApps: React.FC<{
           border: `1px solid ${c.border.medium}`, boxShadow: '0 18px 50px rgba(0,0,0,0.22)', overflow: 'hidden',
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 12px', borderBottom: `1px solid ${c.border.subtle}`, background: c.bg.elevated }}>
-          {['#FF5F57', '#FEBC2E', '#28C840'].map((dot) => (
-            <span key={dot} style={{ width: 10, height: 10, borderRadius: 999, background: dot, opacity: 0.85 }} />
-          ))}
-          <span style={{ marginLeft: 8, fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 14px', borderBottom: `1px solid ${c.border.subtle}`, background: c.bg.elevated }}>
+          <span style={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
         </div>
         <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(118px, 1fr))', gap: 12 }}>
           {entries.map((entry, i) => {

From 547ca0d13b723c078604201cc84fe78a35dbf729 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 18:09:22 -0700
Subject: [PATCH 068/248] [eric] app-builder: render-clean gate now covers
 agent-mode app builds (onboarding), not just view-builder, so a broken app
 never finishes 'done'

---
 .../manager/streaming/post_tool_hook.py       | 27 +++++++++++--------
 .../agents/manager/streaming/stop_hook.py     |  5 ++--
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/backend/apps/agents/manager/streaming/post_tool_hook.py b/backend/apps/agents/manager/streaming/post_tool_hook.py
index 68902019..26f5e0ae 100644
--- a/backend/apps/agents/manager/streaming/post_tool_hook.py
+++ b/backend/apps/agents/manager/streaming/post_tool_hook.py
@@ -94,23 +94,28 @@ async def post_tool_hook(ctx: HookContext, input_data: dict, tool_use_id, contex
             "yarn add", "yarn install", "yarn remove",
         ))
 
-    if session.mode == "view-builder" and (wrote_frontend_file or installed_pkg):
-        view_builder_dirty_sessions.add(session.id)
+    if wrote_frontend_file or installed_pkg:
         try:
             from backend.apps.outputs.runtime import (
                 manager as outputs_runtime_manager,
             )
-            outputs_runtime_manager.reset_render_state_for_workspace(session.id)
+            # ANY session building an app has a preview runtime attached: the dedicated view-builder AND
+            # a plain agent using CreateApp (how onboarding builds its dashboard). Gate on the runtime,
+            # not the mode, so the Stop render-gate covers agent-mode app builds too (a plain /frontend/
+            # write with no runtime, e.g. editing OpenSwarm's own source, has none and is skipped).
+            if outputs_runtime_manager.get(session.id) is not None:
+                view_builder_dirty_sessions.add(session.id)
+                outputs_runtime_manager.reset_render_state_for_workspace(session.id)
+                if installed_pkg:
+                    # Tell the app card this turn changed deps so its turn-finish reload restarts Vite; a soft webview reload can't pick up newly installed packages.
+                    try:
+                        await ws_manager.send_to_session(session.id, "agent:app_deps_changed", {
+                            "session_id": session.id,
+                        })
+                    except Exception:
+                        pass
         except Exception:
             pass
-        if installed_pkg:
-            # Tell the app card this turn changed deps so its turn-finish reload restarts Vite; a soft webview reload can't pick up newly installed packages.
-            try:
-                await ws_manager.send_to_session(session.id, "agent:app_deps_changed", {
-                    "session_id": session.id,
-                })
-            except Exception:
-                pass
     # Every write drains, App Builder included. This was an `elif` on the branch above, so a view-builder frontend write took that branch and skipped the drain: the one agent whose whole job is the app never saw its own vite/babel/tsc errors.
     if wrote_files and file_path:
         errs: list[str] = []
diff --git a/backend/apps/agents/manager/streaming/stop_hook.py b/backend/apps/agents/manager/streaming/stop_hook.py
index 7d034d71..b6539ee4 100644
--- a/backend/apps/agents/manager/streaming/stop_hook.py
+++ b/backend/apps/agents/manager/streaming/stop_hook.py
@@ -26,8 +26,9 @@ async def stop_hook(ctx: HookContext, input_data: dict, tool_use_id, context) ->
     to render, blocks with the error so the agent fixes it, up to
     MAX_RETRIES then lets the stop through."""
     session = ctx.session
-    if session.mode != "view-builder":
-        return {}
+    # Gate on the DIRTY set (any app-building session that wrote a frontend file with a runtime
+    # attached), not the mode: onboarding builds its dashboard in a plain agent session via CreateApp,
+    # which must be render-gated too, not just the dedicated view-builder.
     if session.id not in view_builder_dirty_sessions:
         return {}
     from backend.apps.outputs.runtime import (

From 37560f8ae319cd4cf5d29f522e772a0ffd01cc36 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 18:31:10 -0700
Subject: [PATCH 069/248] [eric] onboarding: add unmissable 'here's what I did'
 reveal hero (centered, live working/done status); drop the missable canvas
 note it replaces

---
 .../src/app/components/nudges/RevealHero.tsx  | 151 ++++++++++++++++++
 .../Dashboard/canvas/DashboardOverlays.tsx    |   4 +
 .../lifecycle/useOnboardingRevealSeed.ts      |  39 +----
 3 files changed, 162 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/app/components/nudges/RevealHero.tsx

diff --git a/frontend/src/app/components/nudges/RevealHero.tsx b/frontend/src/app/components/nudges/RevealHero.tsx
new file mode 100644
index 00000000..47085f09
--- /dev/null
+++ b/frontend/src/app/components/nudges/RevealHero.tsx
@@ -0,0 +1,151 @@
+import React, { useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sparkles, FolderCheck, LayoutDashboard, Search, CalendarClock, Check, X } from 'lucide-react';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useAppSelector } from '@/shared/hooks';
+import type { PreppedJob } from '@/shared/state/onboardingV3Slice';
+
+// The unmissable anchor of the reveal: a top-center panel that says, in plain language, exactly what
+// OpenSwarm did while the user set up, with LIVE status (working -> done) on each item. The scattered
+// cards are the real clickable work; this is the legend that makes the whole thing instantly readable.
+
+type JobStatus = 'working' | 'done' | 'snag';
+
+function iconFor(kind: PreppedJob['kind']): React.ReactNode {
+  const size = 17;
+  if (kind === 'app') return <LayoutDashboard size={size} />;
+  if (kind === 'research') return <Search size={size} />;
+  if (kind === 'schedule') return <CalendarClock size={size} />;
+  return <FolderCheck size={size} />;
+}
+
+// Plain-language line, present-continuous while working, past once done. Super easy to grok at a glance.
+function lineFor(job: PreppedJob, status: JobStatus): string {
+  const t = job.title;
+  if (job.kind === 'app') return status === 'done' ? `Built you a dashboard of your world` : `Building you a dashboard of your world`;
+  if (job.kind === 'research') return status === 'done' ? `Looked into ${t} for you` : `Looking into ${t} for you`;
+  if (job.kind === 'schedule') return `Set up ${t} to run on its own`;
+  return status === 'done' ? `Tidied up your files (nothing moved or deleted)` : `Tidying up your files (nothing moved or deleted)`;
+}
+
+const RevealHero: React.FC = () => {
+  const c = useClaudeTokens();
+  const [dismissed, setDismissed] = useState(false);
+  const prepped = useAppSelector((s) => s.onboardingV3.prepped);
+  const flowActive = useAppSelector((s) => s.onboardingV3.flowActive);
+  const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
+  const sessions = useAppSelector((s) => s.agents.sessions);
+  const userName = useAppSelector((s) => s.settings.data.user_name);
+
+  // Dashboard-first order (the star), then research, cleanup, and the recurring task.
+  const order: PreppedJob['kind'][] = ['app', 'research', 'audit', 'schedule'];
+  const jobs = useMemo(
+    () => [...prepped].sort((a, b) => order.indexOf(a.kind) - order.indexOf(b.kind)),
+    [prepped],
+  );
+
+  const statusOf = (job: PreppedJob): JobStatus => {
+    if (job.kind === 'schedule') return 'done';  // a workflow: created instantly
+    const s = job.sessionId ? sessions[job.sessionId] : undefined;
+    if (!s) return 'working';
+    if (s.status === 'completed' || s.status === 'stopped') return 'done';
+    if (s.status === 'error') return 'snag';
+    return 'working';
+  };
+
+  const open = !dismissed && !flowActive && !revealPending && jobs.length > 0;
+  const doneCount = jobs.filter((j) => statusOf(j) === 'done').length;
+
+  // Portal to body: the dashboard canvas is a transformed ancestor, so a position:fixed child would
+  // anchor to IT (drifting off-center), not the window. The OUTER div owns the fixed top-center
+  // placement (translateX(-50%)); the inner motion.div owns the entrance (framer drives its transform,
+  // which would clobber the centering translate if they shared one element).
+  return createPortal(
+    <div style={{ position: 'fixed', top: 58, left: '50%', transform: 'translateX(-50%)', zIndex: 1300, width: 'min(460px, calc(100vw - 48px))', pointerEvents: 'none' }}>
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0, y: -16, scale: 0.98 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: -12, transition: { duration: 0.25 } }}
+          transition={{ type: 'spring', stiffness: 260, damping: 26 }}
+          style={{
+            width: '100%', pointerEvents: 'auto',
+            borderRadius: 18, overflow: 'hidden',
+            background: c.bg.surface, border: `1px solid ${c.border.medium}`,
+            boxShadow: '0 20px 60px rgba(20,16,60,0.20)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '16px 18px 12px' }}>
+            <div style={{
+              width: 34, height: 34, borderRadius: 10, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+              background: `linear-gradient(135deg, ${c.accent.primary}, ${c.accent.pressed})`, color: '#fff',
+            }}>
+              <Sparkles size={18} />
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: '1.02rem', fontWeight: 700, color: c.text.primary, letterSpacing: '-0.01em' }}>
+                {userName ? `${userName}, while you set up I got to work` : `While you set up, I got to work`}
+              </div>
+              <div style={{ fontSize: '0.8rem', color: c.text.tertiary, marginTop: 2 }}>
+                {doneCount === jobs.length ? `All done, here on your canvas` : `${doneCount} of ${jobs.length} done, the rest are running`}
+              </div>
+            </div>
+            <button
+              onClick={() => setDismissed(true)}
+              aria-label="Dismiss"
+              style={{ border: 'none', background: 'transparent', color: c.text.ghost, cursor: 'pointer', padding: 4, borderRadius: 6, flexShrink: 0 }}
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', padding: '0 10px 12px' }}>
+            {jobs.map((job) => {
+              const st = statusOf(job);
+              return (
+                <div key={job.workflowId || job.sessionId || job.kind}
+                  style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '9px 10px', borderRadius: 11 }}>
+                  <div style={{
+                    width: 30, height: 30, borderRadius: 9, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    background: st === 'done' ? `${c.status.success}18` : `${c.accent.primary}14`,
+                    color: st === 'done' ? c.status.success : c.accent.primary,
+                  }}>
+                    {iconFor(job.kind)}
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0, fontSize: '0.9rem', fontWeight: 500, color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {lineFor(job, st)}
+                  </div>
+                  {st === 'done' ? (
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.74rem', fontWeight: 600, color: c.status.success, flexShrink: 0 }}>
+                      <Check size={13} /> done
+                    </span>
+                  ) : st === 'snag' ? (
+                    <span style={{ fontSize: '0.74rem', fontWeight: 600, color: c.status.warning, flexShrink: 0 }}>needs a look</span>
+                  ) : (
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', fontWeight: 600, color: c.text.tertiary, flexShrink: 0 }}>
+                      <span style={{
+                        width: 7, height: 7, borderRadius: 999, background: c.accent.primary,
+                        animation: 'revealHeroPulse 1.3s ease-in-out infinite',
+                      }} />
+                      working
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+          <div style={{ padding: '9px 18px 13px', borderTop: `1px solid ${c.border.subtle}`, fontSize: '0.76rem', color: c.text.ghost }}>
+            It's all on your canvas below. Nothing's saved or deleted without you, keep it or clear it anytime.
+          </div>
+          <style>{`@keyframes revealHeroPulse { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }`}</style>
+        </motion.div>
+      )}
+    </AnimatePresence>
+    </div>,
+    document.body,
+  );
+};
+
+export default RevealHero;
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index 12a4a32c..2611e144 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -9,6 +9,7 @@ import MissedRunsToast from '@/app/pages/Workflows/MissedRunsToast';
 import ProviderHealthToast from '@/app/components/overlays/ProviderHealthToast';
 import ScheduleOfferToast from '@/app/components/nudges/ScheduleOfferToast';
 import PrepKeepToast from '@/app/components/nudges/PrepKeepToast';
+import RevealHero from '@/app/components/nudges/RevealHero';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -162,6 +163,9 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
       {/* One-shot dependency beat: first completed personalized starter offers to become a weekly job */}
       <ScheduleOfferToast dashboardId={dashboardId} />
 
+      {/* Unmissable top-center legend of the work the reveal did, with live working/done status */}
+      <RevealHero />
+
       {/* Accept-or-deny for the audit + app the flow started on the user's behalf */}
       <PrepKeepToast />
     </>
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index 90c56c8c..c1e4c0a1 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, type RefObject } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { store } from '@/shared/state/store';
 import {
-  addNote, setNoteSize, placeCard, addWorkflowCard, setWorkflowCardPosition, setViewCardPosition,
+  placeCard, addWorkflowCard, setWorkflowCardPosition, setViewCardPosition,
   DEFAULT_CARD_W, DEFAULT_CARD_H, EXPANDED_CARD_MIN_H,
 } from '@/shared/state/dashboardLayoutSlice';
 import { clearReveal, setRevealAnchor } from '@/shared/state/onboardingV3Slice';
@@ -18,20 +18,16 @@ interface Args {
 }
 
 const GAP = 48;
-const NOTE_W = 340;
-const NOTE_H = 440;
 
-/** Where the reveal's app view card is born: the end of the reading arc, jobs -> chat -> note -> APP, top-aligned. */
+/** Where the reveal's app view card is born: right of the welcome chat, top-aligned. The "here's what I did" legend is the fixed RevealHero panel, not a canvas note, so the app sits right next to the chat. */
 export function revealAppSpot(anchor: { cx: number; cy: number }): { x: number; y: number } {
-  return { x: anchor.cx + DEFAULT_CARD_W / 2 + GAP + NOTE_W + GAP, y: anchor.cy - EXPANDED_CARD_MIN_H / 2 };
+  return { x: anchor.cx + DEFAULT_CARD_W / 2 + GAP, y: anchor.cy - EXPANDED_CARD_MIN_H / 2 };
 }
 
 // The reveal: onboarding v3 finished behind the curtain and the prepped work (a personal dashboard app, a live web-research dig, a read-only file tidy-up, and one recurring task) has been running since mid-flow. Compose one tight readable cluster: welcome chat center, jobs stacked left, the plain-English note right; the app view card is born at the arc end (via revealAnchor + the lifecycle auto-add) and the camera glides to it when it arrives. The keep/discard toast owns the jobs' fate afterward.
 export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards }: Args): void {
   const dispatch = useAppDispatch();
   const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
-  const starters = useAppSelector((s) => s.onboardingV3.starters);
-  const scanSummary = useAppSelector((s) => s.onboardingV3.scanSummary);
   const prepped = useAppSelector((s) => s.onboardingV3.prepped);
   const settingsLoaded = useAppSelector((s) => s.settings.loaded);
   const seededRef = useRef(false);
@@ -75,30 +71,9 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
         const cy = (vr.height / 2 - cs.panY) / cs.zoom;
         anchorRef.current = { cx, cy };
         dispatch(setRevealAnchor({ cx, cy }));
-        const audit = prepped.find((j) => j.kind === 'audit');
         const app = prepped.find((j) => j.kind === 'app');
-        const research = prepped.find((j) => j.kind === 'research');
-        const schedule = prepped.find((j) => j.kind === 'schedule');
-        // Lead every card with a plain everyday label so a first-time non-dev instantly gets WHAT each
-        // one is. Phrased as work in motion: at curtain-lift these jobs are usually still running, and
-        // "already done" would be a lie for a few minutes. The cards themselves show live status.
-        const jobSentence = (j: typeof prepped[number]): string => {
-          if (j.kind === 'app') return `App: I'm building you "${j.title}", a dashboard of everything you're working on, in one place. It opens right here when it's ready.`;
-          if (j.kind === 'research') return `Research: I'm looking into "${j.title}" for you on the live web and writing up what's worth knowing.`;
-          if (j.kind === 'schedule') return `Auto-task: "${j.title}" now runs by itself on a schedule, so you don't have to.`;
-          return `Cleanup: I'm going through your files and writing you a plan for what to keep or toss. Nothing gets moved or deleted.`;
-        };
-        const lines: string[] = [`While you were setting up, I got a head start.`];
-        if (scanSummary) lines.push(`I looked around your Mac and saw ${scanSummary}.`);
-        // Dashboard first (the star), then the web research, the tidy-up, and the recurring task.
-        const jobs = [app, research, audit, schedule].filter((j): j is typeof prepped[number] => Boolean(j));
-        if (jobs.length > 0) lines.push(`Here's what I already have going for you, on the cards to your left:\n${jobs.map((j) => `- ${jobSentence(j)}`).join('\n')}`);
-        if (starters.length > 0) lines.push(`A few more things I can do whenever you want:\n${starters.slice(audit ? 1 : 0).map((s) => `- ${s.title}`).join('\n')}`);
-        lines.push(`Nothing's ever saved or deleted without you. Keep any of it going, or clear it anytime.`);
-        dispatch(addNote({ x: cx + DEFAULT_CARD_W / 2 + GAP, y: cy - EXPANDED_CARD_MIN_H / 2, color: 'yellow', content: lines.join('\n\n') }));
-        // addNote mints its own id; it lands in pendingFocusNoteId, which nothing else consumes.
-        const noteId = store.getState().dashboardLayout.pendingFocusNoteId;
-        if (noteId) dispatch(setNoteSize({ noteId, width: NOTE_W, height: NOTE_H }));
+        // The "here's what I did" legend is the fixed RevealHero panel (top-center, unmissable, live
+        // status), not a canvas note, so there is no wall-of-text sticky to miss here anymore.
         placeJobs();
         // The app agent often creates its output BEFORE the curtain lifts (it gets a head start at
         // connect), so its view card was auto-added with no anchor to stage against. Move it to the
@@ -116,7 +91,7 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
         const left = cx - DEFAULT_CARD_W / 2 - GAP - DEFAULT_CARD_W;
         const top = cy - EXPANDED_CARD_MIN_H / 2;
         fitToCards(
-          [{ x: left, y: top, width: (DEFAULT_CARD_W * 2) + NOTE_W + (GAP * 2), height: Math.max(EXPANDED_CARD_MIN_H, DEFAULT_CARD_H * 3 + 48) }],
+          [{ x: left, y: top, width: (DEFAULT_CARD_W * 2) + (GAP * 2), height: Math.max(EXPANDED_CARD_MIN_H, DEFAULT_CARD_H * 3 + 48) }],
           0.9,
           true,
         );
@@ -126,7 +101,7 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
     } finally {
       dispatch(clearReveal());
     }
-  }, [revealPending, isActive, settingsLoaded, starters, scanSummary, prepped, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards, dispatch, placeJobs]);
+  }, [revealPending, isActive, settingsLoaded, prepped, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards, dispatch, placeJobs]);
 
   // Jobs that launched after the curtain lifted: drop their cards in as they arrive.
   useEffect(() => {

From 86db2c78c36a5cd307723aa2bd624401f66004f4 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 18:43:43 -0700
Subject: [PATCH 070/248] [eric] onboarding: reveal work must clear the value
 bar (specifically-useful OR 'oh it can do that'); app is a real tool not a
 mirror, first starter a deliverable from real files, no cleanup chores

---
 backend/apps/onboarding/prep.py               | 63 ++++++++++++-------
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |  5 +-
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index 0efd999d..26973a78 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -33,25 +33,38 @@ P_SYSTEM = (
     "their AI remembers about them); weight it above everything else, then signal_apps (the high-signal tools they "
     "have installed, like an IDE, a design app, or a DAW: these reveal their craft), then folders, plan tier, email "
     "domain. Tune every task and the personal app to that profile; do not output the profile. "
-    "Exactly 4 starters. Each title is 2-5 words that PLAINLY say what the task does (like 'Sort my "
-    "Downloads' or 'Compare headphones'), never clever, punny, or brand-style. Each prompt is a concrete, safe, immediately runnable task "
-    "referencing the user's real folders, file counts, or picked apps when possible; never invent facts, never "
-    "propose deleting anything without review. The FIRST starter must be an audit sized for parallel sub-work "
-    "(inspect folders, cross-reference, produce one report); it may create ONE new report file but must never "
-    "modify or delete existing files, because it may be run automatically on the user's behalf. Every starter "
-    "must produce a tangible result the user can see (a sorted "
-    "folder, a report, a working page); never propose setup, documentation of preferences, or planning-only tasks. "
+    "THE BAR every single item must clear: it is either (a) SPECIFICALLY useful to THIS person's real work in a way "
+    "they could not quickly get elsewhere (it uses their ACTUAL files, projects, or data to produce a real finished "
+    "thing worth keeping), OR (b) a genuine 'oh, it can do THAT?' that makes them see a hundred uses (a surprising "
+    "capability shown on their real stuff). A generic chore FAILS the bar and must be replaced: a file-cleanup report, "
+    "a folder audit, a read-only summary or mirror dashboard of their data, a research overview they could google, an "
+    "empty log file, or any 'set up / organize / plan' task is BANNED. Depth over breadth: two things that hit the bar "
+    "beat four that do not. "
+    "Exactly 4 starters. Each title is 2-5 words that PLAINLY say what the task does (like 'Frame my screenshots' or "
+    "'Compare headphones'), never clever, punny, or brand-style. Each prompt is a concrete, safe, immediately runnable "
+    "task referencing the user's real folders, files, or picked apps; never invent facts. The FIRST starter is the one "
+    "that RUNS automatically, so it must be safe unattended AND clear the bar: a real, specific DELIVERABLE built from "
+    "the user's ACTUAL files that they'd want and could not quickly make themselves (a designer with many screenshots: "
+    "a browsable gallery page of their app screenshots; someone with many notebooks or PDFs of one kind: an indexed, "
+    "searchable library page of them). It READS their real files and writes ONE new artifact (a page or a file); it "
+    "must NEVER modify or delete an existing file. It must NOT be a cleanup report, a folder audit, or a 'plan'. Every "
+    "starter must produce a tangible result the user can see and want; never propose setup, documentation of "
+    "preferences, or planning-only tasks. "
     "Each starter's 'reason' is ONE short standalone clause (max 12 words, no leading 'because') naming the SPECIFIC "
     "real thing you observed (a folder, a file count, a picked app, a usage fact) that makes this task useful for THIS "
     "user; it must be grounded in the input facts, never invented, and read like a person pointing at what they saw. "
-    "Design ONE personal app and make it the CENTERPIECE: an interactive single-page dashboard that mirrors THIS "
-    "user's world, drawn from usage_summary and their files. It surfaces the real projects they are juggling, the "
-    "threads or questions they keep returning to, and what they have been focused on lately, laid out as a clean "
-    "visual dashboard they will want to keep open (cards, lists, a simple chart), seeded with their REAL specifics so "
-    "it is unmistakably about them, not a generic template. app_title is 2-4 words that PLAINLY say what it is (like "
-    "'Your Work Dashboard' or 'Project Hub'), never clever or punny; app_prompt starts with 'Build me' and names the "
-    "actual sections to include using the user's real projects and topics; self-contained, no accounts or API keys. "
-    "app_reason follows the same one-clause grounded-observation rule as a starter reason. "
+    "Design ONE small but genuinely useful WORKING TOOL for this person's craft and make it the CENTERPIECE, this is "
+    "the 'oh, it can build me THAT?' moment. It must DO something: take their input and produce useful output, or "
+    "automate a fiddly micro-task they repeat in their ACTUAL work (inferred from usage_summary + signal_apps). It is "
+    "a real interactive tool they would reopen and USE, NOT a read-only dashboard, NOT a mirror of their data, NOT a "
+    "summary, NOT a feed. Examples of the SHAPE only (never copy, always tailor to THEM): for someone shipping iOS "
+    "apps, a tool that frames a raw screenshot into App Store device mockups, or previews an app icon at every iOS "
+    "size on a mock home screen; for a writer, a tool that rewrites a pasted paragraph across tones; for a data "
+    "person, a tool that pastes CSV and instantly charts it. app_title 2-4 words that plainly name what it DOES "
+    "(like 'Icon Previewer' or 'Screenshot Framer'), never punny. app_prompt starts with 'Build me' and specifies the "
+    "tool's INPUT, what it PRODUCES, and the interaction; fully client-side and self-contained (works with no "
+    "accounts, no API keys, no backend, all in the browser). app_reason follows the same one-clause grounded-"
+    "observation rule as a starter reason and says why THIS tool fits their real work. "
     "Also pick the SINGLE topic this user most repeatedly asks their AI about (from usage_summary; if it is thin, use "
     "their strongest work signal from signal_apps or folders) and turn it into a live web-research task. research_title "
     "is 2-4 words plainly naming the topic (like 'App Store Fees' or 'Best Vector DBs'), never clever or punny. "
@@ -59,14 +72,16 @@ P_SYSTEM = (
     "current answer or comparison of THAT topic for this user (an actual answer, never a plan); it must demand "
     "THIS-YEAR information with publication dates on sources, so the answer cannot quietly be stale training data. "
     "research_reason follows the one-clause grounded-observation rule and names the specific recurring question you saw. "
-    "Also propose 2-3 automations: recurring routines worth running on a schedule for THIS user, drawn from their "
-    "profile and habits (for example a daily morning brief, a weekly folder cleanup, a weekday summary of their "
-    "connected apps). Each automation title is 2-4 words that plainly name the routine (like 'Downloads Cleanup' or "
-    "'Morning Brief'), cadence is exactly 'daily', 'weekday', or 'weekly'. The prompt is the COMPLETE instruction an "
-    "agent executes alone on each scheduled run with NO human present: it must produce its result in one pass, never "
-    "ask questions, never wait for input, and never set up schedules or reminders (the schedule already exists; "
-    "writing 'remind me' or 'set up a log' is wrong, 'summarize X into a file' is right). "
-    "Automations must be safe to run unattended (never delete without review). "
+    "Also propose 1-2 automations: recurring routines that genuinely help THIS user and clear the bar (NEVER a folder "
+    "cleanup, NEVER an empty log, NEVER 'keep a dashboard updated'). A good one delivers something the user actually "
+    "wants on a cadence, e.g. a daily digest of what is new in their SPECIFIC niche (named from usage_summary and "
+    "signal_apps) written to a dated file they will read, or a weekly pull of new items relevant to a project they are "
+    "shipping. Each automation title is 2-4 words that plainly name it (like 'iOS Design Digest'), cadence is exactly "
+    "'daily', 'weekday', or 'weekly'. The prompt is the COMPLETE instruction an agent executes alone on each scheduled "
+    "run with NO human present: produce its result in one pass, never ask questions, never wait for input, never set up "
+    "schedules or reminders (the schedule already exists), and write the result to a concrete file (like "
+    "Documents/<name>_<date>.md). 'Search X and write the result to Y' is right; 'remind me' or 'set up a log' is wrong. "
+    "Safe to run unattended (never delete without review). "
     "The greeting is one or two warm sentences: first say out loud, specifically and confidently, what this person is "
     "into or working on (grounded in usage_summary, signal_apps, and folders, for example 'Looks like you live in "
     "Xcode and ship iOS apps'), then name 2-3 concrete things you actually saw. Be specific, never generic, and never "
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 40d39e06..47a3119b 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -35,9 +35,10 @@ function cadenceToSchedule(cadence: string): Record<string, unknown> {
 }
 
 // Used when prep's aux dropped the automations field, so the reveal always demonstrates automation.
+// A useful digest (not a cleanup chore, which the value bar bans).
 const SCHEDULE_FALLBACK: PersonalizedAutomation = {
-  title: 'Weekly Downloads Sweep',
-  prompt: 'Review my Downloads folder for files added this past week and suggest what to keep, archive, or organize into folders. Report only, never move or delete anything.',
+  title: 'Weekly Roundup',
+  prompt: 'Search the web for the most notable new tools, articles, and releases from this past week in technology and design, and write a short, skimmable roundup to a dated file at Documents/weekly_roundup_<date>.md. Do it in one pass with no questions.',
   cadence: 'weekly',
 };
 

From 33c0cd12afc7424401764ecf512ee39836a8be49 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 18:49:11 -0700
Subject: [PATCH 071/248] [eric] onboarding: drop redundant 'Connected' subtext
 on provider rows (the green ring already signals it)

---
 .../components/OnboardingV3/beats/BeatConnect.tsx    | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index 3e35db89..c1fd1429 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -67,8 +67,6 @@ const BeatConnect: React.FC<{
   // Which provider rows are live, so the tab itself shows "Connected", not a floating label below.
   const connections = useAppSelector(selectSubscriptionConnections);
   const connectedIds = new Set(connections.filter((cx) => cx.isActive !== false).map((cx) => cx.provider));
-  const identityFor = (pid: string): ProviderIdentity | undefined =>
-    identity.find((id) => id.provider === pid) ?? (pid === 'antigravity' ? identity.find((id) => id.provider === 'gemini') : undefined);
   // The whole flow leans on a real connection (identity, chat-history read, personalized reveal), so
   // there is no skip: Continue stays locked until a provider is connected or the free trial is armed.
   const canContinue = connected || freeTrial;
@@ -89,7 +87,6 @@ const BeatConnect: React.FC<{
         {SUBSCRIPTION_PROVIDERS.map((p, i) => {
           const isThis = connecting === p.id;
           const isConnected = connectedIds.has(p.id);
-          const ident = isConnected ? identityFor(p.id) : undefined;
           return (
             <motion.button
               key={p.id}
@@ -111,11 +108,10 @@ const BeatConnect: React.FC<{
               }} />
               <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
                 <span style={{ fontSize: '0.98rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
-                {isConnected
-                  ? <span style={{ fontSize: '0.78rem', fontWeight: 600, color: '#1a9e6a' }}>Connected{ident?.email ? ` as ${ident.email}` : ''}</span>
-                  : isThis && !connected
-                    ? <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
-                    : null}
+                {/* The green ring + filled radio already signal connected, so no redundant "Connected" text. */}
+                {!isConnected && isThis && !connected
+                  ? <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
+                  : null}
               </span>
               {/* Arc's icon tile: a full-height soft-tinted zone on the row's right edge, real brand mark inside. */}
               <span style={{

From 6fa95eb2c530d0157511da59e0dc5e6aaa07f906 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 20:22:11 -0700
Subject: [PATCH 072/248] [eric] dashboard: monterey-style wave wallpaper layer
 under the dot grid (desktop shell)

---
 .../Dashboard/canvas/DashboardCanvas.tsx      |   3 +
 .../Dashboard/desktop/DesktopWallpaper.tsx    | 108 ++++++++++++++++++
 2 files changed, 111 insertions(+)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 33a3193b..c9af2cd2 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -7,6 +7,7 @@ import TetherLayer from './TetherLayer';
 import DashboardCardLayer from './DashboardCardLayer';
 import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
+import DesktopWallpaper from '../desktop/DesktopWallpaper';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
@@ -238,6 +239,8 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
                 : 'default',
         }}
       >
+        <DesktopWallpaper />
+
         {/* Gradient wash: the user's theme-pad stops tint the canvas, Arc-window style; intensity + grain come from the theme device; sits under the dot grid. */}
         {gradient && gradient.length > 1 && (
           <Box
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
new file mode 100644
index 00000000..1238bcb1
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { useThemeMode } from '@/shared/styles/ThemeContext';
+
+/**
+ * Monterey-style layered wave wallpaper for the desktop-shell canvas. Pure SVG so it ships with
+ * the bundle, scales to any viewport, and stays crisp; sits under the wash/grain/dot-grid layers.
+ */
+function DesktopWallpaper(): React.ReactElement {
+  const { mode } = useThemeMode();
+  return (
+    <Box
+      aria-hidden
+      sx={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}
+    >
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 1600 1000"
+        preserveAspectRatio="xMidYMid slice"
+        style={{ position: 'absolute', inset: 0, display: 'block' }}
+      >
+        <defs>
+          <linearGradient id="osw-wp-sky" x1="0.5" y1="0" x2="0.5" y2="1">
+            <stop offset="0" stopColor="#d6d3e4" />
+            <stop offset="0.55" stopColor="#c39bc6" />
+            <stop offset="1" stopColor="#b06ab8" />
+          </linearGradient>
+          <linearGradient id="osw-wp-pinkridge" x1="0" y1="0" x2="0.6" y2="1">
+            <stop offset="0" stopColor="#e4a9c6" />
+            <stop offset="0.5" stopColor="#cb9bbf" />
+            <stop offset="1" stopColor="#bd5f92" />
+          </linearGradient>
+          <linearGradient id="osw-wp-redridge" x1="0.2" y1="0" x2="0.7" y2="1">
+            <stop offset="0" stopColor="#e2547e" />
+            <stop offset="0.55" stopColor="#c33f92" />
+            <stop offset="1" stopColor="#a5349b" />
+          </linearGradient>
+          <linearGradient id="osw-wp-purple" x1="0.1" y1="0.2" x2="0.8" y2="1">
+            <stop offset="0" stopColor="#9a3bbc" />
+            <stop offset="0.6" stopColor="#7726b8" />
+            <stop offset="1" stopColor="#641dab" />
+          </linearGradient>
+          <linearGradient id="osw-wp-indigo" x1="0.15" y1="0" x2="0.75" y2="1">
+            <stop offset="0" stopColor="#6716d5" />
+            <stop offset="0.65" stopColor="#3b1a9e" />
+            <stop offset="1" stopColor="#271581" />
+          </linearGradient>
+          <linearGradient id="osw-wp-violetcrest" x1="0" y1="0" x2="1" y2="0.8">
+            <stop offset="0" stopColor="#8f35e0" />
+            <stop offset="1" stopColor="#6716d5" />
+          </linearGradient>
+          <filter id="osw-wp-soft" x="-10%" y="-10%" width="120%" height="120%">
+            <feGaussianBlur stdDeviation="7" />
+          </filter>
+        </defs>
+
+        <rect width="1600" height="1000" fill="url(#osw-wp-sky)" />
+
+        {/* Far pink ridge sweeping the right half */}
+        <path
+          d="M820,0 C980,260 1120,380 1320,330 C1450,296 1540,220 1600,150 L1600,1000 L820,1000 Z"
+          fill="url(#osw-wp-pinkridge)"
+          filter="url(#osw-wp-soft)"
+          opacity="0.9"
+        />
+
+        {/* Red-magenta ridge descending from the top-left */}
+        <path
+          d="M0,0 L560,0 C480,150 520,300 660,470 C540,650 300,640 0,720 Z"
+          fill="url(#osw-wp-redridge)"
+        />
+
+        {/* Mid magenta band bridging center */}
+        <path
+          d="M0,560 C340,430 620,520 900,660 C1120,770 1380,720 1600,600 L1600,1000 L0,1000 Z"
+          fill="#ab37ad"
+          opacity="0.85"
+          filter="url(#osw-wp-soft)"
+        />
+
+        {/* Deep purple shoulder, left */}
+        <path
+          d="M0,520 C260,470 470,560 640,740 C460,900 200,850 0,880 Z"
+          fill="url(#osw-wp-purple)"
+        />
+
+        {/* Violet crest above the foreground wave */}
+        <path
+          d="M0,830 C360,680 760,850 1060,780 C1280,730 1460,800 1600,740 L1600,1000 L0,1000 Z"
+          fill="url(#osw-wp-violetcrest)"
+          opacity="0.92"
+        />
+
+        {/* Foreground indigo wave */}
+        <path
+          d="M0,880 C320,760 720,910 1020,850 C1260,802 1470,880 1600,830 L1600,1000 L0,1000 Z"
+          fill="url(#osw-wp-indigo)"
+        />
+      </svg>
+      {mode === 'dark' && (
+        <Box sx={{ position: 'absolute', inset: 0, background: 'rgba(12,6,24,0.38)' }} />
+      )}
+    </Box>
+  );
+}
+
+export default DesktopWallpaper;

From 7c88098ba5718eb9a8e9f0f4325a21117f25c4a2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 20:26:08 -0700
Subject: [PATCH 073/248] [eric] dashboard: left desktop dock (per-card tiles,
 hover previews, click focuses; settings gear)

---
 .../Dashboard/canvas/DashboardCanvas.tsx      |  18 ++
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 284 ++++++++++++++++++
 2 files changed, 302 insertions(+)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index c9af2cd2..01010b5a 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -8,6 +8,7 @@ import DashboardCardLayer from './DashboardCardLayer';
 import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
 import DesktopWallpaper from '../desktop/DesktopWallpaper';
+import DesktopDock from '../desktop/DesktopDock';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
@@ -218,6 +219,23 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         </Box>
       </Box>
 
+      {!fullscreenCardId && (
+        <DesktopDock
+          sessions={sessions}
+          cards={cards}
+          viewCards={viewCards}
+          browserCards={browserCards}
+          notes={notes}
+          workflowCards={workflowCards}
+          outputs={outputs}
+          selectedIds={Array.from(selection.selectedIds.keys())}
+          onFocusCard={(cardId, rect) => {
+            canvas.actions.fitToCards([rect], 1.15, true);
+            onHighlightCard?.(cardId);
+          }}
+        />
+      )}
+
       {/* Canvas viewport */}
       <Box
         ref={canvas.viewportRef}
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
new file mode 100644
index 00000000..f4e90965
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -0,0 +1,284 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import LanguageIcon from '@mui/icons-material/Language';
+import SettingsIcon from '@mui/icons-material/Settings';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import CoPresentIcon from '@mui/icons-material/CoPresent';
+import { useAppDispatch } from '@/shared/hooks';
+import { openSettingsModal } from '@/shared/state/settingsSlice';
+import { getWebview } from '@/shared/browserRegistry';
+import { displayChatTitle } from '@/shared/state/sessionDisplay';
+import type { AgentSession } from '@/shared/state/agentsSlice';
+import type {
+  CardPosition,
+  ViewCardPosition,
+  BrowserCardPosition,
+  NotePosition,
+  WorkflowCardPosition,
+} from '@/shared/state/dashboardLayoutSlice';
+import type { Output } from '@/shared/state/outputsSlice';
+
+interface CardRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface DockEntry {
+  id: string;
+  label: string;
+  rect: CardRect;
+  tileBg: string;
+  icon: React.ReactNode;
+  faviconUrl?: string;
+  thumbnail?: string | null;
+  browserId?: string;
+  snippet?: string;
+}
+
+interface DesktopDockProps {
+  sessions: Record<string, AgentSession>;
+  cards: Record<string, CardPosition>;
+  viewCards: Record<string, ViewCardPosition>;
+  browserCards: Record<string, BrowserCardPosition>;
+  notes: Record<string, NotePosition>;
+  workflowCards: Record<string, WorkflowCardPosition>;
+  outputs: Record<string, Output>;
+  selectedIds: string[];
+  onFocusCard: (id: string, rect: CardRect) => void;
+}
+
+const TILE = 30;
+const PREVIEW_W = 190;
+
+/** Left-edge desktop dock: one tile per open card, hover previews, click focuses the window. */
+function DesktopDock({
+  sessions,
+  cards,
+  viewCards,
+  browserCards,
+  notes,
+  workflowCards,
+  outputs,
+  selectedIds,
+  onFocusCard,
+}: DesktopDockProps): React.ReactElement | null {
+  const dispatch = useAppDispatch();
+  const [hovered, setHovered] = useState<{ id: string; top: number } | null>(null);
+  const [liveShot, setLiveShot] = useState<{ id: string; dataUrl: string } | null>(null);
+  const hoverTimer = useRef<number | null>(null);
+
+  const entries = useMemo<DockEntry[]>(() => {
+    const list: DockEntry[] = [];
+    for (const card of Object.values(cards)) {
+      const session = sessions[card.session_id];
+      if (!session) continue;
+      list.push({
+        id: card.session_id,
+        label: displayChatTitle(session),
+        rect: card,
+        tileBg: 'linear-gradient(135deg, #4a7dd6, #2b4fa8)',
+        icon: <AutoAwesomeIcon sx={{ fontSize: 17, color: '#fff' }} />,
+        snippet: session.turn_label?.label || undefined,
+      });
+    }
+    for (const bc of Object.values(browserCards)) {
+      const activeTab = bc.tabs.find((t) => t.id === bc.activeTabId) || bc.tabs[0];
+      list.push({
+        id: bc.browser_id,
+        label: activeTab?.title || 'Browser',
+        rect: bc,
+        tileBg: 'linear-gradient(135deg, #4f9fe8, #2f6ed4)',
+        icon: <LanguageIcon sx={{ fontSize: 17, color: '#fff' }} />,
+        faviconUrl: activeTab?.favicon,
+        browserId: bc.browser_id,
+      });
+    }
+    for (const [cardKey, vc] of Object.entries(viewCards)) {
+      const output = outputs[vc.output_id];
+      list.push({
+        id: cardKey,
+        label: output?.name || 'App',
+        rect: vc,
+        tileBg: 'linear-gradient(135deg, #ef9552, #d96a2b)',
+        icon: <CoPresentIcon sx={{ fontSize: 16, color: '#fff' }} />,
+        thumbnail: output?.thumbnail,
+      });
+    }
+    for (const note of Object.values(notes)) {
+      const firstLine = (note.content || '').split('\n')[0].trim();
+      list.push({
+        id: note.note_id,
+        label: firstLine || 'Note',
+        rect: note,
+        tileBg: 'linear-gradient(135deg, #f2d270, #e0b23e)',
+        icon: <EditNoteIcon sx={{ fontSize: 18, color: '#7a5d10' }} />,
+        snippet: (note.content || '').slice(0, 140),
+      });
+    }
+    for (const [cardKey, wf] of Object.entries(workflowCards)) {
+      list.push({
+        id: cardKey,
+        label: 'Workflow',
+        rect: wf,
+        tileBg: 'linear-gradient(135deg, #ef7a70, #d94f45)',
+        icon: <CalendarMonthIcon sx={{ fontSize: 16, color: '#fff' }} />,
+      });
+    }
+    return list;
+  }, [sessions, cards, viewCards, browserCards, notes, workflowCards, outputs]);
+
+  const beginHover = useCallback(
+    (entry: DockEntry, target: HTMLElement) => {
+      if (hoverTimer.current) window.clearTimeout(hoverTimer.current);
+      const top = target.offsetTop;
+      hoverTimer.current = window.setTimeout(() => {
+        setHovered({ id: entry.id, top });
+        if (entry.browserId) {
+          const wv = getWebview(entry.browserId);
+          const capture = wv?.capturePage?.();
+          if (capture && typeof (capture as Promise<unknown>).then === 'function') {
+            (capture as Promise<{ toDataURL(): string }>)
+              .then((img) => setLiveShot({ id: entry.id, dataUrl: img.toDataURL() }))
+              .catch(() => undefined);
+          }
+        }
+      }, 220);
+    },
+    [],
+  );
+
+  const endHover = useCallback(() => {
+    if (hoverTimer.current) window.clearTimeout(hoverTimer.current);
+    setHovered(null);
+    setLiveShot(null);
+  }, []);
+
+  if (entries.length === 0) return null;
+
+  const hoveredEntry = hovered ? entries.find((e) => e.id === hovered.id) : undefined;
+  const previewImage = hoveredEntry
+    ? (liveShot?.id === hoveredEntry.id ? liveShot.dataUrl : hoveredEntry.thumbnail || undefined)
+    : undefined;
+
+  return (
+    <Box
+      onMouseLeave={endHover}
+      sx={{
+        position: 'absolute',
+        left: 12,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        zIndex: 11,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '9px',
+        p: '7px',
+        borderRadius: '14px',
+        background: 'rgba(22,12,34,0.66)',
+        backdropFilter: 'blur(20px) saturate(160%)',
+        WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+        boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
+      }}
+    >
+      {entries.map((entry) => {
+        const isActive = selectedIds.includes(entry.id);
+        return (
+          <Box
+            key={entry.id}
+            onMouseEnter={(e) => beginHover(entry, e.currentTarget as HTMLElement)}
+            onClick={() => {
+              endHover();
+              onFocusCard(entry.id, entry.rect);
+            }}
+            sx={{
+              width: TILE,
+              height: TILE,
+              borderRadius: '9px',
+              background: entry.tileBg,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              overflow: 'hidden',
+              flexShrink: 0,
+              transition: 'transform 0.15s ease',
+              '&:hover': { transform: 'scale(1.12)' },
+              ...(isActive && { outline: '2px solid #6aa2ff', outlineOffset: '2px' }),
+            }}
+          >
+            {entry.faviconUrl ? (
+              <Box
+                component="img"
+                src={entry.faviconUrl}
+                alt=""
+                sx={{ width: 18, height: 18, borderRadius: '4px' }}
+              />
+            ) : (
+              entry.icon
+            )}
+          </Box>
+        );
+      })}
+
+      <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
+      <Box
+        onClick={() => dispatch(openSettingsModal(undefined))}
+        onMouseEnter={endHover}
+        sx={{
+          width: TILE,
+          height: TILE,
+          borderRadius: '9px',
+          background: 'linear-gradient(135deg, #5a5a62, #34343c)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          flexShrink: 0,
+          transition: 'transform 0.15s ease',
+          '&:hover': { transform: 'scale(1.12)' },
+        }}
+      >
+        <SettingsIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
+      </Box>
+
+      {hoveredEntry && (
+        <Box
+          sx={{
+            position: 'absolute',
+            left: 'calc(100% + 10px)',
+            top: Math.max(0, hovered!.top - 34),
+            width: PREVIEW_W,
+            borderRadius: '10px',
+            overflow: 'hidden',
+            background: previewImage ? '#fff' : 'rgba(22,12,34,0.9)',
+            boxShadow: '0 12px 32px rgba(0,0,0,0.4)',
+            pointerEvents: 'none',
+          }}
+        >
+          {previewImage ? (
+            <Box component="img" src={previewImage} alt="" sx={{ width: '100%', display: 'block' }} />
+          ) : (
+            <Box sx={{ p: 1.25 }}>
+              <Typography sx={{ color: '#fff', fontSize: '0.78rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {hoveredEntry.label}
+              </Typography>
+              {hoveredEntry.snippet && (
+                <Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.7rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                  {hoveredEntry.snippet}
+                </Typography>
+              )}
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default DesktopDock;

From 6e91099ba7173ce88c7e67327674b899b6d9f541 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 20:34:48 -0700
Subject: [PATCH 074/248] [eric] dashboard: desktop shell chrome (spawn pill
 composer, glass corner controls w/ close-selected, help pill)

---
 .../app/pages/Dashboard/DashboardToolbar.tsx  | 330 +-----------------
 .../Dashboard/canvas/DashboardCanvas.tsx      |   6 +
 .../Dashboard/canvas/DashboardOverlays.tsx    |  12 +
 .../Dashboard/controls/CanvasControls.tsx     | 185 +++++-----
 .../Dashboard/desktop/DesktopSpawnPill.tsx    | 176 ++++++++++
 .../app/pages/Dashboard/desktop/HelpPill.tsx  |  45 +++
 .../hooks/interaction/deleteSelectedCards.ts  |  35 ++
 .../interaction/useDashboardShortcuts.ts      |  33 +-
 8 files changed, 397 insertions(+), 425 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
 create mode 100644 frontend/src/app/pages/Dashboard/hooks/interaction/deleteSelectedCards.ts

diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 1b385459..24adb1c8 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -3,27 +3,10 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import InputBase from '@mui/material/InputBase';
 import CircularProgress from '@mui/material/CircularProgress';
-import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import Snackbar from '@mui/material/Snackbar';
 import Icon from '@mui/material/Icon';
-import { styled } from '@mui/material/styles';
-import AddRounded from '@mui/icons-material/AddRounded';
 
-import ChatBubbleTeardrop from './ChatBubbleTeardrop';
-
-// Collapsed-row buttons hop up one after another when the toolbar appears.
-const popIn = (i: number) => ({
-  animation: `toolbar-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) ${i * 55}ms both`,
-  '@keyframes toolbar-pop': {
-    from: { opacity: 0, transform: 'translateY(14px)' },
-    to: { opacity: 1, transform: 'translateY(0)' },
-  },
-});
-import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
-import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
-import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
-import EventRepeatIcon from '@mui/icons-material/EventRepeat';
-import LanguageIcon from '@mui/icons-material/Language';
+import DesktopSpawnPill from './desktop/DesktopSpawnPill';
 import SearchIcon from '@mui/icons-material/Search';
 import { motion } from 'framer-motion';
 import ChatInput from '@/app/pages/AgentChat/ChatInput';
@@ -37,7 +20,6 @@ import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { searchHistory, clearHistorySearch } from '@/shared/state/agentsSlice';
 import { updateSettingsPatch, AppSettings } from '@/shared/state/settingsSlice';
 import { store } from '@/shared/state/store';
-import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import type { Output } from '@/shared/state/outputsSlice';
 
 interface Props {
@@ -69,28 +51,6 @@ interface Props {
 }
 
 const TOOLBAR_OWNER_ID = '__toolbar__';
-const BTN = 44;
-
-const WarmTooltip = styled(
-  ({ className, ...props }: React.ComponentProps<typeof Tooltip> & { className?: string }) => (
-    <Tooltip {...props} classes={{ popper: className }} />
-  )
-)<{ tokens: ClaudeTokens }>(({ tokens: c }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: c.bg.inverse,
-    color: c.text.inverse,
-    fontFamily: c.font.sans,
-    fontSize: '0.78rem',
-    fontWeight: 500,
-    padding: '6px 12px',
-    borderRadius: c.radius.md,
-    boxShadow: c.shadow.md,
-    letterSpacing: '0.01em',
-  },
-  [`& .${tooltipClasses.arrow}`]: {
-    color: c.bg.inverse,
-  },
-}));
 
 const MotionBox = motion.div;
 
@@ -178,7 +138,6 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
     const [historyQuery, setHistoryQuery] = useState('');
     const [popoverMode, setPopoverMode] = useState<'search' | 'runs' | 'schedule'>('search');
     const [expandToast, setExpandToast] = useState<string | null>(null);
-    const shortcut = useAppSelector((s) => s.settings.data.new_agent_shortcut);
     const outputs = useAppSelector((s) => s.outputs.items);
     const historySearch = useAppSelector((s) => s.agents.historySearch);
     const allRuns = useAppSelector((s) => s.workflows.allRuns);
@@ -195,16 +154,6 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
       );
     }, [outputList, viewSearch]);
 
-    const shortcutLabel = (shortcut || '')
-      .split('+')
-      .map((p) => {
-        if (p === 'Meta') return '⌘';
-        if (p === 'Ctrl') return 'Ctrl';
-        if (p === 'Alt') return '⌥';
-        if (p === 'Shift') return '⇧';
-        return p.toUpperCase();
-      })
-      .join('');
 
     React.useImperativeHandle(ref, () => containerRef.current!, []);
 
@@ -416,7 +365,6 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
       }
     }, [handleHistoryLoadMore]);
 
-    const placeholderItems: Array<{ icon: typeof StickyNote2OutlinedIcon; label: string; sub: string }> = [];
 
     return (
       <>
@@ -427,12 +375,13 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
         style={{
           display: 'flex',
           flexDirection: 'column',
-          // Drop toolbar card chrome when popover is open so we don't double-card; popover supplies its own surface.
-          background: historyOpen ? 'transparent' : c.bg.surface,
-          border: historyOpen ? '1px solid transparent' : `1px solid ${c.border.subtle}`,
+          // Drop toolbar card chrome when popover is open (popover supplies its own surface) and when
+          // collapsed (the spawn pill carries its own dark glass).
+          background: historyOpen || !isExpanded ? 'transparent' : c.bg.surface,
+          border: historyOpen || !isExpanded ? '1px solid transparent' : `1px solid ${c.border.subtle}`,
           borderRadius: `${c.radius.xl}px`,
-          boxShadow: historyOpen ? 'none' : c.shadow.lg,
-          padding: isExpanded ? '6px' : '5px',
+          boxShadow: historyOpen || !isExpanded ? 'none' : c.shadow.lg,
+          padding: isExpanded ? '6px' : '0px',
           userSelect: 'none' as const,
           overflow: inputOpen || newAgentBounce || historyOpen ? 'visible' : 'hidden',
           // historyOpen: width owned by SchedulePopover; leave undefined so framer-motion measures intrinsic size.
@@ -457,6 +406,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
               thinkingLevel={thinkingLevel}
               onThinkingLevelChange={handleThinkingLevelChange}
               prefillPrompt={prefillPrompt}
+              placeholderOverride="What should I do sir..."
             />
           </div>
         ) : historyOpen ? (
@@ -613,259 +563,17 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
             </Box>
           </div>
         ) : (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
-            <WarmTooltip tokens={c} title={`New Agent  ${shortcutLabel}`} placement="top" arrow enterDelay={400}>
-              <Box
-                role="button"
-                aria-label="New Agent"
-                data-onboarding="new-agent-button"
-                tabIndex={0}
-                onClick={() => {
-                  if (newAgentBounce) onNewAgentBounceEnd?.();
-                  onNewAgent();
-                }}
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: BTN,
-                  height: BTN,
-                  borderRadius: `${c.radius.lg}px`,
-                  bgcolor: c.accent.primary,
-                  color: '#fff',
-                  cursor: 'pointer',
-                  transition: 'background-color 0.15s',
-                  '&:hover': { bgcolor: c.accent.hover },
-                  '&:active': { bgcolor: c.accent.pressed },
-                  // Pop in first; the empty-canvas bounce takes over once the row has settled.
-                  animation: `toolbar-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both${newAgentBounce ? ', new-agent-bounce 1.6s ease-out 0.6s infinite' : ''}`,
-                  '@keyframes toolbar-pop': {
-                    from: { opacity: 0, transform: 'translateY(14px)' },
-                    to: { opacity: 1, transform: 'translateY(0)' },
-                  },
-                  '@keyframes new-agent-bounce': {
-                    '0%':   { transform: 'translateY(0)' },
-                    '15%':  { transform: 'translateY(-10px)' },
-                    '30%':  { transform: 'translateY(0)' },
-                    '42%':  { transform: 'translateY(-4px)' },
-                    '55%':  { transform: 'translateY(0)' },
-                    '100%': { transform: 'translateY(0)' },
-                  },
-                }}
-              >
-                <ChatBubbleTeardrop sx={{ fontSize: 18 }} />
-              </Box>
-            </WarmTooltip>
-
-            <WarmTooltip
-              tokens={c}
-              placement="top"
-              arrow
-              enterDelay={200}
-              title={
-                <Box sx={{ textAlign: 'center' }}>
-                  <Box sx={{ fontWeight: 600 }}>Add App  ⌘M</Box>
-                </Box>
-              }
-            >
-              <Box
-                role="button"
-                aria-label="Add App"
-                tabIndex={0}
-                onClick={handleOpenViewPicker}
-                data-onboarding="dashboard-toolbar-apps"
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: BTN,
-                  height: BTN,
-                  borderRadius: `${c.radius.md}px`,
-                  color: c.text.tertiary,
-                  cursor: 'pointer',
-                  transition: 'opacity 0.15s, background-color 0.15s',
-                  '&:hover': { opacity: 1, bgcolor: c.bg.secondary, color: c.accent.primary },
-                  ...popIn(1),
-                }}
-              >
-                <GridViewRoundedIcon sx={{ fontSize: 22 }} />
-              </Box>
-            </WarmTooltip>
-
-            <WarmTooltip
-              tokens={c}
-              placement="top"
-              arrow
-              enterDelay={200}
-              title={
-                <Box sx={{ textAlign: 'center' }}>
-                  <Box sx={{ fontWeight: 600 }}>Browser  ⌘N</Box>
-                </Box>
-              }
-            >
-              <Box
-                role="button"
-                aria-label="Browser"
-                data-onboarding="browser-button"
-                tabIndex={0}
-                onClick={onAddBrowser}
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: BTN,
-                  height: BTN,
-                  borderRadius: `${c.radius.md}px`,
-                  color: c.text.tertiary,
-                  cursor: 'pointer',
-                  transition: 'opacity 0.15s, background-color 0.15s',
-                  '&:hover': { opacity: 1, bgcolor: c.bg.secondary, color: c.accent.primary },
-                  ...popIn(2),
-                }}
-              >
-                <LanguageIcon sx={{ fontSize: 22 }} />
-              </Box>
-            </WarmTooltip>
-
-            <WarmTooltip
-              tokens={c}
-              placement="top"
-              arrow
-              enterDelay={200}
-              title={
-                <Box sx={{ textAlign: 'center' }}>
-                  <Box sx={{ fontWeight: 600 }}>Workflows</Box>
-                  <Box sx={{ opacity: 0.6, fontSize: '0.7rem', mt: '1px' }}>Schedule and calendar</Box>
-                </Box>
-              }
-            >
-              <Box
-                role="button"
-                aria-label="Workflows"
-                tabIndex={0}
-                onClick={() => dispatch(workflowsHubOpen ? closeWorkflowsApp() : openWorkflowsApp())}
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: BTN,
-                  height: BTN,
-                  borderRadius: `${c.radius.md}px`,
-                  color: workflowsHubOpen ? c.accent.primary : c.text.tertiary,
-                  bgcolor: workflowsHubOpen ? c.bg.secondary : 'transparent',
-                  cursor: 'pointer',
-                  transition: 'opacity 0.15s, background-color 0.15s',
-                  '&:hover': { opacity: 1, bgcolor: c.bg.secondary, color: c.accent.primary },
-                  ...popIn(3),
-                }}
-              >
-                <EventRepeatIcon sx={{ fontSize: 22 }} />
-              </Box>
-            </WarmTooltip>
-
-            <WarmTooltip
-              tokens={c}
-              placement="top"
-              arrow
-              enterDelay={200}
-              title={
-                <Box sx={{ textAlign: 'center' }}>
-                  <Box sx={{ fontWeight: 600 }}>Add note</Box>
-                  <Box sx={{ opacity: 0.6, fontSize: '0.7rem', mt: '1px' }}>Sticky note on the canvas</Box>
-                </Box>
-              }
-            >
-              <Box
-                role="button"
-                aria-label="Add note"
-                tabIndex={0}
-                onClick={onAddNote}
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: BTN,
-                  height: BTN,
-                  borderRadius: `${c.radius.md}px`,
-                  color: c.text.tertiary,
-                  cursor: 'pointer',
-                  transition: 'opacity 0.15s, background-color 0.15s',
-                  '&:hover': { opacity: 1, bgcolor: c.bg.secondary, color: c.accent.primary },
-                  ...popIn(4),
-                }}
-              >
-                <StickyNote2OutlinedIcon sx={{ fontSize: 22 }} />
-              </Box>
-            </WarmTooltip>
-
-            <WarmTooltip
-              tokens={c}
-              placement="top"
-              arrow
-              enterDelay={200}
-              title={
-                <Box sx={{ textAlign: 'center' }}>
-                  <Box sx={{ fontWeight: 600 }}>History  ⌘O</Box>
-                </Box>
-              }
-            >
-              <Box
-                role="button"
-                aria-label="History"
-                tabIndex={0}
-                onClick={handleOpenHistory}
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: BTN,
-                  height: BTN,
-                  borderRadius: `${c.radius.md}px`,
-                  color: c.text.tertiary,
-                  cursor: 'pointer',
-                  transition: 'opacity 0.15s, background-color 0.15s',
-                  '&:hover': { opacity: 1, bgcolor: c.bg.secondary, color: c.accent.primary },
-                  ...popIn(5),
-                }}
-              >
-                <HistoryRoundedIcon sx={{ fontSize: 22 }} />
-              </Box>
-            </WarmTooltip>
-
-            {placeholderItems.map(({ icon: PlaceholderIcon, label, sub }) => (
-              <WarmTooltip
-                key={label}
-                tokens={c}
-                placement="top"
-                arrow
-                enterDelay={200}
-                title={
-                  <Box sx={{ textAlign: 'center' }}>
-                    <Box sx={{ fontWeight: 600 }}>{label}</Box>
-                    <Box sx={{ opacity: 0.6, fontSize: '0.7rem', mt: '1px' }}>{sub}</Box>
-                  </Box>
-                }
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: BTN,
-                    height: BTN,
-                    borderRadius: `${c.radius.md}px`,
-                    color: c.text.tertiary,
-                    opacity: 0.45,
-                    cursor: 'default',
-                    transition: 'opacity 0.15s, background-color 0.15s',
-                    '&:hover': { opacity: 0.65, bgcolor: c.bg.secondary },
-                  }}
-                >
-                  <PlaceholderIcon sx={{ fontSize: 22 }} />
-                </Box>
-              </WarmTooltip>
-            ))}
-          </div>
+          <DesktopSpawnPill
+            onOpenComposer={() => {
+              if (newAgentBounce) onNewAgentBounceEnd?.();
+              onNewAgent();
+            }}
+            onAddNote={onAddNote}
+            onAddBrowser={onAddBrowser}
+            onAddApp={handleOpenViewPicker}
+            onWorkflows={() => dispatch(workflowsHubOpen ? closeWorkflowsApp() : openWorkflowsApp())}
+            onHistory={handleOpenHistory}
+          />
         )}
       </MotionBox>
       <Snackbar
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 01010b5a..41b071b8 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -25,6 +25,7 @@ import type { Output } from '@/shared/state/outputsSlice';
 import type { CardType, useDashboardSelection } from '../hooks/state/useDashboardSelection';
 import type { useCanvasControls } from '../hooks/interaction/useCanvasControls';
 import { useWebviewSuspend } from '../hooks/interaction/useWebviewSuspend';
+import { deleteSelectedCards } from '../hooks/interaction/deleteSelectedCards';
 import type { Tether } from '../geometry/dashboardTethers';
 
 type Selection = ReturnType<typeof useDashboardSelection>;
@@ -378,6 +379,11 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         onNewAgentBounceEnd={onNewAgentBounceEnd}
         onFitToView={onFitToView}
         onTidy={onTidy}
+        onDeleteSelected={() => {
+          deleteSelectedCards(selection.selectedIds, dispatch);
+          selection.deselectAll();
+        }}
+        hasSelection={selection.selectedIds.size > 0}
         onSearchPaletteClose={onSearchPaletteClose}
         toolbarPrefill={toolbarPrefill}
         toolbarPrefillMode={toolbarPrefillMode}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index 2611e144..8ee02284 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -2,6 +2,7 @@ import React, { type RefObject } from 'react';
 import Box from '@mui/material/Box';
 import DashboardToolbar from '../DashboardToolbar';
 import CanvasControls from '../controls/CanvasControls';
+import HelpPill from '../desktop/HelpPill';
 import CardSearchPalette from '../controls/CardSearchPalette';
 import DirectionHints from '../controls/DirectionHints';
 import WorkflowRunningToast from '@/app/pages/Workflows/WorkflowRunningToast';
@@ -50,6 +51,8 @@ interface DashboardOverlaysProps {
   onNewAgentBounceEnd: () => void;
   onFitToView: () => void;
   onTidy: () => void;
+  onDeleteSelected: () => void;
+  hasSelection: boolean;
   onSearchPaletteClose: () => void;
   toolbarPrefill?: string;
   toolbarPrefillMode?: string;
@@ -81,6 +84,8 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
   onNewAgentBounceEnd,
   onFitToView,
   onTidy,
+  onDeleteSelected,
+  hasSelection,
   onSearchPaletteClose,
   toolbarPrefill,
   toolbarPrefillMode,
@@ -107,6 +112,11 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
         />
       </Box>
 
+      {/* Desktop help pill */}
+      <Box sx={{ position: 'absolute', top: 14, right: 16, zIndex: 10 }}>
+        <HelpPill />
+      </Box>
+
       {/* Arrow navigation hints when zoomed in on a card */}
       {focusedCardId && canvas.zoom >= 0.4 && (
         <DirectionHints
@@ -125,6 +135,8 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
           actions={canvas.actions}
           onFitToView={onFitToView}
           onTidy={onTidy}
+          onDeleteSelected={onDeleteSelected}
+          hasSelection={hasSelection}
           minimapProps={{
             panX: canvas.panX,
             panY: canvas.panY,
diff --git a/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx b/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
index 84ff7152..db8fab0e 100644
--- a/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
+++ b/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import RemoveIcon from '@mui/icons-material/Remove';
 import AddIcon from '@mui/icons-material/Add';
-import FitScreenIcon from '@mui/icons-material/FitScreen';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import SpaceDashboardOutlinedIcon from '@mui/icons-material/SpaceDashboardOutlined';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import MapIcon from '@mui/icons-material/Map';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import type { CanvasActions } from '../hooks/interaction/useCanvasControls';
 import Minimap from './Minimap';
 import type { MinimapProps } from './Minimap';
@@ -18,6 +16,8 @@ interface Props {
   actions: CanvasActions;
   onFitToView: () => void;
   onTidy: () => void;
+  onDeleteSelected: () => void;
+  hasSelection: boolean;
   minimapProps: Omit<MinimapProps, 'onPan'>;
   onMinimapPan: (panX: number, panY: number) => void;
 }
@@ -33,8 +33,27 @@ function readMinimapPref(): boolean {
   }
 }
 
-const CanvasControls: React.FC<Props> = ({ zoom, actions, onFitToView, onTidy, minimapProps, onMinimapPan }) => {
-  const c = useClaudeTokens();
+const GLASS = 'rgba(22,12,34,0.66)';
+const GLASS_BLUR = 'blur(20px) saturate(160%)';
+
+const circleSx = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 30,
+  height: 30,
+  borderRadius: '50%',
+  background: GLASS,
+  backdropFilter: GLASS_BLUR,
+  WebkitBackdropFilter: GLASS_BLUR,
+  boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+  color: 'rgba(255,255,255,0.72)',
+  cursor: 'pointer',
+  transition: 'color 0.15s',
+  '&:hover': { color: '#fff' },
+};
+
+const CanvasControls: React.FC<Props> = ({ zoom, actions, onFitToView, onTidy, onDeleteSelected, hasSelection, minimapProps, onMinimapPan }) => {
   const pct = Math.round(zoom * 100);
   const [minimapOpen, setMinimapOpen] = useState<boolean>(() => readMinimapPref());
   const setAndPersistMinimap = (next: boolean) => {
@@ -53,10 +72,11 @@ const CanvasControls: React.FC<Props> = ({ zoom, actions, onFitToView, onTidy, m
           sx={{
             width: 200,
             height: 140,
-            bgcolor: c.bg.surface,
-            border: `1px solid ${c.border.medium}`,
-            borderRadius: `${c.radius.lg}px`,
-            boxShadow: c.shadow.md,
+            background: GLASS,
+            backdropFilter: GLASS_BLUR,
+            WebkitBackdropFilter: GLASS_BLUR,
+            borderRadius: '12px',
+            boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
             overflow: 'hidden',
           }}
         >
@@ -64,87 +84,82 @@ const CanvasControls: React.FC<Props> = ({ zoom, actions, onFitToView, onTidy, m
         </Box>
       )}
 
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 0.25,
-          bgcolor: c.bg.surface,
-          border: `1px solid ${c.border.medium}`,
-          borderRadius: `${c.radius.lg}px`,
-          boxShadow: c.shadow.sm,
-          py: 0.25,
-          px: 0.5,
-          userSelect: 'none',
-        }}
-        data-onboarding="canvas-controls"
-      >
-        <Tooltip title="Zoom out" placement="top">
-          <IconButton size="small" onClick={actions.zoomOut} sx={{ color: c.text.muted }}>
-            <RemoveIcon sx={{ fontSize: '1rem' }} />
-          </IconButton>
-        </Tooltip>
-
-        <Tooltip title="Reset to 100%" placement="top">
-          <Typography
-            onClick={actions.resetZoom}
-            sx={{
-              fontSize: '0.75rem',
-              fontWeight: 500,
-              color: c.text.secondary,
-              minWidth: 40,
-              textAlign: 'center',
-              cursor: 'pointer',
-              lineHeight: 1,
-              '&:hover': { color: c.text.primary },
-            }}
-          >
-            {pct}%
-          </Typography>
-        </Tooltip>
-
-        <Tooltip title="Zoom in" placement="top">
-          <IconButton size="small" onClick={actions.zoomIn} sx={{ color: c.text.muted }}>
-            <AddIcon sx={{ fontSize: '1rem' }} />
-          </IconButton>
-        </Tooltip>
-
-        <Box sx={{ width: 1, height: 16, bgcolor: c.border.medium, mx: 0.5 }} />
-
-        <Tooltip title="Fit to view" placement="top">
-          <IconButton
-            size="small"
-            onClick={onFitToView}
-            sx={{ color: c.text.muted }}
-            data-onboarding="canvas-fit-to-view"
-          >
-            <FitScreenIcon sx={{ fontSize: '1rem' }} />
-          </IconButton>
-        </Tooltip>
+      <Tooltip title={minimapOpen ? 'Hide minimap' : 'Show minimap'} placement="left">
+        <Box
+          role="button"
+          aria-label="Toggle minimap"
+          onClick={() => setAndPersistMinimap(!minimapOpen)}
+          data-onboarding="canvas-minimap-toggle"
+          sx={{ ...circleSx, width: 26, height: 26, borderRadius: '8px', ...(minimapOpen && { color: '#fff' }) }}
+        >
+          <MapIcon sx={{ fontSize: 14 }} />
+        </Box>
+      </Tooltip>
 
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }} data-onboarding="canvas-controls">
         <Tooltip title="Tidy layout" placement="top">
-          <IconButton
-            size="small"
-            onClick={onTidy}
-            sx={{ color: c.text.muted }}
-            data-onboarding="canvas-tidy-layout"
-          >
-            <AutoAwesomeIcon sx={{ fontSize: '1rem' }} />
-          </IconButton>
+          <Box role="button" aria-label="Tidy layout" onClick={onTidy} data-onboarding="canvas-tidy-layout" sx={circleSx}>
+            <SpaceDashboardOutlinedIcon sx={{ fontSize: 15 }} />
+          </Box>
         </Tooltip>
 
-        <Box sx={{ width: 1, height: 16, bgcolor: c.border.medium, mx: 0.5 }} />
-
-        <Tooltip title={minimapOpen ? 'Hide minimap' : 'Show minimap'} placement="top">
-          <IconButton
-            size="small"
-            onClick={() => setAndPersistMinimap(!minimapOpen)}
-            sx={{ color: minimapOpen ? c.accent.primary : c.text.muted }}
-            data-onboarding="canvas-minimap-toggle"
+        <Tooltip title={hasSelection ? 'Close selected' : 'Select a card to close it'} placement="top">
+          <Box
+            role="button"
+            aria-label="Close selected"
+            onClick={() => { if (hasSelection) onDeleteSelected(); }}
+            sx={{ ...circleSx, ...(!hasSelection && { color: 'rgba(255,255,255,0.35)', cursor: 'default', '&:hover': { color: 'rgba(255,255,255,0.35)' } }) }}
           >
-            <MapIcon sx={{ fontSize: '1rem' }} />
-          </IconButton>
+            <DeleteOutlineIcon sx={{ fontSize: 15 }} />
+          </Box>
         </Tooltip>
+
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            height: 30,
+            px: 1,
+            borderRadius: 999,
+            background: GLASS,
+            backdropFilter: GLASS_BLUR,
+            WebkitBackdropFilter: GLASS_BLUR,
+            boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+            userSelect: 'none',
+          }}
+        >
+          <Tooltip title="Zoom out" placement="top">
+            <Box role="button" aria-label="Zoom out" onClick={actions.zoomOut} sx={{ display: 'flex', alignItems: 'center', color: 'rgba(255,255,255,0.6)', cursor: 'pointer', '&:hover': { color: '#fff' } }}>
+              <RemoveIcon sx={{ fontSize: 15 }} />
+            </Box>
+          </Tooltip>
+
+          <Tooltip title="Fit to view" placement="top">
+            <Typography
+              onClick={onFitToView}
+              data-onboarding="canvas-fit-to-view"
+              sx={{
+                fontSize: '0.72rem',
+                fontWeight: 500,
+                color: 'rgba(255,255,255,0.78)',
+                minWidth: 38,
+                textAlign: 'center',
+                cursor: 'pointer',
+                lineHeight: 1,
+                '&:hover': { color: '#fff' },
+              }}
+            >
+              {pct}%
+            </Typography>
+          </Tooltip>
+
+          <Tooltip title="Zoom in" placement="top">
+            <Box role="button" aria-label="Zoom in" onClick={actions.zoomIn} sx={{ display: 'flex', alignItems: 'center', color: 'rgba(255,255,255,0.6)', cursor: 'pointer', '&:hover': { color: '#fff' } }}>
+              <AddIcon sx={{ fontSize: 15 }} />
+            </Box>
+          </Tooltip>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
new file mode 100644
index 00000000..b0af5641
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -0,0 +1,176 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import AddRounded from '@mui/icons-material/AddRounded';
+import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
+import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
+import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
+import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
+import EventRepeatIcon from '@mui/icons-material/EventRepeat';
+import LanguageIcon from '@mui/icons-material/Language';
+
+interface DesktopSpawnPillProps {
+  onOpenComposer: () => void;
+  onAddNote: () => void;
+  onAddBrowser: () => void;
+  onAddApp: () => void;
+  onWorkflows: () => void;
+  onHistory: () => void;
+}
+
+const MENU_ITEMS: Array<{ key: string; label: string; icon: React.ElementType }> = [
+  { key: 'note', label: 'Add note', icon: StickyNote2OutlinedIcon },
+  { key: 'browser', label: 'Browser', icon: LanguageIcon },
+  { key: 'app', label: 'Add app', icon: GridViewRoundedIcon },
+  { key: 'workflows', label: 'Workflows', icon: EventRepeatIcon },
+  { key: 'history', label: 'History', icon: HistoryRoundedIcon },
+];
+
+/** Collapsed desktop composer: one dark pill that spawns an agent; + tucks the add actions away. */
+function DesktopSpawnPill({
+  onOpenComposer,
+  onAddNote,
+  onAddBrowser,
+  onAddApp,
+  onWorkflows,
+  onHistory,
+}: DesktopSpawnPillProps): React.ReactElement {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!menuOpen) return undefined;
+    const onDown = (e: MouseEvent): void => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    return () => document.removeEventListener('mousedown', onDown);
+  }, [menuOpen]);
+
+  const actions: Record<string, () => void> = {
+    note: onAddNote,
+    browser: onAddBrowser,
+    app: onAddApp,
+    workflows: onWorkflows,
+    history: onHistory,
+  };
+
+  return (
+    <Box ref={rootRef} sx={{ position: 'relative' }}>
+      {menuOpen && (
+        <Box
+          sx={{
+            position: 'absolute',
+            bottom: 'calc(100% + 10px)',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            display: 'flex',
+            flexDirection: 'column',
+            minWidth: 168,
+            p: '6px',
+            borderRadius: '14px',
+            background: 'rgba(22,12,34,0.82)',
+            backdropFilter: 'blur(20px) saturate(160%)',
+            WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+            boxShadow: '0 12px 32px rgba(0,0,0,0.4)',
+          }}
+        >
+          {MENU_ITEMS.map(({ key, label, icon: ItemIcon }) => (
+            <Box
+              key={key}
+              onClick={() => {
+                setMenuOpen(false);
+                actions[key]();
+              }}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1.25,
+                px: 1.25,
+                py: 0.75,
+                borderRadius: '9px',
+                cursor: 'pointer',
+                '&:hover': { background: 'rgba(255,255,255,0.1)' },
+              }}
+            >
+              <ItemIcon sx={{ fontSize: 17, color: 'rgba(255,255,255,0.75)' }} />
+              <Typography sx={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.88)', fontWeight: 500 }}>
+                {label}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          height: 34,
+          pl: 1.75,
+          pr: 1.25,
+          borderRadius: 999,
+          background: 'rgba(22,12,34,0.66)',
+          backdropFilter: 'blur(20px) saturate(160%)',
+          WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+          boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
+          cursor: 'text',
+        }}
+        onClick={onOpenComposer}
+      >
+        <Typography
+          sx={{
+            fontSize: '0.82rem',
+            color: 'rgba(255,255,255,0.55)',
+            fontWeight: 400,
+            userSelect: 'none',
+            mr: 1.5,
+          }}
+        >
+          Spawn an agent...
+        </Typography>
+        <Box
+          role="button"
+          aria-label="Add to canvas"
+          onClick={(e) => {
+            e.stopPropagation();
+            setMenuOpen((v) => !v);
+          }}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 22,
+            height: 22,
+            borderRadius: '50%',
+            cursor: 'pointer',
+            color: 'rgba(255,255,255,0.6)',
+            '&:hover': { color: '#fff', background: 'rgba(255,255,255,0.12)' },
+          }}
+        >
+          <AddRounded sx={{ fontSize: 18 }} />
+        </Box>
+        <Tooltip title="Voice input (coming soon)" placement="top" arrow>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 22,
+              height: 22,
+              borderRadius: '50%',
+              color: 'rgba(255,255,255,0.45)',
+              cursor: 'default',
+            }}
+          >
+            <MicNoneOutlinedIcon sx={{ fontSize: 16 }} />
+          </Box>
+        </Tooltip>
+      </Box>
+    </Box>
+  );
+}
+
+export default DesktopSpawnPill;
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
new file mode 100644
index 00000000..eba61551
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
+import { useAppDispatch } from '@/shared/hooks';
+import { addBrowserCard } from '@/shared/state/dashboardLayoutSlice';
+
+const HELP_URL = 'https://openswarm.com';
+
+/** Top-right desktop help pill: opens the docs site in an in-app browser card. */
+function HelpPill(): React.ReactElement {
+  const dispatch = useAppDispatch();
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.75,
+        height: 30,
+        pl: 1.5,
+        pr: 1,
+        borderRadius: 999,
+        background: 'rgba(22,12,34,0.66)',
+        backdropFilter: 'blur(20px) saturate(160%)',
+        WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+        boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+        cursor: 'pointer',
+        userSelect: 'none',
+      }}
+      onClick={() => dispatch(addBrowserCard({ url: HELP_URL }))}
+    >
+      <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
+        Help
+      </Typography>
+      <Tooltip title="Voice help (coming soon)" placement="bottom" arrow>
+        <Box sx={{ display: 'flex', alignItems: 'center', color: 'rgba(255,255,255,0.45)' }} onClick={(e) => e.stopPropagation()}>
+          <MicNoneOutlinedIcon sx={{ fontSize: 15 }} />
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+}
+
+export default HelpPill;
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/deleteSelectedCards.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/deleteSelectedCards.ts
new file mode 100644
index 00000000..64e5a844
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/deleteSelectedCards.ts
@@ -0,0 +1,35 @@
+import { closeSession } from '@/shared/state/agentsSlice';
+import { removeNote, removeWorkflowCard, closeWorkflowsHub, recordClosedCard } from '@/shared/state/dashboardLayoutSlice';
+import { closeWorkflowCard } from '@/shared/state/workflowsSlice';
+import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
+import { removeViewCardCleanly } from '@/shared/viewTeardown';
+import type { AppDispatch } from '@/shared/state/store';
+import type { CardType } from '../state/useDashboardSelection';
+
+/** Close every selected card, recording each so Cmd+Shift+T can bring it back. */
+export function deleteSelectedCards(selectedIds: Map<string, CardType>, dispatch: AppDispatch): void {
+  const viewIds: string[] = [];
+  for (const [id, type] of selectedIds) {
+    if (type === 'agent') {
+      dispatch(recordClosedCard({ kind: 'agent', id }));
+      dispatch(closeSession({ sessionId: id }));
+    } else if (type === 'view') {
+      dispatch(recordClosedCard({ kind: 'view', id }));
+      viewIds.push(id);
+    } else if (type === 'browser') {
+      dispatch(recordClosedCard({ kind: 'browser', id }));
+      removeBrowserCardCleanly(id, dispatch);
+    } else if (type === 'note') {
+      dispatch(recordClosedCard({ kind: 'note', id }));
+      dispatch(removeNote(id));
+    } else if (type === 'workflow') {
+      dispatch(recordClosedCard({ kind: 'workflow', id }));
+      dispatch(removeWorkflowCard(id));
+      dispatch(closeWorkflowCard(id));
+    } else if (type === 'workflows-hub') {
+      dispatch(closeWorkflowsHub());
+    }
+  }
+  // Tear view cards down ONE AT A TIME (each quiesces its GPU surface first); ripping several large app webviews out in one frame is what piles up "non-existent mailbox" errors and kills the GPU process.
+  void (async () => { for (const id of viewIds) await removeViewCardCleanly(id, dispatch); })();
+}
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts
index 96d5da6f..83b40876 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardShortcuts.ts
@@ -1,11 +1,9 @@
 import { useEffect, type Dispatch, type SetStateAction } from 'react';
 import { report } from '@/shared/serviceClient';
 import { useAppDispatch } from '@/shared/hooks';
-import { closeSession, toggleExpandSession } from '@/shared/state/agentsSlice';
-import { removeNote, removeWorkflowCard, closeWorkflowsHub, recordClosedCard, reopenLastClosed } from '@/shared/state/dashboardLayoutSlice';
-import { closeWorkflowCard } from '@/shared/state/workflowsSlice';
-import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
-import { removeViewCardCleanly } from '@/shared/viewTeardown';
+import { toggleExpandSession } from '@/shared/state/agentsSlice';
+import { reopenLastClosed } from '@/shared/state/dashboardLayoutSlice';
+import { deleteSelectedCards } from './deleteSelectedCards';
 import { getLastInteractedBrowser } from '@/shared/browserFocus';
 import { getWebview } from '@/shared/browserRegistry';
 import type { useDashboardSelection } from '../state/useDashboardSelection';
@@ -76,30 +74,7 @@ export function useDashboardShortcuts({
       if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable) return;
       if (selection.selectedIds.size === 0) return;
       e.preventDefault();
-      const viewIds: string[] = [];
-      for (const [id, type] of selection.selectedIds) {
-        if (type === 'agent') {
-          dispatch(recordClosedCard({ kind: 'agent', id }));
-          dispatch(closeSession({ sessionId: id }));
-        } else if (type === 'view') {
-          dispatch(recordClosedCard({ kind: 'view', id }));
-          viewIds.push(id);
-        } else if (type === 'browser') {
-          dispatch(recordClosedCard({ kind: 'browser', id }));
-          removeBrowserCardCleanly(id, dispatch);
-        } else if (type === 'note') {
-          dispatch(recordClosedCard({ kind: 'note', id }));
-          dispatch(removeNote(id));
-        } else if (type === 'workflow') {
-          dispatch(recordClosedCard({ kind: 'workflow', id }));
-          dispatch(removeWorkflowCard(id));
-          dispatch(closeWorkflowCard(id));
-        } else if (type === 'workflows-hub') {
-          dispatch(closeWorkflowsHub());
-        }
-      }
-      // Tear view cards down ONE AT A TIME (each quiesces its GPU surface first); ripping several large app webviews out in one frame is what piles up "non-existent mailbox" errors and kills the GPU process.
-      void (async () => { for (const id of viewIds) await removeViewCardCleanly(id, dispatch); })();
+      deleteSelectedCards(selection.selectedIds, dispatch);
       selection.deselectAll();
     };
     window.addEventListener('keydown', handleDelete);

From 7fd29735b52c7af24e15e398360009b2d8548ac3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 20:37:34 -0700
Subject: [PATCH 075/248] [eric] dashboard: open composer wears desktop dark
 glass via DarkTokensScope

---
 .../app/pages/Dashboard/DashboardToolbar.tsx  | 43 +++++++++++--------
 frontend/src/shared/styles/ThemeContext.tsx   | 11 +++++
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 24adb1c8..b65e55ea 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -15,7 +15,7 @@ import SchedulePopover from '@/app/pages/Workflows/SchedulePopover';
 import { openWorkflowCard, fetchAllRuns, upsertRun } from '@/shared/state/workflowsSlice';
 import { addWorkflowCard, openWorkflowsApp, closeWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useClaudeTokens, DarkTokensScope } from '@/shared/styles/ThemeContext';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { searchHistory, clearHistorySearch } from '@/shared/state/agentsSlice';
 import { updateSettingsPatch, AppSettings } from '@/shared/state/settingsSlice';
@@ -376,11 +376,14 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
           display: 'flex',
           flexDirection: 'column',
           // Drop toolbar card chrome when popover is open (popover supplies its own surface) and when
-          // collapsed (the spawn pill carries its own dark glass).
-          background: historyOpen || !isExpanded ? 'transparent' : c.bg.surface,
-          border: historyOpen || !isExpanded ? '1px solid transparent' : `1px solid ${c.border.subtle}`,
+          // collapsed (the spawn pill carries its own dark glass). The open composer wears the same
+          // desktop dark glass as the rest of the shell.
+          background: historyOpen ? 'transparent' : viewPickerOpen ? c.bg.surface : inputOpen ? 'rgba(22,12,34,0.82)' : 'transparent',
+          backdropFilter: inputOpen && !historyOpen && !viewPickerOpen ? 'blur(20px) saturate(160%)' : undefined,
+          WebkitBackdropFilter: inputOpen && !historyOpen && !viewPickerOpen ? 'blur(20px) saturate(160%)' : undefined,
+          border: viewPickerOpen ? `1px solid ${c.border.subtle}` : '1px solid transparent',
           borderRadius: `${c.radius.xl}px`,
-          boxShadow: historyOpen || !isExpanded ? 'none' : c.shadow.lg,
+          boxShadow: historyOpen || !isExpanded ? 'none' : '0 12px 32px rgba(0,0,0,0.4)',
           padding: isExpanded ? '6px' : '0px',
           userSelect: 'none' as const,
           overflow: inputOpen || newAgentBounce || historyOpen ? 'visible' : 'hidden',
@@ -394,20 +397,22 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
             data-onboarding-scope="dock"
             style={{ width: '100%', minHeight: 56, paddingBottom: 0, marginBottom: -4 }}
           >
-            <ChatInput
-              onSend={handleSend}
-              mode={mode}
-              onModeChange={handleModeChange}
-              model={model}
-              onModelChange={handleModelChange}
-              embedded
-              autoFocus
-              sessionId={TOOLBAR_OWNER_ID}
-              thinkingLevel={thinkingLevel}
-              onThinkingLevelChange={handleThinkingLevelChange}
-              prefillPrompt={prefillPrompt}
-              placeholderOverride="What should I do sir..."
-            />
+            <DarkTokensScope>
+              <ChatInput
+                onSend={handleSend}
+                mode={mode}
+                onModeChange={handleModeChange}
+                model={model}
+                onModelChange={handleModelChange}
+                embedded
+                autoFocus
+                sessionId={TOOLBAR_OWNER_ID}
+                thinkingLevel={thinkingLevel}
+                onThinkingLevelChange={handleThinkingLevelChange}
+                prefillPrompt={prefillPrompt}
+                placeholderOverride="What should I do sir..."
+              />
+            </DarkTokensScope>
           </div>
         ) : historyOpen ? (
           <div style={{ width: '100%' }}>
diff --git a/frontend/src/shared/styles/ThemeContext.tsx b/frontend/src/shared/styles/ThemeContext.tsx
index f047f6e2..e6ecb367 100644
--- a/frontend/src/shared/styles/ThemeContext.tsx
+++ b/frontend/src/shared/styles/ThemeContext.tsx
@@ -131,6 +131,17 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
 };
 
 export const useClaudeTokens = (): ClaudeTokens => useContext(ThemeContext).tokens;
+
+/** Forces dark tokens for a subtree: desktop-shell glass panels stay dark even in light mode. */
+export const DarkTokensScope: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const ctx = useContext(ThemeContext);
+  const value = useMemo(() => ({
+    ...ctx,
+    mode: 'dark' as ThemeMode,
+    tokens: withAccent(darkTokens, ctx.accent, 'dark'),
+  }), [ctx]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
 export const useThemeMode = () => {
   const { mode, toggleMode, setMode } = useContext(ThemeContext);
   return { mode, toggleMode, setMode };

From 656576c181a58fcacacbca512bb42a4e924e9f69 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 20:38:49 -0700
Subject: [PATCH 076/248] [eric] shell: sidebar starts docked away + dashboard
 header hides behind a top-edge hover reveal

---
 frontend/src/app/components/Layout/AppShell.tsx      |  6 +++---
 .../app/pages/Dashboard/canvas/DashboardCanvas.tsx   | 12 +++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 8d411f62..31ec0b9f 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -82,9 +82,9 @@ const AppShell: React.FC = () => {
   const canGoForward = historyIdx < maxHistoryIdx.current;
   const [dashboardsExpanded, setDashboardsExpanded] = useState(true);
   const [appsExpanded, setAppsExpanded] = useState(true);
-  // Starts collapsed so a fresh boot lands on a clean canvas; the toggle brings it back.
-  // Arc/Zen: the sidebar is the primary chrome (search + nav live here), shown by default.
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  // Desktop shell: the wallpaper canvas IS the home surface, so the sidebar starts docked away
+  // (left-edge hover peeks it; the pin toggle brings it back full-time).
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
   const [renamingDashboardId, setRenamingDashboardId] = useState<string | null>(null);
   const [renamingAppId, setRenamingAppId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 41b071b8..fbe86dfd 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -170,6 +170,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   // macOS full screen: one card owns the whole window, every piece of chrome steps aside; Esc exits.
   const dispatch = useAppDispatch();
   const fullscreenCardId = useAppSelector(selectFullscreenCardId);
+  const [headerRevealed, setHeaderRevealed] = React.useState(false);
   useEffect(() => {
     if (!fullscreenCardId) return undefined;
     const onKey = (e: KeyboardEvent): void => {
@@ -184,8 +185,14 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   return (
     <>
     <Box sx={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
+      {/* Top-edge hover strip: the desktop shell keeps the top chromeless; grazing it reveals the header. */}
+      <Box
+        onMouseEnter={() => setHeaderRevealed(true)}
+        sx={{ position: 'absolute', top: 0, left: 0, right: 0, height: 22, zIndex: 9 }}
+      />
       {/* Floating header overlay */}
       <Box
+        onMouseLeave={() => setHeaderRevealed(false)}
         sx={{
           display: fullscreenCardId ? 'none' : undefined,
           position: 'absolute',
@@ -193,7 +200,10 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
           left: 0,
           right: 0,
           zIndex: 10,
-          pointerEvents: 'none',
+          pointerEvents: headerRevealed ? undefined : 'none',
+          opacity: headerRevealed ? 1 : 0,
+          transform: headerRevealed ? 'translateY(0)' : 'translateY(-6px)',
+          transition: 'opacity 0.18s ease, transform 0.18s ease',
           // p: 3 (24px) was leaving a chunky air gap between the sidebar edge and the dashboard header that read as "two disconnected panels" rather than one continuous surface. 0.75 (6px) tightens the inset so the header floats just inside the content area without losing its breathing room from the top-most pixel.
           p: 0.75,
           pb: 0,

From 1367547def56868b98ce8577d37a7453be44b101 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 20:50:21 -0700
Subject: [PATCH 077/248] [eric] agents: narrator-pill collapsed cards w/ live
 TodoWrite checklist; expanded chat = dark glass hover-header card; quiet 'N
 tool calls' rows

---
 .../src/app/pages/AgentChat/AgentChat.tsx     |   2 +-
 .../pages/AgentChat/bubbles/MessageBubble.tsx |   2 +-
 .../tool-bubbles/ToolGroupBubble.tsx          |  52 +++++--
 .../pages/Dashboard/canvas/DashboardGlyph.tsx |  15 +-
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 118 ++++++++++++---
 .../Dashboard/desktop/AgentNarratorPill.tsx   | 134 ++++++++++++++++++
 .../app/pages/Dashboard/desktop/agentTodos.ts |  28 ++++
 7 files changed, 309 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/agentTodos.ts

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 097f6dd5..2e573e09 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -2258,7 +2258,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   sessionId={id}
                   autoFocus={autoFocus}
                   prefillPrompt={prefillPrompt}
-                  placeholderOverride={runContext ? 'Ask about this run...' : undefined}
+                  placeholderOverride={runContext ? 'Ask about this run...' : embedded ? 'Send a message...' : undefined}
                   runContext={runContext}
                   onClearRunContext={onClearRunContext}
                   thinkingLevel={session?.thinking_level ?? 'auto'}
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index 9f849251..bf9cfa42 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -1059,7 +1059,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
           ...(isOversized ? { width: '85%' } : {}),
           bgcolor: isUser ? c.user.bubble : c.bg.surface,
           border: isUser ? (isFailed ? `1px solid ${c.status.error}` : 'none') : `1px solid ${c.border.subtle}`,
-          borderRadius: isUser ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
+          borderRadius: isUser ? '18px' : '16px 16px 16px 4px',
           px: 2,
           py: 1.25,
           boxShadow: isUser ? 'none' : c.shadow.sm,
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
index 8da2895a..e1458ab1 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
@@ -98,7 +98,6 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
   })();
   const displayName = workflowGroupLabel || meta?.name || group.label;
   const hasSvg = !!meta?.svg && !workflowGroupLabel;
-  const canToggleGroup = group.pairs.length > 1;
 
   return (
     <Box
@@ -116,22 +115,54 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
     >
       <Box
         sx={{
-          bgcolor: c.bg.elevated,
-          border: `1px solid ${c.border.subtle}`,
-          borderRadius: 2,
-          overflow: 'hidden',
+          ...(expanded && {
+            bgcolor: c.bg.elevated,
+            border: `1px solid ${c.border.subtle}`,
+            borderRadius: 2,
+            overflow: 'hidden',
+          }),
         }}
       >
+        {/* Collapsed = the quiet "N tool calls ›" line; the detail card only materializes on expand. */}
+        {!expanded ? (
+          <Box
+            onClick={() => setExpanded(true)}
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 0.5,
+              py: 0.4,
+              cursor: 'pointer',
+              color: c.text.tertiary,
+              '&:hover': { color: c.text.secondary },
+            }}
+          >
+            <Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit' }}>
+              {group.callCount} tool call{group.callCount === 1 ? '' : 's'}
+            </Typography>
+            {!allDone && (
+              <Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
+                {completedCount}/{group.callCount}
+              </Typography>
+            )}
+            {deniedCount > 0 && (
+              <Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
+                {deniedCount} denied
+              </Typography>
+            )}
+            <ExpandMoreIcon sx={{ fontSize: 15, transform: 'rotate(-90deg)' }} />
+          </Box>
+        ) : (
         <Box
-          onClick={canToggleGroup ? () => setExpanded(!expanded) : undefined}
+          onClick={() => setExpanded(false)}
           sx={{
             display: 'flex',
             alignItems: 'center',
             gap: 0.75,
             px: 1.5,
             py: 0.7,
-            cursor: canToggleGroup ? 'pointer' : 'default',
-            '&:hover': canToggleGroup ? { bgcolor: 'rgba(0,0,0,0.02)' } : undefined,
+            cursor: 'pointer',
+            '&:hover': { bgcolor: 'rgba(0,0,0,0.02)' },
           }}
         >
           {!meta ? (
@@ -178,12 +209,11 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
               {completedCount}/{group.callCount}
             </Typography>
           )}
-          {canToggleGroup && (
           <IconButton size="small" sx={{ color: c.text.tertiary, p: 0.15 }}>
-            {expanded ? <ExpandLessIcon sx={{ fontSize: 16 }} /> : <ExpandMoreIcon sx={{ fontSize: 16 }} />}
+            <ExpandLessIcon sx={{ fontSize: 16 }} />
           </IconButton>
-          )}
         </Box>
+        )}
 
         <Collapse in={expanded}>
           <Box
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
index df5d8dd1..e2581403 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
@@ -8,7 +8,7 @@ import {
   Music, Video, Image, Camera, ShoppingCart, Bot, Gamepad2, Home, Shield,
   Users, Scale, Building2, Newspaper, Briefcase, Rocket, Globe, Database,
   Wrench, Lightbulb, Target, Trophy, Bell, Folder, Package, Truck,
-  LayoutDashboard,
+  LayoutDashboard, CloudSun,
 } from 'lucide-react';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 
@@ -62,6 +62,7 @@ const KEYWORDS: Record<string, LucideIcon> = {
   archive: Folder, collection: Folder, library: Folder,
   inventory: Package, stock: Package, package: Package, supply: Package,
   delivery: Truck, shipping: Truck, logistics: Truck, truck: Truck, fleet: Truck,
+  weather: CloudSun, forecast: CloudSun, temperature: CloudSun,
 };
 
 function pickIcon(title: string): LucideIcon | null {
@@ -76,21 +77,23 @@ function pickIcon(title: string): LucideIcon | null {
 interface DashboardGlyphProps {
   name: string | undefined;
   size?: number;
+  color?: string;
 }
 
-const DashboardGlyph: React.FC<DashboardGlyphProps> = ({ name, size = 16 }) => {
+const DashboardGlyph: React.FC<DashboardGlyphProps> = ({ name, size = 16, color }) => {
   const c = useClaudeTokens();
+  const glyphColor = color || c.accent.primary;
   const title = (name || '').trim();
   const Icon = useMemo(() => (title ? pickIcon(title) : null), [title]);
 
   if (Icon) {
-    return <Icon size={size} strokeWidth={1.75} color={c.accent.primary} />;
+    return <Icon size={size} strokeWidth={1.75} color={glyphColor} />;
   }
 
   // No keyword hit: a tinted monogram of the first letter. Honest identity, never a misleading icon. A title with no latin letters falls back to the glyph.
   const letter = title.match(/[a-z0-9]/i)?.[0]?.toUpperCase();
   if (!letter) {
-    return <LayoutDashboard size={size} strokeWidth={1.75} color={c.accent.primary} />;
+    return <LayoutDashboard size={size} strokeWidth={1.75} color={glyphColor} />;
   }
   return (
     <Box
@@ -98,8 +101,8 @@ const DashboardGlyph: React.FC<DashboardGlyphProps> = ({ name, size = 16 }) => {
         width: size,
         height: size,
         borderRadius: '4px',
-        bgcolor: `${c.accent.primary}1F`,
-        color: c.accent.primary,
+        bgcolor: color ? 'rgba(255,255,255,0.16)' : `${c.accent.primary}1F`,
+        color: glyphColor,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 5b4fc18f..c064dbc7 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -35,11 +35,13 @@ import {
 } from '@/shared/state/dashboardLayoutSlice';
 import WindowControls from './WindowControls';
 import { useTiledStyle } from './tileZones';
+import AgentNarratorPill from '../desktop/AgentNarratorPill';
+import { extractLatestTodos } from '../desktop/agentTodos';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { QuestionForm } from '@/app/pages/AgentChat/shell/ApprovalBar';
 import AgentChat from '@/app/pages/AgentChat/AgentChat';
 import { parseMcpToolName, getMcpShortAction } from '@/shared/mcpToolMeta';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useClaudeTokens, DarkTokensScope } from '@/shared/styles/ThemeContext';
 import { useDashboardActive } from '@/shared/hooks/useDashboardActive';
 import { useOverlayScrollPassthrough } from '../hooks/interaction/useOverlayScrollPassthrough';
 import { useStreamingMessage } from '@/shared/state/streamingSlice';
@@ -681,6 +683,13 @@ const AgentCard: React.FC<Props> = ({
   const hasPending = session.pending_approvals.length > 0;
   const pendingReq = session.pending_approvals[0];
 
+  // Desktop-shell narrator pill: a collapsed card with nothing to ask renders as the minimal pill
+  // (live turn label + plan checklist); approvals and drafts keep the full card so their UI has a home.
+  const todos = useMemo(() => extractLatestTodos(session.messages || []), [session.messages]);
+  const pillMode = !expanded && !hasPending && !isDraft && !tileZone;
+  const pillLabel = session.turn_label?.label || displayChatTitle(session);
+  const pillRunning = session.status === 'running';
+
   const noTransition = isDragging || isResizing || (isSelected && !!multiDragDelta);
 
   const mdDx = (!isDragging && isSelected && multiDragDelta) ? multiDragDelta.dx : 0;
@@ -752,7 +761,7 @@ const AgentCard: React.FC<Props> = ({
         contain: 'layout style',
         // Each card gets its own compositor layer; hover-cross used to cost 100-200ms PRESENTATION by re-painting the whole canvas.
         willChange: 'transform',
-        width: tiledStyle ? tiledStyle.width : (localResize ? activeW : Math.max(cardWidth, MIN_W)),
+        width: pillMode ? 'fit-content' : tiledStyle ? tiledStyle.width : (localResize ? activeW : Math.max(cardWidth, MIN_W)),
         height: tiledStyle ? tiledStyle.height : (localResize ? activeH : (expanded ? Math.max(EXPANDED_OVERLAY_H, cardHeight) : 'auto')),
         transform: tiledStyle ? tiledStyle.transform : undefined,
         transformOrigin: tiledStyle ? tiledStyle.transformOrigin : undefined,
@@ -841,9 +850,28 @@ const AgentCard: React.FC<Props> = ({
             borderColor: hasPending ? c.status.warning : c.border.strong,
           },
         }),
+        // Narrator pill sheds every bit of card chrome; the pill body draws its own glass + ring.
+        ...(pillMode && {
+          bgcolor: 'transparent',
+          border: 'none',
+          boxShadow: 'none',
+          p: 0,
+          overflow: 'visible',
+          cursor: isDragging ? 'grabbing' : 'grab',
+          '&:hover': {},
+        }),
+        // Expanded chat wears the desktop dark glass; the header only surfaces on hover.
+        ...(expanded && !tiledStyle && {
+          bgcolor: 'rgba(26,16,34,0.85)',
+          backdropFilter: 'blur(24px) saturate(150%)',
+          WebkitBackdropFilter: 'blur(24px) saturate(150%)',
+          border: isSelected ? '2px solid #3b82f6' : '1px solid rgba(255,255,255,0.08)',
+          borderRadius: '20px',
+          boxShadow: '0 18px 48px rgba(0,0,0,0.4)',
+        }),
       }}
     >
-      {HANDLE_DEFS.map(({ dir, sx }) => (
+      {!pillMode && HANDLE_DEFS.map(({ dir, sx }) => (
         <Box
           key={dir}
           onPointerDown={handleResizeDown(dir)}
@@ -882,19 +910,59 @@ const AgentCard: React.FC<Props> = ({
         />
       )}
 
-      {/* Drag zone: header + metadata , entire region above separator is draggable */}
+      {pillMode && (
+        <Box
+          onPointerDown={handleDragPointerDown}
+          onPointerMove={handleDragPointerMove}
+          onPointerUp={handleDragPointerUp}
+          sx={{ touchAction: 'none', userSelect: 'none' }}
+        >
+          <AgentNarratorPill
+            label={pillLabel}
+            running={pillRunning}
+            todos={todos}
+            selected={isSelected}
+            highlighted={isHighlighted}
+          />
+        </Box>
+      )}
+
+      {/* Drag zone: header + metadata , entire region above separator is draggable.
+          Expanded desktop cards float it as a hover-reveal overlay so the chat reads chromeless. */}
+      {!pillMode && (
       <Box
         onPointerDown={handleDragPointerDown}
         onPointerMove={handleDragPointerMove}
         onPointerUp={handleDragPointerUp}
         sx={{
-          position: 'relative',
-          zIndex: 16,
-          mx: -2,
-          mt: -2,
-          px: 2,
-          pt: 2,
-          pb: 1.5,
+          ...(expanded
+            ? {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                zIndex: 17,
+                px: 2,
+                pt: 1.5,
+                pb: 2,
+                opacity: 0,
+                transition: 'opacity 0.15s ease',
+                '&:hover': { opacity: 1 },
+                background: 'linear-gradient(to bottom, rgba(20,12,28,0.92) 0%, rgba(20,12,28,0.65) 60%, rgba(20,12,28,0) 100%)',
+                borderRadius: '20px 20px 0 0',
+                // Header text must read over the dark scrim regardless of app theme.
+                '& .MuiTypography-root': { color: 'rgba(255,255,255,0.92)' },
+                '& input': { color: 'rgba(255,255,255,0.92)' },
+              }
+            : {
+                position: 'relative',
+                zIndex: 16,
+                mx: -2,
+                mt: -2,
+                px: 2,
+                pt: 2,
+                pb: 1.5,
+              }),
           cursor: isDragging ? 'grabbing' : 'grab',
           touchAction: 'none',
           userSelect: 'none',
@@ -1010,6 +1078,7 @@ const AgentCard: React.FC<Props> = ({
           </Box>
         </Box>
       </Box>
+      )}
 
       {expanded && (
         <Box
@@ -1017,28 +1086,31 @@ const AgentCard: React.FC<Props> = ({
           sx={{
             mx: -2,
             mb: -2,
+            mt: -2,
             flex: 1,
             minHeight: 0,
-            borderTop: `1px solid ${c.border.subtle}`,
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
+            borderRadius: tiledStyle ? undefined : '20px',
           }}
         >
-          <AgentChat
-            key={session.id}
-            sessionId={session.id}
-            onClose={() => dispatch(collapseSession(session.id))}
-            embedded
-            autoFocus={autoFocusInput}
-            isGlowing={isGlowingRedux && !glowFading}
-            onDismissGlow={dismissGlow}
-            onBranch={onBranch ? (newId: string) => onBranch(session.id, newId) : undefined}
-          />
+          <DarkTokensScope>
+            <AgentChat
+              key={session.id}
+              sessionId={session.id}
+              onClose={() => dispatch(collapseSession(session.id))}
+              embedded
+              autoFocus={autoFocusInput}
+              isGlowing={isGlowingRedux && !glowFading}
+              onDismissGlow={dismissGlow}
+              onBranch={onBranch ? (newId: string) => onBranch(session.id, newId) : undefined}
+            />
+          </DarkTokensScope>
         </Box>
       )}
 
-      {!expanded && (
+      {!expanded && !pillMode && (
         <>
           {previewContent && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: hasPending ? 1.5 : 0 }}>
diff --git a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
new file mode 100644
index 00000000..6f1d0d59
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import CheckIcon from '@mui/icons-material/Check';
+import DashboardGlyph from '../canvas/DashboardGlyph';
+import type { AgentTodoItem } from './agentTodos';
+
+interface AgentNarratorPillProps {
+  label: string;
+  running: boolean;
+  todos: AgentTodoItem[] | null;
+  selected: boolean;
+  highlighted: boolean;
+}
+
+const GLASS = 'rgba(24,14,32,0.8)';
+const GLASS_BLUR = 'blur(18px) saturate(150%)';
+const MAX_VISIBLE_TODOS = 4;
+
+/** Collapsed running agent as the desktop narrator pill, with its live plan hanging below. */
+function AgentNarratorPill({ label, running, todos, selected, highlighted }: AgentNarratorPillProps): React.ReactElement {
+  const visibleTodos = (todos || []).slice(0, MAX_VISIBLE_TODOS);
+  const hiddenCount = (todos?.length || 0) - visibleTodos.length;
+  const ring = selected || highlighted ? { outline: '2px solid #3b82f6', outlineOffset: '2px' } : undefined;
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 1 }}>
+      <Box
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 1,
+          height: 34,
+          pl: 1.25,
+          pr: 1.75,
+          borderRadius: 999,
+          background: GLASS,
+          backdropFilter: GLASS_BLUR,
+          WebkitBackdropFilter: GLASS_BLUR,
+          boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+          whiteSpace: 'nowrap',
+          ...ring,
+        }}
+      >
+        <DashboardGlyph name={label} size={15} color="rgba(255,255,255,0.85)" />
+        <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'rgba(255,255,255,0.92)' }}>
+          {label}
+        </Typography>
+      </Box>
+
+      {visibleTodos.length > 0 ? (
+        <Box
+          sx={{
+            borderRadius: '16px',
+            background: GLASS,
+            backdropFilter: GLASS_BLUR,
+            WebkitBackdropFilter: GLASS_BLUR,
+            boxShadow: '0 8px 24px rgba(0,0,0,0.32)',
+            px: 1.75,
+            py: 1.5,
+            minWidth: 200,
+          }}
+        >
+          <Box sx={{ position: 'relative' }}>
+            {visibleTodos.length > 1 && (
+              <Box sx={{ position: 'absolute', left: 10, top: 12, bottom: 12, width: '2px', background: 'rgba(214,170,203,0.4)' }} />
+            )}
+            {visibleTodos.map((todo, i) => {
+              const done = todo.status === 'completed';
+              const active = todo.status === 'in_progress';
+              return (
+                <Box key={`${i}-${todo.content.slice(0, 24)}`} sx={{ display: 'flex', alignItems: 'center', gap: 1.25, py: 0.75 }}>
+                  <Box
+                    sx={{
+                      width: 22,
+                      height: 22,
+                      borderRadius: '50%',
+                      flexShrink: 0,
+                      zIndex: 1,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      background: done ? '#ecd2e4' : active ? '#cf9fc4' : 'rgba(207,159,196,0.35)',
+                    }}
+                  >
+                    {done && <CheckIcon sx={{ fontSize: 14, color: '#3c2035' }} />}
+                  </Box>
+                  <Typography
+                    sx={{
+                      fontSize: '0.82rem',
+                      fontWeight: done || active ? 500 : 400,
+                      color: done || active ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.45)',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      maxWidth: 260,
+                    }}
+                  >
+                    {todo.content}
+                  </Typography>
+                </Box>
+              );
+            })}
+          </Box>
+          {hiddenCount > 0 && (
+            <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', pl: '2px', pt: 0.5 }}>
+              ... {hiddenCount} more
+            </Typography>
+          )}
+        </Box>
+      ) : running ? (
+        <Box
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: 28,
+            px: 1.5,
+            borderRadius: 999,
+            background: GLASS,
+            backdropFilter: GLASS_BLUR,
+            WebkitBackdropFilter: GLASS_BLUR,
+            boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+          }}
+        >
+          <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.6)' }}>
+            Thinking...
+          </Typography>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+export default AgentNarratorPill;
diff --git a/frontend/src/app/pages/Dashboard/desktop/agentTodos.ts b/frontend/src/app/pages/Dashboard/desktop/agentTodos.ts
new file mode 100644
index 00000000..34fff2f2
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/agentTodos.ts
@@ -0,0 +1,28 @@
+export interface AgentTodoItem {
+  content: string;
+  status: 'pending' | 'in_progress' | 'completed';
+}
+
+function isTodoStatus(v: unknown): v is AgentTodoItem['status'] {
+  return v === 'pending' || v === 'in_progress' || v === 'completed';
+}
+
+/** Latest TodoWrite payload in the transcript = the agent's live plan; null when it never wrote one. */
+export function extractLatestTodos(messages: Array<{ role: string; content: any }>): AgentTodoItem[] | null {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (msg.role !== 'tool_call') continue;
+    const tool = typeof msg.content === 'object' ? String(msg.content?.tool || '') : '';
+    if (!/todowrite$/i.test(tool)) continue;
+    const raw = msg.content?.input?.todos;
+    if (!Array.isArray(raw)) continue;
+    const items: AgentTodoItem[] = [];
+    for (const t of raw) {
+      const content = typeof t?.content === 'string' ? t.content : (typeof t?.activeForm === 'string' ? t.activeForm : '');
+      if (!content) continue;
+      items.push({ content, status: isTodoStatus(t?.status) ? t.status : 'pending' });
+    }
+    if (items.length > 0) return items;
+  }
+  return null;
+}

From 80a164c77c3ec433f1da003b5a3e43351adbe284 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 21:02:03 -0700
Subject: [PATCH 078/248] [eric] chat: ShowUI widget tier (display-only MCP
 tool + inline weather/plan/stats/links components, schema-checked w/
 plain-bubble fallback)

---
 .../permissions/build_effective_tool_lists.py |   8 +
 .../manager/register_builtin_mcp_servers.py   |  13 ++
 backend/apps/agents/show_ui_mcp_server.py     | 132 +++++++++++++++
 .../src/app/pages/AgentChat/AgentChat.tsx     |  21 ++-
 .../pages/AgentChat/tool-ui/LinksWidget.tsx   |  56 +++++++
 .../pages/AgentChat/tool-ui/PlanWidget.tsx    |  72 +++++++++
 .../pages/AgentChat/tool-ui/StatsWidget.tsx   |  58 +++++++
 .../pages/AgentChat/tool-ui/ToolUiBubble.tsx  |  36 +++++
 .../pages/AgentChat/tool-ui/WeatherWidget.tsx |  92 +++++++++++
 .../pages/AgentChat/tool-ui/showUiPayload.ts  | 151 ++++++++++++++++++
 10 files changed, 637 insertions(+), 2 deletions(-)
 create mode 100644 backend/apps/agents/show_ui_mcp_server.py
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts

diff --git a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
index 7d308f6e..3dc7f3bf 100644
--- a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
+++ b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
@@ -72,6 +72,14 @@ def build_effective_tool_lists(
                     effective_disallowed.append("mcp__openswarm-skill__Skill")
                 continue
 
+            if name == "openswarm-ui":
+                policy = builtin_perms.get("ShowUI", "always_allow")
+                if policy == "always_allow":
+                    effective_allowed.append("mcp__openswarm-ui__ShowUI")
+                else:
+                    effective_disallowed.append("mcp__openswarm-ui__ShowUI")
+                continue
+
             if name == "openswarm-web":
                 # Expose our DDG-backed web tools under an MCP prefix. Honor existing WebSearch/WebFetch permission policy, if the user disabled them in Settings, don't offer the MCP variants either.
                 for wt in ("WebSearch", "WebFetch"):
diff --git a/backend/apps/agents/manager/register_builtin_mcp_servers.py b/backend/apps/agents/manager/register_builtin_mcp_servers.py
index a954ca13..75bd4d5a 100644
--- a/backend/apps/agents/manager/register_builtin_mcp_servers.py
+++ b/backend/apps/agents/manager/register_builtin_mcp_servers.py
@@ -142,6 +142,19 @@ def register_builtin_mcp_servers(
         "type": "stdio",
     }
 
+    # Display-only ShowUI server: renders rich inline components (weather, plan, stats, links)
+    # in the transcript. Pure display, no state mutation; the frontend renders from the
+    # tool_call input, the server only validates. Gated on the ShowUI builtin perm.
+    show_ui_denied = builtin_perms.get("ShowUI", "always_allow") == "deny"
+    if not show_ui_denied:
+        show_ui_server_path = os.path.join(agents_dir, "show_ui_mcp_server.py")
+        mcp_servers["openswarm-ui"] = {
+            "command": sys.executable,
+            "args": [show_ui_server_path],
+            "env": {},
+            "type": "stdio",
+        }
+
     # Always-on schedule server: ScheduleWorkflow + CRUD + AddWorkflowStep/EditWorkflowStep so the agent (and the workflow Edit Agent) can build and schedule recurring work via the native scheduler instead of cron/launchctl. The 4 scheduling tools are force-gated in path_gate; Cron* is denied in build_effective_tool_lists.
     schedule_server_path = os.path.join(
         agents_dir, "schedule_mcp_server.py"
diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
new file mode 100644
index 00000000..dfc52719
--- /dev/null
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -0,0 +1,132 @@
+#!/usr/bin/env python3
+"""Stdio MCP server exposing ShowUI: render a rich inline component in the chat transcript.
+
+Display-only. The frontend renders the component straight from the tool_call input it already
+has in the transcript, so this server just validates the payload and acknowledges; there is no
+backend round-trip and nothing here can mutate state.
+"""
+
+import json
+import sys
+
+MAX_PROPS_BYTES = 20_000
+
+COMPONENT_SPECS = {
+    "weather": "props: {location: str, temp: number, unit?: 'F'|'C', high?: number, low?: number, condition?: str, forecast?: [{day: str, condition?: str, high: number, low?: number}] (max 7)}",
+    "plan": "props: {title?: str, steps: [{label: str, status: 'pending'|'in_progress'|'completed'}] (max 20)}",
+    "stats": "props: {title?: str, stats: [{label: str, value: str, delta?: str, direction?: 'up'|'down'}] (max 8)}",
+    "links": "props: {links: [{title: str, url: str, description?: str}] (max 10)}",
+}
+
+TOOLS = [
+    {
+        "name": "ShowUI",
+        "description": (
+            "Render a rich inline UI component in the chat instead of describing data as text. "
+            "Use it whenever a result fits one of the shapes. Supported components:\n"
+            + "\n".join(f"- '{name}': {spec}" for name, spec in COMPONENT_SPECS.items())
+            + "\nCall it with the component name and a props object matching that shape. "
+            "The component renders in place of raw text; still give a one-line text summary after."
+        ),
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "component": {
+                    "type": "string",
+                    "enum": list(COMPONENT_SPECS.keys()),
+                    "description": "Which component to render.",
+                },
+                "props": {
+                    "type": "object",
+                    "description": "Data for the component, matching its documented shape.",
+                },
+            },
+            "required": ["component", "props"],
+        },
+    },
+]
+
+
+def send_response(id_, result=None, error=None):
+    msg = {"jsonrpc": "2.0", "id": id_}
+    if error is not None:
+        msg["error"] = error
+    else:
+        msg["result"] = result
+    sys.stdout.write(json.dumps(msg) + "\n")
+    sys.stdout.flush()
+
+
+def validate(component: str, props: dict) -> str:
+    if component not in COMPONENT_SPECS:
+        return f"Unknown component {component!r}. Supported: {', '.join(COMPONENT_SPECS)}."
+    try:
+        size = len(json.dumps(props))
+    except (TypeError, ValueError):
+        return "props must be JSON-serializable."
+    if size > MAX_PROPS_BYTES:
+        return f"props too large ({size} bytes; max {MAX_PROPS_BYTES})."
+    if component == "weather" and not (isinstance(props.get("location"), str) and isinstance(props.get("temp"), (int, float))):
+        return f"weather needs at least location + temp. {COMPONENT_SPECS['weather']}"
+    if component == "plan" and not (isinstance(props.get("steps"), list) and props["steps"]):
+        return f"plan needs a non-empty steps list. {COMPONENT_SPECS['plan']}"
+    if component == "stats" and not (isinstance(props.get("stats"), list) and props["stats"]):
+        return f"stats needs a non-empty stats list. {COMPONENT_SPECS['stats']}"
+    if component == "links" and not (isinstance(props.get("links"), list) and props["links"]):
+        return f"links needs a non-empty links list. {COMPONENT_SPECS['links']}"
+    return ""
+
+
+def handle_tool_call(tool_name: str, arguments: dict) -> dict:
+    if tool_name != "ShowUI":
+        return {"content": [{"type": "text", "text": f"Unknown tool: {tool_name}"}], "isError": True}
+    component = str(arguments.get("component", "")).strip()
+    props = arguments.get("props")
+    if not isinstance(props, dict):
+        return {"content": [{"type": "text", "text": "props must be an object."}], "isError": True}
+    problem = validate(component, props)
+    if problem:
+        return {"content": [{"type": "text", "text": f"Not rendered: {problem}"}], "isError": True}
+    return {"content": [{"type": "text", "text": f"Rendered a '{component}' component inline."}]}
+
+
+def main():
+    for line in sys.stdin:
+        line = line.strip()
+        if not line:
+            continue
+        try:
+            msg = json.loads(line)
+        except json.JSONDecodeError:
+            continue
+
+        method = msg.get("method")
+        id_ = msg.get("id")
+        params = msg.get("params", {}) or {}
+
+        if method == "initialize":
+            send_response(id_, {
+                "protocolVersion": "2024-11-05",
+                "capabilities": {"tools": {}},
+                "serverInfo": {
+                    "name": "openswarm-ui",
+                    "version": "1.0.0",
+                },
+            })
+        elif method == "notifications/initialized":
+            pass
+        elif method == "tools/list":
+            send_response(id_, {"tools": TOOLS})
+        elif method == "tools/call":
+            tool_name = params.get("name", "")
+            arguments = params.get("arguments", {}) or {}
+            result = handle_tool_call(tool_name, arguments)
+            send_response(id_, result)
+        elif method == "ping":
+            send_response(id_, {})
+        elif id_ is not None:
+            send_response(id_, error={"code": -32601, "message": f"Method not found: {method}"})
+
+
+if __name__ == "__main__":
+    main()
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 2e573e09..ffa6a056 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -58,6 +58,8 @@ import CompactionMarker from './bubbles/CompactionMarker';
 import MessageActionBar from './shell/MessageActionBar';
 import ToolCallBubble, { ToolPair } from './tool-bubbles/ToolCallBubble';
 import ToolGroupBubble, { RenderItem, ToolGroup, isToolGroup, isToolPair } from './tool-bubbles/ToolGroupBubble';
+import ToolUiBubble from './tool-ui/ToolUiBubble';
+import { isShowUiPair } from './tool-ui/showUiPayload';
 import ApprovalBar, { BatchApprovalBar } from './shell/ApprovalBar';
 import ForceStopAgentBar from './ForceStopAgentBar';
 import { RateLimitPill } from './shell/RateLimitPill';
@@ -1063,15 +1065,21 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
           i++;
         }
 
-        const calls = group.filter((m) => m.role === 'tool_call');
+        const allCalls = group.filter((m) => m.role === 'tool_call');
         const results = group.filter((m) => m.role === 'tool_result');
-        const pairs: ToolPair[] = calls.map((call, idx) => ({
+        const allPairs: ToolPair[] = allCalls.map((call, idx) => ({
           type: 'tool_pair' as const,
           id: `pair-${call.id}`,
           call,
           result: results[idx] || null,
         }));
 
+        // ShowUI calls render as inline components, never buried inside a collapsed group.
+        // They typically cap a run of work, so the quiet group row stays above the widget.
+        const showUiPairs = allPairs.filter(isShowUiPair);
+        const pairs = allPairs.filter((p) => !isShowUiPair(p));
+        const calls = pairs.map((p) => p.call);
+
         const mcpServers = new Set(
           calls.map((m) => {
             const tool = typeof m.content === 'object' ? m.content.tool || '' : '';
@@ -1113,6 +1121,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
             callCount: calls.length,
           } satisfies ToolGroup);
         }
+        items.push(...showUiPairs);
       } else {
         if (!msg.hidden) {
           items.push(msg);
@@ -1593,6 +1602,14 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               }
               if (isToolPair(item)) {
                 const isPending = item.result === null && sessionRunning;
+                if (isShowUiPair(item)) {
+                  return (
+                    <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
+                      <ToolUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === justStreamedId} />
+                      {compactionChip}
+                    </Box>
+                  );
+                }
                 return (
                   <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
                     <ToolCallBubble call={item.call} result={item.result} isPending={isPending} sessionId={session.id} suppressReveal={item.call.id === justStreamedId} />
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
new file mode 100644
index 00000000..8d980491
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type { LinksProps } from './showUiPayload';
+
+function hostOf(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
+/** Tool-UI-style link previews: domain, title, description; opens like any transcript link. */
+function LinksWidget({ props }: { props: LinksProps }): React.ReactElement {
+  const c = useClaudeTokens();
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, maxWidth: 420 }}>
+      {props.links.map((l, i) => (
+        <Box
+          key={`${i}-${l.url.slice(0, 40)}`}
+          component="a"
+          href={l.url}
+          target="_blank"
+          rel="noreferrer"
+          sx={{
+            display: 'block',
+            textDecoration: 'none',
+            borderRadius: '12px',
+            border: `1px solid ${c.border.subtle}`,
+            bgcolor: c.bg.elevated,
+            px: 1.75,
+            py: 1.25,
+            transition: 'border-color 0.12s',
+            '&:hover': { borderColor: c.border.strong },
+          }}
+        >
+          <Typography sx={{ fontSize: '0.68rem', color: c.text.tertiary, mb: 0.25 }}>
+            {hostOf(l.url)}
+          </Typography>
+          <Typography sx={{ fontSize: '0.88rem', fontWeight: 600, color: c.text.primary }}>
+            {l.title}
+          </Typography>
+          {l.description && (
+            <Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+              {l.description}
+            </Typography>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export default LinksWidget;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
new file mode 100644
index 00000000..92b6fd8a
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type { PlanProps } from './showUiPayload';
+
+const MAX_VISIBLE = 6;
+
+/** Tool-UI-style plan card: progress summary bar + step checklist. */
+function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
+  const c = useClaudeTokens();
+  const done = props.steps.filter((s) => s.status === 'completed').length;
+  const visible = props.steps.slice(0, MAX_VISIBLE);
+  const hidden = props.steps.length - visible.length;
+
+  return (
+    <Box
+      sx={{
+        width: 320,
+        borderRadius: '14px',
+        border: `1px solid ${c.border.subtle}`,
+        bgcolor: c.bg.elevated,
+        p: 2,
+      }}
+    >
+      {props.title && (
+        <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1.5 }}>
+          {props.title}
+        </Typography>
+      )}
+      <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, mb: 0.5 }}>
+        {done} of {props.steps.length} complete
+      </Typography>
+      <Box sx={{ height: 4, borderRadius: 2, bgcolor: c.border.subtle, mb: 1.5, overflow: 'hidden' }}>
+        <Box sx={{ height: '100%', width: `${(done / props.steps.length) * 100}%`, bgcolor: c.text.primary, transition: 'width 0.3s ease' }} />
+      </Box>
+      {visible.map((step, i) => (
+        <Box key={`${i}-${step.label.slice(0, 24)}`} sx={{ display: 'flex', alignItems: 'center', gap: 1.25, py: 0.6 }}>
+          {step.status === 'completed' ? (
+            <CheckCircleIcon sx={{ fontSize: 17, color: c.text.primary }} />
+          ) : step.status === 'in_progress' ? (
+            <CircularProgress size={14} thickness={5} sx={{ color: c.text.secondary }} />
+          ) : (
+            <RadioButtonUncheckedIcon sx={{ fontSize: 17, color: c.border.strong }} />
+          )}
+          <Typography
+            sx={{
+              fontSize: '0.82rem',
+              fontWeight: step.status === 'in_progress' ? 600 : 500,
+              color: step.status === 'pending' ? c.text.muted : c.text.primary,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {step.label}
+          </Typography>
+        </Box>
+      ))}
+      {hidden > 0 && (
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, pt: 0.5 }}>
+          ... {hidden} more
+        </Typography>
+      )}
+    </Box>
+  );
+}
+
+export default PlanWidget;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
new file mode 100644
index 00000000..22ddaf15
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import type { StatsProps } from './showUiPayload';
+
+/** Tool-UI-style stat tiles: label, value, optional signed delta. */
+function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
+  const c = useClaudeTokens();
+  return (
+    <Box sx={{ maxWidth: 460 }}>
+      {props.title && (
+        <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
+          {props.title}
+        </Typography>
+      )}
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+        {props.stats.map((s, i) => (
+          <Box
+            key={`${i}-${s.label.slice(0, 16)}`}
+            sx={{
+              minWidth: 120,
+              flex: '1 1 120px',
+              borderRadius: '12px',
+              border: `1px solid ${c.border.subtle}`,
+              bgcolor: c.bg.elevated,
+              px: 1.5,
+              py: 1.25,
+            }}
+          >
+            <Typography sx={{ fontSize: '0.68rem', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.text.tertiary }}>
+              {s.label}
+            </Typography>
+            <Typography sx={{ fontSize: '1.15rem', fontWeight: 700, color: c.text.primary, mt: 0.25, fontVariantNumeric: 'tabular-nums' }}>
+              {s.value}
+            </Typography>
+            {s.delta && (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, mt: 0.25 }}>
+                {s.direction === 'down' ? (
+                  <ArrowDownwardIcon sx={{ fontSize: 12, color: c.status.error }} />
+                ) : (
+                  <ArrowUpwardIcon sx={{ fontSize: 12, color: c.status.success }} />
+                )}
+                <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: s.direction === 'down' ? c.status.error : c.status.success }}>
+                  {s.delta}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export default StatsWidget;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
new file mode 100644
index 00000000..c8567566
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import ToolCallBubble from '../tool-bubbles/ToolCallBubble';
+import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
+import { parseShowUiPayload } from './showUiPayload';
+import WeatherWidget from './WeatherWidget';
+import PlanWidget from './PlanWidget';
+import StatsWidget from './StatsWidget';
+import LinksWidget from './LinksWidget';
+
+interface ToolUiBubbleProps {
+  pair: ToolPair;
+  sessionId: string;
+  isPending: boolean;
+  suppressReveal: boolean;
+}
+
+/** Renders a ShowUI call as its inline component; any schema mismatch falls back to the plain tool bubble. */
+function ToolUiBubble({ pair, sessionId, isPending, suppressReveal }: ToolUiBubbleProps): React.ReactElement {
+  const payload = parseShowUiPayload(pair);
+  if (!payload) {
+    return (
+      <ToolCallBubble call={pair.call} result={pair.result} isPending={isPending} sessionId={sessionId} suppressReveal={suppressReveal} />
+    );
+  }
+  return (
+    <Box sx={{ my: 1, contain: 'layout style' }} data-select-type="tool-ui" data-select-id={pair.id} data-select-meta={JSON.stringify({ component: payload.component })}>
+      {payload.component === 'weather' && <WeatherWidget props={payload.props} />}
+      {payload.component === 'plan' && <PlanWidget props={payload.props} />}
+      {payload.component === 'stats' && <StatsWidget props={payload.props} />}
+      {payload.component === 'links' && <LinksWidget props={payload.props} />}
+    </Box>
+  );
+}
+
+export default ToolUiBubble;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
new file mode 100644
index 00000000..e7a4fe30
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
+import CloudOutlinedIcon from '@mui/icons-material/CloudOutlined';
+import GrainIcon from '@mui/icons-material/Grain';
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+import ThunderstormOutlinedIcon from '@mui/icons-material/ThunderstormOutlined';
+import type { WeatherProps } from './showUiPayload';
+
+function conditionIcon(condition: string | undefined, size: number): React.ReactElement {
+  const cond = (condition || '').toLowerCase();
+  const sx = { fontSize: size, color: 'rgba(255,255,255,0.92)' };
+  if (/thunder|storm/.test(cond)) return <ThunderstormOutlinedIcon sx={sx} />;
+  if (/rain|drizzle|shower/.test(cond)) return <GrainIcon sx={sx} />;
+  if (/snow|sleet|ice/.test(cond)) return <AcUnitIcon sx={sx} />;
+  if (/cloud|overcast|fog|mist/.test(cond)) return <CloudOutlinedIcon sx={sx} />;
+  return <WbSunnyOutlinedIcon sx={sx} />;
+}
+
+/** iOS-style weather card: dusk-sky art, big thin temperature, five-day strip. */
+function WeatherWidget({ props }: { props: WeatherProps }): React.ReactElement {
+  const unit = props.unit || 'F';
+  return (
+    <Box
+      sx={{
+        width: 300,
+        borderRadius: '16px',
+        overflow: 'hidden',
+        position: 'relative',
+        p: 2,
+        color: '#fff',
+        background:
+          'radial-gradient(120% 90% at 78% 62%, rgba(255,196,110,0.9) 0%, rgba(214,142,90,0.75) 30%, rgba(120,85,80,0.4) 55%, rgba(0,0,0,0) 75%), linear-gradient(180deg, #4d4048 0%, #6b5a58 45%, #8a6a55 100%)',
+        boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
+      }}
+    >
+      <Typography sx={{ fontSize: '1.05rem', fontWeight: 600, textShadow: '0 1px 8px rgba(0,0,0,0.35)' }}>
+        {props.location}
+      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', mt: 0.5 }}>
+        <Typography sx={{ fontSize: '4rem', fontWeight: 200, lineHeight: 1, letterSpacing: '-2px', textShadow: '0 2px 12px rgba(0,0,0,0.3)' }}>
+          {Math.round(props.temp)}
+        </Typography>
+        <Typography sx={{ fontSize: '1.6rem', fontWeight: 300, mt: 0.5, opacity: 0.85 }}>°{unit}</Typography>
+      </Box>
+      {(props.high != null || props.low != null) && (
+        <Box sx={{ display: 'flex', gap: 1.5, mt: 1 }}>
+          {props.high != null && (
+            <Typography sx={{ fontSize: '0.9rem', fontWeight: 600 }}>
+              <Box component="span" sx={{ opacity: 0.6, fontWeight: 400 }}>H </Box>{Math.round(props.high)}°
+            </Typography>
+          )}
+          {props.low != null && (
+            <Typography sx={{ fontSize: '0.9rem', fontWeight: 600 }}>
+              <Box component="span" sx={{ opacity: 0.6, fontWeight: 400 }}>L </Box>{Math.round(props.low)}°
+            </Typography>
+          )}
+        </Box>
+      )}
+      {props.forecast && props.forecast.length > 0 && (
+        <Box
+          sx={{
+            display: 'flex',
+            mt: 2.5,
+            borderRadius: '12px',
+            background: 'rgba(255,255,255,0.14)',
+            backdropFilter: 'blur(6px)',
+            WebkitBackdropFilter: 'blur(6px)',
+            px: 1,
+            py: 1.25,
+          }}
+        >
+          {props.forecast.slice(0, 5).map((d, i) => (
+            <Box key={`${d.day}-${i}`} sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5 }}>
+              <Typography sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', opacity: 0.85 }}>
+                {d.day}
+              </Typography>
+              {conditionIcon(d.condition, 16)}
+              <Typography sx={{ fontSize: '0.82rem', fontWeight: 700 }}>{Math.round(d.high)}°</Typography>
+              {d.low != null && (
+                <Typography sx={{ fontSize: '0.72rem', opacity: 0.6 }}>{Math.round(d.low)}°</Typography>
+              )}
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default WeatherWidget;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
new file mode 100644
index 00000000..4f13fe1a
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -0,0 +1,151 @@
+import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
+
+export interface WeatherForecastDay {
+  day: string;
+  condition?: string;
+  high: number;
+  low?: number;
+}
+
+export interface WeatherProps {
+  location: string;
+  temp: number;
+  unit?: 'F' | 'C';
+  high?: number;
+  low?: number;
+  condition?: string;
+  forecast?: WeatherForecastDay[];
+}
+
+export interface PlanStep {
+  label: string;
+  status: 'pending' | 'in_progress' | 'completed';
+}
+
+export interface PlanProps {
+  title?: string;
+  steps: PlanStep[];
+}
+
+export interface StatItem {
+  label: string;
+  value: string;
+  delta?: string;
+  direction?: 'up' | 'down';
+}
+
+export interface StatsProps {
+  title?: string;
+  stats: StatItem[];
+}
+
+export interface LinkItem {
+  title: string;
+  url: string;
+  description?: string;
+}
+
+export interface LinksProps {
+  links: LinkItem[];
+}
+
+export type ShowUiPayload =
+  | { component: 'weather'; props: WeatherProps }
+  | { component: 'plan'; props: PlanProps }
+  | { component: 'stats'; props: StatsProps }
+  | { component: 'links'; props: LinksProps };
+
+function num(v: unknown): v is number {
+  return typeof v === 'number' && Number.isFinite(v);
+}
+
+function str(v: unknown): v is string {
+  return typeof v === 'string' && v.length > 0;
+}
+
+export function isShowUiPair(pair: ToolPair): boolean {
+  const tool = typeof pair.call.content === 'object' ? String(pair.call.content?.tool || '') : '';
+  return /(^|__)ShowUI$/.test(tool);
+}
+
+/** Strict parse of a ShowUI tool_call's input; null on any mismatch so the caller falls back to the plain bubble. */
+export function parseShowUiPayload(pair: ToolPair): ShowUiPayload | null {
+  const content = typeof pair.call.content === 'object' ? pair.call.content : null;
+  const input = content?.input;
+  if (!input || typeof input !== 'object') return null;
+  const component = String((input as { component?: unknown }).component || '');
+  const props = (input as { props?: unknown }).props;
+  if (!props || typeof props !== 'object') return null;
+  const p = props as Record<string, unknown>;
+
+  if (component === 'weather') {
+    if (!str(p.location) || !num(p.temp)) return null;
+    const forecast = Array.isArray(p.forecast)
+      ? (p.forecast as Array<Record<string, unknown>>)
+          .filter((d) => str(d.day) && num(d.high))
+          .slice(0, 7)
+          .map((d) => ({
+            day: d.day as string,
+            condition: str(d.condition) ? d.condition : undefined,
+            high: d.high as number,
+            low: num(d.low) ? d.low : undefined,
+          }))
+      : undefined;
+    return {
+      component: 'weather',
+      props: {
+        location: p.location,
+        temp: p.temp,
+        unit: p.unit === 'C' ? 'C' : 'F',
+        high: num(p.high) ? p.high : undefined,
+        low: num(p.low) ? p.low : undefined,
+        condition: str(p.condition) ? p.condition : undefined,
+        forecast,
+      },
+    };
+  }
+
+  if (component === 'plan') {
+    if (!Array.isArray(p.steps)) return null;
+    const steps = (p.steps as Array<Record<string, unknown>>)
+      .filter((s) => str(s.label))
+      .slice(0, 20)
+      .map((s) => ({
+        label: s.label as string,
+        status: (s.status === 'completed' || s.status === 'in_progress' ? s.status : 'pending') as PlanStep['status'],
+      }));
+    if (steps.length === 0) return null;
+    return { component: 'plan', props: { title: str(p.title) ? p.title : undefined, steps } };
+  }
+
+  if (component === 'stats') {
+    if (!Array.isArray(p.stats)) return null;
+    const stats = (p.stats as Array<Record<string, unknown>>)
+      .filter((s) => str(s.label) && str(s.value))
+      .slice(0, 8)
+      .map((s) => ({
+        label: s.label as string,
+        value: s.value as string,
+        delta: str(s.delta) ? s.delta : undefined,
+        direction: (s.direction === 'up' || s.direction === 'down' ? s.direction : undefined) as StatItem['direction'],
+      }));
+    if (stats.length === 0) return null;
+    return { component: 'stats', props: { title: str(p.title) ? p.title : undefined, stats } };
+  }
+
+  if (component === 'links') {
+    if (!Array.isArray(p.links)) return null;
+    const links = (p.links as Array<Record<string, unknown>>)
+      .filter((l) => str(l.title) && str(l.url) && /^https?:\/\//i.test(l.url as string))
+      .slice(0, 10)
+      .map((l) => ({
+        title: l.title as string,
+        url: l.url as string,
+        description: str(l.description) ? l.description : undefined,
+      }));
+    if (links.length === 0) return null;
+    return { component: 'links', props: { links } };
+  }
+
+  return null;
+}

From 121dacd679d2422f4c63afb477550627e2acce79 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 21:08:51 -0700
Subject: [PATCH 079/248] [eric] browser: macOS-window chrome (traffic lights,
 fixed light strip, centered URL) + minimize to a right-edge thumbnail stack

---
 .../Dashboard/canvas/DashboardCanvas.tsx      |  11 ++
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 120 +++++++++++++-----
 .../Dashboard/desktop/MinimizedStack.tsx      |  88 +++++++++++++
 .../pages/Dashboard/desktop/minimizedShots.ts |  19 +++
 4 files changed, 203 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/minimizedShots.ts

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index fbe86dfd..cd4296ae 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -9,6 +9,7 @@ import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
 import DesktopWallpaper from '../desktop/DesktopWallpaper';
 import DesktopDock from '../desktop/DesktopDock';
+import MinimizedStack from '../desktop/MinimizedStack';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
@@ -230,6 +231,16 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         </Box>
       </Box>
 
+      {!fullscreenCardId && (
+        <MinimizedStack
+          browserCards={browserCards}
+          onRestore={(cardId, rect) => {
+            canvas.actions.fitToCards([rect], 1.15, true);
+            onHighlightCard?.(cardId);
+          }}
+        />
+      )}
+
       {!fullscreenCardId && (
         <DesktopDock
           sessions={sessions}
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 1bd759da..8589a717 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -37,8 +37,10 @@ import {
   reorderBrowserTab,
   moveBrowserTab,
   recordClosedCard,
+  toggleMinimizeCard,
   type BrowserTab,
 } from '@/shared/state/dashboardLayoutSlice';
+import { saveMinimizedShot } from '../desktop/minimizedShots';
 import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
@@ -58,6 +60,26 @@ import { getActionLabel } from '@/shared/browserCommandHandler';
 import { resolveInput, isGoogleSearch } from '@/shared/resolveUrl';
 import BrowserAgentOverlay from './BrowserAgentOverlay';
 import { useOverlayScrollPassthrough } from '../hooks/interaction/useOverlayScrollPassthrough';
+
+// Fixed light chrome for the macOS-window look; deliberately theme-independent, like a real browser window.
+const CHROME_BG = '#f2eff5';
+const CHROME_SURFACE = '#ffffff';
+const CHROME_PAGE = '#faf9fc';
+const CHROME_BORDER = 'rgba(0,0,0,0.08)';
+const CHROME_TEXT = '#3c3744';
+const CHROME_TEXT_MUTED = '#8a8494';
+
+const browserLightSx = (color: string): Record<string, unknown> => ({
+  width: 12,
+  height: 12,
+  p: 0,
+  borderRadius: '50%',
+  border: '0.5px solid rgba(0,0,0,0.08)',
+  background: '#d6d3cd',
+  cursor: 'pointer',
+  transition: 'background 150ms',
+  '.osw-card:hover &': { background: color },
+});
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 
 type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
@@ -206,6 +228,7 @@ const BrowserCard: React.FC<Props> = ({
     [browserId],
   );
   const browserAgentSession = useAppSelector(selectBrowserAgentSession);
+  const isMinimized = useAppSelector((s) => Boolean(s.dashboardLayout.minimizedCards[browserId]));
 
   const suspendedSnap = useAppSelector((state) => state.dashboardLayout.suspendedBrowserCards[browserId]);
   const endingState = useAppSelector((state) => state.dashboardLayout.endingBrowserCards[browserId]);
@@ -496,6 +519,22 @@ const BrowserCard: React.FC<Props> = ({
     dispatch(addBrowserTab({ browserId, url: browserHomepage }));
   }, [dispatch, browserId, browserHomepage]);
 
+  // Yellow light: snapshot the live page first so the right-edge stack shows a real thumbnail,
+  // then park the card (webContents stays mounted, same as the keep-alive off-screen park).
+  const handleMinimize = useCallback(() => {
+    const wv = webviewMap.current.get(activeTabId);
+    const capture = wv?.capturePage?.();
+    const park = (): void => { dispatch(toggleMinimizeCard({ cardId: browserId })); };
+    if (capture && typeof (capture as Promise<unknown>).then === 'function') {
+      (capture as Promise<{ toDataURL(): string }>)
+        .then((img) => { saveMinimizedShot(browserId, img.toDataURL()); })
+        .catch(() => undefined)
+        .finally(park);
+    } else {
+      park();
+    }
+  }, [dispatch, browserId, activeTabId]);
+
   const handleCloseTab = useCallback((tabId: string, e: React.MouseEvent) => {
     e.stopPropagation();
     // Closing the last tab destroys the whole card, so record it as a browser-card close (reopen brings the card back), not a tab close.
@@ -819,11 +858,12 @@ const BrowserCard: React.FC<Props> = ({
 
   return (
     <Box
+      className="osw-card"
       data-select-type="browser-card"
       data-select-id={browserId}
       data-select-meta={JSON.stringify({ name: activeTitle || 'Browser', url: activeUrl })}
       // Marks a kept-alive card parked off-screen (it belongs to another dashboard); fit-to-view must skip it or it pans the canvas to chase it and the card bleeds onto the dashboard you're viewing.
-      data-keepalive-hidden={keepAliveHidden ? '1' : undefined}
+      data-keepalive-hidden={keepAliveHidden || isMinimized ? '1' : undefined}
       onPointerDownCapture={(e: React.PointerEvent) => {
         onBringToFront?.(browserId, 'browser');
         // Capture-phase so chrome clicks (tab strip, URL bar) the children swallow still select the card; clicks inside the guest page never reach the host at all. Shift keeps the bubbled toggle path.
@@ -840,12 +880,12 @@ const BrowserCard: React.FC<Props> = ({
       sx={{
         position: 'absolute',
         // Kept-alive card from another dashboard: parked far off-screen so its webview surface can't bleed onto the dashboard you're viewing; click-through, webContents stays mounted.
-        pointerEvents: keepAliveHidden ? 'none' : undefined,
+        pointerEvents: keepAliveHidden || isMinimized ? 'none' : undefined,
         // contain: webview repaints don't shake neighbor cards.
         contain: 'layout style',
         // Own compositor layer so hover/paint invalidations stay contained to this card. See AgentCard for full rationale.
         willChange: 'transform',
-        left: keepAliveHidden ? -100000 : displayX,
+        left: keepAliveHidden || isMinimized ? -100000 : displayX,
         top: displayY,
         width: displayW,
         height: displayH,
@@ -893,8 +933,9 @@ const BrowserCard: React.FC<Props> = ({
           zIndex: 16,
           display: 'flex',
           alignItems: 'stretch',
-          bgcolor: agentActive ? `${accentColor}0a` : c.bg.secondary,
-          borderBottom: `1px solid ${agentActive ? `${accentColor}30` : c.border.subtle}`,
+          // Real-browser-window chrome stays light in both app themes, like the window it imitates.
+          bgcolor: agentActive ? `${accentColor}14` : CHROME_BG,
+          borderBottom: `1px solid ${agentActive ? `${accentColor}30` : CHROME_BORDER}`,
           cursor: isDragging ? 'grabbing' : 'grab',
           flexShrink: 0,
           minHeight: 34,
@@ -903,6 +944,25 @@ const BrowserCard: React.FC<Props> = ({
           overflow: 'hidden',
         }}
       >
+        <Box
+          onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
+          sx={{ display: 'flex', alignItems: 'center', gap: '7px', pl: 1.25, pr: 0.75, flexShrink: 0 }}
+        >
+          <Box
+            component="button"
+            type="button"
+            aria-label="Close browser"
+            onClick={handleRemove}
+            sx={{ ...browserLightSx('#ff5f57'), }}
+          />
+          <Box
+            component="button"
+            type="button"
+            aria-label="Minimize browser"
+            onClick={(e: React.MouseEvent) => { e.stopPropagation(); handleMinimize(); }}
+            sx={{ ...browserLightSx('#febc2e'), }}
+          />
+        </Box>
         <Box
           sx={{
             display: 'flex',
@@ -936,13 +996,13 @@ const BrowserCard: React.FC<Props> = ({
                   maxWidth: 180,
                   flex: '0 1 180px',
                   position: 'relative',
-                  borderRight: `1px solid ${c.border.subtle}`,
-                  bgcolor: isActive ? c.bg.surface : 'transparent',
+                  borderRight: `1px solid ${CHROME_BORDER}`,
+                  bgcolor: isActive ? CHROME_SURFACE : 'transparent',
                   cursor: isBeingDragged ? 'grabbing' : 'pointer',
                   transform: isBeingDragged ? `translateX(${dragTabOffset}px)` : 'none',
                   transition: isBeingDragged ? 'none' : 'background 0.15s ease, transform 0.2s ease',
                   zIndex: isBeingDragged ? 10 : 1,
-                  '&:hover': { bgcolor: isActive ? c.bg.surface : c.bg.secondary },
+                  '&:hover': { bgcolor: isActive ? CHROME_SURFACE : 'rgba(0,0,0,0.04)' },
                   '&:hover .tab-close': { opacity: 1 },
                   ...(isActive && {
                     '&::after': {
@@ -968,7 +1028,7 @@ const BrowserCard: React.FC<Props> = ({
                       onError={(e: any) => { e.target.style.display = 'none'; }}
                     />
                   ) : (
-                    <LanguageIcon sx={{ fontSize: 13, color: isActive ? accentColor : c.text.ghost }} />
+                    <LanguageIcon sx={{ fontSize: 13, color: isActive ? accentColor : CHROME_TEXT_MUTED }} />
                   )}
                 </Box>
 
@@ -977,7 +1037,7 @@ const BrowserCard: React.FC<Props> = ({
                     flex: 1,
                     fontSize: '0.7rem',
                     fontWeight: isActive ? 600 : 400,
-                    color: isActive ? c.text.primary : c.text.muted,
+                    color: isActive ? CHROME_TEXT : CHROME_TEXT_MUTED,
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
@@ -1003,10 +1063,10 @@ const BrowserCard: React.FC<Props> = ({
                     opacity: isActive ? 0.6 : 0,
                     cursor: 'pointer',
                     transition: 'opacity 0.15s, background 0.15s',
-                    '&:hover': { bgcolor: `${c.text.muted}25`, opacity: 1 },
+                    '&:hover': { bgcolor: 'rgba(0,0,0,0.09)', opacity: 1 },
                   }}
                 >
-                  <CloseIcon sx={{ fontSize: 10, color: c.text.muted }} />
+                  <CloseIcon sx={{ fontSize: 10, color: CHROME_TEXT_MUTED }} />
                 </Box>
               </Box>
             );
@@ -1026,10 +1086,10 @@ const BrowserCard: React.FC<Props> = ({
               mx: 0.25,
               my: 0.5,
               transition: 'background 0.15s',
-              '&:hover': { bgcolor: `${c.text.muted}15` },
+              '&:hover': { bgcolor: 'rgba(0,0,0,0.06)' },
             }}
           >
-            <AddIcon sx={{ fontSize: 15, color: c.text.muted }} />
+            <AddIcon sx={{ fontSize: 15, color: CHROME_TEXT_MUTED }} />
           </Box>
         </Box>
 
@@ -1072,16 +1132,6 @@ const BrowserCard: React.FC<Props> = ({
             </Box>
           )}
 
-          <Tooltip title="Close browser" placement="top">
-            <IconButton
-              size="small"
-              onClick={handleRemove}
-              onPointerDown={(e) => e.stopPropagation()}
-              sx={{ color: c.text.ghost, p: 0.4, '&:hover': { color: c.status.error } }}
-            >
-              <CloseIcon sx={{ fontSize: 15 }} />
-            </IconButton>
-          </Tooltip>
         </Box>
       </Box>
 
@@ -1093,8 +1143,8 @@ const BrowserCard: React.FC<Props> = ({
           gap: 0.25,
           px: 0.5,
           py: 0.25,
-          bgcolor: c.bg.page,
-          borderBottom: `1px solid ${c.border.subtle}`,
+          bgcolor: CHROME_PAGE,
+          borderBottom: `1px solid ${CHROME_BORDER}`,
           flexShrink: 0,
         }}
       >
@@ -1105,7 +1155,7 @@ const BrowserCard: React.FC<Props> = ({
               onClick={handleBack}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={!activeLocal.canGoBack}
-              sx={{ color: c.text.muted, p: 0.4, '&:hover': { color: c.text.primary } }}
+              sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
             >
               <ArrowBackIcon sx={{ fontSize: 15 }} />
             </IconButton>
@@ -1119,7 +1169,7 @@ const BrowserCard: React.FC<Props> = ({
               onClick={handleForward}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={!activeLocal.canGoForward}
-              sx={{ color: c.text.muted, p: 0.4, '&:hover': { color: c.text.primary } }}
+              sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
             >
               <ArrowForwardIcon sx={{ fontSize: 15 }} />
             </IconButton>
@@ -1131,7 +1181,7 @@ const BrowserCard: React.FC<Props> = ({
             size="small"
             onClick={handleRefresh}
             onPointerDown={(e) => e.stopPropagation()}
-            sx={{ color: c.text.muted, p: 0.4, '&:hover': { color: c.text.primary } }}
+            sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
           >
             <RefreshIcon sx={{ fontSize: 15 }} />
           </IconButton>
@@ -1147,13 +1197,13 @@ const BrowserCard: React.FC<Props> = ({
             ml: 0.5,
             px: 1,
             py: 0.2,
-            bgcolor: c.bg.secondary,
+            bgcolor: '#eceaf1',
             borderRadius: `${c.radius.md}px`,
-            border: `1px solid ${c.border.subtle}`,
+            border: `1px solid ${CHROME_BORDER}`,
           }}
         >
           {isSearch ? (
-            <SearchIcon sx={{ fontSize: 13, color: c.text.muted, flexShrink: 0 }} />
+            <SearchIcon sx={{ fontSize: 13, color: CHROME_TEXT_MUTED, flexShrink: 0 }} />
           ) : isSecure ? (
             <LockIcon sx={{ fontSize: 12, color: c.status.success, flexShrink: 0 }} />
           ) : null}
@@ -1169,10 +1219,10 @@ const BrowserCard: React.FC<Props> = ({
               flex: 1,
               fontSize: '0.74rem',
               fontFamily: c.font.mono,
-              color: c.text.secondary,
+              color: CHROME_TEXT,
               py: 0,
-              '& input': { py: '2px' },
-              '& input::placeholder': { color: c.text.ghost, opacity: 1 },
+              '& input': { py: '2px', textAlign: 'center' },
+              '& input::placeholder': { color: CHROME_TEXT_MUTED, opacity: 1 },
             }}
           />
         </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
new file mode 100644
index 00000000..abe96e3b
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { toggleMinimizeCard } from '@/shared/state/dashboardLayoutSlice';
+import { getMinimizedShot, dropMinimizedShot } from './minimizedShots';
+import type { BrowserCardPosition } from '@/shared/state/dashboardLayoutSlice';
+
+interface CardRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface MinimizedStackProps {
+  browserCards: Record<string, BrowserCardPosition>;
+  onRestore: (id: string, rect: CardRect) => void;
+}
+
+const THUMB_W = 96;
+
+/** Right-edge stack of minimized browser windows; click restores the card where it was. */
+function MinimizedStack({ browserCards, onRestore }: MinimizedStackProps): React.ReactElement | null {
+  const dispatch = useAppDispatch();
+  const minimized = useAppSelector((s) => s.dashboardLayout.minimizedCards);
+  const entries = Object.values(browserCards).filter((bc) => minimized[bc.browser_id]);
+  if (entries.length === 0) return null;
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        right: 14,
+        top: 120,
+        zIndex: 11,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1.5,
+        alignItems: 'flex-end',
+      }}
+    >
+      {entries.map((bc) => {
+        const activeTab = bc.tabs.find((t) => t.id === bc.activeTabId) || bc.tabs[0];
+        const shot = getMinimizedShot(bc.browser_id);
+        return (
+          <Box
+            key={bc.browser_id}
+            onClick={() => {
+              dropMinimizedShot(bc.browser_id);
+              dispatch(toggleMinimizeCard({ cardId: bc.browser_id }));
+              onRestore(bc.browser_id, bc);
+            }}
+            title={activeTab?.title || 'Browser'}
+            sx={{
+              width: THUMB_W,
+              borderRadius: '8px',
+              overflow: 'hidden',
+              cursor: 'pointer',
+              boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+              background: '#fff',
+              transition: 'transform 0.15s ease, box-shadow 0.15s ease',
+              '&:hover': { transform: 'scale(1.06)', boxShadow: '0 10px 28px rgba(0,0,0,0.4)' },
+            }}
+          >
+            {shot ? (
+              <Box component="img" src={shot} alt="" sx={{ width: '100%', display: 'block' }} />
+            ) : (
+              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5, py: 1.5, px: 1 }}>
+                {activeTab?.favicon ? (
+                  <Box component="img" src={activeTab.favicon} alt="" sx={{ width: 20, height: 20, borderRadius: '4px' }} />
+                ) : (
+                  <LanguageIcon sx={{ fontSize: 20, color: '#8a8494' }} />
+                )}
+                <Typography sx={{ fontSize: '0.62rem', color: '#3c3744', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
+                  {activeTab?.title || 'Browser'}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+export default MinimizedStack;
diff --git a/frontend/src/app/pages/Dashboard/desktop/minimizedShots.ts b/frontend/src/app/pages/Dashboard/desktop/minimizedShots.ts
new file mode 100644
index 00000000..8a086620
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/minimizedShots.ts
@@ -0,0 +1,19 @@
+/** Last visual of a card captured at minimize time; in-memory only, keyed by card id. */
+const shots = new Map<string, string>();
+const CAP = 40;
+
+export function saveMinimizedShot(cardId: string, dataUrl: string): void {
+  if (shots.size >= CAP && !shots.has(cardId)) {
+    const oldest = shots.keys().next().value;
+    if (oldest) shots.delete(oldest);
+  }
+  shots.set(cardId, dataUrl);
+}
+
+export function getMinimizedShot(cardId: string): string | undefined {
+  return shots.get(cardId);
+}
+
+export function dropMinimizedShot(cardId: string): void {
+  shots.delete(cardId);
+}

From 043ed3ff646ebcb24c49dcd906dcfd427c915e75 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 21:13:02 -0700
Subject: [PATCH 080/248] [eric] dashboard: Applications launcher window (real
 /Applications via scan, electron icons+launch, category chips) + dock tile

---
 electron/main.js                              |  35 +++
 electron/preload.js                           |   2 +
 .../Dashboard/canvas/DashboardCanvas.tsx      |   7 +
 .../Dashboard/desktop/ApplicationsWindow.tsx  | 204 ++++++++++++++++++
 .../pages/Dashboard/desktop/DesktopDock.tsx   |  28 ++-
 5 files changed, 273 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx

diff --git a/electron/main.js b/electron/main.js
index d89f755e..80d3fa55 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -3054,6 +3054,41 @@ ipcMain.handle('open-external', (_event, url) => {
   }
 });
 
+// Applications launcher support. Names are bare .app basenames from the local scan; both
+// handlers hard-validate the name and resolve strictly inside /Applications so a hostile
+// renderer string can't traverse anywhere else.
+const APP_NAME_RE = /^[\w .&'()+-]{1,80}$/;
+const appIconCache = new Map();
+function resolveApplicationPath(name) {
+  if (typeof name !== 'string' || !APP_NAME_RE.test(name) || name.includes('..')) return null;
+  const path = require('path');
+  const resolved = path.join('/Applications', `${name}.app`);
+  if (path.dirname(resolved) !== '/Applications') return null;
+  return resolved;
+}
+
+ipcMain.handle('get-app-icon', async (_event, name) => {
+  const target = resolveApplicationPath(name);
+  if (!target) return null;
+  if (appIconCache.has(name)) return appIconCache.get(name);
+  try {
+    const icon = await app.getFileIcon(target, { size: 'large' });
+    const dataUrl = icon && !icon.isEmpty() ? icon.toDataURL() : null;
+    appIconCache.set(name, dataUrl);
+    return dataUrl;
+  } catch (_) {
+    appIconCache.set(name, null);
+    return null;
+  }
+});
+
+ipcMain.handle('open-application', (_event, name) => {
+  const target = resolveApplicationPath(name);
+  if (!target) return false;
+  shell.openPath(target);
+  return true;
+});
+
 // Affiliate install state. Returns the persisted install.json contents so
 // the renderer can attach the referral code to authenticated cloud calls
 // (Stripe checkout, sign-in events) for downstream attribution.
diff --git a/electron/preload.js b/electron/preload.js
index e82275ca..b34f065a 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -75,6 +75,8 @@ contextBridge.exposeInMainWorld('openswarm', {
   cdpRoutesGet: (wcId, originFilter) => ipcRenderer.invoke('cdp-routes-get', wcId, originFilter),
   getWebviewConsole: (wcId) => ipcRenderer.invoke('get-webview-console', wcId),
   capturePage: (rect) => ipcRenderer.invoke('capture-page', rect),
+  getAppIcon: (name) => ipcRenderer.invoke('get-app-icon', name),
+  openApplication: (name) => ipcRenderer.invoke('open-application', name),
   getUpdateStatus: () => ipcRenderer.invoke('get-update-status'),
   getCrashRecoveryInfo: () => ipcRenderer.invoke('get-crash-recovery-info'),
   checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index cd4296ae..5a58c40f 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -10,6 +10,7 @@ import DashboardEmptyState from './DashboardEmptyState';
 import DesktopWallpaper from '../desktop/DesktopWallpaper';
 import DesktopDock from '../desktop/DesktopDock';
 import MinimizedStack from '../desktop/MinimizedStack';
+import ApplicationsWindow from '../desktop/ApplicationsWindow';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
@@ -172,6 +173,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   const dispatch = useAppDispatch();
   const fullscreenCardId = useAppSelector(selectFullscreenCardId);
   const [headerRevealed, setHeaderRevealed] = React.useState(false);
+  const [appsWindowOpen, setAppsWindowOpen] = React.useState(false);
   useEffect(() => {
     if (!fullscreenCardId) return undefined;
     const onKey = (e: KeyboardEvent): void => {
@@ -255,9 +257,14 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
             canvas.actions.fitToCards([rect], 1.15, true);
             onHighlightCard?.(cardId);
           }}
+          onApplications={() => setAppsWindowOpen((v) => !v)}
         />
       )}
 
+      {appsWindowOpen && !fullscreenCardId && (
+        <ApplicationsWindow onClose={() => setAppsWindowOpen(false)} />
+      )}
+
       {/* Canvas viewport */}
       <Box
         ref={canvas.viewportRef}
diff --git a/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx b/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
new file mode 100644
index 00000000..8a21d6be
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
@@ -0,0 +1,204 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+import { API_BASE } from '@/shared/config';
+
+interface ApplicationsWindowProps {
+  onClose: () => void;
+}
+
+const CATEGORY_RULES: Array<{ label: string; re: RegExp }> = [
+  { label: 'Developer Tools', re: /code|cursor|docker|terminal|xcode|git|iterm|studio|postman|figma|utm|dev/i },
+  { label: 'Productivity & Finance', re: /notion|calendar|mail|numbers|pages|keynote|excel|word|slides|office|linear|wallet|slack|zoom|meet|drive|todo|remind/i },
+  { label: 'Social', re: /message|discord|telegram|whatsapp|signal|wechat|facetime|x\b|instagram/i },
+  { label: 'Entertainment', re: /spotify|music|tv|netflix|youtube|game|steam|chess|vlc|iina|podcast/i },
+  { label: 'Utilities', re: /calculator|clock|settings|finder|preview|utility|cleaner|monitor|keychain|archive|font/i },
+  { label: 'Travel', re: /maps|weather|flight|uber|airbnb/i },
+  { label: 'Creativity', re: /photo|imovie|garageband|final cut|logic|premiere|illustrator|sketch|blender|procreate|paint|davinci/i },
+  { label: 'Information', re: /news|books|stocks|dictionary|wiki|safari|chrome|edge|firefox|arc|browser/i },
+];
+
+function categorize(name: string): string {
+  for (const rule of CATEGORY_RULES) if (rule.re.test(name)) return rule.label;
+  return 'Other';
+}
+
+function LetterTile({ name }: { name: string }): React.ReactElement {
+  const letter = name.match(/[a-z0-9]/i)?.[0]?.toUpperCase() || '?';
+  return (
+    <Box
+      sx={{
+        width: 52,
+        height: 52,
+        borderRadius: '12px',
+        background: 'linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08))',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '1.3rem',
+        fontWeight: 700,
+        color: 'rgba(255,255,255,0.85)',
+      }}
+    >
+      {letter}
+    </Box>
+  );
+}
+
+/** Launchpad-style window over the canvas: the user's real /Applications, categorized. */
+function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactElement {
+  const [apps, setApps] = useState<string[] | null>(null);
+  const [error, setError] = useState(false);
+  const [icons, setIcons] = useState<Record<string, string>>({});
+  const [category, setCategory] = useState<string>('All');
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(`${API_BASE}/onboarding/scan`, { method: 'POST' })
+      .then((r) => r.json())
+      .then((d) => {
+        if (cancelled) return;
+        const names: string[] = Array.isArray(d?.apps) ? d.apps : [];
+        setApps(names);
+      })
+      .catch(() => { if (!cancelled) setError(true); });
+    return () => { cancelled = true; };
+  }, []);
+
+  const getIcon = (window as unknown as { openswarm?: { getAppIcon?: (n: string) => Promise<string | null> } }).openswarm?.getAppIcon;
+  useEffect(() => {
+    if (!apps || !getIcon) return;
+    let cancelled = false;
+    (async () => {
+      for (const name of apps.slice(0, 60)) {
+        if (cancelled) return;
+        try {
+          const dataUrl = await getIcon(name);
+          if (cancelled) return;
+          if (dataUrl) setIcons((prev) => (prev[name] ? prev : { ...prev, [name]: dataUrl }));
+        } catch {
+          /* icon-less tile falls back to the letter */
+        }
+      }
+    })();
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apps]);
+
+  const categories = useMemo(() => {
+    if (!apps) return [];
+    const present = new Set(apps.map(categorize));
+    return ['All', ...CATEGORY_RULES.map((r) => r.label).filter((l) => present.has(l)), ...(present.has('Other') ? ['Other'] : [])];
+  }, [apps]);
+
+  const visible = useMemo(() => {
+    if (!apps) return [];
+    return category === 'All' ? apps : apps.filter((a) => categorize(a) === category);
+  }, [apps, category]);
+
+  const openApp = (window as unknown as { openswarm?: { openApplication?: (n: string) => Promise<boolean> } }).openswarm?.openApplication;
+
+  return (
+    <>
+      <Box onClick={onClose} sx={{ position: 'absolute', inset: 0, zIndex: 19 }} />
+      <Box
+        sx={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 20,
+          width: 620,
+          maxWidth: 'calc(100% - 80px)',
+          maxHeight: 'calc(100% - 120px)',
+          display: 'flex',
+          flexDirection: 'column',
+          borderRadius: '18px',
+          background: 'rgba(22,12,34,0.82)',
+          backdropFilter: 'blur(28px) saturate(160%)',
+          WebkitBackdropFilter: 'blur(28px) saturate(160%)',
+          boxShadow: '0 24px 64px rgba(0,0,0,0.5)',
+          p: 2.5,
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mb: 1.5 }}>
+          <Typography sx={{ fontSize: '1.15rem' }}>🐙</Typography>
+          <Typography sx={{ fontSize: '1.05rem', fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>
+            Applications
+          </Typography>
+        </Box>
+
+        {categories.length > 1 && (
+          <Box sx={{ display: 'flex', gap: 0.75, mb: 2, overflowX: 'auto', pb: 0.5, scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }}>
+            {categories.map((cat) => (
+              <Box
+                key={cat}
+                onClick={() => setCategory(cat)}
+                sx={{
+                  px: 1.25,
+                  py: 0.4,
+                  borderRadius: 999,
+                  flexShrink: 0,
+                  cursor: 'pointer',
+                  fontSize: '0.72rem',
+                  fontWeight: 500,
+                  color: category === cat ? '#fff' : 'rgba(255,255,255,0.6)',
+                  background: category === cat ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)',
+                  '&:hover': { background: 'rgba(255,255,255,0.16)' },
+                }}
+              >
+                {cat}
+              </Box>
+            ))}
+          </Box>
+        )}
+
+        <Box sx={{ overflowY: 'auto', flex: 1, minHeight: 120 }}>
+          {!apps && !error && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+              <CircularProgress size={22} sx={{ color: 'rgba(255,255,255,0.5)' }} />
+            </Box>
+          )}
+          {error && (
+            <Typography sx={{ color: 'rgba(255,255,255,0.55)', fontSize: '0.85rem', textAlign: 'center', py: 5 }}>
+              Could not read /Applications.
+            </Typography>
+          )}
+          {apps && (
+            <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(78px, 1fr))', gap: 1.5 }}>
+              {visible.map((name) => (
+                <Box
+                  key={name}
+                  onClick={() => { if (openApp) void openApp(name); }}
+                  title={name}
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 0.75,
+                    py: 0.75,
+                    borderRadius: '10px',
+                    cursor: openApp ? 'pointer' : 'default',
+                    '&:hover': openApp ? { background: 'rgba(255,255,255,0.08)' } : undefined,
+                  }}
+                >
+                  {icons[name] ? (
+                    <Box component="img" src={icons[name]} alt="" sx={{ width: 52, height: 52, borderRadius: '12px' }} />
+                  ) : (
+                    <LetterTile name={name} />
+                  )}
+                  <Typography sx={{ fontSize: '0.66rem', color: 'rgba(255,255,255,0.82)', textAlign: 'center', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {name}
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </>
+  );
+}
+
+export default ApplicationsWindow;
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index f4e90965..d720d29d 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import LanguageIcon from '@mui/icons-material/Language';
 import SettingsIcon from '@mui/icons-material/Settings';
+import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import CoPresentIcon from '@mui/icons-material/CoPresent';
@@ -50,6 +51,7 @@ interface DesktopDockProps {
   outputs: Record<string, Output>;
   selectedIds: string[];
   onFocusCard: (id: string, rect: CardRect) => void;
+  onApplications: () => void;
 }
 
 const TILE = 30;
@@ -66,6 +68,7 @@ function DesktopDock({
   outputs,
   selectedIds,
   onFocusCard,
+  onApplications,
 }: DesktopDockProps): React.ReactElement | null {
   const dispatch = useAppDispatch();
   const [hovered, setHovered] = useState<{ id: string; top: number } | null>(null);
@@ -158,8 +161,6 @@ function DesktopDock({
     setLiveShot(null);
   }, []);
 
-  if (entries.length === 0) return null;
-
   const hoveredEntry = hovered ? entries.find((e) => e.id === hovered.id) : undefined;
   const previewImage = hoveredEntry
     ? (liveShot?.id === hoveredEntry.id ? liveShot.dataUrl : hoveredEntry.thumbnail || undefined)
@@ -226,7 +227,9 @@ function DesktopDock({
         );
       })}
 
-      <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
+      {entries.length > 0 && (
+        <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
+      )}
       <Box
         onClick={() => dispatch(openSettingsModal(undefined))}
         onMouseEnter={endHover}
@@ -246,6 +249,25 @@ function DesktopDock({
       >
         <SettingsIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
       </Box>
+      <Box
+        onClick={onApplications}
+        onMouseEnter={endHover}
+        sx={{
+          width: TILE,
+          height: TILE,
+          borderRadius: '9px',
+          background: 'linear-gradient(135deg, #3d3d46, #232329)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          flexShrink: 0,
+          transition: 'transform 0.15s ease',
+          '&:hover': { transform: 'scale(1.12)' },
+        }}
+      >
+        <AppsRoundedIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
+      </Box>
 
       {hoveredEntry && (
         <Box

From 3ff3b0bcc6374d84fcf128aa2d0f8608a1aeb55b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 21:45:04 -0700
Subject: [PATCH 081/248] [eric] tests: app_deps_changed test attaches a
 preview runtime (broadcast gates on runtime, not mode, post-merge)

---
 backend/tests/test_tool_result_hook.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/backend/tests/test_tool_result_hook.py b/backend/tests/test_tool_result_hook.py
index e5d52398..7175f9d5 100644
--- a/backend/tests/test_tool_result_hook.py
+++ b/backend/tests/test_tool_result_hook.py
@@ -50,11 +50,16 @@ async def test_view_builder_dep_install_broadcasts_app_deps_changed():
     registry: dict = {}
     ctx = p_ctx(registry)
     ctx.session.mode = "view-builder"
-    with patch.object(tool_result_hook.ws_manager, "send_to_session", new=AsyncMock()) as send:
+    # The broadcast gates on an attached preview runtime (not the mode), so agent-mode CreateApp builds get it too.
+    fake_runtime_manager = MagicMock()
+    fake_runtime_manager.get.return_value = object()
+    with patch.object(tool_result_hook.ws_manager, "send_to_session", new=AsyncMock()) as send, \
+         patch("backend.apps.outputs.runtime.manager", fake_runtime_manager):
         await tool_result_hook.post_tool_hook(
             ctx, {"tool_name": "Bash", "tool_response": "added 3 packages",
                   "tool_input": {"command": "npm install recharts"}}, "tu1", None
         )
+    view_builder_state.view_builder_dirty_sessions.discard(ctx.session_id)
     events = [c.args[1] for c in send.await_args_list]
     assert "agent:app_deps_changed" in events
 

From 27ff21176c04427b30c0cd881b7a03bde06aecd9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 22:02:08 -0700
Subject: [PATCH 082/248] [eric] agents: collapsed pill pins the session's
 artifact (latest ShowUI widget, else live spawned-browser shot) under the
 narrator pill

---
 .../AgentChat/tool-ui/ShowUiWidgetView.tsx    | 17 ++++++++++
 .../pages/AgentChat/tool-ui/ToolUiBubble.tsx  | 10 ++----
 .../pages/AgentChat/tool-ui/showUiPayload.ts  | 18 +++++++++-
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 34 +++++++++++++++++++
 .../Dashboard/desktop/AgentNarratorPill.tsx   | 19 +++++++++--
 5 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx

diff --git a/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx b/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
new file mode 100644
index 00000000..e62f0b02
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import WeatherWidget from './WeatherWidget';
+import PlanWidget from './PlanWidget';
+import StatsWidget from './StatsWidget';
+import LinksWidget from './LinksWidget';
+import type { ShowUiPayload } from './showUiPayload';
+
+/** One switch for every surface that renders a ShowUI payload (chat bubble, pill artifact). */
+function ShowUiWidgetView({ payload }: { payload: ShowUiPayload }): React.ReactElement | null {
+  if (payload.component === 'weather') return <WeatherWidget props={payload.props} />;
+  if (payload.component === 'plan') return <PlanWidget props={payload.props} />;
+  if (payload.component === 'stats') return <StatsWidget props={payload.props} />;
+  if (payload.component === 'links') return <LinksWidget props={payload.props} />;
+  return null;
+}
+
+export default ShowUiWidgetView;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
index c8567566..292b55aa 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
@@ -3,10 +3,7 @@ import Box from '@mui/material/Box';
 import ToolCallBubble from '../tool-bubbles/ToolCallBubble';
 import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
 import { parseShowUiPayload } from './showUiPayload';
-import WeatherWidget from './WeatherWidget';
-import PlanWidget from './PlanWidget';
-import StatsWidget from './StatsWidget';
-import LinksWidget from './LinksWidget';
+import ShowUiWidgetView from './ShowUiWidgetView';
 
 interface ToolUiBubbleProps {
   pair: ToolPair;
@@ -25,10 +22,7 @@ function ToolUiBubble({ pair, sessionId, isPending, suppressReveal }: ToolUiBubb
   }
   return (
     <Box sx={{ my: 1, contain: 'layout style' }} data-select-type="tool-ui" data-select-id={pair.id} data-select-meta={JSON.stringify({ component: payload.component })}>
-      {payload.component === 'weather' && <WeatherWidget props={payload.props} />}
-      {payload.component === 'plan' && <PlanWidget props={payload.props} />}
-      {payload.component === 'stats' && <StatsWidget props={payload.props} />}
-      {payload.component === 'links' && <LinksWidget props={payload.props} />}
+      <ShowUiWidgetView payload={payload} />
     </Box>
   );
 }
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
index 4f13fe1a..21f962ee 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -68,10 +68,26 @@ export function isShowUiPair(pair: ToolPair): boolean {
   return /(^|__)ShowUI$/.test(tool);
 }
 
+/** Latest ShowUI payload anywhere in a transcript; the collapsed card pins this artifact under its pill. */
+export function extractLatestShowUi(messages: Array<{ role: string; content: any }>): ShowUiPayload | null {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (msg.role !== 'tool_call') continue;
+    const tool = typeof msg.content === 'object' ? String(msg.content?.tool || '') : '';
+    if (!/(^|__)ShowUI$/.test(tool)) continue;
+    const parsed = parseShowUiInput(msg.content?.input);
+    if (parsed) return parsed;
+  }
+  return null;
+}
+
 /** Strict parse of a ShowUI tool_call's input; null on any mismatch so the caller falls back to the plain bubble. */
 export function parseShowUiPayload(pair: ToolPair): ShowUiPayload | null {
   const content = typeof pair.call.content === 'object' ? pair.call.content : null;
-  const input = content?.input;
+  return parseShowUiInput(content?.input);
+}
+
+function parseShowUiInput(input: unknown): ShowUiPayload | null {
   if (!input || typeof input !== 'object') return null;
   const component = String((input as { component?: unknown }).component || '');
   const props = (input as { props?: unknown }).props;
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index e0a0a1e9..41042f74 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -37,6 +37,8 @@ import WindowControls from './WindowControls';
 import { useTiledStyle } from './tileZones';
 import AgentNarratorPill from '../desktop/AgentNarratorPill';
 import { extractLatestTodos } from '../desktop/agentTodos';
+import { extractLatestShowUi } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
+import { getWebview } from '@/shared/browserRegistry';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { QuestionForm } from '@/app/pages/AgentChat/shell/ApprovalBar';
 import AgentChat from '@/app/pages/AgentChat/AgentChat';
@@ -691,10 +693,40 @@ const AgentCard: React.FC<Props> = ({
   // Desktop-shell narrator pill: a collapsed card with nothing to ask renders as the minimal pill
   // (live turn label + plan checklist); approvals and drafts keep the full card so their UI has a home.
   const todos = useMemo(() => extractLatestTodos(session.messages || []), [session.messages]);
+  const pillArtifact = useMemo(() => extractLatestShowUi(session.messages || []), [session.messages]);
   const pillMode = !expanded && !hasPending && !isDraft && !tileZone;
   const pillLabel = session.turn_label?.label || displayChatTitle(session);
   const pillRunning = session.status === 'running';
 
+  // f7's collapsed state: a session that spawned a browser shows that window under the pill.
+  const spawnedBrowserId = useAppSelector((s) => {
+    for (const bc of Object.values(s.dashboardLayout.browserCards)) {
+      if (bc.spawned_by === session.id) return bc.browser_id;
+    }
+    return null;
+  });
+  const [browserShot, setBrowserShot] = useState<string | null>(null);
+  useEffect(() => {
+    if (!pillMode || pillArtifact || !spawnedBrowserId) {
+      setBrowserShot(null);
+      return undefined;
+    }
+    let cancelled = false;
+    const capture = (): void => {
+      const wv = getWebview(spawnedBrowserId);
+      const p = wv?.capturePage?.();
+      if (p && typeof (p as Promise<unknown>).then === 'function') {
+        (p as Promise<{ toDataURL(): string }>)
+          .then((img) => { if (!cancelled) setBrowserShot(img.toDataURL()); })
+          .catch(() => undefined);
+      }
+    };
+    capture();
+    // Refresh while the agent is driving so the shot tracks the page; parked cards keep the last frame.
+    const timer = pillRunning ? window.setInterval(capture, 5000) : null;
+    return () => { cancelled = true; if (timer) window.clearInterval(timer); };
+  }, [pillMode, pillArtifact, spawnedBrowserId, pillRunning]);
+
   const noTransition = isDragging || isResizing || (isSelected && !!multiDragDelta);
 
   const mdDx = (!isDragging && isSelected && multiDragDelta) ? multiDragDelta.dx : 0;
@@ -926,6 +958,8 @@ const AgentCard: React.FC<Props> = ({
             label={pillLabel}
             running={pillRunning}
             todos={todos}
+            artifact={pillArtifact}
+            browserShot={browserShot}
             selected={isSelected}
             highlighted={isHighlighted}
           />
diff --git a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
index 6f1d0d59..bf5d8302 100644
--- a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
@@ -3,12 +3,16 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import CheckIcon from '@mui/icons-material/Check';
 import DashboardGlyph from '../canvas/DashboardGlyph';
+import ShowUiWidgetView from '@/app/pages/AgentChat/tool-ui/ShowUiWidgetView';
+import type { ShowUiPayload } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
 import type { AgentTodoItem } from './agentTodos';
 
 interface AgentNarratorPillProps {
   label: string;
   running: boolean;
   todos: AgentTodoItem[] | null;
+  artifact: ShowUiPayload | null;
+  browserShot: string | null;
   selected: boolean;
   highlighted: boolean;
 }
@@ -17,8 +21,8 @@ const GLASS = 'rgba(24,14,32,0.8)';
 const GLASS_BLUR = 'blur(18px) saturate(150%)';
 const MAX_VISIBLE_TODOS = 4;
 
-/** Collapsed running agent as the desktop narrator pill, with its live plan hanging below. */
-function AgentNarratorPill({ label, running, todos, selected, highlighted }: AgentNarratorPillProps): React.ReactElement {
+/** Collapsed agent as the desktop narrator pill; below it, the best artifact wins: widget > browser shot > plan > Thinking. */
+function AgentNarratorPill({ label, running, todos, artifact, browserShot, selected, highlighted }: AgentNarratorPillProps): React.ReactElement {
   const visibleTodos = (todos || []).slice(0, MAX_VISIBLE_TODOS);
   const hiddenCount = (todos?.length || 0) - visibleTodos.length;
   const ring = selected || highlighted ? { outline: '2px solid #3b82f6', outlineOffset: '2px' } : undefined;
@@ -48,7 +52,16 @@ function AgentNarratorPill({ label, running, todos, selected, highlighted }: Age
         </Typography>
       </Box>
 
-      {visibleTodos.length > 0 ? (
+      {artifact ? (
+        <ShowUiWidgetView payload={artifact} />
+      ) : browserShot ? (
+        <Box
+          component="img"
+          src={browserShot}
+          alt=""
+          sx={{ width: 300, display: 'block', borderRadius: '10px', boxShadow: '0 10px 30px rgba(0,0,0,0.35)' }}
+        />
+      ) : visibleTodos.length > 0 ? (
         <Box
           sx={{
             borderRadius: '16px',

From 3eb8969c8774dc626858f50b0097d6e2a5dadbb2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 22:31:00 -0700
Subject: [PATCH 083/248] [eric] chat: vendor tool-ui component library (21
 components, MIT) behind ShowUI; scoped Tailwind v4 utilities, upstream zod
 contracts, React 18 ports

---
 backend/apps/agents/show_ui_mcp_server.py     |   24 +
 frontend/package-lock.json                    | 2841 ++++++++++++++++-
 frontend/package.json                         |   14 +-
 .../AgentChat/tool-ui/ShowUiWidgetView.tsx    |    2 +
 .../pages/AgentChat/tool-ui/showUiPayload.ts  |   12 +-
 frontend/src/toolui/LICENSE.md                |   21 +
 frontend/src/toolui/VendoredToolUi.tsx        |   59 +
 .../toolui/components/approval-card/README.md |   19 +
 .../components/approval-card/_adapter.tsx     |   11 +
 .../approval-card/approval-card.tsx           |  212 ++
 .../toolui/components/approval-card/index.tsx |    7 +
 .../toolui/components/approval-card/schema.ts |   54 +
 .../src/toolui/components/citation/README.md  |   19 +
 .../toolui/components/citation/_adapter.tsx   |   18 +
 .../components/citation/citation-list.tsx     |  460 +++
 .../toolui/components/citation/citation.tsx   |  259 ++
 .../src/toolui/components/citation/index.ts   |    9 +
 .../src/toolui/components/citation/schema.ts  |   52 +
 .../toolui/components/data-table/README.md    |   19 +
 .../toolui/components/data-table/_adapter.tsx |   44 +
 .../components/data-table/data-table.tsx      |  936 ++++++
 .../components/data-table/formatters.tsx      |  473 +++
 .../toolui/components/data-table/index.tsx    |   29 +
 .../toolui/components/data-table/schema.ts    |  345 ++
 .../src/toolui/components/data-table/types.ts |  262 ++
 .../toolui/components/data-table/utilities.ts |  299 ++
 .../toolui/components/image-gallery/README.md |   19 +
 .../components/image-gallery/_adapter.tsx     |   13 +
 .../components/image-gallery/context.tsx      |  184 ++
 .../components/image-gallery/gallery-grid.tsx |  133 +
 .../image-gallery/gallery-lightbox.tsx        |  146 +
 .../image-gallery/image-gallery.tsx           |   75 +
 .../toolui/components/image-gallery/index.tsx |    6 +
 .../toolui/components/image-gallery/schema.ts |   59 +
 .../components/image-gallery/styles.css       |   25 +
 .../src/toolui/components/image/README.md     |   19 +
 .../src/toolui/components/image/_adapter.tsx  |   11 +
 .../src/toolui/components/image/image.tsx     |  206 ++
 frontend/src/toolui/components/image/index.ts |    3 +
 .../src/toolui/components/image/schema.ts     |   50 +
 .../components/instagram-post/README.md       |   19 +
 .../components/instagram-post/_adapter.tsx    |   19 +
 .../toolui/components/instagram-post/index.ts |    8 +
 .../instagram-post/instagram-post.tsx         |  305 ++
 .../components/instagram-post/schema.ts       |   57 +
 .../toolui/components/item-carousel/README.md |   19 +
 .../components/item-carousel/_adapter.tsx     |   12 +
 .../toolui/components/item-carousel/index.tsx |    8 +
 .../components/item-carousel/item-card.tsx    |  110 +
 .../item-carousel/item-carousel.tsx           |  404 +++
 .../toolui/components/item-carousel/schema.ts |   77 +
 .../toolui/components/link-preview/README.md  |   19 +
 .../components/link-preview/_adapter.tsx      |    6 +
 .../toolui/components/link-preview/index.ts   |    3 +
 .../components/link-preview/link-preview.tsx  |  141 +
 .../toolui/components/link-preview/schema.ts  |   43 +
 .../toolui/components/linkedin-post/README.md |   19 +
 .../components/linkedin-post/_adapter.tsx     |   19 +
 .../toolui/components/linkedin-post/index.ts  |    9 +
 .../linkedin-post/linkedin-post.tsx           |  283 ++
 .../toolui/components/linkedin-post/schema.ts |   59 +
 .../toolui/components/message-draft/README.md |   19 +
 .../components/message-draft/_adapter.tsx     |   12 +
 .../toolui/components/message-draft/index.tsx |   10 +
 .../message-draft/message-draft.tsx           |  511 +++
 .../toolui/components/message-draft/schema.ts |   83 +
 .../toolui/components/option-list/README.md   |   19 +
 .../components/option-list/_adapter.tsx       |   14 +
 .../toolui/components/option-list/index.tsx   |    7 +
 .../components/option-list/option-list.tsx    |  625 ++++
 .../toolui/components/option-list/schema.ts   |  210 ++
 .../components/option-list/selection.ts       |   35 +
 .../toolui/components/order-summary/README.md |   19 +
 .../components/order-summary/_adapter.tsx     |   16 +
 .../toolui/components/order-summary/index.tsx |   14 +
 .../order-summary/order-summary.tsx           |  296 ++
 .../toolui/components/order-summary/schema.ts |  108 +
 .../components/parameter-slider/README.md     |   19 +
 .../components/parameter-slider/_adapter.tsx  |   16 +
 .../components/parameter-slider/index.tsx     |    7 +
 .../components/parameter-slider/math.ts       |   42 +
 .../parameter-slider/parameter-slider.tsx     |  821 +++++
 .../components/parameter-slider/schema.ts     |  114 +
 frontend/src/toolui/components/plan/README.md |   19 +
 .../src/toolui/components/plan/_adapter.tsx   |   32 +
 frontend/src/toolui/components/plan/index.tsx |    7 +
 frontend/src/toolui/components/plan/plan.tsx  |  428 +++
 .../src/toolui/components/plan/progress.ts    |   29 +
 frontend/src/toolui/components/plan/schema.ts |   69 +
 .../components/preferences-panel/README.md    |   19 +
 .../components/preferences-panel/_adapter.tsx |   28 +
 .../components/preferences-panel/index.tsx    |   10 +
 .../preferences-panel/preferences-panel.tsx   |  681 ++++
 .../components/preferences-panel/schema.ts    |  144 +
 .../components/preferences-panel/signature.ts |   37 +
 .../components/progress-tracker/README.md     |   19 +
 .../components/progress-tracker/_adapter.tsx  |   10 +
 .../components/progress-tracker/index.tsx     |    7 +
 .../progress-tracker/progress-tracker.tsx     |  381 +++
 .../components/progress-tracker/schema.ts     |   76 +
 .../toolui/components/question-flow/README.md |   19 +
 .../components/question-flow/_adapter.tsx     |   14 +
 .../toolui/components/question-flow/index.tsx |   15 +
 .../question-flow/question-flow.tsx           |  793 +++++
 .../toolui/components/question-flow/schema.ts |  131 +
 .../src/toolui/components/shared/README.md    |   19 +
 .../src/toolui/components/shared/_adapter.tsx |   12 +
 .../components/shared/action-buttons.tsx      |  100 +
 .../components/shared/actions-config.ts       |   48 +
 .../src/toolui/components/shared/contract.ts  |   19 +
 .../components/shared/decision-actions.tsx    |   87 +
 .../components/shared/embedded-actions.ts     |   17 +
 .../src/toolui/components/shared/index.ts     |   27 +
 .../components/shared/local-actions.tsx       |   54 +
 .../components/shared/media/aspect-ratio.ts   |   27 +
 .../components/shared/media/format-utils.ts   |   35 +
 .../toolui/components/shared/media/index.ts   |   19 +
 .../shared/media/overlay-gradient.ts          |   25 +
 .../shared/media/safe-navigation.ts           |   23 +
 .../components/shared/media/sanitize-href.ts  |   36 +
 .../src/toolui/components/shared/parse.ts     |   51 +
 .../components/shared/pierre-dark-theme.js    | 1374 ++++++++
 .../components/shared/pierre-light-theme.js   | 1374 ++++++++
 .../src/toolui/components/shared/schema.ts    |  159 +
 .../components/shared/tool-ui-context.tsx     |   27 +
 .../src/toolui/components/shared/tool-ui.tsx  |   89 +
 .../src/toolui/components/shared/toolkit.tsx  |   20 +
 .../components/shared/use-action-buttons.tsx  |  153 +
 .../shared/use-controllable-state.ts          |   54 +
 .../shared/use-copy-to-clipboard.ts           |   59 +
 .../components/shared/use-signature-reset.ts  |   16 +
 .../src/toolui/components/shared/utils.ts     |   29 +
 .../toolui/components/stats-display/README.md |   19 +
 .../components/stats-display/_adapter.tsx     |   18 +
 .../toolui/components/stats-display/index.tsx |   10 +
 .../toolui/components/stats-display/schema.ts |   91 +
 .../components/stats-display/sparkline.tsx    |  128 +
 .../stats-display/stats-display.tsx           |  281 ++
 .../src/toolui/components/terminal/README.md  |   19 +
 .../toolui/components/terminal/_adapter.tsx   |   14 +
 .../src/toolui/components/terminal/index.tsx  |    2 +
 .../src/toolui/components/terminal/schema.ts  |   43 +
 .../toolui/components/terminal/terminal.tsx   |  283 ++
 .../src/toolui/components/video/README.md     |   19 +
 .../src/toolui/components/video/_adapter.tsx  |    7 +
 .../src/toolui/components/video/context.tsx   |   53 +
 frontend/src/toolui/components/video/index.ts |    3 +
 .../src/toolui/components/video/schema.ts     |   50 +
 .../toolui/components/video/video-helpers.ts  |   57 +
 .../src/toolui/components/video/video.tsx     |  283 ++
 .../weather-runtime-core.generated.ts         |   67 +
 .../components/weather-widget/runtime.ts      |   18 +
 .../weather-widget/schema-runtime.ts          |   72 +
 .../weather-widget/weather-data-overlay.tsx   |  586 ++++
 .../weather-widget-container.tsx              |  144 +
 .../src/toolui/components/x-post/README.md    |   19 +
 .../src/toolui/components/x-post/_adapter.tsx |   19 +
 .../src/toolui/components/x-post/index.ts     |    9 +
 .../src/toolui/components/x-post/schema.ts    |   68 +
 .../src/toolui/components/x-post/x-post.tsx   |  348 ++
 frontend/src/toolui/lib/utils.ts              |    6 +
 frontend/src/toolui/registry.tsx              |  102 +
 frontend/src/toolui/toolui.css                |  141 +
 frontend/src/toolui/ui/accordion.tsx          |   76 +
 frontend/src/toolui/ui/alert.tsx              |   68 +
 frontend/src/toolui/ui/avatar.tsx             |   53 +
 frontend/src/toolui/ui/badge.tsx              |   48 +
 frontend/src/toolui/ui/button-group.tsx       |   83 +
 frontend/src/toolui/ui/button.tsx             |   63 +
 frontend/src/toolui/ui/card.tsx               |   92 +
 frontend/src/toolui/ui/collapsible.tsx        |   39 +
 frontend/src/toolui/ui/dialog.tsx             |  143 +
 frontend/src/toolui/ui/dropdown-menu.tsx      |  257 ++
 frontend/src/toolui/ui/input-group.tsx        |  170 +
 frontend/src/toolui/ui/input.tsx              |   21 +
 frontend/src/toolui/ui/item.tsx               |  193 ++
 frontend/src/toolui/ui/label.tsx              |   24 +
 frontend/src/toolui/ui/popover.tsx            |   48 +
 frontend/src/toolui/ui/radio-group.tsx        |   45 +
 frontend/src/toolui/ui/select.tsx             |  187 ++
 frontend/src/toolui/ui/separator.tsx          |   28 +
 frontend/src/toolui/ui/sheet.tsx              |  139 +
 frontend/src/toolui/ui/skeleton.tsx           |   13 +
 frontend/src/toolui/ui/slider.tsx             |   63 +
 frontend/src/toolui/ui/switch.tsx             |   31 +
 frontend/src/toolui/ui/table.tsx              |   81 +
 frontend/src/toolui/ui/tabs.tsx               |   66 +
 frontend/src/toolui/ui/textarea.tsx           |   18 +
 frontend/src/toolui/ui/toggle-group.tsx       |   83 +
 frontend/src/toolui/ui/toggle.tsx             |   47 +
 frontend/src/toolui/ui/tooltip.tsx            |   61 +
 frontend/tsconfig.json                        |    3 +-
 frontend/webpack.config.js                    |   12 +-
 193 files changed, 24236 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/toolui/LICENSE.md
 create mode 100644 frontend/src/toolui/VendoredToolUi.tsx
 create mode 100644 frontend/src/toolui/components/approval-card/README.md
 create mode 100644 frontend/src/toolui/components/approval-card/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/approval-card/approval-card.tsx
 create mode 100644 frontend/src/toolui/components/approval-card/index.tsx
 create mode 100644 frontend/src/toolui/components/approval-card/schema.ts
 create mode 100644 frontend/src/toolui/components/citation/README.md
 create mode 100644 frontend/src/toolui/components/citation/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/citation/citation-list.tsx
 create mode 100644 frontend/src/toolui/components/citation/citation.tsx
 create mode 100644 frontend/src/toolui/components/citation/index.ts
 create mode 100644 frontend/src/toolui/components/citation/schema.ts
 create mode 100644 frontend/src/toolui/components/data-table/README.md
 create mode 100644 frontend/src/toolui/components/data-table/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/data-table/data-table.tsx
 create mode 100644 frontend/src/toolui/components/data-table/formatters.tsx
 create mode 100644 frontend/src/toolui/components/data-table/index.tsx
 create mode 100644 frontend/src/toolui/components/data-table/schema.ts
 create mode 100644 frontend/src/toolui/components/data-table/types.ts
 create mode 100644 frontend/src/toolui/components/data-table/utilities.ts
 create mode 100644 frontend/src/toolui/components/image-gallery/README.md
 create mode 100644 frontend/src/toolui/components/image-gallery/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/image-gallery/context.tsx
 create mode 100644 frontend/src/toolui/components/image-gallery/gallery-grid.tsx
 create mode 100644 frontend/src/toolui/components/image-gallery/gallery-lightbox.tsx
 create mode 100644 frontend/src/toolui/components/image-gallery/image-gallery.tsx
 create mode 100644 frontend/src/toolui/components/image-gallery/index.tsx
 create mode 100644 frontend/src/toolui/components/image-gallery/schema.ts
 create mode 100644 frontend/src/toolui/components/image-gallery/styles.css
 create mode 100644 frontend/src/toolui/components/image/README.md
 create mode 100644 frontend/src/toolui/components/image/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/image/image.tsx
 create mode 100644 frontend/src/toolui/components/image/index.ts
 create mode 100644 frontend/src/toolui/components/image/schema.ts
 create mode 100644 frontend/src/toolui/components/instagram-post/README.md
 create mode 100644 frontend/src/toolui/components/instagram-post/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/instagram-post/index.ts
 create mode 100644 frontend/src/toolui/components/instagram-post/instagram-post.tsx
 create mode 100644 frontend/src/toolui/components/instagram-post/schema.ts
 create mode 100644 frontend/src/toolui/components/item-carousel/README.md
 create mode 100644 frontend/src/toolui/components/item-carousel/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/item-carousel/index.tsx
 create mode 100644 frontend/src/toolui/components/item-carousel/item-card.tsx
 create mode 100644 frontend/src/toolui/components/item-carousel/item-carousel.tsx
 create mode 100644 frontend/src/toolui/components/item-carousel/schema.ts
 create mode 100644 frontend/src/toolui/components/link-preview/README.md
 create mode 100644 frontend/src/toolui/components/link-preview/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/link-preview/index.ts
 create mode 100644 frontend/src/toolui/components/link-preview/link-preview.tsx
 create mode 100644 frontend/src/toolui/components/link-preview/schema.ts
 create mode 100644 frontend/src/toolui/components/linkedin-post/README.md
 create mode 100644 frontend/src/toolui/components/linkedin-post/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/linkedin-post/index.ts
 create mode 100644 frontend/src/toolui/components/linkedin-post/linkedin-post.tsx
 create mode 100644 frontend/src/toolui/components/linkedin-post/schema.ts
 create mode 100644 frontend/src/toolui/components/message-draft/README.md
 create mode 100644 frontend/src/toolui/components/message-draft/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/message-draft/index.tsx
 create mode 100644 frontend/src/toolui/components/message-draft/message-draft.tsx
 create mode 100644 frontend/src/toolui/components/message-draft/schema.ts
 create mode 100644 frontend/src/toolui/components/option-list/README.md
 create mode 100644 frontend/src/toolui/components/option-list/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/option-list/index.tsx
 create mode 100644 frontend/src/toolui/components/option-list/option-list.tsx
 create mode 100644 frontend/src/toolui/components/option-list/schema.ts
 create mode 100644 frontend/src/toolui/components/option-list/selection.ts
 create mode 100644 frontend/src/toolui/components/order-summary/README.md
 create mode 100644 frontend/src/toolui/components/order-summary/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/order-summary/index.tsx
 create mode 100644 frontend/src/toolui/components/order-summary/order-summary.tsx
 create mode 100644 frontend/src/toolui/components/order-summary/schema.ts
 create mode 100644 frontend/src/toolui/components/parameter-slider/README.md
 create mode 100644 frontend/src/toolui/components/parameter-slider/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/parameter-slider/index.tsx
 create mode 100644 frontend/src/toolui/components/parameter-slider/math.ts
 create mode 100644 frontend/src/toolui/components/parameter-slider/parameter-slider.tsx
 create mode 100644 frontend/src/toolui/components/parameter-slider/schema.ts
 create mode 100644 frontend/src/toolui/components/plan/README.md
 create mode 100644 frontend/src/toolui/components/plan/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/plan/index.tsx
 create mode 100644 frontend/src/toolui/components/plan/plan.tsx
 create mode 100644 frontend/src/toolui/components/plan/progress.ts
 create mode 100644 frontend/src/toolui/components/plan/schema.ts
 create mode 100644 frontend/src/toolui/components/preferences-panel/README.md
 create mode 100644 frontend/src/toolui/components/preferences-panel/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/preferences-panel/index.tsx
 create mode 100644 frontend/src/toolui/components/preferences-panel/preferences-panel.tsx
 create mode 100644 frontend/src/toolui/components/preferences-panel/schema.ts
 create mode 100644 frontend/src/toolui/components/preferences-panel/signature.ts
 create mode 100644 frontend/src/toolui/components/progress-tracker/README.md
 create mode 100644 frontend/src/toolui/components/progress-tracker/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/progress-tracker/index.tsx
 create mode 100644 frontend/src/toolui/components/progress-tracker/progress-tracker.tsx
 create mode 100644 frontend/src/toolui/components/progress-tracker/schema.ts
 create mode 100644 frontend/src/toolui/components/question-flow/README.md
 create mode 100644 frontend/src/toolui/components/question-flow/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/question-flow/index.tsx
 create mode 100644 frontend/src/toolui/components/question-flow/question-flow.tsx
 create mode 100644 frontend/src/toolui/components/question-flow/schema.ts
 create mode 100644 frontend/src/toolui/components/shared/README.md
 create mode 100644 frontend/src/toolui/components/shared/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/shared/action-buttons.tsx
 create mode 100644 frontend/src/toolui/components/shared/actions-config.ts
 create mode 100644 frontend/src/toolui/components/shared/contract.ts
 create mode 100644 frontend/src/toolui/components/shared/decision-actions.tsx
 create mode 100644 frontend/src/toolui/components/shared/embedded-actions.ts
 create mode 100644 frontend/src/toolui/components/shared/index.ts
 create mode 100644 frontend/src/toolui/components/shared/local-actions.tsx
 create mode 100644 frontend/src/toolui/components/shared/media/aspect-ratio.ts
 create mode 100644 frontend/src/toolui/components/shared/media/format-utils.ts
 create mode 100644 frontend/src/toolui/components/shared/media/index.ts
 create mode 100644 frontend/src/toolui/components/shared/media/overlay-gradient.ts
 create mode 100644 frontend/src/toolui/components/shared/media/safe-navigation.ts
 create mode 100644 frontend/src/toolui/components/shared/media/sanitize-href.ts
 create mode 100644 frontend/src/toolui/components/shared/parse.ts
 create mode 100644 frontend/src/toolui/components/shared/pierre-dark-theme.js
 create mode 100644 frontend/src/toolui/components/shared/pierre-light-theme.js
 create mode 100644 frontend/src/toolui/components/shared/schema.ts
 create mode 100644 frontend/src/toolui/components/shared/tool-ui-context.tsx
 create mode 100644 frontend/src/toolui/components/shared/tool-ui.tsx
 create mode 100644 frontend/src/toolui/components/shared/toolkit.tsx
 create mode 100644 frontend/src/toolui/components/shared/use-action-buttons.tsx
 create mode 100644 frontend/src/toolui/components/shared/use-controllable-state.ts
 create mode 100644 frontend/src/toolui/components/shared/use-copy-to-clipboard.ts
 create mode 100644 frontend/src/toolui/components/shared/use-signature-reset.ts
 create mode 100644 frontend/src/toolui/components/shared/utils.ts
 create mode 100644 frontend/src/toolui/components/stats-display/README.md
 create mode 100644 frontend/src/toolui/components/stats-display/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/stats-display/index.tsx
 create mode 100644 frontend/src/toolui/components/stats-display/schema.ts
 create mode 100644 frontend/src/toolui/components/stats-display/sparkline.tsx
 create mode 100644 frontend/src/toolui/components/stats-display/stats-display.tsx
 create mode 100644 frontend/src/toolui/components/terminal/README.md
 create mode 100644 frontend/src/toolui/components/terminal/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/terminal/index.tsx
 create mode 100644 frontend/src/toolui/components/terminal/schema.ts
 create mode 100644 frontend/src/toolui/components/terminal/terminal.tsx
 create mode 100644 frontend/src/toolui/components/video/README.md
 create mode 100644 frontend/src/toolui/components/video/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/video/context.tsx
 create mode 100644 frontend/src/toolui/components/video/index.ts
 create mode 100644 frontend/src/toolui/components/video/schema.ts
 create mode 100644 frontend/src/toolui/components/video/video-helpers.ts
 create mode 100644 frontend/src/toolui/components/video/video.tsx
 create mode 100644 frontend/src/toolui/components/weather-widget/generated/weather-runtime-core.generated.ts
 create mode 100644 frontend/src/toolui/components/weather-widget/runtime.ts
 create mode 100644 frontend/src/toolui/components/weather-widget/schema-runtime.ts
 create mode 100644 frontend/src/toolui/components/weather-widget/weather-data-overlay.tsx
 create mode 100644 frontend/src/toolui/components/weather-widget/weather-widget-container.tsx
 create mode 100644 frontend/src/toolui/components/x-post/README.md
 create mode 100644 frontend/src/toolui/components/x-post/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/x-post/index.ts
 create mode 100644 frontend/src/toolui/components/x-post/schema.ts
 create mode 100644 frontend/src/toolui/components/x-post/x-post.tsx
 create mode 100644 frontend/src/toolui/lib/utils.ts
 create mode 100644 frontend/src/toolui/registry.tsx
 create mode 100644 frontend/src/toolui/toolui.css
 create mode 100644 frontend/src/toolui/ui/accordion.tsx
 create mode 100644 frontend/src/toolui/ui/alert.tsx
 create mode 100644 frontend/src/toolui/ui/avatar.tsx
 create mode 100644 frontend/src/toolui/ui/badge.tsx
 create mode 100644 frontend/src/toolui/ui/button-group.tsx
 create mode 100644 frontend/src/toolui/ui/button.tsx
 create mode 100644 frontend/src/toolui/ui/card.tsx
 create mode 100644 frontend/src/toolui/ui/collapsible.tsx
 create mode 100644 frontend/src/toolui/ui/dialog.tsx
 create mode 100644 frontend/src/toolui/ui/dropdown-menu.tsx
 create mode 100644 frontend/src/toolui/ui/input-group.tsx
 create mode 100644 frontend/src/toolui/ui/input.tsx
 create mode 100644 frontend/src/toolui/ui/item.tsx
 create mode 100644 frontend/src/toolui/ui/label.tsx
 create mode 100644 frontend/src/toolui/ui/popover.tsx
 create mode 100644 frontend/src/toolui/ui/radio-group.tsx
 create mode 100644 frontend/src/toolui/ui/select.tsx
 create mode 100644 frontend/src/toolui/ui/separator.tsx
 create mode 100644 frontend/src/toolui/ui/sheet.tsx
 create mode 100644 frontend/src/toolui/ui/skeleton.tsx
 create mode 100644 frontend/src/toolui/ui/slider.tsx
 create mode 100644 frontend/src/toolui/ui/switch.tsx
 create mode 100644 frontend/src/toolui/ui/table.tsx
 create mode 100644 frontend/src/toolui/ui/tabs.tsx
 create mode 100644 frontend/src/toolui/ui/textarea.tsx
 create mode 100644 frontend/src/toolui/ui/toggle-group.tsx
 create mode 100644 frontend/src/toolui/ui/toggle.tsx
 create mode 100644 frontend/src/toolui/ui/tooltip.tsx

diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
index dfc52719..e00504d3 100644
--- a/backend/apps/agents/show_ui_mcp_server.py
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -16,6 +16,28 @@ COMPONENT_SPECS = {
     "plan": "props: {title?: str, steps: [{label: str, status: 'pending'|'in_progress'|'completed'}] (max 20)}",
     "stats": "props: {title?: str, stats: [{label: str, value: str, delta?: str, direction?: 'up'|'down'}] (max 8)}",
     "links": "props: {links: [{title: str, url: str, description?: str}] (max 10)}",
+    # tool-ui vendored set: props follow the upstream Serializable contracts (https://tool-ui.com);
+    # the client validates strictly and shows a validation note instead of rendering on mismatch.
+    "data-table": "tabular results. props: {id: str, columns: [{key: str, label: str}], data: [{<key>: str|number|bool}]}",
+    "citation": "sourced claims. props: {id: str, citations: [{id: str, title: str, url?: str, snippet?: str}]}",
+    "item-carousel": "browsable items. props: {id: str, items: [{id: str, title: str, description?: str, imageUrl?: str, badge?: str}]}",
+    "link-preview": "one rich link card. props: {id: str, url: str, title: str, description?: str, imageUrl?: str, siteName?: str}",
+    "progress-tracker": "multi-stage progress. props: {id: str, stages: [{id: str, label: str, status: 'pending'|'active'|'complete'|'error'}]}",
+    "order-summary": "purchase/receipt breakdown. props: {id: str, items: [{id: str, label: str, amount: number}], total?: number, currency?: str}",
+    "terminal": "command output. props: {id: str, command?: str, output: str}",
+    "image": "single image. props: {id: str, src: str, alt?: str, caption?: str}",
+    "image-gallery": "several images. props: {id: str, images: [{src: str, alt?: str}]}",
+    "video": "video embed. props: {id: str, src: str, poster?: str, title?: str}",
+    "message-draft": "email/message draft for review. props: {id: str, to?: [str], subject?: str, body: str}",
+    "x-post": "an X/Twitter post preview. props: {id: str, author: {name: str, handle: str}, text: str}",
+    "linkedin-post": "a LinkedIn post preview. props: {id: str, author: {name: str, headline?: str}, text: str}",
+    "instagram-post": "an Instagram post preview. props: {id: str, username: str, imageUrl: str, caption?: str}",
+    "option-list": "choices for the user (display for now). props: {id: str, options: [{id: str, label: str, description?: str}], selectionMode?: 'single'|'multi'}",
+    "question-flow": "step-by-step question sequence (display for now). props follow the upstream question-flow contract",
+    "parameter-slider": "adjustable parameters (display for now). props: {id: str, parameters: [{id: str, label: str, min: number, max: number, value: number, step?: number}]}",
+    "preferences-panel": "grouped preference toggles (display for now). props follow the upstream preferences-panel contract",
+    "approval-card": "an approve/reject summary card. props follow the upstream approval-card contract",
+    "stats-display": "upstream stats-display contract (prefer 'stats' unless you need its exact shape)",
 }
 
 TOOLS = [
@@ -74,6 +96,8 @@ def validate(component: str, props: dict) -> str:
         return f"stats needs a non-empty stats list. {COMPONENT_SPECS['stats']}"
     if component == "links" and not (isinstance(props.get("links"), list) and props["links"]):
         return f"links needs a non-empty links list. {COMPONENT_SPECS['links']}"
+    # Vendored tool-ui components validate deeply client-side against their zod contracts; here we
+    # only shape-check so a wrong payload comes back as a teaching error instead of a dead render.
     return ""
 
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 92d511d7..33a69a28 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,23 +20,31 @@
         "@mui/material": "^7.3.9",
         "@reduxjs/toolkit": "^2.8.2",
         "@types/react-syntax-highlighter": "^15.5.13",
+        "ansi-to-react": "^6.2.6",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "codemirror": "^6.0.2",
         "framer-motion": "^12.35.2",
         "html-to-image": "^1.11.13",
         "lucide-react": "^1.17.0",
+        "radix-ui": "^1.6.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-markdown": "^10.1.0",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.13.1",
         "react-syntax-highlighter": "^16.1.1",
-        "remark-gfm": "^4.0.1"
+        "recharts": "^3.9.2",
+        "remark-gfm": "^4.0.1",
+        "tailwind-merge": "^3.6.0",
+        "zod": "^4.4.3"
       },
       "devDependencies": {
         "@babel/core": "^7.28.0",
         "@babel/preset-env": "^7.28.0",
         "@babel/preset-react": "^7.27.1",
         "@babel/preset-typescript": "^7.27.1",
+        "@tailwindcss/postcss": "^4.3.3",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         "@types/react-redux": "^7.1.34",
@@ -45,15 +53,32 @@
         "css-loader": "^6.8.0",
         "css-modules-types-loader": "^0.6.10",
         "html-webpack-plugin": "^5.5.0",
+        "postcss": "^8.5.20",
+        "postcss-loader": "^8.2.1",
         "sass": "^1.89.2",
         "sass-loader": "^16.0.5",
         "style-loader": "^3.3.0",
+        "tailwindcss": "^4.3.3",
+        "tw-animate-css": "^1.4.0",
         "typescript": "^5.0.0",
         "webpack": "^5.88.0",
         "webpack-cli": "^5.1.0",
         "webpack-dev-server": "^4.15.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -2052,6 +2077,44 @@
       "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
       "license": "MIT"
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.8.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -3077,6 +3140,1502 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.2.tgz",
+      "integrity": "sha512-ceTwaxc4I5IOi97DgCotl3pqiyRGvffcc0oOsE2dQYaJOFIDsDt4VWG6xEbg1QePv9QWausCEIppud/tJ1wNig==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.6.tgz",
+      "integrity": "sha512-w9hl+724uYEgCGR3bhuRepjBtrNB/6gkhCnAf58Ke+SLbHPPQqVZZB59z60roB+5H+nh3nWTcdJhQdFMEydWmw==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.12.tgz",
+      "integrity": "sha512-Y0zhCQ/XUdTom5hAxvE8RlXqR4hZmKGK6g2//LfgHmb88PJFOpXSh9B/7FlfYXezVY5FKGjRYWCYz5FXxZ9WZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.8"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.17",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.17.tgz",
+      "integrity": "sha512-l3Dmp+qPPc3SqT8+SPnxIgoWBEU2MMBxcQ7BsoRgak2UT75xY83SFvFcrUkUAWukOV3LFF+BQ9aBIFtZsIG8yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collapsible": "1.1.17",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.20.tgz",
+      "integrity": "sha512-Ft1W+jPqSh5BKfSTe4dpq6UYQKKQJ5Tvq3wfux+WVlg7nPwFK/3pIlHTb3Rbe+b/tNurx8YGXD9em91ujmgwuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-dialog": "1.1.20",
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.12.tgz",
+      "integrity": "sha512-ltXCE0glRomMZ9+u10d9o1Go+edqa1aLxufH59JRNNM3Yz1uvaeNWSaS1HeVh1X64agtdBG5JA1W1I6ySqWiwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.12.tgz",
+      "integrity": "sha512-Sok2IBJxA1XO4pU3ldzZMwUBMumIt64EY8zOUlVq5CdS+i0FrEbajVslfDB+YGWLMsrjY2kZQB0DgkrZXLZvcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.2.3.tgz",
+      "integrity": "sha512-peavtnApRB1tABx42tHw+rPU83GSg5tXicMYO/Xi1/lqNcRsF6jkr6L7Njo7gj4q/xtDRDKBkqJvbMtoOMYWtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.8.tgz",
+      "integrity": "sha512-wfN60IGuxynWK7rP4Ks2p7u9G7gqirzkAiFptuzVbsR1ot2/K+PavNUAtxiKxyRfLOvSbVfvvm9m3rFqLEXz7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-size": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.17.tgz",
+      "integrity": "sha512-DJgqGsNXa0df3ifz9PFNgvgj/bzIu5QTVWCt5nQWaUkM6y0EarUv4QG4s6mCoeQdOIyVOT/Q1osFuEGub2TDXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.12.tgz",
+      "integrity": "sha512-nb67INpE0IahJKN7EYPp9m9YGwYeKlnzxT3MwXVkgCskaSJia97kG4T0ywpjNUSSnoJk/uvk12V8vbrEHEj+/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-slot": "1.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.3.tgz",
+      "integrity": "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.2.0.tgz",
+      "integrity": "sha512-fOE+JtN9rygNZkCnHRBEP0TAvLldlhyOxMsbwFvTP4nAs+nBmfnna+o/Zski2wkmY1YMrFC0aSzsHoLY47iLrg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.3.4.tgz",
+      "integrity": "sha512-eO9tkvHvo4dNwb+lytEcKWjy8c8To+ttLwNt0f9XzzsVFIaspqt3i1/c0JaaksxBB5G//zPo9CCgn39huWQyBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-menu": "2.1.21",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.20.tgz",
+      "integrity": "sha512-cngVJcvK0yMvR7wICJpv+1uW3Qw4T7QM5sdbb+oE/lxOdTdvF00oaRpWUjVgmjyXe3J+xh7eZyXZlVF3g2g59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-focus-guards": "1.1.4",
+        "@radix-ui/react-focus-scope": "1.1.13",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-slot": "1.3.0",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.2.tgz",
+      "integrity": "sha512-C3vFhbyi4SW3PmbAi6Awpu4OzJtd0MxGurvSsYtr7p7nM8RNB3VAF3CUmnp2j50knpkrRcB7+ycVXzgLgF6yNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.16.tgz",
+      "integrity": "sha512-t45h68IjFx0ccBnPJqk0X6ecv69LkCFWd6DNCFQX56mUnVEXZbNOLCH/u9fHlAjFZ1RrFdl8/m4zev7B7NyhXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-effect-event": "0.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.21",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.21.tgz",
+      "integrity": "sha512-gavFM1iWLmWdxWNdGJHVeWeSQul5WE/0pxfvWWt1QnD71hyyujyMCDVacqBomaSOjdxwDzYB+Ng4+MxOvrFB1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-menu": "2.1.21",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.4.tgz",
+      "integrity": "sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.13.tgz",
+      "integrity": "sha512-dE04aPEuP9rvKKT0d0KjSOtTEYNg6bmCYFsoSJpfC+y91Hic28ZfDCGgv6aJ+2Kw/LBXYipMZpyqVj/OD3Z8Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.13.tgz",
+      "integrity": "sha512-PopvWqiutoZh5TJXk9EV9Wh+khbp+LQ+A0H4uHocIjVcKIi6gMlBy4sAaW15thwUSc6PrR8J62nB2uM+htqrcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-label": "2.1.12",
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.20.tgz",
+      "integrity": "sha512-UPmdiR8NsngWjG/y9mClzFg+Rbbpy8u0p0SKM+t7mfH4V07TiLsuylqR0RhJiRibopsawoTtMQudm/TxwHWa9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-popper": "1.3.4",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.2.tgz",
+      "integrity": "sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.12.tgz",
+      "integrity": "sha512-dxioNQ7VOrYKKWJIxMRmJPDSWQN0gNCUy3zaqUSBwsuFAiFzI0yLGJr2q3ml07k/HlOk55N8KEfwa1ZgfprJ3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.21",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.21.tgz",
+      "integrity": "sha512-2BHtaJHvvoWTECyrja1mOjN6z2dWdpeHL6b8PxqZYgex8J8xakT2KAchpZIaMwNPauIRHH/VlPJYhSSKe8lz2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-focus-guards": "1.1.4",
+        "@radix-ui/react-focus-scope": "1.1.13",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-popper": "1.3.4",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-slot": "1.3.0",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.21.tgz",
+      "integrity": "sha512-uQONG1qM4D8FSEt0xRs5yDpzeSWggf8lOKqHa84NvqoVoc1qJ6XN+gdkrJuQCyEY55793gLlQI3wjgWO5A/Oqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-menu": "2.1.21",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.19.tgz",
+      "integrity": "sha512-58OVQUrpWx/zGVV3lxGUyAtjX4n0305Z8xIdUAq2QlFO2m2hd1eBS4x1yIVtV8bzCQJja0TJttWcwiPI6y6tmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-use-previous": "1.1.2",
+        "@radix-ui/react-visually-hidden": "1.2.8"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.13.tgz",
+      "integrity": "sha512-reLtbZtEBsMcqXkjd/wOga4e8t9uxzFHdX9W/j/ZfGznTNJxLGjRrDNGnGOOWcBazMH1BI/b7Cx+hblSWSD7aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.2",
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-effect-event": "0.0.3",
+        "@radix-ui/react-use-is-hydrated": "0.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.8.tgz",
+      "integrity": "sha512-NH9puF7Es5Loh8vFELm+SyayzV27nyBw8kiP/uD9wbkwgq359FfbkKEvccrNk75z0LiSqC4REWk1iL9xdeWJkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-effect-event": "0.0.3",
+        "@radix-ui/react-use-is-hydrated": "0.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.20.tgz",
+      "integrity": "sha512-/PYqbsyuDkNj+IxMcRx71qNt6GelnuNulMwdCV7AtFEhUyK6XkbwreEN6CCLydMeTiDozBV4uv5aF5d12dDH7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-focus-guards": "1.1.4",
+        "@radix-ui/react-focus-scope": "1.1.13",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-popper": "1.3.4",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-slot": "1.3.0",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.3.4.tgz",
+      "integrity": "sha512-PXnCa3XgTQk0FegMctxgqJXtFLZe4IFJdbUkB7jKSCKEpb6utEO4S9Vog/pkyCfEPdzM331gvE4xpztmBAfMng==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-use-rect": "1.1.2",
+        "@radix-ui/react-use-size": "1.1.2",
+        "@radix-ui/rect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.14.tgz",
+      "integrity": "sha512-REwjAGPMa3J9oyDE4cuWkZbwnCbbyky66NurquQklXMSDn67cl6oGFx2gO7KZhPtFNbNw9xTWNrti3VIhgluYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.8.tgz",
+      "integrity": "sha512-0hhyrQdXMaATgq4ammLG9+iPqsXxzZkgTSIxdrJHdfLnXO4Uo5L7BoO3/Xf0AEaettadGZWGGJMw6ujzQvIpGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.7.tgz",
+      "integrity": "sha512-bC3NiwsprbxKjuon9l7X6BUTw7FPVzEYaL92MPEY5SCd/9hUTPXVFtVwRix7778wtRsVao+zE062gL79FZleeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.13.tgz",
+      "integrity": "sha512-1dUdKDd63Tz9FfbTw20MVr28ohG4v7HOJ1dsavGBBPBS3KGzLOyLKiMJAC1OdgiY18nTSHpD4fULGK5gsLY/ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.4.4.tgz",
+      "integrity": "sha512-OpbUmp/korY+tjEQmHwGyQ+QQ3LBlCPC70z03Q/NSqGaHf2EijuwpjQPnswrH6cZLWyT2J6FmB+kzRoMUtPBig==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-size": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.16.tgz",
+      "integrity": "sha512-w7lLsTSd3940vFYEshKkHw+NGf7H0QDJPHYsy8NRjDCVbO6ZdKW1X/xoJSYHZtttnrdZiYqbN2O/2uHGB0zasw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-is-hydrated": "0.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.15.tgz",
+      "integrity": "sha512-JVBHNfTBbGd9hhq/xZZOgmVnBCXhLs8PJJ8vMzgwI0pLZNsKckW9pkoqHyxokUCt1hoxbwDNvF9DItEeZsG68g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.2",
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.3.4.tgz",
+      "integrity": "sha512-E2JxqAvaTUEhWtBptWo02g8FnLYPymv9ahEvW/cZQPPV4ySeyo0M8n3sXccsLUAIfMbexnfXt91qF7UjTbTMMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.2",
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-focus-guards": "1.1.4",
+        "@radix-ui/react-focus-scope": "1.1.13",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-popper": "1.3.4",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-slot": "1.3.0",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-use-previous": "1.1.2",
+        "@radix-ui/react-visually-hidden": "1.2.8",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.12.tgz",
+      "integrity": "sha512-2hezgFBBR5jU3S9L9bIZ9Uag6LnvxuFBNsLCfTR8qx+NshuvFmpL4C72+5zMS3Z6UgHNSU1thOw2UaBBPEDpsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.4.4.tgz",
+      "integrity": "sha512-8dUytW34KoJaB22ctfP7hqUCuyYa8xn2w7H8kCneeOtS5oM7UBivcnZtR8P4kPYMgdoAZlkMhE9/qkYZ5MlRzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.2",
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-use-previous": "1.1.2",
+        "@radix-ui/react-use-size": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.0.tgz",
+      "integrity": "sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.3.4.tgz",
+      "integrity": "sha512-7iGMj1SfZBAc6xRiy0Y3Wr/v52viQeDhOmaM3fNRyNf2nbYooZA3kKoEDGLPtrDv8JitpzcueqdZLusVMojLdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-size": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.18.tgz",
+      "integrity": "sha512-1zq2XkQkK/KfbZn84edytYpOLquhNalra5LXc3NAMKhNRSGtyXqjMv6OyC9jlSuNKpqvQtsb57WKoICNk1v/sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.20",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.20.tgz",
+      "integrity": "sha512-S28OtO1IvYSpWfaUBtiYCTTwRLF8doafj+a+uQw8rc8dLINS52uuG3CIPCeZc3Jfdb/S7o7HhlQxLoXlIYRu6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-visually-hidden": "1.2.8"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.15.tgz",
+      "integrity": "sha512-tyCejFjhJ51UKFVIG8jh9nTdRIsFPxrgrI4IdlxuJeP+AKTfTko+0gBueyBFLHqsyE71Aj9PKHjMnG+YRPyKhA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.16.tgz",
+      "integrity": "sha512-uil+A0Um3LaZQJkMap4nIg0VgqWc0j3iNU4AXf9a/zHOgPHNYWfVk5WVsG2296Y8HLv1bxiN7uQJblHc1+00tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-toggle": "1.1.15",
+        "@radix-ui/react-use-controllable-state": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.16.tgz",
+      "integrity": "sha512-ZnvUAH+ftoRYzUzFQ8gqKnQ1lUFYb3amguGu+BXpfjvLIkjmXCcHCJlQeBLBlJCOtGNVtP+wHrZaUCC/zYKQMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-separator": "1.1.12",
+        "@radix-ui/react-toggle-group": "1.1.16"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.13.tgz",
+      "integrity": "sha512-56XPNYGMnGBcPyiBTaEXB7IGPybbsdNkFgSv90SCrHkXnu2Av1HhsyZMegzXlTu/QHA3V6/l22GZCv9iEoiqmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-popper": "1.3.4",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-slot": "1.3.0",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-visually-hidden": "1.2.8"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.2.tgz",
+      "integrity": "sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.4.tgz",
+      "integrity": "sha512-cx2DixxmSfjCcEoRvDvy1NLd6SWK94XFcEEOZUcharUlXbmahFQGKCfwdKZL2ub34iIwOPOEFVF80xb+yfLYiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-use-effect-event": "0.0.3",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.3.tgz",
+      "integrity": "sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.3.tgz",
+      "integrity": "sha512-3wEkMiPHXha/2VadZ68rYBcmYnPINVGl4Y3gtcM7fKRjANk0OscK+cdqBgUWdozb7YJxsh0vefM7vgAMHXOjqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.1.tgz",
+      "integrity": "sha512-qwOiz4Tjo8CNnrOLAYUMXeZwDzXgXpvK4TKQPmWLECM9XoWvA6+0Z2/7Ag3A4ivjS4ovbLJPbskkxioFyBhr8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.2.tgz",
+      "integrity": "sha512-IGBQPtRFdhN6MQ8dbegVmBq1LVZluya3F1jWY+puIcQC3MHctRwTDSBWCkL/3ZcnMJLTMJ++Z+ktmvg0F89iCw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.2.tgz",
+      "integrity": "sha512-d8a+bBY/FxikNPlgJJoaBHZX+zKVbWHYJGTLnLvveQgFSTntkGdEKv3JDtHrMS0DNYpllz2nRsTLGLKYttbpmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.2.tgz",
+      "integrity": "sha512-giWQp+4mxjBPt4KZ0MmyuykFNWfbDxKt4x+fPkRYmgRFJSbCZFzUglvMb/Kjn38tm10YP4ufiQZDx3zna4LU6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.8.tgz",
+      "integrity": "sha512-FjsQEpkNBJJYiPSat6jh2LGKLPX2jAoDVS3AZSBNX3cOUoEGhw/f+z2FCY8Cf1NkoYIbytJ1f4mlWPQpR+MjVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.2.tgz",
+      "integrity": "sha512-xnXE7wG13PI+cxieVssYXlQJuYVRhH9NBoxt3KNwzghDIA69GMm7d4wXRouHIYjE+KvS6U/MsMO73NdS2MH9ZA==",
+      "license": "MIT"
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -3115,6 +4674,277 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.3.tgz",
+      "integrity": "sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "postcss": "^8.5.16",
+        "tailwindcss": "4.3.3"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.6",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
@@ -3157,6 +4987,69 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/debug": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
@@ -3383,7 +5276,7 @@
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -3851,6 +5744,12 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/anser": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/anser/-/anser-2.3.5.tgz",
+      "integrity": "sha512-vcZjxvvVoxTeR5XBNJB38oTu/7eDCZlwdz32N1eNgpyPF7j/Z7Idf+CUwQOkKKpJ7RJyjxgLHCM7vdIK0iCNMQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -3874,6 +5773,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/ansi-to-react": {
+      "version": "6.2.6",
+      "resolved": "https://registry.npmjs.org/ansi-to-react/-/ansi-to-react-6.2.6.tgz",
+      "integrity": "sha512-Eqi0iaMK5OZ3jsVFxWvU2B74UZBnGuHlkflKMX6wTOeH+luy9KE2O0gUkc2PxhIP1R4IO0xohv62UMFInQOSeg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "anser": "^2.3.2",
+        "escape-carriage": "^1.3.1",
+        "linkify-it": "^3.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.3.2 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.3.2 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -3901,6 +5815,25 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -4316,6 +6249,18 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -4733,6 +6678,127 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -4750,6 +6816,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
@@ -4822,7 +6894,6 @@
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -4834,6 +6905,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -4990,14 +7067,14 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.20.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
-      "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+      "version": "5.24.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.2.tgz",
+      "integrity": "sha512-rpsZEGT1jFuve6QlpyRp9ckQ+kN61hvF9BzCPyMdaKTm8UJce96KBn3sorXOFXlzjPrs3Vc4T1NsSroZ3PxlFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.0"
+        "tapable": "^2.3.3"
       },
       "engines": {
         "node": ">=10.13.0"
@@ -5013,6 +7090,16 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/envinfo": {
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.21.0.tgz",
@@ -5074,6 +7161,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -5084,6 +7181,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-carriage": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz",
+      "integrity": "sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==",
+      "license": "MIT"
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -5627,6 +7730,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -6147,9 +8259,9 @@
       }
     },
     "node_modules/immer": {
-      "version": "11.1.4",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
-      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.15.tgz",
+      "integrity": "sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -6303,6 +8415,15 @@
       "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
       "license": "MIT"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -6540,12 +8661,45 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -6605,12 +8759,282 @@
         "shell-quote": "^1.8.3"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
@@ -6720,6 +9144,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -7774,9 +10208,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
       "dev": true,
       "funding": [
         {
@@ -8221,9 +10655,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.10",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
-      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "version": "8.5.20",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.20.tgz",
+      "integrity": "sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==",
       "dev": true,
       "funding": [
         {
@@ -8241,7 +10675,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.16",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -8249,6 +10683,78 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-loader": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.2.1.tgz",
+      "integrity": "sha512-k98jtRzthjj3f76MYTs9JTpRqV1RaaMhEU0Lpw9OTmQZQdppg4B30VZ74BojuBHt3F4KyubHJoXCMUeM8Bqeow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^9.0.0",
+        "jiti": "^2.5.1",
+        "semver": "^7.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-loader/node_modules/cosmiconfig": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-loader/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/postcss-modules-extract-imports": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
@@ -8427,6 +10933,83 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/radix-ui": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.6.3.tgz",
+      "integrity": "sha512-KmhSq0NfxIwN9q6ZpEaZ+J0hiVFQcGyrPYYhbxg34q9B8CIrQoccLJ3mJ9znLRslLoaogsP2ml8JKOVoKMXgvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.6",
+        "@radix-ui/react-accessible-icon": "1.1.12",
+        "@radix-ui/react-accordion": "1.2.17",
+        "@radix-ui/react-alert-dialog": "1.1.20",
+        "@radix-ui/react-arrow": "1.1.12",
+        "@radix-ui/react-aspect-ratio": "1.1.12",
+        "@radix-ui/react-avatar": "1.2.3",
+        "@radix-ui/react-checkbox": "1.3.8",
+        "@radix-ui/react-collapsible": "1.1.17",
+        "@radix-ui/react-collection": "1.1.12",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.2.0",
+        "@radix-ui/react-context-menu": "2.3.4",
+        "@radix-ui/react-dialog": "1.1.20",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.16",
+        "@radix-ui/react-dropdown-menu": "2.1.21",
+        "@radix-ui/react-focus-guards": "1.1.4",
+        "@radix-ui/react-focus-scope": "1.1.13",
+        "@radix-ui/react-form": "0.1.13",
+        "@radix-ui/react-hover-card": "1.1.20",
+        "@radix-ui/react-label": "2.1.12",
+        "@radix-ui/react-menu": "2.1.21",
+        "@radix-ui/react-menubar": "1.1.21",
+        "@radix-ui/react-navigation-menu": "1.2.19",
+        "@radix-ui/react-one-time-password-field": "0.1.13",
+        "@radix-ui/react-password-toggle-field": "0.1.8",
+        "@radix-ui/react-popover": "1.1.20",
+        "@radix-ui/react-popper": "1.3.4",
+        "@radix-ui/react-portal": "1.1.14",
+        "@radix-ui/react-presence": "1.1.8",
+        "@radix-ui/react-primitive": "2.1.7",
+        "@radix-ui/react-progress": "1.1.13",
+        "@radix-ui/react-radio-group": "1.4.4",
+        "@radix-ui/react-roving-focus": "1.1.16",
+        "@radix-ui/react-scroll-area": "1.2.15",
+        "@radix-ui/react-select": "2.3.4",
+        "@radix-ui/react-separator": "1.1.12",
+        "@radix-ui/react-slider": "1.4.4",
+        "@radix-ui/react-slot": "1.3.0",
+        "@radix-ui/react-switch": "1.3.4",
+        "@radix-ui/react-tabs": "1.1.18",
+        "@radix-ui/react-toast": "1.2.20",
+        "@radix-ui/react-toggle": "1.1.15",
+        "@radix-ui/react-toggle-group": "1.1.16",
+        "@radix-ui/react-toolbar": "1.1.16",
+        "@radix-ui/react-tooltip": "1.2.13",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.2.4",
+        "@radix-ui/react-use-effect-event": "0.0.3",
+        "@radix-ui/react-use-escape-keydown": "1.1.3",
+        "@radix-ui/react-use-is-hydrated": "0.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-use-size": "1.1.2",
+        "@radix-ui/react-visually-hidden": "1.2.8"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -8534,6 +11117,53 @@
         }
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.14.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.2.tgz",
@@ -8572,6 +11202,28 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "16.1.1",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
@@ -8637,6 +11289,42 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.9.2.tgz",
+      "integrity": "sha512-G4fy+Pk46RaXgwWMh+Nzhyo/lbFAVqXo9gtetlyehe6Ehge9CsgDuOTwQDD+i1+llaLktNBiNq4bhnGlDRXFtw==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts/node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/rechoir": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
@@ -8847,9 +11535,9 @@
       "license": "MIT"
     },
     "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
       "license": "MIT"
     },
     "node_modules/resolve": {
@@ -9598,6 +12286,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tapable": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
@@ -9679,6 +12384,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -9745,6 +12456,16 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -9773,6 +12494,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "7.19.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
@@ -9952,6 +12679,49 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -10033,6 +12803,28 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -10446,6 +13238,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7eacee24..b9b9ad14 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,23 +21,31 @@
     "@mui/material": "^7.3.9",
     "@reduxjs/toolkit": "^2.8.2",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "ansi-to-react": "^6.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "codemirror": "^6.0.2",
     "framer-motion": "^12.35.2",
     "html-to-image": "^1.11.13",
     "lucide-react": "^1.17.0",
+    "radix-ui": "^1.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.13.1",
     "react-syntax-highlighter": "^16.1.1",
-    "remark-gfm": "^4.0.1"
+    "recharts": "^3.9.2",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-redux": "^7.1.34",
@@ -46,9 +54,13 @@
     "css-loader": "^6.8.0",
     "css-modules-types-loader": "^0.6.10",
     "html-webpack-plugin": "^5.5.0",
+    "postcss": "^8.5.20",
+    "postcss-loader": "^8.2.1",
     "sass": "^1.89.2",
     "sass-loader": "^16.0.5",
     "style-loader": "^3.3.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.0.0",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.0",
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx b/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
index e62f0b02..583a8ac3 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
@@ -3,6 +3,7 @@ import WeatherWidget from './WeatherWidget';
 import PlanWidget from './PlanWidget';
 import StatsWidget from './StatsWidget';
 import LinksWidget from './LinksWidget';
+import VendoredToolUi from '@toolui/VendoredToolUi';
 import type { ShowUiPayload } from './showUiPayload';
 
 /** One switch for every surface that renders a ShowUI payload (chat bubble, pill artifact). */
@@ -11,6 +12,7 @@ function ShowUiWidgetView({ payload }: { payload: ShowUiPayload }): React.ReactE
   if (payload.component === 'plan') return <PlanWidget props={payload.props} />;
   if (payload.component === 'stats') return <StatsWidget props={payload.props} />;
   if (payload.component === 'links') return <LinksWidget props={payload.props} />;
+  if (payload.component === 'vendored') return <VendoredToolUi name={payload.name} props={payload.props} />;
   return null;
 }
 
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
index 21f962ee..09537faa 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -1,4 +1,5 @@
 import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
+import { isToolUiComponent } from '@toolui/registry';
 
 export interface WeatherForecastDay {
   day: string;
@@ -53,7 +54,8 @@ export type ShowUiPayload =
   | { component: 'weather'; props: WeatherProps }
   | { component: 'plan'; props: PlanProps }
   | { component: 'stats'; props: StatsProps }
-  | { component: 'links'; props: LinksProps };
+  | { component: 'links'; props: LinksProps }
+  | { component: 'vendored'; name: string; props: Record<string, unknown> };
 
 function num(v: unknown): v is number {
   return typeof v === 'number' && Number.isFinite(v);
@@ -89,6 +91,14 @@ export function parseShowUiPayload(pair: ToolPair): ShowUiPayload | null {
 
 function parseShowUiInput(input: unknown): ShowUiPayload | null {
   if (!input || typeof input !== 'object') return null;
+  {
+    const name = String((input as { component?: unknown }).component || '');
+    const rawProps = (input as { props?: unknown }).props;
+    if (isToolUiComponent(name) && rawProps && typeof rawProps === 'object') {
+      // Vendored components carry their own zod contract; deep validation happens at render.
+      return { component: 'vendored', name, props: rawProps as Record<string, unknown> };
+    }
+  }
   const component = String((input as { component?: unknown }).component || '');
   const props = (input as { props?: unknown }).props;
   if (!props || typeof props !== 'object') return null;
diff --git a/frontend/src/toolui/LICENSE.md b/frontend/src/toolui/LICENSE.md
new file mode 100644
index 00000000..1be0da05
--- /dev/null
+++ b/frontend/src/toolui/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AgentbaseAI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/frontend/src/toolui/VendoredToolUi.tsx b/frontend/src/toolui/VendoredToolUi.tsx
new file mode 100644
index 00000000..09a33234
--- /dev/null
+++ b/frontend/src/toolui/VendoredToolUi.tsx
@@ -0,0 +1,59 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { useThemeMode } from '@/shared/styles/ThemeContext';
+import { TOOL_UI_REGISTRY } from './registry';
+
+interface VendoredToolUiProps {
+  name: string;
+  props: Record<string, unknown>;
+}
+
+type Gate = 'pending' | 'ok' | 'bad';
+
+/** Validates against the upstream zod contract, then renders the vendored component inside the scoped theme. */
+function VendoredToolUi({ name, props }: VendoredToolUiProps): React.ReactElement | null {
+  const { mode } = useThemeMode();
+  const entry = TOOL_UI_REGISTRY[name];
+  const [gate, setGate] = useState<Gate>('pending');
+  const [problem, setProblem] = useState<string>('');
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!entry) return undefined;
+    entry
+      .loadSchema()
+      .then((schema) => {
+        if (cancelled) return;
+        const result = schema.safeParse(props);
+        if (result.success) {
+          setGate('ok');
+        } else {
+          setGate('bad');
+          setProblem(result.error.issues.slice(0, 2).map((i) => `${i.path.join('.')}: ${i.message}`).join('; '));
+        }
+      })
+      .catch(() => { if (!cancelled) { setGate('bad'); setProblem('component failed to load'); } });
+    return () => { cancelled = true; };
+  }, [entry, props]);
+
+  if (!entry) return null;
+  if (gate === 'bad') {
+    return (
+      <div style={{ fontSize: '0.75rem', opacity: 0.55, padding: '4px 0' }}>
+        {name} payload didn't validate ({problem})
+      </div>
+    );
+  }
+  if (gate === 'pending') {
+    return <div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />;
+  }
+  const Component = entry.Component;
+  return (
+    <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`}>
+      <Suspense fallback={<div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />}>
+        <Component {...props} />
+      </Suspense>
+    </div>
+  );
+}
+
+export default VendoredToolUi;
diff --git a/frontend/src/toolui/components/approval-card/README.md b/frontend/src/toolui/components/approval-card/README.md
new file mode 100644
index 00000000..070bdded
--- /dev/null
+++ b/frontend/src/toolui/components/approval-card/README.md
@@ -0,0 +1,19 @@
+# Approval Card
+
+Implementation for the "approval-card" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/approval-card/index.tsx
+- serializable schema + parse helpers: components/tool-ui/approval-card/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/approval-card/content.mdx
+- Preset payload: lib/presets/approval-card.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/approval-card/_adapter.tsx b/frontend/src/toolui/components/approval-card/_adapter.tsx
new file mode 100644
index 00000000..770d1920
--- /dev/null
+++ b/frontend/src/toolui/components/approval-card/_adapter.tsx
@@ -0,0 +1,11 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Separator } from "@toolui/ui/separator";
diff --git a/frontend/src/toolui/components/approval-card/approval-card.tsx b/frontend/src/toolui/components/approval-card/approval-card.tsx
new file mode 100644
index 00000000..f0ea1ed9
--- /dev/null
+++ b/frontend/src/toolui/components/approval-card/approval-card.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import * as React from "react";
+import { cn, Separator } from "./_adapter";
+import type { ApprovalCardProps, ApprovalDecision } from "./schema";
+import { ActionButtons } from "../shared/action-buttons";
+import { type Action } from "../shared/schema";
+
+import { icons, Check, X } from "lucide-react";
+
+type LucideIcon = React.ComponentType<{ className?: string }>;
+
+function getLucideIcon(name: string): LucideIcon | null {
+  const pascalName = name
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+
+  const Icon = icons[pascalName as keyof typeof icons];
+  return Icon ?? null;
+}
+
+interface ApprovalCardReceiptProps {
+  id: string;
+  title: string;
+  choice: ApprovalDecision;
+  actionLabel?: string;
+  className?: string;
+}
+
+function ApprovalCardReceipt({
+  id,
+  title,
+  choice,
+  actionLabel,
+  className,
+}: ApprovalCardReceiptProps) {
+  const isApproved = choice === "approved";
+  const displayLabel = actionLabel ?? (isApproved ? "Approved" : "Denied");
+
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-64 max-w-md flex-col",
+        "text-foreground",
+        "motion-safe:animate-in motion-safe:fade-in motion-safe:blur-in-sm motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)] motion-safe:fill-mode-both",
+        className,
+      )}
+      data-slot="approval-card"
+      data-tool-ui-id={id}
+      data-receipt="true"
+      role="status"
+      aria-label={displayLabel}
+    >
+      <div
+        className={cn(
+          "bg-card/60 flex w-full items-center gap-3 rounded-2xl border px-4 py-3 shadow-xs",
+        )}
+      >
+        <span
+          className={cn(
+            "flex size-8 shrink-0 items-center justify-center rounded-full bg-muted",
+            isApproved ? "text-primary" : "text-muted-foreground",
+          )}
+        >
+          {isApproved ? <Check className="size-4" /> : <X className="size-4" />}
+        </span>
+        <div className="flex flex-col">
+          <span className="text-sm font-medium">{displayLabel}</span>
+          <span className="text-muted-foreground text-sm">{title}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ApprovalCard({
+  id,
+  title,
+  description,
+  icon,
+  metadata,
+  variant,
+  confirmLabel,
+  cancelLabel,
+  className,
+  choice,
+  onConfirm,
+  onCancel,
+}: ApprovalCardProps) {
+  const resolvedVariant = variant ?? "default";
+  const resolvedConfirmLabel = confirmLabel ?? "Approve";
+  const resolvedCancelLabel = cancelLabel ?? "Deny";
+  const Icon = icon ? getLucideIcon(icon) : null;
+
+  const handleAction = React.useCallback(
+    async (actionId: string) => {
+      if (actionId === "confirm") {
+        await onConfirm?.();
+      } else if (actionId === "cancel") {
+        await onCancel?.();
+      }
+    },
+    [onConfirm, onCancel],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel?.();
+      }
+    },
+    [onCancel],
+  );
+
+  const isDestructive = resolvedVariant === "destructive";
+
+  const actions: Action[] = [
+    {
+      id: "cancel",
+      label: resolvedCancelLabel,
+      variant: "ghost",
+    },
+    {
+      id: "confirm",
+      label: resolvedConfirmLabel,
+      variant: isDestructive ? "destructive" : "default",
+    },
+  ];
+
+  const viewKey = choice ? `receipt-${choice}` : "interactive";
+
+  return (
+    <div key={viewKey} className="contents">
+      {choice ? (
+        <ApprovalCardReceipt
+          id={id}
+          title={title}
+          choice={choice}
+          className={className}
+        />
+      ) : (
+        <article
+          className={cn(
+            "flex w-full min-w-64 max-w-md flex-col gap-3",
+            "text-foreground",
+            className,
+          )}
+          data-slot="approval-card"
+          data-tool-ui-id={id}
+          role="dialog"
+          aria-labelledby={`${id}-title`}
+          aria-describedby={description ? `${id}-description` : undefined}
+          onKeyDown={handleKeyDown}
+        >
+          <div className="bg-card flex w-full flex-col gap-4 rounded-2xl border p-5 shadow-xs">
+            <div className="flex items-start gap-3">
+              {Icon && (
+                <span
+                  className={cn(
+                    "flex size-10 shrink-0 items-center justify-center rounded-xl",
+                    isDestructive
+                      ? "bg-destructive/10 text-destructive"
+                      : "bg-primary/10 text-primary",
+                  )}
+                >
+                  <Icon className="size-5" />
+                </span>
+              )}
+              <div className="flex flex-1 flex-col gap-1">
+                <h2
+                  id={`${id}-title`}
+                  className="text-base font-semibold leading-tight"
+                >
+                  {title}
+                </h2>
+                {description && (
+                  <p
+                    id={`${id}-description`}
+                    className="text-muted-foreground text-sm"
+                  >
+                    {description}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {metadata && metadata.length > 0 && (
+              <>
+                <Separator />
+                <dl className="flex flex-col gap-2 text-sm">
+                  {metadata.map((item, index) => (
+                    <div key={index} className="flex justify-between gap-4">
+                      <dt className="text-muted-foreground shrink-0">
+                        {item.key}
+                      </dt>
+                      <dd className="min-w-0 truncate">{item.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </>
+            )}
+          </div>
+          <div className="@container/actions">
+            <ActionButtons actions={actions} onAction={handleAction} />
+          </div>
+        </article>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/approval-card/index.tsx b/frontend/src/toolui/components/approval-card/index.tsx
new file mode 100644
index 00000000..1bbfb6a6
--- /dev/null
+++ b/frontend/src/toolui/components/approval-card/index.tsx
@@ -0,0 +1,7 @@
+export { ApprovalCard } from "./approval-card";
+export {
+  type SerializableApprovalCard,
+  type ApprovalCardProps,
+  type ApprovalDecision,
+  type MetadataItem,
+} from "./schema";
diff --git a/frontend/src/toolui/components/approval-card/schema.ts b/frontend/src/toolui/components/approval-card/schema.ts
new file mode 100644
index 00000000..9371e726
--- /dev/null
+++ b/frontend/src/toolui/components/approval-card/schema.ts
@@ -0,0 +1,54 @@
+import { z } from "zod";
+import { ToolUIIdSchema, ToolUIRoleSchema } from "../shared/schema";
+import { defineToolUiContract } from "../shared/contract";
+
+export const MetadataItemSchema = z.object({
+  key: z.string().min(1),
+  value: z.string(),
+});
+
+export type MetadataItem = z.infer<typeof MetadataItemSchema>;
+
+export const ApprovalDecisionSchema = z.enum(["approved", "denied"]);
+
+export type ApprovalDecision = z.infer<typeof ApprovalDecisionSchema>;
+
+export const SerializableApprovalCardSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+
+  title: z.string().min(1),
+  description: z.string().optional(),
+  icon: z.string().optional(),
+  metadata: z.array(MetadataItemSchema).optional(),
+
+  variant: z.enum(["default", "destructive"]).optional(),
+
+  confirmLabel: z.string().optional(),
+  cancelLabel: z.string().optional(),
+
+  choice: ApprovalDecisionSchema.optional(),
+});
+
+export type SerializableApprovalCard = z.infer<
+  typeof SerializableApprovalCardSchema
+>;
+
+const SerializableApprovalCardSchemaContract = defineToolUiContract(
+  "ApprovalCard",
+  SerializableApprovalCardSchema,
+);
+
+export const parseSerializableApprovalCard: (
+  input: unknown,
+) => SerializableApprovalCard = SerializableApprovalCardSchemaContract.parse;
+
+export const safeParseSerializableApprovalCard: (
+  input: unknown,
+) => SerializableApprovalCard | null =
+  SerializableApprovalCardSchemaContract.safeParse;
+export interface ApprovalCardProps extends SerializableApprovalCard {
+  className?: string;
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void | Promise<void>;
+}
diff --git a/frontend/src/toolui/components/citation/README.md b/frontend/src/toolui/components/citation/README.md
new file mode 100644
index 00000000..e248e34d
--- /dev/null
+++ b/frontend/src/toolui/components/citation/README.md
@@ -0,0 +1,19 @@
+# Citation
+
+Implementation for the "citation" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/citation/index.ts
+- serializable schema + parse helpers: components/tool-ui/citation/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/citation/content.mdx
+- Preset payload: lib/presets/citation.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/citation/_adapter.tsx b/frontend/src/toolui/components/citation/_adapter.tsx
new file mode 100644
index 00000000..33f4cdc4
--- /dev/null
+++ b/frontend/src/toolui/components/citation/_adapter.tsx
@@ -0,0 +1,18 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn      → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Tooltip → shadcn/ui Tooltip (only needed for variant="inline")
+ *   Popover → shadcn/ui Popover (only needed for CitationList)
+ */
+"use client";
+
+export { cn } from "@toolui/lib/utils";
+export {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@toolui/ui/popover";
diff --git a/frontend/src/toolui/components/citation/citation-list.tsx b/frontend/src/toolui/components/citation/citation-list.tsx
new file mode 100644
index 00000000..db586c7e
--- /dev/null
+++ b/frontend/src/toolui/components/citation/citation-list.tsx
@@ -0,0 +1,460 @@
+"use client";
+
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  FileText,
+  Globe,
+  Code2,
+  Newspaper,
+  Database,
+  File,
+  ExternalLink,
+} from "lucide-react";
+import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
+import { Citation } from "./citation";
+import type {
+  SerializableCitation,
+  CitationType,
+  CitationVariant,
+} from "./schema";
+import {
+  openSafeNavigationHref,
+  resolveSafeNavigationHref,
+} from "../shared/media";
+
+const TYPE_ICONS: Record<CitationType, LucideIcon> = {
+  webpage: Globe,
+  document: FileText,
+  article: Newspaper,
+  api: Database,
+  code: Code2,
+  other: File,
+};
+
+function useHoverPopover(delay = 100) {
+  const [open, setOpen] = React.useState(false);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const handleMouseEnter = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(true), delay);
+  }, [delay]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(false), delay);
+  }, [delay]);
+
+  const handleFocus = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setOpen(true);
+  }, []);
+
+  const handleBlur = React.useCallback(
+    (e: React.FocusEvent) => {
+      const relatedTarget = e.relatedTarget as HTMLElement | null;
+      if (containerRef.current?.contains(relatedTarget)) {
+        return;
+      }
+      if (relatedTarget?.closest("[data-radix-popper-content-wrapper]")) {
+        return;
+      }
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setOpen(false), delay);
+    },
+    [delay],
+  );
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return {
+    open,
+    setOpen,
+    containerRef,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocus,
+    handleBlur,
+  };
+}
+
+export interface CitationListProps {
+  id: string;
+  citations: SerializableCitation[];
+  variant?: CitationVariant;
+  maxVisible?: number;
+  className?: string;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+export function CitationList(props: CitationListProps) {
+  const {
+    id,
+    citations,
+    variant = "default",
+    maxVisible,
+    className,
+    onNavigate,
+  } = props;
+
+  const shouldTruncate =
+    maxVisible !== undefined && citations.length > maxVisible;
+  const visibleCitations = shouldTruncate
+    ? citations.slice(0, maxVisible)
+    : citations;
+  const overflowCitations = shouldTruncate ? citations.slice(maxVisible) : [];
+  const overflowCount = overflowCitations.length;
+
+  const wrapperClass =
+    variant === "inline"
+      ? "flex flex-wrap items-center gap-1.5"
+      : "flex flex-col gap-2";
+
+  // Stacked variant: overlapping favicons with popover
+  if (variant === "stacked") {
+    return (
+      <StackedCitations
+        id={id}
+        citations={citations}
+        className={className}
+        onNavigate={onNavigate}
+      />
+    );
+  }
+
+  if (variant === "default") {
+    return (
+      <div
+        className={cn("isolate flex flex-col gap-4", className)}
+        data-tool-ui-id={id}
+        data-slot="citation-list"
+      >
+        {visibleCitations.map((citation) => (
+          <Citation
+            key={citation.id}
+            {...citation}
+            variant="default"
+            onNavigate={onNavigate}
+          />
+        ))}
+        {shouldTruncate && (
+          <OverflowIndicator
+            citations={overflowCitations}
+            count={overflowCount}
+            variant="default"
+            onNavigate={onNavigate}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("isolate", wrapperClass, className)}
+      data-tool-ui-id={id}
+      data-slot="citation-list"
+    >
+      {visibleCitations.map((citation) => (
+        <Citation
+          key={citation.id}
+          {...citation}
+          variant={variant}
+          onNavigate={onNavigate}
+        />
+      ))}
+      {shouldTruncate && (
+        <OverflowIndicator
+          citations={overflowCitations}
+          count={overflowCount}
+          variant={variant}
+          onNavigate={onNavigate}
+        />
+      )}
+    </div>
+  );
+}
+
+interface OverflowIndicatorProps {
+  citations: SerializableCitation[];
+  count: number;
+  variant: CitationVariant;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+function OverflowIndicator({
+  citations,
+  count,
+  variant,
+  onNavigate,
+}: OverflowIndicatorProps) {
+  const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
+
+  const handleClick = (citation: SerializableCitation) => {
+    const href = resolveSafeNavigationHref(citation.href);
+    if (!href) return;
+    if (onNavigate) {
+      onNavigate(href, citation);
+    } else {
+      openSafeNavigationHref(href);
+    }
+  };
+
+  const popoverContent = (
+    <div className="flex max-h-72 flex-col overflow-y-auto">
+      {citations.map((citation) => (
+        <OverflowItem
+          key={citation.id}
+          citation={citation}
+          onClick={() => handleClick(citation)}
+        />
+      ))}
+    </div>
+  );
+
+  if (variant === "inline") {
+    return (
+      <Popover open={open}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md px-2 py-1",
+              "bg-muted/60 text-sm tabular-nums",
+              "transition-colors duration-150",
+              "hover:bg-muted",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+            )}
+          >
+            <span className="text-muted-foreground">+{count} more</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="top"
+          align="start"
+          className="w-80 p-1"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          {popoverContent}
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // Default variant
+  return (
+    <Popover open={open}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            "flex items-center justify-center rounded-xl px-4 py-3",
+            "border-border bg-card border border-dashed",
+            "transition-colors duration-150",
+            "hover:border-foreground/25 hover:bg-muted/50",
+            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+          )}
+        >
+          <span className="text-muted-foreground text-sm tabular-nums">
+            +{count} more sources
+          </span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="bottom"
+        align="start"
+        className="w-80 p-1"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        {popoverContent}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface OverflowItemProps {
+  citation: SerializableCitation;
+  onClick: () => void;
+}
+
+function OverflowItem({ citation, onClick }: OverflowItemProps) {
+  const TypeIcon = TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="group hover:bg-muted focus-visible:bg-muted flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left transition-colors focus-visible:outline-none"
+    >
+      {citation.favicon ? (
+        <img
+          src={citation.favicon}
+          alt=""
+          aria-hidden="true"
+          width={16}
+          height={16}
+          className="bg-muted size-4 shrink-0 rounded object-cover"
+        />
+      ) : (
+        <TypeIcon
+          className="text-muted-foreground size-4 shrink-0"
+          aria-hidden="true"
+        />
+      )}
+      <div className="min-w-0 flex-1">
+        <p className="group-hover:decoration-foreground/30 truncate text-sm font-medium group-hover:underline group-hover:underline-offset-2">
+          {citation.title}
+        </p>
+        <p className="text-muted-foreground truncate text-xs">
+          {citation.domain}
+        </p>
+      </div>
+      <ExternalLink className="text-muted-foreground mt-0.5 size-3.5 shrink-0 self-start opacity-0 transition-opacity group-hover:opacity-100" />
+    </button>
+  );
+}
+
+interface StackedCitationsProps {
+  id: string;
+  citations: SerializableCitation[];
+  className?: string;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+function StackedCitations({
+  id,
+  citations,
+  className,
+  onNavigate,
+}: StackedCitationsProps) {
+  const {
+    open,
+    setOpen,
+    containerRef,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleBlur,
+  } = useHoverPopover();
+  const maxIcons = 4;
+  const visibleCitations = citations.slice(0, maxIcons);
+  const remainingCount = Math.max(0, citations.length - maxIcons);
+
+  const handleClick = (citation: SerializableCitation) => {
+    const href = resolveSafeNavigationHref(citation.href);
+    if (!href) return;
+    if (onNavigate) {
+      onNavigate(href, citation);
+    } else {
+      openSafeNavigationHref(href);
+    }
+  };
+
+  return (
+    <div ref={containerRef} onBlur={handleBlur} className="inline-flex">
+      <Popover open={open}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            data-tool-ui-id={id}
+            data-slot="citation-list"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+            }}
+            className={cn(
+              "isolate inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2",
+              "bg-muted/40 outline-none",
+              "transition-colors duration-150",
+              "hover:bg-muted/70",
+              "focus-visible:ring-ring focus-visible:ring-2",
+              className,
+            )}
+          >
+            <div className="flex items-center">
+              {visibleCitations.map((citation, index) => {
+                const TypeIcon =
+                  TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
+                return (
+                  <div
+                    key={citation.id}
+                    className={cn(
+                      "border-border bg-background dark:border-foreground/20 relative flex size-6 items-center justify-center rounded-full border shadow-xs",
+                      index > 0 && "-ml-2",
+                    )}
+                    style={{ zIndex: maxIcons - index }}
+                  >
+                    {citation.favicon ? (
+                      <img
+                        src={citation.favicon}
+                        alt=""
+                        aria-hidden="true"
+                        width={18}
+                        height={18}
+                        className="size-4.5 rounded-full object-cover"
+                      />
+                    ) : (
+                      <TypeIcon
+                        className="text-muted-foreground size-3"
+                        aria-hidden="true"
+                      />
+                    )}
+                  </div>
+                );
+              })}
+              {remainingCount > 0 && (
+                <div
+                  className="border-border bg-background dark:border-foreground/20 relative -ml-2 flex size-6 items-center justify-center rounded-full border shadow-xs"
+                  style={{ zIndex: 0 }}
+                >
+                  <span className="text-muted-foreground text-[10px] font-medium tracking-tight">
+                    •••
+                  </span>
+                </div>
+              )}
+            </div>
+            <span className="text-muted-foreground text-sm tabular-nums">
+              {citations.length} source{citations.length !== 1 && "s"}
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="bottom"
+          align="start"
+          className="w-80 p-1"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onBlur={handleBlur}
+          onEscapeKeyDown={() => setOpen(false)}
+        >
+          <div className="flex max-h-72 flex-col overflow-y-auto">
+            {citations.map((citation) => (
+              <OverflowItem
+                key={citation.id}
+                citation={citation}
+                onClick={() => handleClick(citation)}
+              />
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/citation/citation.tsx b/frontend/src/toolui/components/citation/citation.tsx
new file mode 100644
index 00000000..551f82a7
--- /dev/null
+++ b/frontend/src/toolui/components/citation/citation.tsx
@@ -0,0 +1,259 @@
+"use client";
+
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  FileText,
+  Globe,
+  Code2,
+  Newspaper,
+  Database,
+  File,
+  ExternalLink,
+} from "lucide-react";
+import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
+
+import { openSafeNavigationHref, sanitizeHref } from "../shared/media";
+import type {
+  SerializableCitation,
+  CitationType,
+  CitationVariant,
+} from "./schema";
+
+const FALLBACK_LOCALE = "en-US";
+
+const TYPE_ICONS: Record<CitationType, LucideIcon> = {
+  webpage: Globe,
+  document: FileText,
+  article: Newspaper,
+  api: Database,
+  code: Code2,
+  other: File,
+};
+
+function extractDomain(url: string): string | undefined {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.hostname.replace(/^www\./, "");
+  } catch {
+    return undefined;
+  }
+}
+
+function formatDate(isoString: string, locale: string): string {
+  try {
+    const date = new Date(isoString);
+    return date.toLocaleDateString(locale, {
+      year: "numeric",
+      month: "short",
+    });
+  } catch {
+    return isoString;
+  }
+}
+
+function useHoverPopover(delay = 100) {
+  const [open, setOpen] = React.useState(false);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleMouseEnter = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(true), delay);
+  }, [delay]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(false), delay);
+  }, [delay]);
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return { open, setOpen, handleMouseEnter, handleMouseLeave };
+}
+
+export interface CitationProps extends SerializableCitation {
+  variant?: CitationVariant;
+  className?: string;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+export function Citation(props: CitationProps) {
+  const { variant = "default", className, onNavigate, ...serializable } = props;
+
+  const {
+    id,
+    href: rawHref,
+    title,
+    snippet,
+    domain: providedDomain,
+    favicon,
+    author,
+    publishedAt,
+    type = "webpage",
+    locale: providedLocale,
+  } = serializable;
+
+  const locale = providedLocale ?? FALLBACK_LOCALE;
+  const sanitizedHref = sanitizeHref(rawHref);
+  const domain = providedDomain ?? extractDomain(rawHref);
+
+  const citationData: SerializableCitation = {
+    ...serializable,
+    href: sanitizedHref ?? rawHref,
+    domain,
+    locale,
+  };
+
+  const TypeIcon = TYPE_ICONS[type] ?? Globe;
+
+  const handleClick = () => {
+    if (!sanitizedHref) return;
+    if (onNavigate) {
+      onNavigate(sanitizedHref, citationData);
+    } else {
+      openSafeNavigationHref(sanitizedHref);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (sanitizedHref && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  const iconElement = favicon ? (
+    <img
+      src={favicon}
+      alt=""
+      aria-hidden="true"
+      width={14}
+      height={14}
+      className="bg-muted size-3.5 shrink-0 rounded object-cover"
+    />
+  ) : (
+    <TypeIcon className="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
+  );
+
+  const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
+
+  // Inline variant: compact chip with hover popover
+  if (variant === "inline") {
+    return (
+      <Popover open={open}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            aria-label={title}
+            data-tool-ui-id={id}
+            data-slot="citation"
+            onClick={handleClick}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            className={cn(
+              "inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1",
+              "bg-muted/60 text-sm outline-none",
+              "transition-colors duration-150",
+              "hover:bg-muted",
+              "focus-visible:ring-ring focus-visible:ring-2",
+              className,
+            )}
+          >
+            {iconElement}
+            <span className="text-muted-foreground">{domain}</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="top"
+          align="start"
+          className="w-72 cursor-pointer p-0"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          onClick={handleClick}
+        >
+          <div className="hover:bg-muted/50 flex flex-col gap-2 p-3 transition-colors">
+            <div className="flex items-start gap-2">
+              {iconElement}
+              <span className="text-muted-foreground text-xs">{domain}</span>
+            </div>
+            <p className="text-sm leading-snug font-medium">{title}</p>
+            {snippet && (
+              <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+                {snippet}
+              </p>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // Default variant: full card
+  return (
+    <article
+      className={cn("relative w-full max-w-md min-w-72", className)}
+      lang={locale}
+      data-tool-ui-id={id}
+      data-slot="citation"
+    >
+      <div
+        className={cn(
+          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
+          "border-border bg-card border text-sm shadow-xs",
+          "transition-colors duration-150",
+          sanitizedHref && [
+            "cursor-pointer",
+            "hover:border-foreground/25",
+            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+          ],
+        )}
+        onClick={sanitizedHref ? handleClick : undefined}
+        role={sanitizedHref ? "link" : undefined}
+        tabIndex={sanitizedHref ? 0 : undefined}
+        onKeyDown={handleKeyDown}
+      >
+        <div className="flex flex-col gap-2 p-4">
+          <div className="text-muted-foreground flex min-w-0 items-center justify-between gap-1.5 text-xs">
+            <div className="flex min-w-0 items-center gap-1.5">
+              {iconElement}
+              <span className="truncate font-medium">{domain}</span>
+              {(author || publishedAt) && (
+                <span className="opacity-70">
+                  <span className="opacity-60"> — </span>
+                  {author}
+                  {author && publishedAt && ", "}
+                  {publishedAt && (
+                    <time dateTime={publishedAt} className="tabular-nums">
+                      {formatDate(publishedAt, locale)}
+                    </time>
+                  )}
+                </span>
+              )}
+            </div>
+            {sanitizedHref && (
+              <ExternalLink className="size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+            )}
+          </div>
+
+          <h3 className="text-foreground text-[15px] leading-snug font-medium text-pretty">
+            <span className="group-hover:decoration-foreground/30 line-clamp-2 group-hover:underline group-hover:underline-offset-2">
+              {title}
+            </span>
+          </h3>
+
+          {snippet && (
+            <p className="text-muted-foreground text-[13px] leading-relaxed text-pretty">
+              <span className="line-clamp-3">{snippet}</span>
+            </p>
+          )}
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/src/toolui/components/citation/index.ts b/frontend/src/toolui/components/citation/index.ts
new file mode 100644
index 00000000..11df62e8
--- /dev/null
+++ b/frontend/src/toolui/components/citation/index.ts
@@ -0,0 +1,9 @@
+export { Citation } from "./citation";
+export type { CitationProps } from "./citation";
+export { CitationList } from "./citation-list";
+export type { CitationListProps } from "./citation-list";
+export type {
+  SerializableCitation,
+  CitationType,
+  CitationVariant,
+} from "./schema";
diff --git a/frontend/src/toolui/components/citation/schema.ts b/frontend/src/toolui/components/citation/schema.ts
new file mode 100644
index 00000000..ffe8c9ce
--- /dev/null
+++ b/frontend/src/toolui/components/citation/schema.ts
@@ -0,0 +1,52 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const CitationTypeSchema = z.enum([
+  "webpage",
+  "document",
+  "article",
+  "api",
+  "code",
+  "other",
+]);
+
+export type CitationType = z.infer<typeof CitationTypeSchema>;
+
+export const CitationVariantSchema = z.enum(["default", "inline", "stacked"]);
+
+export type CitationVariant = z.infer<typeof CitationVariantSchema>;
+
+export const SerializableCitationSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  href: z.string().url(),
+  title: z.string(),
+  snippet: z.string().optional(),
+  domain: z.string().optional(),
+  favicon: z.string().url().optional(),
+  author: z.string().optional(),
+  publishedAt: z.string().datetime().optional(),
+  type: CitationTypeSchema.optional(),
+  locale: z.string().optional(),
+});
+
+export type SerializableCitation = z.infer<typeof SerializableCitationSchema>;
+
+const SerializableCitationSchemaContract = defineToolUiContract(
+  "Citation",
+  SerializableCitationSchema,
+);
+
+export const parseSerializableCitation: (
+  input: unknown,
+) => SerializableCitation = SerializableCitationSchemaContract.parse;
+
+export const safeParseSerializableCitation: (
+  input: unknown,
+) => SerializableCitation | null = SerializableCitationSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/data-table/README.md b/frontend/src/toolui/components/data-table/README.md
new file mode 100644
index 00000000..706d01a8
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/README.md
@@ -0,0 +1,19 @@
+# Data Table
+
+Implementation for the "data-table" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/data-table/index.tsx
+- serializable schema + parse helpers: components/tool-ui/data-table/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/data-table/content.mdx
+- Preset payload: lib/presets/data-table.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/data-table/_adapter.tsx b/frontend/src/toolui/components/data-table/_adapter.tsx
new file mode 100644
index 00000000..1dc578eb
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/_adapter.tsx
@@ -0,0 +1,44 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn           → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button       → shadcn/ui Button
+ *   DropdownMenu → shadcn/ui DropdownMenu
+ *   Accordion    → shadcn/ui Accordion
+ *   Tooltip      → shadcn/ui Tooltip
+ *   Badge        → shadcn/ui Badge
+ *   Table        → shadcn/ui Table
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@toolui/ui/dropdown-menu";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@toolui/ui/accordion";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@toolui/ui/tooltip";
+export { Badge } from "@toolui/ui/badge";
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+} from "@toolui/ui/table";
diff --git a/frontend/src/toolui/components/data-table/data-table.tsx b/frontend/src/toolui/components/data-table/data-table.tsx
new file mode 100644
index 00000000..de2dab4a
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/data-table.tsx
@@ -0,0 +1,936 @@
+"use client";
+
+import * as React from "react";
+import {
+  cn,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableHeader,
+  TableHead,
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./_adapter";
+import {
+  sortData,
+  createDataTableRowKeys,
+  getDataTableMobileDescriptionId,
+} from "./utilities";
+import { renderFormattedValue } from "./formatters";
+import type {
+  DataTableProps,
+  DataTableContextValue,
+  RowData,
+  DataTableRowData,
+  ColumnKey,
+  Column,
+} from "./types";
+import type { FormatConfig } from "./formatters";
+
+export const DEFAULT_LOCALE = "en-US" as const;
+
+function isNumericFormat(format?: FormatConfig): boolean {
+  const kind = format?.kind;
+  return (
+    kind === "number" ||
+    kind === "currency" ||
+    kind === "percent" ||
+    kind === "delta"
+  );
+}
+
+function getAlignmentClass(
+  align?: "left" | "right" | "center",
+): string | undefined {
+  if (align === "right") return "text-right";
+  if (align === "center") return "text-center";
+  return undefined;
+}
+
+const DataTableContext = React.createContext<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  DataTableContextValue<any> | undefined
+>(undefined);
+
+export function useDataTable<T extends object = RowData>() {
+  const context = React.useContext(DataTableContext) as
+    | DataTableContextValue<T>
+    | undefined;
+  if (!context) {
+    throw new Error("useDataTable must be used within <DataTable.Provider />");
+  }
+  return context;
+}
+
+type DataTableLayout = "auto" | "table" | "cards";
+
+type DataTableBaseProps<T extends object = RowData> = DataTableProps<T> & {
+  layout: DataTableLayout;
+};
+
+type DataTableProviderProps<T extends object = RowData> = Pick<
+  DataTableProps<T>,
+  | "columns"
+  | "data"
+  | "rowIdKey"
+  | "defaultSort"
+  | "sort"
+  | "onSortChange"
+  | "id"
+  | "locale"
+> & {
+  children: React.ReactNode;
+};
+
+function DataTableProvider<T extends object = RowData>({
+  columns,
+  data: rawData,
+  rowIdKey,
+  defaultSort,
+  sort: controlledSort,
+  id,
+  onSortChange,
+  locale,
+  children,
+}: DataTableProviderProps<T>) {
+  // Default locale avoids SSR/client formatting mismatches.
+  const resolvedLocale = locale ?? DEFAULT_LOCALE;
+
+  const [internalSortBy, setInternalSortBy] = React.useState<
+    ColumnKey<T> | undefined
+  >(defaultSort?.by);
+  const [internalSortDirection, setInternalSortDirection] = React.useState<
+    "asc" | "desc" | undefined
+  >(defaultSort?.direction);
+
+  const sortBy = controlledSort?.by ?? internalSortBy;
+  const sortDirection = controlledSort?.direction ?? internalSortDirection;
+
+  const data = React.useMemo(() => {
+    if (!sortBy || !sortDirection) return rawData;
+    return sortData(rawData, sortBy, sortDirection, resolvedLocale);
+  }, [rawData, sortBy, sortDirection, resolvedLocale]);
+
+  const handleSort = React.useCallback(
+    (key: ColumnKey<T>) => {
+      let newDirection: "asc" | "desc" | undefined;
+
+      if (sortBy === key) {
+        if (sortDirection === "asc") {
+          newDirection = "desc";
+        } else if (sortDirection === "desc") {
+          newDirection = undefined;
+        } else {
+          newDirection = "asc";
+        }
+      } else {
+        newDirection = "asc";
+      }
+
+      const next = {
+        by: newDirection ? key : undefined,
+        direction: newDirection,
+      } as const;
+
+      if (controlledSort) {
+        onSortChange?.(next);
+      } else {
+        setInternalSortBy(next.by);
+        setInternalSortDirection(next.direction);
+      }
+    },
+    [sortBy, sortDirection, controlledSort, onSortChange],
+  );
+
+  const contextValue: DataTableContextValue<T> = {
+    columns,
+    data,
+    rowIdKey,
+    sortBy,
+    sortDirection,
+    toggleSort: handleSort,
+    id,
+    locale: resolvedLocale,
+  };
+
+  return (
+    <DataTableContext.Provider value={contextValue}>
+      {children}
+    </DataTableContext.Provider>
+  );
+}
+
+interface DataTableLayoutProps {
+  layout: DataTableLayout;
+  emptyMessage: string;
+  maxHeight?: string;
+  className?: string;
+}
+
+function DataTableLayout({
+  layout,
+  emptyMessage,
+  maxHeight,
+  className,
+}: DataTableLayoutProps) {
+  const { columns, data, rowIdKey, sortBy, sortDirection, id } = useDataTable();
+  const rowKeys = React.useMemo(
+    () =>
+      createDataTableRowKeys(
+        data as Array<Record<string, unknown>>,
+        rowIdKey ? String(rowIdKey) : undefined,
+      ),
+    [data, rowIdKey],
+  );
+  const mobileDescriptionId = React.useMemo(
+    () => getDataTableMobileDescriptionId(String(id ?? "data-table")),
+    [id],
+  );
+
+  const sortAnnouncement = React.useMemo(() => {
+    const col = columns.find((c) => c.key === sortBy);
+    const label = col?.label ?? sortBy;
+    return sortBy && sortDirection
+      ? `Sorted by ${label}, ${sortDirection === "asc" ? "ascending" : "descending"}`
+      : "";
+  }, [columns, sortBy, sortDirection]);
+
+  return (
+    <div
+      className={cn("@container w-full min-w-80", className)}
+      data-tool-ui-id={id}
+      data-slot="data-table"
+      data-layout={layout}
+    >
+      <div
+        className={cn(
+          layout === "table"
+            ? "block"
+            : layout === "cards"
+              ? "hidden"
+              : "hidden @md:block",
+        )}
+      >
+        <div className="relative">
+          <div
+            className={cn(
+              "bg-card relative w-full overflow-clip overflow-y-auto rounded-lg border",
+              "touch-pan-x",
+              maxHeight && "max-h-[--max-height]",
+            )}
+            style={
+              maxHeight
+                ? ({ "--max-height": maxHeight } as React.CSSProperties)
+                : undefined
+            }
+          >
+            <Table>
+              {columns.length > 0 && (
+                <colgroup>
+                  {columns.map((col) => (
+                    <col
+                      key={String(col.key)}
+                      style={col.width ? { width: col.width } : undefined}
+                    />
+                  ))}
+                </colgroup>
+              )}
+              {data.length === 0 ? (
+                <DataTableEmpty message={emptyMessage} />
+              ) : (
+                <DataTableContent />
+              )}
+            </Table>
+          </div>
+        </div>
+      </div>
+
+      <div
+        className={cn(
+          layout === "cards"
+            ? ""
+            : layout === "table"
+              ? "hidden"
+              : "@md:hidden",
+        )}
+        role="list"
+        aria-label="Data table (mobile card view)"
+        aria-describedby={mobileDescriptionId}
+      >
+        <div id={mobileDescriptionId} className="sr-only">
+          Table data shown as expandable cards. Each card represents one row.
+          {columns.length > 0 &&
+            ` Columns: ${columns.map((c) => c.label).join(", ")}.`}
+        </div>
+
+        {data.length === 0 ? (
+          <div className="text-muted-foreground py-8 text-center">
+            {emptyMessage}
+          </div>
+        ) : (
+          <div className="bg-card flex flex-col overflow-hidden rounded-2xl border shadow-xs">
+            {data.map((row, i) => {
+              const rowKey = rowKeys[i];
+              return (
+                <DataTableAccordionCard
+                  key={rowKey}
+                  row={row as unknown as DataTableRowData}
+                  index={i}
+                  rowKey={rowKey}
+                  isFirst={i === 0}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {sortAnnouncement && (
+        <div className="sr-only" aria-live="polite">
+          {sortAnnouncement}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DataTableBase<T extends object = RowData>(
+  props: DataTableBaseProps<T>,
+) {
+  const {
+    columns,
+    data,
+    rowIdKey,
+    defaultSort,
+    sort,
+    onSortChange,
+    id,
+    locale,
+    layout,
+    emptyMessage = "No data available",
+    maxHeight,
+    className,
+  } = props;
+
+  return (
+    <DataTableProvider
+      columns={columns}
+      data={data}
+      rowIdKey={rowIdKey}
+      defaultSort={defaultSort}
+      sort={sort}
+      onSortChange={onSortChange}
+      id={id}
+      locale={locale}
+    >
+      <DataTableLayout
+        layout={layout}
+        emptyMessage={emptyMessage}
+        maxHeight={maxHeight}
+        className={className}
+      />
+    </DataTableProvider>
+  );
+}
+
+function DataTableRoot<T extends object = RowData>(props: DataTableProps<T>) {
+  return <DataTableBase {...props} layout="auto" />;
+}
+
+function DataTableTable<T extends object = RowData>(props: DataTableProps<T>) {
+  return <DataTableBase {...props} layout="table" />;
+}
+
+function DataTableCards<T extends object = RowData>(props: DataTableProps<T>) {
+  return <DataTableBase {...props} layout="cards" />;
+}
+
+type DataTableComponent = {
+  <T extends object = RowData>(props: DataTableProps<T>): React.ReactElement;
+  Table: typeof DataTableTable;
+  Cards: typeof DataTableCards;
+  Provider: typeof DataTableProvider;
+};
+
+export const DataTable = Object.assign(DataTableRoot, {
+  Table: DataTableTable,
+  Cards: DataTableCards,
+  Provider: DataTableProvider,
+}) as DataTableComponent;
+
+function DataTableContent() {
+  return (
+    <>
+      <DataTableHeader />
+      <DataTableBody />
+    </>
+  );
+}
+
+function DataTableEmpty({ message }: { message: string }) {
+  const { columns } = useDataTable();
+
+  return (
+    <TableBody>
+      <TableRow className="bg-card h-24 text-center">
+        <TableCell colSpan={columns.length} role="status" aria-live="polite">
+          {message}
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  );
+}
+
+function SortIcon({ state }: { state?: "asc" | "desc" }) {
+  let char = "⇅";
+  let className = "opacity-20";
+
+  if (state === "asc") {
+    char = "↑";
+    className = "";
+  }
+
+  if (state === "desc") {
+    char = "↓";
+    className = "";
+  }
+
+  return (
+    <span aria-hidden className={cn("min-w-4 shrink-0 text-center", className)}>
+      {char}
+    </span>
+  );
+}
+
+function DataTableHeader() {
+  const { columns } = useDataTable();
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <TableHeader>
+        <TableRow className="hover:bg-transparent">
+          {columns.map((column, columnIndex) => (
+            <DataTableHead
+              key={column.key}
+              column={column}
+              columnIndex={columnIndex}
+              totalColumns={columns.length}
+            />
+          ))}
+        </TableRow>
+      </TableHeader>
+    </TooltipProvider>
+  );
+}
+
+interface DataTableHeadProps {
+  column: Column;
+  columnIndex?: number;
+  totalColumns?: number;
+}
+
+function DataTableHead({
+  column,
+  columnIndex = 0,
+  totalColumns = 1,
+}: DataTableHeadProps) {
+  const { sortBy, sortDirection, toggleSort } = useDataTable();
+  const isFirstColumn = columnIndex === 0;
+  const isLastColumn = columnIndex === totalColumns - 1;
+
+  const isSortable = column.sortable !== false;
+
+  const isSorted = sortBy === column.key;
+  const direction = isSorted ? sortDirection : undefined;
+  const isDisabled = !isSortable;
+
+  const handleClick = () => {
+    if (!isDisabled && toggleSort) {
+      toggleSort(column.key);
+    }
+  };
+
+  const displayText = column.abbr || column.label;
+  const shouldShowTooltip = column.abbr || displayText.length > 15;
+  const isNumericKind = isNumericFormat(column.format);
+  const align =
+    column.align ??
+    (columnIndex === 0 ? "left" : isNumericKind ? "right" : "left");
+  const alignClass = getAlignmentClass(align);
+  const buttonAlignClass = cn(
+    "min-w-0 gap-1 font-normal",
+    align === "right" && "text-right",
+    align === "center" && "text-center",
+    align === "left" && "text-left",
+  );
+  const labelAlignClass =
+    align === "right"
+      ? "text-right"
+      : align === "center"
+        ? "text-center"
+        : "text-left";
+
+  return (
+    <TableHead
+      scope="col"
+      className={cn(
+        alignClass,
+        isFirstColumn && "pl-1",
+        isLastColumn && "pr-1",
+      )}
+      style={column.width ? { width: column.width } : undefined}
+      aria-sort={
+        isSorted
+          ? direction === "asc"
+            ? "ascending"
+            : "descending"
+          : undefined
+      }
+    >
+      <Button
+        type="button"
+        size="sm"
+        onClick={handleClick}
+        onKeyDown={(e) => {
+          if (isDisabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+          }
+        }}
+        disabled={isDisabled}
+        variant="ghost"
+        className={cn(
+          buttonAlignClass,
+          "w-fit min-w-10",
+          isFirstColumn && "pl-4",
+          isLastColumn && "pr-4",
+        )}
+        aria-label={
+          `Sort by ${column.label}` +
+          (isSorted && direction
+            ? ` (${direction === "asc" ? "ascending" : "descending"})`
+            : "")
+        }
+        aria-disabled={isDisabled || undefined}
+      >
+        {shouldShowTooltip ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className={cn("truncate", labelAlignClass)}>
+                {column.abbr ? (
+                  <abbr
+                    title={column.label}
+                    className={cn(
+                      "cursor-help border-b border-dotted border-current no-underline",
+                      labelAlignClass,
+                    )}
+                  >
+                    {column.abbr}
+                  </abbr>
+                ) : (
+                  <span className={labelAlignClass}>{column.label}</span>
+                )}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{column.label}</p>
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span className={cn("truncate", labelAlignClass)}>
+            {column.label}
+          </span>
+        )}
+        {isSortable && <SortIcon state={direction} />}
+      </Button>
+    </TableHead>
+  );
+}
+
+function DataTableBody() {
+  const { data, rowIdKey } = useDataTable<DataTableRowData>();
+  const rowKeys = React.useMemo(
+    () =>
+      createDataTableRowKeys(
+        data as Array<Record<string, unknown>>,
+        rowIdKey ? String(rowIdKey) : undefined,
+      ),
+    [data, rowIdKey],
+  );
+  const hasWarnedRowKeyRef = React.useRef(false);
+
+  React.useEffect(() => {
+    if (hasWarnedRowKeyRef.current) return;
+    if (process.env.NODE_ENV !== "production" && !rowIdKey && data.length > 0) {
+      hasWarnedRowKeyRef.current = true;
+      console.warn(
+        "[DataTable] Missing `rowIdKey` prop. Falling back to inferred/content-derived row keys. " +
+          "Strongly recommended: Pass a `rowIdKey` prop that points to a unique identifier in your row data (e.g., 'id', 'uuid', 'symbol').\n" +
+          'Example: <DataTable rowIdKey="id" columns={...} data={...} />',
+      );
+    }
+  }, [rowIdKey, data.length]);
+
+  return (
+    <TableBody>
+      {data.map((row, index) => {
+        const rowKey = rowKeys[index];
+        return <DataTableRow key={rowKey} row={row} />;
+      })}
+    </TableBody>
+  );
+}
+
+interface DataTableRowProps {
+  row: DataTableRowData;
+  className?: string;
+}
+
+function DataTableRow({ row, className }: DataTableRowProps) {
+  const { columns } = useDataTable();
+
+  return (
+    <TableRow className={className}>
+      {columns.map((column, columnIndex) => (
+        <DataTableCell
+          key={column.key}
+          value={row[column.key]}
+          column={column}
+          row={row}
+          columnIndex={columnIndex}
+        />
+      ))}
+    </TableRow>
+  );
+}
+
+interface DataTableCellProps {
+  value:
+    | string
+    | number
+    | boolean
+    | null
+    | (string | number | boolean | null)[];
+  column: Column;
+  row: DataTableRowData;
+  className?: string;
+  columnIndex?: number;
+}
+
+function DataTableCell({
+  value,
+  column,
+  row,
+  className,
+  columnIndex = 0,
+}: DataTableCellProps) {
+  const { locale } = useDataTable();
+  const isNumericKind = isNumericFormat(column.format);
+  const isNumericValue = typeof value === "number";
+  const displayValue = renderFormattedValue({ value, column, row, locale });
+  const align =
+    column.align ??
+    (columnIndex === 0
+      ? "left"
+      : isNumericKind || isNumericValue
+        ? "right"
+        : "left");
+  const alignClass = getAlignmentClass(align);
+
+  return (
+    <TableCell className={cn("px-5 py-3", alignClass, className)}>
+      {displayValue}
+    </TableCell>
+  );
+}
+
+function categorizeColumns(columns: Column[]) {
+  const primary: Column[] = [];
+  const secondary: Column[] = [];
+
+  let visibleColumnCount = 0;
+  columns.forEach((col) => {
+    if (col.hideOnMobile) return;
+
+    if (col.priority === "primary") {
+      primary.push(col);
+    } else if (col.priority === "secondary") {
+      secondary.push(col);
+    } else if (col.priority === "tertiary") {
+      return;
+    } else {
+      if (visibleColumnCount < 2) {
+        primary.push(col);
+      } else {
+        secondary.push(col);
+      }
+      visibleColumnCount++;
+    }
+  });
+
+  return { primary, secondary };
+}
+
+interface DataTableAccordionCardProps {
+  row: DataTableRowData;
+  index: number;
+  rowKey: string;
+  isFirst?: boolean;
+}
+
+function getDataTableRowDomId(rowKey: string): string {
+  return encodeURIComponent(rowKey).replace(/%/g, "_");
+}
+
+function DataTableAccordionCard({
+  row,
+  index,
+  rowKey,
+  isFirst = false,
+}: DataTableAccordionCardProps) {
+  const { columns, locale } = useDataTable();
+
+  const { primary, secondary } = React.useMemo(
+    () => categorizeColumns(columns),
+    [columns],
+  );
+
+  if (secondary.length === 0) {
+    return (
+      <SimpleCard
+        row={row}
+        columns={primary}
+        index={index}
+        rowKey={rowKey}
+        isFirst={isFirst}
+      />
+    );
+  }
+
+  const primaryColumn = primary[0];
+  const remainingPrimaryColumns = primary.slice(1);
+
+  const stableRowId = getDataTableRowDomId(rowKey);
+
+  const headingId = `row-${stableRowId}-heading`;
+  const detailsId = `row-${stableRowId}-details`;
+  const remainingPrimaryDataIds = remainingPrimaryColumns.map(
+    (col) => `row-${stableRowId}-${String(col.key)}`,
+  );
+
+  const primaryValue = primaryColumn
+    ? String(row[primaryColumn.key] ?? "")
+    : "";
+  const rowLabel = `Row ${index + 1}: ${primaryValue}`;
+  const accordionItemId = `row-${stableRowId}`;
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className={cn(!isFirst && "border-t")}
+      role="listitem"
+      aria-label={rowLabel}
+    >
+      <AccordionItem value={accordionItemId} className="group border-0">
+        <AccordionTrigger
+          className="group-data-[state=closed]:hover:bg-accent/50 active:bg-accent/50 group-data-[state=open]:bg-muted w-full rounded-none px-4 py-3 hover:no-underline"
+          aria-controls={detailsId}
+          aria-label={`${rowLabel}. ${secondary.length > 0 ? "Expand for details" : ""}`}
+        >
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            {primaryColumn && (
+              <div
+                id={headingId}
+                role="heading"
+                aria-level={3}
+                className="truncate"
+                aria-label={`${primaryColumn.label}: ${row[primaryColumn.key]}`}
+              >
+                {renderFormattedValue({
+                  value: row[primaryColumn.key],
+                  column: primaryColumn,
+                  row,
+                  locale,
+                })}
+              </div>
+            )}
+
+            {remainingPrimaryColumns.length > 0 && (
+              <div
+                className="text-muted-foreground flex w-full flex-wrap gap-x-4 gap-y-0.5"
+                role="group"
+                aria-label="Summary information"
+              >
+                {remainingPrimaryColumns.map((col, idx) => (
+                  <span
+                    key={col.key}
+                    id={remainingPrimaryDataIds[idx]}
+                    className="flex min-w-0 gap-1 font-normal"
+                    role="cell"
+                    aria-label={`${col.label}: ${row[col.key]}`}
+                  >
+                    <span className="sr-only">{col.label}:</span>
+                    <span aria-hidden="true">{col.label}:</span>
+                    <span className="truncate">
+                      {renderFormattedValue({
+                        value: row[col.key],
+                        column: col,
+                        row,
+                        locale,
+                      })}
+                    </span>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </AccordionTrigger>
+
+        <AccordionContent
+          className={"flex flex-col gap-4 px-4 pb-4"}
+          id={detailsId}
+          role="region"
+          aria-labelledby={headingId}
+        >
+          {secondary.length > 0 && (
+            <dl
+              className={cn(
+                "flex flex-col gap-2 pt-4",
+                "motion-safe:group-data-[state=open]:animate-in motion-safe:group-data-[state=open]:fade-in-0",
+                "motion-safe:group-data-[state=open]:slide-in-from-top-1",
+                "motion-safe:group-data-[state=closed]:animate-out motion-safe:group-data-[state=closed]:fade-out-0",
+                "motion-safe:group-data-[state=closed]:slide-out-to-top-1",
+                "duration-150",
+              )}
+              role="list"
+              aria-label="Additional data"
+            >
+              {secondary.map((col) => (
+                <div
+                  key={col.key}
+                  className="flex items-start justify-between gap-4"
+                  role="listitem"
+                >
+                  <dt
+                    className="text-muted-foreground shrink-0"
+                    id={`row-${stableRowId}-${String(col.key)}-label`}
+                  >
+                    {col.label}
+                  </dt>
+                  <dd
+                    className={cn(
+                      "text-foreground min-w-0 text-pretty wrap-break-word",
+                      col.align === "right" && "text-right",
+                      col.align === "center" && "text-center",
+                    )}
+                    role="cell"
+                    aria-labelledby={`row-${stableRowId}-${String(col.key)}-label`}
+                  >
+                    {renderFormattedValue({
+                      value: row[col.key],
+                      column: col,
+                      row,
+                      locale,
+                    })}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+/**
+ * Simple card with no accordion,   for when there are only primary columns
+ */
+function SimpleCard({
+  row,
+  columns,
+  index,
+  rowKey,
+  isFirst = false,
+}: {
+  row: DataTableRowData;
+  columns: Column[];
+  index: number;
+  rowKey: string;
+  isFirst?: boolean;
+}) {
+  const { locale } = useDataTable();
+  const primaryColumn = columns[0];
+  const otherColumns = columns.slice(1);
+
+  const stableRowId = getDataTableRowDomId(rowKey);
+
+  const primaryValue = primaryColumn
+    ? String(row[primaryColumn.key] ?? "")
+    : "";
+  const rowLabel = `Row ${index + 1}: ${primaryValue}`;
+
+  return (
+    <div
+      className={cn("flex flex-col gap-2 p-4", !isFirst && "border-t")}
+      role="listitem"
+      aria-label={rowLabel}
+    >
+      {primaryColumn && (
+        <div
+          role="heading"
+          aria-level={3}
+          aria-label={`${primaryColumn.label}: ${row[primaryColumn.key]}`}
+        >
+          {renderFormattedValue({
+            value: row[primaryColumn.key],
+            column: primaryColumn,
+            row,
+            locale,
+          })}
+        </div>
+      )}
+
+      {otherColumns.map((col) => (
+        <div
+          key={col.key}
+          className="flex items-start justify-between gap-4"
+          role="group"
+        >
+          <span
+            className="text-muted-foreground"
+            id={`row-${stableRowId}-${String(col.key)}-label`}
+          >
+            {col.label}:
+          </span>
+          <span
+            className={cn(
+              "min-w-0 wrap-break-word",
+              col.align === "right" && "text-right",
+              col.align === "center" && "text-center",
+            )}
+            role="cell"
+            aria-labelledby={`row-${stableRowId}-${String(col.key)}-label`}
+          >
+            {renderFormattedValue({
+              value: row[col.key],
+              column: col,
+              row,
+              locale,
+            })}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/data-table/formatters.tsx b/frontend/src/toolui/components/data-table/formatters.tsx
new file mode 100644
index 00000000..52ef70c2
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/formatters.tsx
@@ -0,0 +1,473 @@
+"use client";
+
+import * as React from "react";
+import { cn, Badge, Tooltip, TooltipContent, TooltipTrigger } from "./_adapter";
+import { resolveSafeNavigationHref } from "../shared/media";
+
+type Tone = "success" | "warning" | "danger" | "info" | "neutral";
+
+export type FormatConfig =
+  | { kind: "text" }
+  | {
+      kind: "number";
+      decimals?: number;
+      unit?: string;
+      compact?: boolean;
+      showSign?: boolean;
+    }
+  | { kind: "currency"; currency: string; decimals?: number }
+  | {
+      kind: "percent";
+      decimals?: number;
+      showSign?: boolean;
+      basis?: "fraction" | "unit";
+    }
+  | { kind: "date"; dateFormat?: "short" | "long" | "relative" }
+  | {
+      kind: "delta";
+      decimals?: number;
+      upIsPositive?: boolean;
+      showSign?: boolean;
+    }
+  | {
+      kind: "status";
+      statusMap: Record<string, { tone: Tone; label?: string }>;
+    }
+  | { kind: "boolean"; labels?: { true: string; false: string } }
+  | { kind: "link"; hrefKey?: string; external?: boolean }
+  | { kind: "badge"; colorMap?: Record<string, Tone> }
+  | { kind: "array"; maxVisible?: number };
+
+interface DeltaValueProps {
+  value: number;
+  options?: Extract<FormatConfig, { kind: "delta" }>;
+  locale?: string;
+}
+
+export function DeltaValue({ value, options, locale }: DeltaValueProps) {
+  const decimals = options?.decimals ?? 2;
+  const upIsPositive = options?.upIsPositive ?? true;
+  const showSign = options?.showSign ?? true;
+
+  const isPositive = value > 0;
+  const isNegative = value < 0;
+  const isNeutral = value === 0;
+
+  const isGood = upIsPositive ? isPositive : isNegative;
+  const isBad = upIsPositive ? isNegative : isPositive;
+
+  const colorClass = isGood
+    ? "text-green-700 dark:text-green-500"
+    : isBad
+      ? "text-destructive"
+      : "text-muted-foreground";
+
+  const absValue = Math.abs(value);
+  const formatted = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(absValue);
+
+  const display =
+    showSign && !isNeutral
+      ? isNegative
+        ? `-${formatted}`
+        : `+${formatted}`
+      : formatted;
+
+  const arrow = isPositive ? "↑" : isNegative ? "↓" : "";
+
+  return (
+    <span className={cn("tabular-nums", colorClass)}>
+      {display}
+      {!isNeutral && <span className="ml-0.5">{arrow}</span>}
+    </span>
+  );
+}
+
+interface StatusBadgeProps {
+  value: string;
+  options?: Extract<FormatConfig, { kind: "status" }>;
+}
+
+export function StatusBadge({ value, options }: StatusBadgeProps) {
+  const config = options?.statusMap?.[value] ?? {
+    tone: "neutral" as Tone,
+    label: value,
+  };
+  const label = config.label ?? value;
+
+  const variant =
+    config.tone === "danger"
+      ? "destructive"
+      : config.tone === "neutral"
+        ? "outline"
+        : "secondary";
+
+  return (
+    <Badge
+      variant={variant}
+      className={cn(
+        "border",
+        config.tone === "warning" &&
+          "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-100",
+        config.tone === "success" &&
+          "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-100",
+        config.tone === "info" &&
+          "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-100",
+        config.tone === "danger" &&
+          "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-100",
+      )}
+    >
+      {label}
+    </Badge>
+  );
+}
+
+interface CurrencyValueProps {
+  value: number;
+  options?: Extract<FormatConfig, { kind: "currency" }>;
+  locale?: string;
+}
+
+export function CurrencyValue({ value, options, locale }: CurrencyValueProps) {
+  const currency = options?.currency ?? "USD";
+  const decimals = options?.decimals ?? 2;
+
+  const formatted = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(value);
+
+  return <span className="tabular-nums">{formatted}</span>;
+}
+
+interface PercentValueProps {
+  value: number;
+  options?: Extract<FormatConfig, { kind: "percent" }>;
+  locale?: string;
+}
+
+export function PercentValue({ value, options, locale }: PercentValueProps) {
+  const decimals = options?.decimals ?? 2;
+  const showSign = options?.showSign ?? false;
+  const basis = options?.basis ?? "fraction";
+
+  const numeric = basis === "fraction" ? value : value / 100;
+
+  const formatted = new Intl.NumberFormat(locale, {
+    style: "percent",
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+    signDisplay: showSign ? "always" : "auto",
+  }).format(numeric);
+
+  return <span className="tabular-nums">{formatted}</span>;
+}
+
+interface DateValueProps {
+  value: string;
+  options?: Extract<FormatConfig, { kind: "date" }>;
+  locale?: string;
+}
+
+export function DateValue({ value, options, locale }: DateValueProps) {
+  const dateFormat = options?.dateFormat ?? "short";
+  const date = new Date(value);
+
+  if (isNaN(date.getTime())) {
+    return <span className="text-muted-foreground">{value}</span>;
+  }
+
+  let formatted: string;
+
+  if (dateFormat === "relative") {
+    formatted = getRelativeTime(date, locale);
+  } else if (dateFormat === "long") {
+    formatted = new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }).format(date);
+  } else {
+    formatted = new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }).format(date);
+  }
+
+  const title = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+
+  return (
+    <span className="tabular-nums" title={title}>
+      {formatted}
+    </span>
+  );
+}
+
+function getRelativeTime(date: Date, locale?: string): string {
+  const now = new Date();
+  const diffInSeconds = Math.trunc((date.getTime() - now.getTime()) / 1000);
+  const absDiffInSeconds = Math.abs(diffInSeconds);
+
+  if (absDiffInSeconds < 60) return "just now";
+
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+
+  if (absDiffInSeconds < 3600) {
+    const mins = Math.trunc(diffInSeconds / 60);
+    return rtf.format(mins, "minute");
+  }
+  if (absDiffInSeconds < 86400) {
+    const hours = Math.trunc(diffInSeconds / 3600);
+    return rtf.format(hours, "hour");
+  }
+  if (absDiffInSeconds < 604800) {
+    const days = Math.trunc(diffInSeconds / 86400);
+    return rtf.format(days, "day");
+  }
+
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(date);
+}
+
+interface BooleanValueProps {
+  value: boolean;
+  options?: Extract<FormatConfig, { kind: "boolean" }>;
+}
+
+export function BooleanValue({ value, options }: BooleanValueProps) {
+  const labels = options?.labels ?? { true: "Yes", false: "No" };
+  const label = value ? labels.true : labels.false;
+  const variant = value ? "secondary" : "outline";
+
+  return <Badge variant={variant}>{label}</Badge>;
+}
+
+interface LinkValueProps {
+  value: string;
+  options?: Extract<FormatConfig, { kind: "link" }>;
+  row?: Record<
+    string,
+    string | number | boolean | null | (string | number | boolean | null)[]
+  >;
+}
+
+export function LinkValue({ value, options, row }: LinkValueProps) {
+  const rawHref =
+    options?.hrefKey && row ? String(row[options.hrefKey] ?? "") : value;
+  const href = resolveSafeNavigationHref(rawHref);
+  const external = options?.external ?? false;
+
+  if (!href) {
+    return <span>{value}</span>;
+  }
+
+  return (
+    <a
+      href={href}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+      className="text-accent-foreground inline-block max-w-full break-words underline underline-offset-2 hover:opacity-90"
+      aria-label={external ? `${value} (opens in a new tab)` : undefined}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {value}
+      {external && (
+        <span className="ml-1 inline-block" aria-label="Opens in new tab">
+          ↗
+        </span>
+      )}
+    </a>
+  );
+}
+
+interface NumberValueProps {
+  value: number;
+  options?: Extract<FormatConfig, { kind: "number" }>;
+  locale?: string;
+}
+
+export function NumberValue({ value, options, locale }: NumberValueProps) {
+  const decimals = options?.decimals ?? 0;
+  const unit = options?.unit ?? "";
+  const compact = options?.compact ?? false;
+  const showSign = options?.showSign ?? false;
+
+  const formatted = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+    notation: compact ? "compact" : "standard",
+  }).format(value);
+
+  const display = showSign && value > 0 ? `+${formatted}` : formatted;
+
+  return (
+    <span className="tabular-nums">
+      {display}
+      {unit}
+    </span>
+  );
+}
+
+interface BadgeValueProps {
+  value: string;
+  options?: Extract<FormatConfig, { kind: "badge" }>;
+}
+
+export function BadgeValue({ value, options }: BadgeValueProps) {
+  const tone = options?.colorMap?.[value] ?? "neutral";
+
+  const variant =
+    tone === "danger"
+      ? "destructive"
+      : tone === "neutral"
+        ? "outline"
+        : "secondary";
+
+  return (
+    <Badge
+      variant={variant}
+      className={cn(
+        "border",
+        tone === "warning" &&
+          "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-100",
+        tone === "success" &&
+          "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-100",
+        tone === "info" &&
+          "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-100",
+        tone === "danger" &&
+          "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-100",
+      )}
+    >
+      {value}
+    </Badge>
+  );
+}
+
+interface ArrayValueProps {
+  value: (string | number | boolean | null)[] | string;
+  options?: Extract<FormatConfig, { kind: "array" }>;
+}
+
+export function ArrayValue({ value, options }: ArrayValueProps) {
+  const maxVisible = options?.maxVisible ?? 3;
+  const items: (string | number | boolean | null)[] = Array.isArray(value)
+    ? value
+    : typeof value === "string"
+      ? value.split(",").map((s) => s.trim())
+      : [];
+
+  if (items.length === 0) {
+    return <span className="text-muted">—</span>;
+  }
+
+  const visible = items.slice(0, maxVisible);
+  const remaining = items.length - maxVisible;
+
+  const hidden = items.slice(maxVisible);
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-1">
+      {visible.map((item, i) => (
+        <span
+          key={i}
+          className="bg-muted text-muted-foreground inline-flex items-center rounded-md px-2 py-0.5"
+        >
+          {item === null ? "null" : String(item)}
+        </span>
+      ))}
+      {remaining > 0 && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="text-muted-foreground cursor-default">
+              +{remaining} more
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            {hidden
+              .map((item) => (item === null ? "null" : String(item)))
+              .join(", ")}
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </span>
+  );
+}
+
+interface RenderFormattedValueParams {
+  value:
+    | string
+    | number
+    | boolean
+    | null
+    | (string | number | boolean | null)[];
+  column: { format?: FormatConfig };
+  row?: Record<
+    string,
+    string | number | boolean | null | (string | number | boolean | null)[]
+  >;
+  locale?: string;
+}
+
+export function renderFormattedValue({
+  value,
+  column,
+  row,
+  locale,
+}: RenderFormattedValueParams): React.ReactNode {
+  if (value == null || value === "") {
+    return <span className="text-muted">—</span>;
+  }
+
+  const fmt = column.format;
+
+  switch (fmt?.kind) {
+    case "delta":
+      return <DeltaValue value={Number(value)} options={fmt} locale={locale} />;
+    case "status":
+      return <StatusBadge value={String(value)} options={fmt} />;
+    case "currency":
+      return (
+        <CurrencyValue value={Number(value)} options={fmt} locale={locale} />
+      );
+    case "percent":
+      return (
+        <PercentValue value={Number(value)} options={fmt} locale={locale} />
+      );
+    case "date":
+      return <DateValue value={String(value)} options={fmt} locale={locale} />;
+    case "boolean":
+      return <BooleanValue value={Boolean(value)} options={fmt} />;
+    case "link":
+      return <LinkValue value={String(value)} options={fmt} row={row} />;
+    case "number":
+      return (
+        <NumberValue value={Number(value)} options={fmt} locale={locale} />
+      );
+    case "badge":
+      return <BadgeValue value={String(value)} options={fmt} />;
+    case "array":
+      return (
+        <ArrayValue
+          value={Array.isArray(value) ? value : String(value)}
+          options={fmt}
+        />
+      );
+    case "text":
+    default:
+      return String(value);
+  }
+}
diff --git a/frontend/src/toolui/components/data-table/index.tsx b/frontend/src/toolui/components/data-table/index.tsx
new file mode 100644
index 00000000..3716272a
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/index.tsx
@@ -0,0 +1,29 @@
+export { DataTable, useDataTable } from "./data-table";
+
+export { renderFormattedValue } from "./formatters";
+export {
+  NumberValue,
+  CurrencyValue,
+  PercentValue,
+  DeltaValue,
+  DateValue,
+  BooleanValue,
+  LinkValue,
+  BadgeValue,
+  StatusBadge,
+  ArrayValue,
+} from "./formatters";
+
+export type {
+  Column,
+  DataTableProps,
+  DataTableSerializableProps,
+  DataTableClientProps,
+  DataTableRowData,
+  RowPrimitive,
+  RowData,
+  ColumnKey,
+} from "./types";
+export type { FormatConfig } from "./formatters";
+
+export { sortData, parseNumericLike } from "./utilities";
diff --git a/frontend/src/toolui/components/data-table/schema.ts b/frontend/src/toolui/components/data-table/schema.ts
new file mode 100644
index 00000000..e64df356
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/schema.ts
@@ -0,0 +1,345 @@
+import { z } from "zod";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+import { defineToolUiContract } from "../shared/contract";
+import type { Column, DataTableProps, RowData } from "./types";
+
+const AlignEnum = z.enum(["left", "right", "center"]);
+const PriorityEnum = z.enum(["primary", "secondary", "tertiary"]);
+
+const formatSchema = z.discriminatedUnion("kind", [
+  z.object({ kind: z.literal("text") }),
+  z.object({
+    kind: z.literal("number"),
+    decimals: z.number().optional(),
+    unit: z.string().optional(),
+    compact: z.boolean().optional(),
+    showSign: z.boolean().optional(),
+  }),
+  z.object({
+    kind: z.literal("currency"),
+    currency: z.string(),
+    decimals: z.number().optional(),
+  }),
+  z.object({
+    kind: z.literal("percent"),
+    decimals: z.number().optional(),
+    showSign: z.boolean().optional(),
+    basis: z.enum(["fraction", "unit"]).optional(),
+  }),
+  z.object({
+    kind: z.literal("date"),
+    dateFormat: z.enum(["short", "long", "relative"]).optional(),
+  }),
+  z.object({
+    kind: z.literal("delta"),
+    decimals: z.number().optional(),
+    upIsPositive: z.boolean().optional(),
+    showSign: z.boolean().optional(),
+  }),
+  z.object({
+    kind: z.literal("status"),
+    statusMap: z.record(
+      z.string(),
+      z.object({
+        tone: z.enum(["success", "warning", "danger", "info", "neutral"]),
+        label: z.string().optional(),
+      }),
+    ),
+  }),
+  z.object({
+    kind: z.literal("boolean"),
+    labels: z
+      .object({
+        true: z.string(),
+        false: z.string(),
+      })
+      .optional(),
+  }),
+  z.object({
+    kind: z.literal("link"),
+    hrefKey: z.string().optional(),
+    external: z.boolean().optional(),
+  }),
+  z.object({
+    kind: z.literal("badge"),
+    colorMap: z
+      .record(
+        z.string(),
+        z.enum(["success", "warning", "danger", "info", "neutral"]),
+      )
+      .optional(),
+  }),
+  z.object({
+    kind: z.literal("array"),
+    maxVisible: z.number().optional(),
+  }),
+]);
+
+export const serializableColumnSchema = z.object({
+  key: z.string(),
+  label: z.string(),
+  abbr: z.string().optional(),
+  sortable: z.boolean().optional(),
+  align: AlignEnum.optional(),
+  width: z.string().optional(),
+  truncate: z.boolean().optional(),
+  priority: PriorityEnum.optional(),
+  hideOnMobile: z.boolean().optional(),
+  format: formatSchema.optional(),
+});
+
+const JsonPrimitiveSchema = z.union([
+  z.string(),
+  z.number(),
+  z.boolean(),
+  z.null(),
+]);
+
+/**
+ * Schema for serializable row data.
+ *
+ * Supports:
+ * - Primitives: string, number, boolean, null
+ * - Arrays of primitives: string[], number[], boolean[], or mixed primitive arrays
+ *
+ * Does NOT support:
+ * - Functions
+ * - Class instances (Date, Map, Set, etc.)
+ * - Plain objects (use format configs instead)
+ *
+ * @example
+ * Valid row data:
+ * ```json
+ * {
+ *   "name": "Widget",
+ *   "price": 29.99,
+ *   "active": true,
+ *   "tags": ["electronics", "featured"],
+ *   "metrics": [1.2, 3.4, 5.6],
+ *   "flags": [true, false, true],
+ *   "mixed": ["label", 42, true]
+ * }
+ * ```
+ */
+export const serializableDataSchema = z.record(
+  z.string(),
+  z.union([JsonPrimitiveSchema, z.array(JsonPrimitiveSchema)]),
+);
+
+/**
+ * Zod schema for validating DataTable payloads from LLM tool calls.
+ *
+ * This schema validates the serializable parts of a DataTable:
+ * - id: Unique identifier for this tool UI in the conversation
+ * - columns: Column definitions (keys, labels, formatting, etc.)
+ * - data: Data rows (primitives only - no functions or class instances)
+ * - optional presentation props: rowIdKey, sort/defaultSort, locale, etc.
+ *
+ * Non-serializable props like `onSortChange`, `className`, and sibling action surfaces
+ * must be provided separately in your React component.
+ *
+ * @example
+ * ```ts
+ * const result = SerializableDataTableSchema.safeParse(llmResponse)
+ * if (result.success) {
+ *   // result.data contains validated id, columns, and data
+ * }
+ * ```
+ */
+export const SerializableDataTableSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  columns: z.array(serializableColumnSchema),
+  data: z.array(serializableDataSchema),
+  rowIdKey: z.string().optional(),
+  defaultSort: z
+    .object({
+      by: z.string().optional(),
+      direction: z.enum(["asc", "desc"]).optional(),
+    })
+    .optional(),
+  sort: z
+    .object({
+      by: z.string().optional(),
+      direction: z.enum(["asc", "desc"]).optional(),
+    })
+    .optional(),
+  emptyMessage: z.string().optional(),
+  maxHeight: z.string().optional(),
+  locale: z.string().optional(),
+});
+
+const SerializableDataTableSchemaContract = defineToolUiContract(
+  "DataTable",
+  SerializableDataTableSchema,
+);
+
+/**
+ * Type representing the serializable parts of a DataTable payload.
+ *
+ * This type includes only JSON-serializable data that can come from LLM tool calls:
+ * - Column definitions (format configs, alignment, labels, etc.)
+ * - Row data (primitives: strings, numbers, booleans, null, string arrays)
+ *
+ * Excluded from this type:
+ * - Event handlers (`onSortChange`)
+ * - React-specific props (`className`)
+ *
+ * @example
+ * ```ts
+ * const payload: SerializableDataTable = {
+ *   id: "data-table-expenses",
+ *   columns: [
+ *     { key: "name", label: "Name" },
+ *     { key: "price", label: "Price", format: { kind: "currency", currency: "USD" } }
+ *   ],
+ *   data: [
+ *     { name: "Widget", price: 29.99 }
+ *   ]
+ * }
+ * ```
+ */
+export type SerializableDataTable = z.infer<typeof SerializableDataTableSchema>;
+
+/**
+ * Validates and parses a DataTable payload from unknown data (e.g., LLM tool call result).
+ *
+ * This function:
+ * 1. Validates the input against the `SerializableDataTableSchema`
+ * 2. Throws a descriptive error if validation fails
+ * 3. Returns typed serializable props ready to pass to the `<DataTable>` component
+ *
+ * The returned props are **serializable only** - you must provide client-side props
+ * separately (onSortChange, className).
+ *
+ * @param input - Unknown data to validate (typically from an LLM tool call)
+ * @returns Validated and typed DataTable serializable props (id, columns, data)
+ * @throws Error with validation details if input is invalid
+ *
+ * @example
+ * ```tsx
+ * function MyToolUI({ result }: { result: unknown }) {
+ *   const serializableProps = parseSerializableDataTable(result)
+ *
+ *   return (
+ *     <DataTable
+ *       {...serializableProps}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export function parseSerializableDataTable(
+  input: unknown,
+): Pick<
+  DataTableProps<RowData>,
+  | "id"
+  | "role"
+  | "receipt"
+  | "columns"
+  | "data"
+  | "rowIdKey"
+  | "defaultSort"
+  | "sort"
+  | "emptyMessage"
+  | "maxHeight"
+  | "locale"
+> {
+  const {
+    id,
+    role,
+    receipt,
+    columns,
+    data,
+    rowIdKey,
+    defaultSort,
+    sort,
+    emptyMessage,
+    maxHeight,
+    locale,
+  } = SerializableDataTableSchemaContract.parse(input);
+  return {
+    id,
+    role,
+    receipt,
+    columns: columns as unknown as Column<RowData>[],
+    data: data as RowData[],
+    rowIdKey: rowIdKey as keyof RowData | undefined,
+    defaultSort: defaultSort
+      ? {
+          by: defaultSort.by as keyof RowData | undefined,
+          direction: defaultSort.direction,
+        }
+      : undefined,
+    sort: sort
+      ? {
+          by: sort.by as keyof RowData | undefined,
+          direction: sort.direction,
+        }
+      : undefined,
+    emptyMessage,
+    maxHeight,
+    locale,
+  };
+}
+
+export function safeParseSerializableDataTable(
+  input: unknown,
+): Pick<
+  DataTableProps<RowData>,
+  | "id"
+  | "role"
+  | "receipt"
+  | "columns"
+  | "data"
+  | "rowIdKey"
+  | "defaultSort"
+  | "sort"
+  | "emptyMessage"
+  | "maxHeight"
+  | "locale"
+> | null {
+  const res = SerializableDataTableSchemaContract.safeParse(input);
+  if (!res) return null;
+  const {
+    id,
+    role,
+    receipt,
+    columns,
+    data,
+    rowIdKey,
+    defaultSort,
+    sort,
+    emptyMessage,
+    maxHeight,
+    locale,
+  } = res;
+  return {
+    id,
+    role,
+    receipt,
+    columns: columns as unknown as Column<RowData>[],
+    data: data as RowData[],
+    rowIdKey: rowIdKey as keyof RowData | undefined,
+    defaultSort: defaultSort
+      ? {
+          by: defaultSort.by as keyof RowData | undefined,
+          direction: defaultSort.direction,
+        }
+      : undefined,
+    sort: sort
+      ? {
+          by: sort.by as keyof RowData | undefined,
+          direction: sort.direction,
+        }
+      : undefined,
+    emptyMessage,
+    maxHeight,
+    locale,
+  };
+}
diff --git a/frontend/src/toolui/components/data-table/types.ts b/frontend/src/toolui/components/data-table/types.ts
new file mode 100644
index 00000000..e8902803
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/types.ts
@@ -0,0 +1,262 @@
+import type { ToolUIId, ToolUIReceipt, ToolUIRole } from "../shared/schema";
+import type { FormatConfig } from "./formatters";
+
+/**
+ * JSON primitive type that can be serialized.
+ */
+type JsonPrimitive = string | number | boolean | null;
+
+/**
+ * Valid row value types for serializable DataTable data.
+ *
+ * Supports:
+ * - Primitives: string, number, boolean, null
+ * - Arrays of primitives: string[], number[], boolean[], or mixed primitive arrays
+ *
+ * For complex data (objects with href/label, etc.), use column format configs
+ * instead of putting objects in row data.
+ *
+ * @example
+ * ```ts
+ * // 👍 Good: Use primitives and primitive arrays
+ * const row = {
+ *   name: "Widget",
+ *   price: 29.99,
+ *   tags: ["electronics", "featured"],
+ *   metrics: [1.2, 3.4, 5.6]
+ * }
+ *
+ * // 🚫 Bad: Don't put objects in row data
+ * const row = {
+ *   link: { href: "/path", label: "Click" }  // Use format: { kind: 'link' } instead
+ * }
+ * ```
+ */
+export type RowPrimitive = JsonPrimitive | JsonPrimitive[];
+export type DataTableRowData = Record<string, RowPrimitive>;
+export type RowData = Record<string, unknown>;
+export type ColumnKey<T extends object> = Extract<keyof T, string>;
+
+export type FormatFor<V> = V extends number
+  ? Extract<FormatConfig, { kind: "number" | "currency" | "percent" | "delta" }>
+  : V extends boolean
+    ? Extract<FormatConfig, { kind: "boolean" | "status" | "badge" }>
+    : V extends (string | number | boolean | null)[]
+      ? Extract<FormatConfig, { kind: "array" }>
+      : V extends string
+        ? Extract<
+            FormatConfig,
+            { kind: "text" | "link" | "date" | "badge" | "status" }
+          >
+        : Extract<FormatConfig, { kind: "text" }>;
+
+/**
+ * Column definition for DataTable
+ *
+ * @remarks
+ * **Important:** Columns are sortable by default (opt-out pattern).
+ * Set `sortable: false` explicitly to disable sorting for specific columns.
+ */
+export interface Column<
+  T extends object = DataTableRowData,
+  K extends ColumnKey<T> = ColumnKey<T>,
+> {
+  /** Unique identifier that maps to a key in the row data */
+  key: K;
+  /** Display text for the column header */
+  label: string;
+  /** Abbreviated label for narrow viewports */
+  abbr?: string;
+  /** Whether column is sortable. Default: true (opt-out pattern) */
+  sortable?: boolean;
+  /** Text alignment for column cells */
+  align?: "left" | "right" | "center";
+  /** Optional fixed width (CSS value) */
+  width?: string;
+  /** Enable text truncation with ellipsis */
+  truncate?: boolean;
+  /** Mobile display priority (primary = always visible, secondary = expandable, tertiary = hidden) */
+  priority?: "primary" | "secondary" | "tertiary";
+  /** Completely hide column on mobile viewports */
+  hideOnMobile?: boolean;
+  /** Formatting configuration for cell values */
+  format?: FormatFor<T[K]>;
+}
+
+/**
+ * Serializable props that can come from LLM tool calls or be JSON-serialized.
+ *
+ * These props contain only primitive values, arrays, and plain objects -
+ * no functions, class instances, or other non-serializable values.
+ *
+ * @example
+ * ```tsx
+ * const serializableProps: DataTableSerializableProps = {
+ *   columns: [...],
+ *   data: [...],
+ *   rowIdKey: "id",
+ *   defaultSort: { by: "price", direction: "desc" }
+ * }
+ * ```
+ */
+export interface DataTableSerializableProps<T extends object = RowData> {
+  /**
+   * Unique identifier for this tool UI instance in the conversation.
+   *
+   * Used for:
+   * - Assistant referencing ("the table above")
+   * - Receipt generation (linking actions to their source)
+   * - Narration context
+   *
+   * Should be stable across re-renders, meaningful, and unique within the conversation.
+   *
+   * @example "data-table-expenses-q3", "search-results-repos"
+   */
+  id: ToolUIId;
+  /** Optional surface role metadata (serializable) */
+  role?: ToolUIRole;
+  /** Optional receipt metadata for consequential outcomes (serializable) */
+  receipt?: ToolUIReceipt;
+  /** Column definitions */
+  columns: Column<T>[];
+  /** Row data (primitives only - no functions or class instances) */
+  data: T[];
+  /**
+   * Key in row data to use as unique identifier for React keys
+   *
+   * **Strongly recommended:** Always provide this for dynamic data to prevent
+   * reconciliation issues (focus traps, animation glitches, incorrect state preservation)
+   * when data reorders. Falls back to array index if omitted (only acceptable for static mock data).
+   *
+   * @example rowIdKey="id" or rowIdKey="uuid"
+   */
+  rowIdKey?: ColumnKey<T>;
+  /**
+   * Uncontrolled initial sort state (table manages its own sort state internally)
+   *
+   * **Sorting cycle:** Clicking column headers cycles through tri-state:
+   * 1. none (unsorted) → 2. asc → 3. desc → 4. none (back to unsorted)
+   *
+   * @example
+   * ```tsx
+   * // Start with descending price sort
+   * <DataTable defaultSort={{ by: "price", direction: "desc" }} />
+   * ```
+   */
+  defaultSort?: { by?: ColumnKey<T>; direction?: "asc" | "desc" };
+  /**
+   * Controlled sort state (use with onSortChange from client props)
+   *
+   * When provided, you must also provide `onSortChange` to handle sort updates.
+   * The table will cycle through: none → asc → desc → none.
+   *
+   * @example
+   * ```tsx
+   * const [sort, setSort] = useState({ by: "price", direction: "desc" })
+   * <DataTable sort={sort} onSortChange={setSort} />
+   * ```
+   */
+  sort?: { by?: ColumnKey<T>; direction?: "asc" | "desc" };
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Max table height with vertical scroll (CSS value) */
+  maxHeight?: string;
+  /**
+   * BCP47 locale for formatting and sorting (e.g., 'en-US', 'de-DE', 'ja-JP')
+   *
+   * Defaults to 'en-US' to ensure consistent server/client rendering.
+   * Pass explicit locale for internationalization.
+   *
+   * @example
+   * ```tsx
+   * <DataTable locale="de-DE" /> // German formatting
+   * <DataTable locale="ja-JP" /> // Japanese formatting
+   * <DataTable />               // Uses 'en-US' default
+   * ```
+   */
+  locale?: string;
+}
+
+/**
+ * Client-side React-only props that cannot be serialized.
+ *
+ * These props contain functions, component state, or other React-specific values
+ * that must be provided by your React code (not from LLM tool calls).
+ *
+ * @example
+ * ```tsx
+ * const clientProps: DataTableClientProps = {
+ *   className: "my-table",
+ *   onSortChange: (next) => setSort(next),
+ *   // Compose local/decision actions externally via LocalActions/DecisionActions
+ * }
+ * ```
+ */
+export interface DataTableClientProps<T extends object = RowData> {
+  /** Additional CSS classes */
+  className?: string;
+  /**
+   * Sort change handler for controlled mode (required if sort is provided)
+   *
+   * **Tri-state cycle behavior:**
+   * - Click unsorted column: `{ by: "column", direction: "asc" }`
+   * - Click asc column: `{ by: "column", direction: "desc" }`
+   * - Click desc column: `{ by: "column", direction: undefined }` (returns to unsorted)
+   * - Click different column: `{ by: "newColumn", direction: "asc" }`
+   *
+   * @example
+   * ```tsx
+   * const [sort, setSort] = useState<{ by?: string; direction?: "asc" | "desc" }>({})
+   *
+   * <DataTable
+   *   sort={sort}
+   *   onSortChange={(next) => {
+   *     console.log("Sort changed:", next)
+   *     setSort(next)
+   *   }}
+   * />
+   * ```
+   */
+  onSortChange?: (next: {
+    by?: ColumnKey<T>;
+    direction?: "asc" | "desc";
+  }) => void;
+}
+
+/**
+ * Complete props for the DataTable component.
+ *
+ * Combines serializable props (can come from LLM tool calls) with client-side
+ * React-only props. This separation makes the boundary explicit and prevents
+ * accidental serialization of non-serializable values.
+ *
+ * @see {@link DataTableSerializableProps} for props that can be JSON-serialized
+ * @see {@link DataTableClientProps} for React-only props
+ * @see {@link parseSerializableDataTable} for parsing LLM tool call results
+ *
+ * @example
+ * ```tsx
+ * // From LLM tool call
+ * const serializableProps = parseSerializableDataTable(llmResult)
+ *
+ * // Combine with React-specific props
+ * <DataTable
+ *   {...serializableProps}
+ *   onSortChange={setSort}
+ *   // Render sibling LocalActions / DecisionActions where needed
+ * />
+ * ```
+ */
+export interface DataTableProps<T extends object = RowData>
+  extends DataTableSerializableProps<T>, DataTableClientProps<T> {}
+
+export interface DataTableContextValue<T extends object = RowData> {
+  columns: Column<T>[];
+  data: T[];
+  rowIdKey?: ColumnKey<T>;
+  sortBy?: ColumnKey<T>;
+  sortDirection?: "asc" | "desc";
+  toggleSort?: (key: ColumnKey<T>) => void;
+  id?: string;
+  locale?: string;
+}
diff --git a/frontend/src/toolui/components/data-table/utilities.ts b/frontend/src/toolui/components/data-table/utilities.ts
new file mode 100644
index 00000000..6db6827a
--- /dev/null
+++ b/frontend/src/toolui/components/data-table/utilities.ts
@@ -0,0 +1,299 @@
+/**
+ * Sort an array of objects by a key
+ */
+export function sortData<T, K extends Extract<keyof T, string>>(
+  data: T[],
+  key: K,
+  direction: "asc" | "desc",
+  locale?: string,
+): T[] {
+  const get = (obj: T, k: K): unknown => (obj as Record<string, unknown>)[k];
+  const collator = new Intl.Collator(locale, {
+    numeric: true,
+    sensitivity: "base",
+  });
+  return [...data].sort((a, b) => {
+    const aVal = get(a, key);
+    const bVal = get(b, key);
+
+    // Handle nulls
+    if (aVal == null && bVal == null) return 0;
+    if (aVal == null) return 1;
+    if (bVal == null) return -1;
+
+    // Type-specific comparison
+    // Numbers
+    if (typeof aVal === "number" && typeof bVal === "number") {
+      return direction === "asc" ? aVal - bVal : bVal - aVal;
+    }
+    // Dates (Date instances)
+    if (aVal instanceof Date && bVal instanceof Date) {
+      const diff = aVal.getTime() - bVal.getTime();
+      return direction === "asc" ? diff : -diff;
+    }
+    // Booleans: false < true
+    if (typeof aVal === "boolean" && typeof bVal === "boolean") {
+      const diff = aVal === bVal ? 0 : aVal ? 1 : -1;
+      return direction === "asc" ? diff : -diff;
+    }
+    // Arrays: compare length
+    if (Array.isArray(aVal) && Array.isArray(bVal)) {
+      const diff = aVal.length - bVal.length;
+      return direction === "asc" ? diff : -diff;
+    }
+    // Strings that look like numbers -> numeric compare
+    if (typeof aVal === "string" && typeof bVal === "string") {
+      const numA = parseNumericLike(aVal);
+      const numB = parseNumericLike(bVal);
+      if (numA != null && numB != null) {
+        const diff = numA - numB;
+        return direction === "asc" ? diff : -diff;
+      }
+      // ISO-like date strings
+      if (/^\d{4}-\d{2}-\d{2}/.test(aVal) && /^\d{4}-\d{2}-\d{2}/.test(bVal)) {
+        const da = new Date(aVal).getTime();
+        const db = new Date(bVal).getTime();
+        const diff = da - db;
+        return direction === "asc" ? diff : -diff;
+      }
+    }
+
+    // Fallback: locale-aware string compare with numeric collation
+    const aStr = String(aVal);
+    const bStr = String(bVal);
+    const comparison = collator.compare(aStr, bStr);
+    return direction === "asc" ? comparison : -comparison;
+  });
+}
+
+/**
+ * Return a human-friendly identifier for a row using common keys
+ *
+ * Accepts any JSON-serializable primitive or array of primitives.
+ * Arrays are converted to comma-separated strings.
+ */
+export function getRowIdentifier(
+  row: Record<
+    string,
+    string | number | boolean | null | (string | number | boolean | null)[]
+  >,
+  identifierKey?: string,
+): string {
+  const candidate =
+    (identifierKey ? row[identifierKey] : undefined) ??
+    (row as Record<string, unknown>).name ??
+    (row as Record<string, unknown>).title ??
+    (row as Record<string, unknown>).id;
+
+  if (candidate == null) {
+    return "";
+  }
+
+  // Handle arrays by joining them
+  if (Array.isArray(candidate)) {
+    return candidate.map((v) => (v === null ? "null" : String(v))).join(", ");
+  }
+
+  return String(candidate).trim();
+}
+
+function stableStringify(value: unknown): string {
+  if (value == null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  if (
+    typeof value === "number" ||
+    typeof value === "boolean" ||
+    typeof value === "bigint"
+  ) {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map((item) => stableStringify(item)).join(",")}]`;
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>).sort(
+      ([a], [b]) => a.localeCompare(b),
+    );
+    return `{${entries
+      .map(([key, item]) => `${JSON.stringify(key)}:${stableStringify(item)}`)
+      .join(",")}}`;
+  }
+  return JSON.stringify(String(value));
+}
+
+function hashString(value: string): string {
+  let hash = 5381;
+  for (let i = 0; i < value.length; i++) {
+    hash = (hash * 33) ^ value.charCodeAt(i);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+/**
+ * Create deterministic, reorder-stable React keys for DataTable rows.
+ *
+ * - Uses `identifierKey` or common identifier fields as the primary base.
+ * - Falls back to stable content fingerprints when no identifier exists.
+ * - Disambiguates duplicates without relying on array index.
+ */
+export function createDataTableRowKeys(
+  rows: Array<Record<string, unknown>>,
+  identifierKey?: string,
+): string[] {
+  const canonicalRows = rows.map((row) => stableStringify(row));
+
+  const baseKeys = rows.map((row, index) => {
+    const identifier = getRowIdentifier(
+      row as Record<
+        string,
+        string | number | boolean | null | (string | number | boolean | null)[]
+      >,
+      identifierKey,
+    );
+
+    if (identifier) {
+      return `id:${identifier}`;
+    }
+
+    return `row:${hashString(canonicalRows[index])}`;
+  });
+
+  const baseCounts = new Map<string, number>();
+  baseKeys.forEach((key) => {
+    baseCounts.set(key, (baseCounts.get(key) ?? 0) + 1);
+  });
+
+  const usedKeys = new Map<string, number>();
+
+  return rows.map((row, index) => {
+    const baseKey = baseKeys[index];
+    if ((baseCounts.get(baseKey) ?? 0) === 1) {
+      return baseKey;
+    }
+
+    const rowFingerprint = hashString(canonicalRows[index]);
+    let disambiguatedKey = `${baseKey}::${rowFingerprint}`;
+
+    const seenCount = usedKeys.get(disambiguatedKey) ?? 0;
+    usedKeys.set(disambiguatedKey, seenCount + 1);
+    if (seenCount > 0) {
+      disambiguatedKey = `${disambiguatedKey}::d${seenCount + 1}`;
+    }
+
+    return disambiguatedKey;
+  });
+}
+
+function sanitizeDomIdToken(value: string): string {
+  return encodeURIComponent(value).replace(/%/g, "_");
+}
+
+export function getDataTableMobileDescriptionId(surfaceId: string): string {
+  return `${sanitizeDomIdToken(surfaceId)}-mobile-table-description`;
+}
+
+/**
+ * Parse a string that represents a numeric value, handling various formats:
+ * - Currency symbols: $, €, £, ¥, etc.
+ * - Percent symbols: %
+ * - Accounting negatives: (1234) → -1234
+ * - Thousands/decimal separators: 1,234.56 or 1.234,56
+ * - Compact notation: 2.8T (trillion), 1.5M (million), 500K (thousand)
+ * - Byte suffixes: 768B (bytes), 1.5KB, 2GB, 1TB
+ *
+ * Note: Single "B" is disambiguated - integers < 1024 are bytes, otherwise billions.
+ *
+ * @param input - String to parse
+ * @returns Parsed number or null if unparseable
+ *
+ * @example
+ * parseNumericLike("$1,234.56") // 1234.56
+ * parseNumericLike("2.8T") // 2800000000000
+ * parseNumericLike("768B") // 768
+ * parseNumericLike("50%") // 50
+ * parseNumericLike("(1234)") // -1234
+ */
+export function parseNumericLike(input: string): number | null {
+  // Normalize whitespace (spaces, NBSPs, thin spaces)
+  let s = input.replace(/[\u00A0\u202F\s]/g, "").trim();
+  if (!s) return null;
+
+  // Accounting negatives: (1234) -> -1234
+  s = s.replace(/^\((.*)\)$/g, "-$1");
+
+  // Strip common currency and percent symbols
+  s = s.replace(/[%$€£¥₩₹₽₺₪₫฿₦₴₡₲₵₸]/g, "");
+
+  function hasGroupedThousands(value: string, sep: "," | "."): boolean {
+    const unsigned = value.replace(/^[+-]/, "");
+    const parts = unsigned.split(sep);
+    if (parts.length < 2) return false;
+    if (parts.some((part) => part.length === 0)) return false;
+    if (!/^\d{1,3}$/.test(parts[0])) return false;
+    if (parts[0] === "0") return false;
+    return parts.slice(1).every((part) => /^\d{3}$/.test(part));
+  }
+
+  const lastComma = s.lastIndexOf(",");
+  const lastDot = s.lastIndexOf(".");
+  if (lastComma !== -1 && lastDot !== -1) {
+    // Decide decimal by whichever occurs last
+    const decimalSep = lastComma > lastDot ? "," : ".";
+    const thousandSep = decimalSep === "," ? "." : ",";
+    s = s.split(thousandSep).join("");
+    s = s.replace(decimalSep, ".");
+  } else if (lastComma !== -1) {
+    // Only comma present
+    if (hasGroupedThousands(s, ",")) {
+      s = s.replace(/,/g, "");
+    } else {
+      const frac = s.length - lastComma - 1;
+      if (frac >= 1 && frac <= 3) s = s.replace(/,/g, ".");
+      else s = s.replace(/,/g, "");
+    }
+  } else if (lastDot !== -1) {
+    // Only dot present; normalize grouped thousands separators.
+    if (hasGroupedThousands(s, ".")) {
+      s = s.replace(/\./g, "");
+    } else if ((s.match(/\./g) || []).length > 1) {
+      s = s.replace(/\./g, "");
+    }
+  }
+
+  // Handle compact notation (K, M, B, T, P, G) and byte suffixes (KB, MB, GB, TB, PB)
+  const compactMatch = s.match(/^([+-]?\d+\.?\d*|\d*\.\d+)([KMBTPG]B?|B)$/i);
+  if (compactMatch) {
+    const baseNum = Number(compactMatch[1]);
+    if (Number.isNaN(baseNum)) return null;
+
+    const suffix = compactMatch[2].toUpperCase();
+
+    // Disambiguate single "B" (bytes vs billions)
+    // If whole number < 1024, treat as bytes. Otherwise, billions.
+    if (suffix === "B") {
+      const isLikelyBytes = Number.isInteger(baseNum) && baseNum < 1024;
+      return isLikelyBytes ? baseNum : baseNum * 1e9;
+    }
+
+    const multipliers: Record<string, number> = {
+      K: 1e3,
+      KB: 1024, // Kilo: metric vs binary
+      M: 1e6,
+      MB: 1024 ** 2, // Mega
+      G: 1e9,
+      GB: 1024 ** 3, // Giga
+      T: 1e12,
+      TB: 1024 ** 4, // Tera
+      P: 1e15,
+      PB: 1024 ** 5, // Peta
+    };
+
+    return baseNum * (multipliers[suffix] ?? 1);
+  }
+
+  if (/^[+-]?(?:\d+\.?\d*|\d*\.\d+)$/.test(s)) {
+    const n = Number(s);
+    return Number.isNaN(n) ? null : n;
+  }
+  return null;
+}
diff --git a/frontend/src/toolui/components/image-gallery/README.md b/frontend/src/toolui/components/image-gallery/README.md
new file mode 100644
index 00000000..67349c0b
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/README.md
@@ -0,0 +1,19 @@
+# Image Gallery
+
+Implementation for the "image-gallery" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/image-gallery/index.tsx
+- serializable schema + parse helpers: components/tool-ui/image-gallery/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/image-gallery/content.mdx
+- Preset payload: lib/presets/image-gallery.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/image-gallery/_adapter.tsx b/frontend/src/toolui/components/image-gallery/_adapter.tsx
new file mode 100644
index 00000000..fa7f40cf
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/_adapter.tsx
@@ -0,0 +1,13 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn     → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button → shadcn/ui Button
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { ChevronLeft, ChevronRight, X, ImageOff } from "lucide-react";
diff --git a/frontend/src/toolui/components/image-gallery/context.tsx b/frontend/src/toolui/components/image-gallery/context.tsx
new file mode 100644
index 00000000..ccc69460
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/context.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import { flushSync } from "react-dom";
+import type { ImageGalleryItem } from "./schema";
+
+const VIEW_TRANSITION_NAME = "active-gallery-image";
+
+interface ImageGalleryContextValue {
+  images: ImageGalleryItem[];
+  activeIndex: number | null;
+  openLightbox: (index: number) => void;
+  closeLightbox: () => void;
+  registerImage: (id: string, element: HTMLElement | null) => void;
+  lightboxContentRef: React.MutableRefObject<HTMLDivElement | null>;
+  setDialogRef: (element: HTMLDialogElement | null) => void;
+}
+
+const ImageGalleryContext = createContext<ImageGalleryContextValue | null>(
+  null,
+);
+
+export function useImageGallery(): ImageGalleryContextValue {
+  const context = useContext(ImageGalleryContext);
+  if (!context) {
+    throw new Error("useImageGallery must be used within ImageGalleryProvider");
+  }
+  return context;
+}
+
+function supportsViewTransitions(): boolean {
+  return (
+    typeof document !== "undefined" &&
+    "startViewTransition" in document &&
+    typeof window !== "undefined" &&
+    !window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches
+  );
+}
+
+function withViewTransition(
+  element: HTMLElement,
+  domUpdate: () => void,
+  onFinished?: () => void,
+): void {
+  if (!supportsViewTransitions()) {
+    domUpdate();
+    onFinished?.();
+    return;
+  }
+
+  element.style.viewTransitionName = VIEW_TRANSITION_NAME;
+
+  const transition = document.startViewTransition(() => domUpdate());
+
+  transition.finished.finally(() => {
+    element.style.removeProperty("view-transition-name");
+    onFinished?.();
+  });
+}
+
+interface ImageGalleryProviderProps {
+  images: ImageGalleryItem[];
+  children: React.ReactNode;
+}
+
+export function ImageGalleryProvider({
+  images,
+  children,
+}: ImageGalleryProviderProps) {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const imageElementsRef = useRef<Map<string, HTMLElement>>(new Map());
+  const lightboxContentRef = useRef<HTMLDivElement | null>(null);
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const originalParentRef = useRef<HTMLElement | null>(null);
+
+  const registerImage = useCallback(
+    (id: string, element: HTMLElement | null) => {
+      if (element) {
+        imageElementsRef.current.set(id, element);
+      } else {
+        imageElementsRef.current.delete(id);
+      }
+    },
+    [],
+  );
+
+  const setDialogRef = useCallback((element: HTMLDialogElement | null) => {
+    dialogRef.current = element;
+  }, []);
+
+  const openLightbox = useCallback(
+    (index: number) => {
+      const image = images[index];
+      if (!image) return;
+
+      const imageElement = imageElementsRef.current.get(image.id);
+      const container = lightboxContentRef.current;
+      const dialog = dialogRef.current;
+
+      if (!imageElement || !container || !dialog) {
+        setActiveIndex(index);
+        dialog?.showModal();
+        return;
+      }
+
+      originalParentRef.current = imageElement.parentElement;
+
+      withViewTransition(imageElement, () => {
+        container.appendChild(imageElement);
+        flushSync(() => setActiveIndex(index));
+        dialog.showModal();
+      });
+    },
+    [images],
+  );
+
+  const closeLightbox = useCallback(() => {
+    if (activeIndex === null) return;
+
+    const image = images[activeIndex];
+    const dialog = dialogRef.current;
+
+    if (!image) {
+      setActiveIndex(null);
+      dialog?.close();
+      return;
+    }
+
+    const imageElement = imageElementsRef.current.get(image.id);
+    const originalParent = originalParentRef.current;
+
+    if (!imageElement || !originalParent) {
+      setActiveIndex(null);
+      dialog?.close();
+      return;
+    }
+
+    withViewTransition(
+      imageElement,
+      () => {
+        originalParent.appendChild(imageElement);
+        flushSync(() => setActiveIndex(null));
+        dialog?.close();
+      },
+      () => {
+        originalParentRef.current = null;
+      },
+    );
+  }, [activeIndex, images]);
+
+  const value = useMemo<ImageGalleryContextValue>(
+    () => ({
+      images,
+      activeIndex,
+      openLightbox,
+      closeLightbox,
+      registerImage,
+      lightboxContentRef,
+      setDialogRef,
+    }),
+    [
+      images,
+      activeIndex,
+      openLightbox,
+      closeLightbox,
+      registerImage,
+      setDialogRef,
+    ],
+  );
+
+  return (
+    <ImageGalleryContext.Provider value={value}>
+      {children}
+    </ImageGalleryContext.Provider>
+  );
+}
diff --git a/frontend/src/toolui/components/image-gallery/gallery-grid.tsx b/frontend/src/toolui/components/image-gallery/gallery-grid.tsx
new file mode 100644
index 00000000..5aaf8aa9
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/gallery-grid.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { cn, ImageOff } from "./_adapter";
+import { useImageGallery } from "./context";
+import type { ImageGalleryItem } from "./schema";
+
+type GridImage = Pick<
+  ImageGalleryItem,
+  "id" | "src" | "alt" | "width" | "height"
+>;
+
+interface GalleryGridProps {
+  onImageClick?: (imageId: string) => void;
+}
+
+export function GalleryGrid({ onImageClick }: GalleryGridProps) {
+  const { images, openLightbox } = useImageGallery();
+
+  const handleOpen = useCallback(
+    (index: number) => {
+      const image = images[index];
+      if (image && onImageClick) {
+        onImageClick(image.id);
+      }
+      openLightbox(index);
+    },
+    [images, onImageClick, openLightbox],
+  );
+
+  return (
+    <div
+      className="grid grid-cols-2 gap-2 @md:grid-cols-3 @lg:grid-cols-4"
+      role="list"
+    >
+      {images.map((image, index) => (
+        <GridImageCard
+          key={image.id}
+          image={image}
+          index={index}
+          onClick={handleOpen}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface GridImageCardProps {
+  image: GridImage;
+  index: number;
+  onClick: (index: number) => void;
+}
+
+function GridImageCard({ image, index, onClick }: GridImageCardProps) {
+  const [hasError, setHasError] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const { registerImage } = useImageGallery();
+
+  const shouldSpanTwoRows = isPortraitImage(image);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const img = wrapper?.querySelector("img");
+    if (img) {
+      registerImage(image.id, img);
+    }
+    return () => {
+      registerImage(image.id, null);
+    };
+  }, [image.id, registerImage]);
+
+  const handleClick = useCallback(() => {
+    onClick(index);
+  }, [onClick, index]);
+
+  return (
+    <div
+      role="listitem"
+      className={cn(
+        "group relative cursor-pointer",
+        shouldSpanTwoRows && "row-span-2",
+      )}
+      style={{ aspectRatio: shouldSpanTwoRows ? undefined : "1 / 1" }}
+    >
+      <button
+        type="button"
+        onClick={handleClick}
+        className="absolute inset-0 z-20 h-full w-full rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+        aria-label={image.alt}
+      />
+
+      <div
+        ref={wrapperRef}
+        className="bg-muted relative h-full w-full overflow-hidden rounded-lg transition-transform duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[1.02] group-active:scale-[0.98]"
+      >
+        {hasError ? (
+          <ImageErrorState alt={image.alt} />
+        ) : (
+          <img
+            src={image.src}
+            alt={image.alt}
+            width={image.width}
+            height={image.height}
+            loading="lazy"
+            decoding="async"
+            draggable={false}
+            onError={() => setHasError(true)}
+            className="h-full w-full object-cover"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function isPortraitImage(image: GridImage): boolean {
+  const aspectRatio = image.width / image.height;
+  const isPortrait = aspectRatio < 1;
+  const isSquarish = aspectRatio >= 0.9 && aspectRatio <= 1.1;
+  return isPortrait && !isSquarish;
+}
+
+function ImageErrorState({ alt }: { alt: string }) {
+  return (
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4">
+      <ImageOff className="text-muted-foreground h-8 w-8" />
+      <span className="text-muted-foreground line-clamp-2 text-center text-xs">
+        {alt}
+      </span>
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/image-gallery/gallery-lightbox.tsx b/frontend/src/toolui/components/image-gallery/gallery-lightbox.tsx
new file mode 100644
index 00000000..b69e130f
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/gallery-lightbox.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { useRef, useCallback } from "react";
+import { cn, Button, X } from "./_adapter";
+import { useImageGallery } from "./context";
+import type { ImageGalleryItem } from "./schema";
+import { resolveSafeNavigationHref } from "../shared/media";
+
+type LightboxImage = Pick<ImageGalleryItem, "title" | "caption" | "source">;
+
+export function GalleryLightbox() {
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+
+  const {
+    images,
+    activeIndex,
+    closeLightbox,
+    lightboxContentRef,
+    setDialogRef,
+  } = useImageGallery();
+
+  const isOpen = activeIndex !== null;
+  const currentImage = isOpen ? images[activeIndex] : null;
+
+  const handleDialogRef = useCallback(
+    (element: HTMLDialogElement | null) => {
+      dialogRef.current = element;
+      setDialogRef(element);
+    },
+    [setDialogRef],
+  );
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent<HTMLDialogElement>) => {
+      if (e.target === dialogRef.current) {
+        closeLightbox();
+      }
+    },
+    [closeLightbox],
+  );
+
+  const handleCancel = useCallback(
+    (e: React.SyntheticEvent<HTMLDialogElement>) => {
+      e.preventDefault();
+      closeLightbox();
+    },
+    [closeLightbox],
+  );
+
+  return (
+    <dialog
+      ref={handleDialogRef}
+      onClick={handleBackdropClick}
+      onCancel={handleCancel}
+      className={cn(
+        "m-0 h-full max-h-full w-full max-w-full",
+        "overflow-hidden p-0",
+        "bg-transparent backdrop:bg-black/95 dark:backdrop:bg-black/90",
+        "focus-visible:outline-none",
+      )}
+      aria-label="Image lightbox"
+    >
+      <div className="relative h-full w-full">
+        {isOpen && <CloseButton onClose={closeLightbox} />}
+        <div className="relative z-10 flex h-full w-full flex-col items-center justify-center gap-4 p-8">
+          <div
+            ref={lightboxContentRef}
+            className={cn(
+              "pointer-events-auto relative w-fit max-w-full overflow-hidden rounded-lg shadow-2xl",
+              "[&>img]:block [&>img]:max-h-[80vh] [&>img]:max-w-full",
+              "[&>img]:h-auto [&>img]:w-auto [&>img]:object-contain [&>img]:select-none",
+            )}
+          />
+          {currentImage && <Metadata image={currentImage} />}
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+function CloseButton({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="absolute top-4 right-4 z-20">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        onClick={onClose}
+        className="text-white/80 hover:bg-white/10 hover:text-white"
+        aria-label="Close"
+      >
+        <X className="h-5 w-5" />
+      </Button>
+    </div>
+  );
+}
+
+function Metadata({ image }: { image: LightboxImage }) {
+  const { title, caption, source } = image;
+  const hasTitle = Boolean(title);
+  const hasCaption = Boolean(caption);
+  const hasSource = Boolean(source?.label);
+
+  if (!hasTitle && !hasCaption && !hasSource) {
+    return null;
+  }
+
+  return (
+    <div className="text-center">
+      {hasTitle && (
+        <h3 className="text-base font-medium tracking-tight text-white">
+          {title}
+        </h3>
+      )}
+      {(hasCaption || hasSource) && (
+        <p className="mt-1 text-sm text-white/60">
+          {caption}
+          {hasCaption && hasSource && " · "}
+          {hasSource && <SourceLink source={source!} />}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function SourceLink({
+  source,
+}: {
+  source: NonNullable<LightboxImage["source"]>;
+}) {
+  const href = resolveSafeNavigationHref(source.url);
+  if (!href) {
+    return <>{source.label}</>;
+  }
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="hover:text-white/80 hover:underline"
+    >
+      {source.label}
+    </a>
+  );
+}
diff --git a/frontend/src/toolui/components/image-gallery/image-gallery.tsx b/frontend/src/toolui/components/image-gallery/image-gallery.tsx
new file mode 100644
index 00000000..a1b9b4d4
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/image-gallery.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import "./styles.css";
+import { cn } from "./_adapter";
+import { ImageGalleryProvider } from "./context";
+import { GalleryGrid } from "./gallery-grid";
+import { GalleryLightbox } from "./gallery-lightbox";
+import type { ImageGalleryProps } from "./schema";
+
+export function ImageGallery({
+  id,
+  images,
+  title,
+  description,
+  className,
+  onImageClick,
+}: ImageGalleryProps) {
+  const handleImageClick = (imageId: string) => {
+    if (!onImageClick) return;
+
+    const image = images.find((img) => img.id === imageId);
+    if (image) {
+      onImageClick(imageId, image);
+    }
+  };
+
+  return (
+    <article
+      className={cn("relative w-full min-w-80 max-w-lg", className)}
+      data-tool-ui-id={id}
+      data-slot="image-gallery"
+    >
+      <div
+        className={cn(
+          "@container relative isolate flex w-full min-w-0 flex-col rounded-xl",
+          "border border-border bg-card text-sm shadow-xs",
+        )}
+      >
+        <ImageGalleryProvider images={images}>
+          <Header title={title} description={description} />
+          <div className="p-3">
+            <GalleryGrid onImageClick={handleImageClick} />
+          </div>
+          <GalleryLightbox />
+        </ImageGalleryProvider>
+      </div>
+    </article>
+  );
+}
+
+interface HeaderProps {
+  title?: string;
+  description?: string;
+}
+
+function Header({ title, description }: HeaderProps) {
+  if (!title && !description) {
+    return null;
+  }
+
+  return (
+    <div className="border-border/60 border-b px-4 pt-4 pb-3">
+      {title && (
+        <h3 className="text-[15px] leading-tight font-semibold tracking-tight">
+          {title}
+        </h3>
+      )}
+      {description && (
+        <p className="text-muted-foreground mt-1 text-sm leading-snug">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/image-gallery/index.tsx b/frontend/src/toolui/components/image-gallery/index.tsx
new file mode 100644
index 00000000..54116bc3
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/index.tsx
@@ -0,0 +1,6 @@
+export { ImageGallery } from "./image-gallery";
+export type {
+  ImageGalleryProps,
+  ImageGalleryItem,
+  SerializableImageGallery,
+} from "./schema";
diff --git a/frontend/src/toolui/components/image-gallery/schema.ts b/frontend/src/toolui/components/image-gallery/schema.ts
new file mode 100644
index 00000000..f4851383
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/schema.ts
@@ -0,0 +1,59 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const ImageGallerySourceSchema = z.object({
+  label: z.string(),
+  url: z.string().url().optional(),
+});
+
+export type ImageGallerySource = z.infer<typeof ImageGallerySourceSchema>;
+
+export const ImageGalleryItemSchema = z.object({
+  id: z.string().min(1),
+  src: z.string().url(),
+  alt: z.string().min(1, "Images require alt text for accessibility"),
+  width: z.number().positive(),
+  height: z.number().positive(),
+  title: z.string().optional(),
+  caption: z.string().optional(),
+  source: ImageGallerySourceSchema.optional(),
+});
+
+export type ImageGalleryItem = z.infer<typeof ImageGalleryItemSchema>;
+
+export const SerializableImageGallerySchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  images: z.array(ImageGalleryItemSchema).min(1),
+  title: z.string().optional(),
+  description: z.string().optional(),
+});
+
+export type SerializableImageGallery = z.infer<
+  typeof SerializableImageGallerySchema
+>;
+
+export interface ImageGalleryProps extends SerializableImageGallery {
+  className?: string;
+  onImageClick?: (imageId: string, image: ImageGalleryItem) => void;
+}
+
+const SerializableImageGallerySchemaContract = defineToolUiContract(
+  "ImageGallery",
+  SerializableImageGallerySchema,
+);
+
+export const parseSerializableImageGallery: (
+  input: unknown,
+) => SerializableImageGallery = SerializableImageGallerySchemaContract.parse;
+
+export const safeParseSerializableImageGallery: (
+  input: unknown,
+) => SerializableImageGallery | null =
+  SerializableImageGallerySchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/image-gallery/styles.css b/frontend/src/toolui/components/image-gallery/styles.css
new file mode 100644
index 00000000..5e459035
--- /dev/null
+++ b/frontend/src/toolui/components/image-gallery/styles.css
@@ -0,0 +1,25 @@
+@supports (view-transition-name: none) {
+  ::view-transition-group(active-gallery-image) {
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    overflow: clip;
+    border-radius: 0.75rem;
+  }
+
+  ::view-transition-image-pair(active-gallery-image) {
+    overflow: clip;
+    border-radius: 0.75rem;
+  }
+
+  ::view-transition-old(active-gallery-image),
+  ::view-transition-new(active-gallery-image) {
+    border-radius: 0.75rem;
+    mix-blend-mode: normal;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(active-gallery-image) {
+      animation-duration: 0ms;
+    }
+  }
+}
diff --git a/frontend/src/toolui/components/image/README.md b/frontend/src/toolui/components/image/README.md
new file mode 100644
index 00000000..d690376a
--- /dev/null
+++ b/frontend/src/toolui/components/image/README.md
@@ -0,0 +1,19 @@
+# Image
+
+Implementation for the "image" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/image/index.ts
+- serializable schema + parse helpers: components/tool-ui/image/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/image/content.mdx
+- Preset payload: lib/presets/image.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/image/_adapter.tsx b/frontend/src/toolui/components/image/_adapter.tsx
new file mode 100644
index 00000000..62da6334
--- /dev/null
+++ b/frontend/src/toolui/components/image/_adapter.tsx
@@ -0,0 +1,11 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ */
+"use client";
+
+export { cn } from "@toolui/lib/utils";
diff --git a/frontend/src/toolui/components/image/image.tsx b/frontend/src/toolui/components/image/image.tsx
new file mode 100644
index 00000000..035602ea
--- /dev/null
+++ b/frontend/src/toolui/components/image/image.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./_adapter";
+
+import {
+  RATIO_CLASS_MAP,
+  getFitClass,
+  openSafeNavigationHref,
+  resolveSafeNavigationHref,
+  sanitizeHref,
+} from "../shared/media";
+import type { SerializableImage, Source } from "./schema";
+
+const FALLBACK_LOCALE = "en-US";
+
+export interface ImageProps extends SerializableImage {
+  className?: string;
+  onNavigate?: (href: string, image: SerializableImage) => void;
+}
+
+export function Image(props: ImageProps) {
+  const { className, onNavigate, ...serializable } = props;
+
+  const {
+    id,
+    src,
+    alt,
+    title,
+    href: rawHref,
+    domain,
+    ratio = "auto",
+    fit = "cover",
+    source,
+    locale: providedLocale,
+  } = serializable;
+
+  const locale = providedLocale ?? FALLBACK_LOCALE;
+  const sanitizedHref = sanitizeHref(rawHref);
+  const resolvedSourceUrl = sanitizeHref(source?.url);
+
+  const imageData: SerializableImage = {
+    ...serializable,
+    href: sanitizedHref,
+    source: source ? { ...source, url: resolvedSourceUrl } : undefined,
+    locale,
+  };
+
+  const sourceLabel = source?.label ?? domain;
+  const fallbackInitial = (sourceLabel ?? "").trim().charAt(0).toUpperCase();
+  const hasSource = Boolean(sourceLabel || source?.iconUrl);
+
+  const handleSourceClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const targetUrl = resolveSafeNavigationHref(
+      resolvedSourceUrl,
+      source?.url,
+      sanitizedHref,
+      src,
+    );
+    if (!targetUrl) return;
+    if (onNavigate) {
+      onNavigate(targetUrl, imageData);
+    } else {
+      openSafeNavigationHref(targetUrl);
+    }
+  };
+
+  const handleImageClick = () => {
+    if (!sanitizedHref) return;
+    if (onNavigate) {
+      onNavigate(sanitizedHref, imageData);
+    } else {
+      openSafeNavigationHref(sanitizedHref);
+    }
+  };
+
+  const hasMetadata = title || hasSource;
+
+  return (
+    <article
+      className={cn("relative w-full max-w-md min-w-80", className)}
+      lang={locale}
+      data-tool-ui-id={id}
+      data-slot="image"
+    >
+      <div
+        className={cn(
+          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
+          "border-border bg-card border text-sm shadow-xs",
+        )}
+      >
+        <>
+          <div
+            className={cn(
+              "bg-muted group relative w-full overflow-hidden",
+              ratio !== "auto" ? RATIO_CLASS_MAP[ratio] : "min-h-[160px]",
+              sanitizedHref && "cursor-pointer",
+            )}
+            onClick={sanitizedHref ? handleImageClick : undefined}
+            role={sanitizedHref ? "link" : undefined}
+            tabIndex={sanitizedHref ? 0 : undefined}
+            onKeyDown={
+              sanitizedHref
+                ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleImageClick();
+                    }
+                  }
+                : undefined
+            }
+          >
+            <img
+              src={src}
+              alt={alt}
+              loading="lazy"
+              decoding="async"
+              className={cn("absolute inset-0 h-full w-full", getFitClass(fit))}
+            />
+          </div>
+          {hasMetadata && (
+            <div className="flex items-center gap-3 px-4 py-3">
+              <SourceAttribution
+                source={source}
+                sourceLabel={sourceLabel}
+                fallbackInitial={fallbackInitial}
+                hasClickableUrl={Boolean(resolvedSourceUrl)}
+                onSourceClick={handleSourceClick}
+                title={title}
+              />
+            </div>
+          )}
+        </>
+      </div>
+    </article>
+  );
+}
+
+interface SourceAttributionProps {
+  source?: Source;
+  sourceLabel?: string;
+  fallbackInitial: string;
+  hasClickableUrl: boolean;
+  onSourceClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  title?: string;
+}
+
+function SourceAttribution({
+  source,
+  sourceLabel,
+  fallbackInitial,
+  hasClickableUrl,
+  onSourceClick,
+  title,
+}: SourceAttributionProps) {
+  const hasSource = Boolean(sourceLabel || source?.iconUrl);
+
+  const content = (
+    <div className="flex min-w-0 flex-1 items-center gap-3">
+      {source?.iconUrl ? (
+        <img
+          src={source.iconUrl}
+          alt=""
+          aria-hidden="true"
+          width={32}
+          height={32}
+          className="size-8 shrink-0 rounded-full object-cover"
+          loading="lazy"
+          decoding="async"
+        />
+      ) : fallbackInitial ? (
+        <div className="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold uppercase">
+          {fallbackInitial}
+        </div>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        {title && (
+          <div className="text-foreground line-clamp-1 text-sm font-medium">
+            {title}
+          </div>
+        )}
+        {sourceLabel && (
+          <div className="text-muted-foreground line-clamp-1 text-xs">
+            {sourceLabel}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  if (hasClickableUrl && hasSource) {
+    return (
+      <button
+        type="button"
+        onClick={onSourceClick}
+        className="focus-visible:ring-ring flex w-full items-center gap-3 text-left hover:opacity-80 focus-visible:ring-2 focus-visible:outline-none"
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return <div className="flex w-full items-center gap-3">{content}</div>;
+}
diff --git a/frontend/src/toolui/components/image/index.ts b/frontend/src/toolui/components/image/index.ts
new file mode 100644
index 00000000..ef85f279
--- /dev/null
+++ b/frontend/src/toolui/components/image/index.ts
@@ -0,0 +1,3 @@
+export { Image } from "./image";
+export type { ImageProps } from "./image";
+export type { SerializableImage, Source } from "./schema";
diff --git a/frontend/src/toolui/components/image/schema.ts b/frontend/src/toolui/components/image/schema.ts
new file mode 100644
index 00000000..de490a99
--- /dev/null
+++ b/frontend/src/toolui/components/image/schema.ts
@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+import { AspectRatioSchema, MediaFitSchema } from "../shared/media";
+
+export const SourceSchema = z.object({
+  label: z.string(),
+  iconUrl: z.url().optional(),
+  url: z.url().optional(),
+});
+
+export type Source = z.infer<typeof SourceSchema>;
+
+export const SerializableImageSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  assetId: z.string(),
+  src: z.url(),
+  alt: z.string().min(1, "Images require alt text for accessibility"),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  href: z.url().optional(),
+  domain: z.string().optional(),
+  ratio: AspectRatioSchema.optional(),
+  fit: MediaFitSchema.optional(),
+  fileSizeBytes: z.number().int().positive().optional(),
+  createdAt: z.string().datetime().optional(),
+  locale: z.string().optional(),
+  source: SourceSchema.optional(),
+});
+
+export type SerializableImage = z.infer<typeof SerializableImageSchema>;
+
+const SerializableImageSchemaContract = defineToolUiContract(
+  "Image",
+  SerializableImageSchema,
+);
+
+export const parseSerializableImage: (input: unknown) => SerializableImage =
+  SerializableImageSchemaContract.parse;
+
+export const safeParseSerializableImage: (
+  input: unknown,
+) => SerializableImage | null = SerializableImageSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/instagram-post/README.md b/frontend/src/toolui/components/instagram-post/README.md
new file mode 100644
index 00000000..07f8b442
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/README.md
@@ -0,0 +1,19 @@
+# Instagram Post
+
+Implementation for the "instagram-post" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/instagram-post/index.ts
+- serializable schema + parse helpers: components/tool-ui/instagram-post/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/social-post/content.mdx
+- Preset payload: lib/presets/instagram-post.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/instagram-post/_adapter.tsx b/frontend/src/toolui/components/instagram-post/_adapter.tsx
new file mode 100644
index 00000000..c314b96c
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/_adapter.tsx
@@ -0,0 +1,19 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn      → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button  → shadcn/ui Button
+ *   Tooltip → shadcn/ui Tooltip
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@toolui/ui/tooltip";
diff --git a/frontend/src/toolui/components/instagram-post/index.ts b/frontend/src/toolui/components/instagram-post/index.ts
new file mode 100644
index 00000000..6ee1dace
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/index.ts
@@ -0,0 +1,8 @@
+export { InstagramPost } from "./instagram-post";
+export type { InstagramPostProps } from "./instagram-post";
+export type {
+  InstagramPostData,
+  InstagramPostAuthor,
+  InstagramPostMedia,
+  InstagramPostStats,
+} from "./schema";
diff --git a/frontend/src/toolui/components/instagram-post/instagram-post.tsx b/frontend/src/toolui/components/instagram-post/instagram-post.tsx
new file mode 100644
index 00000000..5f543ead
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/instagram-post.tsx
@@ -0,0 +1,305 @@
+"use client";
+
+import * as React from "react";
+import { BadgeCheck, Heart, Share } from "lucide-react";
+import {
+  cn,
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./_adapter";
+import { formatRelativeTime } from "../shared/utils";
+
+import type { InstagramPostData, InstagramPostMedia } from "./schema";
+
+export interface InstagramPostProps {
+  post: InstagramPostData;
+  className?: string;
+  onAction?: (action: string, post: InstagramPostData) => void;
+}
+
+function InstagramLogo({ className }: { className?: string }) {
+  const id = React.useId();
+  const gradientPrimaryId = `ig-primary-${id}`;
+  const gradientSecondaryId = `ig-secondary-${id}`;
+
+  return (
+    <svg
+      viewBox="0 0 132 132"
+      className={className}
+      role="img"
+      aria-label="Instagram logo"
+    >
+      <defs>
+        <radialGradient
+          id={gradientPrimaryId}
+          cx="158.429"
+          cy="578.088"
+          r="65"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="matrix(0 -1.982 1.844 0 -1031.4 454)"
+        >
+          <stop offset="0" stopColor="#fd5" />
+          <stop offset=".1" stopColor="#fd5" />
+          <stop offset=".5" stopColor="#ff543e" />
+          <stop offset="1" stopColor="#c837ab" />
+        </radialGradient>
+        <radialGradient
+          id={gradientSecondaryId}
+          cx="147.694"
+          cy="473.455"
+          r="65"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="matrix(.174 .869 -3.58 .717 1648 -458.5)"
+        >
+          <stop offset="0" stopColor="#3771c8" />
+          <stop offset=".128" stopColor="#3771c8" />
+          <stop offset="1" stopColor="#60f" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      <path
+        fill={`url(#${gradientPrimaryId})`}
+        d="M65 0C37.9 0 30 .03 28.4.16c-5.6.46-9 1.34-12.8 3.22-2.9 1.44-5.2 3.12-7.5 5.47C4 13.1 1.5 18.4.6 24.66c-.44 3.04-.57 3.66-.6 19.2-.01 5.16 0 12 0 21.1 0 27.12.03 35.05.16 36.6.45 5.4 1.3 8.82 3.1 12.55 3.44 7.14 10 12.5 17.76 14.5 2.68.7 5.64 1.1 9.44 1.26 1.6.07 18 .12 34.44.12s32.84-.02 34.4-.1c4.4-.2 6.96-.55 9.8-1.28 7.78-2.01 14.23-7.3 17.74-14.53 1.76-3.64 2.66-7.18 3.07-12.32.08-1.12.12-18.97.12-36.8 0-17.85-.04-35.67-.13-36.8-.4-5.2-1.3-8.7-3.13-12.43-1.5-3.04-3.16-5.3-5.56-7.62C116.9 4 111.64 1.5 105.37.6 102.34.16 101.73.03 86.2 0H65z"
+        transform="translate(1 1)"
+      />
+      <path
+        fill={`url(#${gradientSecondaryId})`}
+        d="M65 0C37.9 0 30 .03 28.4.16c-5.6.46-9 1.34-12.8 3.22-2.9 1.44-5.2 3.12-7.5 5.47C4 13.1 1.5 18.4.6 24.66c-.44 3.04-.57 3.66-.6 19.2-.01 5.16 0 12 0 21.1 0 27.12.03 35.05.16 36.6.45 5.4 1.3 8.82 3.1 12.55 3.44 7.14 10 12.5 17.76 14.5 2.68.7 5.64 1.1 9.44 1.26 1.6.07 18 .12 34.44.12s32.84-.02 34.4-.1c4.4-.2 6.96-.55 9.8-1.28 7.78-2.01 14.23-7.3 17.74-14.53 1.76-3.64 2.66-7.18 3.07-12.32.08-1.12.12-18.97.12-36.8 0-17.85-.04-35.67-.13-36.8-.4-5.2-1.3-8.7-3.13-12.43-1.5-3.04-3.16-5.3-5.56-7.62C116.9 4 111.64 1.5 105.37.6 102.34.16 101.73.03 86.2 0H65z"
+        transform="translate(1 1)"
+      />
+      <path
+        fill="#fff"
+        d="M66 18c-13 0-14.67.06-19.8.3-5.1.23-8.6 1.04-11.64 2.22-3.16 1.23-5.84 2.87-8.5 5.54-2.67 2.67-4.3 5.35-5.54 8.5-1.2 3.05-2 6.54-2.23 11.65C18.06 51.33 18 52.96 18 66s.06 14.67.3 19.78c.22 5.12 1.03 8.6 2.22 11.66 1.22 3.15 2.86 5.83 5.53 8.5 2.67 2.67 5.35 4.3 8.5 5.53 3.06 1.2 6.55 2 11.65 2.23 5.12.23 6.76.3 19.8.3 13 0 14.66-.07 19.78-.3 5.12-.23 8.6-1.03 11.66-2.23 3.15-1.23 5.83-2.87 8.5-5.53 2.67-2.67 4.3-5.35 5.53-8.5 1.2-3.06 2-6.54 2.23-11.66.23-5.1.3-6.75.3-19.78 0-13.04-.07-14.68-.3-19.8-.23-5.1-1.04-8.6-2.22-11.64-1.23-3.16-2.87-5.84-5.54-8.5-2.67-2.67-5.35-4.3-8.5-5.54-3.06-1.18-6.55-2-11.66-2.22-5.12-.24-6.75-.3-19.8-.3zm-4.3 8.65c1.28 0 2.7 0 4.3 0 12.82 0 14.34.05 19.4.28 4.67.2 7.22 1 8.9 1.65 2.25.87 3.84 1.9 5.52 3.6 1.68 1.67 2.72 3.27 3.6 5.5.65 1.7 1.43 4.24 1.64 8.92.23 5.05.28 6.57.28 19.4s-.05 14.32-.28 19.4c-.2 4.67-1 7.2-1.64 8.9-.88 2.25-1.92 3.84-3.6 5.52-1.68 1.68-3.27 2.72-5.52 3.6-1.7.65-4.23 1.43-8.9 1.64-5.06.23-6.58.28-19.4.28-12.82 0-14.34-.05-19.4-.28-4.68-.2-7.22-1-8.9-1.64-2.25-.88-3.84-1.92-5.52-3.6-1.68-1.68-2.72-3.27-3.6-5.52-.65-1.7-1.43-4.23-1.64-8.9-.23-5.06-.28-6.58-.28-19.4s.05-14.34.28-19.4c.2-4.68 1-7.22 1.64-8.9.88-2.24 1.92-3.83 3.6-5.52 1.68-1.68 3.27-2.72 5.52-3.6 1.7-.65 4.23-1.43 8.9-1.65 4.43-.2 6.15-.26 15.1-.27zm30 8c-3.2 0-5.77 2.57-5.77 5.75 0 3.2 2.58 5.77 5.77 5.77 3.18 0 5.76-2.58 5.76-5.77 0-3.18-2.58-5.76-5.76-5.76zm-25.63 6.72c-13.6 0-24.64 11.04-24.64 24.65 0 13.6 11.03 24.64 24.64 24.64 13.6 0 24.65-11.03 24.65-24.64 0-13.6-11.04-24.64-24.65-24.64zm0 8.65c8.84 0 16 7.16 16 16 0 8.84-7.16 16-16 16-8.84 0-16-7.16-16-16 0-8.84 7.16-16 16-16z"
+      />
+    </svg>
+  );
+}
+
+function Header({
+  author,
+  createdAt,
+}: {
+  author: InstagramPostData["author"];
+  createdAt?: string;
+}) {
+  return (
+    <header className="flex items-center gap-3 p-3">
+      <img
+        src={author.avatarUrl}
+        alt={`${author.name} avatar`}
+        width={32}
+        height={32}
+        className="size-8 rounded-full object-cover"
+      />
+      <div className="flex min-w-0 flex-1 items-center gap-1.5">
+        <span className="truncate text-sm font-semibold">{author.handle}</span>
+        {author.verified && (
+          <BadgeCheck
+            aria-label="Verified"
+            className="size-3.5 shrink-0 text-sky-500"
+          />
+        )}
+        {createdAt && (
+          <>
+            <span className="text-muted-foreground">·</span>
+            <span className="text-muted-foreground text-sm">
+              {formatRelativeTime(createdAt)}
+            </span>
+          </>
+        )}
+      </div>
+      <InstagramLogo className="size-5" />
+    </header>
+  );
+}
+
+function MediaGrid({
+  media,
+  onOpen,
+}: {
+  media: InstagramPostMedia[];
+  onOpen?: (index: number) => void;
+}) {
+  if (media.length === 0) return null;
+
+  const renderItem = (item: InstagramPostMedia, index: number) => (
+    <button
+      key={index}
+      type="button"
+      className="bg-muted relative block size-full overflow-hidden"
+      onClick={() => onOpen?.(index)}
+    >
+      {item.type === "image" ? (
+        <img
+          src={item.url}
+          alt={item.alt}
+          className="size-full object-cover"
+          loading="lazy"
+        />
+      ) : (
+        <video src={item.url} playsInline className="size-full object-cover" />
+      )}
+    </button>
+  );
+
+  if (media.length === 1) {
+    return (
+      <div className="aspect-square w-full overflow-hidden">
+        {renderItem(media[0], 0)}
+      </div>
+    );
+  }
+
+  if (media.length === 2) {
+    return (
+      <div className="grid aspect-square w-full grid-cols-2 gap-0.5 overflow-hidden">
+        {media.map(renderItem)}
+      </div>
+    );
+  }
+
+  if (media.length === 3) {
+    return (
+      <div className="grid aspect-square w-full grid-cols-2 gap-0.5 overflow-hidden">
+        <div className="h-full">{renderItem(media[0], 0)}</div>
+        <div className="grid h-full grid-rows-2 gap-0.5">
+          {media.slice(1).map((item, i) => (
+            <div key={i + 1} className="h-full">
+              {renderItem(item, i + 1)}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid aspect-square w-full grid-cols-2 gap-0.5 overflow-hidden">
+      {media.slice(0, 4).map((item, index) => (
+        <div key={index} className="relative h-full w-full">
+          {renderItem(item, index)}
+          {index === 3 && media.length > 4 && (
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/50">
+              <span className="text-2xl font-semibold text-white">
+                +{media.length - 4}
+              </span>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function PostBody({ text }: { text?: string }) {
+  if (!text) return null;
+  return (
+    <span className="text-sm leading-relaxed text-pretty wrap-break-word whitespace-pre-wrap">
+      {text}
+    </span>
+  );
+}
+
+function ActionButton({
+  icon: Icon,
+  label,
+  active,
+  hoverColor,
+  activeColor,
+  onClick,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  active?: boolean;
+  hoverColor: string;
+  activeColor?: string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick();
+          }}
+          className={cn("h-auto", hoverColor, active && activeColor)}
+          aria-label={label}
+        >
+          <Icon className="size-5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function PostActions({
+  stats,
+  onAction,
+}: {
+  stats?: InstagramPostData["stats"];
+  onAction: (action: string) => void;
+}) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className="flex items-center gap-1">
+        <ActionButton
+          icon={Heart}
+          label="Like"
+          active={stats?.isLiked}
+          hoverColor="hover:opacity-60"
+          activeColor="text-red-500 fill-red-500"
+          onClick={() => onAction("like")}
+        />
+        <ActionButton
+          icon={Share}
+          label="Share"
+          hoverColor="hover:opacity-60"
+          onClick={() => onAction("share")}
+        />
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export function InstagramPost({
+  post,
+  className,
+  onAction,
+}: InstagramPostProps) {
+  return (
+    <div
+      className={cn("flex max-w-xl flex-col gap-3", className)}
+      data-tool-ui-id={post.id}
+      data-slot="instagram-post"
+    >
+      <article className="bg-card overflow-hidden rounded-lg border shadow-sm">
+        <Header author={post.author} createdAt={post.createdAt} />
+
+        {post.media && post.media.length > 0 && (
+          <MediaGrid media={post.media} />
+        )}
+
+        <div className="flex flex-col gap-2 p-3">
+          <PostActions
+            stats={post.stats}
+            onAction={(action) => onAction?.(action, post)}
+          />
+          {post.text && (
+            <div>
+              <span className="text-sm font-semibold">
+                {post.author.handle}
+              </span>{" "}
+              <PostBody text={post.text} />
+            </div>
+          )}
+        </div>
+      </article>
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/instagram-post/schema.ts b/frontend/src/toolui/components/instagram-post/schema.ts
new file mode 100644
index 00000000..bb8b9202
--- /dev/null
+++ b/frontend/src/toolui/components/instagram-post/schema.ts
@@ -0,0 +1,57 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+
+export const InstagramPostAuthorSchema = z.object({
+  name: z.string(),
+  handle: z.string(),
+  avatarUrl: z.string(),
+  verified: z.boolean().optional(),
+});
+
+export const InstagramPostMediaSchema = z.object({
+  type: z.enum(["image", "video"]),
+  url: z.string(),
+  alt: z.string(),
+});
+
+export const InstagramPostStatsSchema = z.object({
+  likes: z.number().optional(),
+  isLiked: z.boolean().optional(),
+});
+
+export interface InstagramPostData {
+  id: string;
+  author: z.infer<typeof InstagramPostAuthorSchema>;
+  text?: string;
+  media?: z.infer<typeof InstagramPostMediaSchema>[];
+  stats?: z.infer<typeof InstagramPostStatsSchema>;
+  createdAt?: string;
+}
+
+export const SerializableInstagramPostSchema: z.ZodType<InstagramPostData> =
+  z.object({
+    id: z.string(),
+    author: InstagramPostAuthorSchema,
+    text: z.string().optional(),
+    media: z.array(InstagramPostMediaSchema).optional(),
+    stats: InstagramPostStatsSchema.optional(),
+    createdAt: z.string().optional(),
+  });
+
+export type InstagramPostAuthor = z.infer<typeof InstagramPostAuthorSchema>;
+export type InstagramPostMedia = z.infer<typeof InstagramPostMediaSchema>;
+export type InstagramPostStats = z.infer<typeof InstagramPostStatsSchema>;
+
+const SerializableInstagramPostSchemaContract = defineToolUiContract(
+  "InstagramPost",
+  SerializableInstagramPostSchema,
+);
+
+export const parseSerializableInstagramPost: (
+  input: unknown,
+) => InstagramPostData = SerializableInstagramPostSchemaContract.parse;
+
+export const safeParseSerializableInstagramPost: (
+  input: unknown,
+) => InstagramPostData | null =
+  SerializableInstagramPostSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/item-carousel/README.md b/frontend/src/toolui/components/item-carousel/README.md
new file mode 100644
index 00000000..31c2f314
--- /dev/null
+++ b/frontend/src/toolui/components/item-carousel/README.md
@@ -0,0 +1,19 @@
+# Item Carousel
+
+Implementation for the "item-carousel" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/item-carousel/index.tsx
+- serializable schema + parse helpers: components/tool-ui/item-carousel/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/item-carousel/content.mdx
+- Preset payload: lib/presets/item-carousel.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/item-carousel/_adapter.tsx b/frontend/src/toolui/components/item-carousel/_adapter.tsx
new file mode 100644
index 00000000..58389306
--- /dev/null
+++ b/frontend/src/toolui/components/item-carousel/_adapter.tsx
@@ -0,0 +1,12 @@
+/**
+ * UI and utility re-exports for copy-standalone portability.
+ *
+ * This file centralizes dependencies so the component can be easily
+ * copied to another project by updating these imports to match the target
+ * project's paths.
+ */
+export { cn } from "@toolui/lib/utils";
+
+export { Button } from "@toolui/ui/button";
+export { Card } from "@toolui/ui/card";
+export { ChevronLeft, ChevronRight } from "lucide-react";
diff --git a/frontend/src/toolui/components/item-carousel/index.tsx b/frontend/src/toolui/components/item-carousel/index.tsx
new file mode 100644
index 00000000..966641cf
--- /dev/null
+++ b/frontend/src/toolui/components/item-carousel/index.tsx
@@ -0,0 +1,8 @@
+export { ItemCarousel } from "./item-carousel";
+export { ItemCard } from "./item-card";
+export type {
+  Item,
+  ItemCarouselProps,
+  SerializableItem,
+  SerializableItemCarousel,
+} from "./schema";
diff --git a/frontend/src/toolui/components/item-carousel/item-card.tsx b/frontend/src/toolui/components/item-carousel/item-card.tsx
new file mode 100644
index 00000000..fe2920e1
--- /dev/null
+++ b/frontend/src/toolui/components/item-carousel/item-card.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { cn, Button, Card } from "./_adapter";
+import type { Item } from "./schema";
+
+interface ItemCardProps {
+  item: Item;
+  onItemClick?: (itemId: string) => void;
+  onItemAction?: (itemId: string, actionId: string) => void;
+}
+
+export function ItemCard({ item, onItemClick, onItemAction }: ItemCardProps) {
+  const { id, name, subtitle, image, color, actions } = item;
+  const isCardInteractive = typeof onItemClick === "function";
+
+  const handleCardClick = () => {
+    if (!isCardInteractive) return;
+    onItemClick?.(id);
+  };
+
+  const handleActionClick = (actionId: string) => {
+    onItemAction?.(id, actionId);
+  };
+
+  return (
+    <Card
+      className={cn(
+        "group @container/card relative flex w-52 min-w-48 flex-col gap-0 self-stretch overflow-clip rounded-md p-0 @lg:w-56",
+        isCardInteractive && "cursor-pointer hover:shadow",
+        "touch-manipulation",
+      )}
+    >
+      {isCardInteractive && (
+        <button
+          type="button"
+          aria-label={`View item: ${name}`}
+          className={cn(
+            "absolute inset-0 z-10 rounded-md",
+            "cursor-pointer touch-manipulation",
+            "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+          )}
+          onClick={handleCardClick}
+        />
+      )}
+
+      <div className="bg-muted relative aspect-square w-full overflow-hidden">
+        {image ? (
+          <img
+            src={image}
+            alt={name}
+            loading="lazy"
+            decoding="async"
+            draggable={false}
+            className={cn(
+              "h-full w-full object-cover transition-transform duration-200",
+              isCardInteractive && "group-hover:scale-105",
+            )}
+          />
+        ) : (
+          <div
+            className={cn(
+              "h-full w-full transition-transform duration-200",
+              isCardInteractive && "group-hover:scale-105",
+            )}
+            style={color ? { backgroundColor: color } : undefined}
+            role="img"
+            aria-label={name}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-1 flex-col gap-1 p-3">
+        <div className="flex flex-col gap-1">
+          <h3 className="line-clamp-2 text-sm leading-tight font-medium">
+            {name}
+          </h3>
+
+          {subtitle && (
+            <p className="text-muted-foreground line-clamp-1 text-sm">
+              {subtitle}
+            </p>
+          )}
+        </div>
+
+        {actions && actions.length > 0 && (
+          <div
+            className={cn(
+              "relative z-20 mt-auto flex flex-col-reverse gap-2 pt-2 @[176px]/card:flex-row",
+            )}
+          >
+            {actions.map((action) => (
+              <Button
+                key={action.id}
+                type="button"
+                variant={action.variant ?? "default"}
+                size="sm"
+                disabled={action.disabled}
+                className="min-h-11 w-full px-3 md:min-h-8 @[176px]/card:h-8 @[176px]/card:w-auto @[176px]/card:flex-1"
+                onClick={() => handleActionClick(action.id)}
+              >
+                {action.icon}
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/frontend/src/toolui/components/item-carousel/item-carousel.tsx b/frontend/src/toolui/components/item-carousel/item-carousel.tsx
new file mode 100644
index 00000000..6c0b601b
--- /dev/null
+++ b/frontend/src/toolui/components/item-carousel/item-carousel.tsx
@@ -0,0 +1,404 @@
+"use client";
+
+import { useRef, useState, useEffect, useCallback } from "react";
+import { cn, Button, Card, ChevronLeft, ChevronRight } from "./_adapter";
+import { ItemCard } from "./item-card";
+import { prefersReducedMotion } from "../shared/utils";
+import type { ItemCarouselProps } from "./schema";
+
+const SCROLL_PADDING_STYLE = { scrollPaddingInline: "1rem" };
+
+const SCROLL_EDGE_THRESHOLD_PX = 8;
+const SNAP_EPSILON_PX = 5;
+const SCROLL_ANIMATION_DURATION_MS = 300;
+const PAGE_SCROLL_RATIO = 0.8;
+const PAGE_SCROLL_BREAKPOINT_PX = 640;
+
+type ScrollDirection = "left" | "right";
+
+interface ScrollAnimationState {
+  target: number;
+  start: number;
+  startTime: number;
+  duration: number;
+  onComplete?: () => void;
+}
+
+function useSmoothScroll() {
+  const animationRef = useRef<ScrollAnimationState | null>(null);
+  const frameRef = useRef<number | null>(null);
+
+  const cancelAnimation = useCallback(() => {
+    if (frameRef.current !== null) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+    animationRef.current = null;
+  }, []);
+
+  useEffect(() => cancelAnimation, [cancelAnimation]);
+
+  const scrollTo = useCallback(
+    (
+      element: HTMLElement,
+      target: number,
+      duration = SCROLL_ANIMATION_DURATION_MS,
+      onComplete?: () => void,
+    ) => {
+      if (prefersReducedMotion() || duration <= 0) {
+        element.scrollLeft = target;
+        onComplete?.();
+        return;
+      }
+
+      cancelAnimation();
+
+      animationRef.current = {
+        target,
+        start: element.scrollLeft,
+        startTime: performance.now(),
+        duration,
+        onComplete,
+      };
+
+      element.style.scrollSnapType = "none";
+
+      const step = () => {
+        const anim = animationRef.current;
+        if (!anim) return;
+
+        const elapsed = performance.now() - anim.startTime;
+        const progress = Math.min(elapsed / anim.duration, 1);
+        const eased = 1 - Math.pow(1 - progress, 3);
+
+        element.scrollLeft = anim.start + (anim.target - anim.start) * eased;
+
+        if (progress < 1) {
+          frameRef.current = requestAnimationFrame(step);
+          return;
+        }
+
+        element.scrollLeft = anim.target;
+        const callback = anim.onComplete;
+        cancelAnimation();
+
+        requestAnimationFrame(() => {
+          element.style.scrollSnapType = "";
+          callback?.();
+        });
+      };
+
+      frameRef.current = requestAnimationFrame(step);
+    },
+    [cancelAnimation],
+  );
+
+  const isAnimating = useCallback(
+    () => animationRef.current !== null && frameRef.current !== null,
+    [],
+  );
+
+  return { scrollTo, isAnimating, cancelAnimation };
+}
+
+function useScrollEdgeState(
+  scrollRef: React.RefObject<HTMLDivElement | null>,
+  itemCount: number,
+) {
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateState = useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const scrollLeft = Math.round(container.scrollLeft);
+    const maxScroll = Math.max(
+      0,
+      Math.round(container.scrollWidth - container.clientWidth),
+    );
+
+    setCanScrollLeft(scrollLeft > SCROLL_EDGE_THRESHOLD_PX);
+    setCanScrollRight(scrollLeft < maxScroll - SCROLL_EDGE_THRESHOLD_PX);
+  }, [scrollRef]);
+
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    let rafId: number | null = null;
+
+    const scheduleUpdate = () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        updateState();
+      });
+    };
+
+    scheduleUpdate();
+
+    container.addEventListener("scroll", scheduleUpdate, { passive: true });
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    resizeObserver.observe(container);
+
+    return () => {
+      container.removeEventListener("scroll", scheduleUpdate);
+      resizeObserver.disconnect();
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, [scrollRef, updateState, itemCount]);
+
+  return { canScrollLeft, canScrollRight };
+}
+
+function CarouselNavButton({
+  direction,
+  visible,
+  onClick,
+}: {
+  direction: ScrollDirection;
+  visible: boolean;
+  onClick: () => void;
+}) {
+  const isLeft = direction === "left";
+  const Icon = isLeft ? ChevronLeft : ChevronRight;
+
+  return (
+    <Button
+      type="button"
+      variant="secondary"
+      size="icon-sm"
+      className={cn(
+        "pointer-events-none scale-90 border-none opacity-0",
+        "bg-background/60 absolute inset-y-0 z-20 my-auto hidden h-[6cqh] min-h-[50px] rounded-2xl backdrop-blur-lg",
+        "transition-[opacity,transform] duration-250 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none",
+        "@md:flex",
+        isLeft ? "left-1.5" : "right-1.5",
+        visible &&
+          "pointer-events-auto scale-100 opacity-100 @md:group-focus-within:pointer-events-auto @md:group-focus-within:scale-100 @md:group-focus-within:opacity-100 @md:group-hover:pointer-events-auto @md:group-hover:scale-100 @md:group-hover:opacity-100",
+      )}
+      onClick={onClick}
+      aria-label={isLeft ? "Scroll left" : "Scroll right"}
+      tabIndex={visible ? 0 : -1}
+      aria-hidden={!visible}
+    >
+      <Icon className="h-4 w-4" />
+    </Button>
+  );
+}
+
+interface ItemCarouselHeaderProps {
+  title?: string;
+  description?: string;
+}
+
+function ItemCarouselHeader({ title, description }: ItemCarouselHeaderProps) {
+  if (!title && !description) return null;
+
+  return (
+    <div className="px-4 pt-4 pb-1">
+      {title && (
+        <h3 className="text-[15px] leading-tight font-semibold tracking-tight">
+          {title}
+        </h3>
+      )}
+      {description && (
+        <p className="text-muted-foreground mt-1 text-sm leading-snug">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
+
+interface EmptyStateProps {
+  id: string;
+  className?: string;
+}
+
+function EmptyState({ id, className }: EmptyStateProps) {
+  return (
+    <Card
+      data-tool-ui-id={id}
+      data-slot="item-carousel"
+      className={cn("flex h-48 items-center justify-center", className)}
+    >
+      <p className="text-muted-foreground text-sm">No items to display</p>
+    </Card>
+  );
+}
+
+function ItemCarouselRoot({
+  id,
+  title,
+  description,
+  items,
+  className,
+  onItemClick,
+  onItemAction,
+}: ItemCarouselProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const targetIndexRef = useRef<number | null>(null);
+
+  const { scrollTo, isAnimating } = useSmoothScroll();
+  const { canScrollLeft, canScrollRight } = useScrollEdgeState(
+    scrollRef,
+    items.length,
+  );
+
+  const scroll = useCallback(
+    (direction: ScrollDirection) => {
+      const container = scrollRef.current;
+      if (!container) return;
+
+      const paddingValue = window.getComputedStyle(container).scrollPaddingLeft;
+      const scrollPaddingLeft = Number.isFinite(Number.parseFloat(paddingValue))
+        ? Number.parseFloat(paddingValue)
+        : 0;
+
+      const itemElements = Array.from(
+        container.querySelectorAll<HTMLElement>("[data-carousel-item]"),
+      );
+      if (itemElements.length === 0) return;
+
+      const snapPositions = itemElements.map((el) =>
+        Math.max(0, el.offsetLeft - scrollPaddingLeft),
+      );
+
+      const scrollLeft = Math.round(container.scrollLeft);
+      let currentIndex: number;
+      if (isAnimating()) {
+        currentIndex = Math.min(
+          targetIndexRef.current ?? 0,
+          snapPositions.length - 1,
+        );
+      } else {
+        currentIndex = snapPositions.length - 1;
+        for (let i = 0; i < snapPositions.length; i++) {
+          const snap = snapPositions[i];
+          if (Math.abs(snap - scrollLeft) < SNAP_EPSILON_PX) {
+            currentIndex = i;
+            break;
+          }
+          if (snap > scrollLeft) {
+            currentIndex = Math.max(0, i - 1);
+            break;
+          }
+        }
+      }
+
+      const itemStep =
+        itemElements.length > 1
+          ? itemElements[1].offsetLeft - itemElements[0].offsetLeft
+          : 0;
+      const safeStep =
+        itemStep > 0 ? itemStep : itemElements[0].offsetWidth || 1;
+
+      const pageIndexStep =
+        container.clientWidth >= PAGE_SCROLL_BREAKPOINT_PX
+          ? Math.max(
+              1,
+              Math.floor(
+                (container.clientWidth * PAGE_SCROLL_RATIO) / safeStep,
+              ),
+            )
+          : 1;
+
+      const targetIndex =
+        direction === "right"
+          ? Math.min(currentIndex + pageIndexStep, itemElements.length - 1)
+          : Math.max(currentIndex - pageIndexStep, 0);
+
+      targetIndexRef.current = targetIndex;
+      const targetScrollLeft = snapPositions[targetIndex];
+
+      if (Math.abs(targetScrollLeft - container.scrollLeft) > 1) {
+        scrollTo(
+          container,
+          targetScrollLeft,
+          SCROLL_ANIMATION_DURATION_MS,
+          () => {
+            targetIndexRef.current = null;
+          },
+        );
+      }
+    },
+    [scrollTo, isAnimating],
+  );
+
+  const handleScrollLeft = useCallback(() => scroll("left"), [scroll]);
+  const handleScrollRight = useCallback(() => scroll("right"), [scroll]);
+
+  if (items.length === 0) {
+    return <EmptyState id={id} className={className} />;
+  }
+
+  return (
+    <div
+      data-tool-ui-id={id}
+      data-slot="item-carousel"
+      className={cn(
+        "bg-background @container relative isolate w-full gap-0 overflow-hidden rounded-2xl border p-0",
+        className,
+      )}
+    >
+      <ItemCarouselHeader title={title} description={description} />
+
+      <div className="group relative">
+        <CarouselNavButton
+          direction="left"
+          visible={canScrollLeft}
+          onClick={handleScrollLeft}
+        />
+        <CarouselNavButton
+          direction="right"
+          visible={canScrollRight}
+          onClick={handleScrollRight}
+        />
+
+        <div
+          ref={scrollRef}
+          className={cn(
+            "grid auto-cols-max grid-flow-col gap-4 overflow-x-auto overscroll-x-contain p-4",
+            "snap-x snap-mandatory",
+          )}
+          role="list"
+          style={SCROLL_PADDING_STYLE}
+        >
+          {items.map((item) => (
+            <div
+              key={item.id}
+              data-carousel-item
+              data-item-id={item.id}
+              role="listitem"
+              className="flex snap-start snap-always"
+            >
+              <ItemCard
+                item={item}
+                onItemClick={onItemClick}
+                onItemAction={onItemAction}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type ItemCarouselComponent = typeof ItemCarouselRoot & {
+  Root: typeof ItemCarouselRoot;
+  Header: typeof ItemCarouselHeader;
+  EmptyState: typeof EmptyState;
+  NavButton: typeof CarouselNavButton;
+  Card: typeof ItemCard;
+};
+
+export const ItemCarousel = Object.assign(ItemCarouselRoot, {
+  Root: ItemCarouselRoot,
+  Header: ItemCarouselHeader,
+  EmptyState,
+  NavButton: CarouselNavButton,
+  Card: ItemCard,
+}) as ItemCarouselComponent;
diff --git a/frontend/src/toolui/components/item-carousel/schema.ts b/frontend/src/toolui/components/item-carousel/schema.ts
new file mode 100644
index 00000000..d20a72b5
--- /dev/null
+++ b/frontend/src/toolui/components/item-carousel/schema.ts
@@ -0,0 +1,77 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ActionSchema,
+  SerializableActionSchema,
+  ToolUIIdSchema,
+} from "../shared/schema";
+
+export const ItemSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1),
+  subtitle: z.string().optional(),
+  image: z.url().optional(),
+  color: z.string().optional(),
+  actions: z.array(ActionSchema).optional(),
+});
+
+export const ItemCarouselPropsSchema = z.object({
+  id: ToolUIIdSchema,
+  title: z.string().optional(),
+  description: z.string().optional(),
+  items: z.array(ItemSchema),
+  className: z.string().optional(),
+});
+
+export type Item = z.infer<typeof ItemSchema>;
+
+export type ItemCarouselProps = z.infer<typeof ItemCarouselPropsSchema> & {
+  onItemClick?: (itemId: string) => void;
+  onItemAction?: (itemId: string, actionId: string) => void;
+};
+
+export const SerializableItemSchema = ItemSchema.extend({
+  actions: z.array(SerializableActionSchema).optional(),
+});
+
+export const SerializableItemCarouselSchema = ItemCarouselPropsSchema.omit({
+  className: true,
+})
+  .extend({
+    items: z.array(SerializableItemSchema),
+  })
+  .superRefine((payload, ctx) => {
+    const seenItemIds = new Map<string, number>();
+
+    payload.items.forEach((item, index) => {
+      const firstSeenAt = seenItemIds.get(item.id);
+      if (firstSeenAt !== undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["items", index, "id"],
+          message: `duplicate item id '${item.id}' (first seen at index ${firstSeenAt})`,
+        });
+        return;
+      }
+      seenItemIds.set(item.id, index);
+    });
+  });
+
+export type SerializableItem = z.infer<typeof SerializableItemSchema>;
+export type SerializableItemCarousel = z.infer<
+  typeof SerializableItemCarouselSchema
+>;
+
+const SerializableItemCarouselSchemaContract = defineToolUiContract(
+  "ItemCarousel",
+  SerializableItemCarouselSchema,
+);
+
+export const parseSerializableItemCarousel: (
+  input: unknown,
+) => SerializableItemCarousel = SerializableItemCarouselSchemaContract.parse;
+
+export const safeParseSerializableItemCarousel: (
+  input: unknown,
+) => SerializableItemCarousel | null =
+  SerializableItemCarouselSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/link-preview/README.md b/frontend/src/toolui/components/link-preview/README.md
new file mode 100644
index 00000000..0fab3dbb
--- /dev/null
+++ b/frontend/src/toolui/components/link-preview/README.md
@@ -0,0 +1,19 @@
+# Link Preview
+
+Implementation for the "link-preview" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/link-preview/index.ts
+- serializable schema + parse helpers: components/tool-ui/link-preview/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/link-preview/content.mdx
+- Preset payload: lib/presets/link-preview.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/link-preview/_adapter.tsx b/frontend/src/toolui/components/link-preview/_adapter.tsx
new file mode 100644
index 00000000..ac928498
--- /dev/null
+++ b/frontend/src/toolui/components/link-preview/_adapter.tsx
@@ -0,0 +1,6 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ */
+"use client";
+
+export { cn } from "@toolui/lib/utils";
diff --git a/frontend/src/toolui/components/link-preview/index.ts b/frontend/src/toolui/components/link-preview/index.ts
new file mode 100644
index 00000000..cea9fe77
--- /dev/null
+++ b/frontend/src/toolui/components/link-preview/index.ts
@@ -0,0 +1,3 @@
+export { LinkPreview } from "./link-preview";
+export type { LinkPreviewProps } from "./link-preview";
+export type { SerializableLinkPreview } from "./schema";
diff --git a/frontend/src/toolui/components/link-preview/link-preview.tsx b/frontend/src/toolui/components/link-preview/link-preview.tsx
new file mode 100644
index 00000000..9d2ae161
--- /dev/null
+++ b/frontend/src/toolui/components/link-preview/link-preview.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { Globe } from "lucide-react";
+import { cn } from "./_adapter";
+
+import {
+  RATIO_CLASS_MAP,
+  getFitClass,
+  openSafeNavigationHref,
+  sanitizeHref,
+} from "../shared/media";
+import type { SerializableLinkPreview } from "./schema";
+
+const FALLBACK_LOCALE = "en-US";
+const CONTENT_SPACING = "px-5 py-4 gap-2";
+
+export interface LinkPreviewProps extends SerializableLinkPreview {
+  className?: string;
+  onNavigate?: (href: string, preview: SerializableLinkPreview) => void;
+}
+
+export function LinkPreview(props: LinkPreviewProps) {
+  const { className, onNavigate, ...serializable } = props;
+
+  const {
+    id,
+    href: rawHref,
+    title,
+    description,
+    image,
+    domain,
+    favicon,
+    ratio = "16:9",
+    fit = "cover",
+    locale: providedLocale,
+  } = serializable;
+
+  const locale = providedLocale ?? FALLBACK_LOCALE;
+  const sanitizedHref = sanitizeHref(rawHref);
+
+  const previewData: SerializableLinkPreview = {
+    ...serializable,
+    href: sanitizedHref ?? rawHref,
+    locale,
+  };
+
+  const handleClick = () => {
+    if (!sanitizedHref) return;
+    if (onNavigate) {
+      onNavigate(sanitizedHref, previewData);
+    } else {
+      openSafeNavigationHref(sanitizedHref);
+    }
+  };
+
+  return (
+    <article
+      className={cn("relative w-full max-w-md min-w-80", className)}
+      lang={locale}
+      data-tool-ui-id={id}
+      data-slot="link-preview"
+    >
+      <div
+        className={cn(
+          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
+          "border-border bg-card border text-sm shadow-xs",
+          sanitizedHref && "cursor-pointer",
+        )}
+        onClick={sanitizedHref ? handleClick : undefined}
+        role={sanitizedHref ? "link" : undefined}
+        tabIndex={sanitizedHref ? 0 : undefined}
+        onKeyDown={
+          sanitizedHref
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleClick();
+                }
+              }
+            : undefined
+        }
+      >
+        <div className="flex flex-col">
+          {image && (
+            <div
+              className={cn(
+                "bg-muted relative w-full overflow-hidden",
+                ratio !== "auto" ? RATIO_CLASS_MAP[ratio] : "aspect-[5/3]",
+              )}
+            >
+              <img
+                src={image}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className={cn(
+                  "absolute inset-0 h-full w-full",
+                  getFitClass(fit),
+                  "object-center transition-transform duration-200 group-hover:scale-[1.01]",
+                )}
+              />
+            </div>
+          )}
+          <div className={cn("flex flex-col", CONTENT_SPACING)}>
+            {domain && (
+              <div className="text-muted-foreground flex items-center gap-2 text-xs">
+                {favicon ? (
+                  <img
+                    src={favicon}
+                    alt=""
+                    aria-hidden="true"
+                    width={16}
+                    height={16}
+                    className="size-4 rounded-full object-cover"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                ) : (
+                  <div className="border-border/60 bg-muted flex size-4 shrink-0 items-center justify-center rounded-full border">
+                    <Globe className="h-2.5 w-2.5" aria-hidden="true" />
+                  </div>
+                )}
+                <span>{domain}</span>
+              </div>
+            )}
+            {title && (
+              <h3 className="text-foreground text-base font-medium text-pretty">
+                <span className="line-clamp-2">{title}</span>
+              </h3>
+            )}
+            {description && (
+              <p className="text-muted-foreground leading-snug text-pretty">
+                <span className="line-clamp-2">{description}</span>
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/src/toolui/components/link-preview/schema.ts b/frontend/src/toolui/components/link-preview/schema.ts
new file mode 100644
index 00000000..3bde91b5
--- /dev/null
+++ b/frontend/src/toolui/components/link-preview/schema.ts
@@ -0,0 +1,43 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+import { AspectRatioSchema, MediaFitSchema } from "../shared/media";
+
+export const SerializableLinkPreviewSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  href: z.url(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  image: z.url().optional(),
+  domain: z.string().optional(),
+  favicon: z.url().optional(),
+  ratio: AspectRatioSchema.optional(),
+  fit: MediaFitSchema.optional(),
+  createdAt: z.string().datetime().optional(),
+  locale: z.string().optional(),
+});
+
+export type SerializableLinkPreview = z.infer<
+  typeof SerializableLinkPreviewSchema
+>;
+
+const SerializableLinkPreviewSchemaContract = defineToolUiContract(
+  "LinkPreview",
+  SerializableLinkPreviewSchema,
+);
+
+export const parseSerializableLinkPreview: (
+  input: unknown,
+) => SerializableLinkPreview = SerializableLinkPreviewSchemaContract.parse;
+
+export const safeParseSerializableLinkPreview: (
+  input: unknown,
+) => SerializableLinkPreview | null =
+  SerializableLinkPreviewSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/linkedin-post/README.md b/frontend/src/toolui/components/linkedin-post/README.md
new file mode 100644
index 00000000..1869eff8
--- /dev/null
+++ b/frontend/src/toolui/components/linkedin-post/README.md
@@ -0,0 +1,19 @@
+# Linkedin Post
+
+Implementation for the "linkedin-post" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/linkedin-post/index.ts
+- serializable schema + parse helpers: components/tool-ui/linkedin-post/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/social-post/content.mdx
+- Preset payload: lib/presets/linkedin-post.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/linkedin-post/_adapter.tsx b/frontend/src/toolui/components/linkedin-post/_adapter.tsx
new file mode 100644
index 00000000..c314b96c
--- /dev/null
+++ b/frontend/src/toolui/components/linkedin-post/_adapter.tsx
@@ -0,0 +1,19 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn      → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button  → shadcn/ui Button
+ *   Tooltip → shadcn/ui Tooltip
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@toolui/ui/tooltip";
diff --git a/frontend/src/toolui/components/linkedin-post/index.ts b/frontend/src/toolui/components/linkedin-post/index.ts
new file mode 100644
index 00000000..2fd27172
--- /dev/null
+++ b/frontend/src/toolui/components/linkedin-post/index.ts
@@ -0,0 +1,9 @@
+export { LinkedInPost } from "./linkedin-post";
+export type { LinkedInPostProps } from "./linkedin-post";
+export type {
+  LinkedInPostData,
+  LinkedInPostAuthor,
+  LinkedInPostMedia,
+  LinkedInPostLinkPreview,
+  LinkedInPostStats,
+} from "./schema";
diff --git a/frontend/src/toolui/components/linkedin-post/linkedin-post.tsx b/frontend/src/toolui/components/linkedin-post/linkedin-post.tsx
new file mode 100644
index 00000000..51fcd221
--- /dev/null
+++ b/frontend/src/toolui/components/linkedin-post/linkedin-post.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import * as React from "react";
+import { ThumbsUp, Share } from "lucide-react";
+import {
+  cn,
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./_adapter";
+import { formatCount, formatRelativeTime, getDomain } from "../shared/utils";
+
+import { resolveSafeNavigationHref } from "../shared/media";
+import type {
+  LinkedInPostData,
+  LinkedInPostMedia,
+  LinkedInPostLinkPreview,
+} from "./schema";
+
+const TEXT_PREVIEW_LENGTH = 280;
+
+export interface LinkedInPostProps {
+  post: LinkedInPostData;
+  className?: string;
+  onAction?: (action: string, post: LinkedInPostData) => void;
+}
+
+function LinkedInLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 72 72"
+      className={className}
+      role="img"
+      aria-label="LinkedIn logo"
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M8 72h56c4.42 0 8-3.58 8-8V8c0-4.42-3.58-8-8-8H8C3.58 0 0 3.58 0 8v56c0 4.42 3.58 8 8 8z"
+          fill="currentColor"
+        />
+        <path
+          d="M62 62H51.3V43.8c0-4.98-1.9-7.78-5.83-7.78-4.3 0-6.54 2.9-6.54 7.78V62H28.63V27.33h10.3v4.67c0 0 3.1-5.73 10.45-5.73 7.36 0 12.62 4.5 12.62 13.8V62zM16.35 22.8c-3.5 0-6.35-2.86-6.35-6.4 0-3.52 2.85-6.4 6.35-6.4 3.5 0 6.35 2.88 6.35 6.4 0 3.54-2.85 6.4-6.35 6.4zM11.03 62h10.74V27.33H11.03V62z"
+          fill="#FFF"
+        />
+      </g>
+    </svg>
+  );
+}
+
+function Header({
+  author,
+  createdAt,
+}: {
+  author: LinkedInPostData["author"];
+  createdAt?: string;
+}) {
+  return (
+    <header className="flex items-start gap-3">
+      <img
+        src={author.avatarUrl}
+        alt={`${author.name} avatar`}
+        width={48}
+        height={48}
+        className="size-12 rounded-full object-cover"
+      />
+      <div className="flex min-w-0 flex-1 flex-col leading-tight">
+        <span className="text-sm font-semibold">{author.name}</span>
+        {author.headline && (
+          <span className="text-muted-foreground line-clamp-1 text-xs">
+            {author.headline}
+          </span>
+        )}
+        {createdAt && (
+          <div className="text-muted-foreground mt-0.5 flex items-center gap-1 text-xs">
+            <span>{formatRelativeTime(createdAt)}</span>
+            <span>·</span>
+            <span>Edited</span>
+          </div>
+        )}
+      </div>
+      <LinkedInLogo className="size-5 text-[#0077b5]" />
+    </header>
+  );
+}
+
+function PostBody({ text }: { text?: string }) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const shouldTruncate = text && text.length > TEXT_PREVIEW_LENGTH;
+
+  if (!text) return null;
+
+  return (
+    <div className="text-sm leading-relaxed text-pretty wrap-break-word whitespace-pre-wrap">
+      {shouldTruncate && !isExpanded ? (
+        <>
+          {text.slice(0, TEXT_PREVIEW_LENGTH)}
+          ...
+          <button
+            onClick={() => setIsExpanded(true)}
+            className="text-muted-foreground hover:text-foreground ml-1 font-medium hover:underline"
+          >
+            see more
+          </button>
+        </>
+      ) : (
+        text
+      )}
+    </div>
+  );
+}
+
+function PostMedia({ media }: { media: LinkedInPostMedia }) {
+  return (
+    <div className="overflow-hidden rounded-lg">
+      {media.type === "image" ? (
+        <img
+          src={media.url}
+          alt={media.alt}
+          className="w-full object-cover"
+          style={{ aspectRatio: "16/9" }}
+          loading="lazy"
+        />
+      ) : (
+        <video
+          src={media.url}
+          controls
+          playsInline
+          className="w-full object-contain"
+          style={{ aspectRatio: "16/9" }}
+        />
+      )}
+    </div>
+  );
+}
+
+function PostLinkPreview({ preview }: { preview: LinkedInPostLinkPreview }) {
+  const href = resolveSafeNavigationHref(preview.url);
+  const domain = preview.domain ?? getDomain(preview.url);
+  const content = (
+    <>
+      {preview.imageUrl && (
+        <img
+          src={preview.imageUrl}
+          alt=""
+          className="h-40 w-full object-cover"
+          loading="lazy"
+        />
+      )}
+      <div className="p-3">
+        {preview.title && (
+          <div className="line-clamp-2 font-medium text-pretty">
+            {preview.title}
+          </div>
+        )}
+        {domain && (
+          <div className="text-muted-foreground mt-1 text-xs">{domain}</div>
+        )}
+      </div>
+    </>
+  );
+
+  if (!href) {
+    return (
+      <div className="block overflow-hidden rounded-lg border">{content}</div>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="hover:bg-muted/50 block overflow-hidden rounded-lg border transition-colors"
+    >
+      {content}
+    </a>
+  );
+}
+
+function ActionButton({
+  icon: Icon,
+  label,
+  count,
+  active,
+  hoverColor,
+  activeColor,
+  onClick,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  count?: number;
+  active?: boolean;
+  hoverColor: string;
+  activeColor?: string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick();
+          }}
+          className={cn(
+            "h-auto gap-1.5 px-3 py-2",
+            hoverColor,
+            active && activeColor,
+          )}
+          aria-label={label}
+        >
+          <Icon className="size-4" />
+          <span className="text-xs font-medium">{label}</span>
+          {count !== undefined && (
+            <span className="text-muted-foreground text-xs">
+              ({formatCount(count)})
+            </span>
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function PostActions({
+  stats,
+  onAction,
+}: {
+  stats?: LinkedInPostData["stats"];
+  onAction: (action: string) => void;
+}) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className="mt-1 flex items-center gap-1 border-t pt-1.5">
+        <ActionButton
+          icon={ThumbsUp}
+          label="Like"
+          active={stats?.isLiked}
+          hoverColor="hover:bg-muted"
+          activeColor="text-blue-600 fill-blue-600"
+          onClick={() => onAction("like")}
+        />
+        <ActionButton
+          icon={Share}
+          label="Share"
+          hoverColor="hover:bg-muted"
+          onClick={() => onAction("share")}
+        />
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export function LinkedInPost({ post, className, onAction }: LinkedInPostProps) {
+  return (
+    <div
+      className={cn("flex max-w-xl flex-col gap-3", className)}
+      data-tool-ui-id={post.id}
+      data-slot="linkedin-post"
+    >
+      <article className="bg-card flex flex-col gap-3 rounded-lg border p-3 shadow-sm">
+        <Header author={post.author} createdAt={post.createdAt} />
+        <PostBody text={post.text} />
+
+        {post.media && <PostMedia media={post.media} />}
+
+        {post.linkPreview && !post.media && (
+          <PostLinkPreview preview={post.linkPreview} />
+        )}
+
+        <PostActions
+          stats={post.stats}
+          onAction={(action) => onAction?.(action, post)}
+        />
+      </article>
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/linkedin-post/schema.ts b/frontend/src/toolui/components/linkedin-post/schema.ts
new file mode 100644
index 00000000..177f5b4c
--- /dev/null
+++ b/frontend/src/toolui/components/linkedin-post/schema.ts
@@ -0,0 +1,59 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+
+export const LinkedInPostAuthorSchema = z.object({
+  name: z.string(),
+  avatarUrl: z.string(),
+  headline: z.string().optional(),
+});
+
+export const LinkedInPostMediaSchema = z.object({
+  type: z.enum(["image", "video"]),
+  url: z.string(),
+  alt: z.string(),
+});
+
+export const LinkedInPostLinkPreviewSchema = z.object({
+  url: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  imageUrl: z.string().optional(),
+  domain: z.string().optional(),
+});
+
+export const LinkedInPostStatsSchema = z.object({
+  likes: z.number().optional(),
+  isLiked: z.boolean().optional(),
+});
+
+export const SerializableLinkedInPostSchema = z.object({
+  id: z.string(),
+  author: LinkedInPostAuthorSchema,
+  text: z.string().optional(),
+  media: LinkedInPostMediaSchema.optional(),
+  linkPreview: LinkedInPostLinkPreviewSchema.optional(),
+  stats: LinkedInPostStatsSchema.optional(),
+  createdAt: z.string().optional(),
+});
+
+export type LinkedInPostData = z.infer<typeof SerializableLinkedInPostSchema>;
+
+export type LinkedInPostAuthor = z.infer<typeof LinkedInPostAuthorSchema>;
+export type LinkedInPostMedia = z.infer<typeof LinkedInPostMediaSchema>;
+export type LinkedInPostLinkPreview = z.infer<
+  typeof LinkedInPostLinkPreviewSchema
+>;
+export type LinkedInPostStats = z.infer<typeof LinkedInPostStatsSchema>;
+
+const SerializableLinkedInPostSchemaContract = defineToolUiContract(
+  "LinkedInPost",
+  SerializableLinkedInPostSchema,
+);
+
+export const parseSerializableLinkedInPost: (
+  input: unknown,
+) => LinkedInPostData = SerializableLinkedInPostSchemaContract.parse;
+
+export const safeParseSerializableLinkedInPost: (
+  input: unknown,
+) => LinkedInPostData | null = SerializableLinkedInPostSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/message-draft/README.md b/frontend/src/toolui/components/message-draft/README.md
new file mode 100644
index 00000000..48ed63e2
--- /dev/null
+++ b/frontend/src/toolui/components/message-draft/README.md
@@ -0,0 +1,19 @@
+# Message Draft
+
+Implementation for the "message-draft" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/message-draft/index.tsx
+- serializable schema + parse helpers: components/tool-ui/message-draft/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/message-draft/content.mdx
+- Preset payload: lib/presets/message-draft.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/message-draft/_adapter.tsx b/frontend/src/toolui/components/message-draft/_adapter.tsx
new file mode 100644
index 00000000..4d2303fd
--- /dev/null
+++ b/frontend/src/toolui/components/message-draft/_adapter.tsx
@@ -0,0 +1,12 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn        → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button    → shadcn/ui Button
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
diff --git a/frontend/src/toolui/components/message-draft/index.tsx b/frontend/src/toolui/components/message-draft/index.tsx
new file mode 100644
index 00000000..9970ea34
--- /dev/null
+++ b/frontend/src/toolui/components/message-draft/index.tsx
@@ -0,0 +1,10 @@
+export { MessageDraft } from "./message-draft";
+export {
+  type SerializableMessageDraft,
+  type SerializableEmailDraft,
+  type SerializableSlackDraft,
+  type MessageDraftChannel,
+  type MessageDraftOutcome,
+  type SlackTarget,
+  type MessageDraftProps,
+} from "./schema";
diff --git a/frontend/src/toolui/components/message-draft/message-draft.tsx b/frontend/src/toolui/components/message-draft/message-draft.tsx
new file mode 100644
index 00000000..1753b795
--- /dev/null
+++ b/frontend/src/toolui/components/message-draft/message-draft.tsx
@@ -0,0 +1,511 @@
+"use client";
+
+import * as React from "react";
+import { cn, Button } from "./_adapter";
+import type {
+  MessageDraftProps,
+  SerializableEmailDraft,
+  SerializableSlackDraft,
+} from "./schema";
+import { ActionButtons } from "../shared/action-buttons";
+import type { Action } from "../shared/schema";
+import { Check, ChevronDown } from "lucide-react";
+
+type DraftState = "review" | "sending" | "sent" | "cancelled";
+type DraftOutcome = MessageDraftProps["outcome"];
+
+const DEFAULT_GRACE_PERIOD = 5000;
+const COLLAPSED_BODY_HEIGHT = 280;
+
+interface RecipientRowProps {
+  label: string;
+  recipients: string[];
+  maxVisible?: number;
+  muted?: boolean;
+}
+
+function RecipientRow({
+  label,
+  recipients,
+  maxVisible = 3,
+  muted = false,
+}: RecipientRowProps) {
+  const visibleRecipients = recipients.slice(0, maxVisible);
+  const overflowCount = recipients.length - maxVisible;
+
+  return (
+    <tr className="text-sm">
+      <td className="text-muted-foreground w-0 pr-4 pb-1 text-right align-top font-medium whitespace-nowrap">
+        {label}
+      </td>
+      <td className={cn("pb-1 align-top", muted && "text-muted-foreground")}>
+        {visibleRecipients.join(", ")}
+        {overflowCount > 0 && (
+          <span className="text-muted-foreground"> +{overflowCount} more</span>
+        )}
+      </td>
+    </tr>
+  );
+}
+
+interface SingleFieldRowProps {
+  label: string;
+  value: string;
+}
+
+function SingleFieldRow({ label, value }: SingleFieldRowProps) {
+  return (
+    <tr className="text-sm">
+      <td className="text-muted-foreground w-0 pr-4 pb-1 text-right align-top font-medium whitespace-nowrap">
+        {label}
+      </td>
+      <td className="pb-1 align-top">{value}</td>
+    </tr>
+  );
+}
+
+interface ExpandableBodyProps {
+  body: string;
+  isExpanded: boolean;
+  onNeedsExpansionChange?: (needsExpansion: boolean) => void;
+}
+
+function ExpandableBody({
+  body,
+  isExpanded,
+  onNeedsExpansionChange,
+}: ExpandableBodyProps) {
+  const [needsExpansion, setNeedsExpansion] = React.useState<boolean | null>(
+    null,
+  );
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useLayoutEffect(() => {
+    if (contentRef.current) {
+      const needs = contentRef.current.scrollHeight > COLLAPSED_BODY_HEIGHT;
+      setNeedsExpansion(needs);
+      onNeedsExpansionChange?.(needs);
+    }
+  }, [body, onNeedsExpansionChange]);
+
+  return (
+    <div className="relative">
+      <div
+        ref={contentRef}
+        className={cn(
+          "overflow-hidden text-sm leading-relaxed",
+          needsExpansion !== null &&
+            "transition-[max-height] duration-300 ease-in-out",
+        )}
+        style={{
+          maxHeight:
+            needsExpansion === null
+              ? `${COLLAPSED_BODY_HEIGHT}px`
+              : isExpanded || !needsExpansion
+                ? `${contentRef.current?.scrollHeight ?? 1000}px`
+                : `${COLLAPSED_BODY_HEIGHT}px`,
+        }}
+      >
+        <p className="pt-1 whitespace-pre-wrap">{body}</p>
+      </div>
+      {needsExpansion && (
+        <div
+          className={cn(
+            "from-card pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t to-transparent transition-[height] duration-300 ease-in-out",
+            isExpanded ? "h-0" : "h-12",
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
+interface EmailDraftContentProps {
+  draft: SerializableEmailDraft;
+  titleId: string;
+  isExpanded: boolean;
+  onNeedsExpansionChange?: (needsExpansion: boolean) => void;
+}
+
+function EmailDraftContent({
+  draft,
+  titleId,
+  isExpanded,
+  onNeedsExpansionChange,
+}: EmailDraftContentProps) {
+  return (
+    <>
+      <h2 id={titleId} className="pt-2 text-base leading-tight font-semibold">
+        {draft.subject}
+      </h2>
+
+      <table className="w-full">
+        <tbody>
+          {draft.from && <SingleFieldRow label="From" value={draft.from} />}
+          <RecipientRow label="To" recipients={draft.to} />
+          {draft.cc && draft.cc.length > 0 && (
+            <RecipientRow label="Cc" recipients={draft.cc} />
+          )}
+          {draft.bcc && draft.bcc.length > 0 && (
+            <RecipientRow label="Bcc" recipients={draft.bcc} muted />
+          )}
+        </tbody>
+      </table>
+
+      <div className="bg-border -mx-5 h-px" role="separator" />
+
+      <ExpandableBody
+        body={draft.body}
+        isExpanded={isExpanded}
+        onNeedsExpansionChange={onNeedsExpansionChange}
+      />
+    </>
+  );
+}
+
+interface SlackDraftContentProps {
+  draft: SerializableSlackDraft;
+  titleId: string;
+  isExpanded: boolean;
+  onNeedsExpansionChange?: (needsExpansion: boolean) => void;
+}
+
+function SlackLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="#E01E5A"
+        d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z"
+      />
+      <path
+        fill="#36C5F0"
+        d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z"
+      />
+      <path
+        fill="#2EB67D"
+        d="M18.958 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.52 2.521h-2.522V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312z"
+      />
+      <path
+        fill="#ECB22E"
+        d="M15.165 18.958a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.52v-2.522h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.526 2.526 0 0 1 2.521-2.521h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.313z"
+      />
+    </svg>
+  );
+}
+
+function SlackDraftContent({
+  draft,
+  titleId,
+  isExpanded,
+  onNeedsExpansionChange,
+}: SlackDraftContentProps) {
+  const { target } = draft;
+  const isChannel = target.type === "channel";
+  const targetDisplay = isChannel
+    ? `#${target.name}`
+    : `Message to @${target.name}`;
+  const memberCount = isChannel ? target.memberCount : undefined;
+
+  return (
+    <>
+      <div
+        id={titleId}
+        className="flex items-center gap-1.5 text-sm font-medium"
+      >
+        <SlackLogo className="size-4" />
+        <span>{targetDisplay}</span>
+        {memberCount !== undefined && (
+          <span className="text-muted-foreground ml-auto text-sm font-normal">
+            {memberCount.toLocaleString()} members
+          </span>
+        )}
+      </div>
+
+      <div className="bg-border -mx-5 h-px" role="separator" />
+
+      <ExpandableBody
+        body={draft.body}
+        isExpanded={isExpanded}
+        onNeedsExpansionChange={onNeedsExpansionChange}
+      />
+    </>
+  );
+}
+
+function formatSentTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function resolveStateFromOutcome(outcome: DraftOutcome): DraftState {
+  if (outcome === "sent") return "sent";
+  if (outcome === "cancelled") return "cancelled";
+  return "review";
+}
+
+export function resolveOutcomeTransition(
+  previousOutcome: DraftOutcome,
+  nextOutcome: DraftOutcome,
+): DraftState | null {
+  if (previousOutcome === nextOutcome) {
+    return null;
+  }
+
+  return resolveStateFromOutcome(nextOutcome);
+}
+
+interface SentConfirmationProps {
+  sentAt: Date;
+}
+
+function SentConfirmation({ sentAt }: SentConfirmationProps) {
+  return (
+    <div
+      className="flex items-center justify-end gap-2 text-sm"
+      role="status"
+      aria-label="Message sent"
+    >
+      <span className="text-muted-foreground">
+        Sent at {formatSentTime(sentAt)}
+      </span>
+      <span className="bg-primary/10 text-primary flex size-6 shrink-0 items-center justify-center rounded-full">
+        <Check className="size-3.5" />
+      </span>
+    </div>
+  );
+}
+
+export function MessageDraft(props: MessageDraftProps) {
+  const {
+    id,
+    className,
+    outcome,
+    undoGracePeriod = DEFAULT_GRACE_PERIOD,
+    onSend,
+    onUndo,
+    onCancel,
+  } = props;
+
+  const [state, setState] = React.useState<DraftState>(() =>
+    resolveStateFromOutcome(outcome),
+  );
+  const [countdown, setCountdown] = React.useState(
+    Math.ceil(undoGracePeriod / 1000),
+  );
+  const [sentAt, setSentAt] = React.useState<Date | null>(() =>
+    outcome === "sent" ? new Date() : null,
+  );
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [needsExpansion, setNeedsExpansion] = React.useState(false);
+  const undoButtonRef = React.useRef<HTMLButtonElement>(null);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const countdownRef = React.useRef<ReturnType<typeof setInterval> | null>(
+    null,
+  );
+  const previousOutcomeRef = React.useRef<DraftOutcome>(outcome);
+
+  const clearTimers = React.useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (countdownRef.current) {
+      clearInterval(countdownRef.current);
+      countdownRef.current = null;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    return clearTimers;
+  }, [clearTimers]);
+
+  React.useEffect(() => {
+    const nextState = resolveOutcomeTransition(
+      previousOutcomeRef.current,
+      outcome,
+    );
+
+    previousOutcomeRef.current = outcome;
+
+    if (nextState === null) {
+      return;
+    }
+
+    clearTimers();
+    setState(nextState);
+    setCountdown(Math.ceil(undoGracePeriod / 1000));
+    setSentAt(nextState === "sent" ? new Date() : null);
+  }, [outcome, undoGracePeriod, clearTimers]);
+
+  React.useEffect(() => {
+    if (state === "sending") {
+      undoButtonRef.current?.focus();
+
+      setCountdown(Math.ceil(undoGracePeriod / 1000));
+
+      countdownRef.current = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) {
+            if (countdownRef.current) {
+              clearInterval(countdownRef.current);
+              countdownRef.current = null;
+            }
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      timerRef.current = setTimeout(async () => {
+        clearTimers();
+        await onSend?.();
+        setSentAt(new Date());
+        setState("sent");
+      }, undoGracePeriod);
+    }
+  }, [state, undoGracePeriod, onSend, clearTimers]);
+
+  const handleSend = React.useCallback(() => {
+    setState("sending");
+  }, []);
+
+  const handleUndo = React.useCallback(() => {
+    clearTimers();
+    setState("review");
+    onUndo?.();
+  }, [clearTimers, onUndo]);
+
+  const handleCancel = React.useCallback(() => {
+    clearTimers();
+    setState("cancelled");
+    onCancel?.();
+  }, [clearTimers, onCancel]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === "Escape" && state === "review") {
+        event.preventDefault();
+        handleCancel();
+      }
+    },
+    [state, handleCancel],
+  );
+
+  const handleNeedsExpansionChange = React.useCallback((needs: boolean) => {
+    setNeedsExpansion(needs);
+  }, []);
+
+  const handleToggleExpand = React.useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const handleAction = React.useCallback(
+    async (actionId: string) => {
+      if (actionId === "send") {
+        handleSend();
+      } else if (actionId === "cancel") {
+        handleCancel();
+      }
+    },
+    [handleSend, handleCancel],
+  );
+
+  const actions: Action[] = [
+    {
+      id: "cancel",
+      label: "Cancel",
+      variant: "ghost",
+    },
+    {
+      id: "send",
+      label: "Send",
+      variant: "default",
+    },
+  ];
+
+  const expandButton = needsExpansion ? (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={handleToggleExpand}
+      className="h-7 gap-1 px-2 text-sm"
+    >
+      {isExpanded ? "Show less" : "Read more"}
+      <ChevronDown className={cn("size-3", isExpanded && "rotate-180")} />
+    </Button>
+  ) : null;
+
+  const renderActions = () => {
+    switch (state) {
+      case "sending":
+        return (
+          <div
+            className="flex items-center justify-end gap-3"
+            aria-live="polite"
+          >
+            <span className="text-muted-foreground text-sm">
+              Sending in {countdown}s
+            </span>
+            <Button
+              ref={undoButtonRef}
+              variant="outline"
+              size="sm"
+              onClick={handleUndo}
+              className="rounded-full"
+            >
+              Undo
+            </Button>
+          </div>
+        );
+      case "sent":
+        return <SentConfirmation sentAt={sentAt ?? new Date()} />;
+      case "cancelled":
+        return null;
+      default:
+        return <ActionButtons actions={actions} onAction={handleAction} />;
+    }
+  };
+
+  if (state === "cancelled") {
+    return null;
+  }
+
+  return (
+    <article
+      className={cn(
+        "flex w-full max-w-lg min-w-64 flex-col gap-3",
+        "text-foreground",
+        className,
+      )}
+      data-slot="message-draft"
+      data-tool-ui-id={id}
+      data-state={state}
+      aria-labelledby={`${id}-title`}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="bg-card flex w-full flex-col gap-3 rounded-2xl border px-5 pt-3 pb-5 shadow-xs transition-none">
+        {props.channel === "email" ? (
+          <EmailDraftContent
+            draft={props}
+            titleId={`${id}-title`}
+            isExpanded={isExpanded}
+            onNeedsExpansionChange={handleNeedsExpansionChange}
+          />
+        ) : (
+          <SlackDraftContent
+            draft={props}
+            titleId={`${id}-title`}
+            isExpanded={isExpanded}
+            onNeedsExpansionChange={handleNeedsExpansionChange}
+          />
+        )}
+
+        {expandButton}
+      </div>
+
+      <div className="@container/actions">{renderActions()}</div>
+    </article>
+  );
+}
diff --git a/frontend/src/toolui/components/message-draft/schema.ts b/frontend/src/toolui/components/message-draft/schema.ts
new file mode 100644
index 00000000..8cf14d5c
--- /dev/null
+++ b/frontend/src/toolui/components/message-draft/schema.ts
@@ -0,0 +1,83 @@
+import { z } from "zod";
+import { ToolUIIdSchema, ToolUIRoleSchema } from "../shared/schema";
+import { defineToolUiContract } from "../shared/contract";
+
+export const MessageDraftChannelSchema = z.enum(["email", "slack"]);
+
+export type MessageDraftChannel = z.infer<typeof MessageDraftChannelSchema>;
+
+export const MessageDraftOutcomeSchema = z.enum(["sent", "cancelled"]);
+
+export type MessageDraftOutcome = z.infer<typeof MessageDraftOutcomeSchema>;
+
+const SlackTargetSchema = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("channel"),
+    name: z.string().min(1),
+    memberCount: z.number().optional(),
+  }),
+  z.object({ type: z.literal("dm"), name: z.string().min(1) }),
+]);
+
+export type SlackTarget = z.infer<typeof SlackTargetSchema>;
+
+export const SerializableEmailDraftSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  body: z.string().min(1),
+  outcome: MessageDraftOutcomeSchema.optional(),
+  channel: z.literal("email"),
+  subject: z.string().min(1),
+  from: z.string().optional(),
+  to: z.array(z.string()).min(1),
+  cc: z.array(z.string()).optional(),
+  bcc: z.array(z.string()).optional(),
+});
+
+export const SerializableSlackDraftSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  body: z.string().min(1),
+  outcome: MessageDraftOutcomeSchema.optional(),
+  channel: z.literal("slack"),
+  target: SlackTargetSchema,
+});
+
+export const SerializableMessageDraftSchema = z.discriminatedUnion("channel", [
+  SerializableEmailDraftSchema,
+  SerializableSlackDraftSchema,
+]);
+
+export type SerializableMessageDraft = z.infer<
+  typeof SerializableMessageDraftSchema
+>;
+
+export type SerializableEmailDraft = z.infer<
+  typeof SerializableEmailDraftSchema
+>;
+
+export type SerializableSlackDraft = z.infer<
+  typeof SerializableSlackDraftSchema
+>;
+
+const SerializableMessageDraftSchemaContract = defineToolUiContract(
+  "MessageDraft",
+  SerializableMessageDraftSchema,
+);
+
+export const parseSerializableMessageDraft: (
+  input: unknown,
+) => SerializableMessageDraft = SerializableMessageDraftSchemaContract.parse;
+
+export const safeParseSerializableMessageDraft: (
+  input: unknown,
+) => SerializableMessageDraft | null =
+  SerializableMessageDraftSchemaContract.safeParse;
+
+export type MessageDraftProps = SerializableMessageDraft & {
+  className?: string;
+  undoGracePeriod?: number;
+  onSend?: () => void | Promise<void>;
+  onUndo?: () => void;
+  onCancel?: () => void;
+};
diff --git a/frontend/src/toolui/components/option-list/README.md b/frontend/src/toolui/components/option-list/README.md
new file mode 100644
index 00000000..6d8d4574
--- /dev/null
+++ b/frontend/src/toolui/components/option-list/README.md
@@ -0,0 +1,19 @@
+# Option List
+
+Implementation for the "option-list" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/option-list/index.tsx
+- serializable schema + parse helpers: components/tool-ui/option-list/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/option-list/content.mdx
+- Preset payload: lib/presets/option-list.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/option-list/_adapter.tsx b/frontend/src/toolui/components/option-list/_adapter.tsx
new file mode 100644
index 00000000..a7873bcc
--- /dev/null
+++ b/frontend/src/toolui/components/option-list/_adapter.tsx
@@ -0,0 +1,14 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn        → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button    → shadcn/ui Button
+ *   Separator → shadcn/ui Separator
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Separator } from "@toolui/ui/separator";
diff --git a/frontend/src/toolui/components/option-list/index.tsx b/frontend/src/toolui/components/option-list/index.tsx
new file mode 100644
index 00000000..7ae9d2cb
--- /dev/null
+++ b/frontend/src/toolui/components/option-list/index.tsx
@@ -0,0 +1,7 @@
+export { OptionList } from "./option-list";
+export type {
+  OptionListProps,
+  OptionListOption,
+  OptionListSelection,
+  SerializableOptionList,
+} from "./schema";
diff --git a/frontend/src/toolui/components/option-list/option-list.tsx b/frontend/src/toolui/components/option-list/option-list.tsx
new file mode 100644
index 00000000..34df143b
--- /dev/null
+++ b/frontend/src/toolui/components/option-list/option-list.tsx
@@ -0,0 +1,625 @@
+"use client";
+
+import {
+  useMemo,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  Fragment,
+} from "react";
+import type { KeyboardEvent } from "react";
+import type {
+  OptionListProps,
+  OptionListSelection,
+  OptionListOption,
+} from "./schema";
+import {
+  normalizeSelectionForOptions,
+  parseSelectionToIdSet,
+} from "./selection";
+import { ActionButtons } from "../shared/action-buttons";
+import { normalizeActionsConfig } from "../shared/actions-config";
+import type { Action } from "../shared/schema";
+import { cn, Button, Separator } from "./_adapter";
+import { Check } from "lucide-react";
+
+function convertIdSetToSelection(
+  selected: Set<string>,
+  mode: "multi" | "single",
+): OptionListSelection {
+  if (mode === "single") {
+    const [first] = selected;
+    return first ?? null;
+  }
+  return Array.from(selected);
+}
+
+function areSetsEqual(a: Set<string>, b: Set<string>) {
+  if (a.size !== b.size) return false;
+  for (const val of a) {
+    if (!b.has(val)) return false;
+  }
+  return true;
+}
+
+interface SelectionIndicatorProps {
+  mode: "multi" | "single";
+  isSelected: boolean;
+  disabled?: boolean;
+}
+
+function SelectionIndicator({
+  mode,
+  isSelected,
+  disabled,
+}: SelectionIndicatorProps) {
+  const shape = mode === "single" ? "rounded-full" : "rounded";
+
+  return (
+    <div
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center border-2 transition-colors",
+        shape,
+        isSelected && "border-primary bg-primary text-primary-foreground",
+        !isSelected && "border-muted-foreground/50",
+        disabled && "opacity-50",
+      )}
+    >
+      {mode === "multi" && isSelected && <Check className="size-3" />}
+      {mode === "single" && isSelected && (
+        <span className="size-2 rounded-full bg-current" />
+      )}
+    </div>
+  );
+}
+
+interface OptionItemProps {
+  option: OptionListOption;
+  isSelected: boolean;
+  isDisabled: boolean;
+  selectionMode: "multi" | "single";
+  isFirst: boolean;
+  isLast: boolean;
+  onToggle: () => void;
+  tabIndex?: number;
+  onFocus?: () => void;
+  buttonRef?: (el: HTMLButtonElement | null) => void;
+}
+
+function OptionItem({
+  option,
+  isSelected,
+  isDisabled,
+  selectionMode,
+  isFirst,
+  isLast,
+  onToggle,
+  tabIndex,
+  onFocus,
+  buttonRef,
+}: OptionItemProps) {
+  const hasAdjacentOptions = !isFirst && !isLast;
+
+  return (
+    <Button
+      ref={buttonRef}
+      data-id={option.id}
+      variant="ghost"
+      size="lg"
+      role="option"
+      aria-selected={isSelected}
+      onClick={onToggle}
+      onFocus={onFocus}
+      tabIndex={tabIndex}
+      disabled={isDisabled}
+      className={cn(
+        "peer group relative h-auto min-h-[50px] w-full justify-start text-left text-sm font-medium",
+        "rounded-none border-0 bg-transparent px-0 py-2 text-base shadow-none transition-none hover:bg-transparent! @md/option-list:text-sm",
+        isFirst && "pb-2.5",
+        hasAdjacentOptions && "py-2.5",
+      )}
+    >
+      <span
+        className={cn(
+          "bg-primary/5 absolute inset-0 -mx-3 -my-0.5 rounded-xl opacity-0 transition-opacity group-hover:opacity-100",
+        )}
+      />
+      <div className="relative flex items-start gap-3">
+        <span className="flex h-6 items-center">
+          <SelectionIndicator
+            mode={selectionMode}
+            isSelected={isSelected}
+            disabled={option.disabled}
+          />
+        </span>
+        {option.icon && (
+          <span className="flex h-6 items-center">{option.icon}</span>
+        )}
+        <div className="flex flex-col text-left">
+          <span className="leading-6 text-pretty">{option.label}</span>
+          {option.description && (
+            <span className="text-muted-foreground text-sm font-normal text-pretty">
+              {option.description}
+            </span>
+          )}
+        </div>
+      </div>
+    </Button>
+  );
+}
+
+interface OptionListConfirmationProps {
+  id: string;
+  options: OptionListOption[];
+  selectedIds: Set<string>;
+  className?: string;
+}
+
+function OptionListConfirmation({
+  id,
+  options,
+  selectedIds,
+  className,
+}: OptionListConfirmationProps) {
+  const confirmedOptions = options.filter((opt) => selectedIds.has(opt.id));
+
+  return (
+    <div
+      className={cn(
+        "@container/option-list flex w-full max-w-md min-w-80 flex-col",
+        "text-foreground",
+        "motion-safe:animate-in motion-safe:fade-in motion-safe:blur-in-sm motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)] motion-safe:fill-mode-both",
+        className,
+      )}
+      data-slot="option-list"
+      data-tool-ui-id={id}
+      data-receipt="true"
+      role="status"
+      aria-label="Confirmed selection"
+    >
+      <div
+        className={cn(
+          "bg-card/60 flex w-full flex-col overflow-hidden rounded-2xl border px-5 py-2.5 shadow-xs",
+        )}
+      >
+        {confirmedOptions.map((option, index) => (
+          <Fragment key={option.id}>
+            {index > 0 && (
+              <Separator className="my-1.5" orientation="horizontal" />
+            )}
+            <div className="flex items-start gap-3 py-1">
+              <span className="flex h-6 items-center">
+                <Check className="text-primary size-4 shrink-0" />
+              </span>
+              {option.icon && (
+                <span className="flex h-6 items-center">{option.icon}</span>
+              )}
+              <div className="flex flex-col text-left">
+                <span className="text-base leading-6 font-medium text-pretty @md/option-list:text-sm">
+                  {option.label}
+                </span>
+                {option.description && (
+                  <span className="text-muted-foreground text-sm font-normal text-pretty">
+                    {option.description}
+                  </span>
+                )}
+              </div>
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function OptionList({
+  id,
+  options,
+  selectionMode = "multi",
+  minSelections = 1,
+  maxSelections,
+  value,
+  defaultValue,
+  choice,
+  onChange,
+  actions,
+  onAction,
+  onBeforeAction,
+  className,
+}: OptionListProps) {
+  if (process.env["NODE_ENV"] !== "production") {
+    if (value !== undefined && defaultValue !== undefined) {
+      console.warn(
+        "[OptionList] Both `value` (controlled) and `defaultValue` (uncontrolled) were provided. `defaultValue` is ignored when `value` is set.",
+      );
+    }
+    if (value !== undefined && !onChange) {
+      console.warn(
+        "[OptionList] `value` was provided without `onChange`. This makes OptionList controlled; selection will not update unless the parent updates `value`.",
+      );
+    }
+  }
+
+  const effectiveMaxSelections = selectionMode === "single" ? 1 : maxSelections;
+  const optionIds = useMemo(
+    () => new Set(options.map((option) => option.id)),
+    [options],
+  );
+
+  const [uncontrolledSelected, setUncontrolledSelected] = useState<Set<string>>(
+    () =>
+      normalizeSelectionForOptions(
+        parseSelectionToIdSet(
+          defaultValue,
+          selectionMode,
+          effectiveMaxSelections,
+        ),
+        optionIds,
+      ),
+  );
+
+  const selectedIds = useMemo(() => {
+    const parsed =
+      value !== undefined
+        ? parseSelectionToIdSet(value, selectionMode, effectiveMaxSelections)
+        : uncontrolledSelected;
+    return normalizeSelectionForOptions(parsed, optionIds);
+  }, [
+    value,
+    uncontrolledSelected,
+    selectionMode,
+    effectiveMaxSelections,
+    optionIds,
+  ]);
+
+  const selectedCount = selectedIds.size;
+
+  const optionStates = useMemo(() => {
+    return options.map((option) => {
+      const isSelected = selectedIds.has(option.id);
+      const isSelectionLocked =
+        selectionMode === "multi" &&
+        effectiveMaxSelections !== undefined &&
+        selectedCount >= effectiveMaxSelections &&
+        !isSelected;
+      const isDisabled = option.disabled || isSelectionLocked;
+
+      return { option, isSelected, isDisabled };
+    });
+  }, [
+    options,
+    selectedIds,
+    selectionMode,
+    effectiveMaxSelections,
+    selectedCount,
+  ]);
+
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const firstSelected = optionStates.findIndex(
+      (s) => s.isSelected && !s.isDisabled,
+    );
+    if (firstSelected >= 0) return firstSelected;
+    const firstEnabled = optionStates.findIndex((s) => !s.isDisabled);
+    return firstEnabled >= 0 ? firstEnabled : 0;
+  });
+
+  useEffect(() => {
+    if (optionStates.length === 0) return;
+    setActiveIndex((prev) => {
+      if (
+        prev < 0 ||
+        prev >= optionStates.length ||
+        optionStates[prev].isDisabled
+      ) {
+        const firstEnabled = optionStates.findIndex((s) => !s.isDisabled);
+        return firstEnabled >= 0 ? firstEnabled : 0;
+      }
+      return prev;
+    });
+  }, [optionStates]);
+
+  const updateSelection = useCallback(
+    (next: Set<string>) => {
+      const normalizedNext = normalizeSelectionForOptions(
+        parseSelectionToIdSet(
+          Array.from(next),
+          selectionMode,
+          effectiveMaxSelections,
+        ),
+        optionIds,
+      );
+
+      if (value === undefined) {
+        if (!areSetsEqual(uncontrolledSelected, normalizedNext)) {
+          setUncontrolledSelected(normalizedNext);
+        }
+      }
+
+      onChange?.(convertIdSetToSelection(normalizedNext, selectionMode));
+    },
+    [
+      effectiveMaxSelections,
+      selectionMode,
+      uncontrolledSelected,
+      value,
+      onChange,
+      optionIds,
+    ],
+  );
+
+  const toggleSelection = useCallback(
+    (optionId: string) => {
+      const next = new Set(selectedIds);
+      const isSelected = next.has(optionId);
+
+      if (selectionMode === "single") {
+        if (isSelected) {
+          next.delete(optionId);
+        } else {
+          next.clear();
+          next.add(optionId);
+        }
+      } else {
+        if (isSelected) {
+          next.delete(optionId);
+        } else {
+          if (effectiveMaxSelections && next.size >= effectiveMaxSelections) {
+            return;
+          }
+          next.add(optionId);
+        }
+      }
+
+      updateSelection(next);
+    },
+    [effectiveMaxSelections, selectedIds, selectionMode, updateSelection],
+  );
+
+  const toSelectionState = useCallback(
+    (selected: Set<string>): OptionListSelection =>
+      convertIdSetToSelection(selected, selectionMode),
+    [selectionMode],
+  );
+
+  const handleCancel = useCallback((): OptionListSelection => {
+    const empty = new Set<string>();
+    updateSelection(empty);
+    return toSelectionState(empty);
+  }, [toSelectionState, updateSelection]);
+
+  const customActions = useMemo(
+    () => normalizeActionsConfig(actions),
+    [actions],
+  );
+
+  const handleFooterAction = useCallback(
+    async (actionId: string) => {
+      let nextState = toSelectionState(selectedIds);
+
+      if (actionId === "cancel") {
+        nextState = handleCancel();
+      }
+
+      await onAction?.(actionId, nextState);
+    },
+    [handleCancel, onAction, selectedIds, toSelectionState],
+  );
+
+  const normalizedFooterActions = useMemo(() => {
+    if (customActions) return customActions;
+    return {
+      items: [
+        { id: "cancel", label: "Clear", variant: "ghost" as const },
+        { id: "confirm", label: "Confirm", variant: "default" as const },
+      ],
+      align: "right" as const,
+    } satisfies ReturnType<typeof normalizeActionsConfig>;
+  }, [customActions]);
+
+  const isConfirmDisabled =
+    selectedCount < minSelections || selectedCount === 0;
+  const hasNothingToClear = selectedCount === 0;
+
+  const focusOptionAt = useCallback((index: number) => {
+    const el = optionRefs.current[index];
+    if (el) el.focus();
+    setActiveIndex(index);
+  }, []);
+
+  const findFirstEnabledIndex = useCallback(() => {
+    const idx = optionStates.findIndex((s) => !s.isDisabled);
+    return idx >= 0 ? idx : 0;
+  }, [optionStates]);
+
+  const findLastEnabledIndex = useCallback(() => {
+    for (let i = optionStates.length - 1; i >= 0; i--) {
+      if (!optionStates[i].isDisabled) return i;
+    }
+    return 0;
+  }, [optionStates]);
+
+  const findNextEnabledIndex = useCallback(
+    (start: number, direction: 1 | -1) => {
+      const len = optionStates.length;
+      if (len === 0) return 0;
+      for (let step = 1; step <= len; step++) {
+        const idx = (start + direction * step + len) % len;
+        if (!optionStates[idx].isDisabled) return idx;
+      }
+      return start;
+    },
+    [optionStates],
+  );
+
+  const handleListboxKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (optionStates.length === 0) return;
+
+      const key = e.key;
+
+      if (key === "ArrowDown") {
+        e.preventDefault();
+        e.stopPropagation();
+        focusOptionAt(findNextEnabledIndex(activeIndex, 1));
+        return;
+      }
+
+      if (key === "ArrowUp") {
+        e.preventDefault();
+        e.stopPropagation();
+        focusOptionAt(findNextEnabledIndex(activeIndex, -1));
+        return;
+      }
+
+      if (key === "Home") {
+        e.preventDefault();
+        e.stopPropagation();
+        focusOptionAt(findFirstEnabledIndex());
+        return;
+      }
+
+      if (key === "End") {
+        e.preventDefault();
+        e.stopPropagation();
+        focusOptionAt(findLastEnabledIndex());
+        return;
+      }
+
+      if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        const current = optionStates[activeIndex];
+        if (!current || current.isDisabled) return;
+        toggleSelection(current.option.id);
+        return;
+      }
+
+      if (key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!hasNothingToClear) {
+          handleCancel();
+        }
+      }
+    },
+    [
+      activeIndex,
+      findFirstEnabledIndex,
+      findLastEnabledIndex,
+      findNextEnabledIndex,
+      focusOptionAt,
+      handleCancel,
+      hasNothingToClear,
+      optionStates,
+      toggleSelection,
+    ],
+  );
+
+  const actionsWithDisabledState = useMemo((): Action[] => {
+    return normalizedFooterActions.items.map((action) => {
+      const isDisabledByValidation =
+        (action.id === "confirm" && isConfirmDisabled) ||
+        (action.id === "cancel" && hasNothingToClear);
+      return {
+        ...action,
+        disabled: action.disabled || isDisabledByValidation,
+        label:
+          action.id === "confirm" &&
+          selectionMode === "multi" &&
+          selectedCount > 0
+            ? `${action.label} (${selectedCount})`
+            : action.label,
+      };
+    });
+  }, [
+    normalizedFooterActions.items,
+    isConfirmDisabled,
+    hasNothingToClear,
+    selectionMode,
+    selectedCount,
+  ]);
+
+  const isReceipt = choice !== undefined && choice !== null;
+  const viewKey = isReceipt ? `receipt-${String(choice)}` : "interactive";
+
+  return (
+    <div key={viewKey} className="contents">
+      {isReceipt ? (
+        <OptionListConfirmation
+          id={id}
+          options={options}
+          selectedIds={normalizeSelectionForOptions(
+            parseSelectionToIdSet(choice, selectionMode),
+            optionIds,
+          )}
+          className={className}
+        />
+      ) : (
+        <div
+          className={cn(
+            "@container/option-list flex w-full max-w-md min-w-80 flex-col gap-3",
+            "text-foreground",
+            className,
+          )}
+          data-slot="option-list"
+          data-tool-ui-id={id}
+          role="group"
+          aria-label="Option list"
+        >
+          <div
+            className={cn(
+              "group/list bg-card flex w-full flex-col overflow-hidden rounded-2xl border px-4 py-1.5 shadow-xs",
+            )}
+            role="listbox"
+            aria-multiselectable={selectionMode === "multi"}
+            onKeyDown={handleListboxKeyDown}
+          >
+            {optionStates.map(({ option, isSelected, isDisabled }, index) => {
+              return (
+                <Fragment key={option.id}>
+                  {index > 0 && (
+                    <Separator
+                      className="transition-opacity [@media(hover:hover)]:[&:has(+_:hover)]:opacity-0 [@media(hover:hover)]:[.peer:hover+&]:opacity-0"
+                      orientation="horizontal"
+                    />
+                  )}
+                  <OptionItem
+                    option={option}
+                    isSelected={isSelected}
+                    isDisabled={isDisabled}
+                    selectionMode={selectionMode}
+                    isFirst={index === 0}
+                    isLast={index === optionStates.length - 1}
+                    tabIndex={index === activeIndex ? 0 : -1}
+                    onFocus={() => setActiveIndex(index)}
+                    buttonRef={(el) => {
+                      optionRefs.current[index] = el;
+                    }}
+                    onToggle={() => toggleSelection(option.id)}
+                  />
+                </Fragment>
+              );
+            })}
+          </div>
+
+          <div className="@container/actions">
+            <ActionButtons
+              actions={actionsWithDisabledState}
+              align={normalizedFooterActions.align}
+              confirmTimeout={normalizedFooterActions.confirmTimeout}
+              onAction={handleFooterAction}
+              onBeforeAction={
+                onBeforeAction
+                  ? (actionId) =>
+                      onBeforeAction(actionId, toSelectionState(selectedIds))
+                  : undefined
+              }
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/option-list/schema.ts b/frontend/src/toolui/components/option-list/schema.ts
new file mode 100644
index 00000000..76a9745c
--- /dev/null
+++ b/frontend/src/toolui/components/option-list/schema.ts
@@ -0,0 +1,210 @@
+import { z } from "zod";
+import type { ReactNode } from "react";
+import type { ActionsProp } from "../shared/actions-config";
+import type { EmbeddedActionsProps } from "../shared/embedded-actions";
+import {
+  ActionSchema,
+  SerializableActionSchema,
+  SerializableActionsConfigSchema,
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+import { defineToolUiContract } from "../shared/contract";
+
+export const OptionListOptionSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  description: z.string().optional(),
+  icon: z.custom<ReactNode>().optional(),
+  disabled: z.boolean().optional(),
+});
+
+export type OptionListSelection = string[] | string | null;
+
+const OptionListSelectionSchema = z
+  .union([z.array(z.string()), z.string(), z.null()])
+  .optional();
+
+type OptionListSchemaInvariantInput = {
+  options: Array<{ id: string }>;
+  minSelections?: number;
+  maxSelections?: number;
+  value?: OptionListSelection;
+  defaultValue?: OptionListSelection;
+  choice?: OptionListSelection;
+};
+
+function selectionToIds(selection: OptionListSelection | undefined): string[] {
+  if (selection == null) return [];
+  if (typeof selection === "string") return [selection];
+  return Array.isArray(selection) ? selection : [];
+}
+
+function validateOptionListInvariants(
+  data: OptionListSchemaInvariantInput,
+  ctx: z.RefinementCtx,
+) {
+  if (
+    data.minSelections !== undefined &&
+    data.maxSelections !== undefined &&
+    data.minSelections > data.maxSelections
+  ) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["minSelections"],
+      message: "`minSelections` cannot be greater than `maxSelections`.",
+    });
+  }
+
+  const optionIds = new Set<string>();
+  for (let index = 0; index < data.options.length; index++) {
+    const optionId = data.options[index]?.id;
+    if (!optionId) continue;
+
+    if (optionIds.has(optionId)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["options", index, "id"],
+        message: `Duplicate option id "${optionId}" is not allowed.`,
+      });
+    } else {
+      optionIds.add(optionId);
+    }
+  }
+
+  const selectionFields: Array<
+    ["value" | "defaultValue" | "choice", OptionListSelection | undefined]
+  > = [
+    ["value", data.value],
+    ["defaultValue", data.defaultValue],
+    ["choice", data.choice],
+  ];
+
+  for (const [fieldName, selection] of selectionFields) {
+    if (selection == null) continue;
+
+    const ids = selectionToIds(selection);
+    ids.forEach((selectionId, index) => {
+      if (!optionIds.has(selectionId)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path:
+            typeof selection === "string" ? [fieldName] : [fieldName, index],
+          message: `Selection id "${selectionId}" must exist in options.`,
+        });
+      }
+    });
+  }
+}
+
+const OptionListPropsSchemaBase = z.object({
+  /**
+   * Unique identifier for this tool UI instance in the conversation.
+   *
+   * Used for:
+   * - Assistant referencing ("the options above")
+   * - Receipt generation (linking selections to their source)
+   * - Narration context
+   *
+   * Should be stable across re-renders, meaningful, and unique within the conversation.
+   *
+   * @example "option-list-deploy-target", "format-selection"
+   */
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  options: z.array(OptionListOptionSchema).min(1),
+  selectionMode: z.enum(["multi", "single"]).optional(),
+  /**
+   * Controlled selection value (advanced / runtime only).
+   *
+   * For Tool UI tool payloads, prefer `defaultValue` (initial selection) and
+   * `choice` (receipt state). Controlled `value` is intentionally excluded
+   * from `SerializableOptionListSchema` to avoid accidental "controlled but
+   * non-interactive" states when an LLM includes `value` in args.
+   */
+  value: OptionListSelectionSchema,
+  defaultValue: OptionListSelectionSchema,
+  /**
+   * When set, renders the component in receipt state showing the user's choice.
+   *
+   * In receipt state:
+   * - Only the chosen option(s) are shown
+   * - Actions are hidden
+   * - The component is read-only
+   *
+   * Use this with assistant-ui's `addResult` to show the outcome of a decision.
+   *
+   * @example
+   * ```tsx
+   * // In a toolkit render function:
+   * if (result) {
+   *   return <OptionList {...args} choice={result} />;
+   * }
+   * ```
+   */
+  choice: OptionListSelectionSchema,
+  actions: z
+    .union([z.array(ActionSchema), SerializableActionsConfigSchema])
+    .optional(),
+  minSelections: z.number().min(0).optional(),
+  maxSelections: z.number().min(1).optional(),
+});
+
+export const OptionListPropsSchema = OptionListPropsSchemaBase.superRefine(
+  validateOptionListInvariants,
+);
+
+export type OptionListOption = z.infer<typeof OptionListOptionSchema>;
+
+export type OptionListProps = Omit<
+  z.infer<typeof OptionListPropsSchema>,
+  "value" | "defaultValue" | "choice" | "actions"
+> & {
+  /** @see OptionListPropsSchema.id */
+  id: string;
+  value?: OptionListSelection;
+  defaultValue?: OptionListSelection;
+  /** @see OptionListPropsSchema.choice */
+  choice?: OptionListSelection;
+  onChange?: (value: OptionListSelection) => void;
+  actions?: ActionsProp;
+  onAction?: EmbeddedActionsProps<OptionListSelection>["onAction"];
+  onBeforeAction?: EmbeddedActionsProps<OptionListSelection>["onBeforeAction"];
+  className?: string;
+};
+
+export const SerializableOptionListSchema = OptionListPropsSchemaBase.omit({
+  // Exclude controlled selection from tool/LLM payloads.
+  value: true,
+})
+  .extend({
+    options: z.array(OptionListOptionSchema.omit({ icon: true })),
+    actions: z
+      .union([
+        z.array(SerializableActionSchema),
+        SerializableActionsConfigSchema,
+      ])
+      .optional(),
+  })
+  .strict()
+  .superRefine(validateOptionListInvariants);
+
+export type SerializableOptionList = z.infer<
+  typeof SerializableOptionListSchema
+>;
+
+const SerializableOptionListSchemaContract = defineToolUiContract(
+  "OptionList",
+  SerializableOptionListSchema,
+);
+
+export const parseSerializableOptionList: (
+  input: unknown,
+) => SerializableOptionList = SerializableOptionListSchemaContract.parse;
+
+export const safeParseSerializableOptionList: (
+  input: unknown,
+) => SerializableOptionList | null =
+  SerializableOptionListSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/option-list/selection.ts b/frontend/src/toolui/components/option-list/selection.ts
new file mode 100644
index 00000000..48ff8ece
--- /dev/null
+++ b/frontend/src/toolui/components/option-list/selection.ts
@@ -0,0 +1,35 @@
+import type { OptionListSelection } from "./schema";
+
+export function parseSelectionToIdSet(
+  value: OptionListSelection | undefined,
+  mode: "multi" | "single",
+  maxSelections?: number,
+): Set<string> {
+  if (mode === "single") {
+    const single =
+      typeof value === "string"
+        ? value
+        : Array.isArray(value)
+          ? value[0]
+          : null;
+    return single ? new Set([single]) : new Set();
+  }
+
+  const arr =
+    typeof value === "string" ? [value] : Array.isArray(value) ? value : [];
+
+  return new Set(maxSelections ? arr.slice(0, maxSelections) : arr);
+}
+
+export function normalizeSelectionForOptions(
+  selection: Set<string>,
+  optionIds: Set<string>,
+): Set<string> {
+  const normalized = new Set<string>();
+  for (const id of selection) {
+    if (optionIds.has(id)) {
+      normalized.add(id);
+    }
+  }
+  return normalized;
+}
diff --git a/frontend/src/toolui/components/order-summary/README.md b/frontend/src/toolui/components/order-summary/README.md
new file mode 100644
index 00000000..6f80a24d
--- /dev/null
+++ b/frontend/src/toolui/components/order-summary/README.md
@@ -0,0 +1,19 @@
+# Order Summary
+
+Implementation for the "order-summary" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/order-summary/index.tsx
+- serializable schema + parse helpers: components/tool-ui/order-summary/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/order-summary/content.mdx
+- Preset payload: lib/presets/order-summary.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/order-summary/_adapter.tsx b/frontend/src/toolui/components/order-summary/_adapter.tsx
new file mode 100644
index 00000000..b111ed52
--- /dev/null
+++ b/frontend/src/toolui/components/order-summary/_adapter.tsx
@@ -0,0 +1,16 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn        → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button    → shadcn/ui Button
+ *   Separator → shadcn/ui Separator
+ *   Skeleton  → shadcn/ui Skeleton
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Separator } from "@toolui/ui/separator";
+export { Skeleton } from "@toolui/ui/skeleton";
diff --git a/frontend/src/toolui/components/order-summary/index.tsx b/frontend/src/toolui/components/order-summary/index.tsx
new file mode 100644
index 00000000..d8024df9
--- /dev/null
+++ b/frontend/src/toolui/components/order-summary/index.tsx
@@ -0,0 +1,14 @@
+export { OrderSummary } from "./order-summary";
+export type {
+  OrderSummaryDisplayProps,
+  OrderSummaryReceiptProps,
+  OrderSummaryCompoundComponent,
+} from "./order-summary";
+export {
+  type SerializableOrderSummary,
+  type OrderSummaryProps,
+  type OrderSummaryVariant,
+  type OrderItem,
+  type Pricing,
+  type OrderDecision,
+} from "./schema";
diff --git a/frontend/src/toolui/components/order-summary/order-summary.tsx b/frontend/src/toolui/components/order-summary/order-summary.tsx
new file mode 100644
index 00000000..5583dd55
--- /dev/null
+++ b/frontend/src/toolui/components/order-summary/order-summary.tsx
@@ -0,0 +1,296 @@
+import { CheckCircle, Package } from "lucide-react";
+import type { ReactElement } from "react";
+import { cn, Separator } from "./_adapter";
+import type {
+  OrderSummaryProps,
+  OrderItem,
+  Pricing,
+  OrderDecision,
+  OrderSummaryVariant,
+} from "./schema";
+
+function formatCurrency(amount: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency,
+    }).format(amount);
+  } catch {
+    return `${currency} ${amount.toFixed(2)}`;
+  }
+}
+
+function formatQuantity(quantity: number): string {
+  return quantity === 1 ? "" : `Qty: ${quantity}`;
+}
+
+function ItemImage({ src, alt }: { src?: string; alt: string }) {
+  if (!src) {
+    return (
+      <div className="bg-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-md">
+        <Package
+          aria-hidden="true"
+          focusable="false"
+          className="text-muted-foreground h-5 w-5"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      width={48}
+      height={48}
+      className="h-12 w-12 shrink-0 rounded-md object-cover"
+    />
+  );
+}
+
+function OrderItemRow({
+  item,
+  currency,
+}: {
+  item: OrderItem;
+  currency: string;
+}) {
+  const quantity = item.quantity ?? 1;
+  const quantityText = formatQuantity(quantity);
+  const hasDescription = item.description || quantityText;
+  const lineTotal = item.unitPrice * quantity;
+
+  return (
+    <div className="flex gap-3">
+      <ItemImage src={item.imageUrl} alt={item.name} />
+      <div className="flex min-w-0 flex-1 items-center justify-between">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <div className="flex items-center justify-between">
+            <span className="truncate text-sm font-medium">{item.name}</span>
+            <span className="truncate text-sm tabular-nums">
+              {formatCurrency(lineTotal, currency)}
+            </span>
+          </div>
+          {hasDescription && (
+            <div className="text-muted-foreground truncate text-sm">
+              {[item.description, quantityText].filter(Boolean).join(" · ")}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PricingBreakdown({
+  pricing,
+  className,
+}: {
+  pricing: Pricing;
+  className?: string;
+}) {
+  const currency = pricing.currency ?? "USD";
+
+  return (
+    <dl className={cn("flex flex-col gap-2 text-sm", className)}>
+      <div className="flex justify-between gap-4">
+        <dt className="text-muted-foreground">Subtotal</dt>
+        <dd className="tabular-nums">
+          {formatCurrency(pricing.subtotal, currency)}
+        </dd>
+      </div>
+
+      {pricing.discount !== undefined && pricing.discount > 0 && (
+        <div className="flex justify-between gap-4 text-green-600 dark:text-green-500">
+          <dt>{pricing.discountLabel || "Discount"}</dt>
+          <dd className="tabular-nums">
+            -{formatCurrency(pricing.discount, currency)}
+          </dd>
+        </div>
+      )}
+
+      {pricing.shipping !== undefined && (
+        <div className="flex justify-between gap-4">
+          <dt className="text-muted-foreground">Shipping</dt>
+          <dd className="tabular-nums">
+            {pricing.shipping === 0
+              ? "Free"
+              : formatCurrency(pricing.shipping, currency)}
+          </dd>
+        </div>
+      )}
+
+      {pricing.tax !== undefined && (
+        <div className="flex justify-between gap-4">
+          <dt className="text-muted-foreground">{pricing.taxLabel || "Tax"}</dt>
+          <dd className="tabular-nums">
+            {formatCurrency(pricing.tax, currency)}
+          </dd>
+        </div>
+      )}
+
+      <div className="flex justify-between gap-4">
+        <dt className="font-medium">Total</dt>
+        <dd className="font-semibold tabular-nums">
+          {formatCurrency(pricing.total, currency)}
+        </dd>
+      </div>
+    </dl>
+  );
+}
+
+function formatDate(isoString: string): string | undefined {
+  try {
+    const date = new Date(isoString);
+    if (isNaN(date.getTime())) return undefined;
+    return date.toLocaleDateString(undefined, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return undefined;
+  }
+}
+
+function ReceiptBadge({
+  orderId,
+  confirmedAt,
+}: {
+  orderId?: string;
+  confirmedAt?: string;
+}) {
+  const formattedDate = confirmedAt ? formatDate(confirmedAt) : undefined;
+
+  const parts = [orderId && `#${orderId}`, formattedDate].filter(Boolean);
+  if (parts.length === 0) return null;
+
+  return (
+    <p className="text-muted-foreground mt-1 text-sm">{parts.join(" · ")}</p>
+  );
+}
+
+function OrderSummaryRoot({
+  id,
+  title = "Order Summary",
+  variant,
+  items,
+  pricing,
+  choice,
+  className,
+}: OrderSummaryProps) {
+  const titleId = `${id}-title`;
+  const resolvedVariant: OrderSummaryVariant =
+    variant ?? (choice === undefined ? "summary" : "receipt");
+  const isReceipt = resolvedVariant === "receipt";
+  const isMalformedPayload =
+    !Array.isArray(items) ||
+    items.length === 0 ||
+    pricing == null ||
+    (isReceipt && choice === undefined);
+
+  if (isMalformedPayload) {
+    return (
+      <article
+        data-slot="order-summary"
+        data-tool-ui-id={id}
+        aria-labelledby={titleId}
+        className={cn("flex max-w-md min-w-80 flex-col gap-3", className)}
+      >
+        <div className="text-card-foreground rounded-lg border bg-card p-4 shadow-sm">
+          <h2 id={titleId} className="text-base font-semibold">
+            {title}
+          </h2>
+          <p className="text-muted-foreground mt-2 text-sm">
+            Unable to render order summary
+          </p>
+        </div>
+      </article>
+    );
+  }
+
+  return (
+    <article
+      data-slot="order-summary"
+      data-tool-ui-id={id}
+      aria-labelledby={titleId}
+      className={cn("flex max-w-md min-w-80 flex-col gap-3", className)}
+    >
+      <div
+        className={cn(
+          "text-card-foreground rounded-lg border shadow-sm",
+          isReceipt ? "bg-card/60" : "bg-card",
+        )}
+      >
+        <div className={cn("space-y-4 p-4", isReceipt && "opacity-95")}>
+          <div>
+            <h2
+              id={titleId}
+              className="flex items-center gap-2 text-base font-semibold"
+            >
+              {isReceipt && (
+                <CheckCircle
+                  aria-hidden="true"
+                  focusable="false"
+                  className="h-5 w-5 text-green-600 dark:text-green-500"
+                />
+              )}
+              {title}
+            </h2>
+            {isReceipt && choice && (
+              <ReceiptBadge
+                orderId={choice.orderId}
+                confirmedAt={choice.confirmedAt}
+              />
+            )}
+          </div>
+
+          <div className="space-y-3">
+            {items.map((item) => (
+              <OrderItemRow
+                key={item.id}
+                item={item}
+                currency={pricing.currency ?? "USD"}
+              />
+            ))}
+          </div>
+
+          <Separator />
+
+          <PricingBreakdown pricing={pricing} />
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export type OrderSummaryDisplayProps = OrderSummaryProps;
+
+function OrderSummaryDisplay(props: OrderSummaryDisplayProps) {
+  return <OrderSummaryRoot {...props} variant="summary" />;
+}
+
+export interface OrderSummaryReceiptProps extends Omit<
+  OrderSummaryProps,
+  "choice"
+> {
+  choice: OrderDecision;
+}
+
+function OrderSummaryReceipt(props: OrderSummaryReceiptProps) {
+  return <OrderSummaryRoot {...props} variant="receipt" />;
+}
+
+export interface OrderSummaryCompoundComponent {
+  (props: OrderSummaryProps): ReactElement;
+  Display: (props: OrderSummaryDisplayProps) => ReactElement;
+  Receipt: (props: OrderSummaryReceiptProps) => ReactElement;
+}
+
+export const OrderSummary: OrderSummaryCompoundComponent = Object.assign(
+  OrderSummaryRoot,
+  {
+    Display: OrderSummaryDisplay,
+    Receipt: OrderSummaryReceipt,
+  },
+);
diff --git a/frontend/src/toolui/components/order-summary/schema.ts b/frontend/src/toolui/components/order-summary/schema.ts
new file mode 100644
index 00000000..9e9c1d0a
--- /dev/null
+++ b/frontend/src/toolui/components/order-summary/schema.ts
@@ -0,0 +1,108 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import { ToolUIIdSchema, ToolUIRoleSchema } from "../shared/schema";
+
+export const OrderItemSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  description: z.string().optional(),
+  imageUrl: z.string().url().optional(),
+  quantity: z.number().int().positive().optional(),
+  unitPrice: z.number(),
+});
+
+export type OrderItem = z.infer<typeof OrderItemSchema>;
+
+const OrderItemsSchema = z
+  .array(OrderItemSchema)
+  .min(1)
+  .superRefine((items, ctx) => {
+    const seenIds = new Set<string>();
+
+    for (const [index, item] of items.entries()) {
+      if (seenIds.has(item.id)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `Duplicate item id: "${item.id}"`,
+          path: [index, "id"],
+        });
+      }
+
+      seenIds.add(item.id);
+    }
+  });
+
+export const PricingSchema = z.object({
+  subtotal: z.number(),
+  tax: z.number().optional(),
+  taxLabel: z.string().optional(),
+  shipping: z.number().optional(),
+  discount: z.number().nonnegative().optional(),
+  discountLabel: z.string().optional(),
+  total: z.number(),
+  currency: z.string().optional(),
+});
+
+export type Pricing = z.infer<typeof PricingSchema>;
+
+export const OrderSummaryVariantSchema = z.enum(["summary", "receipt"]);
+export type OrderSummaryVariant = z.infer<typeof OrderSummaryVariantSchema>;
+
+export const OrderDecisionSchema = z.object({
+  action: z.literal("confirm"),
+  orderId: z.string().optional(),
+  confirmedAt: z.string().datetime().optional(),
+});
+
+export type OrderDecision = z.infer<typeof OrderDecisionSchema>;
+
+export const SerializableOrderSummarySchema = z
+  .object({
+    id: ToolUIIdSchema,
+    role: ToolUIRoleSchema.optional(),
+    title: z.string().optional(),
+    variant: OrderSummaryVariantSchema.optional(),
+    items: OrderItemsSchema,
+    pricing: PricingSchema,
+    choice: OrderDecisionSchema.optional(),
+  })
+  .strict()
+  .superRefine((value, ctx) => {
+    if (value.variant === "receipt" && value.choice === undefined) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Receipt variant requires "choice".',
+        path: ["choice"],
+      });
+    }
+
+    if (value.variant === "summary" && value.choice !== undefined) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Summary variant cannot include "choice".',
+        path: ["choice"],
+      });
+    }
+  });
+
+export type SerializableOrderSummary = z.infer<
+  typeof SerializableOrderSummarySchema
+>;
+
+const SerializableOrderSummarySchemaContract = defineToolUiContract(
+  "OrderSummary",
+  SerializableOrderSummarySchema,
+);
+
+export const parseSerializableOrderSummary: (
+  input: unknown,
+) => SerializableOrderSummary = SerializableOrderSummarySchemaContract.parse;
+
+export const safeParseSerializableOrderSummary: (
+  input: unknown,
+) => SerializableOrderSummary | null =
+  SerializableOrderSummarySchemaContract.safeParse;
+
+export interface OrderSummaryProps extends SerializableOrderSummary {
+  className?: string;
+}
diff --git a/frontend/src/toolui/components/parameter-slider/README.md b/frontend/src/toolui/components/parameter-slider/README.md
new file mode 100644
index 00000000..04d1be58
--- /dev/null
+++ b/frontend/src/toolui/components/parameter-slider/README.md
@@ -0,0 +1,19 @@
+# Parameter Slider
+
+Implementation for the "parameter-slider" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/parameter-slider/index.tsx
+- serializable schema + parse helpers: components/tool-ui/parameter-slider/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/parameter-slider/content.mdx
+- Preset payload: lib/presets/parameter-slider.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/parameter-slider/_adapter.tsx b/frontend/src/toolui/components/parameter-slider/_adapter.tsx
new file mode 100644
index 00000000..52a1b4d7
--- /dev/null
+++ b/frontend/src/toolui/components/parameter-slider/_adapter.tsx
@@ -0,0 +1,16 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn        → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button    → shadcn/ui Button
+ *   Separator → shadcn/ui Separator
+ *   Slider    → shadcn/ui Slider
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Separator } from "@toolui/ui/separator";
+export { Slider } from "@toolui/ui/slider";
diff --git a/frontend/src/toolui/components/parameter-slider/index.tsx b/frontend/src/toolui/components/parameter-slider/index.tsx
new file mode 100644
index 00000000..8f2ecf3e
--- /dev/null
+++ b/frontend/src/toolui/components/parameter-slider/index.tsx
@@ -0,0 +1,7 @@
+export { ParameterSlider } from "./parameter-slider";
+export type {
+  ParameterSliderProps,
+  SliderConfig,
+  SliderValue,
+  SerializableParameterSlider,
+} from "./schema";
diff --git a/frontend/src/toolui/components/parameter-slider/math.ts b/frontend/src/toolui/components/parameter-slider/math.ts
new file mode 100644
index 00000000..80df94e3
--- /dev/null
+++ b/frontend/src/toolui/components/parameter-slider/math.ts
@@ -0,0 +1,42 @@
+import type { SliderConfig, SliderValue } from "./schema";
+
+type SliderPercentInput = {
+  value: number;
+  min: number;
+  max: number;
+};
+
+function clampPercent(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+
+export function sliderRangeToPercent({
+  value,
+  min,
+  max,
+}: SliderPercentInput): number {
+  const range = max - min;
+  if (!Number.isFinite(range) || range <= 0) return 0;
+  return clampPercent(((value - min) / range) * 100);
+}
+
+export function createSliderValueSnapshot(
+  sliders: SliderConfig[],
+): SliderValue[] {
+  return sliders.map((slider) => ({ id: slider.id, value: slider.value }));
+}
+
+export function createSliderSignature(sliders: SliderConfig[]): string {
+  return JSON.stringify(
+    sliders.map(({ id, min, max, step, value, unit, precision }) => ({
+      id,
+      min,
+      max,
+      step: step ?? 1,
+      value,
+      unit: unit ?? "",
+      precision: precision ?? null,
+    })),
+  );
+}
diff --git a/frontend/src/toolui/components/parameter-slider/parameter-slider.tsx b/frontend/src/toolui/components/parameter-slider/parameter-slider.tsx
new file mode 100644
index 00000000..4bbaa0df
--- /dev/null
+++ b/frontend/src/toolui/components/parameter-slider/parameter-slider.tsx
@@ -0,0 +1,821 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import type { ParameterSliderProps, SliderConfig, SliderValue } from "./schema";
+import { ActionButtons } from "../shared/action-buttons";
+import { normalizeActionsConfig } from "../shared/actions-config";
+import { useControllableState } from "../shared/use-controllable-state";
+import { useSignatureReset } from "../shared/use-signature-reset";
+
+import { cn } from "./_adapter";
+import {
+  createSliderSignature,
+  createSliderValueSnapshot,
+  sliderRangeToPercent,
+} from "./math";
+
+function formatSignedValue(
+  value: number,
+  min: number,
+  max: number,
+  precision?: number,
+  unit?: string,
+): string {
+  const crossesZero = min < 0 && max > 0;
+  const fixed =
+    precision !== undefined ? value.toFixed(precision) : String(value);
+  const numericPart = crossesZero && value >= 0 ? `+${fixed}` : fixed;
+  return unit ? `${numericPart} ${unit}` : numericPart;
+}
+
+function getAriaValueText(
+  value: number,
+  min: number,
+  max: number,
+  unit?: string,
+): string {
+  const crossesZero = min < 0 && max > 0;
+  if (crossesZero) {
+    if (value > 0) {
+      return unit ? `plus ${value} ${unit}` : `plus ${value}`;
+    } else if (value < 0) {
+      return unit
+        ? `minus ${Math.abs(value)} ${unit}`
+        : `minus ${Math.abs(value)}`;
+    }
+  }
+  return unit ? `${value} ${unit}` : String(value);
+}
+
+const TICK_COUNT = 16;
+const TEXT_PADDING_X = 4;
+const TEXT_PADDING_X_OUTER = 0; // Less inset on outer-facing side (near edges)
+const TEXT_PADDING_Y = 2;
+const DETECTION_MARGIN_X = 12;
+const DETECTION_MARGIN_X_OUTER = 4; // Small margin at edges for steep falloff - segments fully close at terminal positions
+const DETECTION_MARGIN_Y = 12;
+const TRACK_HEIGHT = 48;
+const TEXT_RELEASE_INSET = 8;
+const TRACK_EDGE_INSET = 4; // px from track edge - keeps elements visible at extremes
+const THUMB_WIDTH = 12; // w-3
+// Text vertical offset: raised slightly from center
+// Positive = raised, negative = lowered
+const TEXT_VERTICAL_OFFSET = 0.5;
+
+function clampPercent(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+
+// Convert a percentage (0-100) to an inset position string
+// At 0%: 4px from left edge; at 100%: 4px from right edge
+function toInsetPosition(percent: number): string {
+  const safePercent = clampPercent(percent);
+  return `calc(${TRACK_EDGE_INSET}px + (100% - ${TRACK_EDGE_INSET * 2}px) * ${safePercent / 100})`;
+}
+
+// Radix keeps the thumb in bounds by applying a percent-dependent px offset.
+// Matching this for fill clipping prevents handle/fill drift near extremes.
+function getRadixThumbInBoundsOffsetPx(percent: number): number {
+  const safePercent = clampPercent(percent);
+  const halfWidth = THUMB_WIDTH / 2;
+  return halfWidth - (safePercent * halfWidth) / 50;
+}
+
+function toRadixThumbPosition(percent: number): string {
+  const safePercent = clampPercent(percent);
+  const offsetPx = getRadixThumbInBoundsOffsetPx(safePercent);
+  return `calc(${safePercent}% + ${offsetPx}px)`;
+}
+
+function signedDistanceToRoundedRect(
+  px: number,
+  py: number,
+  left: number,
+  right: number,
+  top: number,
+  bottom: number,
+  radiusLeft: number,
+  radiusRight: number,
+): number {
+  const innerLeft = left + radiusLeft;
+  const innerRight = right - radiusRight;
+  const innerTop = top + Math.max(radiusLeft, radiusRight);
+  const innerBottom = bottom - Math.max(radiusLeft, radiusRight);
+
+  const inLeftCorner = px < innerLeft;
+  const inRightCorner = px > innerRight;
+  const inCornerY = py < innerTop || py > innerBottom;
+
+  if ((inLeftCorner || inRightCorner) && inCornerY) {
+    const radius = inLeftCorner ? radiusLeft : radiusRight;
+    const cornerX = inLeftCorner ? innerLeft : innerRight;
+    const cornerY = py < innerTop ? top + radius : bottom - radius;
+    const distToCornerCenter = Math.hypot(px - cornerX, py - cornerY);
+    return distToCornerCenter - radius;
+  }
+
+  const dx = Math.max(left - px, px - right, 0);
+  const dy = Math.max(top - py, py - bottom, 0);
+
+  if (dx === 0 && dy === 0) {
+    return -Math.min(px - left, right - px, py - top, bottom - py);
+  }
+
+  return Math.max(dx, dy);
+}
+
+const OUTER_EDGE_RADIUS_FACTOR = 0.3; // Reduced radius on outer-facing sides for steeper falloff
+
+function calculateGap(
+  thumbCenterX: number,
+  textRect: { left: number; right: number; height: number; centerY: number },
+  isLeftAligned: boolean,
+): number {
+  const { left, right, height, centerY } = textRect;
+  // Asymmetric padding/margin: outer-facing side has less padding, more margin
+  const paddingLeft = isLeftAligned ? TEXT_PADDING_X_OUTER : TEXT_PADDING_X;
+  const paddingRight = isLeftAligned ? TEXT_PADDING_X : TEXT_PADDING_X_OUTER;
+  const marginLeft = isLeftAligned
+    ? DETECTION_MARGIN_X_OUTER
+    : DETECTION_MARGIN_X;
+  const marginRight = isLeftAligned
+    ? DETECTION_MARGIN_X
+    : DETECTION_MARGIN_X_OUTER;
+  const paddingY = TEXT_PADDING_Y;
+  const marginY = DETECTION_MARGIN_Y;
+  const thumbCenterY = centerY;
+
+  // Inner boundary (where max gap occurs)
+  const innerLeft = left - paddingLeft;
+  const innerRight = right + paddingRight;
+  const innerTop = centerY - height / 2 - paddingY;
+  const innerBottom = centerY + height / 2 + paddingY;
+  const innerHeight = height + paddingY * 2;
+  const innerRadius = innerHeight / 2;
+  // Smaller radius on outer-facing side (left for label, right for value)
+  const innerRadiusLeft = isLeftAligned
+    ? innerRadius * OUTER_EDGE_RADIUS_FACTOR
+    : innerRadius;
+  const innerRadiusRight = isLeftAligned
+    ? innerRadius
+    : innerRadius * OUTER_EDGE_RADIUS_FACTOR;
+
+  // Outer boundary (where effect starts) - proportionally larger
+  const outerLeft = left - paddingLeft - marginLeft;
+  const outerRight = right + paddingRight + marginRight;
+  const outerTop = centerY - height / 2 - paddingY - marginY;
+  const outerBottom = centerY + height / 2 + paddingY + marginY;
+  const outerHeight = height + paddingY * 2 + marginY * 2;
+  const outerRadius = outerHeight / 2;
+  const outerRadiusLeft = isLeftAligned
+    ? outerRadius * OUTER_EDGE_RADIUS_FACTOR
+    : outerRadius;
+  const outerRadiusRight = isLeftAligned
+    ? outerRadius
+    : outerRadius * OUTER_EDGE_RADIUS_FACTOR;
+
+  const outerDist = signedDistanceToRoundedRect(
+    thumbCenterX,
+    thumbCenterY,
+    outerLeft,
+    outerRight,
+    outerTop,
+    outerBottom,
+    outerRadiusLeft,
+    outerRadiusRight,
+  );
+
+  // Outside outer boundary - no gap
+  if (outerDist > 0) return 0;
+
+  const innerDist = signedDistanceToRoundedRect(
+    thumbCenterX,
+    thumbCenterY,
+    innerLeft,
+    innerRight,
+    innerTop,
+    innerBottom,
+    innerRadiusLeft,
+    innerRadiusRight,
+  );
+
+  // Inside inner boundary - max gap
+  const maxGap = height + paddingY * 2;
+  if (innerDist <= 0) return maxGap;
+
+  // Between boundaries - linear interpolation
+  // outerDist is negative (inside outer), innerDist is positive (outside inner)
+  const totalDist = Math.abs(outerDist) + innerDist;
+  const t = Math.abs(outerDist) / totalDist;
+
+  return maxGap * t;
+}
+
+interface SliderRowProps {
+  config: SliderConfig;
+  value: number;
+  onChange: (value: number) => void;
+  trackClassName?: string;
+  fillClassName?: string;
+  handleClassName?: string;
+}
+
+function SliderRow({
+  config,
+  value,
+  onChange,
+  trackClassName,
+  fillClassName,
+  handleClassName,
+}: SliderRowProps) {
+  const { id, label, min, max, step = 1, unit, precision, disabled } = config;
+  // Per-slider theming overrides component-level theming
+  const resolvedTrackClassName = config.trackClassName ?? trackClassName;
+  const resolvedFillClassName = config.fillClassName ?? fillClassName;
+  const resolvedHandleClassName = config.handleClassName ?? handleClassName;
+  const crossesZero = min < 0 && max > 0;
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const trackRef = useRef<HTMLSpanElement>(null);
+  const labelRef = useRef<HTMLSpanElement>(null);
+  const valueRef = useRef<HTMLSpanElement>(null);
+
+  const [dragGap, setDragGap] = useState(0);
+  const [fullGap, setFullGap] = useState(0);
+  const [intersectsText, setIntersectsText] = useState(false);
+  const [layoutVersion, setLayoutVersion] = useState(0);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handlePointerUp = () => setIsDragging(false);
+    document.addEventListener("pointerup", handlePointerUp);
+    return () => document.removeEventListener("pointerup", handlePointerUp);
+  }, [isDragging]);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    const labelEl = labelRef.current;
+    const valueEl = valueRef.current;
+    if (!track || !labelEl || !valueEl) return;
+
+    const bumpLayoutVersion = () => setLayoutVersion((v) => v + 1);
+
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        bumpLayoutVersion();
+      });
+      observer.observe(track);
+      observer.observe(labelEl);
+      observer.observe(valueEl);
+      return () => observer.disconnect();
+    }
+
+    window.addEventListener("resize", bumpLayoutVersion);
+    return () => window.removeEventListener("resize", bumpLayoutVersion);
+  }, []);
+
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    const labelEl = labelRef.current;
+    const valueEl = valueRef.current;
+
+    if (!track || !labelEl || !valueEl) return;
+
+    const trackRect = track.getBoundingClientRect();
+    const labelRect = labelEl.getBoundingClientRect();
+    const valueRect = valueEl.getBoundingClientRect();
+
+    const trackWidth = trackRect.width;
+    const valuePercent = sliderRangeToPercent({ value, min, max });
+    // Use same inset coordinate system as visual elements
+    const thumbCenterPx =
+      (trackWidth * clampPercent(valuePercent)) / 100 +
+      getRadixThumbInBoundsOffsetPx(valuePercent);
+    const thumbHalfWidth = THUMB_WIDTH / 2;
+
+    // Text is raised by TEXT_VERTICAL_OFFSET from center
+    const trackCenterY = TRACK_HEIGHT / 2 - TEXT_VERTICAL_OFFSET;
+
+    const labelGap = calculateGap(
+      thumbCenterPx,
+      {
+        left: labelRect.left - trackRect.left,
+        right: labelRect.right - trackRect.left,
+        height: labelRect.height,
+        centerY: trackCenterY,
+      },
+      true,
+    ); // label is left-aligned
+
+    const valueGap = calculateGap(
+      thumbCenterPx,
+      {
+        left: valueRect.left - trackRect.left,
+        right: valueRect.right - trackRect.left,
+        height: valueRect.height,
+        centerY: trackCenterY,
+      },
+      false,
+    ); // value is right-aligned
+
+    setDragGap(Math.max(labelGap, valueGap));
+
+    // Tight intersection check for release state
+    // Inset by px-2 (8px) padding to check against actual text, not padded container
+    const labelLeft = labelRect.left - trackRect.left + TEXT_RELEASE_INSET;
+    const labelRight = labelRect.right - trackRect.left - TEXT_RELEASE_INSET;
+    const valueLeft = valueRect.left - trackRect.left + TEXT_RELEASE_INSET;
+    const valueRight = valueRect.right - trackRect.left - TEXT_RELEASE_INSET;
+
+    const thumbLeft = thumbCenterPx - thumbHalfWidth;
+    const thumbRight = thumbCenterPx + thumbHalfWidth;
+
+    const hitsLabel = thumbRight > labelLeft && thumbLeft < labelRight;
+    const hitsValue = thumbRight > valueLeft && thumbLeft < valueRight;
+
+    setIntersectsText(hitsLabel || hitsValue);
+
+    // Calculate full separation gap for release state
+    // Use the max gap of whichever text element(s) the handle intersects
+    const labelFullGap = labelRect.height + TEXT_PADDING_Y * 2;
+    const valueFullGap = valueRect.height + TEXT_PADDING_Y * 2;
+    const releaseGap =
+      hitsLabel && hitsValue
+        ? Math.max(labelFullGap, valueFullGap)
+        : hitsLabel
+          ? labelFullGap
+          : hitsValue
+            ? valueFullGap
+            : 0;
+    setFullGap(releaseGap);
+  }, [value, min, max, layoutVersion]);
+
+  // While dragging: use distance-based separation, but never collapse below
+  // the release split when the thumb still intersects text.
+  const gap = isDragging
+    ? Math.max(dragGap, intersectsText ? fullGap : 0)
+    : intersectsText
+      ? fullGap
+      : 0;
+
+  const ticks = useMemo(() => {
+    // Generate equidistant ticks regardless of step value
+    const majorTickCount = TICK_COUNT;
+    const result: { percent: number; isCenter: boolean; isSubtick: boolean }[] =
+      [];
+
+    for (let i = 0; i <= majorTickCount; i++) {
+      const percent = (i / majorTickCount) * 100;
+      const isCenter = !crossesZero && percent === 50;
+
+      // Skip the center tick (50%) for crossesZero sliders
+      if (crossesZero && percent === 50) continue;
+
+      // Add subtick at midpoint before this tick (except for first)
+      if (i > 0) {
+        const prevPercent = ((i - 1) / majorTickCount) * 100;
+        // Don't add subtick if it would be at 50% for crossesZero
+        const midPercent = (prevPercent + percent) / 2;
+        if (!(crossesZero && midPercent === 50)) {
+          result.push({
+            percent: midPercent,
+            isCenter: false,
+            isSubtick: true,
+          });
+        }
+      }
+
+      result.push({ percent, isCenter, isSubtick: false });
+    }
+
+    return result;
+  }, [crossesZero]);
+
+  const zeroPercent = crossesZero
+    ? sliderRangeToPercent({ value: 0, min, max })
+    : 0;
+  const valuePercent = sliderRangeToPercent({ value, min, max });
+
+  // Fill clip-path uses the same inset coordinate system as the handle.
+  // This keeps the collapsed stroke aligned with the fill edge near extremes.
+  const fillClipPath = useMemo(() => {
+    const toClipFromRightInset = (percent: number) =>
+      `calc(100% - ${toRadixThumbPosition(percent)})`;
+    const toClipFromLeftInset = (percent: number) =>
+      toRadixThumbPosition(percent);
+    const TERMINAL_EPSILON = 1e-6;
+    const snapLeftInset = (percent: number) => {
+      if (percent <= TERMINAL_EPSILON) return "0";
+      if (percent >= 100 - TERMINAL_EPSILON) return "100%";
+      return toClipFromLeftInset(percent);
+    };
+    const snapRightInset = (percent: number) => {
+      if (percent <= TERMINAL_EPSILON) return "100%";
+      if (percent >= 100 - TERMINAL_EPSILON) return "0";
+      return toClipFromRightInset(percent);
+    };
+
+    if (crossesZero) {
+      // Keep center anchor stable by always clipping the low/high pair,
+      // independent of sign branch, then snapping at terminal edges.
+      const lowPercent = Math.min(valuePercent, zeroPercent);
+      const highPercent = Math.max(valuePercent, zeroPercent);
+      return `inset(0 ${snapRightInset(highPercent)} 0 ${snapLeftInset(lowPercent)})`;
+    }
+    // Non-crossing: fill starts at left edge; snap right inset at terminals.
+    return `inset(0 ${snapRightInset(valuePercent)} 0 0)`;
+  }, [crossesZero, zeroPercent, valuePercent]);
+
+  const fillMaskImage = crossesZero
+    ? "linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%)"
+    : "linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%)";
+
+  // Metallic reflection gradient that follows the handle position
+  // Visible while dragging OR when resting at edges (0%/100%)
+  const reflectionStyle = useMemo(() => {
+    const edgeThreshold = 3;
+    const nearEdge =
+      valuePercent <= edgeThreshold || valuePercent >= 100 - edgeThreshold;
+
+    // Narrower spread when stationary at edges (~35% narrower)
+    const spreadPercent = nearEdge && !isDragging ? 6.5 : 10;
+    const handlePos = toRadixThumbPosition(valuePercent);
+    const start = `clamp(0%, calc(${handlePos} - ${spreadPercent}%), 100%)`;
+    const end = `clamp(0%, calc(${handlePos} + ${spreadPercent}%), 100%)`;
+
+    const gradient = `linear-gradient(to right,
+      transparent ${start},
+      white ${handlePos},
+      transparent ${end})`;
+
+    return {
+      background: gradient,
+      WebkitMask:
+        "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+      WebkitMaskComposite: "xor",
+      maskComposite: "exclude",
+      padding: "1px",
+    };
+  }, [valuePercent, isDragging]);
+
+  // Opacity scales with handle size: rest → hover → drag
+  const reflectionOpacity = useMemo(() => {
+    const edgeThreshold = 3;
+    const atEdge =
+      valuePercent <= edgeThreshold || valuePercent >= 100 - edgeThreshold;
+
+    if (isDragging || atEdge) {
+      return 1;
+    }
+    if (isHovered) {
+      return 0.6;
+    }
+    return 0;
+  }, [valuePercent, isDragging, isHovered]);
+
+  const handleValueChange = useCallback(
+    (values: number[]) => {
+      if (values[0] !== undefined) {
+        onChange(values[0]);
+      }
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="py-2">
+      <SliderPrimitive.Root
+        id={id}
+        className={cn(
+          "group/slider relative flex w-full touch-none items-center select-none",
+          "isolate h-12",
+          isDragging
+            ? "[&>span]:transition-[left,transform] [&>span]:duration-45 [&>span]:ease-linear"
+            : "[&>span]:transition-[left,transform] [&>span]:duration-90 [&>span]:ease-[cubic-bezier(0.22,1,0.36,1)]",
+          "[&>span]:will-change-[left,transform]",
+          "motion-reduce:[&>span]:transition-none",
+          disabled && "pointer-events-none opacity-50",
+        )}
+        value={[value]}
+        onValueChange={handleValueChange}
+        onPointerDown={() => setIsDragging(true)}
+        onPointerUp={() => setIsDragging(false)}
+        onPointerEnter={() => setIsHovered(true)}
+        onPointerLeave={() => setIsHovered(false)}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-valuetext={getAriaValueText(value, min, max, unit)}
+      >
+        <SliderPrimitive.Track
+          ref={trackRef}
+          className={cn(
+            "squircle relative h-12 w-full grow overflow-hidden rounded-sm",
+            "ring-border ring-1 ring-inset",
+            "dark:ring-white/10",
+            resolvedTrackClassName ?? "bg-muted",
+          )}
+        >
+          <div
+            className={cn(
+              "absolute inset-0 will-change-[clip-path]",
+              isDragging
+                ? "transition-[clip-path] duration-45 ease-linear"
+                : "transition-[clip-path] duration-90 ease-[cubic-bezier(0.22,1,0.36,1)]",
+              "motion-reduce:transition-none",
+              resolvedFillClassName ?? "bg-primary/30 dark:bg-primary/40",
+            )}
+            style={{
+              maskImage: fillMaskImage,
+              WebkitMaskImage: fillMaskImage,
+              clipPath: fillClipPath,
+            }}
+          />
+
+          {ticks.map((tick, i) => {
+            const isEdge =
+              !tick.isSubtick && (tick.percent === 0 || tick.percent === 100);
+            return (
+              <span
+                key={i}
+                className={cn(
+                  "pointer-events-none absolute bottom-px w-px",
+                  tick.isSubtick ? "h-1.5" : "h-2",
+                  isEdge
+                    ? "bg-transparent"
+                    : tick.isSubtick
+                      ? "bg-foreground/8 dark:bg-white/5"
+                      : tick.isCenter
+                        ? "bg-foreground/30 dark:bg-white/25"
+                        : "bg-foreground/15 dark:bg-white/8",
+                )}
+                style={{
+                  left: toInsetPosition(tick.percent),
+                  transform: "translateX(-50%)",
+                }}
+              />
+            );
+          })}
+        </SliderPrimitive.Track>
+
+        {/* Metallic reflection overlay - follows handle, brightness scales with interaction */}
+        <div
+          className={cn(
+            "squircle pointer-events-none absolute inset-0 rounded-sm",
+            isDragging
+              ? "transition-[opacity,background] duration-45 ease-linear"
+              : "transition-[opacity,background] duration-90 ease-[cubic-bezier(0.22,1,0.36,1)]",
+            "motion-reduce:transition-none",
+          )}
+          style={{
+            ...reflectionStyle,
+            opacity: reflectionOpacity,
+            filter: "blur(1px)",
+            mixBlendMode: "overlay",
+          }}
+        />
+
+        <SliderPrimitive.Thumb
+          className={cn(
+            "group/thumb z-0 block w-3 shrink-0 cursor-grab rounded-sm",
+            "relative bg-transparent outline-none",
+            "transition-[height,opacity] duration-150 ease-[var(--cubic-ease-in-out)]",
+            "focus-visible:outline-ring focus-visible:outline-2 focus-visible:outline-offset-1",
+            "active:cursor-grabbing",
+            "disabled:pointer-events-none disabled:opacity-50",
+            // Height morphs: rest (track height) → hover → active
+            isDragging ? "h-[56px]" : isHovered ? "h-[54px]" : "h-12",
+          )}
+        >
+          {(() => {
+            // Calculate morph state
+            const isActive = isHovered || isDragging;
+
+            // Indicator stays centered on the real thumb while CSS transitions
+            // smooth thumb wrapper and fill movement together.
+            const fillEdgeOffset = 0;
+
+            // Hide rest-state indicator at edges (0% or 100%) - the reflection gradient handles this
+            const edgeThreshold = 3;
+            const atEdge =
+              valuePercent <= edgeThreshold ||
+              valuePercent >= 100 - edgeThreshold;
+            const restOpacity = atEdge ? 0 : 0.25;
+
+            // Asymmetric segment heights: gap is shifted up to match raised text position
+            // Top segment is shorter, bottom segment is taller
+            const topHeight =
+              isActive && gap > 0
+                ? `calc(50% - ${gap / 2 + TEXT_VERTICAL_OFFSET}px)`
+                : "50%";
+            const bottomHeight =
+              isActive && gap > 0
+                ? `calc(50% - ${gap / 2 - TEXT_VERTICAL_OFFSET}px)`
+                : "50%";
+
+            return (
+              <>
+                <span
+                  className={cn(
+                    "absolute top-0 left-1/2",
+                    "transition-all duration-100 ease-[var(--cubic-ease-in-out)]",
+                    isActive
+                      ? gap > 0
+                        ? "rounded-full"
+                        : "rounded-t-full"
+                      : "rounded-t-sm",
+                    isDragging ? "w-2" : isActive ? "w-1.5" : "w-px",
+                    resolvedHandleClassName ?? "bg-primary",
+                  )}
+                  style={{
+                    transform: `translateX(calc(-50% + ${fillEdgeOffset}px))`,
+                    height: topHeight,
+                    opacity: isActive ? 1 : restOpacity,
+                  }}
+                />
+                <span
+                  className={cn(
+                    "absolute bottom-0 left-1/2",
+                    "transition-all duration-100 ease-[var(--cubic-ease-in-out)]",
+                    isActive
+                      ? gap > 0
+                        ? "rounded-full"
+                        : "rounded-b-full"
+                      : "rounded-b-sm",
+                    isDragging ? "w-2" : isActive ? "w-1.5" : "w-px",
+                    resolvedHandleClassName ?? "bg-primary",
+                  )}
+                  style={{
+                    transform: `translateX(calc(-50% + ${fillEdgeOffset}px))`,
+                    height: bottomHeight,
+                    opacity: isActive ? 1 : restOpacity,
+                  }}
+                />
+              </>
+            );
+          })()}
+        </SliderPrimitive.Thumb>
+
+        <div
+          className="pointer-events-none absolute inset-x-3 top-1/2 z-10 flex items-center justify-between"
+          style={{
+            transform: `translateY(calc(-50% - ${TEXT_VERTICAL_OFFSET}px))`,
+          }}
+        >
+          <span
+            ref={labelRef}
+            className="text-primary -mt-px rounded-full px-2 py-px text-sm font-normal tracking-wide"
+          >
+            {label}
+          </span>
+          <span
+            ref={valueRef}
+            className="text-foreground -mt-px -mb-0.5 flex h-6 items-center rounded-full px-2 font-mono text-xs tabular-nums"
+          >
+            {formatSignedValue(value, min, max, precision, unit)}
+          </span>
+        </div>
+      </SliderPrimitive.Root>
+    </div>
+  );
+}
+
+export function ParameterSlider({
+  id,
+  sliders,
+  values: controlledValues,
+  onChange,
+  actions,
+  onAction,
+  onBeforeAction,
+  className,
+  trackClassName,
+  fillClassName,
+  handleClassName,
+}: ParameterSliderProps) {
+  const slidersSignature = useMemo(
+    () => createSliderSignature(sliders),
+    [sliders],
+  );
+  const sliderSnapshot = useMemo(
+    () => createSliderValueSnapshot(sliders),
+    [sliders],
+  );
+  const {
+    value: currentValues,
+    isControlled,
+    setValue,
+    setUncontrolledValue,
+  } = useControllableState<SliderValue[]>({
+    value: controlledValues,
+    defaultValue: sliderSnapshot,
+    onChange,
+  });
+
+  useSignatureReset(slidersSignature, () => {
+    if (!isControlled) {
+      setUncontrolledValue(sliderSnapshot);
+    }
+  });
+
+  const valueMap = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const v of currentValues) {
+      map.set(v.id, v.value);
+    }
+    return map;
+  }, [currentValues]);
+
+  const updateValue = useCallback(
+    (sliderId: string, newValue: number) => {
+      setValue((prev) =>
+        prev.map((v) => (v.id === sliderId ? { ...v, value: newValue } : v)),
+      );
+    },
+    [setValue],
+  );
+
+  const handleReset = useCallback(() => {
+    setValue(sliderSnapshot);
+  }, [setValue, sliderSnapshot]);
+
+  const handleAction = useCallback(
+    async (actionId: string) => {
+      let nextValues = currentValues;
+      if (actionId === "reset") {
+        handleReset();
+        nextValues = sliderSnapshot;
+      }
+
+      await onAction?.(actionId, nextValues);
+    },
+    [currentValues, handleReset, onAction, sliderSnapshot],
+  );
+
+  const normalizedActions = useMemo(() => {
+    const normalized = normalizeActionsConfig(actions);
+    if (normalized) return normalized;
+    return {
+      items: [
+        { id: "reset", label: "Reset", variant: "ghost" as const },
+        { id: "apply", label: "Apply", variant: "default" as const },
+      ],
+      align: "right" as const,
+    };
+  }, [actions]);
+
+  return (
+    <article
+      className={cn(
+        "@container/parameter-slider isolate flex w-full max-w-md min-w-80 flex-col gap-3",
+        "text-foreground",
+        className,
+      )}
+      data-slot="parameter-slider"
+      data-tool-ui-id={id}
+    >
+      <div
+        className={cn(
+          "bg-card flex w-full flex-col overflow-hidden rounded-2xl border px-5 py-3 shadow-xs",
+        )}
+      >
+        {sliders.map((slider) => (
+          <SliderRow
+            key={slider.id}
+            config={slider}
+            value={valueMap.get(slider.id) ?? slider.value}
+            onChange={(v) => updateValue(slider.id, v)}
+            trackClassName={trackClassName}
+            fillClassName={fillClassName}
+            handleClassName={handleClassName}
+          />
+        ))}
+      </div>
+
+      <div className="@container/actions">
+        <ActionButtons
+          actions={normalizedActions.items}
+          align={normalizedActions.align}
+          confirmTimeout={normalizedActions.confirmTimeout}
+          onAction={handleAction}
+          onBeforeAction={
+            onBeforeAction
+              ? (actionId) => onBeforeAction(actionId, currentValues)
+              : undefined
+          }
+        />
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/src/toolui/components/parameter-slider/schema.ts b/frontend/src/toolui/components/parameter-slider/schema.ts
new file mode 100644
index 00000000..86673967
--- /dev/null
+++ b/frontend/src/toolui/components/parameter-slider/schema.ts
@@ -0,0 +1,114 @@
+import { z } from "zod";
+import { type ActionsProp } from "../shared/actions-config";
+import type { EmbeddedActionsProps } from "../shared/embedded-actions";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  SerializableActionSchema,
+  SerializableActionsConfigSchema,
+  ToolUIIdSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const SliderConfigSchema = z
+  .object({
+    id: z.string().min(1),
+    label: z.string().min(1),
+    min: z.number().finite(),
+    max: z.number().finite(),
+    step: z.number().finite().positive().optional(),
+    value: z.number().finite(),
+    unit: z.string().optional(),
+    precision: z.number().int().min(0).optional(),
+    disabled: z.boolean().optional(),
+    trackClassName: z.string().optional(),
+    fillClassName: z.string().optional(),
+    handleClassName: z.string().optional(),
+  })
+  .superRefine((slider, ctx) => {
+    if (slider.max <= slider.min) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["max"],
+        message: "max must be greater than min",
+      });
+    }
+
+    if (slider.value < slider.min || slider.value > slider.max) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["value"],
+        message: "value must be between min and max",
+      });
+    }
+  });
+
+export type SliderConfig = z.infer<typeof SliderConfigSchema>;
+
+export const SerializableParameterSliderSchema = z
+  .object({
+    id: ToolUIIdSchema,
+    role: ToolUIRoleSchema.optional(),
+    sliders: z.array(SliderConfigSchema).min(1),
+    actions: z
+      .union([
+        z.array(SerializableActionSchema),
+        SerializableActionsConfigSchema,
+      ])
+      .optional(),
+  })
+  .strict()
+  .superRefine((payload, ctx) => {
+    const seenIds = new Map<string, number>();
+
+    payload.sliders.forEach((slider, index) => {
+      const firstSeenAt = seenIds.get(slider.id);
+      if (firstSeenAt !== undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["sliders", index, "id"],
+          message: `duplicate slider id '${slider.id}' (first seen at index ${firstSeenAt})`,
+        });
+        return;
+      }
+      seenIds.set(slider.id, index);
+    });
+  });
+
+export type SerializableParameterSlider = z.infer<
+  typeof SerializableParameterSliderSchema
+>;
+
+const SerializableParameterSliderSchemaContract = defineToolUiContract(
+  "ParameterSlider",
+  SerializableParameterSliderSchema,
+);
+
+export const parseSerializableParameterSlider: (
+  input: unknown,
+) => SerializableParameterSlider =
+  SerializableParameterSliderSchemaContract.parse;
+
+export const safeParseSerializableParameterSlider: (
+  input: unknown,
+) => SerializableParameterSlider | null =
+  SerializableParameterSliderSchemaContract.safeParse;
+
+export interface SliderValue {
+  id: string;
+  value: number;
+}
+
+export interface ParameterSliderProps extends Omit<
+  SerializableParameterSlider,
+  "actions"
+> {
+  className?: string;
+  values?: SliderValue[];
+  onChange?: (values: SliderValue[]) => void;
+  actions?: ActionsProp;
+  onAction?: EmbeddedActionsProps<SliderValue[]>["onAction"];
+  onBeforeAction?: EmbeddedActionsProps<SliderValue[]>["onBeforeAction"];
+  trackClassName?: string;
+  fillClassName?: string;
+  handleClassName?: string;
+}
diff --git a/frontend/src/toolui/components/plan/README.md b/frontend/src/toolui/components/plan/README.md
new file mode 100644
index 00000000..2e7b7db7
--- /dev/null
+++ b/frontend/src/toolui/components/plan/README.md
@@ -0,0 +1,19 @@
+# Plan
+
+Implementation for the "plan" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/plan/index.tsx
+- serializable schema + parse helpers: components/tool-ui/plan/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/plan/content.mdx
+- Preset payload: lib/presets/plan.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/plan/_adapter.tsx b/frontend/src/toolui/components/plan/_adapter.tsx
new file mode 100644
index 00000000..48ea8dc9
--- /dev/null
+++ b/frontend/src/toolui/components/plan/_adapter.tsx
@@ -0,0 +1,32 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn          → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Accordion   → shadcn/ui Accordion
+ *   Card        → shadcn/ui Card
+ *   Collapsible → shadcn/ui Collapsible
+ */
+
+export { cn } from "@toolui/lib/utils";
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@toolui/ui/accordion";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@toolui/ui/card";
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@toolui/ui/collapsible";
diff --git a/frontend/src/toolui/components/plan/index.tsx b/frontend/src/toolui/components/plan/index.tsx
new file mode 100644
index 00000000..de5021c2
--- /dev/null
+++ b/frontend/src/toolui/components/plan/index.tsx
@@ -0,0 +1,7 @@
+export { Plan, PlanCompact } from "./plan";
+export type {
+  PlanProps,
+  PlanTodo,
+  PlanTodoStatus,
+  SerializablePlan,
+} from "./schema";
diff --git a/frontend/src/toolui/components/plan/plan.tsx b/frontend/src/toolui/components/plan/plan.tsx
new file mode 100644
index 00000000..a62032bb
--- /dev/null
+++ b/frontend/src/toolui/components/plan/plan.tsx
@@ -0,0 +1,428 @@
+"use client";
+
+import * as React from "react";
+import { useMemo, useState, useEffect, useRef, memo } from "react";
+import { Loader2, Check, X, MoreHorizontal, ChevronRight } from "lucide-react";
+import type { PlanProps, PlanTodo, PlanTodoStatus } from "./schema";
+import {
+  cn,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./_adapter";
+import { calculatePlanProgress, shouldCelebrateProgress } from "./progress";
+
+const INITIAL_VISIBLE_TODO_COUNT = 4;
+
+const TodoIcon = memo(function TodoIcon({
+  status,
+}: {
+  status: PlanTodoStatus;
+}) {
+  if (status === "pending") {
+    return (
+      <span
+        className="border-border bg-card flex size-6 shrink-0 items-center justify-center rounded-full border motion-safe:transition-all motion-safe:duration-200"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  if (status === "in_progress") {
+    return (
+      <span
+        className="border-border bg-card flex size-6 shrink-0 items-center justify-center rounded-full border shadow-[0_0_0_4px_hsl(var(--primary)/0.1)] motion-safe:transition-all motion-safe:duration-300"
+        aria-hidden="true"
+      >
+        <Loader2 className="text-primary size-5 motion-safe:animate-spin" />
+      </span>
+    );
+  }
+
+  if (status === "completed") {
+    return (
+      <span
+        className="border-primary bg-primary flex size-6 shrink-0 items-center justify-center rounded-full border shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out"
+        aria-hidden="true"
+      >
+        <Check
+          className="text-primary-foreground size-4 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:delay-75 motion-safe:duration-200 motion-safe:fill-mode-both"
+          strokeWidth={3}
+        />
+      </span>
+    );
+  }
+
+  if (status === "cancelled") {
+    return (
+      <span
+        className="border-destructive bg-destructive flex size-6 shrink-0 items-center justify-center rounded-full border shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out dark:border-red-600 dark:bg-red-600"
+        aria-hidden="true"
+      >
+        <X
+          className="size-4 text-white motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:delay-75 motion-safe:duration-200 motion-safe:fill-mode-both"
+          strokeWidth={3}
+        />
+      </span>
+    );
+  }
+
+  return null;
+});
+
+interface PlanTodoItemProps {
+  todo: PlanTodo;
+  className?: string;
+  style?: React.CSSProperties;
+  showConnector?: boolean;
+}
+
+function areTodoPropsEqual(
+  prev: PlanTodoItemProps,
+  next: PlanTodoItemProps,
+): boolean {
+  if (prev.todo.id !== next.todo.id) return false;
+  if (prev.todo.label !== next.todo.label) return false;
+  if (prev.todo.status !== next.todo.status) return false;
+  if (prev.todo.description !== next.todo.description) return false;
+  if (prev.showConnector !== next.showConnector) return false;
+  if (prev.className !== next.className) return false;
+  const prevStyle = prev.style;
+  const nextStyle = next.style;
+  if (prevStyle === nextStyle) return true;
+  if (!prevStyle || !nextStyle) return false;
+  return (
+    prevStyle.animationDelay === nextStyle.animationDelay &&
+    prevStyle.animationFillMode === nextStyle.animationFillMode
+  );
+}
+
+const PlanTodoItem = memo(function PlanTodoItem({
+  todo,
+  className,
+  style,
+  showConnector,
+}: PlanTodoItemProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const labelElement = (
+    <span
+      className={cn(
+        "text-sm leading-6 font-medium break-words",
+        todo.status === "pending" && "text-muted-foreground",
+        todo.status === "in_progress" &&
+          "motion-safe:shimmer shimmer-invert text-foreground",
+        (todo.status === "completed" || todo.status === "cancelled") &&
+          "text-muted-foreground",
+      )}
+    >
+      {todo.label}
+    </span>
+  );
+
+  if (!todo.description) {
+    return (
+      <li
+        className={cn(
+          "relative -mx-2 flex cursor-default items-start gap-3 rounded-md px-2 py-1.5",
+          className,
+        )}
+        style={style}
+      >
+        {showConnector && (
+          <div
+            className="bg-border absolute top-6 left-5 w-px"
+            style={{
+              height: "calc(100% + 0.25rem)",
+            }}
+            aria-hidden="true"
+          />
+        )}
+        <div className="relative z-10">
+          <TodoIcon status={todo.status} />
+        </div>
+        <div className="min-w-0 flex-1">{labelElement}</div>
+      </li>
+    );
+  }
+
+  return (
+    <li
+      className={cn(
+        "relative -mx-2 min-w-0 cursor-default rounded-md",
+        className,
+      )}
+      style={style}
+    >
+      {showConnector && (
+        <div
+          className="bg-border absolute top-6 left-5 w-px"
+          style={{
+            height: "calc(100% + 0.25rem)",
+          }}
+          aria-hidden="true"
+        />
+      )}
+      <Collapsible asChild open={isOpen} onOpenChange={setIsOpen}>
+        <div
+          className="data-[state=open]:bg-primary/5 min-w-0 rounded-md motion-safe:transition-all motion-safe:duration-200"
+          style={{
+            backdropFilter: isOpen ? "blur(2px)" : undefined,
+          }}
+        >
+          <CollapsibleTrigger className="group/todo flex w-full cursor-default items-start gap-3 px-2 py-1.5 text-left">
+            <div className="relative z-10">
+              <TodoIcon status={todo.status} />
+            </div>
+            <span className="min-w-0 flex-1">{labelElement}</span>
+            <ChevronRight className="text-muted-foreground/50 group-hover/todo:text-muted-foreground mt-0.5 size-4 shrink-0 rotate-90 group-data-[state=open]/todo:[transform:rotateY(180deg)] motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)]" />
+          </CollapsibleTrigger>
+          <CollapsibleContent
+            className="group/content"
+            data-slot="collapsible-content"
+          >
+            <div className="min-w-0 motion-safe:group-data-[state=closed]/content:animate-out motion-safe:group-data-[state=closed]/content:fade-out motion-safe:group-data-[state=closed]/content:slide-out-to-top-1 motion-safe:group-data-[state=closed]/content:duration-150 motion-safe:group-data-[state=open]/content:animate-in motion-safe:group-data-[state=open]/content:fade-in motion-safe:group-data-[state=open]/content:slide-in-from-top-1 motion-safe:group-data-[state=open]/content:delay-75 motion-safe:group-data-[state=open]/content:duration-150 motion-safe:group-data-[state=open]/content:fill-mode-both">
+              <p className="text-muted-foreground min-w-0 pr-2 pb-1.5 pl-11 text-sm text-pretty break-words">
+                {todo.description}
+              </p>
+            </div>
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </li>
+  );
+}, areTodoPropsEqual);
+
+interface TodoListProps {
+  todos: PlanTodo[];
+  newTodoIds: Set<string>;
+}
+
+function TodoList({ todos, newTodoIds }: TodoListProps) {
+  return (
+    <>
+      {todos.map((todo, index) => {
+        const isNew = newTodoIds.has(todo.id);
+        const staggerDelay = isNew ? index * 50 : 0;
+
+        return (
+          <PlanTodoItem
+            key={todo.id}
+            todo={todo}
+            showConnector={index < todos.length - 1}
+            className={cn(
+              isNew &&
+                "motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-1 motion-safe:duration-300 motion-safe:ease-out",
+            )}
+            style={
+              isNew
+                ? {
+                    animationDelay: `${staggerDelay}ms`,
+                    animationFillMode: "backwards",
+                  }
+                : undefined
+            }
+          />
+        );
+      })}
+    </>
+  );
+}
+
+interface ProgressBarProps {
+  progress: number;
+  isCelebrating: boolean;
+}
+
+const ProgressBar = memo(function ProgressBar({
+  progress,
+  isCelebrating,
+}: ProgressBarProps) {
+  return (
+    <div
+      className="bg-muted relative mb-3 h-1.5 overflow-hidden rounded-full"
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={progress}
+    >
+      <div
+        className={cn(
+          "h-full rounded-full transition-all duration-500",
+          progress === 100
+            ? "bg-gradient-to-r from-emerald-600 via-emerald-500 to-emerald-400 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-500 motion-safe:ease-out"
+            : "bg-primary",
+        )}
+        style={{
+          width: `${progress}%`,
+          boxShadow:
+            "inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2)",
+        }}
+      />
+      {isCelebrating && (
+        <div
+          className="pointer-events-none absolute inset-0 rounded-full motion-safe:animate-pulse"
+          style={{
+            boxShadow: "0 0 20px rgba(16, 185, 129, 0.6)",
+          }}
+        />
+      )}
+    </div>
+  );
+});
+
+function PlanRoot({
+  id,
+  title,
+  description,
+  todos,
+  maxVisibleTodos = INITIAL_VISIBLE_TODO_COUNT,
+  className,
+  compact = false,
+}: PlanProps & { compact?: boolean }) {
+  const seenTodoIds = useRef(new Set<string>());
+  const [newTodoIds, setNewTodoIds] = useState<Set<string>>(new Set());
+  const [isCelebrating, setIsCelebrating] = useState(false);
+  const prevProgressRef = useRef(0);
+
+  const { visibleTodos, hiddenTodos, completedCount, allComplete, progress } =
+    useMemo(() => {
+      const completed = todos.filter((t) => t.status === "completed").length;
+      return {
+        visibleTodos: todos.slice(0, maxVisibleTodos),
+        hiddenTodos: todos.slice(maxVisibleTodos),
+        completedCount: completed,
+        allComplete: completed === todos.length,
+        progress: calculatePlanProgress({
+          completedCount: completed,
+          totalCount: todos.length,
+        }),
+      };
+    }, [todos, maxVisibleTodos]);
+
+  useEffect(() => {
+    const newIds = new Set<string>();
+
+    todos.forEach((todo) => {
+      if (!seenTodoIds.current.has(todo.id)) {
+        newIds.add(todo.id);
+        seenTodoIds.current.add(todo.id);
+      }
+    });
+
+    if (newIds.size > 0) {
+      setNewTodoIds(newIds);
+
+      // Clear animation class after entrance completes
+      const timer = setTimeout(() => {
+        setNewTodoIds(new Set());
+      }, 500);
+
+      return () => clearTimeout(timer);
+    }
+  }, [todos]);
+
+  useEffect(() => {
+    const shouldCelebrate = shouldCelebrateProgress({
+      previous: prevProgressRef.current,
+      next: progress,
+    });
+    prevProgressRef.current = progress;
+
+    if (shouldCelebrate) {
+      setIsCelebrating(true);
+      const timer = setTimeout(() => setIsCelebrating(false), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [progress]);
+
+  const todoList = (
+    <ul className={cn("min-w-0 space-y-1", compact ? "mt-0" : "mt-4")}>
+      <TodoList todos={visibleTodos} newTodoIds={newTodoIds} />
+
+      {hiddenTodos.length > 0 && (
+        <li className="mt-1">
+          <Accordion type="single" collapsible>
+            <AccordionItem value="more" className="border-0">
+              <AccordionTrigger className="text-muted-foreground hover:text-primary flex cursor-default items-start justify-start gap-2 py-1 text-sm font-normal [&>svg:last-child]:hidden">
+                <MoreHorizontal className="text-muted-foreground/70 mt-0.5 size-4 shrink-0" />
+                <span>{hiddenTodos.length} more</span>
+              </AccordionTrigger>
+              <AccordionContent className="pt-2 pb-0">
+                <ul className="-mx-2 space-y-2 px-2">
+                  <TodoList todos={hiddenTodos} newTodoIds={newTodoIds} />
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </li>
+      )}
+    </ul>
+  );
+
+  return (
+    <Card
+      className={cn("isolate w-full max-w-xl min-w-80 gap-4 py-4", className)}
+      data-tool-ui-id={id}
+      data-slot="plan"
+    >
+      {!compact && (
+        <CardHeader className="flex flex-row items-start justify-between gap-4">
+          <div className="space-y-1.5">
+            <CardTitle className="leading-5 font-medium text-pretty">
+              {title}
+            </CardTitle>
+            {description && <CardDescription>{description}</CardDescription>}
+          </div>
+          {allComplete && (
+            <Check className="mt-0.5 size-5 shrink-0 text-emerald-500" />
+          )}
+        </CardHeader>
+      )}
+
+      <CardContent className="min-w-0 px-4">
+        <div
+          className={cn(
+            "min-w-0",
+            !compact && "bg-muted/70 rounded-lg px-6 py-4",
+          )}
+        >
+          {!compact && (
+            <>
+              <div className="text-muted-foreground mb-2 text-sm">
+                {completedCount} of {todos.length} complete
+              </div>
+              <ProgressBar progress={progress} isCelebrating={isCelebrating} />
+            </>
+          )}
+          {todoList}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function PlanComponent(props: PlanProps) {
+  return <PlanRoot key={props.id} {...props} />;
+}
+
+export function PlanCompact(props: PlanProps) {
+  return <PlanRoot key={props.id} {...props} compact />;
+}
+
+type PlanComponentType = typeof PlanComponent & {
+  Compact: typeof PlanCompact;
+};
+
+export const Plan = Object.assign(PlanComponent, {
+  Compact: PlanCompact,
+}) as PlanComponentType;
diff --git a/frontend/src/toolui/components/plan/progress.ts b/frontend/src/toolui/components/plan/progress.ts
new file mode 100644
index 00000000..37ba9f4d
--- /dev/null
+++ b/frontend/src/toolui/components/plan/progress.ts
@@ -0,0 +1,29 @@
+type ProgressInput = {
+  completedCount: number;
+  totalCount: number;
+};
+
+type CelebrateProgressInput = {
+  previous: number;
+  next: number;
+};
+
+function clampProgress(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+
+export function calculatePlanProgress({
+  completedCount,
+  totalCount,
+}: ProgressInput): number {
+  if (totalCount <= 0) return 0;
+  return clampProgress((completedCount / totalCount) * 100);
+}
+
+export function shouldCelebrateProgress({
+  previous,
+  next,
+}: CelebrateProgressInput): boolean {
+  return previous < 100 && next === 100;
+}
diff --git a/frontend/src/toolui/components/plan/schema.ts b/frontend/src/toolui/components/plan/schema.ts
new file mode 100644
index 00000000..2ca85fb4
--- /dev/null
+++ b/frontend/src/toolui/components/plan/schema.ts
@@ -0,0 +1,69 @@
+import { z } from "zod";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+import { defineToolUiContract } from "../shared/contract";
+
+export const PlanTodoStatusSchema = z.enum([
+  "pending",
+  "in_progress",
+  "completed",
+  "cancelled",
+]);
+
+export const PlanTodoSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  status: PlanTodoStatusSchema,
+  description: z.string().optional(),
+});
+
+export type PlanTodoStatus = z.infer<typeof PlanTodoStatusSchema>;
+export type PlanTodo = z.infer<typeof PlanTodoSchema>;
+
+export const PlanPropsSchema = z
+  .object({
+    id: ToolUIIdSchema,
+    role: ToolUIRoleSchema.optional(),
+    receipt: ToolUIReceiptSchema.optional(),
+    title: z.string().min(1),
+    description: z.string().optional(),
+    todos: z.array(PlanTodoSchema).min(1),
+    maxVisibleTodos: z.number().finite().int().min(1).optional(),
+  })
+  .superRefine((value, ctx) => {
+    const seenTodoIds = new Set<string>();
+    value.todos.forEach((todo, index) => {
+      if (seenTodoIds.has(todo.id)) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["todos", index, "id"],
+          message: `Duplicate todo id "${todo.id}".`,
+        });
+        return;
+      }
+      seenTodoIds.add(todo.id);
+    });
+  });
+
+export type PlanProps = z.infer<typeof PlanPropsSchema> & {
+  className?: string;
+};
+
+export const SerializablePlanSchema = PlanPropsSchema;
+
+export type SerializablePlan = z.infer<typeof SerializablePlanSchema>;
+
+const SerializablePlanSchemaContract = defineToolUiContract(
+  "Plan",
+  SerializablePlanSchema,
+);
+
+export const parseSerializablePlan: (input: unknown) => SerializablePlan =
+  SerializablePlanSchemaContract.parse;
+
+export const safeParseSerializablePlan: (
+  input: unknown,
+) => SerializablePlan | null = SerializablePlanSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/preferences-panel/README.md b/frontend/src/toolui/components/preferences-panel/README.md
new file mode 100644
index 00000000..ebd1ab53
--- /dev/null
+++ b/frontend/src/toolui/components/preferences-panel/README.md
@@ -0,0 +1,19 @@
+# Preferences Panel
+
+Implementation for the "preferences-panel" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/preferences-panel/index.tsx
+- serializable schema + parse helpers: components/tool-ui/preferences-panel/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/preferences-panel/content.mdx
+- Preset payload: lib/presets/preferences-panel.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/preferences-panel/_adapter.tsx b/frontend/src/toolui/components/preferences-panel/_adapter.tsx
new file mode 100644
index 00000000..bf6a2d32
--- /dev/null
+++ b/frontend/src/toolui/components/preferences-panel/_adapter.tsx
@@ -0,0 +1,28 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn           → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button       → shadcn/ui Button
+ *   Switch       → shadcn/ui Switch
+ *   ToggleGroup  → shadcn/ui ToggleGroup
+ *   Select       → shadcn/ui Select
+ *   Separator    → shadcn/ui Separator
+ *   Label        → shadcn/ui Label
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Switch } from "@toolui/ui/switch";
+export { ToggleGroup, ToggleGroupItem } from "@toolui/ui/toggle-group";
+export {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@toolui/ui/select";
+export { Separator } from "@toolui/ui/separator";
+export { Label } from "@toolui/ui/label";
diff --git a/frontend/src/toolui/components/preferences-panel/index.tsx b/frontend/src/toolui/components/preferences-panel/index.tsx
new file mode 100644
index 00000000..4c49fcbc
--- /dev/null
+++ b/frontend/src/toolui/components/preferences-panel/index.tsx
@@ -0,0 +1,10 @@
+export { PreferencesPanel, PreferencesPanelReceipt } from "./preferences-panel";
+export {
+  type SerializablePreferencesPanel,
+  type SerializablePreferencesPanelReceipt,
+  type PreferencesPanelProps,
+  type PreferencesPanelReceiptProps,
+  type PreferencesValue,
+  type PreferenceItem,
+  type PreferenceSection,
+} from "./schema";
diff --git a/frontend/src/toolui/components/preferences-panel/preferences-panel.tsx b/frontend/src/toolui/components/preferences-panel/preferences-panel.tsx
new file mode 100644
index 00000000..a183fd13
--- /dev/null
+++ b/frontend/src/toolui/components/preferences-panel/preferences-panel.tsx
@@ -0,0 +1,681 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import type {
+  PreferencesPanelProps,
+  PreferencesPanelReceiptProps,
+  PreferencesValue,
+  PreferenceItem,
+  PreferenceSection,
+} from "./schema";
+import { ActionButtons } from "../shared/action-buttons";
+import { normalizeActionsConfig } from "../shared/actions-config";
+import { type Action } from "../shared/schema";
+import { useControllableState } from "../shared/use-controllable-state";
+import { useSignatureReset } from "../shared/use-signature-reset";
+
+import {
+  cn,
+  Switch,
+  ToggleGroup,
+  ToggleGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Label,
+} from "./_adapter";
+import { Check, AlertCircle } from "lucide-react";
+import { createPreferencesSectionSignature } from "./signature";
+
+function getInitialValue(item: PreferenceItem): string | boolean {
+  switch (item.type) {
+    case "switch":
+      return item.defaultChecked ?? false;
+    case "toggle":
+      return item.defaultValue ?? item.options?.[0]?.value ?? "";
+    case "select":
+      return item.defaultSelected ?? item.selectOptions?.[0]?.value ?? "";
+  }
+}
+
+function formatDisplayValue(
+  item: PreferenceItem,
+  value: string | boolean,
+): string {
+  if (item.type === "switch") {
+    return typeof value === "boolean" && value ? "On" : "Off";
+  }
+
+  const stringValue = typeof value === "string" ? value : "";
+  const options = item.type === "toggle" ? item.options : item.selectOptions;
+  const option = options?.find((opt) => opt.value === stringValue);
+
+  return option?.label ?? stringValue;
+}
+
+function computeInitialValues(sections: PreferenceSection[]): PreferencesValue {
+  return sections.reduce<PreferencesValue>((acc, section) => {
+    section.items.forEach((item) => {
+      acc[item.id] = getInitialValue(item);
+    });
+    return acc;
+  }, {});
+}
+
+interface PreferenceControlProps {
+  item: PreferenceItem;
+  value: string | boolean;
+  onChange: (value: string | boolean) => void;
+  disabled?: boolean;
+}
+
+function SwitchControl({
+  id,
+  checked,
+  onChange,
+  disabled,
+  label,
+}: {
+  id: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+  label: string;
+}) {
+  return (
+    <Switch
+      id={id}
+      checked={checked}
+      onCheckedChange={onChange}
+      disabled={disabled}
+      aria-label={label}
+    />
+  );
+}
+
+function ToggleControl({
+  value,
+  options,
+  onChange,
+  disabled,
+  label,
+}: {
+  value: string;
+  options: Array<{ value: string; label: string }>;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  label: string;
+}) {
+  return (
+    <ToggleGroup
+      type="single"
+      value={value}
+      onValueChange={(v) => v && onChange(v)}
+      disabled={disabled}
+      aria-label={label}
+      className="gap-1"
+    >
+      {options.map((opt) => (
+        <ToggleGroupItem
+          key={opt.value}
+          value={opt.value}
+          aria-label={opt.label}
+          className="!rounded-full px-3 py-1.5 text-sm"
+        >
+          {opt.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+function SelectControl({
+  id,
+  value,
+  options,
+  onChange,
+  disabled,
+  label,
+}: {
+  id: string;
+  value: string;
+  options: Array<{ value: string; label: string }>;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  label: string;
+}) {
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger id={id} className="w-[180px]" aria-label={label}>
+        <SelectValue placeholder="Select..." />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function PreferenceControl({
+  item,
+  value,
+  onChange,
+  disabled,
+}: PreferenceControlProps) {
+  const id = `preference-${item.id}`;
+
+  if (item.type === "switch") {
+    return (
+      <SwitchControl
+        id={id}
+        checked={typeof value === "boolean" ? value : false}
+        onChange={onChange}
+        disabled={disabled}
+        label={item.label}
+      />
+    );
+  }
+
+  const stringValue = typeof value === "string" ? value : "";
+
+  if (item.type === "toggle" && item.options) {
+    return (
+      <ToggleControl
+        value={stringValue}
+        options={item.options}
+        onChange={onChange}
+        disabled={disabled}
+        label={item.label}
+      />
+    );
+  }
+
+  if (item.type === "select" && item.selectOptions) {
+    return (
+      <SelectControl
+        id={id}
+        value={stringValue}
+        options={item.selectOptions}
+        onChange={onChange}
+        disabled={disabled}
+        label={item.label}
+      />
+    );
+  }
+
+  return null;
+}
+
+interface PreferenceItemRowProps {
+  item: PreferenceItem;
+  value: string | boolean;
+  onChange?: (value: string | boolean) => void;
+  disabled?: boolean;
+  isReceipt?: boolean;
+  error?: string;
+  showSuccessIndicators?: boolean;
+  isFirstInSectionWithoutHeading?: boolean;
+}
+
+function ItemLabel({
+  item,
+  error,
+  isReceipt,
+}: {
+  item: PreferenceItem;
+  error?: string;
+  isReceipt: boolean;
+}) {
+  const htmlFor = `preference-${item.id}`;
+
+  if (isReceipt) {
+    return (
+      <>
+        <span className="text-sm leading-6 font-medium text-pretty">
+          {item.label}
+        </span>
+        {error ? (
+          <span className="text-destructive text-sm font-normal text-pretty">
+            {error}
+          </span>
+        ) : item.description ? (
+          <span className="text-muted-foreground text-sm font-normal text-pretty">
+            {item.description}
+          </span>
+        ) : null}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Label htmlFor={htmlFor} className="leading-6 font-medium text-pretty">
+        {item.label}
+      </Label>
+      {item.description && (
+        <p className="text-muted-foreground text-sm font-normal text-pretty">
+          {item.description}
+        </p>
+      )}
+    </>
+  );
+}
+
+function ItemValue({
+  item,
+  value,
+  error,
+  showSuccessIndicators,
+}: {
+  item: PreferenceItem;
+  value: string | boolean;
+  error?: string;
+  showSuccessIndicators: boolean;
+}) {
+  const displayValue = formatDisplayValue(item, value);
+
+  return (
+    <div className="flex shrink-0 items-center gap-2">
+      <span className="text-muted-foreground text-sm font-medium">
+        {displayValue}
+      </span>
+      {error ? (
+        <AlertCircle className="text-destructive size-3.5" />
+      ) : showSuccessIndicators ? (
+        <Check className="size-3.5 text-emerald-600 dark:text-emerald-500" />
+      ) : null}
+    </div>
+  );
+}
+
+function PreferenceItemRow({
+  item,
+  value,
+  onChange,
+  disabled,
+  isReceipt = false,
+  error,
+  showSuccessIndicators = false,
+  isFirstInSectionWithoutHeading = false,
+}: PreferenceItemRowProps) {
+  const shouldStack = item.type !== "switch" && !isReceipt;
+
+  return (
+    <div
+      className={cn(
+        "flex items-start justify-between gap-4",
+        isFirstInSectionWithoutHeading ? "pt-0 pb-3" : "py-3",
+        shouldStack &&
+          "flex-col gap-3 @sm/preferences-panel:flex-row @sm/preferences-panel:gap-4",
+      )}
+    >
+      <div className="flex flex-col gap-1">
+        <ItemLabel item={item} error={error} isReceipt={isReceipt} />
+      </div>
+
+      {isReceipt ? (
+        <ItemValue
+          item={item}
+          value={value}
+          error={error}
+          showSuccessIndicators={showSuccessIndicators}
+        />
+      ) : (
+        <div className="flex shrink-0">
+          <PreferenceControl
+            item={item}
+            value={value}
+            onChange={onChange!}
+            disabled={disabled}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ItemListProps {
+  items: PreferenceItem[];
+  values: PreferencesValue;
+  onChangeValue?: (itemId: string, value: string | boolean) => void;
+  disabled?: boolean;
+  isReceipt?: boolean;
+  errors?: Record<string, string>;
+  showSuccessIndicators?: boolean;
+  hasHeading?: boolean;
+  hasTitle?: boolean;
+}
+
+function ItemList({
+  items,
+  values,
+  onChangeValue,
+  disabled,
+  isReceipt,
+  errors,
+  showSuccessIndicators,
+  hasHeading = false,
+  hasTitle = false,
+}: ItemListProps) {
+  const shouldRemoveFirstPadding = !hasHeading && hasTitle;
+
+  return (
+    <div className="flex flex-col">
+      {items.map((item, index) => {
+        const isFirst = index === 0;
+        const itemValue = values[item.id] ?? getInitialValue(item);
+        const handleChange = onChangeValue
+          ? (v: string | boolean) => onChangeValue(item.id, v)
+          : undefined;
+
+        return (
+          <div key={item.id}>
+            {!isFirst && <Separator className="my-1" />}
+            <PreferenceItemRow
+              item={item}
+              value={itemValue}
+              onChange={handleChange}
+              disabled={disabled}
+              isReceipt={isReceipt}
+              error={errors?.[item.id]}
+              showSuccessIndicators={showSuccessIndicators}
+              isFirstInSectionWithoutHeading={
+                isFirst && shouldRemoveFirstPadding
+              }
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+interface PreferencesSectionProps {
+  section: PreferenceSection;
+  values: PreferencesValue;
+  onChangeValue?: (itemId: string, value: string | boolean) => void;
+  disabled?: boolean;
+  isReceipt?: boolean;
+  errors?: Record<string, string>;
+  hasTitle?: boolean;
+}
+
+function PreferencesSection({
+  section,
+  values,
+  onChangeValue,
+  disabled,
+  isReceipt = false,
+  errors,
+  hasTitle = false,
+}: PreferencesSectionProps) {
+  const hasErrors = !!(errors && Object.keys(errors).length > 0);
+
+  const content = (
+    <ItemList
+      items={section.items}
+      values={values}
+      onChangeValue={onChangeValue}
+      disabled={disabled}
+      isReceipt={isReceipt}
+      errors={errors}
+      showSuccessIndicators={hasErrors}
+      hasHeading={!!section.heading}
+      hasTitle={hasTitle}
+    />
+  );
+
+  if (section.heading) {
+    return (
+      <fieldset className="flex flex-col">
+        <legend className="text-muted-foreground pb-1 text-xs tracking-widest uppercase">
+          {section.heading}
+        </legend>
+        {content}
+      </fieldset>
+    );
+  }
+
+  return content;
+}
+
+interface ReceiptHeaderProps {
+  title: string;
+  hasErrors: boolean;
+}
+
+function ReceiptHeader({ title, hasErrors }: ReceiptHeaderProps) {
+  return (
+    <>
+      <div className="flex items-center justify-between gap-3 px-5 py-4">
+        <h2 className="text-base leading-none font-semibold">{title}</h2>
+        {hasErrors === true ? (
+          <span className="text-destructive flex items-center gap-1.5 text-xs font-medium">
+            <AlertCircle className="size-3.5" />
+            Error
+          </span>
+        ) : (
+          <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-500">
+            <Check className="size-3.5" />
+            Saved
+          </span>
+        )}
+      </div>
+      <Separator />
+    </>
+  );
+}
+
+export function PreferencesPanelReceipt({
+  id,
+  title,
+  sections,
+  choice,
+  error,
+  className,
+}: PreferencesPanelReceiptProps) {
+  const hasErrors = error && Object.keys(error).length > 0;
+
+  return (
+    <article
+      data-slot="preferences-panel"
+      data-tool-ui-id={id}
+      data-receipt="true"
+      role="status"
+      aria-label={
+        hasErrors ? "Preferences with errors" : "Confirmed preferences"
+      }
+      className={cn(
+        "@container/preferences-panel flex w-full max-w-md min-w-80 flex-col",
+        className,
+      )}
+    >
+      <div className="bg-card/60 flex w-full flex-col overflow-hidden rounded-2xl border opacity-95 shadow-xs">
+        {title && <ReceiptHeader title={title} hasErrors={!!hasErrors} />}
+        <div
+          className={cn("flex flex-col gap-4 px-5", title ? "py-6" : "py-2")}
+        >
+          {sections.map((section, index) => (
+            <div key={index}>
+              <PreferencesSection
+                section={section}
+                values={choice}
+                errors={error}
+                isReceipt={true}
+                hasTitle={!!title}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </article>
+  );
+}
+
+function PreferencesPanelRoot({
+  id,
+  title,
+  sections,
+  value: controlledValue,
+  onChange,
+  actions,
+  onAction,
+  onBeforeAction,
+  className,
+}: PreferencesPanelProps) {
+  const initialValues = useMemo(
+    () => computeInitialValues(sections),
+    [sections],
+  );
+  const sectionsSignature = useMemo(
+    () => createPreferencesSectionSignature(sections),
+    [sections],
+  );
+  const {
+    value: currentValue,
+    isControlled,
+    setValue,
+    setUncontrolledValue,
+  } = useControllableState<PreferencesValue>({
+    value: controlledValue,
+    defaultValue: initialValues,
+    onChange,
+  });
+
+  useSignatureReset(sectionsSignature, () => {
+    if (!isControlled) {
+      setUncontrolledValue(initialValues);
+    }
+  });
+
+  const updateValue = useCallback(
+    (itemId: string, newValue: string | boolean) => {
+      setValue((prev) => ({ ...prev, [itemId]: newValue }));
+    },
+    [setValue],
+  );
+
+  const isDirty = useMemo(() => {
+    return Object.keys(currentValue).some(
+      (key) => currentValue[key] !== initialValues[key],
+    );
+  }, [currentValue, initialValues]);
+
+  const handleCancel = useCallback((): PreferencesValue => {
+    setValue(initialValues);
+    return initialValues;
+  }, [initialValues, setValue]);
+
+  const handleAction = useCallback(
+    async (actionId: string) => {
+      let nextValue = currentValue;
+
+      if (actionId === "cancel") {
+        nextValue = handleCancel();
+      }
+
+      await onAction?.(actionId, nextValue);
+    },
+    [currentValue, handleCancel, onAction],
+  );
+
+  const normalizedActions = useMemo(() => {
+    const normalized = normalizeActionsConfig(actions);
+    if (normalized) {
+      return {
+        ...normalized,
+        align: normalized.align ?? ("right" as const),
+      };
+    }
+
+    const defaultActions: Action[] = [
+      { id: "cancel", label: "Cancel", variant: "ghost" },
+      { id: "save", label: "Save Changes", variant: "default" },
+    ];
+
+    return {
+      items: defaultActions,
+      align: "right" as const,
+    };
+  }, [actions]);
+
+  const actionsWithState = useMemo((): Action[] => {
+    return normalizedActions.items.map((action) => {
+      const isSaveAction = action.id === "save";
+      const baseDisabled = "disabled" in action ? action.disabled : false;
+      const shouldDisable = baseDisabled || (isSaveAction && !isDirty);
+
+      return {
+        ...action,
+        disabled: shouldDisable,
+      };
+    });
+  }, [normalizedActions.items, isDirty]);
+
+  return (
+    <article
+      data-slot="preferences-panel"
+      data-tool-ui-id={id}
+      role="form"
+      className={cn(
+        "text-foreground @container/preferences-panel flex w-full max-w-md min-w-80 flex-col gap-3",
+        className,
+      )}
+    >
+      <div className="bg-card flex w-full flex-col overflow-hidden rounded-2xl border shadow-xs">
+        {title && (
+          <>
+            <div className="px-5 py-4">
+              <h2 className="text-base leading-none font-semibold">{title}</h2>
+            </div>
+            <Separator />
+          </>
+        )}
+        <div
+          className={cn("flex flex-col gap-4 px-5", title ? "py-6" : "py-2")}
+        >
+          {sections.map((section, sectionIndex) => (
+            <div key={sectionIndex}>
+              <PreferencesSection
+                section={section}
+                values={currentValue}
+                onChangeValue={updateValue}
+                isReceipt={false}
+                hasTitle={!!title}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="@container/actions">
+        <ActionButtons
+          actions={actionsWithState}
+          align={normalizedActions.align}
+          confirmTimeout={normalizedActions.confirmTimeout}
+          onAction={handleAction}
+          onBeforeAction={
+            onBeforeAction
+              ? (actionId) => onBeforeAction(actionId, currentValue)
+              : undefined
+          }
+        />
+      </div>
+    </article>
+  );
+}
+
+type PreferencesPanelComponent = typeof PreferencesPanelRoot & {
+  Receipt: typeof PreferencesPanelReceipt;
+};
+
+export const PreferencesPanel = Object.assign(PreferencesPanelRoot, {
+  Receipt: PreferencesPanelReceipt,
+}) as PreferencesPanelComponent;
diff --git a/frontend/src/toolui/components/preferences-panel/schema.ts b/frontend/src/toolui/components/preferences-panel/schema.ts
new file mode 100644
index 00000000..69a1602c
--- /dev/null
+++ b/frontend/src/toolui/components/preferences-panel/schema.ts
@@ -0,0 +1,144 @@
+import { z } from "zod";
+import { type ActionsProp } from "../shared/actions-config";
+import type { EmbeddedActionsProps } from "../shared/embedded-actions";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  SerializableActionSchema,
+  SerializableActionsConfigSchema,
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+const PreferenceItemBaseSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  description: z.string().optional(),
+});
+
+const PreferenceSwitchSchema = PreferenceItemBaseSchema.extend({
+  type: z.literal("switch"),
+  defaultChecked: z.boolean().optional(),
+});
+
+const PreferenceToggleSchema = PreferenceItemBaseSchema.extend({
+  type: z.literal("toggle"),
+  options: z
+    .array(
+      z.object({
+        value: z.string().min(1),
+        label: z.string().min(1),
+      }),
+    )
+    .min(2),
+  defaultValue: z.string().optional(),
+});
+
+const PreferenceSelectSchema = PreferenceItemBaseSchema.extend({
+  type: z.literal("select"),
+  selectOptions: z
+    .array(
+      z.object({
+        value: z.string().min(1),
+        label: z.string().min(1),
+      }),
+    )
+    .min(5),
+  defaultSelected: z.string().optional(),
+});
+
+const PreferenceItemSchema = z.discriminatedUnion("type", [
+  PreferenceSwitchSchema,
+  PreferenceToggleSchema,
+  PreferenceSelectSchema,
+]);
+
+const PreferenceSectionSchema = z.object({
+  heading: z.string().min(1).optional(),
+  items: z.array(PreferenceItemSchema).min(1),
+});
+
+const PreferencesPanelBaseSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  title: z.string().min(1).optional(),
+  sections: z.array(PreferenceSectionSchema).min(1),
+});
+
+export const SerializablePreferencesPanelSchema =
+  PreferencesPanelBaseSchema.extend({
+    actions: z
+      .union([
+        z.array(SerializableActionSchema),
+        SerializableActionsConfigSchema,
+      ])
+      .optional(),
+  }).strict();
+
+export const SerializablePreferencesPanelReceiptSchema =
+  PreferencesPanelBaseSchema.extend({
+    choice: z.record(z.string(), z.union([z.string(), z.boolean()])),
+    error: z.record(z.string(), z.string()).optional(),
+  }).strict();
+
+export type SerializablePreferencesPanel = z.infer<
+  typeof SerializablePreferencesPanelSchema
+>;
+
+export type SerializablePreferencesPanelReceipt = z.infer<
+  typeof SerializablePreferencesPanelReceiptSchema
+>;
+
+const SerializablePreferencesPanelSchemaContract = defineToolUiContract(
+  "PreferencesPanel",
+  SerializablePreferencesPanelSchema,
+);
+
+const SerializablePreferencesPanelReceiptSchemaContract = defineToolUiContract(
+  "PreferencesPanelReceipt",
+  SerializablePreferencesPanelReceiptSchema,
+);
+
+export const parseSerializablePreferencesPanel: (
+  input: unknown,
+) => SerializablePreferencesPanel =
+  SerializablePreferencesPanelSchemaContract.parse;
+
+export const safeParseSerializablePreferencesPanel: (
+  input: unknown,
+) => SerializablePreferencesPanel | null =
+  SerializablePreferencesPanelSchemaContract.safeParse;
+
+export const parseSerializablePreferencesPanelReceipt: (
+  input: unknown,
+) => SerializablePreferencesPanelReceipt =
+  SerializablePreferencesPanelReceiptSchemaContract.parse;
+
+export const safeParseSerializablePreferencesPanelReceipt: (
+  input: unknown,
+) => SerializablePreferencesPanelReceipt | null =
+  SerializablePreferencesPanelReceiptSchemaContract.safeParse;
+
+export interface PreferencesValue {
+  [itemId: string]: string | boolean;
+}
+
+export interface PreferencesPanelProps extends Omit<
+  SerializablePreferencesPanel,
+  "actions"
+> {
+  className?: string;
+  value?: PreferencesValue;
+  onChange?: (value: PreferencesValue) => void;
+  actions?: ActionsProp;
+  onAction?: EmbeddedActionsProps<PreferencesValue>["onAction"];
+  onBeforeAction?: EmbeddedActionsProps<PreferencesValue>["onBeforeAction"];
+}
+
+export interface PreferencesPanelReceiptProps extends SerializablePreferencesPanelReceipt {
+  className?: string;
+}
+
+export type PreferenceItem = z.infer<typeof PreferenceItemSchema>;
+export type PreferenceSection = z.infer<typeof PreferenceSectionSchema>;
diff --git a/frontend/src/toolui/components/preferences-panel/signature.ts b/frontend/src/toolui/components/preferences-panel/signature.ts
new file mode 100644
index 00000000..235babe6
--- /dev/null
+++ b/frontend/src/toolui/components/preferences-panel/signature.ts
@@ -0,0 +1,37 @@
+import type { PreferenceSection } from "./schema";
+
+export function createPreferencesSectionSignature(
+  sections: PreferenceSection[],
+): string {
+  return JSON.stringify(
+    sections.map((section) => ({
+      heading: section.heading ?? "",
+      items: section.items.map((item) => {
+        if (item.type === "switch") {
+          return {
+            id: item.id,
+            type: item.type,
+            defaultChecked: item.defaultChecked ?? false,
+          };
+        }
+
+        if (item.type === "toggle") {
+          return {
+            id: item.id,
+            type: item.type,
+            defaultValue: item.defaultValue ?? item.options[0]?.value ?? "",
+            options: item.options.map((option) => option.value),
+          };
+        }
+
+        return {
+          id: item.id,
+          type: item.type,
+          defaultSelected:
+            item.defaultSelected ?? item.selectOptions[0]?.value ?? "",
+          options: item.selectOptions.map((option) => option.value),
+        };
+      }),
+    })),
+  );
+}
diff --git a/frontend/src/toolui/components/progress-tracker/README.md b/frontend/src/toolui/components/progress-tracker/README.md
new file mode 100644
index 00000000..99adb245
--- /dev/null
+++ b/frontend/src/toolui/components/progress-tracker/README.md
@@ -0,0 +1,19 @@
+# Progress Tracker
+
+Implementation for the "progress-tracker" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/progress-tracker/index.tsx
+- serializable schema + parse helpers: components/tool-ui/progress-tracker/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/progress-tracker/content.mdx
+- Preset payload: lib/presets/progress-tracker.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/progress-tracker/_adapter.tsx b/frontend/src/toolui/components/progress-tracker/_adapter.tsx
new file mode 100644
index 00000000..a834cb93
--- /dev/null
+++ b/frontend/src/toolui/components/progress-tracker/_adapter.tsx
@@ -0,0 +1,10 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn        → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ */
+
+export { cn } from "@toolui/lib/utils";
diff --git a/frontend/src/toolui/components/progress-tracker/index.tsx b/frontend/src/toolui/components/progress-tracker/index.tsx
new file mode 100644
index 00000000..9aebea9b
--- /dev/null
+++ b/frontend/src/toolui/components/progress-tracker/index.tsx
@@ -0,0 +1,7 @@
+export { ProgressTracker } from "./progress-tracker";
+export {
+  type SerializableProgressTracker,
+  type ProgressTrackerProps,
+  type ProgressTrackerChoice,
+  type ProgressStep,
+} from "./schema";
diff --git a/frontend/src/toolui/components/progress-tracker/progress-tracker.tsx b/frontend/src/toolui/components/progress-tracker/progress-tracker.tsx
new file mode 100644
index 00000000..3d130aca
--- /dev/null
+++ b/frontend/src/toolui/components/progress-tracker/progress-tracker.tsx
@@ -0,0 +1,381 @@
+import { cn } from "./_adapter";
+import type {
+  ProgressStep,
+  ProgressTrackerChoice,
+  ProgressTrackerProps,
+} from "./schema";
+import { Check, X, Loader2, Timer, AlertCircle } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+function formatElapsedTime(milliseconds: number): string {
+  const roundedSeconds = Math.round(Math.max(0, milliseconds) / 100) / 10;
+
+  if (roundedSeconds < 60) {
+    return `${roundedSeconds.toFixed(1)}s`;
+  }
+
+  const wholeSeconds = Math.floor(roundedSeconds);
+  const minutes = Math.floor(wholeSeconds / 60);
+  const remainingSeconds = wholeSeconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+function formatElapsedTimeDateTime(milliseconds: number): string {
+  const roundedSeconds = Math.round(Math.max(0, milliseconds) / 100) / 10;
+
+  if (roundedSeconds < 60) {
+    return `PT${Number(roundedSeconds.toFixed(1))}S`;
+  }
+
+  const wholeSeconds = Math.floor(roundedSeconds);
+  const hours = Math.floor(wholeSeconds / 3600);
+  const minutes = Math.floor((wholeSeconds % 3600) / 60);
+  const seconds = wholeSeconds % 60;
+
+  const hourPart = hours > 0 ? `${hours}H` : "";
+  const minutePart = minutes > 0 ? `${minutes}M` : "";
+  const secondPart = seconds > 0 ? `${seconds}S` : "";
+
+  if (!hourPart && !minutePart && !secondPart) {
+    return "PT0S";
+  }
+
+  return `PT${hourPart}${minutePart}${secondPart}`;
+}
+
+function getCurrentStepId(steps: ProgressStep[]): string | null {
+  const inProgressStep = steps.find((s) => s.status === "in-progress");
+  if (inProgressStep) return inProgressStep.id;
+
+  const failedStep = steps.find((s) => s.status === "failed");
+  if (failedStep) return failedStep.id;
+
+  const firstPendingStep = steps.find((s) => s.status === "pending");
+  if (firstPendingStep) return firstPendingStep.id;
+
+  return null;
+}
+
+function getReceiptState(outcome: ProgressTrackerChoice["outcome"]): {
+  toneClassName: string;
+  icon: LucideIcon;
+} {
+  switch (outcome) {
+    case "success":
+      return {
+        toneClassName: "text-emerald-600 dark:text-emerald-500",
+        icon: Check,
+      };
+    case "partial":
+      return {
+        toneClassName: "text-amber-600 dark:text-amber-500",
+        icon: AlertCircle,
+      };
+    case "failed":
+      return {
+        toneClassName: "text-destructive",
+        icon: AlertCircle,
+      };
+    case "cancelled":
+      return {
+        toneClassName: "text-muted-foreground",
+        icon: X,
+      };
+  }
+}
+
+interface StepIndicatorProps {
+  status: "pending" | "in-progress" | "completed" | "failed";
+}
+
+function StepIndicator({ status }: StepIndicatorProps) {
+  if (status === "pending") {
+    return (
+      <span
+        className="bg-card border-border flex size-6 shrink-0 items-center justify-center rounded-full border motion-safe:transition-all motion-safe:duration-200"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  if (status === "in-progress") {
+    return (
+      <span
+        className="bg-card border-border flex size-6 shrink-0 items-center justify-center rounded-full border shadow-[0_0_0_4px_hsl(var(--primary)/0.1)] motion-safe:transition-all motion-safe:duration-300"
+        aria-hidden="true"
+      >
+        <Loader2 className="text-primary size-5 motion-safe:animate-spin" />
+      </span>
+    );
+  }
+
+  if (status === "completed") {
+    return (
+      <span
+        className="bg-primary text-primary-foreground border-primary flex size-6 shrink-0 items-center justify-center rounded-full border shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out"
+        aria-hidden="true"
+      >
+        <Check
+          className="size-4 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:delay-75 motion-safe:duration-200 motion-safe:fill-mode-both"
+          strokeWidth={3}
+        />
+      </span>
+    );
+  }
+
+  if (status === "failed") {
+    return (
+      <span
+        className="bg-destructive border-destructive flex size-6 shrink-0 items-center justify-center rounded-full border text-white shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out dark:border-red-600 dark:bg-red-600"
+        aria-hidden="true"
+      >
+        <X
+          className="size-4 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:delay-75 motion-safe:duration-200 motion-safe:fill-mode-both"
+          strokeWidth={3}
+        />
+      </span>
+    );
+  }
+
+  return null;
+}
+
+function ElapsedTimeBadge({ elapsedTime }: { elapsedTime?: number }) {
+  if (elapsedTime === undefined || elapsedTime <= 0) {
+    return null;
+  }
+
+  return (
+    <div className="text-muted-foreground flex items-center gap-1.5 font-mono text-xs">
+      <Timer className="-mt-px size-3.5" />
+      <time dateTime={formatElapsedTimeDateTime(elapsedTime)}>
+        {formatElapsedTime(elapsedTime)}
+      </time>
+    </div>
+  );
+}
+
+interface ProgressTrackerBaseProps {
+  id: ProgressTrackerProps["id"];
+  steps: ProgressTrackerProps["steps"];
+  elapsedTime?: ProgressTrackerProps["elapsedTime"];
+  className?: ProgressTrackerProps["className"];
+}
+
+function ProgressTrackerReceipt({
+  id,
+  steps,
+  elapsedTime,
+  className,
+  choice,
+}: ProgressTrackerBaseProps & { choice: ProgressTrackerChoice }) {
+  const receiptState = getReceiptState(choice.outcome);
+  const ReceiptIcon = receiptState.icon;
+
+  return (
+    <div
+      className={cn(
+        "isolate flex w-full max-w-md min-w-80 flex-col",
+        "text-foreground select-none",
+        "motion-safe:animate-in motion-safe:fade-in motion-safe:blur-in-sm motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)] motion-safe:fill-mode-both",
+        className,
+      )}
+      data-slot="progress-tracker"
+      data-tool-ui-id={id}
+      data-receipt="true"
+      role="status"
+      aria-label={choice.summary}
+    >
+      <div className="bg-card/60 flex w-full flex-col gap-4 rounded-2xl border p-5 shadow-xs">
+        <div className="flex items-center justify-between">
+          <ElapsedTimeBadge elapsedTime={elapsedTime} />
+          <span
+            className={cn(
+              "flex items-center gap-1.5 text-xs font-medium",
+              receiptState.toneClassName,
+            )}
+          >
+            <ReceiptIcon className="size-3.5" />
+            {choice.summary}
+          </span>
+        </div>
+
+        <ol className="m-0 flex list-none flex-col gap-2 p-0">
+          {steps.map((step, index) => (
+            <li
+              key={step.id}
+              className="relative -mx-2 flex items-start gap-3 rounded-lg px-2 py-1.5"
+            >
+              {index < steps.length - 1 && (
+                <div
+                  className="bg-border absolute top-8 left-5 w-px"
+                  style={{
+                    height: "calc(100% + 0.5rem)",
+                  }}
+                  aria-hidden="true"
+                />
+              )}
+              <div className="relative z-10">
+                <StepIndicator status={step.status} />
+              </div>
+              <div className="flex flex-1 flex-col gap-0.5">
+                <span className="text-sm leading-6 font-medium">
+                  {step.label}
+                </span>
+                {step.description && (
+                  <span className="text-muted-foreground text-sm">
+                    {step.description}
+                  </span>
+                )}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </div>
+  );
+}
+
+function ProgressTrackerLive({
+  id,
+  steps,
+  elapsedTime,
+  className,
+}: ProgressTrackerBaseProps) {
+  const hasInProgress = steps.some((step) => step.status === "in-progress");
+  const currentStepId = getCurrentStepId(steps);
+
+  return (
+    <article
+      className={cn(
+        "isolate flex w-full max-w-md min-w-80 flex-col gap-3",
+        "text-foreground select-none",
+        className,
+      )}
+      data-slot="progress-tracker"
+      data-tool-ui-id={id}
+      role="status"
+      aria-live="polite"
+      aria-busy={hasInProgress}
+    >
+      <div className="bg-card flex w-full flex-col gap-4 rounded-2xl border p-5 shadow-xs">
+        <ElapsedTimeBadge elapsedTime={elapsedTime} />
+
+        <ol className="m-0 flex list-none flex-col gap-3 p-0">
+          {steps.map((step, index) => {
+            const isCurrent = step.id === currentStepId;
+            const isActive = step.status === "in-progress";
+            const isFailed = step.status === "failed";
+            const hasDescription = !!step.description;
+            const shouldShowDescription = isActive || isFailed;
+
+            return (
+              <li
+                key={step.id}
+                className="relative -mx-2"
+                aria-current={isCurrent ? "step" : undefined}
+              >
+                {index < steps.length - 1 && (
+                  <div
+                    className={cn(
+                      "bg-border absolute top-6 left-5 w-px",
+                      "motion-safe:transition-all motion-safe:duration-300",
+                    )}
+                    style={{
+                      height: "calc(100% + 0.25rem)",
+                    }}
+                    aria-hidden="true"
+                  />
+                )}
+                <div
+                  className={cn(
+                    "relative z-10 flex items-start gap-3 rounded-lg px-2 py-1.5",
+                    "motion-safe:transition-all motion-safe:duration-300",
+                    isCurrent && "bg-primary/5",
+                  )}
+                  style={{
+                    backdropFilter: isCurrent ? "blur(2px)" : undefined,
+                  }}
+                >
+                  <div className="relative z-10">
+                    <StepIndicator status={step.status} />
+                  </div>
+                  <div className="flex flex-1 flex-col">
+                    <span
+                      className={cn(
+                        "text-sm leading-6 font-medium",
+                        step.status === "pending" && "text-muted-foreground",
+                        step.status === "in-progress" &&
+                          "motion-safe:shimmer shimmer-invert text-foreground",
+                      )}
+                    >
+                      {step.label}
+                    </span>
+                    {hasDescription && (
+                      <div
+                        className={cn(
+                          "grid motion-safe:transition-[grid-template-rows,opacity] motion-safe:duration-300 motion-safe:ease-out",
+                          shouldShowDescription
+                            ? "grid-rows-[1fr] opacity-100"
+                            : "grid-rows-[0fr] opacity-0",
+                        )}
+                        aria-hidden={!shouldShowDescription}
+                      >
+                        <div className="overflow-hidden">
+                          <span className="text-muted-foreground block pt-0.5 text-sm">
+                            {step.description}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
+    </article>
+  );
+}
+
+function ProgressTrackerRoot({
+  id,
+  steps,
+  elapsedTime,
+  className,
+  choice,
+}: ProgressTrackerProps) {
+  const viewKey = choice ? `receipt-${choice.outcome}` : "interactive";
+
+  return (
+    <div key={viewKey} className="contents">
+      {choice ? (
+        <ProgressTrackerReceipt
+          id={id}
+          steps={steps}
+          elapsedTime={elapsedTime}
+          className={className}
+          choice={choice}
+        />
+      ) : (
+        <ProgressTrackerLive
+          id={id}
+          steps={steps}
+          elapsedTime={elapsedTime}
+          className={className}
+        />
+      )}
+    </div>
+  );
+}
+
+type ProgressTrackerComponent = typeof ProgressTrackerRoot & {
+  Live: typeof ProgressTrackerLive;
+  Receipt: typeof ProgressTrackerReceipt;
+};
+
+export const ProgressTracker = Object.assign(ProgressTrackerRoot, {
+  Live: ProgressTrackerLive,
+  Receipt: ProgressTrackerReceipt,
+}) as ProgressTrackerComponent;
diff --git a/frontend/src/toolui/components/progress-tracker/schema.ts b/frontend/src/toolui/components/progress-tracker/schema.ts
new file mode 100644
index 00000000..13e45342
--- /dev/null
+++ b/frontend/src/toolui/components/progress-tracker/schema.ts
@@ -0,0 +1,76 @@
+import { z } from "zod";
+import {
+  ToolUISurfaceSchema,
+  ToolUIReceiptSchema,
+  type ToolUIReceipt,
+} from "../shared/schema";
+import { defineToolUiContract } from "../shared/contract";
+
+/**
+ * Receipt state for ProgressTracker showing the outcome of a workflow.
+ */
+export type ProgressTrackerChoice = ToolUIReceipt;
+
+export const ProgressStepSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  description: z.string().optional(),
+  status: z.enum(["pending", "in-progress", "completed", "failed"]),
+});
+
+export type ProgressStep = z.infer<typeof ProgressStepSchema>;
+
+const ProgressStepsSchema = z
+  .array(ProgressStepSchema)
+  .min(1)
+  .superRefine((steps, ctx) => {
+    const seenIds = new Set<string>();
+
+    for (const [index, step] of steps.entries()) {
+      if (seenIds.has(step.id)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `Duplicate step id: "${step.id}"`,
+          path: [index, "id"],
+        });
+      }
+
+      seenIds.add(step.id);
+    }
+  });
+
+export const SerializableProgressTrackerSchema = ToolUISurfaceSchema.omit({
+  receipt: true,
+})
+  .extend({
+    steps: ProgressStepsSchema,
+    elapsedTime: z.number().finite().nonnegative().optional(),
+    /**
+     * When set, renders the component in receipt state showing the workflow outcome.
+     */
+    choice: ToolUIReceiptSchema.optional(),
+  })
+  .strict();
+
+export type SerializableProgressTracker = z.infer<
+  typeof SerializableProgressTrackerSchema
+>;
+
+const SerializableProgressTrackerSchemaContract = defineToolUiContract(
+  "ProgressTracker",
+  SerializableProgressTrackerSchema,
+);
+
+export const parseSerializableProgressTracker: (
+  input: unknown,
+) => SerializableProgressTracker =
+  SerializableProgressTrackerSchemaContract.parse;
+
+export const safeParseSerializableProgressTracker: (
+  input: unknown,
+) => SerializableProgressTracker | null =
+  SerializableProgressTrackerSchemaContract.safeParse;
+
+export interface ProgressTrackerProps extends SerializableProgressTracker {
+  className?: string;
+}
diff --git a/frontend/src/toolui/components/question-flow/README.md b/frontend/src/toolui/components/question-flow/README.md
new file mode 100644
index 00000000..13b5e551
--- /dev/null
+++ b/frontend/src/toolui/components/question-flow/README.md
@@ -0,0 +1,19 @@
+# Question Flow
+
+Implementation for the "question-flow" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/question-flow/index.tsx
+- serializable schema + parse helpers: components/tool-ui/question-flow/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/question-flow/content.mdx
+- Preset payload: lib/presets/question-flow.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/question-flow/_adapter.tsx b/frontend/src/toolui/components/question-flow/_adapter.tsx
new file mode 100644
index 00000000..a7873bcc
--- /dev/null
+++ b/frontend/src/toolui/components/question-flow/_adapter.tsx
@@ -0,0 +1,14 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn        → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button    → shadcn/ui Button
+ *   Separator → shadcn/ui Separator
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Separator } from "@toolui/ui/separator";
diff --git a/frontend/src/toolui/components/question-flow/index.tsx b/frontend/src/toolui/components/question-flow/index.tsx
new file mode 100644
index 00000000..e98e2a50
--- /dev/null
+++ b/frontend/src/toolui/components/question-flow/index.tsx
@@ -0,0 +1,15 @@
+export { QuestionFlow } from "./question-flow";
+export {
+  type SerializableQuestionFlow,
+  type SerializableProgressiveMode,
+  type SerializableUpfrontMode,
+  type SerializableReceiptMode,
+  type QuestionFlowProps,
+  type QuestionFlowProgressiveProps,
+  type QuestionFlowUpfrontProps,
+  type QuestionFlowReceiptProps,
+  type QuestionFlowOption,
+  type QuestionFlowStepDefinition,
+  type QuestionFlowChoice,
+  type QuestionFlowSummaryItem,
+} from "./schema";
diff --git a/frontend/src/toolui/components/question-flow/question-flow.tsx b/frontend/src/toolui/components/question-flow/question-flow.tsx
new file mode 100644
index 00000000..d90a4b8c
--- /dev/null
+++ b/frontend/src/toolui/components/question-flow/question-flow.tsx
@@ -0,0 +1,793 @@
+"use client";
+
+import {
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  Fragment,
+} from "react";
+import type { KeyboardEvent } from "react";
+import type {
+  QuestionFlowProps,
+  QuestionFlowProgressiveProps,
+  QuestionFlowUpfrontProps,
+  QuestionFlowReceiptProps,
+  QuestionFlowOption,
+} from "./schema";
+import { cn, Button, Separator } from "./_adapter";
+import { Check, ChevronLeft } from "lucide-react";
+
+interface SelectionIndicatorProps {
+  mode: "single" | "multi";
+  isSelected: boolean;
+  disabled?: boolean;
+}
+
+interface ProgressBarProps {
+  current: number;
+  total: number;
+}
+
+function ProgressBar({ current, total }: ProgressBarProps) {
+  return (
+    <div
+      className="flex h-1.5 gap-1"
+      role="progressbar"
+      aria-valuenow={current}
+      aria-valuemin={1}
+      aria-valuemax={total}
+    >
+      {Array.from({ length: total }).map((_, i) => (
+        <div
+          key={i}
+          className="relative flex-1 overflow-hidden rounded-full bg-muted"
+        >
+          <div
+            className={cn(
+              "absolute inset-0 origin-left rounded-full bg-primary",
+              "motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-[var(--cubic-ease-in-out)]",
+              i < current ? "scale-x-100" : "scale-x-0",
+            )}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SelectionIndicator({
+  mode,
+  isSelected,
+  disabled,
+}: SelectionIndicatorProps) {
+  const shape = mode === "single" ? "rounded-full" : "rounded";
+
+  return (
+    <div
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center border-2",
+        "motion-safe:transition-colors motion-safe:duration-200",
+        shape,
+        isSelected && [
+          "border-primary bg-primary text-primary-foreground",
+          "motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out",
+        ],
+        !isSelected && "border-muted-foreground/50",
+        disabled && "opacity-50",
+      )}
+    >
+      {mode === "multi" && isSelected && (
+        <Check
+          className="size-3 motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:delay-75 motion-safe:duration-200 motion-safe:fill-mode-both"
+          strokeWidth={3}
+        />
+      )}
+      {mode === "single" && isSelected && (
+        <span className="size-2 rounded-full bg-current motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-75 motion-safe:duration-300 motion-safe:ease-out" />
+      )}
+    </div>
+  );
+}
+
+interface OptionItemProps {
+  option: QuestionFlowOption;
+  isSelected: boolean;
+  isDisabled: boolean;
+  selectionMode: "single" | "multi";
+  isFirst: boolean;
+  isLast: boolean;
+  onToggle: () => void;
+  tabIndex?: number;
+  onFocus?: () => void;
+  buttonRef?: (el: HTMLButtonElement | null) => void;
+}
+
+function OptionItem({
+  option,
+  isSelected,
+  isDisabled,
+  selectionMode,
+  isFirst,
+  isLast,
+  onToggle,
+  tabIndex,
+  onFocus,
+  buttonRef,
+}: OptionItemProps) {
+  const hasAdjacentOptions = !isFirst && !isLast;
+
+  return (
+    <Button
+      ref={buttonRef}
+      data-id={option.id}
+      variant="ghost"
+      size="lg"
+      role="option"
+      aria-selected={isSelected}
+      onClick={onToggle}
+      onFocus={onFocus}
+      tabIndex={tabIndex}
+      disabled={isDisabled}
+      className={cn(
+        "peer group relative h-auto min-h-[50px] w-full justify-start text-left text-sm font-medium",
+        "rounded-none border-0 bg-transparent px-0 py-2 text-base shadow-none transition-none hover:bg-transparent! @md/question-flow:text-sm",
+        isFirst && "pb-2.5",
+        hasAdjacentOptions && "py-2.5",
+      )}
+    >
+      <span
+        className={cn(
+          "bg-primary/5 absolute inset-0 -mx-3 -my-0.5 rounded-xl opacity-0 transition-opacity group-hover:opacity-100",
+        )}
+      />
+      <div className="relative flex items-start gap-3">
+        <span className="flex h-6 items-center">
+          <SelectionIndicator
+            mode={selectionMode}
+            isSelected={isSelected}
+            disabled={option.disabled}
+          />
+        </span>
+        {option.icon && (
+          <span className="flex h-6 items-center">{option.icon}</span>
+        )}
+        <div className="flex flex-col text-left">
+          <span className="leading-6 text-pretty">{option.label}</span>
+          {option.description && (
+            <span className="text-muted-foreground text-sm font-normal text-pretty">
+              {option.description}
+            </span>
+          )}
+        </div>
+      </div>
+    </Button>
+  );
+}
+
+function QuestionFlowReceipt({
+  id,
+  choice,
+  className,
+}: QuestionFlowReceiptProps) {
+  return (
+    <div
+      className={cn(
+        "@container/question-flow flex w-full min-w-80 max-w-md flex-col",
+        "text-foreground",
+        "motion-safe:animate-in motion-safe:fade-in motion-safe:blur-in-sm motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-out motion-safe:fill-mode-both",
+        className,
+      )}
+      data-slot="question-flow"
+      data-tool-ui-id={id}
+      data-receipt="true"
+      role="status"
+      aria-label={choice.title}
+    >
+      <div
+        className={cn(
+          "bg-card/60 flex w-full flex-col gap-3 rounded-2xl border px-5 py-4 shadow-xs",
+        )}
+      >
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-base font-medium">{choice.title}</span>
+          <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-500">
+            <Check className="size-3.5" />
+            Complete
+          </span>
+        </div>
+        <div className="flex flex-col">
+          {choice.summary.map((item, index) => (
+            <Fragment key={index}>
+              {index > 0 && <Separator className="my-2" />}
+              <div
+                className="flex flex-col gap-0.5 text-sm motion-safe:animate-in motion-safe:fade-in motion-safe:blur-in-sm motion-safe:slide-in-from-bottom-1 motion-safe:duration-300 motion-safe:ease-out motion-safe:fill-mode-both"
+                style={{ animationDelay: `${150 + index * 75}ms` }}
+              >
+                <span className="text-muted-foreground">{item.label}</span>
+                <span className="font-medium">{item.value}</span>
+              </div>
+            </Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface StepBodyData {
+  stepKey: string;
+  title: string;
+  description?: string;
+  options: QuestionFlowOption[];
+  selectionMode: "single" | "multi";
+  selectedIds: Set<string>;
+}
+
+export function getQuestionFlowStepIds(id: string, stepKey: string) {
+  const safeId = encodeURIComponent(id).replace(/%/g, "_");
+  const safeStepKey = encodeURIComponent(stepKey).replace(/%/g, "_");
+  return {
+    titleId: `${safeId}-${safeStepKey}-title`,
+    descriptionId: `${safeId}-${safeStepKey}-description`,
+  };
+}
+
+interface StepContentProps {
+  step: number;
+  totalSteps?: number;
+  title: string;
+  description?: string;
+  options: QuestionFlowOption[];
+  selectionMode: "single" | "multi";
+  selectedIds: Set<string>;
+  onToggle: (optionId: string) => void;
+  onBack?: () => void;
+  onNext: () => void;
+  showBack: boolean;
+  isLastStep: boolean;
+  id: string;
+  className?: string;
+  stepKey?: string;
+  exitingStepData?: StepBodyData | null;
+  transitionDirection?: "forward" | "backward";
+}
+
+function StepBodyContent({
+  stepKey,
+  title,
+  description,
+  options,
+  selectionMode,
+  selectedIds,
+  onToggle,
+  id,
+  isExiting,
+  transitionDirection,
+}: {
+  stepKey: string;
+  title: string;
+  description?: string;
+  options: QuestionFlowOption[];
+  selectionMode: "single" | "multi";
+  selectedIds: Set<string>;
+  onToggle?: (optionId: string) => void;
+  id: string;
+  isExiting?: boolean;
+  transitionDirection?: "forward" | "backward";
+}) {
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const { titleId, descriptionId } = getQuestionFlowStepIds(id, stepKey);
+
+  const optionStates = useMemo(() => {
+    return options.map((option) => {
+      const isSelected = selectedIds.has(option.id);
+      const isDisabled = option.disabled ?? false;
+      return { option, isSelected, isDisabled };
+    });
+  }, [options, selectedIds]);
+
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const firstSelected = optionStates.findIndex(
+      (s) => s.isSelected && !s.isDisabled,
+    );
+    if (firstSelected >= 0) return firstSelected;
+    const firstEnabled = optionStates.findIndex((s) => !s.isDisabled);
+    return firstEnabled >= 0 ? firstEnabled : 0;
+  });
+
+  const focusOptionAt = useCallback((index: number) => {
+    const el = optionRefs.current[index];
+    if (el) el.focus();
+    setActiveIndex(index);
+  }, []);
+
+  const findNextEnabledIndex = useCallback(
+    (start: number, direction: 1 | -1) => {
+      const len = optionStates.length;
+      if (len === 0) return 0;
+      for (let s = 1; s <= len; s++) {
+        const idx = (start + direction * s + len) % len;
+        if (!optionStates[idx].isDisabled) return idx;
+      }
+      return start;
+    },
+    [optionStates],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (optionStates.length === 0 || isExiting) return;
+
+      const key = e.key;
+
+      if (key === "ArrowDown") {
+        e.preventDefault();
+        focusOptionAt(findNextEnabledIndex(activeIndex, 1));
+        return;
+      }
+
+      if (key === "ArrowUp") {
+        e.preventDefault();
+        focusOptionAt(findNextEnabledIndex(activeIndex, -1));
+        return;
+      }
+
+      if (key === "Home") {
+        e.preventDefault();
+        const first = optionStates.findIndex((s) => !s.isDisabled);
+        focusOptionAt(first >= 0 ? first : 0);
+        return;
+      }
+
+      if (key === "End") {
+        e.preventDefault();
+        for (let i = optionStates.length - 1; i >= 0; i--) {
+          if (!optionStates[i].isDisabled) {
+            focusOptionAt(i);
+            return;
+          }
+        }
+        return;
+      }
+
+      if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        const current = optionStates[activeIndex];
+        if (!current || current.isDisabled) return;
+        onToggle?.(current.option.id);
+        return;
+      }
+    },
+    [
+      activeIndex,
+      findNextEnabledIndex,
+      focusOptionAt,
+      isExiting,
+      onToggle,
+      optionStates,
+    ],
+  );
+
+  const isTransitioning = transitionDirection !== undefined;
+
+  const enterClass =
+    transitionDirection === "forward"
+      ? "motion-safe:slide-in-from-right-4"
+      : "motion-safe:slide-in-from-left-4";
+
+  const exitClass =
+    transitionDirection === "forward"
+      ? "motion-safe:slide-out-to-left-4"
+      : "motion-safe:slide-out-to-right-4";
+
+  return (
+    <div
+      key={stepKey}
+      className={cn(
+        "flex flex-col gap-4",
+        isExiting && [
+          "absolute inset-0",
+          "motion-safe:animate-out motion-safe:fade-out motion-safe:blur-out-sm motion-safe:duration-250 motion-safe:ease-[var(--cubic-ease-in-out)] motion-safe:fill-mode-forwards",
+          exitClass,
+        ],
+        !isExiting &&
+          isTransitioning && [
+            "motion-safe:animate-in motion-safe:fade-in motion-safe:blur-in-sm motion-safe:duration-250 motion-safe:ease-[var(--cubic-ease-in-out)] motion-safe:fill-mode-both",
+            enterClass,
+          ],
+      )}
+      aria-hidden={isExiting}
+    >
+      <div className="flex flex-col gap-1">
+        <h2 id={titleId} className="text-lg font-semibold leading-tight">
+          {title}
+        </h2>
+        {description && (
+          <p id={descriptionId} className="text-muted-foreground text-sm">
+            {description}
+          </p>
+        )}
+      </div>
+
+      <div
+        className="flex flex-col px-1"
+        role="listbox"
+        aria-multiselectable={selectionMode === "multi"}
+        onKeyDown={isExiting ? undefined : handleKeyDown}
+      >
+        {optionStates.map(({ option, isSelected, isDisabled }, index) => (
+          <Fragment key={option.id}>
+            {index > 0 && (
+              <Separator
+                className="transition-opacity [@media(hover:hover)]:[&:has(+_:hover)]:opacity-0 [@media(hover:hover)]:[.peer:hover+&]:opacity-0"
+                orientation="horizontal"
+              />
+            )}
+            <OptionItem
+              option={option}
+              isSelected={isSelected}
+              isDisabled={isExiting || isDisabled}
+              selectionMode={selectionMode}
+              isFirst={index === 0}
+              isLast={index === optionStates.length - 1}
+              tabIndex={isExiting ? -1 : index === activeIndex ? 0 : -1}
+              onFocus={() => !isExiting && setActiveIndex(index)}
+              buttonRef={(el) => {
+                optionRefs.current[index] = el;
+              }}
+              onToggle={() => !isExiting && onToggle?.(option.id)}
+            />
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function StepContent({
+  step,
+  totalSteps,
+  title,
+  description,
+  options,
+  selectionMode,
+  selectedIds,
+  onToggle,
+  onBack,
+  onNext,
+  showBack,
+  isLastStep,
+  id,
+  className,
+  stepKey,
+  exitingStepData,
+  transitionDirection = "forward",
+}: StepContentProps) {
+  const isTransitioning =
+    exitingStepData !== null && exitingStepData !== undefined;
+  const canProceed = selectedIds.size > 0;
+  const resolvedStepKey = stepKey ?? "current";
+  const { titleId, descriptionId } = getQuestionFlowStepIds(
+    id,
+    resolvedStepKey,
+  );
+
+  const stepLabel = totalSteps
+    ? `Step ${step} of ${totalSteps}`
+    : `Step ${step}`;
+
+  return (
+    <div
+      className={cn(
+        "@container/question-flow flex w-full min-w-80 max-w-md flex-col gap-3",
+        "text-foreground",
+        className,
+      )}
+      data-slot="question-flow"
+      data-tool-ui-id={id}
+      role="form"
+      aria-labelledby={titleId}
+      aria-describedby={description ? descriptionId : undefined}
+    >
+      <div
+        className={cn(
+          "bg-card flex w-full flex-col gap-4 rounded-2xl border p-5 shadow-xs",
+        )}
+      >
+        <div className="flex flex-col gap-1">
+          <div className="flex flex-col gap-2">
+            <span
+              className="text-muted-foreground text-xs font-medium uppercase tracking-wide"
+              aria-label={stepLabel}
+            >
+              {stepLabel}
+            </span>
+            {totalSteps && <ProgressBar current={step} total={totalSteps} />}
+          </div>
+        </div>
+
+        <div className="relative mt-1">
+          {exitingStepData && (
+            <StepBodyContent
+              key={exitingStepData.stepKey}
+              stepKey={exitingStepData.stepKey}
+              title={exitingStepData.title}
+              description={exitingStepData.description}
+              options={exitingStepData.options}
+              selectionMode={exitingStepData.selectionMode}
+              selectedIds={exitingStepData.selectedIds}
+              id={id}
+              isExiting
+              transitionDirection={transitionDirection}
+            />
+          )}
+          <StepBodyContent
+            key={resolvedStepKey}
+            stepKey={resolvedStepKey}
+            title={title}
+            description={description}
+            options={options}
+            selectionMode={selectionMode}
+            selectedIds={selectedIds}
+            onToggle={onToggle}
+            id={id}
+            isExiting={false}
+            transitionDirection={
+              exitingStepData ? transitionDirection : undefined
+            }
+          />
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          {showBack ? (
+            <Button
+              variant="ghost"
+              size="default"
+              onClick={onBack}
+              disabled={isTransitioning}
+              className="gap-1 rounded-full text-muted-foreground"
+            >
+              <ChevronLeft className="size-4" />
+              Back
+            </Button>
+          ) : (
+            <div />
+          )}
+          <Button
+            variant="default"
+            size="default"
+            onClick={onNext}
+            disabled={!canProceed || isTransitioning}
+            className="rounded-full"
+          >
+            {isLastStep ? "Complete" : "Next"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function QuestionFlowProgressive({
+  id,
+  step,
+  title,
+  description,
+  options,
+  selectionMode = "single",
+  defaultValue,
+  onSelect,
+  onBack,
+  className,
+}: QuestionFlowProgressiveProps) {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(
+    () => new Set(defaultValue ?? []),
+  );
+
+  const handleToggle = useCallback(
+    (optionId: string) => {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        if (selectionMode === "single") {
+          if (next.has(optionId)) {
+            next.delete(optionId);
+          } else {
+            next.clear();
+            next.add(optionId);
+          }
+        } else {
+          if (next.has(optionId)) {
+            next.delete(optionId);
+          } else {
+            next.add(optionId);
+          }
+        }
+        return next;
+      });
+    },
+    [selectionMode],
+  );
+
+  const handleNext = useCallback(() => {
+    if (selectedIds.size === 0) return;
+    const selection = Array.from(selectedIds);
+    onSelect?.(selection);
+  }, [onSelect, selectedIds]);
+
+  return (
+    <StepContent
+      id={id}
+      step={step}
+      title={title}
+      description={description}
+      options={options}
+      selectionMode={selectionMode}
+      selectedIds={selectedIds}
+      onToggle={handleToggle}
+      onBack={onBack}
+      onNext={handleNext}
+      showBack={step > 1 && onBack !== undefined}
+      isLastStep={false}
+      className={className}
+    />
+  );
+}
+
+function QuestionFlowUpfront({
+  id,
+  steps,
+  onStepChange,
+  onComplete,
+  className,
+}: QuestionFlowUpfrontProps) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, string[]>>({});
+  const [exitingStepData, setExitingStepData] = useState<StepBodyData | null>(
+    null,
+  );
+  const [transitionDirection, setTransitionDirection] = useState<
+    "forward" | "backward"
+  >("forward");
+
+  const currentStep = steps[currentStepIndex];
+  const isLastStep = currentStepIndex === steps.length - 1;
+  const totalSteps = steps.length;
+
+  useEffect(() => {
+    if (exitingStepData) {
+      const timer = setTimeout(() => setExitingStepData(null), 250);
+      return () => clearTimeout(timer);
+    }
+  }, [exitingStepData]);
+
+  const currentSelection = useMemo(() => {
+    const answer = answers[currentStep.id];
+    return new Set(answer ?? []);
+  }, [answers, currentStep.id]);
+
+  const handleToggle = useCallback(
+    (optionId: string) => {
+      const mode = currentStep.selectionMode ?? "single";
+      setAnswers((prev) => {
+        const current = prev[currentStep.id] ?? [];
+        let next: string[];
+
+        if (mode === "single") {
+          next = current.includes(optionId) ? [] : [optionId];
+        } else {
+          next = current.includes(optionId)
+            ? current.filter((id) => id !== optionId)
+            : [...current, optionId];
+        }
+
+        return { ...prev, [currentStep.id]: next };
+      });
+    },
+    [currentStep.id, currentStep.selectionMode],
+  );
+
+  const handleBack = useCallback(() => {
+    if (currentStepIndex > 0) {
+      const currentStepData = steps[currentStepIndex];
+      const stepOptions: QuestionFlowOption[] = currentStepData.options.map(
+        (opt) => ({
+          ...opt,
+          icon: undefined,
+        }),
+      );
+
+      setExitingStepData({
+        stepKey: currentStepData.id,
+        title: currentStepData.title,
+        description: currentStepData.description,
+        options: stepOptions,
+        selectionMode: currentStepData.selectionMode ?? "single",
+        selectedIds: new Set(answers[currentStepData.id] ?? []),
+      });
+      setTransitionDirection("backward");
+      const prevIndex = currentStepIndex - 1;
+      setCurrentStepIndex(prevIndex);
+      onStepChange?.(steps[prevIndex].id);
+    }
+  }, [answers, currentStepIndex, onStepChange, steps]);
+
+  const handleNext = useCallback(() => {
+    if (currentSelection.size === 0) return;
+
+    if (isLastStep) {
+      onComplete?.(answers);
+    } else {
+      const currentStepData = steps[currentStepIndex];
+      const stepOptions: QuestionFlowOption[] = currentStepData.options.map(
+        (opt) => ({
+          ...opt,
+          icon: undefined,
+        }),
+      );
+
+      setExitingStepData({
+        stepKey: currentStepData.id,
+        title: currentStepData.title,
+        description: currentStepData.description,
+        options: stepOptions,
+        selectionMode: currentStepData.selectionMode ?? "single",
+        selectedIds: new Set(answers[currentStepData.id] ?? []),
+      });
+      setTransitionDirection("forward");
+      const nextIndex = currentStepIndex + 1;
+      setCurrentStepIndex(nextIndex);
+      onStepChange?.(steps[nextIndex].id);
+    }
+  }, [
+    answers,
+    currentSelection.size,
+    currentStepIndex,
+    isLastStep,
+    onComplete,
+    onStepChange,
+    steps,
+  ]);
+
+  const stepOptions: QuestionFlowOption[] = currentStep.options.map((opt) => ({
+    ...opt,
+    icon: undefined,
+  }));
+
+  return (
+    <StepContent
+      id={id}
+      step={currentStepIndex + 1}
+      totalSteps={totalSteps}
+      title={currentStep.title}
+      description={currentStep.description}
+      options={stepOptions}
+      selectionMode={currentStep.selectionMode ?? "single"}
+      selectedIds={currentSelection}
+      onToggle={handleToggle}
+      onBack={handleBack}
+      onNext={handleNext}
+      showBack={currentStepIndex > 0}
+      isLastStep={isLastStep}
+      className={className}
+      stepKey={currentStep.id}
+      exitingStepData={exitingStepData}
+      transitionDirection={transitionDirection}
+    />
+  );
+}
+
+export function QuestionFlow(props: QuestionFlowProps) {
+  if ("choice" in props && props.choice !== undefined) {
+    return <QuestionFlowReceipt {...(props as QuestionFlowReceiptProps)} />;
+  }
+
+  if ("steps" in props && props.steps !== undefined) {
+    return <QuestionFlowUpfront {...(props as QuestionFlowUpfrontProps)} />;
+  }
+
+  return (
+    <QuestionFlowProgressive {...(props as QuestionFlowProgressiveProps)} />
+  );
+}
diff --git a/frontend/src/toolui/components/question-flow/schema.ts b/frontend/src/toolui/components/question-flow/schema.ts
new file mode 100644
index 00000000..a8777f14
--- /dev/null
+++ b/frontend/src/toolui/components/question-flow/schema.ts
@@ -0,0 +1,131 @@
+import { z } from "zod";
+import type { ReactNode } from "react";
+import { defineToolUiContract } from "../shared/contract";
+import { ToolUIIdSchema, ToolUIRoleSchema } from "../shared/schema";
+
+export const QuestionFlowOptionSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  description: z.string().optional(),
+  icon: z.custom<ReactNode>().optional(),
+  disabled: z.boolean().optional(),
+});
+
+export type QuestionFlowOption = z.infer<typeof QuestionFlowOptionSchema>;
+
+export const QuestionFlowStepDefinitionSchema = z.object({
+  id: z.string().min(1),
+  title: z.string().min(1),
+  description: z.string().optional(),
+  options: z.array(QuestionFlowOptionSchema.omit({ icon: true })).min(1),
+  selectionMode: z.enum(["single", "multi"]).optional(),
+});
+
+export type QuestionFlowStepDefinition = z.infer<
+  typeof QuestionFlowStepDefinitionSchema
+>;
+
+export const QuestionFlowSummaryItemSchema = z.object({
+  label: z.string().min(1),
+  value: z.string().min(1),
+});
+
+export type QuestionFlowSummaryItem = z.infer<
+  typeof QuestionFlowSummaryItemSchema
+>;
+
+export const QuestionFlowChoiceSchema = z.object({
+  title: z.string().min(1),
+  summary: z.array(QuestionFlowSummaryItemSchema).min(1),
+});
+
+export type QuestionFlowChoice = z.infer<typeof QuestionFlowChoiceSchema>;
+
+const BaseSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+});
+
+export const SerializableProgressiveModeSchema = BaseSchema.extend({
+  step: z.number().min(1),
+  title: z.string().min(1),
+  description: z.string().optional(),
+  options: z.array(QuestionFlowOptionSchema.omit({ icon: true })).min(1),
+  selectionMode: z.enum(["single", "multi"]).optional(),
+});
+
+export type SerializableProgressiveMode = z.infer<
+  typeof SerializableProgressiveModeSchema
+>;
+
+export const SerializableUpfrontModeSchema = BaseSchema.extend({
+  steps: z.array(QuestionFlowStepDefinitionSchema).min(1),
+});
+
+export type SerializableUpfrontMode = z.infer<
+  typeof SerializableUpfrontModeSchema
+>;
+
+export const SerializableReceiptModeSchema = BaseSchema.extend({
+  choice: QuestionFlowChoiceSchema,
+});
+
+export type SerializableReceiptMode = z.infer<
+  typeof SerializableReceiptModeSchema
+>;
+
+export const SerializableQuestionFlowSchema = z.union([
+  SerializableProgressiveModeSchema,
+  SerializableUpfrontModeSchema,
+  SerializableReceiptModeSchema,
+]);
+
+export type SerializableQuestionFlow = z.infer<
+  typeof SerializableQuestionFlowSchema
+>;
+
+const SerializableQuestionFlowSchemaContract = defineToolUiContract(
+  "QuestionFlow",
+  SerializableQuestionFlowSchema,
+);
+
+export const parseSerializableQuestionFlow: (
+  input: unknown,
+) => SerializableQuestionFlow = SerializableQuestionFlowSchemaContract.parse;
+
+export const safeParseSerializableQuestionFlow: (
+  input: unknown,
+) => SerializableQuestionFlow | null =
+  SerializableQuestionFlowSchemaContract.safeParse;
+interface BaseRuntimeProps {
+  className?: string;
+}
+
+export interface QuestionFlowProgressiveProps
+  extends BaseRuntimeProps, Omit<SerializableProgressiveMode, "options"> {
+  options: QuestionFlowOption[];
+  defaultValue?: string[];
+  onSelect?: (optionIds: string[]) => void | Promise<void>;
+  onBack?: () => void;
+  steps?: never;
+  choice?: never;
+}
+
+export interface QuestionFlowUpfrontProps
+  extends BaseRuntimeProps, SerializableUpfrontMode {
+  onStepChange?: (stepId: string) => void;
+  onComplete?: (answers: Record<string, string[]>) => void | Promise<void>;
+  step?: never;
+  choice?: never;
+}
+
+export interface QuestionFlowReceiptProps
+  extends BaseRuntimeProps, SerializableReceiptMode {
+  step?: never;
+  steps?: never;
+}
+
+export type QuestionFlowProps =
+  | QuestionFlowProgressiveProps
+  | QuestionFlowUpfrontProps
+  | QuestionFlowReceiptProps;
diff --git a/frontend/src/toolui/components/shared/README.md b/frontend/src/toolui/components/shared/README.md
new file mode 100644
index 00000000..40a5f32d
--- /dev/null
+++ b/frontend/src/toolui/components/shared/README.md
@@ -0,0 +1,19 @@
+# Shared
+
+Implementation for the "shared" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/shared/index.ts
+- serializable schema + parse helpers: components/tool-ui/shared/schema.ts
+
+## Companion assets
+
+- Docs page: no dedicated docs page yet
+- Preset payload: no dedicated preset yet
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/shared/_adapter.tsx b/frontend/src/toolui/components/shared/_adapter.tsx
new file mode 100644
index 00000000..b4b55456
--- /dev/null
+++ b/frontend/src/toolui/components/shared/_adapter.tsx
@@ -0,0 +1,12 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn     → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button → shadcn/ui Button
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
diff --git a/frontend/src/toolui/components/shared/action-buttons.tsx b/frontend/src/toolui/components/shared/action-buttons.tsx
new file mode 100644
index 00000000..73a99af3
--- /dev/null
+++ b/frontend/src/toolui/components/shared/action-buttons.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import type { Action } from "./schema";
+import { cn, Button } from "./_adapter";
+import { useActionButtons } from "./use-action-buttons";
+
+export interface ActionButtonsProps {
+  actions: Action[];
+  onAction: (actionId: string) => void | Promise<void>;
+  onBeforeAction?: (actionId: string) => boolean | Promise<boolean>;
+  confirmTimeout?: number;
+  align?: "left" | "center" | "right";
+  className?: string;
+}
+
+export function ActionButtons({
+  actions,
+  onAction,
+  onBeforeAction,
+  confirmTimeout = 3000,
+  align = "right",
+  className,
+}: ActionButtonsProps) {
+  const { actions: resolvedActions, runAction } = useActionButtons({
+    actions,
+    onAction,
+    onBeforeAction,
+    confirmTimeout,
+  });
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3",
+        "@sm/actions:flex-row @sm/actions:flex-wrap @sm/actions:items-center @sm/actions:gap-2",
+        align === "left" && "@sm/actions:justify-start",
+        align === "center" && "@sm/actions:justify-center",
+        align === "right" && "@sm/actions:justify-end",
+        className,
+      )}
+    >
+      {resolvedActions.map((action) => {
+        const label = action.currentLabel;
+        const variant = action.variant || "default";
+
+        return (
+          <Button
+            key={action.id}
+            variant={variant}
+            onClick={() => runAction(action.id)}
+            disabled={action.isDisabled}
+            className={cn(
+              "rounded-full px-4!",
+              "justify-center",
+              "min-h-11 w-full text-base",
+              "@sm/actions:min-h-0 @sm/actions:w-auto @sm/actions:px-3 @sm/actions:py-2 @sm/actions:text-sm",
+              action.isConfirming &&
+                "ring-destructive ring-2 ring-offset-2 motion-safe:animate-pulse",
+            )}
+            aria-label={
+              action.shortcut ? `${label} (${action.shortcut})` : label
+            }
+          >
+            {action.isLoading && (
+              <svg
+                className="mr-2 h-4 w-4 motion-safe:animate-spin"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            )}
+            {action.icon && !action.isLoading && (
+              <span className="mr-2">{action.icon}</span>
+            )}
+            {label}
+            {action.shortcut && !action.isLoading && (
+              <kbd className="border-border bg-muted ml-2.5 hidden rounded-lg border px-2 py-0.5 font-mono text-xs font-medium sm:inline-block">
+                {action.shortcut}
+              </kbd>
+            )}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/shared/actions-config.ts b/frontend/src/toolui/components/shared/actions-config.ts
new file mode 100644
index 00000000..a1b0aa55
--- /dev/null
+++ b/frontend/src/toolui/components/shared/actions-config.ts
@@ -0,0 +1,48 @@
+import type { Action, ActionsConfig } from "./schema";
+
+export type ActionsProp = ActionsConfig | Action[];
+
+const NEGATORY_ACTION_IDS = new Set([
+  "cancel",
+  "dismiss",
+  "skip",
+  "no",
+  "reset",
+  "close",
+  "decline",
+  "reject",
+  "back",
+  "later",
+  "not-now",
+  "maybe-later",
+]);
+
+function inferVariant(action: Action): Action {
+  if (action.variant) return action;
+  if (NEGATORY_ACTION_IDS.has(action.id)) {
+    return { ...action, variant: "ghost" };
+  }
+  return action;
+}
+
+export function normalizeActionsConfig(
+  actions?: ActionsProp,
+): ActionsConfig | null {
+  if (!actions) return null;
+
+  const rawItems = Array.isArray(actions) ? actions : (actions.items ?? []);
+
+  if (rawItems.length === 0) {
+    return null;
+  }
+
+  const items = rawItems.map(inferVariant);
+
+  return Array.isArray(actions)
+    ? { items }
+    : {
+        items,
+        align: actions.align,
+        confirmTimeout: actions.confirmTimeout,
+      };
+}
diff --git a/frontend/src/toolui/components/shared/contract.ts b/frontend/src/toolui/components/shared/contract.ts
new file mode 100644
index 00000000..82bc05f1
--- /dev/null
+++ b/frontend/src/toolui/components/shared/contract.ts
@@ -0,0 +1,19 @@
+import { z } from "zod";
+import { parseWithSchema, safeParseWithSchema } from "./parse";
+
+export interface ToolUiContract<T> {
+  schema: z.ZodType<T>;
+  parse: (input: unknown) => T;
+  safeParse: (input: unknown) => T | null;
+}
+
+export function defineToolUiContract<T>(
+  componentName: string,
+  schema: z.ZodType<T>,
+): ToolUiContract<T> {
+  return {
+    schema,
+    parse: (input: unknown) => parseWithSchema(schema, input, componentName),
+    safeParse: (input: unknown) => safeParseWithSchema(schema, input),
+  };
+}
diff --git a/frontend/src/toolui/components/shared/decision-actions.tsx b/frontend/src/toolui/components/shared/decision-actions.tsx
new file mode 100644
index 00000000..006eb749
--- /dev/null
+++ b/frontend/src/toolui/components/shared/decision-actions.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useCallback } from "react";
+import { ActionButtons } from "./action-buttons";
+import {
+  DecisionResultSchema,
+  type DecisionAction,
+  type DecisionResult,
+} from "./schema";
+import { cn } from "./_adapter";
+import { useOptionalToolUI } from "./tool-ui-context";
+
+export interface DecisionActionsProps<
+  TPayload extends Record<string, unknown> = Record<string, unknown>,
+> {
+  id?: string;
+  actions: DecisionAction[];
+  onAction: (action: {
+    id: string;
+    label: string;
+  }) => DecisionResult<TPayload> | Promise<DecisionResult<TPayload>>;
+  onCommit: (result: DecisionResult<TPayload>) => void | Promise<void>;
+  onBeforeAction?: (actionId: string) => boolean | Promise<boolean>;
+  confirmTimeout?: number;
+  align?: "left" | "center" | "right";
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function DecisionActions<
+  TPayload extends Record<string, unknown> = Record<string, unknown>,
+>({
+  id: explicitId,
+  actions,
+  onAction,
+  onCommit,
+  onBeforeAction,
+  confirmTimeout,
+  align = "right",
+  ariaLabel,
+  className,
+}: DecisionActionsProps<TPayload>) {
+  const context = useOptionalToolUI();
+  const id = context?.id ?? explicitId;
+
+  if (!id) {
+    throw new Error(
+      "DecisionActions requires a ToolUI provider or an explicit id prop.",
+    );
+  }
+
+  const handleAction = useCallback(
+    async (actionId: string) => {
+      const action = actions.find((item) => item.id === actionId);
+      if (!action) return;
+
+      const result = await onAction({ id: action.id, label: action.label });
+      const parsed = DecisionResultSchema.safeParse(result);
+
+      if (!parsed.success) {
+        throw new Error(
+          `DecisionActions expected a valid DecisionResult envelope for action "${action.id}".`,
+        );
+      }
+
+      await onCommit(parsed.data as DecisionResult<TPayload>);
+    },
+    [actions, onAction, onCommit],
+  );
+
+  return (
+    <div
+      className={cn("@container/actions flex flex-col gap-2", className)}
+      data-slot="decision-actions"
+      data-tool-ui-id={id}
+      aria-label={ariaLabel ?? "Decision actions"}
+    >
+      <ActionButtons
+        actions={actions}
+        onAction={handleAction}
+        onBeforeAction={onBeforeAction}
+        confirmTimeout={confirmTimeout}
+        align={align}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/shared/embedded-actions.ts b/frontend/src/toolui/components/shared/embedded-actions.ts
new file mode 100644
index 00000000..f0d318ac
--- /dev/null
+++ b/frontend/src/toolui/components/shared/embedded-actions.ts
@@ -0,0 +1,17 @@
+import type { ActionsProp } from "./actions-config";
+
+export type EmbeddedActionHandler<TState> = (
+  actionId: string,
+  state: TState,
+) => void | Promise<void>;
+
+export type EmbeddedBeforeActionHandler<TState> = (
+  actionId: string,
+  state: TState,
+) => boolean | Promise<boolean>;
+
+export interface EmbeddedActionsProps<TState> {
+  actions?: ActionsProp;
+  onAction?: EmbeddedActionHandler<TState>;
+  onBeforeAction?: EmbeddedBeforeActionHandler<TState>;
+}
diff --git a/frontend/src/toolui/components/shared/index.ts b/frontend/src/toolui/components/shared/index.ts
new file mode 100644
index 00000000..7001103f
--- /dev/null
+++ b/frontend/src/toolui/components/shared/index.ts
@@ -0,0 +1,27 @@
+export { ActionButtons } from "./action-buttons";
+export type { ActionButtonsProps } from "./action-buttons";
+export { DecisionActions } from "./decision-actions";
+export type { DecisionActionsProps } from "./decision-actions";
+export { LocalActions } from "./local-actions";
+export type { LocalActionsProps } from "./local-actions";
+export { ToolUI } from "./tool-ui";
+export type {
+  ToolUIProps,
+  ToolUISurfaceProps,
+  ToolUIActionsProps,
+} from "./tool-ui";
+export { useToolUI } from "./tool-ui-context";
+export { normalizeActionsConfig, type ActionsProp } from "./actions-config";
+export type {
+  EmbeddedActionHandler,
+  EmbeddedBeforeActionHandler,
+  EmbeddedActionsProps,
+} from "./embedded-actions";
+export * from "./contract";
+export * from "./parse";
+export * from "./schema";
+export * from "./toolkit";
+export * from "./use-controllable-state";
+export * from "./use-copy-to-clipboard";
+export * from "./use-signature-reset";
+export * from "./utils";
diff --git a/frontend/src/toolui/components/shared/local-actions.tsx b/frontend/src/toolui/components/shared/local-actions.tsx
new file mode 100644
index 00000000..245cb372
--- /dev/null
+++ b/frontend/src/toolui/components/shared/local-actions.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { ActionButtons } from "./action-buttons";
+import type { LocalAction } from "./schema";
+import { cn } from "./_adapter";
+import { useOptionalToolUI } from "./tool-ui-context";
+
+export interface LocalActionsProps {
+  id?: string;
+  actions: LocalAction[];
+  onAction: (actionId: string) => void | Promise<void>;
+  onBeforeAction?: (actionId: string) => boolean | Promise<boolean>;
+  confirmTimeout?: number;
+  align?: "left" | "center" | "right";
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function LocalActions({
+  id: explicitId,
+  actions,
+  onAction,
+  onBeforeAction,
+  confirmTimeout,
+  align = "right",
+  ariaLabel,
+  className,
+}: LocalActionsProps) {
+  const context = useOptionalToolUI();
+  const id = context?.id ?? explicitId;
+
+  if (!id) {
+    throw new Error(
+      "LocalActions requires a ToolUI provider or an explicit id prop.",
+    );
+  }
+
+  return (
+    <div
+      className={cn("@container/actions flex flex-col gap-2", className)}
+      data-slot="local-actions"
+      data-tool-ui-id={id}
+      aria-label={ariaLabel ?? "Local actions"}
+    >
+      <ActionButtons
+        actions={actions}
+        onAction={onAction}
+        onBeforeAction={onBeforeAction}
+        confirmTimeout={confirmTimeout}
+        align={align}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/shared/media/aspect-ratio.ts b/frontend/src/toolui/components/shared/media/aspect-ratio.ts
new file mode 100644
index 00000000..21352fd0
--- /dev/null
+++ b/frontend/src/toolui/components/shared/media/aspect-ratio.ts
@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+export const AspectRatioSchema = z
+  .enum(["auto", "1:1", "4:3", "16:9", "9:16"])
+  .default("auto");
+
+export type AspectRatio = z.infer<typeof AspectRatioSchema>;
+
+export const MediaFitSchema = z.enum(["cover", "contain"]).default("cover");
+
+export type MediaFit = z.infer<typeof MediaFitSchema>;
+
+export const RATIO_CLASS_MAP: Record<AspectRatio, string> = {
+  auto: "",
+  "1:1": "aspect-square",
+  "4:3": "aspect-[4/3]",
+  "16:9": "aspect-video",
+  "9:16": "aspect-[9/16]",
+};
+
+export function getRatioClass(ratio: AspectRatio): string {
+  return RATIO_CLASS_MAP[ratio];
+}
+
+export function getFitClass(fit: MediaFit): string {
+  return fit === "cover" ? "object-cover" : "object-contain";
+}
diff --git a/frontend/src/toolui/components/shared/media/format-utils.ts b/frontend/src/toolui/components/shared/media/format-utils.ts
new file mode 100644
index 00000000..ad6dc06a
--- /dev/null
+++ b/frontend/src/toolui/components/shared/media/format-utils.ts
@@ -0,0 +1,35 @@
+/**
+ * Format duration in milliseconds to human-readable string.
+ * @example formatDuration(128000) => "2:08"
+ * @example formatDuration(3661000) => "1:01:01"
+ */
+export function formatDuration(durationMs: number): string {
+  const totalSeconds = Math.round(durationMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds
+      .toString()
+      .padStart(2, "0")}`;
+  }
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Format file size in bytes to human-readable string.
+ * @example formatFileSize(1024) => "1 KB"
+ * @example formatFileSize(1536000) => "1.5 MB"
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let size = bytes / 1024;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit += 1;
+  }
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unit]}`;
+}
diff --git a/frontend/src/toolui/components/shared/media/index.ts b/frontend/src/toolui/components/shared/media/index.ts
new file mode 100644
index 00000000..5b655c70
--- /dev/null
+++ b/frontend/src/toolui/components/shared/media/index.ts
@@ -0,0 +1,19 @@
+export {
+  AspectRatioSchema,
+  MediaFitSchema,
+  RATIO_CLASS_MAP,
+  getRatioClass,
+  getFitClass,
+  type AspectRatio,
+  type MediaFit,
+} from "./aspect-ratio";
+
+export { OVERLAY_GRADIENT } from "./overlay-gradient";
+
+export { formatDuration, formatFileSize } from "./format-utils";
+
+export { sanitizeHref } from "./sanitize-href";
+export {
+  resolveSafeNavigationHref,
+  openSafeNavigationHref,
+} from "./safe-navigation";
diff --git a/frontend/src/toolui/components/shared/media/overlay-gradient.ts b/frontend/src/toolui/components/shared/media/overlay-gradient.ts
new file mode 100644
index 00000000..6ec2a321
--- /dev/null
+++ b/frontend/src/toolui/components/shared/media/overlay-gradient.ts
@@ -0,0 +1,25 @@
+/**
+ * Eased gradient for hover overlays on media elements.
+ * Creates a smooth fade from opaque black at top to transparent.
+ *
+ * @see https://larsenwork.com/easing-gradients/
+ */
+export const OVERLAY_GRADIENT = `linear-gradient(
+  to bottom,
+  hsl(0, 0%, 0%) 0%,
+  hsla(0, 0%, 0%, 0.987) 8.3%,
+  hsla(0, 0%, 0%, 0.951) 16.6%,
+  hsla(0, 0%, 0%, 0.896) 24.6%,
+  hsla(0, 0%, 0%, 0.825) 32.5%,
+  hsla(0, 0%, 0%, 0.741) 40.1%,
+  hsla(0, 0%, 0%, 0.648) 47.6%,
+  hsla(0, 0%, 0%, 0.55) 54.8%,
+  hsla(0, 0%, 0%, 0.45) 61.7%,
+  hsla(0, 0%, 0%, 0.352) 68.3%,
+  hsla(0, 0%, 0%, 0.259) 74.5%,
+  hsla(0, 0%, 0%, 0.175) 80.4%,
+  hsla(0, 0%, 0%, 0.104) 86%,
+  hsla(0, 0%, 0%, 0.049) 91.1%,
+  hsla(0, 0%, 0%, 0.013) 95.8%,
+  hsla(0, 0%, 0%, 0) 100%
+)` as const;
diff --git a/frontend/src/toolui/components/shared/media/safe-navigation.ts b/frontend/src/toolui/components/shared/media/safe-navigation.ts
new file mode 100644
index 00000000..b1f38bf4
--- /dev/null
+++ b/frontend/src/toolui/components/shared/media/safe-navigation.ts
@@ -0,0 +1,23 @@
+import { sanitizeHref } from "./sanitize-href";
+
+export function resolveSafeNavigationHref(
+  ...candidates: Array<string | null | undefined>
+): string | undefined {
+  for (const candidate of candidates) {
+    const safeHref = sanitizeHref(candidate ?? undefined);
+    if (safeHref) {
+      return safeHref;
+    }
+  }
+
+  return undefined;
+}
+
+export function openSafeNavigationHref(href: string | undefined): boolean {
+  if (!href || typeof window === "undefined") {
+    return false;
+  }
+
+  window.open(href, "_blank", "noopener,noreferrer");
+  return true;
+}
diff --git a/frontend/src/toolui/components/shared/media/sanitize-href.ts b/frontend/src/toolui/components/shared/media/sanitize-href.ts
new file mode 100644
index 00000000..fdc1608a
--- /dev/null
+++ b/frontend/src/toolui/components/shared/media/sanitize-href.ts
@@ -0,0 +1,36 @@
+/**
+ * Sanitize a URL to ensure it's safe for use in href attributes.
+ * Allows:
+ * - Absolute http(s) URLs
+ * - Relative URLs (/path, ./path, ../path, ?query, #hash)
+ *
+ * @returns The sanitized URL string, or undefined if invalid/unsafe
+ */
+export function sanitizeHref(href?: string): string | undefined {
+  if (!href) return undefined;
+  const candidate = href.trim();
+  if (!candidate) return undefined;
+
+  if (
+    candidate.startsWith("/") ||
+    candidate.startsWith("./") ||
+    candidate.startsWith("../") ||
+    candidate.startsWith("?") ||
+    candidate.startsWith("#")
+  ) {
+    if (candidate.startsWith("//")) return undefined;
+    // eslint-disable-next-line no-control-regex -- intentionally matching control characters
+    if (/[\u0000-\u001F\u007F]/.test(candidate)) return undefined;
+    return candidate;
+  }
+
+  try {
+    const url = new URL(candidate);
+    if (url.protocol === "http:" || url.protocol === "https:") {
+      return url.toString();
+    }
+  } catch {
+    return undefined;
+  }
+  return undefined;
+}
diff --git a/frontend/src/toolui/components/shared/parse.ts b/frontend/src/toolui/components/shared/parse.ts
new file mode 100644
index 00000000..7214241a
--- /dev/null
+++ b/frontend/src/toolui/components/shared/parse.ts
@@ -0,0 +1,51 @@
+import { z } from "zod";
+
+function formatZodPath(path: Array<string | number | symbol>): string {
+  if (path.length === 0) return "root";
+  return path
+    .map((segment) =>
+      typeof segment === "number" ? `[${segment}]` : String(segment),
+    )
+    .join(".");
+}
+
+/**
+ * Format Zod errors into a compact `path: message` string.
+ */
+export function formatZodError(error: z.ZodError): string {
+  const parts = error.issues.map((issue) => {
+    const path = formatZodPath(issue.path);
+    return `${path}: ${issue.message}`;
+  });
+
+  return Array.from(new Set(parts)).join("; ");
+}
+
+/**
+ * Parse unknown input and throw a readable error.
+ */
+export function parseWithSchema<T>(
+  schema: z.ZodType<T>,
+  input: unknown,
+  name: string,
+): T {
+  const res = schema.safeParse(input);
+  if (!res.success) {
+    throw new Error(`Invalid ${name} payload: ${formatZodError(res.error)}`);
+  }
+  return res.data;
+}
+
+/**
+ * Parse unknown input, returning `null` instead of throwing on failure.
+ *
+ * Use this in assistant-ui `render` functions where `args` stream in
+ * incrementally and may be incomplete until the tool call finishes.
+ */
+export function safeParseWithSchema<T>(
+  schema: z.ZodType<T>,
+  input: unknown,
+): T | null {
+  const res = schema.safeParse(input);
+  return res.success ? res.data : null;
+}
diff --git a/frontend/src/toolui/components/shared/pierre-dark-theme.js b/frontend/src/toolui/components/shared/pierre-dark-theme.js
new file mode 100644
index 00000000..75019522
--- /dev/null
+++ b/frontend/src/toolui/components/shared/pierre-dark-theme.js
@@ -0,0 +1,1374 @@
+//#region src/themes/pierre-dark.json
+var name = "pierre-dark";
+var type = "dark";
+var colors = {
+  "editor.background": "#070707",
+  "editor.foreground": "#fbfbfb",
+  foreground: "#fbfbfb",
+  focusBorder: "#009fff",
+  "selection.background": "#19283c",
+  "editor.selectionBackground": "#009fff4d",
+  "editor.lineHighlightBackground": "#19283c8c",
+  "editorCursor.foreground": "#009fff",
+  "editorLineNumber.foreground": "#84848A",
+  "editorLineNumber.activeForeground": "#adadb1",
+  "editorIndentGuide.background": "#39393c",
+  "editorIndentGuide.activeBackground": "#2e2e30",
+  "diffEditor.insertedTextBackground": "#00cab11a",
+  "diffEditor.deletedTextBackground": "#ff2e3f1a",
+  "sideBar.background": "#141415",
+  "sideBar.foreground": "#adadb1",
+  "sideBar.border": "#070707",
+  "sideBarTitle.foreground": "#fbfbfb",
+  "sideBarSectionHeader.background": "#141415",
+  "sideBarSectionHeader.foreground": "#adadb1",
+  "sideBarSectionHeader.border": "#070707",
+  "activityBar.background": "#141415",
+  "activityBar.foreground": "#fbfbfb",
+  "activityBar.border": "#070707",
+  "activityBar.activeBorder": "#009fff",
+  "activityBarBadge.background": "#009fff",
+  "activityBarBadge.foreground": "#070707",
+  "titleBar.activeBackground": "#141415",
+  "titleBar.activeForeground": "#fbfbfb",
+  "titleBar.inactiveBackground": "#141415",
+  "titleBar.inactiveForeground": "#84848A",
+  "titleBar.border": "#070707",
+  "list.activeSelectionBackground": "#19283c99",
+  "list.activeSelectionForeground": "#fbfbfb",
+  "list.inactiveSelectionBackground": "#19283c73",
+  "list.hoverBackground": "#19283c59",
+  "list.focusOutline": "#009fff",
+  "tab.activeBackground": "#070707",
+  "tab.activeForeground": "#fbfbfb",
+  "tab.activeBorderTop": "#009fff",
+  "tab.inactiveBackground": "#141415",
+  "tab.inactiveForeground": "#84848A",
+  "tab.border": "#070707",
+  "editorGroupHeader.tabsBackground": "#141415",
+  "editorGroupHeader.tabsBorder": "#070707",
+  "panel.background": "#141415",
+  "panel.border": "#070707",
+  "panelTitle.activeBorder": "#009fff",
+  "panelTitle.activeForeground": "#fbfbfb",
+  "panelTitle.inactiveForeground": "#84848A",
+  "statusBar.background": "#141415",
+  "statusBar.foreground": "#adadb1",
+  "statusBar.border": "#070707",
+  "statusBar.noFolderBackground": "#141415",
+  "statusBar.debuggingBackground": "#ffca00",
+  "statusBar.debuggingForeground": "#070707",
+  "statusBarItem.remoteBackground": "#141415",
+  "statusBarItem.remoteForeground": "#adadb1",
+  "input.background": "#1F1F21",
+  "input.border": "#424245",
+  "input.foreground": "#fbfbfb",
+  "input.placeholderForeground": "#79797F",
+  "dropdown.background": "#1F1F21",
+  "dropdown.border": "#424245",
+  "dropdown.foreground": "#fbfbfb",
+  "button.background": "#009fff",
+  "button.foreground": "#070707",
+  "button.hoverBackground": "#0190e6",
+  "textLink.foreground": "#009fff",
+  "textLink.activeForeground": "#009fff",
+  "gitDecoration.addedResourceForeground": "#00cab1",
+  "gitDecoration.conflictingResourceForeground": "#ffca00",
+  "gitDecoration.modifiedResourceForeground": "#009fff",
+  "gitDecoration.deletedResourceForeground": "#ff2e3f",
+  "gitDecoration.untrackedResourceForeground": "#00cab1",
+  "gitDecoration.ignoredResourceForeground": "#84848A",
+  "terminal.titleForeground": "#adadb1",
+  "terminal.titleInactiveForeground": "#84848A",
+  "terminal.background": "#141415",
+  "terminal.foreground": "#adadb1",
+  "terminal.ansiBlack": "#141415",
+  "terminal.ansiRed": "#ff2e3f",
+  "terminal.ansiGreen": "#0dbe4e",
+  "terminal.ansiYellow": "#ffca00",
+  "terminal.ansiBlue": "#009fff",
+  "terminal.ansiMagenta": "#c635e4",
+  "terminal.ansiCyan": "#08c0ef",
+  "terminal.ansiWhite": "#c6c6c8",
+  "terminal.ansiBrightBlack": "#141415",
+  "terminal.ansiBrightRed": "#ff2e3f",
+  "terminal.ansiBrightGreen": "#0dbe4e",
+  "terminal.ansiBrightYellow": "#ffca00",
+  "terminal.ansiBrightBlue": "#009fff",
+  "terminal.ansiBrightMagenta": "#c635e4",
+  "terminal.ansiBrightCyan": "#08c0ef",
+  "terminal.ansiBrightWhite": "#c6c6c8",
+};
+var tokenColors = [
+  {
+    scope: ["comment", "punctuation.definition.comment"],
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: "comment markup.link",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: ["string", "constant.other.symbol"],
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: [
+      "punctuation.definition.string.begin",
+      "punctuation.definition.string.end",
+    ],
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: ["constant.numeric", "constant.language.boolean"],
+    settings: { foreground: "#68cdf2" },
+  },
+  {
+    scope: "constant",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "punctuation.definition.constant",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "constant.language",
+    settings: { foreground: "#68cdf2" },
+  },
+  {
+    scope: "variable.other.constant",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "keyword",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "keyword.control",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: ["storage", "storage.type", "storage.modifier"],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "token.storage",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: [
+      "keyword.operator.new",
+      "keyword.operator.expression.instanceof",
+      "keyword.operator.expression.typeof",
+      "keyword.operator.expression.void",
+      "keyword.operator.expression.delete",
+      "keyword.operator.expression.in",
+      "keyword.operator.expression.of",
+      "keyword.operator.expression.keyof",
+    ],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "keyword.operator.delete",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: ["variable", "identifier", "meta.definition.variable"],
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: [
+      "variable.other.readwrite",
+      "meta.object-literal.key",
+      "support.variable.property",
+      "support.variable.object.process",
+      "support.variable.object.node",
+    ],
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: "variable.language",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "variable.parameter.function",
+    settings: { foreground: "#adadb1" },
+  },
+  {
+    scope: "function.parameter",
+    settings: { foreground: "#adadb1" },
+  },
+  {
+    scope: "variable.parameter",
+    settings: { foreground: "#adadb1" },
+  },
+  {
+    scope: "variable.parameter.function.language.python",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "variable.parameter.function.python",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: [
+      "support.function",
+      "entity.name.function",
+      "meta.function-call",
+      "meta.require",
+      "support.function.any-method",
+      "variable.function",
+    ],
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "keyword.other.special-method",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "entity.name.function",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "support.function.console",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: [
+      "support.type",
+      "entity.name.type",
+      "entity.name.class",
+      "storage.type",
+    ],
+    settings: { foreground: "#d568ea" },
+  },
+  {
+    scope: ["support.class", "entity.name.type.class"],
+    settings: { foreground: "#d568ea" },
+  },
+  {
+    scope: [
+      "entity.name.class",
+      "variable.other.class.js",
+      "variable.other.class.ts",
+    ],
+    settings: { foreground: "#d568ea" },
+  },
+  {
+    scope: "entity.name.class.identifier.namespace.type",
+    settings: { foreground: "#d568ea" },
+  },
+  {
+    scope: "entity.name.type.namespace",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "entity.other.inherited-class",
+    settings: { foreground: "#d568ea" },
+  },
+  {
+    scope: "entity.name.namespace",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "keyword.operator",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "keyword.operator.logical",
+      "keyword.operator.bitwise",
+      "keyword.operator.channel",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: [
+      "keyword.operator.arithmetic",
+      "keyword.operator.comparison",
+      "keyword.operator.relational",
+      "keyword.operator.increment",
+      "keyword.operator.decrement",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.assignment",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.assignment.compound",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: [
+      "keyword.operator.assignment.compound.js",
+      "keyword.operator.assignment.compound.ts",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.ternary",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "keyword.operator.optional",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "punctuation",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.separator.delimiter",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.separator.key-value",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.terminator",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.brace",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.brace.square",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.brace.round",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "function.brace",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "punctuation.definition.parameters",
+      "punctuation.definition.typeparameters",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: ["punctuation.definition.block", "punctuation.definition.tag"],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: ["meta.tag.tsx", "meta.tag.jsx", "meta.tag.js", "meta.tag.ts"],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "keyword.operator.expression.import",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "keyword.operator.module",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "support.type.object.console",
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: [
+      "support.module.node",
+      "support.type.object.module",
+      "entity.name.type.module",
+    ],
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "support.constant.math",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "support.constant.property.math",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "support.constant.json",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "support.type.object.dom",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["support.variable.dom", "support.variable.property.dom"],
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: "support.variable.property.process",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "meta.property.object",
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: "variable.parameter.function.js",
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: ["keyword.other.template.begin", "keyword.other.template.end"],
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: [
+      "keyword.other.substitution.begin",
+      "keyword.other.substitution.end",
+    ],
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: [
+      "punctuation.definition.template-expression.begin",
+      "punctuation.definition.template-expression.end",
+    ],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "meta.template.expression",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.section.embedded",
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: "variable.interpolation",
+    settings: { foreground: "#ffa359" },
+  },
+  {
+    scope: [
+      "punctuation.section.embedded.begin",
+      "punctuation.section.embedded.end",
+    ],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "punctuation.quasi.element",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: [
+      "support.type.primitive.ts",
+      "support.type.builtin.ts",
+      "support.type.primitive.tsx",
+      "support.type.builtin.tsx",
+    ],
+    settings: { foreground: "#d568ea" },
+  },
+  {
+    scope: "support.type.type.flowtype",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "support.type.primitive",
+    settings: { foreground: "#d568ea" },
+  },
+  {
+    scope: "support.variable.magic.python",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "variable.parameter.function.language.special.self.python",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: [
+      "punctuation.separator.period.python",
+      "punctuation.separator.element.python",
+      "punctuation.parenthesis.begin.python",
+      "punctuation.parenthesis.end.python",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "punctuation.definition.arguments.begin.python",
+      "punctuation.definition.arguments.end.python",
+      "punctuation.separator.arguments.python",
+      "punctuation.definition.list.begin.python",
+      "punctuation.definition.list.end.python",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.type.python",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.logical.python",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "meta.function-call.generic.python",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "constant.character.format.placeholder.other.python",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "meta.function.decorator.python",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: [
+      "support.token.decorator.python",
+      "meta.function.decorator.identifier.python",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "storage.modifier.lifetime.rust",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.function.std.rust",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "entity.name.lifetime.rust",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "variable.language.rust",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "keyword.operator.misc.rust",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "keyword.operator.sigil.rust",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "support.constant.core.rust",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: ["meta.function.c", "meta.function.cpp"],
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: [
+      "punctuation.section.block.begin.bracket.curly.cpp",
+      "punctuation.section.block.end.bracket.curly.cpp",
+      "punctuation.terminator.statement.c",
+      "punctuation.section.block.begin.bracket.curly.c",
+      "punctuation.section.block.end.bracket.curly.c",
+      "punctuation.section.parens.begin.bracket.round.c",
+      "punctuation.section.parens.end.bracket.round.c",
+      "punctuation.section.parameters.begin.bracket.round.c",
+      "punctuation.section.parameters.end.bracket.round.c",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "keyword.operator.assignment.c",
+      "keyword.operator.comparison.c",
+      "keyword.operator.c",
+      "keyword.operator.increment.c",
+      "keyword.operator.decrement.c",
+      "keyword.operator.bitwise.shift.c",
+    ],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: [
+      "keyword.operator.assignment.cpp",
+      "keyword.operator.comparison.cpp",
+      "keyword.operator.cpp",
+      "keyword.operator.increment.cpp",
+      "keyword.operator.decrement.cpp",
+      "keyword.operator.bitwise.shift.cpp",
+    ],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: ["punctuation.separator.c", "punctuation.separator.cpp"],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: ["support.type.posix-reserved.c", "support.type.posix-reserved.cpp"],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["keyword.operator.sizeof.c", "keyword.operator.sizeof.cpp"],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "variable.c",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: ["storage.type.annotation.java", "storage.type.object.array.java"],
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "source.java",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: [
+      "punctuation.section.block.begin.java",
+      "punctuation.section.block.end.java",
+      "punctuation.definition.method-parameters.begin.java",
+      "punctuation.definition.method-parameters.end.java",
+      "meta.method.identifier.java",
+      "punctuation.section.method.begin.java",
+      "punctuation.section.method.end.java",
+      "punctuation.terminator.java",
+      "punctuation.section.class.begin.java",
+      "punctuation.section.class.end.java",
+      "punctuation.section.inner-class.begin.java",
+      "punctuation.section.inner-class.end.java",
+      "meta.method-call.java",
+      "punctuation.section.class.begin.bracket.curly.java",
+      "punctuation.section.class.end.bracket.curly.java",
+      "punctuation.section.method.begin.bracket.curly.java",
+      "punctuation.section.method.end.bracket.curly.java",
+      "punctuation.separator.period.java",
+      "punctuation.bracket.angle.java",
+      "punctuation.definition.annotation.java",
+      "meta.method.body.java",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.method.java",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: [
+      "storage.modifier.import.java",
+      "storage.type.java",
+      "storage.type.generic.java",
+    ],
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "keyword.operator.instanceof.java",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "meta.definition.variable.name.java",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "token.variable.parameter.java",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "import.storage.java",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "token.package.keyword",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "token.package",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "token.storage.type.java",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "keyword.operator.assignment.go",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: ["keyword.operator.arithmetic.go", "keyword.operator.address.go"],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "entity.name.package.go",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: [
+      "support.other.namespace.use.php",
+      "support.other.namespace.use-as.php",
+      "support.other.namespace.php",
+      "entity.other.alias.php",
+      "meta.interface.php",
+    ],
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "keyword.operator.error-control.php",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "keyword.operator.type.php",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: [
+      "punctuation.section.array.begin.php",
+      "punctuation.section.array.end.php",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "storage.type.php",
+      "meta.other.type.phpdoc.php",
+      "keyword.other.type.php",
+      "keyword.other.array.phpdoc.php",
+    ],
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: [
+      "meta.function-call.php",
+      "meta.function-call.object.php",
+      "meta.function-call.static.php",
+    ],
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: [
+      "punctuation.definition.parameters.begin.bracket.round.php",
+      "punctuation.definition.parameters.end.bracket.round.php",
+      "punctuation.separator.delimiter.php",
+      "punctuation.section.scope.begin.php",
+      "punctuation.section.scope.end.php",
+      "punctuation.terminator.expression.php",
+      "punctuation.definition.arguments.begin.bracket.round.php",
+      "punctuation.definition.arguments.end.bracket.round.php",
+      "punctuation.definition.storage-type.begin.bracket.round.php",
+      "punctuation.definition.storage-type.end.bracket.round.php",
+      "punctuation.definition.array.begin.bracket.round.php",
+      "punctuation.definition.array.end.bracket.round.php",
+      "punctuation.definition.begin.bracket.round.php",
+      "punctuation.definition.end.bracket.round.php",
+      "punctuation.definition.begin.bracket.curly.php",
+      "punctuation.definition.end.bracket.curly.php",
+      "punctuation.definition.section.switch-block.end.bracket.curly.php",
+      "punctuation.definition.section.switch-block.start.bracket.curly.php",
+      "punctuation.definition.section.switch-block.begin.bracket.curly.php",
+      "punctuation.definition.section.switch-block.end.bracket.curly.php",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "support.constant.ext.php",
+      "support.constant.std.php",
+      "support.constant.core.php",
+      "support.constant.parser-token.php",
+    ],
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: ["entity.name.goto-label.php", "support.other.php"],
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: [
+      "keyword.operator.logical.php",
+      "keyword.operator.bitwise.php",
+      "keyword.operator.arithmetic.php",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.regexp.php",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "keyword.operator.comparison.php",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["keyword.operator.heredoc.php", "keyword.operator.nowdoc.php"],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "variable.other.class.php",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "invalid.illegal.non-null-typehinted.php",
+    settings: { foreground: "#f44747" },
+  },
+  {
+    scope: "variable.other.generic-type.haskell",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "storage.type.haskell",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "storage.type.cs",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "entity.name.variable.local.cs",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "entity.name.label.cs",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: [
+      "entity.name.scope-resolution.function.call",
+      "entity.name.scope-resolution.function.definition",
+    ],
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: [
+      "punctuation.definition.delayed.unison",
+      "punctuation.definition.list.begin.unison",
+      "punctuation.definition.list.end.unison",
+      "punctuation.definition.ability.begin.unison",
+      "punctuation.definition.ability.end.unison",
+      "punctuation.operator.assignment.as.unison",
+      "punctuation.separator.pipe.unison",
+      "punctuation.separator.delimiter.unison",
+      "punctuation.definition.hash.unison",
+    ],
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "support.constant.edge",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "support.type.prelude.elm",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.constant.elm",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "entity.global.clojure",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "meta.symbol.clojure",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "constant.keyword.clojure",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["meta.arguments.coffee", "variable.parameter.function.coffee"],
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "storage.modifier.import.groovy",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "meta.method.groovy",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "meta.definition.variable.name.groovy",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "meta.definition.class.inherited.classes.groovy",
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: "support.variable.semantic.hlsl",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: [
+      "support.type.texture.hlsl",
+      "support.type.sampler.hlsl",
+      "support.type.object.hlsl",
+      "support.type.object.rw.hlsl",
+      "support.type.fx.hlsl",
+      "support.type.object.hlsl",
+    ],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: ["text.variable", "text.bracketed"],
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: ["support.type.swift", "support.type.vb.asp"],
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "meta.scope.prerequisites.makefile",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "source.makefile",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "source.ini",
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: "constant.language.symbol.ruby",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["function.parameter.ruby", "function.parameter.cs"],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "constant.language.symbol.elixir",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope:
+      "text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope:
+      "text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "entity.name.function.xi",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "entity.name.class.xi",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "constant.character.character-class.regexp.xi",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "constant.regexp.xi",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "keyword.control.xi",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "invalid.xi",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "beginning.punctuation.definition.quote.markdown.xi",
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: "beginning.punctuation.definition.list.markdown.xi",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: "constant.character.xi",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "accent.xi",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "wikiword.xi",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "constant.other.color.rgb-value.xi",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "punctuation.definition.tag.xi",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: [
+      "support.constant.property-value.scss",
+      "support.constant.property-value.css",
+    ],
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: [
+      "keyword.operator.css",
+      "keyword.operator.scss",
+      "keyword.operator.less",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: [
+      "support.constant.color.w3c-standard-color-name.css",
+      "support.constant.color.w3c-standard-color-name.scss",
+    ],
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "punctuation.separator.list.comma.css",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.type.vendored.property-name.css",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.type.property-name.css",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.type.property-name",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.constant.property-value",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.constant.font-name",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "entity.other.attribute-name.class.css",
+    settings: {
+      foreground: "#61d5c0",
+      fontStyle: "normal",
+    },
+  },
+  {
+    scope: "entity.other.attribute-name.id",
+    settings: {
+      foreground: "#9d6afb",
+      fontStyle: "normal",
+    },
+  },
+  {
+    scope: [
+      "entity.other.attribute-name.pseudo-element",
+      "entity.other.attribute-name.pseudo-class",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "meta.selector",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "selector.sass",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "rgb-value",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "inline-color-decoration rgb-value",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "less rgb-value",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "control.elements",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "keyword.operator.less",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "entity.name.tag",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "entity.other.attribute-name",
+    settings: {
+      foreground: "#61d5c0",
+      fontStyle: "normal",
+    },
+  },
+  {
+    scope: "constant.character.entity",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "meta.tag",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "invalid.illegal.bad-ampersand.html",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "markup.heading",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: [
+      "markup.heading punctuation.definition.heading",
+      "entity.name.section",
+    ],
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "entity.name.section.markdown",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "punctuation.definition.heading.markdown",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "markup.heading.setext",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "markup.heading.setext.1.markdown",
+      "markup.heading.setext.2.markdown",
+    ],
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: ["markup.bold", "todo.bold"],
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "punctuation.definition.bold",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: "punctuation.definition.bold.markdown",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: ["markup.italic", "punctuation.definition.italic", "todo.emphasis"],
+    settings: {
+      foreground: "#ff678d",
+      fontStyle: "italic",
+    },
+  },
+  {
+    scope: "emphasis md",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "markup.italic.markdown",
+    settings: { fontStyle: "italic" },
+  },
+  {
+    scope: [
+      "markup.underline.link.markdown",
+      "markup.underline.link.image.markdown",
+    ],
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: [
+      "string.other.link.title.markdown",
+      "string.other.link.description.markdown",
+    ],
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "punctuation.definition.metadata.markdown",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: ["markup.inline.raw.markdown", "markup.inline.raw.string.markdown"],
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: "punctuation.definition.list.begin.markdown",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "punctuation.definition.list.markdown",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "beginning.punctuation.definition.list.markdown",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: [
+      "punctuation.definition.string.begin.markdown",
+      "punctuation.definition.string.end.markdown",
+    ],
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "markup.quote.markdown",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: "keyword.other.unit",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "markup.changed.diff",
+    settings: { foreground: "#ffca00" },
+  },
+  {
+    scope: [
+      "meta.diff.header.from-file",
+      "meta.diff.header.to-file",
+      "punctuation.definition.from-file.diff",
+      "punctuation.definition.to-file.diff",
+    ],
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "markup.inserted.diff",
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: "markup.deleted.diff",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "string.regexp",
+    settings: { foreground: "#64d1db" },
+  },
+  {
+    scope: "constant.other.character-class.regexp",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "keyword.operator.quantifier.regexp",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "constant.character.escape",
+    settings: { foreground: "#68cdf2" },
+  },
+  {
+    scope: "source.json meta.structure.dictionary.json > string.quoted.json",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope:
+      "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: [
+      "source.json meta.structure.dictionary.json > value.json > string.quoted.json",
+      "source.json meta.structure.array.json > value.json > string.quoted.json",
+      "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation",
+      "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",
+    ],
+    settings: { foreground: "#5ecc71" },
+  },
+  {
+    scope: [
+      "source.json meta.structure.dictionary.json > constant.language.json",
+      "source.json meta.structure.array.json > constant.language.json",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.type.property-name.json",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "support.type.property-name.json punctuation",
+    settings: { foreground: "#ff6762" },
+  },
+  {
+    scope: "punctuation.definition.block.sequence.item.yaml",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "block.scope.end",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "block.scope.begin",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "token.info-token",
+    settings: { foreground: "#9d6afb" },
+  },
+  {
+    scope: "token.warn-token",
+    settings: { foreground: "#ffd452" },
+  },
+  {
+    scope: "token.error-token",
+    settings: { foreground: "#f44747" },
+  },
+  {
+    scope: "token.debug-token",
+    settings: { foreground: "#ff678d" },
+  },
+  {
+    scope: "invalid.illegal",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "invalid.broken",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "invalid.deprecated",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "invalid.unimplemented",
+    settings: { foreground: "#ffffff" },
+  },
+];
+var semanticTokenColors = {
+  comment: "#84848A",
+  string: "#5ecc71",
+  number: "#68cdf2",
+  regexp: "#64d1db",
+  keyword: "#ff678d",
+  variable: "#ffa359",
+  parameter: "#adadb1",
+  property: "#ffa359",
+  function: "#9d6afb",
+  method: "#9d6afb",
+  type: "#d568ea",
+  class: "#d568ea",
+  namespace: "#ffca00",
+  enumMember: "#08c0ef",
+  "variable.constant": "#ffd452",
+  "variable.defaultLibrary": "#ffca00",
+};
+var pierre_dark_default = {
+  name,
+  type,
+  colors,
+  tokenColors,
+  semanticTokenColors,
+};
+
+//#endregion
+export {
+  colors,
+  pierre_dark_default as default,
+  name,
+  semanticTokenColors,
+  tokenColors,
+  type,
+};
diff --git a/frontend/src/toolui/components/shared/pierre-light-theme.js b/frontend/src/toolui/components/shared/pierre-light-theme.js
new file mode 100644
index 00000000..83201c50
--- /dev/null
+++ b/frontend/src/toolui/components/shared/pierre-light-theme.js
@@ -0,0 +1,1374 @@
+//#region src/themes/pierre-light.json
+var name = "pierre-light";
+var type = "light";
+var colors = {
+  "editor.background": "#ffffff",
+  "editor.foreground": "#070707",
+  foreground: "#070707",
+  focusBorder: "#009fff",
+  "selection.background": "#dfebff",
+  "editor.selectionBackground": "#009fff2e",
+  "editor.lineHighlightBackground": "#dfebff8c",
+  "editorCursor.foreground": "#009fff",
+  "editorLineNumber.foreground": "#84848A",
+  "editorLineNumber.activeForeground": "#6C6C71",
+  "editorIndentGuide.background": "#eeeeef",
+  "editorIndentGuide.activeBackground": "#dbdbdd",
+  "diffEditor.insertedTextBackground": "#00cab133",
+  "diffEditor.deletedTextBackground": "#ff2e3f33",
+  "sideBar.background": "#f8f8f8",
+  "sideBar.foreground": "#6C6C71",
+  "sideBar.border": "#eeeeef",
+  "sideBarTitle.foreground": "#070707",
+  "sideBarSectionHeader.background": "#f8f8f8",
+  "sideBarSectionHeader.foreground": "#6C6C71",
+  "sideBarSectionHeader.border": "#eeeeef",
+  "activityBar.background": "#f8f8f8",
+  "activityBar.foreground": "#070707",
+  "activityBar.border": "#eeeeef",
+  "activityBar.activeBorder": "#009fff",
+  "activityBarBadge.background": "#009fff",
+  "activityBarBadge.foreground": "#ffffff",
+  "titleBar.activeBackground": "#f8f8f8",
+  "titleBar.activeForeground": "#070707",
+  "titleBar.inactiveBackground": "#f8f8f8",
+  "titleBar.inactiveForeground": "#84848A",
+  "titleBar.border": "#eeeeef",
+  "list.activeSelectionBackground": "#dfebffcc",
+  "list.activeSelectionForeground": "#070707",
+  "list.inactiveSelectionBackground": "#dfebff73",
+  "list.hoverBackground": "#dfebff59",
+  "list.focusOutline": "#009fff",
+  "tab.activeBackground": "#ffffff",
+  "tab.activeForeground": "#070707",
+  "tab.activeBorderTop": "#009fff",
+  "tab.inactiveBackground": "#f8f8f8",
+  "tab.inactiveForeground": "#84848A",
+  "tab.border": "#eeeeef",
+  "editorGroupHeader.tabsBackground": "#f8f8f8",
+  "editorGroupHeader.tabsBorder": "#eeeeef",
+  "panel.background": "#f8f8f8",
+  "panel.border": "#eeeeef",
+  "panelTitle.activeBorder": "#009fff",
+  "panelTitle.activeForeground": "#070707",
+  "panelTitle.inactiveForeground": "#84848A",
+  "statusBar.background": "#f8f8f8",
+  "statusBar.foreground": "#6C6C71",
+  "statusBar.border": "#eeeeef",
+  "statusBar.noFolderBackground": "#f8f8f8",
+  "statusBar.debuggingBackground": "#ffca00",
+  "statusBar.debuggingForeground": "#ffffff",
+  "statusBarItem.remoteBackground": "#f8f8f8",
+  "statusBarItem.remoteForeground": "#6C6C71",
+  "input.background": "#f2f2f3",
+  "input.border": "#dbdbdd",
+  "input.foreground": "#070707",
+  "input.placeholderForeground": "#8E8E95",
+  "dropdown.background": "#f2f2f3",
+  "dropdown.border": "#dbdbdd",
+  "dropdown.foreground": "#070707",
+  "button.background": "#009fff",
+  "button.foreground": "#ffffff",
+  "button.hoverBackground": "#1aa9ff",
+  "textLink.foreground": "#009fff",
+  "textLink.activeForeground": "#009fff",
+  "gitDecoration.addedResourceForeground": "#00cab1",
+  "gitDecoration.conflictingResourceForeground": "#ffca00",
+  "gitDecoration.modifiedResourceForeground": "#009fff",
+  "gitDecoration.deletedResourceForeground": "#ff2e3f",
+  "gitDecoration.untrackedResourceForeground": "#00cab1",
+  "gitDecoration.ignoredResourceForeground": "#84848A",
+  "terminal.titleForeground": "#6C6C71",
+  "terminal.titleInactiveForeground": "#84848A",
+  "terminal.background": "#f8f8f8",
+  "terminal.foreground": "#6C6C71",
+  "terminal.ansiBlack": "#1F1F21",
+  "terminal.ansiRed": "#ff2e3f",
+  "terminal.ansiGreen": "#0dbe4e",
+  "terminal.ansiYellow": "#ffca00",
+  "terminal.ansiBlue": "#009fff",
+  "terminal.ansiMagenta": "#c635e4",
+  "terminal.ansiCyan": "#08c0ef",
+  "terminal.ansiWhite": "#c6c6c8",
+  "terminal.ansiBrightBlack": "#1F1F21",
+  "terminal.ansiBrightRed": "#ff2e3f",
+  "terminal.ansiBrightGreen": "#0dbe4e",
+  "terminal.ansiBrightYellow": "#ffca00",
+  "terminal.ansiBrightBlue": "#009fff",
+  "terminal.ansiBrightMagenta": "#c635e4",
+  "terminal.ansiBrightCyan": "#08c0ef",
+  "terminal.ansiBrightWhite": "#c6c6c8",
+};
+var tokenColors = [
+  {
+    scope: ["comment", "punctuation.definition.comment"],
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: "comment markup.link",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: ["string", "constant.other.symbol"],
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: [
+      "punctuation.definition.string.begin",
+      "punctuation.definition.string.end",
+    ],
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: ["constant.numeric", "constant.language.boolean"],
+    settings: { foreground: "#1ca1c7" },
+  },
+  {
+    scope: "constant",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "punctuation.definition.constant",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "constant.language",
+    settings: { foreground: "#1ca1c7" },
+  },
+  {
+    scope: "variable.other.constant",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "keyword",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "keyword.control",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: ["storage", "storage.type", "storage.modifier"],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "token.storage",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: [
+      "keyword.operator.new",
+      "keyword.operator.expression.instanceof",
+      "keyword.operator.expression.typeof",
+      "keyword.operator.expression.void",
+      "keyword.operator.expression.delete",
+      "keyword.operator.expression.in",
+      "keyword.operator.expression.of",
+      "keyword.operator.expression.keyof",
+    ],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "keyword.operator.delete",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: ["variable", "identifier", "meta.definition.variable"],
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: [
+      "variable.other.readwrite",
+      "meta.object-literal.key",
+      "support.variable.property",
+      "support.variable.object.process",
+      "support.variable.object.node",
+    ],
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: "variable.language",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "variable.parameter.function",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "function.parameter",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "variable.parameter",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "variable.parameter.function.language.python",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "variable.parameter.function.python",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "support.function",
+      "entity.name.function",
+      "meta.function-call",
+      "meta.require",
+      "support.function.any-method",
+      "variable.function",
+    ],
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "keyword.other.special-method",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "entity.name.function",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "support.function.console",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: [
+      "support.type",
+      "entity.name.type",
+      "entity.name.class",
+      "storage.type",
+    ],
+    settings: { foreground: "#c635e4" },
+  },
+  {
+    scope: ["support.class", "entity.name.type.class"],
+    settings: { foreground: "#c635e4" },
+  },
+  {
+    scope: [
+      "entity.name.class",
+      "variable.other.class.js",
+      "variable.other.class.ts",
+    ],
+    settings: { foreground: "#c635e4" },
+  },
+  {
+    scope: "entity.name.class.identifier.namespace.type",
+    settings: { foreground: "#c635e4" },
+  },
+  {
+    scope: "entity.name.type.namespace",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "entity.other.inherited-class",
+    settings: { foreground: "#c635e4" },
+  },
+  {
+    scope: "entity.name.namespace",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "keyword.operator",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "keyword.operator.logical",
+      "keyword.operator.bitwise",
+      "keyword.operator.channel",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: [
+      "keyword.operator.arithmetic",
+      "keyword.operator.comparison",
+      "keyword.operator.relational",
+      "keyword.operator.increment",
+      "keyword.operator.decrement",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.assignment",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.assignment.compound",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: [
+      "keyword.operator.assignment.compound.js",
+      "keyword.operator.assignment.compound.ts",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.ternary",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "keyword.operator.optional",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "punctuation",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.separator.delimiter",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.separator.key-value",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.terminator",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.brace",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.brace.square",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.brace.round",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "function.brace",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "punctuation.definition.parameters",
+      "punctuation.definition.typeparameters",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: ["punctuation.definition.block", "punctuation.definition.tag"],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: ["meta.tag.tsx", "meta.tag.jsx", "meta.tag.js", "meta.tag.ts"],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "keyword.operator.expression.import",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "keyword.operator.module",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "support.type.object.console",
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: [
+      "support.module.node",
+      "support.type.object.module",
+      "entity.name.type.module",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "support.constant.math",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "support.constant.property.math",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "support.constant.json",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "support.type.object.dom",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["support.variable.dom", "support.variable.property.dom"],
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: "support.variable.property.process",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "meta.property.object",
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: "variable.parameter.function.js",
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: ["keyword.other.template.begin", "keyword.other.template.end"],
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: [
+      "keyword.other.substitution.begin",
+      "keyword.other.substitution.end",
+    ],
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: [
+      "punctuation.definition.template-expression.begin",
+      "punctuation.definition.template-expression.end",
+    ],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "meta.template.expression",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "punctuation.section.embedded",
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: "variable.interpolation",
+    settings: { foreground: "#d47628" },
+  },
+  {
+    scope: [
+      "punctuation.section.embedded.begin",
+      "punctuation.section.embedded.end",
+    ],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "punctuation.quasi.element",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: [
+      "support.type.primitive.ts",
+      "support.type.builtin.ts",
+      "support.type.primitive.tsx",
+      "support.type.builtin.tsx",
+    ],
+    settings: { foreground: "#c635e4" },
+  },
+  {
+    scope: "support.type.type.flowtype",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "support.type.primitive",
+    settings: { foreground: "#c635e4" },
+  },
+  {
+    scope: "support.variable.magic.python",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "variable.parameter.function.language.special.self.python",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "punctuation.separator.period.python",
+      "punctuation.separator.element.python",
+      "punctuation.parenthesis.begin.python",
+      "punctuation.parenthesis.end.python",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "punctuation.definition.arguments.begin.python",
+      "punctuation.definition.arguments.end.python",
+      "punctuation.separator.arguments.python",
+      "punctuation.definition.list.begin.python",
+      "punctuation.definition.list.end.python",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.type.python",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.logical.python",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "meta.function-call.generic.python",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "constant.character.format.placeholder.other.python",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "meta.function.decorator.python",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: [
+      "support.token.decorator.python",
+      "meta.function.decorator.identifier.python",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "storage.modifier.lifetime.rust",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.function.std.rust",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "entity.name.lifetime.rust",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "variable.language.rust",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "keyword.operator.misc.rust",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "keyword.operator.sigil.rust",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "support.constant.core.rust",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: ["meta.function.c", "meta.function.cpp"],
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: [
+      "punctuation.section.block.begin.bracket.curly.cpp",
+      "punctuation.section.block.end.bracket.curly.cpp",
+      "punctuation.terminator.statement.c",
+      "punctuation.section.block.begin.bracket.curly.c",
+      "punctuation.section.block.end.bracket.curly.c",
+      "punctuation.section.parens.begin.bracket.round.c",
+      "punctuation.section.parens.end.bracket.round.c",
+      "punctuation.section.parameters.begin.bracket.round.c",
+      "punctuation.section.parameters.end.bracket.round.c",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "keyword.operator.assignment.c",
+      "keyword.operator.comparison.c",
+      "keyword.operator.c",
+      "keyword.operator.increment.c",
+      "keyword.operator.decrement.c",
+      "keyword.operator.bitwise.shift.c",
+    ],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: [
+      "keyword.operator.assignment.cpp",
+      "keyword.operator.comparison.cpp",
+      "keyword.operator.cpp",
+      "keyword.operator.increment.cpp",
+      "keyword.operator.decrement.cpp",
+      "keyword.operator.bitwise.shift.cpp",
+    ],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: ["punctuation.separator.c", "punctuation.separator.cpp"],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: ["support.type.posix-reserved.c", "support.type.posix-reserved.cpp"],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["keyword.operator.sizeof.c", "keyword.operator.sizeof.cpp"],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "variable.c",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: ["storage.type.annotation.java", "storage.type.object.array.java"],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "source.java",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: [
+      "punctuation.section.block.begin.java",
+      "punctuation.section.block.end.java",
+      "punctuation.definition.method-parameters.begin.java",
+      "punctuation.definition.method-parameters.end.java",
+      "meta.method.identifier.java",
+      "punctuation.section.method.begin.java",
+      "punctuation.section.method.end.java",
+      "punctuation.terminator.java",
+      "punctuation.section.class.begin.java",
+      "punctuation.section.class.end.java",
+      "punctuation.section.inner-class.begin.java",
+      "punctuation.section.inner-class.end.java",
+      "meta.method-call.java",
+      "punctuation.section.class.begin.bracket.curly.java",
+      "punctuation.section.class.end.bracket.curly.java",
+      "punctuation.section.method.begin.bracket.curly.java",
+      "punctuation.section.method.end.bracket.curly.java",
+      "punctuation.separator.period.java",
+      "punctuation.bracket.angle.java",
+      "punctuation.definition.annotation.java",
+      "meta.method.body.java",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "meta.method.java",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: [
+      "storage.modifier.import.java",
+      "storage.type.java",
+      "storage.type.generic.java",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "keyword.operator.instanceof.java",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "meta.definition.variable.name.java",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "token.variable.parameter.java",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "import.storage.java",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "token.package.keyword",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "token.package",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "token.storage.type.java",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "keyword.operator.assignment.go",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: ["keyword.operator.arithmetic.go", "keyword.operator.address.go"],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "entity.name.package.go",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "support.other.namespace.use.php",
+      "support.other.namespace.use-as.php",
+      "support.other.namespace.php",
+      "entity.other.alias.php",
+      "meta.interface.php",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "keyword.operator.error-control.php",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "keyword.operator.type.php",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: [
+      "punctuation.section.array.begin.php",
+      "punctuation.section.array.end.php",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "storage.type.php",
+      "meta.other.type.phpdoc.php",
+      "keyword.other.type.php",
+      "keyword.other.array.phpdoc.php",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "meta.function-call.php",
+      "meta.function-call.object.php",
+      "meta.function-call.static.php",
+    ],
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: [
+      "punctuation.definition.parameters.begin.bracket.round.php",
+      "punctuation.definition.parameters.end.bracket.round.php",
+      "punctuation.separator.delimiter.php",
+      "punctuation.section.scope.begin.php",
+      "punctuation.section.scope.end.php",
+      "punctuation.terminator.expression.php",
+      "punctuation.definition.arguments.begin.bracket.round.php",
+      "punctuation.definition.arguments.end.bracket.round.php",
+      "punctuation.definition.storage-type.begin.bracket.round.php",
+      "punctuation.definition.storage-type.end.bracket.round.php",
+      "punctuation.definition.array.begin.bracket.round.php",
+      "punctuation.definition.array.end.bracket.round.php",
+      "punctuation.definition.begin.bracket.round.php",
+      "punctuation.definition.end.bracket.round.php",
+      "punctuation.definition.begin.bracket.curly.php",
+      "punctuation.definition.end.bracket.curly.php",
+      "punctuation.definition.section.switch-block.end.bracket.curly.php",
+      "punctuation.definition.section.switch-block.start.bracket.curly.php",
+      "punctuation.definition.section.switch-block.begin.bracket.curly.php",
+      "punctuation.definition.section.switch-block.end.bracket.curly.php",
+    ],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "support.constant.ext.php",
+      "support.constant.std.php",
+      "support.constant.core.php",
+      "support.constant.parser-token.php",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: ["entity.name.goto-label.php", "support.other.php"],
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: [
+      "keyword.operator.logical.php",
+      "keyword.operator.bitwise.php",
+      "keyword.operator.arithmetic.php",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "keyword.operator.regexp.php",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "keyword.operator.comparison.php",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["keyword.operator.heredoc.php", "keyword.operator.nowdoc.php"],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "variable.other.class.php",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "invalid.illegal.non-null-typehinted.php",
+    settings: { foreground: "#f44747" },
+  },
+  {
+    scope: "variable.other.generic-type.haskell",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "storage.type.haskell",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "storage.type.cs",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "entity.name.variable.local.cs",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "entity.name.label.cs",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "entity.name.scope-resolution.function.call",
+      "entity.name.scope-resolution.function.definition",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "punctuation.definition.delayed.unison",
+      "punctuation.definition.list.begin.unison",
+      "punctuation.definition.list.end.unison",
+      "punctuation.definition.ability.begin.unison",
+      "punctuation.definition.ability.end.unison",
+      "punctuation.operator.assignment.as.unison",
+      "punctuation.separator.pipe.unison",
+      "punctuation.separator.delimiter.unison",
+      "punctuation.definition.hash.unison",
+    ],
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "support.constant.edge",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "support.type.prelude.elm",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.constant.elm",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "entity.global.clojure",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "meta.symbol.clojure",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "constant.keyword.clojure",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["meta.arguments.coffee", "variable.parameter.function.coffee"],
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "storage.modifier.import.groovy",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "meta.method.groovy",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "meta.definition.variable.name.groovy",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "meta.definition.class.inherited.classes.groovy",
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: "support.variable.semantic.hlsl",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "support.type.texture.hlsl",
+      "support.type.sampler.hlsl",
+      "support.type.object.hlsl",
+      "support.type.object.rw.hlsl",
+      "support.type.fx.hlsl",
+      "support.type.object.hlsl",
+    ],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: ["text.variable", "text.bracketed"],
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: ["support.type.swift", "support.type.vb.asp"],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "meta.scope.prerequisites.makefile",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "source.makefile",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "source.ini",
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: "constant.language.symbol.ruby",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: ["function.parameter.ruby", "function.parameter.cs"],
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "constant.language.symbol.elixir",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope:
+      "text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope:
+      "text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "entity.name.function.xi",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "entity.name.class.xi",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "constant.character.character-class.regexp.xi",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "constant.regexp.xi",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "keyword.control.xi",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "invalid.xi",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "beginning.punctuation.definition.quote.markdown.xi",
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: "beginning.punctuation.definition.list.markdown.xi",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: "constant.character.xi",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "accent.xi",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "wikiword.xi",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "constant.other.color.rgb-value.xi",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "punctuation.definition.tag.xi",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: [
+      "support.constant.property-value.scss",
+      "support.constant.property-value.css",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "keyword.operator.css",
+      "keyword.operator.scss",
+      "keyword.operator.less",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: [
+      "support.constant.color.w3c-standard-color-name.css",
+      "support.constant.color.w3c-standard-color-name.scss",
+    ],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "punctuation.separator.list.comma.css",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.type.vendored.property-name.css",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.type.property-name.css",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.type.property-name",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.constant.property-value",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "support.constant.font-name",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "entity.other.attribute-name.class.css",
+    settings: {
+      foreground: "#16a994",
+      fontStyle: "normal",
+    },
+  },
+  {
+    scope: "entity.other.attribute-name.id",
+    settings: {
+      foreground: "#7b43f8",
+      fontStyle: "normal",
+    },
+  },
+  {
+    scope: [
+      "entity.other.attribute-name.pseudo-element",
+      "entity.other.attribute-name.pseudo-class",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "meta.selector",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "selector.sass",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "rgb-value",
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "inline-color-decoration rgb-value",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "less rgb-value",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "control.elements",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "keyword.operator.less",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "entity.name.tag",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "entity.other.attribute-name",
+    settings: {
+      foreground: "#16a994",
+      fontStyle: "normal",
+    },
+  },
+  {
+    scope: "constant.character.entity",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "meta.tag",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "invalid.illegal.bad-ampersand.html",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "markup.heading",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: [
+      "markup.heading punctuation.definition.heading",
+      "entity.name.section",
+    ],
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "entity.name.section.markdown",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "punctuation.definition.heading.markdown",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "markup.heading.setext",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: [
+      "markup.heading.setext.1.markdown",
+      "markup.heading.setext.2.markdown",
+    ],
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: ["markup.bold", "todo.bold"],
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "punctuation.definition.bold",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "punctuation.definition.bold.markdown",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: ["markup.italic", "punctuation.definition.italic", "todo.emphasis"],
+    settings: {
+      foreground: "#fc2b73",
+      fontStyle: "italic",
+    },
+  },
+  {
+    scope: "emphasis md",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "markup.italic.markdown",
+    settings: { fontStyle: "italic" },
+  },
+  {
+    scope: [
+      "markup.underline.link.markdown",
+      "markup.underline.link.image.markdown",
+    ],
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: [
+      "string.other.link.title.markdown",
+      "string.other.link.description.markdown",
+    ],
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "punctuation.definition.metadata.markdown",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: ["markup.inline.raw.markdown", "markup.inline.raw.string.markdown"],
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: "punctuation.definition.list.begin.markdown",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "punctuation.definition.list.markdown",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "beginning.punctuation.definition.list.markdown",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: [
+      "punctuation.definition.string.begin.markdown",
+      "punctuation.definition.string.end.markdown",
+    ],
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "markup.quote.markdown",
+    settings: { foreground: "#84848A" },
+  },
+  {
+    scope: "keyword.other.unit",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "markup.changed.diff",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: [
+      "meta.diff.header.from-file",
+      "meta.diff.header.to-file",
+      "punctuation.definition.from-file.diff",
+      "punctuation.definition.to-file.diff",
+    ],
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "markup.inserted.diff",
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: "markup.deleted.diff",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "string.regexp",
+    settings: { foreground: "#17a5af" },
+  },
+  {
+    scope: "constant.other.character-class.regexp",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "keyword.operator.quantifier.regexp",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "constant.character.escape",
+    settings: { foreground: "#1ca1c7" },
+  },
+  {
+    scope: "source.json meta.structure.dictionary.json > string.quoted.json",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope:
+      "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: [
+      "source.json meta.structure.dictionary.json > value.json > string.quoted.json",
+      "source.json meta.structure.array.json > value.json > string.quoted.json",
+      "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation",
+      "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",
+    ],
+    settings: { foreground: "#199f43" },
+  },
+  {
+    scope: [
+      "source.json meta.structure.dictionary.json > constant.language.json",
+      "source.json meta.structure.array.json > constant.language.json",
+    ],
+    settings: { foreground: "#08c0ef" },
+  },
+  {
+    scope: "support.type.property-name.json",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "support.type.property-name.json punctuation",
+    settings: { foreground: "#d52c36" },
+  },
+  {
+    scope: "punctuation.definition.block.sequence.item.yaml",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "block.scope.end",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "block.scope.begin",
+    settings: { foreground: "#79797F" },
+  },
+  {
+    scope: "token.info-token",
+    settings: { foreground: "#7b43f8" },
+  },
+  {
+    scope: "token.warn-token",
+    settings: { foreground: "#d5a910" },
+  },
+  {
+    scope: "token.error-token",
+    settings: { foreground: "#f44747" },
+  },
+  {
+    scope: "token.debug-token",
+    settings: { foreground: "#fc2b73" },
+  },
+  {
+    scope: "invalid.illegal",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "invalid.broken",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "invalid.deprecated",
+    settings: { foreground: "#ffffff" },
+  },
+  {
+    scope: "invalid.unimplemented",
+    settings: { foreground: "#ffffff" },
+  },
+];
+var semanticTokenColors = {
+  comment: "#84848A",
+  string: "#199f43",
+  number: "#1ca1c7",
+  regexp: "#17a5af",
+  keyword: "#fc2b73",
+  variable: "#d47628",
+  parameter: "#79797F",
+  property: "#d47628",
+  function: "#7b43f8",
+  method: "#7b43f8",
+  type: "#c635e4",
+  class: "#c635e4",
+  namespace: "#d5a910",
+  enumMember: "#08c0ef",
+  "variable.constant": "#d5a910",
+  "variable.defaultLibrary": "#d5a910",
+};
+var pierre_light_default = {
+  name,
+  type,
+  colors,
+  tokenColors,
+  semanticTokenColors,
+};
+
+//#endregion
+export {
+  colors,
+  pierre_light_default as default,
+  name,
+  semanticTokenColors,
+  tokenColors,
+  type,
+};
diff --git a/frontend/src/toolui/components/shared/schema.ts b/frontend/src/toolui/components/shared/schema.ts
new file mode 100644
index 00000000..b19f4a3b
--- /dev/null
+++ b/frontend/src/toolui/components/shared/schema.ts
@@ -0,0 +1,159 @@
+import { z } from "zod";
+import type { ReactNode } from "react";
+
+/**
+ * Tool UI conventions:
+ * - Serializable schemas are JSON-safe (no callbacks/ReactNode/`className`).
+ * - Schema: `SerializableXSchema`
+ * - Parser: `parseSerializableX(input: unknown)` (throws on invalid)
+ * - Safe parser: `safeParseSerializableX(input: unknown)` (returns `null` on invalid)
+ * - Actions: `LocalActions` for non-receipt actions and `DecisionActions` for consequential actions
+ * - Root attrs: `data-tool-ui-id` + `data-slot`
+ */
+
+/**
+ * Schema for tool UI identity.
+ *
+ * Every tool UI should have a unique identifier that:
+ * - Is stable across re-renders
+ * - Is meaningful (not auto-generated)
+ * - Is unique within the conversation
+ *
+ * Format recommendation: `{component-type}-{semantic-identifier}`
+ * Examples: "data-table-expenses-q3", "option-list-deploy-target"
+ */
+export const ToolUIIdSchema = z.string().min(1);
+
+export type ToolUIId = z.infer<typeof ToolUIIdSchema>;
+
+/**
+ * Primary role of a Tool UI surface in a chat context.
+ */
+export const ToolUIRoleSchema = z.enum([
+  "information",
+  "decision",
+  "control",
+  "state",
+  "composite",
+]);
+
+export type ToolUIRole = z.infer<typeof ToolUIRoleSchema>;
+
+export const ToolUIReceiptOutcomeSchema = z.enum([
+  "success",
+  "partial",
+  "failed",
+  "cancelled",
+]);
+
+export type ToolUIReceiptOutcome = z.infer<typeof ToolUIReceiptOutcomeSchema>;
+
+/**
+ * Optional receipt metadata: a durable summary of an outcome.
+ */
+export const ToolUIReceiptSchema = z.object({
+  outcome: ToolUIReceiptOutcomeSchema,
+  summary: z.string().min(1),
+  identifiers: z.record(z.string(), z.string()).optional(),
+  at: z.string().datetime(),
+});
+
+export type ToolUIReceipt = z.infer<typeof ToolUIReceiptSchema>;
+
+/**
+ * Base schema for Tool UI payloads (id + optional role/receipt).
+ */
+export const ToolUISurfaceSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+});
+
+export type ToolUISurface = z.infer<typeof ToolUISurfaceSchema>;
+
+export const ActionSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  /**
+   * Canonical narration the assistant can use after this action is taken.
+   *
+   * Example: "I exported the table as CSV." / "I opened the link in a new tab."
+   */
+  sentence: z.string().optional(),
+  confirmLabel: z.string().optional(),
+  variant: z
+    .enum(["default", "destructive", "secondary", "ghost", "outline"])
+    .optional(),
+  icon: z.custom<ReactNode>().optional(),
+  loading: z.boolean().optional(),
+  disabled: z.boolean().optional(),
+  shortcut: z.string().optional(),
+});
+
+export type Action = z.infer<typeof ActionSchema>;
+export type LocalAction = Action;
+export type DecisionAction = Action;
+
+export const DecisionResultSchema = z.object({
+  kind: z.literal("decision"),
+  version: z.literal(1),
+  decisionId: z.string().min(1),
+  actionId: z.string().min(1),
+  actionLabel: z.string().min(1),
+  at: z.string().datetime(),
+  payload: z.record(z.string(), z.unknown()).optional(),
+});
+
+export type DecisionResult<
+  TPayload extends Record<string, unknown> = Record<string, unknown>,
+> = Omit<z.infer<typeof DecisionResultSchema>, "payload"> & {
+  payload?: TPayload;
+};
+
+export function createDecisionResult<
+  TPayload extends Record<string, unknown> = Record<string, unknown>,
+>(args: {
+  decisionId: string;
+  action: { id: string; label: string };
+  payload?: TPayload;
+}): DecisionResult<TPayload> {
+  return {
+    kind: "decision",
+    version: 1,
+    decisionId: args.decisionId,
+    actionId: args.action.id,
+    actionLabel: args.action.label,
+    at: new Date().toISOString(),
+    payload: args.payload,
+  };
+}
+
+export const ActionButtonsPropsSchema = z.object({
+  actions: z.array(ActionSchema).min(1),
+  align: z.enum(["left", "center", "right"]).optional(),
+  confirmTimeout: z.number().positive().optional(),
+  className: z.string().optional(),
+});
+
+export const SerializableActionSchema = ActionSchema.omit({ icon: true });
+export const SerializableActionsSchema = ActionButtonsPropsSchema.extend({
+  actions: z.array(SerializableActionSchema),
+}).omit({ className: true });
+
+export interface ActionsConfig {
+  items: Action[];
+  align?: "left" | "center" | "right";
+  confirmTimeout?: number;
+}
+
+export const SerializableActionsConfigSchema = z.object({
+  items: z.array(SerializableActionSchema).min(1),
+  align: z.enum(["left", "center", "right"]).optional(),
+  confirmTimeout: z.number().positive().optional(),
+});
+
+export type SerializableActionsConfig = z.infer<
+  typeof SerializableActionsConfigSchema
+>;
+
+export type SerializableAction = z.infer<typeof SerializableActionSchema>;
diff --git a/frontend/src/toolui/components/shared/tool-ui-context.tsx b/frontend/src/toolui/components/shared/tool-ui-context.tsx
new file mode 100644
index 00000000..4d0a4fd7
--- /dev/null
+++ b/frontend/src/toolui/components/shared/tool-ui-context.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export interface ToolUIContextValue {
+  id: string;
+  surfaceMounted: boolean;
+  setSurfaceMounted: (mounted: boolean) => void;
+}
+
+export const ToolUIContext = createContext<ToolUIContextValue | null>(null);
+
+export function useOptionalToolUI(): ToolUIContextValue | null {
+  return useContext(ToolUIContext);
+}
+
+export function useToolUI(): ToolUIContextValue {
+  const context = useOptionalToolUI();
+
+  if (!context) {
+    throw new Error(
+      "ToolUI context is missing. Wrap LocalActions/DecisionActions with <ToolUI>.",
+    );
+  }
+
+  return context;
+}
diff --git a/frontend/src/toolui/components/shared/tool-ui.tsx b/frontend/src/toolui/components/shared/tool-ui.tsx
new file mode 100644
index 00000000..af90d55f
--- /dev/null
+++ b/frontend/src/toolui/components/shared/tool-ui.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { cn } from "./_adapter";
+import { ToolUIContext, useToolUI } from "./tool-ui-context";
+import { LocalActions } from "./local-actions";
+import { DecisionActions } from "./decision-actions";
+
+export interface ToolUIProps {
+  id: string;
+  children: ReactNode;
+  className?: string;
+}
+
+function ToolUIRoot({ id, children, className }: ToolUIProps) {
+  const [surfaceMounted, setSurfaceMounted] = useState(false);
+
+  const value = useMemo(
+    () => ({ id, surfaceMounted, setSurfaceMounted }),
+    [id, surfaceMounted],
+  );
+
+  return (
+    <ToolUIContext.Provider value={value}>
+      <div
+        className={cn("flex flex-col gap-3", className)}
+        data-slot="tool-ui"
+        data-tool-ui-id={id}
+      >
+        {children}
+      </div>
+    </ToolUIContext.Provider>
+  );
+}
+
+export interface ToolUISurfaceProps {
+  children: ReactNode;
+}
+
+function ToolUISurface({ children }: ToolUISurfaceProps) {
+  const { setSurfaceMounted } = useToolUI();
+
+  useEffect(() => {
+    setSurfaceMounted(true);
+    return () => setSurfaceMounted(false);
+  }, [setSurfaceMounted]);
+
+  return <>{children}</>;
+}
+
+export interface ToolUIActionsProps {
+  children: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
+
+function ToolUIActions({ children, className, ariaLabel }: ToolUIActionsProps) {
+  const { id, surfaceMounted } = useToolUI();
+
+  if (!surfaceMounted) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn("flex flex-col gap-2", className)}
+      data-slot="tool-ui-actions"
+      data-tool-ui-id={id}
+      role="group"
+      aria-label={ariaLabel ?? "Tool UI actions"}
+    >
+      {children}
+    </div>
+  );
+}
+
+type ToolUIComponent = typeof ToolUIRoot & {
+  Surface: typeof ToolUISurface;
+  Actions: typeof ToolUIActions;
+  LocalActions: typeof LocalActions;
+  DecisionActions: typeof DecisionActions;
+};
+
+export const ToolUI = Object.assign(ToolUIRoot, {
+  Surface: ToolUISurface,
+  Actions: ToolUIActions,
+  LocalActions,
+  DecisionActions,
+}) as ToolUIComponent;
diff --git a/frontend/src/toolui/components/shared/toolkit.tsx b/frontend/src/toolui/components/shared/toolkit.tsx
new file mode 100644
index 00000000..94214942
--- /dev/null
+++ b/frontend/src/toolui/components/shared/toolkit.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export type ToolUiToolkitRenderContext = {
+  args?: unknown;
+  result?: unknown;
+  toolCallId?: string;
+  addResult?: (result: unknown) => Promise<void> | void;
+  [key: string]: unknown;
+};
+
+export function createResultToolRenderer<T>(options: {
+  safeParse: (input: unknown) => T | null;
+  render: (parsed: T, ctx: ToolUiToolkitRenderContext) => ReactNode;
+}) {
+  return (ctx: ToolUiToolkitRenderContext) => {
+    const parsed = options.safeParse(ctx.result);
+    if (!parsed) return null;
+    return options.render(parsed, ctx);
+  };
+}
diff --git a/frontend/src/toolui/components/shared/use-action-buttons.tsx b/frontend/src/toolui/components/shared/use-action-buttons.tsx
new file mode 100644
index 00000000..43144f34
--- /dev/null
+++ b/frontend/src/toolui/components/shared/use-action-buttons.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Action } from "./schema";
+
+export type UseActionButtonsOptions = {
+  actions: Action[];
+  onAction: (actionId: string) => void | Promise<void>;
+  onBeforeAction?: (actionId: string) => boolean | Promise<boolean>;
+  confirmTimeout?: number;
+};
+
+export type UseActionButtonsResult = {
+  actions: Array<
+    Action & {
+      currentLabel: string;
+      isConfirming: boolean;
+      isExecuting: boolean;
+      isDisabled: boolean;
+      isLoading: boolean;
+    }
+  >;
+  runAction: (actionId: string) => Promise<void>;
+  confirmingActionId: string | null;
+  executingActionId: string | null;
+};
+
+type ActionExecutionLock = {
+  tryAcquire: () => boolean;
+  release: () => void;
+};
+
+export function createActionExecutionLock(): ActionExecutionLock {
+  let locked = false;
+
+  return {
+    tryAcquire: () => {
+      if (locked) return false;
+      locked = true;
+      return true;
+    },
+    release: () => {
+      locked = false;
+    },
+  };
+}
+
+export function useActionButtons(
+  options: UseActionButtonsOptions,
+): UseActionButtonsResult {
+  const { actions, onAction, onBeforeAction, confirmTimeout = 3000 } = options;
+
+  const [confirmingActionId, setConfirmingActionId] = useState<string | null>(
+    null,
+  );
+  const [executingActionId, setExecutingActionId] = useState<string | null>(
+    null,
+  );
+  const executionLockRef = useRef<ActionExecutionLock>(
+    createActionExecutionLock(),
+  );
+
+  useEffect(() => {
+    if (!confirmingActionId) return;
+    const id = setTimeout(() => setConfirmingActionId(null), confirmTimeout);
+    return () => clearTimeout(id);
+  }, [confirmingActionId, confirmTimeout]);
+
+  useEffect(() => {
+    if (!confirmingActionId) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setConfirmingActionId(null);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [confirmingActionId]);
+
+  const runAction = useCallback(
+    async (actionId: string) => {
+      const action = actions.find((a) => a.id === actionId);
+      if (!action) return;
+
+      const isAnyActionExecuting = executingActionId !== null;
+      if (action.disabled || action.loading || isAnyActionExecuting) {
+        return;
+      }
+
+      if (action.confirmLabel && confirmingActionId !== action.id) {
+        setConfirmingActionId(action.id);
+        return;
+      }
+
+      if (!executionLockRef.current.tryAcquire()) {
+        return;
+      }
+
+      if (onBeforeAction) {
+        const shouldProceed = await onBeforeAction(action.id);
+        if (!shouldProceed) {
+          setConfirmingActionId(null);
+          executionLockRef.current.release();
+          return;
+        }
+      }
+
+      try {
+        setExecutingActionId(action.id);
+        await onAction(action.id);
+      } finally {
+        executionLockRef.current.release();
+        setExecutingActionId(null);
+        setConfirmingActionId(null);
+      }
+    },
+    [actions, confirmingActionId, executingActionId, onAction, onBeforeAction],
+  );
+
+  const resolvedActions = useMemo(
+    () =>
+      actions.map((action) => {
+        const isConfirming = confirmingActionId === action.id;
+        const isThisActionExecuting = executingActionId === action.id;
+        const isLoading = action.loading || isThisActionExecuting;
+        const isDisabled =
+          action.disabled ||
+          (executingActionId !== null && !isThisActionExecuting);
+        const currentLabel =
+          isConfirming && action.confirmLabel
+            ? action.confirmLabel
+            : action.label;
+
+        return {
+          ...action,
+          currentLabel,
+          isConfirming,
+          isExecuting: isThisActionExecuting,
+          isDisabled,
+          isLoading,
+        };
+      }),
+    [actions, confirmingActionId, executingActionId],
+  );
+
+  return {
+    actions: resolvedActions,
+    runAction,
+    confirmingActionId,
+    executingActionId,
+  };
+}
diff --git a/frontend/src/toolui/components/shared/use-controllable-state.ts b/frontend/src/toolui/components/shared/use-controllable-state.ts
new file mode 100644
index 00000000..8a9afdc4
--- /dev/null
+++ b/frontend/src/toolui/components/shared/use-controllable-state.ts
@@ -0,0 +1,54 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useState } from "react";
+
+export type UseControllableStateOptions<T> = {
+  value?: T;
+  defaultValue: T;
+  onChange?: (next: T) => void;
+};
+
+export function useControllableState<T>({
+  value,
+  defaultValue,
+  onChange,
+}: UseControllableStateOptions<T>) {
+  const [uncontrolled, setUncontrolled] = useState<T>(defaultValue);
+  const isControlled = value !== undefined;
+
+  const currentValue = useMemo(
+    () => (isControlled ? (value as T) : uncontrolled),
+    [isControlled, value, uncontrolled],
+  );
+  const currentValueRef = useRef(currentValue);
+  currentValueRef.current = currentValue;
+
+  const setValue = useCallback(
+    (next: T | ((prev: T) => T)) => {
+      const resolved =
+        typeof next === "function"
+          ? (next as (prev: T) => T)(currentValueRef.current)
+          : next;
+
+      currentValueRef.current = resolved;
+      if (!isControlled) {
+        setUncontrolled(resolved);
+      }
+
+      onChange?.(resolved);
+      return resolved;
+    },
+    [isControlled, onChange],
+  );
+
+  const setUncontrolledValue = useCallback((next: T) => {
+    setUncontrolled(next);
+  }, []);
+
+  return {
+    value: currentValue,
+    isControlled,
+    setValue,
+    setUncontrolledValue,
+  };
+}
diff --git a/frontend/src/toolui/components/shared/use-copy-to-clipboard.ts b/frontend/src/toolui/components/shared/use-copy-to-clipboard.ts
new file mode 100644
index 00000000..dcc6b41d
--- /dev/null
+++ b/frontend/src/toolui/components/shared/use-copy-to-clipboard.ts
@@ -0,0 +1,59 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+function fallbackCopyToClipboard(text: string): boolean {
+  const textArea = document.createElement("textarea");
+  try {
+    textArea.value = text;
+    textArea.setAttribute("readonly", "");
+    textArea.style.position = "fixed";
+    textArea.style.top = "-9999px";
+    textArea.style.left = "-9999px";
+    document.body.appendChild(textArea);
+    textArea.select();
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    if (textArea.parentNode) {
+      textArea.parentNode.removeChild(textArea);
+    }
+  }
+}
+
+export function useCopyToClipboard(options?: { resetAfterMs?: number }): {
+  copiedId: string | null;
+  copy: (text: string, id?: string) => Promise<boolean>;
+} {
+  const resetAfterMs = options?.resetAfterMs ?? 2000;
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const copy = useCallback(async (text: string, id: string = "default") => {
+    let ok = false;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        ok = true;
+      } else {
+        ok = fallbackCopyToClipboard(text);
+      }
+    } catch {
+      ok = fallbackCopyToClipboard(text);
+    }
+
+    if (ok) {
+      setCopiedId(id);
+    }
+
+    return ok;
+  }, []);
+
+  useEffect(() => {
+    if (!copiedId) return;
+    const timeout = setTimeout(() => setCopiedId(null), resetAfterMs);
+    return () => clearTimeout(timeout);
+  }, [copiedId, resetAfterMs]);
+
+  return { copiedId, copy };
+}
diff --git a/frontend/src/toolui/components/shared/use-signature-reset.ts b/frontend/src/toolui/components/shared/use-signature-reset.ts
new file mode 100644
index 00000000..6939af80
--- /dev/null
+++ b/frontend/src/toolui/components/shared/use-signature-reset.ts
@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export function useSignatureReset(
+  signature: string,
+  onSignatureChange: () => void,
+) {
+  const previousSignature = useRef(signature);
+
+  useEffect(() => {
+    if (previousSignature.current === signature) return;
+    previousSignature.current = signature;
+    onSignatureChange();
+  }, [signature, onSignatureChange]);
+}
diff --git a/frontend/src/toolui/components/shared/utils.ts b/frontend/src/toolui/components/shared/utils.ts
new file mode 100644
index 00000000..6c39c184
--- /dev/null
+++ b/frontend/src/toolui/components/shared/utils.ts
@@ -0,0 +1,29 @@
+export function formatRelativeTime(iso: string): string {
+  const seconds = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  if (seconds < 86400) return `${Math.round(seconds / 3600)}h`;
+  if (seconds < 604800) return `${Math.round(seconds / 86400)}d`;
+  return `${Math.round(seconds / 604800)}w`;
+}
+
+export function formatCount(count: number): string {
+  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;
+  if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`;
+  return String(count);
+}
+
+export function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return "";
+  }
+}
+
+export function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+  );
+}
diff --git a/frontend/src/toolui/components/stats-display/README.md b/frontend/src/toolui/components/stats-display/README.md
new file mode 100644
index 00000000..c4e6f66d
--- /dev/null
+++ b/frontend/src/toolui/components/stats-display/README.md
@@ -0,0 +1,19 @@
+# Stats Display
+
+Implementation for the "stats-display" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/stats-display/index.tsx
+- serializable schema + parse helpers: components/tool-ui/stats-display/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/stats-display/content.mdx
+- Preset payload: lib/presets/stats-display.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/stats-display/_adapter.tsx b/frontend/src/toolui/components/stats-display/_adapter.tsx
new file mode 100644
index 00000000..b0b8fd36
--- /dev/null
+++ b/frontend/src/toolui/components/stats-display/_adapter.tsx
@@ -0,0 +1,18 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn   → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Card → shadcn/ui Card
+ */
+
+export { cn } from "@toolui/lib/utils";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@toolui/ui/card";
diff --git a/frontend/src/toolui/components/stats-display/index.tsx b/frontend/src/toolui/components/stats-display/index.tsx
new file mode 100644
index 00000000..0c8d266f
--- /dev/null
+++ b/frontend/src/toolui/components/stats-display/index.tsx
@@ -0,0 +1,10 @@
+export { StatsDisplay } from "./stats-display";
+export { Sparkline, type SparklineProps } from "./sparkline";
+export {
+  type SerializableStatsDisplay,
+  type StatsDisplayProps,
+  type StatFormat,
+  type StatDiff,
+  type StatSparkline,
+  type StatItem,
+} from "./schema";
diff --git a/frontend/src/toolui/components/stats-display/schema.ts b/frontend/src/toolui/components/stats-display/schema.ts
new file mode 100644
index 00000000..5717d793
--- /dev/null
+++ b/frontend/src/toolui/components/stats-display/schema.ts
@@ -0,0 +1,91 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import { ToolUIIdSchema, ToolUIRoleSchema } from "../shared/schema";
+
+const TextFormatSchema = z.object({
+  kind: z.literal("text"),
+});
+
+const NumberFormatSchema = z.object({
+  kind: z.literal("number"),
+  decimals: z.number().int().min(0).optional(),
+  compact: z.boolean().optional(),
+});
+
+const CurrencyFormatSchema = z.object({
+  kind: z.literal("currency"),
+  currency: z.string().min(1),
+  decimals: z.number().int().min(0).optional(),
+});
+
+const PercentFormatSchema = z.object({
+  kind: z.literal("percent"),
+  decimals: z.number().int().min(0).optional(),
+  basis: z.enum(["fraction", "unit"]).optional(),
+});
+
+export const StatFormatSchema = z.discriminatedUnion("kind", [
+  TextFormatSchema,
+  NumberFormatSchema,
+  CurrencyFormatSchema,
+  PercentFormatSchema,
+]);
+
+export type StatFormat = z.infer<typeof StatFormatSchema>;
+
+export const StatDiffSchema = z.object({
+  value: z.number(),
+  decimals: z.number().int().min(0).optional(),
+  upIsPositive: z.boolean().optional(),
+  label: z.string().optional(),
+});
+
+export type StatDiff = z.infer<typeof StatDiffSchema>;
+
+export const StatSparklineSchema = z.object({
+  data: z.array(z.number()).min(2),
+  color: z.string().optional(),
+});
+
+export type StatSparkline = z.infer<typeof StatSparklineSchema>;
+
+export const StatItemSchema = z.object({
+  key: z.string().min(1),
+  label: z.string().min(1),
+  value: z.union([z.string(), z.number()]),
+  format: StatFormatSchema.optional(),
+  diff: StatDiffSchema.optional(),
+  sparkline: StatSparklineSchema.optional(),
+});
+
+export type StatItem = z.infer<typeof StatItemSchema>;
+
+export const SerializableStatsDisplaySchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  stats: z.array(StatItemSchema).min(1),
+});
+
+export type SerializableStatsDisplay = z.infer<
+  typeof SerializableStatsDisplaySchema
+>;
+
+const SerializableStatsDisplaySchemaContract = defineToolUiContract(
+  "StatsDisplay",
+  SerializableStatsDisplaySchema,
+);
+
+export const parseSerializableStatsDisplay: (
+  input: unknown,
+) => SerializableStatsDisplay = SerializableStatsDisplaySchemaContract.parse;
+
+export const safeParseSerializableStatsDisplay: (
+  input: unknown,
+) => SerializableStatsDisplay | null =
+  SerializableStatsDisplaySchemaContract.safeParse;
+export interface StatsDisplayProps extends SerializableStatsDisplay {
+  className?: string;
+  locale?: string;
+}
diff --git a/frontend/src/toolui/components/stats-display/sparkline.tsx b/frontend/src/toolui/components/stats-display/sparkline.tsx
new file mode 100644
index 00000000..8b70dad6
--- /dev/null
+++ b/frontend/src/toolui/components/stats-display/sparkline.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { useId } from "react";
+import { cn } from "./_adapter";
+
+export interface SparklineProps {
+  data: number[];
+  color?: string;
+  width?: number;
+  height?: number;
+  className?: string;
+  style?: CSSProperties;
+  showFill?: boolean;
+  fillOpacity?: number;
+}
+
+export function Sparkline({
+  data,
+  color = "currentColor",
+  width = 64,
+  height = 24,
+  className,
+  style,
+  showFill = false,
+  fillOpacity = 0.09,
+}: SparklineProps) {
+  const gradientId = useId();
+
+  if (data.length < 2) {
+    return null;
+  }
+
+  const minVal = Math.min(...data);
+  const maxVal = Math.max(...data);
+  const range = maxVal - minVal || 1;
+
+  const padding = 0;
+  const usableWidth = width;
+  const usableHeight = height;
+
+  const linePoints = data.map((value, index) => {
+    const x = padding + (index / (data.length - 1)) * usableWidth;
+    const y =
+      padding + usableHeight - ((value - minVal) / range) * usableHeight;
+    return { x, y };
+  });
+
+  const linePointsString = linePoints.map((p) => `${p.x},${p.y}`).join(" ");
+
+  const areaPointsString = [
+    `${padding},${height}`,
+    ...linePoints.map((p) => `${p.x},${p.y}`),
+    `${width - padding},${height}`,
+  ].join(" ");
+
+  const animationDelay = style?.animationDelay ?? "0ms";
+  const baseAnimationDelay =
+    typeof animationDelay === "number" ? `${animationDelay}ms` : animationDelay;
+  const secondaryAnimationDelay = `calc(${baseAnimationDelay} + 100ms)`;
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden="true"
+      className={cn("h-full w-full shrink-0", className)}
+      style={style}
+      preserveAspectRatio="none"
+    >
+      {showFill && (
+        <>
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={color} stopOpacity={fillOpacity} />
+              <stop offset="100%" stopColor={color} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <polygon
+            points={areaPointsString}
+            fill={`url(#${gradientId})`}
+            className="animate-in fade-in duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] fill-mode-both"
+            style={{ animationDelay }}
+          />
+        </>
+      )}
+      <polyline
+        points={linePointsString}
+        fill="none"
+        stroke={color}
+        strokeWidth={1}
+        strokeOpacity={0.15}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+      />
+      <polyline
+        points={linePointsString}
+        fill="none"
+        stroke={color}
+        strokeWidth={0.75}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+        pathLength={1}
+        strokeDasharray="0.36 0.64"
+        strokeDashoffset={0}
+        strokeOpacity={0.2}
+        className="opacity-0 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-700 motion-safe:ease-out motion-safe:fill-mode-both"
+        style={{ animationDelay: baseAnimationDelay }}
+      />
+      <polyline
+        points={linePointsString}
+        fill="none"
+        stroke={color}
+        strokeWidth={0.75}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+        pathLength={1}
+        strokeDasharray="0.24 0.76"
+        strokeDashoffset={0}
+        strokeOpacity={0.65}
+        className="opacity-0 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-500 motion-safe:ease-out motion-safe:fill-mode-both"
+        style={{ animationDelay: secondaryAnimationDelay }}
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/toolui/components/stats-display/stats-display.tsx b/frontend/src/toolui/components/stats-display/stats-display.tsx
new file mode 100644
index 00000000..87eca275
--- /dev/null
+++ b/frontend/src/toolui/components/stats-display/stats-display.tsx
@@ -0,0 +1,281 @@
+"use client";
+import {
+  cn,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./_adapter";
+import type {
+  StatsDisplayProps,
+  StatItem,
+  StatFormat,
+  StatDiff,
+} from "./schema";
+import { Sparkline } from "./sparkline";
+
+interface FormattedValueProps {
+  value: string | number;
+  format?: StatFormat;
+  locale?: string;
+}
+
+function FormattedValue({ value, format, locale }: FormattedValueProps) {
+  if (typeof value === "string" || !format) {
+    return <span className="font-light tabular-nums">{String(value)}</span>;
+  }
+
+  switch (format.kind) {
+    case "number": {
+      const decimals = format.decimals ?? 0;
+      if (format.compact) {
+        const parts = new Intl.NumberFormat(locale, {
+          minimumFractionDigits: decimals,
+          maximumFractionDigits: decimals,
+          notation: "compact",
+        }).formatToParts(value);
+        const fullNumber = new Intl.NumberFormat(locale).format(value);
+        return (
+          <span className="font-light tabular-nums" aria-label={fullNumber}>
+            {parts.map((part, i) =>
+              part.type === "compact" ? (
+                <span
+                  key={i}
+                  className="ml-0.5 text-[0.65em] opacity-80"
+                  aria-hidden="true"
+                >
+                  {part.value}
+                </span>
+              ) : (
+                <span key={i}>{part.value}</span>
+              ),
+            )}
+          </span>
+        );
+      }
+      const formatted = new Intl.NumberFormat(locale, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      }).format(value);
+      return <span className="font-light tabular-nums">{formatted}</span>;
+    }
+    case "currency": {
+      const currency = format.currency;
+      const decimals = format.decimals ?? 2;
+      const formatted = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      }).format(value);
+      const spokenValue = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        currencyDisplay: "name",
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      }).format(value);
+      return (
+        <span className="font-light tabular-nums" aria-label={spokenValue}>
+          {formatted}
+        </span>
+      );
+    }
+    case "percent": {
+      const decimals = format.decimals ?? 2;
+      const basis = format.basis ?? "fraction";
+      const numeric = basis === "fraction" ? value * 100 : value;
+      const formatted = numeric.toFixed(decimals);
+      return (
+        <span
+          className="font-light tabular-nums"
+          aria-label={`${formatted} percent`}
+        >
+          {formatted}
+          <span className="ml-0.5 text-[0.65em] opacity-80" aria-hidden="true">
+            %
+          </span>
+        </span>
+      );
+    }
+    case "text":
+    default:
+      return <span className="font-light tabular-nums">{String(value)}</span>;
+  }
+}
+
+interface DeltaValueProps {
+  diff: StatDiff;
+}
+
+function DeltaValue({ diff }: DeltaValueProps) {
+  const { value, decimals = 1, upIsPositive = true, label } = diff;
+
+  const isPositive = value > 0;
+  const isNegative = value < 0;
+
+  const isGood = upIsPositive ? isPositive : isNegative;
+  const isBad = upIsPositive ? isNegative : isPositive;
+
+  const colorClass = isGood
+    ? "text-green-600 dark:text-green-400"
+    : isBad
+      ? "text-red-600 dark:text-red-500"
+      : "text-muted-foreground";
+
+  const bgClass = isGood
+    ? "bg-green-500/10 dark:bg-green-600/15"
+    : isBad
+      ? "bg-red-500/10 dark:bg-red-500/15"
+      : "bg-muted";
+
+  const formatted = Math.abs(value).toFixed(decimals);
+  const sign = isNegative ? "−" : "+";
+  const display = `${sign}${formatted}%`;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs  tabular-nums",
+        colorClass,
+        bgClass,
+      )}
+    >
+      {!upIsPositive && (
+        <span className="text-[0.9em]">{isGood ? "↓" : "↑"}</span>
+      )}
+      {display}
+      {label && (
+        <span className="text-muted-foreground font-normal">{label}</span>
+      )}
+    </span>
+  );
+}
+
+interface StatCardProps {
+  stat: StatItem;
+  locale?: string;
+  isSingle?: boolean;
+  index?: number;
+}
+
+function StatCard({
+  stat,
+  locale,
+  isSingle = false,
+  index = 0,
+}: StatCardProps) {
+  const sparklineColor = stat.sparkline?.color ?? "var(--muted-foreground)";
+  const hasSparkline = Boolean(stat.sparkline);
+  const baseDelay = index * 175;
+
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-28 flex-col gap-1 px-6",
+        isSingle ? "justify-center" : "justify-end",
+      )}
+    >
+      {hasSparkline && (
+        <Sparkline
+          data={stat.sparkline!.data}
+          color={sparklineColor}
+          showFill
+          fillOpacity={0.09}
+          className="pointer-events-none absolute inset-x-0 top-2 bottom-2 animate-in fade-in slide-in-from-bottom-12 duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] fill-mode-both"
+          style={{ animationDelay: `${baseDelay}ms` }}
+        />
+      )}
+      <span
+        className="text-muted-foreground relative text-xs font-normal tracking-wider uppercase opacity-90 animate-in fade-in slide-in-from-bottom-1 duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] fill-mode-both"
+        style={{ animationDelay: `${baseDelay + 75}ms` }}
+      >
+        {stat.label}
+      </span>
+      <div
+        className="relative flex items-baseline gap-2 pb-2 animate-in fade-in slide-in-from-bottom-2 duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] fill-mode-both"
+        style={{ animationDelay: `${baseDelay + 150}ms` }}
+      >
+        <span
+          className={cn(
+            "font-light tracking-normal",
+            isSingle ? "text-5xl" : "text-3xl",
+          )}
+        >
+          <FormattedValue
+            value={stat.value}
+            format={stat.format}
+            locale={locale}
+          />
+        </span>
+        {stat.diff && <DeltaValue diff={stat.diff} />}
+      </div>
+    </div>
+  );
+}
+
+export function StatsDisplay({
+  id,
+  title,
+  description,
+  stats,
+  className,
+  locale: localeProp,
+}: StatsDisplayProps) {
+  const locale =
+    localeProp ??
+    (typeof navigator !== "undefined" ? navigator.language : undefined);
+  const hasHeader = Boolean(title || description);
+  const isSingle = stats.length === 1;
+
+  return (
+    <article
+      data-slot="stats-display"
+      data-tool-ui-id={id}
+      className={cn(
+        "w-full min-w-80 max-w-xl",
+        isSingle && "max-w-sm",
+        className,
+      )}
+    >
+      <Card className={cn("overflow-clip !pb-0 !pt-2", hasHeader && "!gap-0")}>
+        {hasHeader && (
+          <CardHeader className="border-b border-border !pt-3 !pb-4">
+            {title && <CardTitle className="text-pretty">{title}</CardTitle>}
+            {description && (
+              <CardDescription className="text-pretty">
+                {description}
+              </CardDescription>
+            )}
+          </CardHeader>
+        )}
+        <CardContent className="@container overflow-hidden p-0">
+          <div
+            className="grid @[440px]:-ml-px @[440px]:-mt-px"
+            style={{
+              gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+            }}
+          >
+            {stats.map((stat, index) => (
+              <div
+                key={stat.key}
+                className={cn(
+                  "overflow-clip py-3 first:pt-0 @[440px]:py-3 @[440px]:first:pt-3 @[440px]:border-l @[440px]:border-t @[440px]:border-border",
+                  index > 0 && "border-border border-t",
+                )}
+              >
+                <StatCard
+                  stat={stat}
+                  locale={locale}
+                  isSingle={isSingle}
+                  index={index}
+                />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </article>
+  );
+}
diff --git a/frontend/src/toolui/components/terminal/README.md b/frontend/src/toolui/components/terminal/README.md
new file mode 100644
index 00000000..c07cf639
--- /dev/null
+++ b/frontend/src/toolui/components/terminal/README.md
@@ -0,0 +1,19 @@
+# Terminal
+
+Implementation for the "terminal" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/terminal/index.tsx
+- serializable schema + parse helpers: components/tool-ui/terminal/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/terminal/content.mdx
+- Preset payload: lib/presets/terminal.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/terminal/_adapter.tsx b/frontend/src/toolui/components/terminal/_adapter.tsx
new file mode 100644
index 00000000..a929b219
--- /dev/null
+++ b/frontend/src/toolui/components/terminal/_adapter.tsx
@@ -0,0 +1,14 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn          → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button      → shadcn/ui Button
+ *   Collapsible → shadcn/ui Collapsible
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Collapsible, CollapsibleTrigger } from "@toolui/ui/collapsible";
diff --git a/frontend/src/toolui/components/terminal/index.tsx b/frontend/src/toolui/components/terminal/index.tsx
new file mode 100644
index 00000000..cb65bf34
--- /dev/null
+++ b/frontend/src/toolui/components/terminal/index.tsx
@@ -0,0 +1,2 @@
+export { Terminal } from "./terminal";
+export type { TerminalProps, SerializableTerminal } from "./schema";
diff --git a/frontend/src/toolui/components/terminal/schema.ts b/frontend/src/toolui/components/terminal/schema.ts
new file mode 100644
index 00000000..74865cc7
--- /dev/null
+++ b/frontend/src/toolui/components/terminal/schema.ts
@@ -0,0 +1,43 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const TerminalPropsSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  command: z.string(),
+  stdout: z.string().optional(),
+  stderr: z.string().optional(),
+  exitCode: z.number().int().min(0),
+  durationMs: z.number().optional(),
+  cwd: z.string().optional(),
+  truncated: z.boolean().optional(),
+  maxCollapsedLines: z.number().min(1).optional(),
+  className: z.string().optional(),
+});
+
+export type TerminalProps = z.infer<typeof TerminalPropsSchema>;
+
+export const SerializableTerminalSchema = TerminalPropsSchema.omit({
+  className: true,
+});
+
+export type SerializableTerminal = z.infer<typeof SerializableTerminalSchema>;
+
+const SerializableTerminalSchemaContract = defineToolUiContract(
+  "Terminal",
+  SerializableTerminalSchema,
+);
+
+export const parseSerializableTerminal: (
+  input: unknown,
+) => SerializableTerminal = SerializableTerminalSchemaContract.parse;
+
+export const safeParseSerializableTerminal: (
+  input: unknown,
+) => SerializableTerminal | null = SerializableTerminalSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/terminal/terminal.tsx b/frontend/src/toolui/components/terminal/terminal.tsx
new file mode 100644
index 00000000..6de9a2ba
--- /dev/null
+++ b/frontend/src/toolui/components/terminal/terminal.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import Ansi from "ansi-to-react";
+import {
+  Copy,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Terminal as TerminalIcon,
+} from "lucide-react";
+import type { TerminalProps } from "./schema";
+import { useCopyToClipboard } from "../shared/use-copy-to-clipboard";
+
+import { Button, Collapsible, CollapsibleTrigger } from "./_adapter";
+import { cn } from "./_adapter";
+
+const COPY_ID = "terminal-output";
+
+type TerminalControlledProps = {
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+};
+
+type TerminalRootProps = TerminalProps & TerminalControlledProps;
+
+type TerminalHeaderProps = Pick<
+  TerminalProps,
+  "command" | "cwd" | "exitCode"
+> & {
+  formattedDuration: string | null;
+  hasOutput: boolean;
+  copiedId: string | null;
+  onCopy: () => void;
+};
+
+type TerminalOutputProps = Pick<
+  TerminalProps,
+  "stdout" | "stderr" | "truncated"
+> & {
+  isCollapsed: boolean;
+  shouldCollapse: boolean;
+  lineCount: number;
+  onToggleCollapse: () => void;
+};
+
+function formatDuration(durationMs?: number): string | null {
+  if (durationMs == null) return null;
+  if (durationMs < 1000) return `${Math.round(durationMs)}ms`;
+  return `${(durationMs / 1000).toFixed(1)}s`;
+}
+
+function countOutputLines(output: string): number {
+  const trimmedTrailingNewlines = output.replace(/\n+$/, "");
+  if (!trimmedTrailingNewlines) return 0;
+  return trimmedTrailingNewlines.split("\n").length;
+}
+
+function TerminalHeader({
+  command,
+  cwd,
+  exitCode,
+  formattedDuration,
+  hasOutput,
+  copiedId,
+  onCopy,
+}: TerminalHeaderProps) {
+  return (
+    <div className="bg-card flex items-center justify-between border-b px-4 py-2">
+      <div className="flex items-center gap-2 overflow-hidden">
+        <TerminalIcon className="text-muted-foreground h-4 w-4 shrink-0" />
+        <code className="text-foreground truncate font-mono text-xs">
+          {cwd && <span className="text-muted-foreground">{cwd}$ </span>}
+          {command}
+        </code>
+      </div>
+      <div className="flex items-center gap-3">
+        {formattedDuration && (
+          <span className="text-muted-foreground font-mono text-sm tabular-nums">
+            {formattedDuration}
+          </span>
+        )}
+        <span
+          className={cn(
+            "font-mono text-sm tabular-nums",
+            exitCode === 0
+              ? "text-muted-foreground"
+              : "text-red-600 dark:text-red-400",
+          )}
+        >
+          {exitCode}
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onCopy}
+          disabled={!hasOutput}
+          className="h-7 w-7 p-0"
+          aria-label={
+            !hasOutput
+              ? "No output to copy"
+              : copiedId === COPY_ID
+                ? "Copied"
+                : "Copy output"
+          }
+        >
+          {hasOutput && copiedId === COPY_ID ? (
+            <Check className="h-4 w-4 text-green-700 dark:text-green-400" />
+          ) : (
+            <Copy className="text-muted-foreground h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function TerminalOutput({
+  stdout,
+  stderr,
+  truncated,
+  isCollapsed,
+  shouldCollapse,
+  lineCount,
+  onToggleCollapse,
+}: TerminalOutputProps) {
+  return (
+    <Collapsible open={!isCollapsed}>
+      <div
+        className={cn(
+          "relative font-mono text-sm",
+          isCollapsed && "max-h-[200px] overflow-hidden",
+        )}
+      >
+        <div className="overflow-x-auto p-4">
+          {stdout && (
+            <div className="text-foreground whitespace-pre">
+              <Ansi>{stdout}</Ansi>
+            </div>
+          )}
+          {stderr && (
+            <div className="mt-2 whitespace-pre text-red-500 dark:text-red-400">
+              <Ansi>{stderr}</Ansi>
+            </div>
+          )}
+          {truncated && (
+            <div className="text-muted-foreground mt-2 text-xs italic">
+              Output truncated...
+            </div>
+          )}
+        </div>
+
+        {isCollapsed && (
+          <div className="from-card absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t to-transparent" />
+        )}
+      </div>
+
+      {shouldCollapse && (
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            onClick={onToggleCollapse}
+            className="text-muted-foreground w-full rounded-none border-t font-normal"
+          >
+            {isCollapsed ? (
+              <>
+                <ChevronDown className="mr-1 size-4" />
+                Show all {lineCount} lines
+              </>
+            ) : (
+              <>
+                <ChevronUp className="mr-1 size-4" />
+                Collapse
+              </>
+            )}
+          </Button>
+        </CollapsibleTrigger>
+      )}
+    </Collapsible>
+  );
+}
+
+function TerminalEmpty() {
+  return (
+    <div className="text-muted-foreground px-4 py-3 font-mono text-sm italic">
+      No output
+    </div>
+  );
+}
+
+function TerminalRoot({
+  id,
+  command,
+  stdout,
+  stderr,
+  exitCode,
+  durationMs,
+  cwd,
+  truncated,
+  maxCollapsedLines,
+  className,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+}: TerminalRootProps) {
+  const [uncontrolledExpanded, setUncontrolledExpanded] =
+    useState(defaultExpanded);
+  const { copiedId, copy } = useCopyToClipboard();
+
+  const isExpanded = expanded ?? uncontrolledExpanded;
+  const hasOutput = Boolean(stdout || stderr);
+  const fullOutput = [stdout, stderr].filter(Boolean).join("\n");
+  const formattedDuration = formatDuration(durationMs);
+  const lineCount = countOutputLines(fullOutput);
+  const shouldCollapse =
+    maxCollapsedLines !== undefined && lineCount > maxCollapsedLines;
+  const isCollapsed = shouldCollapse && !isExpanded;
+
+  const setExpanded = useCallback(
+    (nextExpanded: boolean) => {
+      if (expanded === undefined) {
+        setUncontrolledExpanded(nextExpanded);
+      }
+      onExpandedChange?.(nextExpanded);
+    },
+    [expanded, onExpandedChange],
+  );
+
+  const handleCopy = useCallback(() => {
+    if (!hasOutput) return;
+    copy(fullOutput, COPY_ID);
+  }, [hasOutput, fullOutput, copy]);
+
+  return (
+    <div
+      className={cn(
+        "@container flex w-full min-w-80 flex-col gap-3",
+        className,
+      )}
+      data-tool-ui-id={id}
+      data-slot="terminal"
+    >
+      <div className="border-border bg-card overflow-hidden rounded-lg border shadow-xs">
+        <TerminalHeader
+          command={command}
+          cwd={cwd}
+          exitCode={exitCode}
+          formattedDuration={formattedDuration}
+          hasOutput={hasOutput}
+          copiedId={copiedId}
+          onCopy={handleCopy}
+        />
+
+        {hasOutput && (
+          <TerminalOutput
+            stdout={stdout}
+            stderr={stderr}
+            truncated={truncated}
+            isCollapsed={isCollapsed}
+            shouldCollapse={shouldCollapse}
+            lineCount={lineCount}
+            onToggleCollapse={() => setExpanded(!isExpanded)}
+          />
+        )}
+
+        {!hasOutput && <TerminalEmpty />}
+      </div>
+    </div>
+  );
+}
+
+type TerminalComponent = typeof TerminalRoot & {
+  Header: typeof TerminalHeader;
+  Output: typeof TerminalOutput;
+  Empty: typeof TerminalEmpty;
+};
+
+export const Terminal = Object.assign(TerminalRoot, {
+  Header: TerminalHeader,
+  Output: TerminalOutput,
+  Empty: TerminalEmpty,
+}) as TerminalComponent;
diff --git a/frontend/src/toolui/components/video/README.md b/frontend/src/toolui/components/video/README.md
new file mode 100644
index 00000000..0b5a1d4f
--- /dev/null
+++ b/frontend/src/toolui/components/video/README.md
@@ -0,0 +1,19 @@
+# Video
+
+Implementation for the "video" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/video/index.ts
+- serializable schema + parse helpers: components/tool-ui/video/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/video/content.mdx
+- Preset payload: lib/presets/video.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/video/_adapter.tsx b/frontend/src/toolui/components/video/_adapter.tsx
new file mode 100644
index 00000000..0d2eb34e
--- /dev/null
+++ b/frontend/src/toolui/components/video/_adapter.tsx
@@ -0,0 +1,7 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ */
+"use client";
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
diff --git a/frontend/src/toolui/components/video/context.tsx b/frontend/src/toolui/components/video/context.tsx
new file mode 100644
index 00000000..9f31afff
--- /dev/null
+++ b/frontend/src/toolui/components/video/context.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+
+export interface VideoPlaybackState {
+  playing: boolean;
+  muted: boolean;
+}
+
+export interface VideoContextValue {
+  state: VideoPlaybackState;
+  setState: (patch: Partial<VideoPlaybackState>) => void;
+  videoElement: HTMLVideoElement | null;
+  setVideoElement: (node: HTMLVideoElement | null) => void;
+}
+
+const VideoContext = React.createContext<VideoContextValue | null>(null);
+
+export function useVideo() {
+  const ctx = React.useContext(VideoContext);
+  if (!ctx) {
+    throw new Error("useVideo must be used within a <VideoProvider />");
+  }
+  return ctx;
+}
+
+export interface VideoProviderProps {
+  children: React.ReactNode;
+  defaultState?: Partial<VideoPlaybackState>;
+}
+
+export function VideoProvider({ children, defaultState }: VideoProviderProps) {
+  const [state, setStateInternal] = React.useState<VideoPlaybackState>({
+    playing: defaultState?.playing ?? false,
+    muted: defaultState?.muted ?? true,
+  });
+
+  const [videoElement, setVideoElement] =
+    React.useState<HTMLVideoElement | null>(null);
+
+  const setState = React.useCallback((patch: Partial<VideoPlaybackState>) => {
+    setStateInternal((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const value = React.useMemo(
+    () => ({ state, setState, videoElement, setVideoElement }),
+    [state, setState, videoElement],
+  );
+
+  return (
+    <VideoContext.Provider value={value}>{children}</VideoContext.Provider>
+  );
+}
diff --git a/frontend/src/toolui/components/video/index.ts b/frontend/src/toolui/components/video/index.ts
new file mode 100644
index 00000000..b0632731
--- /dev/null
+++ b/frontend/src/toolui/components/video/index.ts
@@ -0,0 +1,3 @@
+export { Video } from "./video";
+export type { VideoProps } from "./video";
+export type { SerializableVideo, Source } from "./schema";
diff --git a/frontend/src/toolui/components/video/schema.ts b/frontend/src/toolui/components/video/schema.ts
new file mode 100644
index 00000000..ea80db53
--- /dev/null
+++ b/frontend/src/toolui/components/video/schema.ts
@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+import { AspectRatioSchema, MediaFitSchema } from "../shared/media";
+
+export const SourceSchema = z.object({
+  label: z.string(),
+  iconUrl: z.url().optional(),
+  url: z.url().optional(),
+});
+
+export type Source = z.infer<typeof SourceSchema>;
+
+export const SerializableVideoSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  assetId: z.string(),
+  src: z.url(),
+  poster: z.url().optional(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  href: z.url().optional(),
+  domain: z.string().optional(),
+  durationMs: z.number().int().positive().optional(),
+  ratio: AspectRatioSchema.optional(),
+  fit: MediaFitSchema.optional(),
+  createdAt: z.string().datetime().optional(),
+  locale: z.string().optional(),
+  source: SourceSchema.optional(),
+});
+
+export type SerializableVideo = z.infer<typeof SerializableVideoSchema>;
+
+const SerializableVideoSchemaContract = defineToolUiContract(
+  "Video",
+  SerializableVideoSchema,
+);
+
+export const parseSerializableVideo: (input: unknown) => SerializableVideo =
+  SerializableVideoSchemaContract.parse;
+
+export const safeParseSerializableVideo: (
+  input: unknown,
+) => SerializableVideo | null = SerializableVideoSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/video/video-helpers.ts b/frontend/src/toolui/components/video/video-helpers.ts
new file mode 100644
index 00000000..d4546b81
--- /dev/null
+++ b/frontend/src/toolui/components/video/video-helpers.ts
@@ -0,0 +1,57 @@
+import type { SerializableVideo } from "./schema";
+import { resolveSafeNavigationHref, sanitizeHref } from "../shared/media";
+
+export type VideoMediaEvent = "mute" | "unmute";
+
+export interface ResolvedVideoNavigation {
+  sanitizedHref: string | undefined;
+  sanitizedSourceUrl: string | undefined;
+  primaryHref: string | undefined;
+}
+
+export function getMuteMediaEvent(
+  previousMuted: boolean,
+  nextMuted: boolean,
+): VideoMediaEvent | null {
+  if (previousMuted === nextMuted) {
+    return null;
+  }
+
+  return nextMuted ? "mute" : "unmute";
+}
+
+export function resolveVideoNavigation(
+  rawHref: string | undefined,
+  rawSourceUrl: string | undefined,
+): ResolvedVideoNavigation {
+  const sanitizedHref = sanitizeHref(rawHref);
+  const sanitizedSourceUrl = sanitizeHref(rawSourceUrl);
+
+  return {
+    sanitizedHref,
+    sanitizedSourceUrl,
+    primaryHref: resolveSafeNavigationHref(sanitizedHref, sanitizedSourceUrl),
+  };
+}
+
+export function normalizeVideoDataForCallback(
+  video: SerializableVideo,
+  normalized: {
+    ratio: NonNullable<SerializableVideo["ratio"]>;
+    fit: NonNullable<SerializableVideo["fit"]>;
+    locale: string;
+    sanitizedHref: string | undefined;
+    sanitizedSourceUrl: string | undefined;
+  },
+): SerializableVideo {
+  return {
+    ...video,
+    ratio: normalized.ratio,
+    fit: normalized.fit,
+    href: normalized.sanitizedHref,
+    source: video.source
+      ? { ...video.source, url: normalized.sanitizedSourceUrl }
+      : undefined,
+    locale: normalized.locale,
+  };
+}
diff --git a/frontend/src/toolui/components/video/video.tsx b/frontend/src/toolui/components/video/video.tsx
new file mode 100644
index 00000000..7f38f379
--- /dev/null
+++ b/frontend/src/toolui/components/video/video.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import * as React from "react";
+import { ExternalLink, Play } from "lucide-react";
+import { cn, Button } from "./_adapter";
+
+import {
+  formatDuration,
+  getFitClass,
+  openSafeNavigationHref,
+  OVERLAY_GRADIENT,
+  RATIO_CLASS_MAP,
+} from "../shared/media";
+import { VideoProvider, useVideo } from "./context";
+import type { SerializableVideo } from "./schema";
+import {
+  getMuteMediaEvent,
+  normalizeVideoDataForCallback,
+  resolveVideoNavigation,
+} from "./video-helpers";
+
+const FALLBACK_LOCALE = "en-US";
+
+export interface VideoProps extends SerializableVideo {
+  className?: string;
+  // Keep behavior flags intentionally minimal; prefer explicit variants over more booleans.
+  autoPlay?: boolean;
+  defaultMuted?: boolean;
+  onNavigate?: (href: string, video: SerializableVideo) => void;
+  onMediaEvent?: (type: "play" | "pause" | "mute" | "unmute") => void;
+}
+
+function VideoRoot(props: VideoProps) {
+  const { defaultMuted = true, ...rest } = props;
+
+  return (
+    <VideoProvider defaultState={{ muted: defaultMuted }}>
+      <VideoInner {...rest} />
+    </VideoProvider>
+  );
+}
+
+function VideoInner(props: Omit<VideoProps, "defaultMuted">) {
+  const {
+    className,
+    autoPlay = true,
+    onNavigate,
+    onMediaEvent,
+    ...serializable
+  } = props;
+
+  const {
+    id,
+    src,
+    poster,
+    title,
+    description,
+    href: rawHref,
+    domain,
+    durationMs,
+    ratio = "16:9",
+    fit = "cover",
+    createdAt,
+    source,
+    locale: providedLocale,
+  } = serializable;
+
+  const locale = providedLocale ?? FALLBACK_LOCALE;
+  const { sanitizedHref, sanitizedSourceUrl, primaryHref } =
+    resolveVideoNavigation(rawHref, source?.url);
+
+  const videoData: SerializableVideo = normalizeVideoDataForCallback(
+    serializable,
+    {
+      ratio,
+      fit,
+      locale,
+      sanitizedHref,
+      sanitizedSourceUrl,
+    },
+  );
+
+  const { state, setState, setVideoElement } = useVideo();
+  const videoRef = React.useRef<HTMLVideoElement | null>(null);
+  const previousMutedRef = React.useRef(state.muted);
+
+  React.useEffect(() => {
+    setVideoElement(videoRef.current);
+    return () => setVideoElement(null);
+  }, [setVideoElement]);
+
+  React.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.muted !== state.muted) {
+      video.muted = state.muted;
+    }
+  }, [state.muted]);
+
+  React.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (state.playing && video.paused) {
+      void video.play().catch(() => undefined);
+    } else if (!state.playing && !video.paused) {
+      video.pause();
+    }
+  }, [state.playing]);
+
+  const navigate = (targetHref: string) => {
+    if (onNavigate) {
+      onNavigate(targetHref, videoData);
+    } else {
+      openSafeNavigationHref(targetHref);
+    }
+  };
+
+  const handleWatch = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) {
+      void video.play().catch(() => undefined);
+    } else {
+      video.pause();
+    }
+  };
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!primaryHref) return;
+    navigate(primaryHref);
+  };
+
+  const sourceLabel = source?.label;
+  const metadataDomain = domain && domain !== sourceLabel ? domain : undefined;
+  const hasMetadata = Boolean(
+    description || sourceLabel || metadataDomain || durationMs || createdAt,
+  );
+  const hasOverlay = Boolean(title || primaryHref);
+
+  return (
+    <article
+      className={cn("relative w-full min-w-80 max-w-md", className)}
+      lang={locale}
+      data-tool-ui-id={id}
+      data-slot="video"
+    >
+      <div
+        className={cn(
+          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
+          "border border-border bg-card text-sm shadow-xs",
+        )}
+      >
+        <div
+          className={cn(
+            "group relative w-full overflow-hidden bg-black",
+            ratio !== "auto" ? RATIO_CLASS_MAP[ratio] : "aspect-video",
+          )}
+        >
+          <video
+            ref={videoRef}
+            className={cn(
+              "relative z-10 h-full w-full transition-transform duration-200 group-hover:scale-[1.01]",
+              getFitClass(fit),
+              ratio !== "auto" && "absolute inset-0 h-full w-full",
+            )}
+            src={src}
+            poster={poster}
+            controls
+            playsInline
+            autoPlay={autoPlay}
+            preload="metadata"
+            muted={state.muted}
+            onPlay={() => {
+              setState({ playing: true });
+              onMediaEvent?.("play");
+            }}
+            onPause={() => {
+              setState({ playing: false });
+              onMediaEvent?.("pause");
+            }}
+            onVolumeChange={(event) => {
+              const target = event.currentTarget;
+              setState({ muted: target.muted });
+              const mediaEvent = getMuteMediaEvent(
+                previousMutedRef.current,
+                target.muted,
+              );
+              previousMutedRef.current = target.muted;
+              if (mediaEvent) {
+                onMediaEvent?.(mediaEvent);
+              }
+            }}
+          />
+          {hasOverlay && (
+            <>
+              <div
+                className="pointer-events-none absolute inset-x-0 top-0 z-20 h-32 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"
+                style={{ backgroundImage: OVERLAY_GRADIENT }}
+              />
+              <div className="absolute inset-x-0 top-0 z-30 flex items-start justify-between gap-2 px-5 pt-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100">
+                {title ? (
+                  <div className="line-clamp-2 max-w-[70%] font-semibold text-white drop-shadow-sm">
+                    {title}
+                  </div>
+                ) : (
+                  <span className="sr-only">Video controls</span>
+                )}
+                <div className="flex items-center gap-2">
+                  {primaryHref && (
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={handleOpen}
+                      className="bg-black/55 text-white hover:bg-black/70"
+                    >
+                      <ExternalLink
+                        className="mr-1 h-4 w-4"
+                        aria-hidden="true"
+                      />
+                      Open
+                    </Button>
+                  )}
+                  <Button
+                    variant="default"
+                    size="sm"
+                    onClick={handleWatch}
+                    className="shadow-sm"
+                  >
+                    <Play className="mr-1 h-4 w-4" aria-hidden="true" />
+                    Watch
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {hasMetadata && (
+          <div className="flex flex-col gap-1.5 px-4 py-3">
+            {description && (
+              <p className="text-foreground line-clamp-2 text-sm leading-snug">
+                {description}
+              </p>
+            )}
+            <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+              {sourceLabel && <span>{sourceLabel}</span>}
+              {metadataDomain && <span>{metadataDomain}</span>}
+              {typeof durationMs === "number" && (
+                <span>{formatDuration(durationMs)}</span>
+              )}
+              {createdAt && (
+                <time dateTime={createdAt}>
+                  {formatCreatedAt(createdAt, locale)}
+                </time>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function formatCreatedAt(createdAt: string, locale: string): string {
+  const date = new Date(createdAt);
+  if (Number.isNaN(date.getTime())) {
+    return createdAt;
+  }
+
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+}
+
+type VideoComponent = typeof VideoRoot & {
+  Root: typeof VideoRoot;
+};
+
+export const Video = Object.assign(VideoRoot, {
+  Root: VideoRoot,
+}) as VideoComponent;
diff --git a/frontend/src/toolui/components/weather-widget/generated/weather-runtime-core.generated.ts b/frontend/src/toolui/components/weather-widget/generated/weather-runtime-core.generated.ts
new file mode 100644
index 00000000..1f8f1768
--- /dev/null
+++ b/frontend/src/toolui/components/weather-widget/generated/weather-runtime-core.generated.ts
@@ -0,0 +1,67 @@
+// @ts-nocheck
+// AUTO-GENERATED by `pnpm weather:compile`.
+// Source: lib/weather-authoring/weather-widget/weather-runtime-core.ts
+// DO NOT EDIT MANUALLY.
+
+import{useMemo as ye,useState as ft,useEffect as dt}from"react";var Ze=8,j=new Set;function he(e){return j.has(e)?!0:j.size>=Ze?!1:(j.add(e),!0)}function ae(e){j.delete(e)}function ge(e,t){return t&&(ae(e),null)}import{useCallback as N,useEffect as Ke,useRef as v}from"react";var O=`#version 300 es
+in vec4 a_position;out vec2 v_uv;void main(){gl_Position=a_position;v_uv=a_position.xy*0.5+0.5;}`,se=`#version 300 es
+precision highp float;in vec2 v_uv;out vec4 fragColor;uniform float u_time;uniform vec2 u_resolution;uniform float u_timeOfDay;uniform float u_moonPhase;uniform float u_starDensity;uniform vec2 u_celestialPos;uniform float u_sunSize;uniform float u_moonSize;uniform float u_sunGlowIntensity;uniform float u_sunGlowSize;uniform float u_sunRayCount;uniform float u_sunRayLength;uniform float u_sunRayIntensity;uniform float u_sunRayShimmer;uniform float u_sunRayShimmerSpeed;uniform float u_moonGlowIntensity;uniform float u_moonGlowSize;uniform float u_skyBrightness;uniform float u_skySaturation;uniform float u_skyContrast;uniform sampler2D u_moonTexture;uniform bool u_hasMoonTexture;
+#define PI 3.14159265359
+#define GODRAY_MAX_SAMPLES 32
+#define TAU 6.28318530718
+float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453123);}vec2 hash2(vec2 p){p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3)));return fract(sin(p)*43758.5453);}float noise(vec2 p){vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);float a=hash(i);float b=hash(i+vec2(1.0,0.0));float c=hash(i+vec2(0.0,1.0));float d=hash(i+vec2(1.0,1.0));return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);}float fbm(vec2 p,int octaves){float value=0.0;float amplitude=0.5;float frequency=1.0;for(int i=0;i<6;i++){if(i>=octaves)break;value+=amplitude*noise(p*frequency);frequency*=2.0;amplitude*=0.5;}return value;}float getSunY(float timeOfDay,float baseY){float belowHorizon=-0.25;float riseProgress=smoothstep(0.18,0.32,timeOfDay);float setProgress=smoothstep(0.68,0.82,timeOfDay);float visible=riseProgress*(1.0-setProgress);return mix(belowHorizon,baseY,visible);}float getMoonY(float timeOfDay,float baseY){float belowHorizon=-0.25;float risingEvening=smoothstep(0.74,0.88,timeOfDay);float settingMorning=1.0-smoothstep(0.12,0.26,timeOfDay);float visible=max(risingEvening,settingMorning);return mix(belowHorizon,baseY,visible);}float getHorizonFade(float y){return smoothstep(-0.2,0.0,y);}vec3 getSkyColor(vec2 uv,float timeOfDay){vec3 dayTop=vec3(0.4,0.6,0.9);vec3 dayHorizon=vec3(0.7,0.8,0.95);vec3 sunsetTop=vec3(0.2,0.2,0.4);vec3 sunsetHorizon=vec3(0.9,0.5,0.2);vec3 nightTop=vec3(0.02,0.02,0.05);vec3 nightHorizon=vec3(0.05,0.05,0.1);float dayAmount=smoothstep(0.25,0.4,timeOfDay)*smoothstep(0.75,0.6,timeOfDay);float sunsetAmount=max(smoothstep(0.2,0.3,timeOfDay)*smoothstep(0.4,0.3,timeOfDay),smoothstep(0.6,0.7,timeOfDay)*smoothstep(0.8,0.7,timeOfDay));float nightAmount=max(0.0,1.0-dayAmount-sunsetAmount);float gradientFactor=pow(1.0-uv.y,1.0);vec3 topColor=dayTop*dayAmount+sunsetTop*sunsetAmount+nightTop*nightAmount;vec3 horizonColor=dayHorizon*dayAmount+sunsetHorizon*sunsetAmount+nightHorizon*nightAmount;vec3 avgColor=(topColor+horizonColor)*0.5;topColor=mix(avgColor,topColor,u_skyContrast);horizonColor=mix(avgColor,horizonColor,u_skyContrast);vec3 color=mix(topColor,horizonColor,gradientFactor);color*=u_skyBrightness;float gray=dot(color,vec3(0.299,0.587,0.114));if(u_skySaturation<=1.0){color=mix(vec3(gray),color,u_skySaturation);}else{float boost=u_skySaturation-1.0;color=color+(color-vec3(gray))*boost;}return clamp(color,0.0,1.0);}float drawStars(vec2 uv,float density,float time){float stars=0.0;for(int layer=0;layer<3;layer++){float layerScale=100.0+float(layer)*50.0;vec2 gridUV=uv*layerScale;vec2 gridID=floor(gridUV);vec2 gridFract=fract(gridUV);vec2 starPos=hash2(gridID+float(layer)*100.0);float dist=length(gridFract-starPos);float starPresent=step(1.0-density*0.3,hash(gridID*(float(layer)+1.0)));float starSize=0.02+hash(gridID.yx)*0.03;float twinkle=sin(time*(2.0+hash(gridID)*3.0)+hash(gridID.yx)*TAU)*0.3+0.7;float star=smoothstep(starSize,0.0,dist)*starPresent*twinkle;star*=1.0-float(layer)*0.3;stars+=star;}return stars;}vec3 drawSun(vec2 uv,vec2 sunPos,float size){vec2 aspect=vec2(u_resolution.x/u_resolution.y,1.0);vec2 diff=(uv-sunPos)*aspect;float dist=length(diff);float angle=atan(diff.y,diff.x);float disc=1.0-smoothstep(size*0.9,size,dist);vec3 sunCore=vec3(1.0,1.0,0.95);vec3 sunEdge=vec3(1.0,0.9,0.4);float edgeFactor=clamp(dist/size,0.0,1.0);vec3 sunColor=mix(sunCore,sunEdge,edgeFactor);float limbDarkening=1.0-pow(clamp(dist/size,0.0,1.0),2.0)*0.3;sunColor*=limbDarkening;float glowSize=max(0.1,u_sunGlowSize);float scaledDist=dist/glowSize;float glow1=exp(-scaledDist*8.0)*0.5;float glow2=exp(-scaledDist*3.0)*0.3;float glow3=exp(-scaledDist*1.5)*0.15;vec3 glowColor=vec3(1.0,0.8,0.4);float glowTotal=(glow1+glow2+glow3)*u_sunGlowIntensity;vec3 result=sunColor*disc*2.0;result+=glowColor*glowTotal;float ringCenter=size*1.15;float ringWidth=max(size*0.35,0.001);float ringMask=smoothstep(size*0.85,size*1.05,dist);ringMask*=1.0-smoothstep(size*5.0,size*9.0,dist);float chromaShift=size*(0.012+u_sunRayIntensity*0.06);chromaShift*=smoothstep(size*0.9,size*2.4,dist);float ringR=exp(-pow((dist-chromaShift-ringCenter)/ringWidth,2.0));float ringG=exp(-pow((dist-ringCenter)/ringWidth,2.0));float ringB=exp(-pow((dist+chromaShift-ringCenter)/ringWidth,2.0));float ringT=clamp((dist-size)/(size*2.2),0.0,1.0);vec3 ringSpectral=0.55+0.45*cos(TAU*(ringT+vec3(0.0,0.33,0.67)));ringSpectral=clamp(ringSpectral,0.0,1.0);vec3 ringColor=mix(vec3(1.0),ringSpectral,0.45);float ringIntensity=(ringR+ringG+ringB)/3.0;ringIntensity*=ringMask*u_sunGlowIntensity*0.025;result+=ringColor*ringIntensity;if(u_sunRayCount>0.0&&u_sunRayIntensity>0.0){if(dist<size*3.6){float motion=clamp(u_sunRayShimmer,0.0,5.0);float t=u_time*max(0.0,u_sunRayShimmerSpeed);float rayPhase=angle*u_sunRayCount;float rayIndex=floor(rayPhase/PI+0.5);float raySeed=hash(vec2(rayIndex,19.17));float major=pow(abs(cos(rayPhase)),10.0);float minor=pow(abs(cos(rayPhase*2.0+raySeed*2.3)),22.0)*0.18;float rayShape=max(major,minor);float breathe=1.0+(noise(vec2(t*0.05,raySeed*7.0))-0.5)*(0.08*motion);float shimmer=1.0+(noise(vec2(dist*12.0-t*0.25,raySeed*23.0))-0.5)*(0.12*motion);float micro=1.0+(noise(vec2(t*0.6,rayPhase*0.8))-0.5)*(0.06*motion);float rayNoise=0.72+0.28*noise(vec2(rayPhase*0.35,t*0.12+raySeed*10.0));float rayPattern=rayShape*rayNoise;float rayStart=smoothstep(size*0.75,size*1.25,dist);float rayEnd=smoothstep(size*(3.0*breathe),size*1.5,dist);float rayLengthVar=0.75+raySeed*0.55;float maxRayDist=max(0.001,u_sunRayLength*0.15);float rayFalloff=exp(-dist*dist/(maxRayDist*maxRayDist*rayLengthVar*breathe));float rays=rayPattern*rayFalloff*rayStart*rayEnd*u_sunRayIntensity;rays*=shimmer*micro;float prismMask=smoothstep(size*1.05,size*2.6,dist);float rayChroma=size*(0.01+u_sunRayIntensity*0.05)*prismMask;float distR=max(0.0,dist-rayChroma);float distB=dist+rayChroma;float falloffR=exp(-distR*distR/(maxRayDist*maxRayDist*rayLengthVar*breathe));float falloffG=rayFalloff;float falloffB=exp(-distB*distB/(maxRayDist*maxRayDist*rayLengthVar*breathe));vec3 rayRGB=vec3(falloffR,falloffG,falloffB)*rayPattern*rayStart*rayEnd;float rayAvg=(rayRGB.r+rayRGB.g+rayRGB.b)/3.0;vec3 rayChromaColor=rayRGB/max(rayAvg,1e-4);float rayT=clamp((dist-size)/(size*2.6),0.0,1.0);vec3 raySpectral=0.55+0.45*cos(TAU*(rayT+vec3(0.0,0.33,0.67)));raySpectral=clamp(raySpectral,0.0,1.0);raySpectral=mix(vec3(1.0),raySpectral,0.28);vec3 rayWarm=vec3(1.0,0.92,0.7);float prismMix=clamp(0.08+u_sunRayIntensity*0.6,0.0,0.45)*prismMask;vec3 rayColor=mix(rayWarm,rayChromaColor,prismMix);rayColor=mix(rayColor,raySpectral,prismMix*0.65);result+=rayColor*rays;}}return result;}vec3 getSphereNormal(vec2 discUV){float r2=dot(discUV,discUV);if(r2>1.0)return vec3(0.0);float z=sqrt(1.0-r2);return normalize(vec3(discUV.x,discUV.y,z));}vec2 sphereToEquirectangular(vec3 normal){float longitude=atan(normal.x,normal.z);float u=longitude/TAU+0.5;float latitude=asin(clamp(normal.y,-1.0,1.0));float v=latitude/PI+0.5;return vec2(u,v);}vec3 getMoonSurfaceColor(vec3 normal,vec2 discUV){if(u_hasMoonTexture){vec2 texUV=sphereToEquirectangular(normal);return texture(u_moonTexture,texUV).rgb;}float brightness=0.7+fbm(discUV*5.0,3)*0.3;return vec3(brightness*0.85,brightness*0.83,brightness*0.8);}vec4 drawMoon(vec2 uv,vec2 moonPos,float size,float phase){vec2 aspect=vec2(u_resolution.x/u_resolution.y,1.0);vec2 diff=(uv-moonPos)*aspect;float dist=length(diff);vec2 discUV=diff/size;float discDist=length(discUV);float disc=1.0-smoothstep(0.95,1.0,discDist);float glowSize=max(0.1,u_moonGlowSize);float glowIntensity=u_moonGlowIntensity;if(disc<0.001){float scaledDist=dist/glowSize;float glow1=exp(-scaledDist*6.0)*0.15;float glow2=exp(-scaledDist*2.0)*0.06;vec3 glowColor=vec3(0.8,0.85,0.95);float phaseAngle=phase*TAU;vec3 sunDir=vec3(sin(phaseAngle),0.0,-cos(phaseAngle));float glowPhase=max(0.2,dot(normalize(vec3(discUV,0.5)),sunDir)*0.5+0.5);return vec4(glowColor*(glow1+glow2)*glowPhase*glowIntensity,0.0);}vec3 normal=getSphereNormal(discUV);float phaseAngle=phase*TAU;vec3 sunDir=vec3(sin(phaseAngle),0.0,-cos(phaseAngle));float NdotL=dot(normal,sunDir);float terminator=smoothstep(-0.02,0.08,NdotL);vec3 baseColor=getMoonSurfaceColor(normal,discUV);vec3 ambient=baseColor*0.03;vec3 lit=baseColor*terminator;vec3 moonSurface=ambient+lit;float limbDarkening=1.0-pow(discDist,3.0)*0.15;moonSurface*=limbDarkening;float rimLight=pow(1.0-abs(NdotL),4.0)*terminator*0.1;moonSurface+=vec3(1.0,0.98,0.95)*rimLight;float scaledDist=dist/glowSize;float glow1=exp(-scaledDist*6.0)*0.12;float glow2=exp(-scaledDist*2.0)*0.06;vec3 glowColor=vec3(0.8,0.85,0.95);float litAmount=max(0.1,terminator);vec3 glow=glowColor*(glow1+glow2)*litAmount*glowIntensity;return vec4(moonSurface*disc+glow,disc);}void main(){vec2 uv=v_uv;vec3 color=getSkyColor(uv,u_timeOfDay);float sunY=getSunY(u_timeOfDay,u_celestialPos.y);float moonY=getMoonY(u_timeOfDay,u_celestialPos.y);vec2 sunPos=vec2(u_celestialPos.x,sunY);vec2 moonPos=vec2(u_celestialPos.x,moonY);float moonFade=getHorizonFade(moonY);if(moonFade>0.01){float stars=drawStars(uv,u_starDensity,u_time);color+=vec3(stars)*moonFade;}float sunFade=getHorizonFade(sunY);if(sunFade>0.01){vec3 sun=drawSun(uv,sunPos,u_sunSize);color+=sun*sunFade;}if(moonFade>0.01){vec4 moon=drawMoon(uv,moonPos,u_moonSize,u_moonPhase);float alpha=moon.a*moonFade;color=mix(color,moon.rgb,alpha)+moon.rgb*(1.0-moon.a)*moonFade;}fragColor=vec4(color,0.0);}`,oe=`#version 300 es
+precision highp float;in vec2 v_uv;out vec4 fragColor;uniform float u_time;uniform vec2 u_resolution;uniform sampler2D u_sceneTexture;uniform float u_timeOfDay;uniform float u_coverage;uniform float u_density;uniform float u_softness;uniform float u_windSpeed;uniform float u_windAngle;uniform float u_turbulence;uniform float u_lightIntensity;uniform float u_ambientDarkness;uniform int u_numLayers;uniform float u_cloudScale;uniform vec2 u_celestialPos;uniform float u_celestialSize;uniform float u_celestialBrightness;uniform float u_backlightIntensity;
+#define PI 3.14159265359
+float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453123);}float noise(vec2 p){vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);float a=hash(i);float b=hash(i+vec2(1.0,0.0));float c=hash(i+vec2(0.0,1.0));float d=hash(i+vec2(1.0,1.0));return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);}float fbm(vec2 p,int octaves){float value=0.0;float amplitude=0.5;for(int i=0;i<8;i++){if(i>=octaves)break;value+=amplitude*noise(p);p*=2.0;amplitude*=0.5;}return value;}float cloudLayer(vec2 uv,float time,float layerSeed,float speed,float turbAmount){vec2 wind=vec2(cos(u_windAngle),sin(u_windAngle))*speed*time;float layerScale=(1.8+hash(vec2(layerSeed,0.0))*1.2)*u_cloudScale;float layerRotation=hash(vec2(layerSeed,1.0))*0.5-0.25;vec2 layerOffset=vec2(hash(vec2(layerSeed,2.0))*100.0,hash(vec2(layerSeed,3.0))*100.0);float c=cos(layerRotation);float s=sin(layerRotation);vec2 rotatedUV=vec2(uv.x*c-uv.y*s,uv.x*s+uv.y*c);vec2 p=rotatedUV*layerScale+wind+layerOffset;float turbSeed=layerSeed*50.0;vec2 turbOffset=vec2(fbm(p*0.5+time*0.1+turbSeed,4),fbm(p*0.5+turbSeed+100.0+time*0.1,4))*turbAmount;float n=fbm(p+turbOffset,6);return n;}vec3 cloudLighting(float density,float heightInCloud,float sunAlt,float warmth,float nightFactor,vec2 uv){float daylight=smoothstep(-0.12,0.1,sunAlt);vec3 dayLitColor=vec3(1.0,0.98,0.96);vec3 sunsetLitColor=vec3(1.0,0.7,0.45);vec3 nightLitColor=vec3(0.12,0.14,0.2);vec3 litColor=mix(dayLitColor,sunsetLitColor,warmth);litColor=mix(litColor,nightLitColor,nightFactor);vec3 dayShadowColor=vec3(0.45,0.5,0.6);vec3 sunsetShadowColor=vec3(0.35,0.25,0.3);vec3 nightShadowColor=vec3(0.03,0.04,0.07);vec3 shadowColor=mix(dayShadowColor,sunsetShadowColor,warmth);shadowColor=mix(shadowColor,nightShadowColor,nightFactor);shadowColor*=(1.0-u_ambientDarkness*0.3);float topLight=heightInCloud*max(0.0,sunAlt);float sideLight=(1.0-abs(heightInCloud-0.5)*2.0)*(1.0-sunAlt*0.5);float bottomLight=(1.0-heightInCloud)*warmth*0.5;float ambientLight=mix(0.03,0.2,daylight);float lightAmount=(topLight*0.5+sideLight*0.3+bottomLight)*daylight+ambientLight;lightAmount=clamp(lightAmount*u_lightIntensity,0.0,1.0);vec3 cloudColor=mix(shadowColor,litColor,lightAmount);float rimLight=pow(density,0.5)*(1.0-density)*4.0;vec3 rimColor=mix(vec3(1.0,1.0,0.95),vec3(1.0,0.8,0.5),warmth);rimColor=mix(rimColor,vec3(0.15,0.18,0.25),nightFactor);float rimStrength=mix(0.1,0.3,daylight);cloudColor+=rimColor*rimLight*rimStrength*u_lightIntensity;float hotSpot=pow(max(0.0,lightAmount-0.6)*2.5,2.0)*warmth*daylight;cloudColor+=vec3(1.0,0.5,0.2)*hotSpot*0.4;float aspect=u_resolution.x/u_resolution.y;vec2 celestialUV=u_celestialPos;vec2 diff=(uv-celestialUV)*vec2(aspect,1.0);float distToCelestial=length(diff);float transmission=pow(1.0-density,2.0);float glowRadius=u_celestialSize*6.0;float proximityGlow=exp(-distToCelestial*distToCelestial/(glowRadius*glowRadius));float backlight=proximityGlow*transmission*u_celestialBrightness;float edgeDist=u_celestialSize*3.0;float nearCelestial=smoothstep(edgeDist*2.5,edgeDist*0.3,distToCelestial);float edgeFactor=density*(1.0-density)*4.0;float silverLining=nearCelestial*edgeFactor*u_celestialBrightness;vec3 backlightColor=mix(vec3(1.0,0.9,0.7),vec3(0.7,0.75,0.9),nightFactor);cloudColor+=backlightColor*(backlight*0.5+silverLining*0.8)*u_backlightIntensity;return cloudColor;}void main(){vec2 uv=v_uv;vec4 scene=texture(u_sceneTexture,uv);float sunAlt=u_timeOfDay<0.5?u_timeOfDay*2.0:2.0-u_timeOfDay*2.0;sunAlt=sunAlt*2.0-1.0;float warmth=1.0-smoothstep(0.0,0.4,sunAlt);warmth=warmth*warmth;float nightFactor=1.0-smoothstep(-0.12,0.02,sunAlt);float daylight=smoothstep(-0.12,0.1,sunAlt);vec3 color=scene.rgb;float accumulatedAlpha=0.0;for(int i=u_numLayers-1;i>=0;i--){float layerIdx=float(i);float layerDepth=layerIdx/max(1.0,float(u_numLayers)-1.0);float layerSeed=layerIdx*7.31+13.0;float layerSpeed=u_windSpeed*(0.6+hash(vec2(layerSeed,10.0))*0.8);float layerTurb=u_turbulence*(0.7+hash(vec2(layerSeed,11.0))*0.6);float cloud=cloudLayer(uv,u_time,layerSeed,layerSpeed,layerTurb);float threshold=1.0-u_coverage;cloud=smoothstep(threshold,threshold+u_softness,cloud);float heightInCloud=uv.y*0.6+cloud*0.4;vec3 cloudColor=cloudLighting(cloud,heightInCloud,sunAlt,warmth,nightFactor,uv);vec3 hazeColor=mix(vec3(0.05,0.06,0.1),vec3(0.6,0.7,0.85),daylight);float hazeAmount=layerDepth*layerDepth*0.5;cloudColor=mix(cloudColor,hazeColor,hazeAmount);float contrastReduction=1.0-layerDepth*0.3;cloudColor=mix(vec3(0.5),cloudColor,contrastReduction);float alpha=cloud*u_density*(0.6+(1.0-layerDepth)*0.4);color=mix(color,cloudColor,alpha*(1.0-accumulatedAlpha));accumulatedAlpha=accumulatedAlpha+alpha*(1.0-accumulatedAlpha);}fragColor=vec4(color,accumulatedAlpha);}`,ie=`#version 300 es
+precision highp float;in vec2 v_uv;out vec4 fragColor;uniform float u_time;uniform vec2 u_resolution;uniform sampler2D u_sceneTexture;uniform float u_glassIntensity;uniform float u_glassZoom;uniform float u_fallingIntensity;uniform float u_fallingSpeed;uniform float u_fallingAngle;uniform float u_fallingStreakLength;uniform int u_fallingLayers;uniform float u_refractionStrength;
+#define S(a, b, t) smoothstep(a, b, t)
+vec3 N13(float p){vec3 p3=fract(vec3(p)*vec3(0.1031,0.11369,0.13787));p3+=dot(p3,p3.yzx+19.19);return fract(vec3((p3.x+p3.y)*p3.z,(p3.x+p3.z)*p3.y,(p3.y+p3.z)*p3.x));}float N(float t){return fract(sin(t*12345.564)*7658.76);}float Saw(float b,float t){return S(0.0,b,t)*S(1.0,b,t);}vec2 DropLayer(vec2 uv,float t){vec2 UV=uv;uv.y+=t*0.75;vec2 aspect=vec2(6.0,1.0);vec2 grid=aspect*2.0;vec2 id=floor(uv*grid);float colShift=N(id.x);uv.y+=colShift;id=floor(uv*grid);vec3 n=N13(id.x*35.2+id.y*2376.1);vec2 st=fract(uv*grid)-vec2(0.5,0.0);float x=n.x-0.5;float y=UV.y*20.0;float wiggle=sin(y+sin(y));x+=wiggle*(0.5-abs(x))*(n.z-0.5);x*=0.7;float ti=fract(t+n.z);y=(Saw(0.85,ti)-0.5)*0.9+0.5;vec2 p=vec2(x,y);float d=length((st-p)*aspect.yx);float mainDrop=S(0.4,0.0,d);float r=sqrt(S(1.0,y,st.y));float cd=abs(st.x-x);float trail=S(0.23*r,0.15*r*r,cd);float trailFront=S(-0.02,0.02,st.y-y);trail*=trailFront*r*r;float y2=fract(UV.y*10.0)+(st.y-0.5);float dd=length(st-vec2(x,y2));float droplets=S(0.3,0.0,dd);float m=mainDrop+droplets*r*trailFront;return vec2(m,trail);}float StaticDrops(vec2 uv,float t){uv*=40.0;vec2 id=floor(uv);uv=fract(uv)-0.5;vec3 n=N13(id.x*107.45+id.y*3543.654);vec2 p=(n.xy-0.5)*0.7;float d=length(uv-p);float fade=Saw(0.025,fract(t+n.z));float c=S(0.3,0.0,d)*fract(n.z*10.0)*fade;return c;}vec2 Drops(vec2 uv,float t,float l0,float l1,float l2){float s=StaticDrops(uv,t)*l0;vec2 m1=DropLayer(uv,t)*l1;vec2 m2=DropLayer(uv*1.85,t)*l2;float c=s+m1.x+m2.x;c=S(0.3,1.0,c);return vec2(c,max(m1.y*l0,m2.y*l1));}float hash12(vec2 p){vec3 p3=fract(vec3(p.xyx)*0.1031);p3+=dot(p3,p3.yzx+33.33);return fract((p3.x+p3.y)*p3.z);}vec2 FallingRainLayer(vec2 uv,float t,float speed,float angle,float streakLen,float scale,float density){vec2 offset=vec2(0.0);vec2 p=uv;p.x+=p.y*angle;p*=scale;p.y+=t*speed;vec2 id=floor(p);vec2 gv=fract(p)-0.5;for(int y=-1;y<=1;y++){for(int x=-1;x<=1;x++){vec2 offs=vec2(float(x),float(y));vec2 cellId=id+offs;float n1=hash12(cellId);if(n1>density)continue;vec2 n2=vec2(hash12(cellId*17.23),hash12(cellId*31.17));vec2 dropPos=offs+n2-0.5;vec2 localUV=gv-dropPos;float streakW=0.025+n1*0.02;float streakH=streakLen*(0.4+hash12(cellId*7.13)*0.6);float t_pos=(localUV.y+streakH)/(2.0*streakH);t_pos=clamp(t_pos,0.0,1.0);if(abs(localUV.y)>streakH*1.2)continue;float taper=mix(1.3,0.4,t_pos*t_pos);float width=streakW*taper;float core=S(width,width*0.2,abs(localUV.x));float vertFade=S(0.0,0.1,t_pos)*S(1.0,0.85,t_pos);float streak=core*vertFade;if(streak>0.001){offset.x+=localUV.x*streak*0.5;offset.y+=(n1-0.5)*streak*0.1;}}}return offset;}vec2 FallingRain(vec2 uv,float t){vec2 totalOffset=vec2(0.0);if(u_fallingIntensity<0.01)return totalOffset;float speed=u_fallingSpeed*5.0;float streakLen=u_fallingStreakLength*0.3;for(int i=0;i<6;i++){if(i>=u_fallingLayers)break;float layerIdx=float(i);float depth=layerIdx/float(max(u_fallingLayers-1,1));float layerScale=mix(6.0,30.0,depth);float layerSpeed=speed*mix(2.0,0.5,depth);float layerDensity=u_fallingIntensity*mix(0.8,0.3,depth);float layerStrength=mix(1.0,0.15,depth);float layerStreakLen=streakLen*mix(1.5,0.4,depth);float layerAngle=u_fallingAngle*mix(1.0,0.6,depth);vec2 layerOffset=vec2(sin(layerIdx*73.156)*3.0,cos(layerIdx*37.842)*3.0);vec2 layer=FallingRainLayer(uv+layerOffset,t+layerIdx*0.13,layerSpeed,layerAngle,layerStreakLen,layerScale,layerDensity);totalOffset+=layer*layerStrength;}return totalOffset*0.4;}void main(){vec2 uv=(gl_FragCoord.xy-0.5*u_resolution.xy)/u_resolution.y;vec2 UV=v_uv;uv*=u_glassZoom;float t=u_time*0.2;float rainAmount=u_glassIntensity;float staticDrops=S(-0.5,1.0,rainAmount)*2.0;float layer1=S(0.25,0.75,rainAmount);float layer2=S(0.0,0.5,rainAmount);vec2 c=Drops(uv,t,staticDrops,layer1,layer2);vec2 e=vec2(0.001,0.0);float cx=Drops(uv+e,t,staticDrops,layer1,layer2).x;float cy=Drops(uv+e.yx,t,staticDrops,layer1,layer2).x;vec2 glassNormal=vec2(cx-c.x,cy-c.x);vec2 fallingRainOffset=FallingRain(uv,u_time);vec2 totalRefraction=(glassNormal+fallingRainOffset)*u_refractionStrength;vec2 refractedUV=UV+totalRefraction;refractedUV=clamp(refractedUV,0.0,1.0);vec4 scene=texture(u_sceneTexture,refractedUV);vec3 color=scene.rgb;float rainMagnitude=length(fallingRainOffset);if(rainMagnitude>0.001){float brightness=dot(scene.rgb,vec3(0.299,0.587,0.114));float specular=rainMagnitude*15.0*(0.1+brightness*0.9);color+=vec3(0.8,0.85,0.95)*specular*0.3;}color+=vec3(0.1,0.12,0.15)*c.x*0.5;fragColor=vec4(color,scene.a);}`,re=`#version 300 es
+precision highp float;in vec2 v_uv;out vec4 fragColor;uniform float u_time;uniform vec2 u_resolution;uniform sampler2D u_sceneTexture;uniform bool u_enabled;uniform float u_flashIntensity;uniform float u_branchDensity;uniform float u_sceneIllumination;uniform float u_lastFlashTime;uniform float u_strikeSeed;
+#define MAX_SEGMENTS 32
+#define MAX_BRANCHES 16
+#define PI 3.14159265359
+float easeOutSine(float t){return sin(t*PI*0.5);}float easeInSine(float t){return 1.0-cos(t*PI*0.5);}float easeInOutSine(float t){return-(cos(PI*t)-1.0)*0.5;}float easeOutQuad(float t){return 1.0-(1.0-t)*(1.0-t);}float easeOutCubic(float t){float inv=1.0-t;return 1.0-inv*inv*inv;}float hash11(float p){p=fract(p*0.1031);p*=p+33.33;p*=p+p;return fract(p);}float hash12(vec2 p){vec3 p3=fract(vec3(p.xyx)*0.1031);p3+=dot(p3,p3.yzx+33.33);return fract((p3.x+p3.y)*p3.z);}vec2 hash22(vec2 p){vec3 p3=fract(vec3(p.xyx)*vec3(0.1031,0.1030,0.0973));p3+=dot(p3,p3.yzx+33.33);return fract((p3.xx+p3.yz)*p3.zy);}float noise(vec2 p){vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);float a=hash12(i);float b=hash12(i+vec2(1.0,0.0));float c=hash12(i+vec2(0.0,1.0));float d=hash12(i+vec2(1.0,1.0));return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);}float distToSegment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a;vec2 ba=b-a;float h=clamp(dot(pa,ba)/dot(ba,ba),0.0,1.0);return length(pa-ba*h);}vec2 displacedPoint(vec2 start,vec2 end,float t,float seed,float displacementAmt){vec2 basePoint=mix(start,end,t);vec2 dir=end-start;vec2 perp=normalize(vec2(-dir.y,dir.x));float envelope=sin(t*PI);float n1=noise(vec2(t*8.0,seed*100.0))*2.0-1.0;float n2=noise(vec2(t*16.0,seed*100.0+50.0))*2.0-1.0;float n3=noise(vec2(t*32.0,seed*100.0+100.0))*2.0-1.0;float displacement=(n1*0.6+n2*0.3+n3*0.1)*envelope*displacementAmt;float targetBias=1.0-t*0.3;displacement*=targetBias;return basePoint+perp*displacement*length(dir);}float mainBoltDistance(vec2 uv,vec2 start,vec2 end,float seed,float displacementAmt){float minDist=999.0;vec2 prevPoint=start;for(int i=1;i<=MAX_SEGMENTS;i++){float t=float(i)/float(MAX_SEGMENTS);vec2 currPoint=displacedPoint(start,end,t,seed,displacementAmt);float d=distToSegment(uv,prevPoint,currPoint);minDist=min(minDist,d);prevPoint=currPoint;}return minDist;}float branchDistance(vec2 uv,vec2 branchStart,vec2 branchDir,float branchLen,float seed,float displacementAmt){vec2 branchEnd=branchStart+branchDir*branchLen;float minDist=999.0;vec2 prevPoint=branchStart;for(int i=1;i<=12;i++){float t=float(i)/12.0;vec2 currPoint=displacedPoint(branchStart,branchEnd,t,seed,displacementAmt*0.7);float d=distToSegment(uv,prevPoint,currPoint);minDist=min(minDist,d);prevPoint=currPoint;}return minDist;}vec2 branchesDistance(vec2 uv,vec2 start,vec2 end,float seed,float displacementAmt,float density){float minDist=999.0;float brightness=0.0;vec2 mainDir=normalize(end-start);float mainLen=length(end-start);for(int i=0;i<MAX_BRANCHES;i++){float idx=float(i);float branchT=0.15+hash11(seed+idx*7.31)*0.7;float branchProb=(1.0-branchT)*density;if(hash11(seed+idx*3.17)>branchProb)continue;vec2 branchStart=displacedPoint(start,end,branchT,seed,displacementAmt);float angleOffset=(hash11(seed+idx*11.13)*2.0-1.0)*0.6;float side=hash11(seed+idx*5.71)>0.5?1.0:-1.0;float angle=atan(mainDir.y,mainDir.x)+side*(0.3+abs(angleOffset)*0.5);vec2 branchDir=vec2(cos(angle),sin(angle));float branchLen=mainLen*(0.15+hash11(seed+idx*13.37)*0.25);float d=branchDistance(uv,branchStart,branchDir,branchLen,seed+idx*100.0,displacementAmt);if(d<minDist){minDist=d;brightness=0.5-branchT*0.2;}if(density>0.3&&hash11(seed+idx*17.19)<density*0.5){float subT=0.3+hash11(seed+idx*19.23)*0.4;vec2 subStart=branchStart+branchDir*branchLen*subT;float subAngle=angle+(hash11(seed+idx*23.29)*2.0-1.0)*0.5;vec2 subDir=vec2(cos(subAngle),sin(subAngle));float subLen=branchLen*0.4;float subD=branchDistance(uv,subStart,subDir,subLen,seed+idx*200.0,displacementAmt*0.5);if(subD<minDist){minDist=subD;brightness=0.25;}}}return vec2(minDist,brightness);}vec3 lightningGlow(float dist,float brightness,float intensity,float thickness){float scaledDist=dist/max(thickness,0.1);float core=smoothstep(0.003,0.0,scaledDist)*brightness;float innerGlow=exp(-scaledDist*150.0)*brightness;float outerGlow=exp(-dist*dist*3000.0)*brightness*thickness;vec3 coreColor=vec3(1.0,1.0,1.0);vec3 innerColor=vec3(0.7,0.8,1.0);vec3 outerColor=vec3(0.5,0.5,0.9);vec3 color=coreColor*core*2.0;color+=innerColor*innerGlow*0.8;color+=outerColor*outerGlow*0.5;return color*intensity;}float flashEnvelope(float timeSinceStrike,float duration){if(timeSinceStrike<0.0||timeSinceStrike>duration)return 0.0;float t=timeSinceStrike/duration;float attackT=clamp(t/0.03,0.0,1.0);float attack=easeOutCubic(attackT);float sustainT=clamp((t-0.05)/0.65,0.0,1.0);float sustain=1.0-easeInOutSine(sustainT);float decay=exp(-t*2.0);decay=mix(decay,easeOutSine(1.0-t),0.3);float endT=clamp((t-0.75)/0.25,0.0,1.0);float endFade=1.0-easeInSine(endT);return attack*max(sustain,decay*0.4)*endFade;}float restrikeEnvelope(float timeSinceStrike,float duration,float seed){float env=flashEnvelope(timeSinceStrike,duration*0.7);if(hash11(seed*7.7)>0.7){float restrike1=flashEnvelope(timeSinceStrike-duration*0.5,duration*0.3);env=max(env,restrike1*0.6);}if(hash11(seed*11.3)>0.85){float restrike2=flashEnvelope(timeSinceStrike-duration*0.75,duration*0.2);env=max(env,restrike2*0.4);}return env;}void main(){vec4 scene=texture(u_sceneTexture,v_uv);if(!u_enabled){fragColor=scene;return;}vec2 uv=v_uv;float aspect=u_resolution.x/u_resolution.y;uv.x*=aspect;float timeSinceStrike=u_time-u_lastFlashTime;float durationSec=0.8;float flash=restrikeEnvelope(timeSinceStrike,durationSec,u_strikeSeed);float afterimageDuration=durationSec*1.5;float afterimageT=clamp(timeSinceStrike/afterimageDuration,0.0,1.0);float afterimage=timeSinceStrike<0.0?0.0:(1.0-easeInSine(afterimageT));vec3 color=scene.rgb;if(flash>0.01||afterimage>0.01){vec2 strikeHash=hash22(vec2(u_strikeSeed*123.456,u_strikeSeed*789.012));vec2 boltStart=vec2((0.3+strikeHash.x*0.4)*aspect,1.05);vec2 boltEnd=vec2(boltStart.x+(strikeHash.x-0.5)*0.4,-0.05);float straightDist=distToSegment(uv,boltStart,boltEnd);float sourceGlow=exp(-length(uv-boltStart)*3.0);color+=vec3(0.4,0.45,0.6)*sourceGlow*afterimage*0.3;float distLimit=0.18+u_branchDensity*0.25+u_flashIntensity*0.05;float feather=0.08;float region=1.0-smoothstep(distLimit-feather,distLimit,straightDist);if(region<=0.0005){fragColor=vec4(color,scene.a);return;}float displacementAmt=0.15;float mainDist=mainBoltDistance(uv,boltStart,boltEnd,u_strikeSeed,displacementAmt);vec2 branchResult=branchesDistance(uv,boltStart,boltEnd,u_strikeSeed,displacementAmt,u_branchDensity);float branchDist=branchResult.x;float branchBrightness=branchResult.y;float mainThickness=mix(0.2,1.0,easeOutSine(sqrt(max(flash,0.0))));vec3 afterglowColor=vec3(0.5,0.45,0.7);vec3 mainCore=lightningGlow(mainDist,easeOutQuad(max(flash,0.0)),u_flashIntensity,mainThickness);float mainAfterglowDist=mainDist*0.6;float mainAfterglowStrength=exp(-mainAfterglowDist*50.0)*afterimage*0.5;vec3 mainAfterglow=afterglowColor*mainAfterglowStrength;float branchThickness=mix(0.15,1.0,easeOutSine(max(flash,0.0)));vec3 branchCore=lightningGlow(branchDist,branchBrightness*easeOutQuad(max(flash,0.0)),u_flashIntensity,branchThickness);float branchAfterglowDist=branchDist*0.7;float branchAfterglowStrength=exp(-branchAfterglowDist*80.0)*branchBrightness*afterimage*0.4;vec3 branchAfterglow=afterglowColor*branchAfterglowStrength;color+=(mainCore+branchCore)*max(flash,0.0)*region;color+=(mainAfterglow+branchAfterglow)*afterimage*region;}fragColor=vec4(color,scene.a);}`,le=`#version 300 es
+precision highp float;in vec2 v_uv;out vec4 fragColor;uniform float u_time;uniform vec2 u_resolution;uniform sampler2D u_sceneTexture;uniform float u_intensity;uniform int u_layers;uniform float u_fallSpeed;uniform float u_windSpeed;uniform float u_windAngle;uniform float u_turbulence;uniform float u_drift;uniform float u_flutter;uniform float u_windShear;uniform float u_flakeSize;uniform float u_sizeVariation;uniform float u_opacity;uniform float u_glowAmount;uniform float u_sparkle;
+#define PI 3.14159265359
+#define MAX_LAYERS 6
+float hash12(vec2 p){vec3 p3=fract(vec3(p.xyx)*0.1031);p3+=dot(p3,p3.yzx+33.33);return fract((p3.x+p3.y)*p3.z);}vec2 hash22(vec2 p){vec3 p3=fract(vec3(p.xyx)*vec3(0.1031,0.1030,0.0973));p3+=dot(p3,p3.yzx+33.33);return fract((p3.xx+p3.yz)*p3.zy);}float noise(vec2 p){vec2 i=floor(p);vec2 f=fract(p);f=f*f*(3.0-2.0*f);float a=hash12(i);float b=hash12(i+vec2(1.0,0.0));float c=hash12(i+vec2(0.0,1.0));float d=hash12(i+vec2(1.0,1.0));return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);}vec2 rotate2D(vec2 p,float angle){float c=cos(angle);float s=sin(angle);return vec2(p.x*c-p.y*s,p.x*s+p.y*c);}float snowflakeShape(vec2 uv,float size,float seed,float rotation){vec2 rotatedUV=rotate2D(uv,rotation);float dist=length(rotatedUV);float circle=smoothstep(size,size*0.3,dist);float angle=atan(rotatedUV.y,rotatedUV.x);float hexPattern=0.5+0.5*cos(angle*6.0);hexPattern=pow(hexPattern,2.0);float crystalAmount=smoothstep(0.02,0.05,size)*0.3;float shape=mix(circle,circle*(0.7+hexPattern*0.3),crystalAmount);float glow=exp(-dist*dist/(size*size*3.0))*u_glowAmount;return shape+glow*0.4;}vec2 getWind(float layerDepth){vec2 baseWind=vec2(cos(u_windAngle),0.0)*u_windSpeed;float windResponse=mix(0.3,1.0,1.0-layerDepth);float shearResponse=1.0+u_windShear*(1.0-layerDepth)*0.35;return baseWind*windResponse*shearResponse;}float sparkle(vec2 cellId,float time,float seed){float sparklePhase=hash12(cellId+vec2(seed*100.0,0.0))*100.0;float sparkleFreq=2.0+hash12(cellId+vec2(0.0,seed*100.0))*3.0;float sparkleWave=sin(time*sparkleFreq+sparklePhase);float sparkleIntensity=pow(max(0.0,sparkleWave),16.0);float sparkleProbability=hash12(cellId+vec2(floor(time*0.5),0.0));sparkleIntensity*=step(0.85,sparkleProbability);return sparkleIntensity*u_sparkle;}vec3 snowLayer(vec2 uv,float time,float layerIndex,float totalLayers){float depth=layerIndex/max(1.0,totalLayers-1.0);float layerScale=mix(8.0,40.0,depth);float layerSpeed=u_fallSpeed*mix(1.2,0.4,depth);float layerDensity=u_intensity*mix(1.0,0.5,depth);float layerFlakeSize=u_flakeSize*mix(1.5,0.3,depth);float layerOpacity=u_opacity*mix(1.0,0.4,depth);vec2 layerOffset=vec2(sin(layerIndex*73.156)*10.0,cos(layerIndex*37.842)*10.0);vec2 p=(uv+layerOffset)*layerScale;p.y+=time*layerSpeed*2.0;vec2 baseWind=getWind(depth);p.x+=time*baseWind.x*0.3;vec2 id=floor(p);vec2 gv=fract(p)-0.5;float snow=0.0;float sparkleAccum=0.0;for(int y=-1;y<=1;y++){for(int x=-1;x<=1;x++){vec2 offs=vec2(float(x),float(y));vec2 cellId=id+offs;float h1=hash12(cellId);vec2 h2=hash22(cellId);float h3=hash12(cellId+vec2(127.0,311.0));float h4=hash12(cellId+vec2(271.0,183.0));if(h1>layerDensity)continue;float sizeVar=1.0+(h3-0.5)*u_sizeVariation;float size=layerFlakeSize*sizeVar*0.04;vec2 flakePos=h2*0.8-0.4;float flutterPhase=h3*PI*2.0;float flutterAmp=u_flutter*0.15*(1.0-depth);flakePos.x+=sin(time*3.0+flutterPhase)*flutterAmp;flakePos.y+=cos(time*2.5+flutterPhase*1.3)*flutterAmp*0.5;float driftPhase=h4*PI*2.0+layerIndex*1.7;flakePos.x+=sin(time*0.55+driftPhase)*u_drift*0.18;float turbFreq=0.6+u_turbulence*1.4;vec2 turb=vec2(noise(cellId*0.17+time*turbFreq),noise(cellId.yx*0.17+time*turbFreq+17.0))-0.5;flakePos+=turb*(u_turbulence*0.22)*(1.0-depth);vec2 localUV=gv-offs-flakePos;float rotationSpeed=(1.5-sizeVar*0.5)*(0.5+h4*1.0);float rotationPhase=h4*PI*2.0;float rotation=time*rotationSpeed+rotationPhase;float flake=snowflakeShape(localUV,size,h1,rotation);float flakeSparkle=sparkle(cellId,time,h1)*flake;sparkleAccum+=flakeSparkle;snow+=flake*layerOpacity;}}return vec3(snow,sparkleAccum,depth);}void main(){vec4 scene=texture(u_sceneTexture,v_uv);vec2 uv=v_uv;float aspect=u_resolution.x/u_resolution.y;uv.x*=aspect;float snow=0.0;float totalSparkle=0.0;for(int i=u_layers-1;i>=0;i--){vec3 layerResult=snowLayer(uv,u_time,float(i),float(u_layers));snow+=layerResult.x;totalSparkle+=layerResult.y;}snow=clamp(snow,0.0,1.0);totalSparkle=clamp(totalSparkle,0.0,1.0);vec3 snowColor=vec3(0.75,0.78,0.85);vec3 sparkleColor=vec3(0.9,0.92,1.0);vec3 color=scene.rgb+snowColor*snow+sparkleColor*totalSparkle;fragColor=vec4(color,scene.a);}`,ue=`#version 300 es
+precision highp float;in vec2 v_uv;out vec4 fragColor;uniform sampler2D u_sceneTexture;uniform float u_time;uniform vec2 u_resolution;uniform float u_timeOfDay;uniform vec2 u_sunPos;uniform float u_sunVisible;uniform float u_lastFlashTime;uniform float u_strikeSeed;uniform float u_lightningSceneIllumination;uniform bool u_postEnabled;uniform float u_haze;uniform float u_hazeHorizon;uniform float u_hazeDesaturation;uniform float u_hazeContrast;uniform float u_bloomIntensity;uniform float u_bloomThreshold;uniform float u_bloomKnee;uniform float u_bloomRadius;uniform float u_bloomTapScale;uniform float u_exposureIntensity;uniform float u_exposureDesaturation;uniform float u_exposureRecovery;uniform float u_godRayIntensity;uniform float u_godRayDecay;uniform float u_godRayDensity;uniform float u_godRayWeight;uniform int u_godRaySamples;
+#define PI 3.14159265359
+#define GODRAY_MAX_SAMPLES 32
+float saturate(float x){return clamp(x,0.0,1.0);}float luminance(vec3 c){return dot(c,vec3(0.299,0.587,0.114));}float easeOutSine(float t){return sin(t*PI*0.5);}float easeInSine(float t){return 1.0-cos(t*PI*0.5);}float easeInOutSine(float t){return-(cos(PI*t)-1.0)*0.5;}float easeOutQuad(float t){return 1.0-(1.0-t)*(1.0-t);}float easeOutCubic(float t){float inv=1.0-t;return 1.0-inv*inv*inv;}float hash11(float p){p=fract(p*0.1031);p*=p+33.33;p*=p+p;return fract(p);}float flashEnvelope(float timeSinceStrike,float duration){if(timeSinceStrike<0.0||timeSinceStrike>duration)return 0.0;float t=timeSinceStrike/duration;float attackT=clamp(t/0.03,0.0,1.0);float attack=easeOutCubic(attackT);float sustainT=clamp((t-0.05)/0.65,0.0,1.0);float sustain=1.0-easeInOutSine(sustainT);float decay=exp(-t*2.0);decay=mix(decay,easeOutSine(1.0-t),0.3);float endT=clamp((t-0.75)/0.25,0.0,1.0);float endFade=1.0-easeInSine(endT);return attack*max(sustain,decay*0.4)*endFade;}float restrikeEnvelope(float timeSinceStrike,float duration,float seed){float env=flashEnvelope(timeSinceStrike,duration*0.7);if(hash11(seed*7.7)>0.7){float restrike1=flashEnvelope(timeSinceStrike-duration*0.5,duration*0.3);env=max(env,restrike1*0.6);}if(hash11(seed*11.3)>0.85){float restrike2=flashEnvelope(timeSinceStrike-duration*0.75,duration*0.2);env=max(env,restrike2*0.4);}return env;}float getSunAltitudeFromTimeOfDay(float timeOfDay){float sunAlt=timeOfDay<0.5?timeOfDay*2.0:2.0-timeOfDay*2.0;return sunAlt*2.0-1.0;}vec3 applyHaze(vec3 color,vec2 uv){float haze=saturate(u_haze);if(haze<=0.0001)return color;float horizon=pow(1.0-uv.y,1.8);float hazeWeight=haze*mix(1.0,horizon,saturate(u_hazeHorizon));float sunAlt=getSunAltitudeFromTimeOfDay(u_timeOfDay);float daylight=smoothstep(-0.12,0.1,sunAlt);vec3 hazeDay=vec3(0.60,0.70,0.85);vec3 hazeNight=vec3(0.06,0.07,0.10);vec3 hazeColor=mix(hazeNight,hazeDay,daylight);color=mix(color,hazeColor,hazeWeight*0.55);float contrast=saturate(1.0-hazeWeight*saturate(u_hazeContrast));color=mix(vec3(0.5),color,contrast);float gray=luminance(color);float sat=saturate(1.0-hazeWeight*saturate(u_hazeDesaturation));color=mix(vec3(gray),color,sat);return color;}vec3 bloomTap(vec2 uv){vec3 c=texture(u_sceneTexture,clamp(uv,0.0,1.0)).rgb;float l=luminance(c);float knee=max(0.0001,u_bloomKnee);float m=smoothstep(u_bloomThreshold,u_bloomThreshold+knee,l);return c*m;}vec3 computeBloom(vec2 uv){float intensity=u_bloomIntensity;if(intensity<=0.0001)return vec3(0.0);vec2 texel=1.0/max(u_resolution,vec2(1.0));float radiusPx=max(0.0,u_bloomRadius)*(u_resolution.y*0.02);radiusPx*=max(0.25,u_bloomTapScale);vec2 d=texel*radiusPx;vec3 sum=vec3(0.0);sum+=bloomTap(uv)*0.20;sum+=bloomTap(uv+vec2(d.x,0.0))*0.12;sum+=bloomTap(uv+vec2(-d.x,0.0))*0.12;sum+=bloomTap(uv+vec2(0.0,d.y))*0.12;sum+=bloomTap(uv+vec2(0.0,-d.y))*0.12;sum+=bloomTap(uv+vec2(d.x,d.y))*0.08;sum+=bloomTap(uv+vec2(-d.x,d.y))*0.08;sum+=bloomTap(uv+vec2(d.x,-d.y))*0.08;sum+=bloomTap(uv+vec2(-d.x,-d.y))*0.08;return sum*intensity;}vec3 applyExposureResponse(vec3 color,float flashStrength){if(flashStrength<=0.0001)return color;float t=saturate(flashStrength);float gain=1.0+flashStrength*2.2;vec3 lifted=color*gain;vec3 tonemapped=1.0-exp(-lifted);vec3 outColor=mix(color,tonemapped,t);float gray=luminance(outColor);float desat=saturate(u_exposureDesaturation)*t;outColor=mix(outColor,vec3(gray),desat);outColor=mix(outColor,vec3(1.0),t*0.06);return outColor;}vec3 computeGodRays(vec2 uv){if(u_godRayIntensity<=0.0001)return vec3(0.0);if(u_godRaySamples<=0)return vec3(0.0);if(u_sunVisible<=0.001)return vec3(0.0);float sunAlt=getSunAltitudeFromTimeOfDay(u_timeOfDay);float daylight=smoothstep(-0.12,0.1,sunAlt);float lowSun=1.0-smoothstep(0.25,0.75,max(0.0,sunAlt));vec2 sunUV=clamp(u_sunPos,vec2(-0.25),vec2(1.25));vec2 delta=(uv-sunUV)*(u_godRayDensity/float(u_godRaySamples));vec2 coord=uv;float illuminationDecay=1.0;float accum=0.0;for(int i=0;i<GODRAY_MAX_SAMPLES;i++){if(i>=u_godRaySamples)break;coord-=delta;vec4 s=texture(u_sceneTexture,clamp(coord,0.0,1.0));float transmittance=1.0-saturate(s.a);float sampleLum=luminance(s.rgb);float brightMask=saturate((sampleLum-0.85)/0.15);brightMask*=brightMask;float raySample=transmittance*brightMask;accum+=raySample*illuminationDecay*u_godRayWeight;illuminationDecay*=u_godRayDecay;}vec3 rayColor=mix(vec3(0.7,0.72,0.8),vec3(1.0,0.92,0.75),daylight);float intensity=u_godRayIntensity*saturate(u_sunVisible)*daylight*lowSun;return rayColor*accum*intensity;}void main(){vec4 scene=texture(u_sceneTexture,v_uv);vec3 color=scene.rgb;if(!u_postEnabled){fragColor=vec4(color,1.0);return;}color+=computeGodRays(v_uv);color+=computeBloom(v_uv);float flashStrength=0.0;if(u_exposureIntensity>0.0001){float timeSinceStrike=u_time-u_lastFlashTime;float durationSec=0.8;float f=restrikeEnvelope(timeSinceStrike,durationSec,u_strikeSeed);float afterimageDuration=durationSec*1.5;float afterT=clamp((timeSinceStrike*max(0.05,u_exposureRecovery))/afterimageDuration,0.0,1.0);float afterimage=timeSinceStrike<0.0?0.0:(1.0-easeInSine(afterT));float sceneFlash=f*max(0.0,u_lightningSceneIllumination);color+=vec3(0.3,0.32,0.4)*sceneFlash;flashStrength=f*u_exposureIntensity;flashStrength=max(flashStrength,afterimage*u_exposureIntensity*0.12);color=applyExposureResponse(color,flashStrength);}color=applyHaze(color,v_uv);fragColor=vec4(clamp(color,0.0,1.0),1.0);}`;function pe(e,t,a){if(e.isContextLost())return null;let n=e.createShader(t);if(!n)return null;if(e.shaderSource(n,a),e.compileShader(n),!e.getShaderParameter(n,e.COMPILE_STATUS)){let s=e.getShaderInfoLog(n);if(!e.isContextLost()){let c=t===e.VERTEX_SHADER?"vertex":t===e.FRAGMENT_SHADER?"fragment":String(t);console.error(`Shader compile error (${c}):`,s??"(no info log)")}return e.deleteShader(n),null}return n}function B(e,t,a){if(e.isContextLost())return null;let n=pe(e,e.VERTEX_SHADER,t),s=pe(e,e.FRAGMENT_SHADER,a);if(!n||!s)return n&&e.deleteShader(n),s&&e.deleteShader(s),null;let c=e.createProgram();if(!c)return e.deleteShader(n),e.deleteShader(s),null;if(e.attachShader(c,n),e.attachShader(c,s),e.linkProgram(c),!e.getProgramParameter(c,e.LINK_STATUS)){let l=e.getProgramInfoLog(c);return e.isContextLost()||console.error("Program link error:",l??"(no info log)"),e.deleteProgram(c),e.deleteShader(n),e.deleteShader(s),null}return e.detachShader(c,n),e.detachShader(c,s),e.deleteShader(n),e.deleteShader(s),c}function ce(e,t,a){let n=e.createTexture();if(!n)return null;e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,t,a,0,e.RGBA,e.UNSIGNED_BYTE,null),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE);let s=e.createFramebuffer();if(!s)return e.deleteTexture(n),null;e.bindFramebuffer(e.FRAMEBUFFER,s),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,n,0);let c=e.checkFramebufferStatus(e.FRAMEBUFFER);return c!==e.FRAMEBUFFER_COMPLETE?(e.isContextLost()||console.error("Framebuffer incomplete:",c),e.deleteFramebuffer(s),e.deleteTexture(n),e.bindFramebuffer(e.FRAMEBUFFER,null),e.bindTexture(e.TEXTURE_2D,null),null):(e.bindFramebuffer(e.FRAMEBUFFER,null),e.bindTexture(e.TEXTURE_2D,null),{fbo:s,texture:n,width:t,height:a})}function fe(e,t,a,n){t.width===a&&t.height===n||(e.bindTexture(e.TEXTURE_2D,t.texture),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,a,n,0,e.RGBA,e.UNSIGNED_BYTE,null),e.bindTexture(e.TEXTURE_2D,null),t.width=a,t.height=n)}function J(e,t,a){let n=Math.max(0,Math.min(1,(a-e)/(t-e)));return n*n*(3-2*n)}function Se(e){let t=e.timeOfDay,a=e.celestialY,n=-.25,s=J(.18,.32,t),c=J(.68,.82,t),l=s*(1-c),o=n+(a-n)*l,r=J(.74,.88,t),i=1-J(.12,.26,t),h=Math.max(r,i),f=n+(a-n)*h,p=l>h,b=p?o:f,R=p?e.sunSize:e.moonSize,C=p?Math.min(1,e.sunGlowIntensity*.3)*l:Math.min(.5,e.moonGlowIntensity*.15)*h;return{sunY:o,moonY:f,sunVisible:l,moonVisible:h,activeY:b,activeSize:R,activeBrightness:C}}function Z(e,t,a,n,s){e.bindFramebuffer(e.FRAMEBUFFER,a.fbo),e.viewport(0,0,n,s),e.useProgram(t)}function K(e,t,a,n){e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,a),e.uniform1i(n(t,"u_sceneTexture"),0)}function ve(e,t,a,n){e.bindFramebuffer(e.FRAMEBUFFER,t.fbo),e.viewport(0,0,a,n),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT)}function be({gl:e,program:t,target:a,displayWidth:n,displayHeight:s,time:c,params:l,moonTexture:o,moonTextureLoaded:r,getUniformLocation:i}){Z(e,t,a,n,s),e.uniform1f(i(t,"u_time"),c),e.uniform2f(i(t,"u_resolution"),n,s),e.uniform1f(i(t,"u_timeOfDay"),l.timeOfDay),e.uniform1f(i(t,"u_moonPhase"),l.moonPhase),e.uniform1f(i(t,"u_starDensity"),l.starDensity),e.uniform2f(i(t,"u_celestialPos"),l.celestialX,l.celestialY),e.uniform1f(i(t,"u_sunSize"),l.sunSize),e.uniform1f(i(t,"u_moonSize"),l.moonSize),e.uniform1f(i(t,"u_sunGlowIntensity"),l.sunGlowIntensity),e.uniform1f(i(t,"u_sunGlowSize"),l.sunGlowSize),e.uniform1f(i(t,"u_sunRayCount"),l.sunRayCount),e.uniform1f(i(t,"u_sunRayLength"),l.sunRayLength),e.uniform1f(i(t,"u_sunRayIntensity"),l.sunRayIntensity),e.uniform1f(i(t,"u_sunRayShimmer"),l.sunRayShimmer),e.uniform1f(i(t,"u_sunRayShimmerSpeed"),l.sunRayShimmerSpeed),e.uniform1f(i(t,"u_moonGlowIntensity"),l.moonGlowIntensity),e.uniform1f(i(t,"u_moonGlowSize"),l.moonGlowSize),e.uniform1f(i(t,"u_skyBrightness"),l.skyBrightness),e.uniform1f(i(t,"u_skySaturation"),l.skySaturation),e.uniform1f(i(t,"u_skyContrast"),l.skyContrast),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,o),e.uniform1i(i(t,"u_moonTexture"),0),e.uniform1i(i(t,"u_hasMoonTexture"),r?1:0),e.drawArrays(e.TRIANGLES,0,6)}function we({gl:e,program:t,target:a,sceneTexture:n,displayWidth:s,displayHeight:c,time:l,params:o,celestial:r,getUniformLocation:i}){Z(e,t,a,s,c),K(e,t,n,i),e.uniform1f(i(t,"u_time"),l),e.uniform2f(i(t,"u_resolution"),s,c),e.uniform1f(i(t,"u_timeOfDay"),r.timeOfDay),e.uniform1f(i(t,"u_coverage"),o.coverage),e.uniform1f(i(t,"u_density"),o.density),e.uniform1f(i(t,"u_softness"),o.softness),e.uniform1f(i(t,"u_windSpeed"),o.windSpeed),e.uniform1f(i(t,"u_windAngle"),o.windAngle),e.uniform1f(i(t,"u_turbulence"),o.turbulence),e.uniform1f(i(t,"u_lightIntensity"),o.lightIntensity),e.uniform1f(i(t,"u_ambientDarkness"),o.ambientDarkness),e.uniform1i(i(t,"u_numLayers"),o.numLayers),e.uniform1f(i(t,"u_cloudScale"),o.cloudScale);let h=Se(r);e.uniform2f(i(t,"u_celestialPos"),r.celestialX,h.activeY),e.uniform1f(i(t,"u_celestialSize"),h.activeSize),e.uniform1f(i(t,"u_celestialBrightness"),h.activeBrightness),e.uniform1f(i(t,"u_backlightIntensity"),o.backlightIntensity),e.drawArrays(e.TRIANGLES,0,6)}function xe({gl:e,program:t,target:a,sceneTexture:n,displayWidth:s,displayHeight:c,time:l,params:o,interactions:r,getUniformLocation:i}){Z(e,t,a,s,c),K(e,t,n,i),e.uniform1f(i(t,"u_time"),l),e.uniform2f(i(t,"u_resolution"),s,c),e.uniform1f(i(t,"u_glassIntensity"),o.glassIntensity),e.uniform1f(i(t,"u_glassZoom"),o.glassZoom),e.uniform1f(i(t,"u_fallingIntensity"),o.fallingIntensity),e.uniform1f(i(t,"u_fallingSpeed"),o.fallingSpeed),e.uniform1f(i(t,"u_fallingAngle"),o.fallingAngle),e.uniform1f(i(t,"u_fallingStreakLength"),o.fallingStreakLength),e.uniform1i(i(t,"u_fallingLayers"),o.fallingLayers),e.uniform1f(i(t,"u_refractionStrength"),r.rainRefractionStrength),e.drawArrays(e.TRIANGLES,0,6)}function Ie(e,t,a,n,s){if(!e.lightning||!a||!t.enabled)return!1;let l=.8*1.5,o=n-s;return o>=0&&o<=l}function Re({gl:e,program:t,target:a,sceneTexture:n,displayWidth:s,displayHeight:c,time:l,params:o,interactions:r,lastFlashTime:i,strikeSeed:h,getUniformLocation:f}){Z(e,t,a,s,c),K(e,t,n,f),e.uniform1f(f(t,"u_time"),l),e.uniform2f(f(t,"u_resolution"),s,c),e.uniform1i(f(t,"u_enabled"),o.enabled?1:0),e.uniform1f(f(t,"u_flashIntensity"),o.flashIntensity),e.uniform1f(f(t,"u_branchDensity"),o.branchDensity),e.uniform1f(f(t,"u_sceneIllumination"),r.lightningSceneIllumination),e.uniform1f(f(t,"u_lastFlashTime"),i),e.uniform1f(f(t,"u_strikeSeed"),h),e.drawArrays(e.TRIANGLES,0,6)}function ke({gl:e,program:t,target:a,sceneTexture:n,displayWidth:s,displayHeight:c,time:l,params:o,getUniformLocation:r}){Z(e,t,a,s,c),K(e,t,n,r),e.uniform1f(r(t,"u_time"),l),e.uniform2f(r(t,"u_resolution"),s,c),e.uniform1f(r(t,"u_intensity"),o.intensity),e.uniform1i(r(t,"u_layers"),o.layers),e.uniform1f(r(t,"u_fallSpeed"),o.fallSpeed),e.uniform1f(r(t,"u_windSpeed"),o.windSpeed),e.uniform1f(r(t,"u_windAngle"),o.windAngle),e.uniform1f(r(t,"u_turbulence"),o.turbulence),e.uniform1f(r(t,"u_drift"),o.drift),e.uniform1f(r(t,"u_flutter"),o.flutter),e.uniform1f(r(t,"u_windShear"),o.windShear),e.uniform1f(r(t,"u_flakeSize"),o.flakeSize),e.uniform1f(r(t,"u_sizeVariation"),o.sizeVariation),e.uniform1f(r(t,"u_opacity"),o.opacity),e.uniform1f(r(t,"u_glowAmount"),o.glowAmount),e.uniform1f(r(t,"u_sparkle"),o.sparkle),e.drawArrays(e.TRIANGLES,0,6)}function _e({gl:e,program:t,sceneTexture:a,displayWidth:n,displayHeight:s,time:c,celestial:l,interactions:o,post:r,lastFlashTime:i,strikeSeed:h,getUniformLocation:f}){e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,n,s),e.useProgram(t),K(e,t,a,f),e.uniform1f(f(t,"u_time"),c),e.uniform2f(f(t,"u_resolution"),n,s),e.uniform1f(f(t,"u_timeOfDay"),l.timeOfDay);let p=Se(l);e.uniform2f(f(t,"u_sunPos"),l.celestialX,p.sunY),e.uniform1f(f(t,"u_sunVisible"),p.sunVisible),e.uniform1f(f(t,"u_lastFlashTime"),i),e.uniform1f(f(t,"u_strikeSeed"),h),e.uniform1f(f(t,"u_lightningSceneIllumination"),o.lightningSceneIllumination),e.uniform1i(f(t,"u_postEnabled"),r.enabled?1:0),e.uniform1f(f(t,"u_haze"),r.haze),e.uniform1f(f(t,"u_hazeHorizon"),r.hazeHorizon),e.uniform1f(f(t,"u_hazeDesaturation"),r.hazeDesaturation),e.uniform1f(f(t,"u_hazeContrast"),r.hazeContrast),e.uniform1f(f(t,"u_bloomIntensity"),r.bloomIntensity),e.uniform1f(f(t,"u_bloomThreshold"),r.bloomThreshold),e.uniform1f(f(t,"u_bloomKnee"),r.bloomKnee),e.uniform1f(f(t,"u_bloomRadius"),r.bloomRadius),e.uniform1f(f(t,"u_bloomTapScale"),r.bloomTapScale),e.uniform1f(f(t,"u_exposureIntensity"),r.exposureIntensity),e.uniform1f(f(t,"u_exposureDesaturation"),r.exposureDesaturation),e.uniform1f(f(t,"u_exposureRecovery"),r.exposureRecovery),e.uniform1f(f(t,"u_godRayIntensity"),r.godRayIntensity),e.uniform1f(f(t,"u_godRayDecay"),r.godRayDecay),e.uniform1f(f(t,"u_godRayDensity"),r.godRayDensity),e.uniform1f(f(t,"u_godRayWeight"),r.godRayWeight),e.uniform1i(f(t,"u_godRaySamples"),Math.max(0,Math.min(32,Math.floor(r.godRaySamples)))),e.drawArrays(e.TRIANGLES,0,6)}function Ce(e){let t=v(null),a=v(null),n=v(0),s=v(0),c=v(-100),l=v(0),o=v(0),r=v(null),i=v(!1),h=v(null),f=v(new WeakMap),p=v(!1),b=v(!1),R=v(!1),C=v(!1),A=v(null),k=v(e);k.current=e;let w=v({celestial:null,cloud:null,rain:null,lightning:null,snow:null,composite:null}),T=v({a:null,b:null}),Q=N((d,u,y)=>{let g=f.current.get(u);g||(g=new Map,f.current.set(u,g));let m=g.get(y);if(m!==void 0)return m;let E=d.getUniformLocation(u,y);return g.set(y,E),E},[]),U=N(()=>{n.current&&(cancelAnimationFrame(n.current),n.current=0),b.current=!1},[]),$=N(d=>{d&&A.current&&ae(d),A.current=null},[]),G=N(()=>{U();let d=a.current,u=R.current;if(d&&!u){for(let y of Object.values(w.current))y&&d.deleteProgram(y);for(let y of[T.current.a,T.current.b])y&&(d.deleteFramebuffer(y.fbo),d.deleteTexture(y.texture));r.current&&d.deleteTexture(r.current),h.current&&d.deleteBuffer(h.current)}w.current={celestial:null,cloud:null,rain:null,lightning:null,snow:null,composite:null},T.current={a:null,b:null},r.current=null,i.current=!1,h.current=null,a.current=null,f.current=new WeakMap},[U]),z=N(({canvas:d,contextLost:u=!1,markInitFailed:y=!0,warnMessage:g,errorMessage:m})=>(u&&(R.current=!0),y&&(C.current=!0),m&&console.error(m),G(),A.current=ge(d,A.current),!1),[G]),V=N(()=>{if(C.current)return!1;let d=t.current;if(!d||A.current===!1)return!1;if(A.current===null){if(!he(d))return A.current=!1,!1;A.current=!0}G(),R.current=!1;let u=d.getContext("webgl2");if(!u)return z({canvas:d,warnMessage:"[WeatherEffectsCanvas] WebGL2 not supported; rendering without effects."});if(a.current=u,u.isContextLost())return z({canvas:d,contextLost:!0,markInitFailed:!1});if(w.current.celestial=B(u,O,se),w.current.cloud=B(u,O,oe),w.current.rain=B(u,O,ie),w.current.lightning=B(u,O,re),w.current.snow=B(u,O,le),w.current.composite=B(u,O,ue),!w.current.celestial||!w.current.composite)return u.isContextLost()?z({canvas:d,contextLost:!0,markInitFailed:!1}):z({canvas:d,errorMessage:"Failed to create required WebGL programs"});let y=k.current.dpr??window.devicePixelRatio,g=Math.max(1,Math.floor(d.clientWidth*y)),m=Math.max(1,Math.floor(d.clientHeight*y)),E=ce(u,g,m),x=ce(u,g,m);if(!E||!x)return u.isContextLost()?z({canvas:d,contextLost:!0,markInitFailed:!1}):z({canvas:d,errorMessage:"Failed to create WebGL framebuffers"});T.current.a=E,T.current.b=x;let I=u.createTexture();if(I){u.bindTexture(u.TEXTURE_2D,I),u.texImage2D(u.TEXTURE_2D,0,u.RGBA,1,1,0,u.RGBA,u.UNSIGNED_BYTE,new Uint8Array([128,128,128,255])),r.current=I;let _=new Image;_.crossOrigin="anonymous",_.onload=()=>{let S=a.current;!S||r.current!==I||(S.bindTexture(u.TEXTURE_2D,I),S.texImage2D(u.TEXTURE_2D,0,u.RGBA,u.RGBA,u.UNSIGNED_BYTE,_),S.generateMipmap(u.TEXTURE_2D),S.texParameteri(u.TEXTURE_2D,u.TEXTURE_MIN_FILTER,u.LINEAR_MIPMAP_LINEAR),S.texParameteri(u.TEXTURE_2D,u.TEXTURE_MAG_FILTER,u.LINEAR),S.texParameteri(u.TEXTURE_2D,u.TEXTURE_WRAP_S,u.REPEAT),S.texParameteri(u.TEXTURE_2D,u.TEXTURE_WRAP_T,u.CLAMP_TO_EDGE),i.current=!0)},_.src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAZABkAAD/4QB0RXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAABkAAAAAQAAAGQAAAABAAKgAgAEAAAAAQAAAQCgAwAEAAAAAQAAAIAAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iAdhJQ0NfUFJPRklMRQABAQAAAcgAAAAABDAAAG1udHJSR0IgWFlaIAfgAAEAAQAAAAAAAGFjc3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWRlc2MAAADwAAAAJHJYWVoAAAEUAAAAFGdYWVoAAAEoAAAAFGJYWVoAAAE8AAAAFHd0cHQAAAFQAAAAFHJUUkMAAAFkAAAAKGdUUkMAAAFkAAAAKGJUUkMAAAFkAAAAKGNwcnQAAAGMAAAAPG1sdWMAAAAAAAAAAQAAAAxlblVTAAAACAAAABwAcwBSAEcAQlhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z1hZWiAAAAAAAAD21gABAAAAANMtcGFyYQAAAAAABAAAAAJmZgAA8qcAAA1ZAAAT0AAAClsAAAAAAAAAAG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/AABEIAIABAAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2wBDAAQEBAQEBAgEBAgLCAgICw8LCwsLDxIPDw8PDxIWEhISEhISFhYWFhYWFhYbGxsbGxsfHx8fHyMjIyMjIyMjIyP/2wBDAQUGBgkICQ8ICA8kGRQZJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCT/3QAEABD/2gAMAwEAAhEDEQA/APUAR3P5U8DPQ0n3uQKeAw5FYliiNj3pwh4yzCoiX7Gm7uxagCYhAetRniqxJJ45p4YdDQBIMnvilBb1pgJ6dqdszyOlAFlYpHHy81IInHUiqPzqecinjcxyQRQBa8l88HNJ5cg6ipI4ZWXPSl3SoMNk0AQ+U/emmNuxFPM6Z5U0/wA1W+6KAKxjYdaQKKvqV9BUyrAwGBzQBleTIRkYpRbSHuK0JWROBWe05zgUAOFu3cikMYHSoDO3bn6UwSs3DUATlcU3kHHFChugH51MsUj8KCfwoAj4xx1pOvWrS2kx6rQbSXnAP60AVghPIp2188Gpfs7A98UG3f7wz+NAERVwOWpu2SpAj5wacsj9h0oAi2MOtN2NntVmSaXaRswfXFVt8x42n8qAAr9KafbFO3L0kzmjeoOAM0Af/9D0uO9QBmjQyY564AqIXY5LIc+3IFWodPiEW6MhmIBIGR9QTVCVJN3lj5cHt/jWJRaghNy+6OTb9aq3kD28nlAkN6nimTRz2wUl1cHn5f5GoxLO5II4Y5DHmgZAGkHyknPX2pjSMgJBJzxyf5VbuJDGm4ckjnA4qGOFXBZjtXg4Pf6UAEUyrCGLnce2efyrRtbkOSBIFIHAP+NYrQyBmfB2/wANRIWi5b6daAN99Rtkz5hJPb0z70q6jA4wT+vFc3qE9tFhQfmJxuzjtnoe1ee6pqUUlztjcqV+UlTwfwoA9zOpbEwuBjuDn9Kz7jWAU2lsf7XpXkkPiC4SIRKwIAxyOeKqx3OrXc4Q/MOvBxkfiaAPSJ9ZJAVZATzkAiqj69cQgqULAjP4VnJZafHH9pvFVQBlhnge9Z8+saaUJDLtjHGBj6cHGaANA+JrpmBB2jH3c1cTxdNAyqqvk1yNtr0HnFRFGwK/K5+8D9elaOmanFJKEvnDHOfmG0EHoKLhY6seITcfvHJLemaZ/bUXkbQdpB5JNY91aQxkzQZKljwP5Cqy2SyI27dvz07fnQB0sOrQbsSTAY7j0rZsJLW4kKozEeleYPZbnxnJJwAPX3NdbpdutrEpDEnGAc8Z9qAPTUW3t0Xcxk3c4bjA+g71BLrIh5jUbM9gOnvXI3N/cQ2+6XJRxtGDyCDzii2uo5h8nzRKAeTkn2OadxWO0bxJb2sP2mcqI+hyas2viXQ73DW4yTxzwT+Ga87kWOUk3MYaPsjdP/11q28Vnbxg2sKgj06gfjRcLHpatbT8ggDHI71TuEtFiLK5LDqFx+FZVhcRso80lTnHByatzSxTzboQAeFPr+vamIx5XQAlWzWTcXSxE4IJ9fSte7tn80xuwBHGF5H5isebSXj/AHj9OceuKQxsd85+Zzk/7XQ0pvvXI5xwOBWbdCVwWVcAHjFVIpCWHmH5h17/AMqQzVeeR8spIHbpViG9hEbSsc44xms6TYj+WGzkfT+dO+wB4PNJ6YOOetAH/9H22KHZaiSFxuYYYcDHv6Vz9xAqS7d2Se471oXFnd7P3QyU/hB6g+5qa1s3dTNcKVbGADx071mO5mQWzs4D/dJq/eQ2kMPykMcYB9PpUltbpubPC46+/wCNUnUStszz+dIDGWZoWKj5QDlTVFrqaGUySKAW9eQfWti7ljKruUEg44OPzrPmBlRtqfMvIB6kUDHS6uv2UQyDLHPSsySNjGDnBByMdqSZhJEAwG/kEfy6U+G1d1YSbgMcfWkM5vUvMSMzTHOe9eXX1zFJIRbpsPRlznJ65r0DxTBcRweUgDc8k+h44/xrhBZQ2sf2iIOmM4Y4OT64PY0wuVYpHBEhOAD1qzZz+XcJcZ+63P0rGMjht2Tye/NdFpdhLfLI0S/LGpYge3WmI2bzWY/sjhTu3DZgn1rjJzNjaTleuK0JkSFgsmNvU468VVdfNO7Bwfun1x2oQBaPtwD92t7TtksnznocHFYUMa79r/KM9evauh0y1i2efGwd88j+lFgudxY3YfdDPxsBLZ4OAOtU28Q2d0Gt4ZGXBO3IwMeorm9YuHgtRcOGiMnylSOSK5SJwwyD8q8/hSGeg2uo4Z1bBI5bHOP6VtaTJ9tUtjDDkKDjI9a4Dw9fzLqJgwpjmHOeoFewxraWkYKlWUDsaVh3I9pknXePlA+6eaS5sUt/3bgjnzMDIGfSrEl7al/MhBJwODx2rON7aXsmTJlgCzAHoBQI2YLq3dApQ7vXt+RrQ6qp+UZ/CqFs0cwUKBnsRj9a2AtvAN0pDMWxjofp1xxTEXtLhF1ItsDyT8pJA596276xW2uxCrbnHX0zXnE15MzFogUO7a2e47kcc1q2F7cSLiVsunGWHJA757+lMRruLqKYhjtPas+7mnkcFGwcdK1o7qF0CTHb7nsfaufcP5nJJGePekMf5kiALJkj26USpYzAErgkcsOOlF9f3un6dJcRpuYIQF77Tzx7VxvhvUdUvb2Q6ivyHoG4x9PwoA7FbLfHvhG4KMinRLO58vBDYziiCd4bp1hG4HkAdvatm1VnidpwFLcAg96BH//S9nBkmugkZJXGD6Efp36VNJcO2+DcUCAFR7+mD+VUZrz7NJsixkd/X/8AXSAT6hOyD+6OeMisxmQ15dPJ5eB68Dt6cU6KVtv7vOV5NPmWSM7Y1xzyfXtV6G1jk+WNAu4cEUgMyC3NxIF3AHr83Hv3rTBiOOieh9ar3lrIk/lqCSVxn0PpWcs0Sv5Mm5iQev8ACaYFq+tooxvhZc4wcDFY8MkvmSLjIxycn9a33sxOFO8A8Ak1RvrGK3la3hkBGeWXJBHrSAw79Le5BBRfugN15z3rxnXrG4hlYfNtRsKPRT6ete3ReRG4acZTv71W1Gzt7/DMioG4B68DpzTGfNl3LLJIZpPyq5aX0vEaEgH1q7r9lDpl/JCuJADjHTGe9Yi7GXOMUxHThGubYzDl1Hp1rZ0/TjeWoctlVOMAfrmq2janaQ2TRPGCSD9citLTLlIDhSQDzjjb9KAGyaDJEMTNzjINULWbT9NuvMckSE4X06dutbWtarqLSxmYgj7ob2H0rmdPJ+2Pc6igZSTsIHA9OtAC3t6mtXAiuXVepBY8cfTvVC6t4rSx88ybfMJ+Qr6dMEdf6V6Lb+FrHVZkulUKTnnH5Vz/AIy0naisBhYzg47/AEoQHG2GpiyuBcgbgBjPQfUCu38N+JEuLuSC4ZSjYbDYG78a86is5biVYIh14Vfc/wCNaun2JtbkrcJjZy28cD1/GhgeseMhHDZxXFhu8thk/j1Bwe1eZ2p1O9vVgsc7znp04557YrpbbxXBb/6DeBnt+gYgcZ9fatX7dp/2fzdMZUP3V4wCTwPQ0hnQ2Ms1lp0cgGZMDIHbHBwKz5PFnk6g0F0D5XB4HzZ9MngGp9MmaHC3khdm5yB/X1PpWRrt3plrOC+5gDgjgjB5z9aQHUwX8GpOZLQ5U/d3DnNaFnJIDsJI55z0NYGkCK7aO4twscbAfh/9eutFsrW7zZ4Q8YHXnr6UAbr2iBNzZ5HTtz3qqYWiCn5Suc+vFdPpsLXumB5Tlhzk9SD2/CsSdWyykBlOeO/FMRmSXUflEOo3dm9vp0xVMxwyRqUO0k42gdvUn0q0kUUgLdMc4PpTPLAcY4J6n+lIZuQadGWVkP3uTxW3HY2bRM3mMhRTheoY+/pWNZyAJ5cj8DOw/wC0fX2q59sEsojcBM8Hb0FAj//T9MljFxOWUnr0rUms5reDejbRgYIrl7TWFtRtuCSMjgcnkVpnWXubVg5wcDYKzGXJJS8Cjk+/uPWoftQhbeCRx271jLqZiUgttLnketLPeW38QOOOaQzTn1Tz3z06ZH9cViTM3nBu5PBHvUTgTMrRMNvTJq3bwyCX1dBnPtQBuWtvcSwhpBlAMA1JLalE+ZcAdT61LZ3UkMJGAwXnBrktQ8ZXcF99kuEMYEgCLn74PQ0xE1+iMwQnHGQM9RWDefbrW3l/swh5iAAHJ2gd8e9bktpK7B9nJ/eLg/dyeR+lVvInfcsQGRznpSGebeKtF8y1S4jx5u0NIVyBuxz17ZrzSOFxFhlPXIbsfXmvo66sruK1ZZQG3/eBGQD7Zrh20ZJZRjaka9AeAO5NMDy2FdqhuQAfz9a6J9kFkJ1cbnbbtX+Zq1qd7pAjFpEN5V8nAIHPcGn2OmJAd14BINoZUJ7n+lMRPHLEdOaVPnKHJB5NdhajTLmxV1jxGQOOvP4+teevJJaBrf7pbKNtx/Ou48MwSSWX2iVsLjGBngDvz60hnWWKwiBkDhdoyPX6VpwWcE8Lm4QvwdgxwT3rHhEKbCdzZ6gDFaMU8kRBf7q9Ae9IRwg0s2es/bZYhD1K44A7ZqbW9Nku7DzYCJFwCcHkd+faux8Tqbyy860+VgD5nYfQVyWkrc2kElvPEQXA8vceGx1pjPLxZPJceWy8jr+Fej6XoE0NsLomMq5wqE5I96S7t45WWCKHG/AEmOnrmtL7JeWDxxNjGOcc5PfnpQBNBA6rnaOP/wBXSsa70CSW+WR4w6NjPbn/AOtXQ2SNKf3nBBAB9B61uRfZow0bvufjHHGPrSAy4bL7LAIyPkUbgAf84q7bSSTwGNGwPTPpVxoUvSBbnnONvrzWK8kUKvCQd/QYOKBnbeFdVjgne3u5PlxxUuqX6PcGWIDA44/nXLWtmRbiXcNzEj6Cn/a4prx7BCTLGhdhtONvAzn8aCS698SohwDQlyQyhyAqtzj0rOwPNV5Bt46j26U590UaTngvklRzgCgZu3UEd9D9pQFIw3y9j7UtoclGd84ODn+tY8eog4gQ/wD1h64qW9vfKh8lGXaCNrD7x9d2ffpQB//Uha/dIWBAyT0znp3zV2K+kazMjt90Y5NZv2FEtWEj5IXo3f2zVGFUi0zygDlGBwPQdqxLNwTSuVEfIGCc9f1rsLLy5Ysy4feDkDsa8wtphPdNeKkiHABBPy4HsD1rrNMvpYpQxPHUgdPSgLHUTpDbRGa2B2njp+dUzdTyMXLcHimy3akAAgw/1qE7G3FOMU7isdHY3cSR4Y81mmO1vrz7RdRxOEO4HYdynt1rHD7ejcVet7luYlOCeo9aAsdDPOhi+QbeMcd658S+XICg5zxnmpy0u0Kx6fyqB49i5P3X5/GgDVvtcmuYFjkCr5Y7cZ96yLuyiubYyROA2CHzg57dDUcwitLaSQ/vFIBBI5GOwrLjl+0Q+bKdqt1+XBH9aLgecz+GZZrgIMbT0OOvrWgtrCZhBC/+rIG5sndkcqPpXdWGnwGPEbkqTkZzkc9BV2CxjSbcqxnOexB+vemBwl34J1Dz87iVcgjHcevNei6D4PnsbMiQtIMjJHYe9dXp1qmxVPzZbAB46/yrfaVdrwvhTnBA5HFAjjJ7OCGT7Rt3ArgL0/Ks5bd5yZbgFUToP5V09zECCydF5+bp+VYUiRsgLuCWOOD0/CkMZPOrIscyjaBwo9feqIhBIuDjBBwOuP8ACppEiSTy13Oeh9PwxVmK1ZwBGeB2HX3oA0rPSLe9tTNwAuPTOe2KgvNIELLbSJgkZyey1HJeSafBhMu2eM9qyrnUZbqTzG3MSMdc9P5UAVLi3IudkAypOMD2qSeS2VBJEQsijkHnpwao3GoLbjefkJ4AYZzn0rlroySL50y4ZT8rA+2frzSGdHBqSyqZLZ+Aeo7Gqduly0rNIDM5J24PT/Gudtne5jLgksOuM8//AF66PTLnyJ8qDg4AByeT9aANuGO5ZNzuYyP4SO/XirUd08cTc5Vhg49RS3UxYBs8sOMfrWcy74QAASQRnOKLisawlikO8yhUx8zN2qnBdwXLC3RtwJ+929KbZaZLqdrJCnzooO72zwahisILC2KoQ204XGcj8+tMDPutStbHfFcEb87R1yQfTAqOS4XcVdQQB1ycAnvVG/kW4nG7JIx7ep6entTJ4VmiVUchjywBxx7d6LhY/9VJ3W6Kxr8pUHPPBx9axpV2wF3AGTjg8f5NdZNpuYQMAM/Uf/qpTpURsyFXJB9OKxNDiYUjEu1Mn6Vpxl1GR0HcHrWimkuCPLQ4P4VchsGg+eVDx0+tAxYrxGRQwGe4HetmNYg6yEjkZHqPY1lLZu7iRc1rJbuq7SCR60CJEiR8Lnn36CmSAq2yMKeeo6gd8Vowo6jYq5A7mphaRSOxA4XqcUCKEgkb5iSe2Cc1KAiwHglqufZj0HOcEZPI/GtKKCIoRjB75FAjkY1Z3IPyjvxmszUYDCpbBwfQYye1egLp0BIIY/SpGtI5P3Zj3Y78dKdgucJZRkKsnpjj+lblvHJNLnGB6ntWtPZx42ABQP7oH86kt7ZPLMeMf1+tAF6w2hSjEsg5LY6n/CrbTxIHUKDgcc/zqxZ2yC3KuQc44HpVW/hIYLAQFP5/jimSZ93LE8S9yRyMn8qwDbxM5ES7efWt5opEGTz+HH5VHLCUX5EAU9D9e9IZkIrW7HDYJ6fWrf2iW2BYsAWHBxStavjenT3FAtGkYB+MdD1oGYk4LzBrjcU7kHr9KqXLrDAPs8W45+8Tz+Vdf/ZJfAYg56CobizmiBVMEdsdqQHlGsTTrcp5m4qvzAkYU8cj35pdt9JceaMCJgOMEH1xzXpt1ZW8tuqyxrI6Hdn0/WuXvbS7kkCkM69if4fp3/KgZlCyRmWVcEnOVHA2/j/SrcVvFMcxAgKCBznH9DV+PQpZ4d0n3R8uC2fzB5/GrltpU9rJlJDIuO/IoAq2tvKUZ5I9wX1zxx7d6ikec/Jjan3vX2rr9NmntcsEUqx5Mg3D8qTVdMkZVuRt2HjKj+X/ANegLnM7H8tQjAcHp79qzGSRnKzg8fwgnH/666NbcxKfKRj6Fhz+dUJYLi6ZowG3nkn1P1oA5+eKBZRcSbBIRt+U7jj39DWeqk3ZdxuzyMjP61rS6GYiZpIzlxyDnj1x/wDrq1FZukJSBQnselAz/9b0o2jN8xaoZ7cLgE9eeK1fJc8bc054JD/BWJZjrbnpxUnljO09KvtbyHHy/pSGGYcBaAKWyJRwPyFMx6Zq+YG/uH8qPJJ42H8qAKwQuMck1KEkU8jH1FTCGRfuqfyNKY58520AMXOeTj6UpJXlSc0FJP7lO2SY+7QBNHdNHx14xzQ8xcj+QqHy5M5CU0pJ0xQA7gnBJNAWTPXApojkqQIR97NAFhfMUD5qP3hPbBquQxOQDT18wHjNAEwtmPJOakMLnHPSoC7Be9O+0MBhQ35UAPMORnPIqJkYnnOKDNIeMH8qZh2GDmgBCWH3CRVciVyScmrGxsYCZ/OmhJgfu4oArmEvxnn3pHtXPIq7sk/u0bZP4hmgDIktmAwCTTxEQowea0jHnquKhMGTwpIoAriNjyPzqU71Xb94elPMD54WgRygcjNAEId8bPuimBFJzzmrDRyN/CfwpFidf4TQA9RvXYfzqm9qoyODV8L/ALJpfKJOQMUAf//Z"}let P=new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),L=u.createBuffer();if(!L)return u.isContextLost()?z({canvas:d,contextLost:!0,markInitFailed:!1}):z({canvas:d,errorMessage:"Failed to create WebGL buffer"});h.current=L,u.bindBuffer(u.ARRAY_BUFFER,L),u.bufferData(u.ARRAY_BUFFER,P,u.STATIC_DRAW);for(let _ of Object.values(w.current)){if(!_)continue;let S=u.getAttribLocation(_,"a_position");S>=0&&(u.enableVertexAttribArray(S),u.vertexAttribPointer(S,2,u.FLOAT,!1,0,0))}return s.current=performance.now(),!0},[G,z]),F=N(()=>{let d=a.current,u=t.current,y=w.current,g=T.current,m=k.current;if(R.current||!p.current){b.current=!1,n.current=0;return}if(!d||!u||!g.a||!g.b){b.current=!1;return}let E=m.dpr??window.devicePixelRatio,x=Math.max(1,Math.floor(u.clientWidth*E)),I=Math.max(1,Math.floor(u.clientHeight*E));(u.width!==x||u.height!==I)&&(u.width=x,u.height=I,fe(d,g.a,x,I),fe(d,g.b,x,I));let P=(performance.now()-s.current)/1e3,L=(ne,$e)=>Q(d,ne,$e);m.layers.lightning&&m.lightning.enabled&&m.lightning.autoMode&&P>=l.current&&(c.current=P,o.current=Math.random(),l.current=P+m.lightning.autoInterval*(.5+Math.random()));let _=g.a,S=g.b,X=()=>{let ne=_;_=S,S=ne};m.layers.celestial&&y.celestial?(be({gl:d,program:y.celestial,target:S,displayWidth:x,displayHeight:I,time:P,params:m.celestial,moonTexture:r.current,moonTextureLoaded:i.current,getUniformLocation:L}),X()):(ve(d,S,x,I),X()),m.layers.clouds&&y.cloud&&(we({gl:d,program:y.cloud,target:S,sceneTexture:_.texture,displayWidth:x,displayHeight:I,time:P,params:m.cloud,celestial:m.celestial,getUniformLocation:L}),X()),m.layers.rain&&y.rain&&(xe({gl:d,program:y.rain,target:S,sceneTexture:_.texture,displayWidth:x,displayHeight:I,time:P,params:m.rain,interactions:m.interactions,getUniformLocation:L}),X()),Ie(m.layers,m.lightning,y.lightning,P,c.current)&&y.lightning&&(Re({gl:d,program:y.lightning,target:S,sceneTexture:_.texture,displayWidth:x,displayHeight:I,time:P,params:m.lightning,interactions:m.interactions,lastFlashTime:c.current,strikeSeed:o.current,getUniformLocation:L}),X()),m.layers.snow&&y.snow&&(ke({gl:d,program:y.snow,target:S,sceneTexture:_.texture,displayWidth:x,displayHeight:I,time:P,params:m.snow,getUniformLocation:L}),X()),y.composite&&_e({gl:d,program:y.composite,sceneTexture:_.texture,displayWidth:x,displayHeight:I,time:P,celestial:m.celestial,interactions:m.interactions,post:m.post,lastFlashTime:c.current,strikeSeed:o.current,getUniformLocation:L}),p.current&&!R.current?(b.current=!0,n.current=requestAnimationFrame(F)):(b.current=!1,n.current=0)},[Q]);return Ke(()=>{let d=t.current;if(!d)return;let u=m=>{m.preventDefault(),R.current=!0,G()},y=()=>{R.current=!1,C.current=!1,V()&&p.current&&(b.current=!0,F())};d.addEventListener("webglcontextlost",u,{passive:!1}),d.addEventListener("webglcontextrestored",y);let g=typeof IntersectionObserver<"u"?new IntersectionObserver(m=>{let x=!!m[0]?.isIntersecting;if(p.current=x,!x){U(),G(),$(d);return}!b.current&&!R.current&&(a.current&&T.current.a&&T.current.b||V())&&(b.current=!0,F())},{threshold:0}):null;return g?g.observe(d):p.current=!0,!g&&V()&&p.current&&(b.current=!0,F()),()=>{g?.disconnect(),d.removeEventListener("webglcontextlost",u),d.removeEventListener("webglcontextrestored",y),G(),$(d)}},[G,V,$,F,U]),t}var De={celestial:!0,clouds:!0,rain:!1,lightning:!1,snow:!1},Te={timeOfDay:.5,moonPhase:.5,starDensity:.5,celestialX:.74,celestialY:.78,sunSize:.14,moonSize:.17,sunGlowIntensity:3.05,sunGlowSize:.3,sunRayCount:6,sunRayLength:3,sunRayIntensity:.1,sunRayShimmer:1,sunRayShimmerSpeed:1,moonGlowIntensity:3.45,moonGlowSize:.94,skyBrightness:1,skySaturation:1,skyContrast:1},Pe={coverage:.5,density:.7,softness:.5,cloudScale:1,windSpeed:.3,windAngle:0,turbulence:.3,lightIntensity:1,ambientDarkness:.2,backlightIntensity:.5,numLayers:3},ze={glassIntensity:.5,glassZoom:1,fallingIntensity:.6,fallingSpeed:2,fallingAngle:.1,fallingStreakLength:1,fallingLayers:4},Ee={enabled:!1,autoMode:!0,autoInterval:8,flashIntensity:1,branchDensity:.5},Ae={intensity:.5,layers:4,fallSpeed:.6,windSpeed:.3,windAngle:.2,turbulence:.3,drift:.5,flutter:.5,windShear:.5,flakeSize:1,sizeVariation:.5,opacity:.5,glowAmount:.25,sparkle:.25},Ge={rainRefractionStrength:1,lightningSceneIllumination:.6},Le={enabled:!0,haze:0,hazeHorizon:.8,hazeDesaturation:.35,hazeContrast:.6,bloomIntensity:0,bloomThreshold:.82,bloomKnee:.35,bloomRadius:1.2,bloomTapScale:1,exposureIntensity:0,exposureDesaturation:.25,exposureRecovery:1,godRayIntensity:0,godRayDecay:.965,godRayDensity:.9,godRayWeight:.35,godRaySamples:16};function M(e,t){if(!t)return{...e};let a={...e};for(let n of Object.keys(t)){let s=t[n];s!==void 0&&(a[n]=s)}return a}function We(e){return{layers:M(De,e.layers),celestial:M(Te,e.celestial),cloud:M(Pe,e.cloud),rain:M(ze,e.rain),lightning:M(Ee,e.lightning),snow:M(Ae,e.snow),interactions:M(Ge,e.interactions),post:M(Le,e.post),dpr:e.dpr}}import{jsx as qe}from"react/jsx-runtime";function Fe({className:e,dpr:t,layers:a,celestial:n,cloud:s,rain:c,lightning:l,snow:o,interactions:r,post:i}){let h=Ce(We({dpr:t,layers:a,celestial:n,cloud:s,rain:c,lightning:l,snow:o,interactions:r,post:i}));return qe("canvas",{ref:h,className:e,style:{width:"100%",height:"100%"}})}var de={clear:{dawn:{celestial:{celestialX:.69,skyBrightness:1,starDensity:.36,sunGlowIntensity:3.47,sunGlowSize:.49,sunRayCount:4,sunRayShimmer:5,sunRayShimmerSpeed:5},glass:{blur:4.5,brightness:.95}},dusk:{celestial:{celestialX:.69,skyBrightness:1,starDensity:.36,sunGlowIntensity:3.84,sunGlowSize:.43,sunRayCount:4,sunRayIntensity:.24,sunRayLength:1.37},glass:{brightness:.9}},midnight:{celestial:{celestialY:.71,moonGlowIntensity:3.23,moonPhase:.51,skyBrightness:.44,skyContrast:1,skySaturation:2,starDensity:1.72,sunGlowIntensity:1.59}},noon:{celestial:{celestialY:.71,moonPhase:.2421,skyBrightness:.8,skySaturation:1.9,starDensity:.14,sunGlowIntensity:1.72,sunGlowSize:.69,sunRayCount:4,sunRayIntensity:.19,sunRayShimmer:5,sunRayShimmerSpeed:5},glass:{brightness:1}}},cloudy:{dawn:{celestial:{celestialX:.69,celestialY:.74,skyBrightness:1,skyContrast:1.1,skySaturation:.88,starDensity:.36,sunGlowIntensity:2.4,sunGlowSize:.38,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:1,backlightIntensity:1.07,cloudScale:1.73,coverage:.81,density:1.1,lightIntensity:.67,numLayers:1,softness:.42,windSpeed:.04},glass:{blur:3,brightness:.95},post:{bloomIntensity:.99,bloomKnee:.58,bloomRadius:5.5,bloomTapScale:1.39,bloomThreshold:.78,exposureIntensity:1.14,exposureRecovery:1.95,godRayDecay:.857,godRayDensity:.79,godRayIntensity:1.08,godRaySamples:121,godRayWeight:.42}},dusk:{celestial:{celestialX:.69,celestialY:.74,skyContrast:.99,skySaturation:1.38,starDensity:.11,sunGlowIntensity:3.21,sunGlowSize:.47,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:.54,backlightIntensity:.78,cloudScale:1.73,coverage:.81,density:.9,lightIntensity:.78,numLayers:1,softness:.42,windSpeed:.04},glass:{brightness:.9},post:{bloomIntensity:1.11,bloomKnee:.58,bloomRadius:5.5,bloomTapScale:1.39,bloomThreshold:.78,exposureIntensity:1.14,exposureRecovery:1.95,godRayDecay:.857,godRayDensity:.79,godRayIntensity:1.08,godRaySamples:121,godRayWeight:.42}},midnight:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,starDensity:1.72,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{cloudScale:1.73,coverage:.81,density:1.02,numLayers:1,softness:.42,windSpeed:.04},post:{bloomIntensity:1.11,bloomKnee:.58,bloomRadius:5.5,bloomTapScale:1.39,bloomThreshold:.78,exposureIntensity:1.14,exposureRecovery:1.95,godRayDecay:.857,godRayDensity:.79,godRayIntensity:1.08,godRaySamples:121,godRayWeight:.42}},noon:{celestial:{celestialX:.74,celestialY:.71,moonPhase:.2421,skyBrightness:.84,skyContrast:1.31,skySaturation:1.44,starDensity:.14,sunGlowIntensity:1.35,sunGlowSize:.61,sunRayCount:4,sunRayIntensity:.22,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:0,backlightIntensity:.45,cloudScale:1.73,coverage:.81,density:1.06,lightIntensity:.44,numLayers:1,softness:.42,windSpeed:.04},glass:{brightness:1},post:{bloomIntensity:.42,bloomKnee:.58,bloomRadius:5.5,bloomTapScale:1.39,bloomThreshold:.76,exposureIntensity:1.14,exposureRecovery:1.95,godRayDecay:.884,godRayDensity:.79,godRayIntensity:1.33,godRaySamples:121,godRayWeight:.42}}},drizzle:{dawn:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.96,skyContrast:.84,skySaturation:.94,starDensity:1.72},cloud:{ambientDarkness:.7,backlightIntensity:.82,cloudScale:1.21,coverage:.61,density:.98,lightIntensity:0,numLayers:1,softness:.17,turbulence:.16,windSpeed:.02},glass:{brightness:.95},rain:{fallingAngle:.02,fallingIntensity:.13,fallingSpeed:2.24,fallingStreakLength:.32,glassIntensity:.29,glassZoom:.65}},dusk:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.77,skyContrast:.84,skySaturation:.85,starDensity:1.72,sunGlowIntensity:2.73,sunRayLength:1.45},cloud:{ambientDarkness:.7,backlightIntensity:.82,cloudScale:1.21,coverage:.61,density:.98,lightIntensity:0,numLayers:1,softness:.17,turbulence:.16,windSpeed:.02},glass:{brightness:.9},rain:{fallingAngle:.02,fallingIntensity:.13,fallingSpeed:2.24,fallingStreakLength:.32,glassIntensity:.29,glassZoom:.65}},midnight:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.77,skyContrast:.84,skySaturation:.85,starDensity:1.72,sunGlowIntensity:2.73,sunRayLength:1.45},cloud:{ambientDarkness:.7,backlightIntensity:.82,cloudScale:1.21,coverage:.61,density:.98,lightIntensity:0,numLayers:1,softness:.17,turbulence:.16,windSpeed:.02},rain:{fallingAngle:.02,fallingIntensity:.13,fallingSpeed:2.24,fallingStreakLength:.32,glassIntensity:.2,glassZoom:.5}},noon:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.77,skyContrast:.84,skySaturation:.85,starDensity:1.72,sunGlowIntensity:2.73,sunRayLength:1.45},cloud:{ambientDarkness:.7,backlightIntensity:.82,cloudScale:1.21,coverage:.61,density:.98,lightIntensity:0,numLayers:1,softness:.17,turbulence:.16,windSpeed:.02},glass:{brightness:1},rain:{fallingAngle:.02,fallingIntensity:.13,fallingSpeed:2.24,fallingStreakLength:.32,glassIntensity:.29,glassZoom:.65}}},fog:{dawn:{celestial:{celestialY:.71,skyBrightness:1.05,skyContrast:.41,skySaturation:1.25,starDensity:.11,sunGlowIntensity:2.42,sunGlowSize:.38,sunRayIntensity:.05,sunRayLength:1.59},cloud:{ambientDarkness:1,backlightIntensity:.54,cloudScale:.64,density:1.5,numLayers:6,softness:.77,turbulence:.67,windSpeed:.02},glass:{brightness:.95}},dusk:{celestial:{celestialY:.71,skyBrightness:1.02,skyContrast:.62,skySaturation:.88,starDensity:.11,sunGlowIntensity:2.42,sunGlowSize:.38,sunRayIntensity:.05,sunRayLength:1.59},cloud:{ambientDarkness:0,backlightIntensity:.54,cloudScale:.93,numLayers:6,softness:.5,turbulence:1,windSpeed:.03},glass:{brightness:.9}},midnight:{celestial:{celestialY:.71,moonGlowIntensity:2.74,moonGlowSize:1.43,moonPhase:.5,skyBrightness:1.02,skyContrast:.62,skySaturation:.88,starDensity:.11,sunGlowIntensity:2.42,sunGlowSize:.38,sunRayIntensity:.05,sunRayLength:1.59},cloud:{ambientDarkness:0,backlightIntensity:1.4,cloudScale:.91,density:1.27,lightIntensity:2,numLayers:6,softness:.63,turbulence:.86,windSpeed:.03}},noon:{celestial:{celestialY:.71,skyBrightness:.76,skyContrast:.47,skySaturation:.6,starDensity:.11,sunGlowIntensity:.92,sunGlowSize:.84,sunRayCount:0,sunRayIntensity:0,sunRayLength:0},cloud:{ambientDarkness:1,backlightIntensity:.72,cloudScale:.83,density:1.5,numLayers:6,softness:.84,turbulence:.86,windSpeed:.03},glass:{brightness:1}}},hail:{dawn:{celestial:{celestialX:.69,celestialY:.74,skyBrightness:.42,skySaturation:.74,starDensity:.36,sunGlowIntensity:5,sunGlowSize:.36,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:.75,backlightIntensity:.64,density:.83,lightIntensity:.55,numLayers:1,turbulence:.55,windAngle:-3.14,windSpeed:.14},glass:{brightness:.95},interactions:{rainRefractionStrength:.96},post:{bloomIntensity:.13,bloomThreshold:.64,godRayIntensity:.56,haze:.11,hazeHorizon:1},rain:{fallingIntensity:.42,fallingLayers:1,fallingSpeed:3,fallingStreakLength:.56,glassIntensity:1,glassZoom:.69},snow:{drift:.63,fallSpeed:8,flakeSize:.77,flutter:.79,glowAmount:.29,intensity:.81,layers:8,opacity:1,sizeVariation:.48,sparkle:.44,turbulence:.91,windAngle:2.23,windShear:.78,windSpeed:.99}},dusk:{celestial:{celestialX:.69,celestialY:.74,skyBrightness:.47,skyContrast:1.39,skySaturation:1.42,starDensity:.11,sunGlowIntensity:3.21,sunGlowSize:.51,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:.75,backlightIntensity:.64,density:.83,lightIntensity:.79,numLayers:1,turbulence:.55,windAngle:-3.14,windSpeed:.14},glass:{brightness:.9},interactions:{rainRefractionStrength:.96},post:{bloomIntensity:.13,bloomThreshold:.64,godRayIntensity:.56,haze:.15,hazeHorizon:1},rain:{fallingIntensity:.42,fallingLayers:1,fallingSpeed:3,fallingStreakLength:.56,glassIntensity:.72,glassZoom:.69},snow:{drift:.63,fallSpeed:8,flakeSize:.77,flutter:.79,glowAmount:.71,intensity:.47,layers:8,opacity:1,sizeVariation:.77,sparkle:.1,turbulence:.91,windAngle:2.23,windShear:.78,windSpeed:1}},midnight:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.42,skySaturation:.74,starDensity:1.72,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:.75,backlightIntensity:.64,density:.83,lightIntensity:1.21,numLayers:1,turbulence:.55,windAngle:-3.14,windSpeed:.14},interactions:{rainRefractionStrength:.96},post:{bloomIntensity:.13,bloomThreshold:.64,godRayIntensity:.56,haze:.14,hazeHorizon:1},rain:{fallingIntensity:.42,fallingLayers:1,fallingSpeed:3,fallingStreakLength:.56,glassIntensity:.72,glassZoom:.69},snow:{drift:.63,fallSpeed:8,flakeSize:.77,flutter:.79,glowAmount:.71,intensity:.47,layers:8,opacity:1,sizeVariation:.85,sparkle:.1,turbulence:.87,windAngle:2.23,windShear:.78,windSpeed:1.11}},noon:{celestial:{celestialX:.74,celestialY:.71,moonPhase:.2421,skyBrightness:.56,skyContrast:1.03,skySaturation:.62,starDensity:.14,sunGlowIntensity:2.5,sunGlowSize:.54,sunRayCount:3,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:1,backlightIntensity:.21,coverage:.74,density:.95,lightIntensity:.6,numLayers:1,softness:.36,turbulence:.55,windAngle:-3.14,windSpeed:.14},glass:{brightness:1},interactions:{rainRefractionStrength:.96},post:{bloomIntensity:.13,bloomThreshold:.64,godRayIntensity:.56,haze:.23,hazeHorizon:1},rain:{fallingIntensity:.42,fallingLayers:1,fallingSpeed:3,fallingStreakLength:.56,glassIntensity:.72,glassZoom:.69},snow:{drift:.63,fallSpeed:8,flakeSize:.77,flutter:.79,glowAmount:.71,intensity:.8,layers:8,opacity:1,sizeVariation:.77,sparkle:.1,turbulence:.91,windAngle:2.23,windShear:.78,windSpeed:.89}}},"heavy-rain":{dawn:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.3776,skyBrightness:.87,skySaturation:.56,starDensity:1.72,sunGlowIntensity:3.75,sunGlowSize:.43},cloud:{ambientDarkness:1,backlightIntensity:1.35,cloudScale:1.52,coverage:.53,density:1.17,lightIntensity:.06,numLayers:1,softness:.25,turbulence:.45,windSpeed:.05},glass:{brightness:.95},interactions:{rainRefractionStrength:1},post:{bloomIntensity:.36,godRayDecay:.838,godRayDensity:.56,godRayIntensity:1.11,godRaySamples:35,godRayWeight:.66,haze:.14,hazeHorizon:1},rain:{fallingAngle:.3,fallingLayers:6,fallingSpeed:3,fallingStreakLength:2,glassIntensity:.98,glassZoom:.58}},dusk:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.4115,moonSize:.17,skyBrightness:.96,skyContrast:.99,skySaturation:.72,starDensity:1.72,sunGlowIntensity:4.15,sunGlowSize:.35,sunRayCount:6,sunRayIntensity:.1,sunRayLength:3,sunSize:.14},cloud:{ambientDarkness:1,backlightIntensity:1.8,cloudScale:2.02,coverage:.72,density:.94,lightIntensity:0,numLayers:1,softness:.17,turbulence:.51,windAngle:0,windSpeed:.05},glass:{brightness:.9},interactions:{rainRefractionStrength:1},post:{bloomIntensity:.28,godRayWeight:.55,haze:.21,hazeHorizon:1},rain:{fallingAngle:.3,fallingIntensity:1,fallingLayers:6,fallingSpeed:3,fallingStreakLength:2,glassIntensity:.98,glassZoom:.58}},midnight:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.3776,moonSize:.17,skyBrightness:1.11,skyContrast:1,skySaturation:.78,starDensity:1.72,sunGlowIntensity:3.05,sunGlowSize:.3,sunRayCount:6,sunRayIntensity:.1,sunRayLength:3,sunSize:.14},cloud:{ambientDarkness:1,backlightIntensity:.81,cloudScale:2.16,coverage:.72,density:1.5,lightIntensity:0,numLayers:1,softness:.37,turbulence:.55,windAngle:0,windSpeed:.05},glass:{blur:1,brightness:1.15},interactions:{rainRefractionStrength:1},rain:{fallingAngle:.3,fallingIntensity:1,fallingLayers:6,fallingSpeed:3,fallingStreakLength:2,glassIntensity:.98,glassZoom:.58}},noon:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.3776,skyBrightness:.81,skyContrast:.54,skySaturation:.36,starDensity:1.68,sunGlowIntensity:3.7,sunGlowSize:.22,sunRayCount:0,sunRayIntensity:0,sunRayLength:0},cloud:{ambientDarkness:1,backlightIntensity:.59,cloudScale:1.8,coverage:.58,density:.87,lightIntensity:0,numLayers:1,softness:.2,turbulence:.24,windSpeed:.05},glass:{brightness:1},interactions:{rainRefractionStrength:1},post:{godRayIntensity:1.24,godRaySamples:0,godRayWeight:.6},rain:{fallingAngle:.3,fallingSpeed:3,glassIntensity:.98,glassZoom:.58}}},overcast:{dawn:{celestial:{celestialY:.71,moonGlowIntensity:1.91,moonGlowSize:.32,moonPhase:.5,skyBrightness:1.36,skyContrast:.73,skySaturation:1.6,starDensity:.11,sunGlowIntensity:5.1,sunGlowSize:.27,sunRayCount:6,sunRayIntensity:.05,sunRayLength:.6},cloud:{ambientDarkness:0,backlightIntensity:1.41,cloudScale:1.9,density:.3,lightIntensity:.75,numLayers:8,softness:.77,turbulence:.66,windSpeed:.04},glass:{brightness:.95},post:{bloomThreshold:.81,godRayIntensity:.32,godRayWeight:.3,haze:.15,hazeContrast:0,hazeHorizon:1}},dusk:{celestial:{celestialY:.71,moonGlowIntensity:1.91,moonGlowSize:.32,moonPhase:.5,skyBrightness:1.12,skyContrast:.83,skySaturation:2,starDensity:.11,sunGlowIntensity:4.15,sunGlowSize:.28,sunRayCount:6,sunRayIntensity:.05,sunRayLength:.6},cloud:{ambientDarkness:0,backlightIntensity:1.41,cloudScale:1.9,density:.3,lightIntensity:.78,numLayers:8,softness:.77,turbulence:.66,windSpeed:.04},glass:{brightness:.9},post:{bloomThreshold:.81,godRayIntensity:.32,godRayWeight:.3,haze:.15,hazeContrast:0,hazeHorizon:1}},midnight:{celestial:{celestialY:.71,moonGlowIntensity:2.75,moonGlowSize:1.54,moonPhase:.5,skyBrightness:1.58,skyContrast:.84,skySaturation:1.15,starDensity:.11,sunGlowIntensity:2.42,sunGlowSize:.38,sunRayCount:6,sunRayIntensity:.05,sunRayLength:1.59},cloud:{ambientDarkness:0,backlightIntensity:1.41,cloudScale:1.9,coverage:.9,density:1.16,lightIntensity:0,numLayers:8,softness:.87,turbulence:.66,windSpeed:.04},post:{bloomThreshold:.81,godRayIntensity:.02,godRayWeight:.15,haze:.35,hazeContrast:0,hazeHorizon:.96}},noon:{celestial:{celestialY:.71,moonGlowIntensity:1.91,moonGlowSize:.32,moonPhase:.5,skyBrightness:1.16,skyContrast:.53,skySaturation:.88,starDensity:.11,sunGlowIntensity:5.2,sunGlowSize:.38,sunRayCount:6,sunRayIntensity:.05,sunRayLength:1.59},cloud:{ambientDarkness:0,backlightIntensity:.9,cloudScale:1.9,coverage:.95,density:.3,lightIntensity:.08,numLayers:8,softness:.77,turbulence:.66,windSpeed:.04},glass:{brightness:1},post:{bloomThreshold:.81,godRayIntensity:.12,godRayWeight:.2,haze:.15,hazeContrast:0,hazeHorizon:1}}},"partly-cloudy":{dawn:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.5,starDensity:1.72,sunGlowIntensity:3.89,sunGlowSize:.38,sunRayCount:4,sunRayIntensity:.17},cloud:{ambientDarkness:.42,coverage:.37,density:1.24,lightIntensity:1.42,softness:.28,windSpeed:.01},glass:{blur:3,brightness:.95}},dusk:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.5,starDensity:1.72,sunGlowIntensity:3.89,sunGlowSize:.38,sunRayCount:4,sunRayIntensity:.17},cloud:{ambientDarkness:.42,cloudScale:1.68,coverage:.37,density:1.24,lightIntensity:1.42,softness:.26,windSpeed:.01},glass:{brightness:.9}},midnight:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.5,starDensity:1.72},cloud:{ambientDarkness:.42,backlightIntensity:1.23,cloudScale:1.11,coverage:.37,density:1.24,lightIntensity:1.42,numLayers:5,softness:.21,turbulence:.18,windSpeed:.01}},noon:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.5,starDensity:1.72},cloud:{ambientDarkness:.42,backlightIntensity:0,cloudScale:1.86,coverage:.48,density:1.71,lightIntensity:.67,numLayers:2,softness:.41,windSpeed:.01},glass:{brightness:1}}},rain:{dawn:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.96,skyContrast:.84,skySaturation:.94,starDensity:1.72},cloud:{ambientDarkness:.7,backlightIntensity:.82,cloudScale:1.13,coverage:.72,density:.94,lightIntensity:0,numLayers:1,softness:.17,turbulence:.34,windSpeed:.05},glass:{brightness:.95},interactions:{rainRefractionStrength:.76},rain:{fallingAngle:0,fallingIntensity:.84,fallingLayers:4,fallingSpeed:3,fallingStreakLength:.54,glassIntensity:.38,glassZoom:.5}},dusk:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.4115,moonSize:.17,skyBrightness:.96,skyContrast:.84,skySaturation:.94,starDensity:1.72,sunGlowIntensity:3.05,sunGlowSize:.3,sunRayCount:6,sunRayIntensity:.1,sunRayLength:3,sunSize:.14},cloud:{ambientDarkness:1,backlightIntensity:.82,cloudScale:1.13,coverage:.72,density:.94,lightIntensity:0,numLayers:1,softness:.17,turbulence:.34,windAngle:0,windSpeed:.05},glass:{brightness:.9},interactions:{rainRefractionStrength:.76},lightning:{enabled:!0},rain:{fallingAngle:0,fallingIntensity:.84,fallingLayers:5,fallingSpeed:3,fallingStreakLength:.54,glassIntensity:.38,glassZoom:.5}},midnight:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.3776,moonSize:.17,skyBrightness:1.11,skyContrast:1,skySaturation:.78,starDensity:1.72,sunGlowIntensity:3.05,sunGlowSize:.3,sunRayCount:6,sunRayIntensity:.1,sunRayLength:3,sunSize:.14},cloud:{ambientDarkness:1,backlightIntensity:.77,cloudScale:1.13,coverage:.72,density:1,lightIntensity:0,numLayers:1,softness:.23,turbulence:.34,windAngle:0,windSpeed:.05},interactions:{rainRefractionStrength:.76},rain:{fallingAngle:0,fallingIntensity:.84,fallingLayers:5,fallingSpeed:3,fallingStreakLength:.54,glassIntensity:.38,glassZoom:.5}},noon:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.3776,moonSize:.17,skyBrightness:1.12,skyContrast:.49,skySaturation:.59,starDensity:1.72,sunGlowIntensity:3.05,sunGlowSize:.22,sunRayCount:0,sunRayIntensity:0,sunRayLength:0,sunSize:.14},cloud:{ambientDarkness:1,backlightIntensity:.59,cloudScale:1.13,coverage:.79,density:1.08,lightIntensity:0,numLayers:1,softness:.23,turbulence:.34,windAngle:0,windSpeed:.05},glass:{brightness:1},interactions:{rainRefractionStrength:.76},lightning:{enabled:!0},rain:{fallingAngle:0,fallingIntensity:.84,fallingLayers:5,fallingSpeed:3,fallingStreakLength:.54,glassIntensity:.38,glassZoom:.5}}},sleet:{dawn:{celestial:{celestialX:.69,celestialY:.74,skyBrightness:.82,starDensity:.36,sunGlowIntensity:5},cloud:{ambientDarkness:1,backlightIntensity:1.27,turbulence:.56,windSpeed:.03},glass:{brightness:.95},rain:{fallingAngle:.31,fallingIntensity:.22,fallingSpeed:2.07,fallingStreakLength:2,glassIntensity:.41,glassZoom:.85},snow:{drift:1,fallSpeed:8,flakeSize:.85,flutter:.98,glowAmount:.09,intensity:.34,layers:8,opacity:.78,sizeVariation:1,sparkle:.48,turbulence:.92,windAngle:1.76,windShear:1,windSpeed:1.8}},dusk:{celestial:{celestialX:.69,celestialY:.74,starDensity:.36,sunGlowIntensity:5},cloud:{turbulence:.56,windSpeed:.03},glass:{brightness:.9},lightning:{enabled:!0},rain:{fallingAngle:.31,fallingIntensity:.22,fallingSpeed:2.07,fallingStreakLength:2,glassIntensity:.41,glassZoom:.85},snow:{drift:1,fallSpeed:8,flakeSize:.85,flutter:.98,glowAmount:.09,intensity:.34,layers:8,opacity:.78,sizeVariation:1,sparkle:.48,windAngle:1.76,windShear:1,windSpeed:1.8}},midnight:{celestial:{celestialX:.69,celestialY:.74,starDensity:.36,sunGlowIntensity:5},cloud:{turbulence:.56,windSpeed:.03},lightning:{enabled:!0},rain:{fallingAngle:.31,fallingIntensity:.22,fallingSpeed:2.07,fallingStreakLength:2,glassIntensity:.41,glassZoom:.85},snow:{drift:1,fallSpeed:8,flakeSize:.85,flutter:.98,glowAmount:.09,intensity:.34,layers:8,opacity:.78,sizeVariation:1,sparkle:.48,windAngle:1.76,windShear:1,windSpeed:1.8}},noon:{celestial:{celestialX:.69,celestialY:.74,starDensity:.36,sunGlowIntensity:5},cloud:{turbulence:.56,windSpeed:.03},glass:{brightness:1},lightning:{enabled:!0},rain:{fallingAngle:.31,fallingIntensity:.22,fallingSpeed:2.07,fallingStreakLength:2,glassIntensity:.41,glassZoom:.85},snow:{drift:1,fallSpeed:8,flakeSize:.85,flutter:.98,glowAmount:.09,intensity:.34,layers:8,opacity:.78,sizeVariation:1,sparkle:.48,turbulence:1,windAngle:1.76,windShear:1,windSpeed:1.8}}},snow:{dawn:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.6,skyContrast:0,skySaturation:1.5,starDensity:1.72},cloud:{ambientDarkness:.94,backlightIntensity:1.14,density:1.19,lightIntensity:1.73,turbulence:.3,windSpeed:.04},glass:{brightness:.95,chromaticAberration:2,depth:8,strength:10},post:{godRayIntensity:.4,haze:.03,hazeContrast:.05,hazeDesaturation:0,hazeHorizon:1},snow:{drift:1,fallSpeed:1.5,flakeSize:1.05,flutter:1,glowAmount:.44,intensity:.53,layers:8,opacity:.4,sizeVariation:.63,sparkle:.97,turbulence:.59,windAngle:1.95,windShear:.8,windSpeed:2}},dusk:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:1.01,skyContrast:.86,skySaturation:2,starDensity:1.72,sunGlowIntensity:4.9},cloud:{ambientDarkness:.9,backlightIntensity:1.53,cloudScale:1.82,coverage:.62,density:1.19,lightIntensity:.55,softness:.31,turbulence:.3,windSpeed:.04},glass:{blur:2,chromaticAberration:2,depth:8,strength:10},post:{godRayIntensity:.4,haze:.03,hazeContrast:.05,hazeDesaturation:0,hazeHorizon:1},snow:{drift:1,fallSpeed:1.5,flakeSize:1.05,flutter:1,glowAmount:.88,intensity:.96,layers:8,opacity:.34,sizeVariation:.63,sparkle:.97,turbulence:.59,windAngle:1.95,windShear:.8,windSpeed:2}},midnight:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,moonPhase:.5,skyBrightness:1.07,skyContrast:.59,skySaturation:1.57,starDensity:1.72},cloud:{ambientDarkness:.04,cloudScale:1.15,coverage:.5,density:1.19,lightIntensity:1.29,softness:.14,turbulence:.3,windAngle:-.08,windSpeed:.04},glass:{blur:1,chromaticAberration:2,depth:8,strength:10},post:{godRayIntensity:.4,haze:.03,hazeContrast:.05,hazeDesaturation:0,hazeHorizon:1},snow:{drift:1,fallSpeed:1.5,flakeSize:1.05,flutter:1,glowAmount:.88,intensity:.53,layers:8,opacity:.34,sizeVariation:.63,sparkle:.97,turbulence:.59,windAngle:1.95,windShear:.8,windSpeed:1.44}},noon:{celestial:{celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,skyBrightness:.35,skyContrast:.69,skySaturation:.73,starDensity:1.72,sunGlowIntensity:3.45,sunGlowSize:.29,sunRayCount:0},cloud:{ambientDarkness:1,backlightIntensity:1.01,density:1.19,lightIntensity:.57,turbulence:.3,windSpeed:.04},glass:{blur:1,brightness:1.15,chromaticAberration:2,depth:8,saturation:1.4,strength:10},post:{godRayIntensity:.4,haze:.03,hazeContrast:.05,hazeDesaturation:0,hazeHorizon:1},snow:{drift:1,fallSpeed:1.5,flakeSize:1.28,flutter:1,glowAmount:.47,intensity:.53,layers:8,opacity:.34,sizeVariation:.63,sparkle:1,turbulence:.59,windAngle:1.95,windShear:.8,windSpeed:2}}},thunderstorm:{dawn:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:0,moonGlowSize:0,skyBrightness:.78,skyContrast:1.03,skySaturation:.94,starDensity:1.72,sunGlowIntensity:5.1,sunRayCount:5,sunRayIntensity:.13,sunRayLength:1.7,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{backlightIntensity:.55,cloudScale:1.56,coverage:.71,density:.97,lightIntensity:0,numLayers:1,softness:.28,turbulence:.36,windSpeed:.04},glass:{blur:1,brightness:.9,chromaticAberration:2,strength:45},interactions:{lightningSceneIllumination:.83,rainRefractionStrength:2},lightning:{autoInterval:8,branchDensity:.83,enabled:!0,flashIntensity:1.57},post:{bloomIntensity:.39,exposureIntensity:.95,exposureRecovery:4.5,godRayDecay:.894,godRayDensity:.91,godRayIntensity:.26,godRaySamples:39,godRayWeight:.36,haze:.07,hazeContrast:0,hazeHorizon:1},rain:{fallingAngle:.02,fallingLayers:12,fallingSpeed:3,fallingStreakLength:1.46,glassIntensity:1.71,glassZoom:.51}},dusk:{celestial:{celestialX:.69,celestialY:.74,moonGlowIntensity:0,moonGlowSize:0,skyBrightness:.91,skyContrast:1.03,skySaturation:1.19,starDensity:1.72,sunGlowIntensity:5.05,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:1,backlightIntensity:.55,cloudScale:1.56,coverage:.71,density:.97,lightIntensity:0,numLayers:1,softness:.28,turbulence:.36,windSpeed:.04},glass:{blur:1,brightness:.9,chromaticAberration:2,strength:45},interactions:{lightningSceneIllumination:.83,rainRefractionStrength:2},lightning:{branchDensity:.83,enabled:!0,flashIntensity:1.57},post:{bloomIntensity:.44,exposureIntensity:1.1,exposureRecovery:4.5,haze:.07,hazeContrast:0,hazeHorizon:1},rain:{fallingAngle:.02,fallingLayers:12,fallingSpeed:3,fallingStreakLength:1.46,glassIntensity:1.32,glassZoom:.51}},midnight:{celestial:{celestialY:.71,moonGlowIntensity:4.55,moonGlowSize:1.25,moonPhase:.5,skyBrightness:.78,skyContrast:1.03,skySaturation:.74,starDensity:1.72,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:.88,backlightIntensity:.55,cloudScale:1.56,coverage:.71,density:.97,lightIntensity:0,numLayers:1,softness:.28,turbulence:.36,windSpeed:.04},glass:{blur:1,brightness:.9,chromaticAberration:2,strength:45},interactions:{lightningSceneIllumination:.83,rainRefractionStrength:2},lightning:{autoInterval:8.5,branchDensity:.89,enabled:!0,flashIntensity:1.57},post:{bloomIntensity:.44,exposureIntensity:1.1,exposureRecovery:4.5,haze:.07,hazeContrast:0,hazeHorizon:1},rain:{fallingAngle:.02,fallingLayers:12,fallingSpeed:3,fallingStreakLength:1.46,glassIntensity:1.32,glassZoom:.51}},noon:{celestial:{celestialY:.71,moonGlowIntensity:0,moonGlowSize:0,skyBrightness:.74,skyContrast:1.07,skySaturation:.55,starDensity:1.72,sunGlowIntensity:2.7,sunGlowSize:.51,sunRayCount:0,sunRayIntensity:0,sunRayLength:0,sunRayShimmer:5,sunRayShimmerSpeed:5},cloud:{ambientDarkness:1,backlightIntensity:.55,cloudScale:1.56,coverage:.71,density:.97,lightIntensity:0,numLayers:1,softness:.28,turbulence:.36,windSpeed:.04},glass:{blur:1,brightness:.9,chromaticAberration:2,strength:45},interactions:{lightningSceneIllumination:.83,rainRefractionStrength:2},lightning:{enabled:!0,flashIntensity:1.57},post:{bloomIntensity:.44,exposureIntensity:1.1,exposureRecovery:4.5,haze:.07,hazeContrast:0,hazeHorizon:1},rain:{fallingAngle:.02,fallingLayers:12,fallingSpeed:3,fallingStreakLength:1.46,glassIntensity:1.32,glassZoom:.51}}},windy:{dawn:{celestial:{celestialX:.69,celestialY:.74,skyBrightness:1,starDensity:.36,sunGlowIntensity:5},cloud:{cloudScale:.85,coverage:.4,windSpeed:.17},glass:{brightness:.95}},dusk:{celestial:{celestialX:.69,celestialY:.74,starDensity:.11,sunGlowIntensity:3.21,sunGlowSize:.51},cloud:{cloudScale:.85,coverage:.4,windSpeed:.17},glass:{brightness:.9}},midnight:{celestial:{celestialX:.74,celestialY:.71,moonGlowIntensity:3.55,moonGlowSize:.97,starDensity:1.72},cloud:{cloudScale:.85,coverage:.4,windSpeed:.17}},noon:{celestial:{celestialX:.74,celestialY:.71,moonPhase:.2421,starDensity:.14,sunGlowIntensity:1.59,sunGlowSize:.55},cloud:{cloudScale:.85,coverage:.4,windSpeed:.17},glass:{brightness:1}}}};function H(e){if(!e)return .5;let t=new Date(e),a=t.getUTCHours(),n=t.getUTCMinutes();return(a+n/60)/24}function Qe(e){if(!e)return .5;let t=new Date(e);t.setUTCHours(0,0,0,0);let a=new Date("2000-01-06T00:00:00Z"),n=(t.getTime()-a.getTime())/(1e3*60*60*24),s=29.530588853;return(n%s+s)%s/s}function je(e){return e<0}var Je={clear:1,"partly-cloudy":.9,cloudy:.8,overcast:.65,fog:.7,drizzle:.7,rain:.6,"heavy-rain":.45,thunderstorm:.3,snow:.8,sleet:.65,hail:.5,windy:.9};function et(e,t){return e<.35?"dark":e>.45?"light":t??"dark"}function Oe(e){let t=e*24;return t<6?-1+t/6:t<12?(t-6)/6:t<18?1-(t-12)/6:-(t-18)/6}function tt(e,t="clear"){let a=Oe(e),n;a<0?n=.05+(1+a)*.1:n=.15+a*.85;let s=Je[t],c=n*s;return Math.max(0,Math.min(1,c))}function nt(e=0){return e<=10?e/10*.3:e<=25?.3+(e-10)/15*.4:.7+Math.min((e-25)/25,.3)}function at(e){switch(e){case"light":return .3;case"moderate":return .6;case"heavy":return 1;default:return 0}}function st(e=10){return e>=10?0:e>=5?(10-e)/5*.3:.3+(5-e)/5*.7}function te(e){return Math.max(0,Math.min(1,e))}function ee(e,t,a){let n=te((a-e)/(t-e));return n*n*(3-2*n)}var D={x:.74,y:.78,sunSize:.14,moonSize:.17,starDensity:2,sunGlowIntensity:3.05,sunGlowSize:.3,sunRayCount:6,sunRayLength:3,sunRayIntensity:.1,moonGlowIntensity:3.45,moonGlowSize:.94},ot={clear:D,"partly-cloudy":D,cloudy:D,overcast:D,fog:D,drizzle:D,rain:D,"heavy-rain":D,thunderstorm:D,snow:D,sleet:D,hail:D,windy:D},it={clear:{cloud:{coverage:.1,speed:.3,darkness:0,turbulence:.2}},"partly-cloudy":{cloud:{coverage:.4,speed:.4,darkness:.1,turbulence:.3}},cloudy:{cloud:{coverage:.7,speed:.4,darkness:.2,turbulence:.3}},overcast:{cloud:{coverage:.95,speed:.3,darkness:.35,turbulence:.25}},fog:{cloud:{coverage:.6,speed:.15,darkness:.15,turbulence:.1}},drizzle:{cloud:{coverage:.75,speed:.35,darkness:.3,turbulence:.3},rain:{intensity:.25,glassDrops:!0,fallingRain:!0,angle:3}},rain:{cloud:{coverage:.85,speed:.5,darkness:.4,turbulence:.4},rain:{intensity:.6,glassDrops:!0,fallingRain:!0,angle:5}},"heavy-rain":{cloud:{coverage:.95,speed:.6,darkness:.55,turbulence:.5},rain:{intensity:1,glassDrops:!0,fallingRain:!0,angle:8}},thunderstorm:{cloud:{coverage:1,speed:.7,darkness:.7,turbulence:.6},rain:{intensity:1,glassDrops:!0,fallingRain:!0,angle:15},lightning:{enabled:!0,autoTrigger:!0,intervalMin:4,intervalMax:12}},snow:{cloud:{coverage:.7,speed:.25,darkness:.2,turbulence:.2},snow:{intensity:.7,windDrift:.3}},sleet:{cloud:{coverage:.8,speed:.4,darkness:.35,turbulence:.35},rain:{intensity:.5,glassDrops:!0,fallingRain:!0,angle:10},snow:{intensity:.3,windDrift:.4}},hail:{cloud:{coverage:.9,speed:.6,darkness:.5,turbulence:.5},rain:{intensity:.7,glassDrops:!0,fallingRain:!0,angle:5},snow:{intensity:.3,windDrift:.4}},windy:{cloud:{coverage:.5,speed:1,darkness:.1,turbulence:.6}}};function Me(e){let{conditionCode:t,windSpeed:a,precipitationLevel:n,visibility:s,timestamp:c,timeOfDay:l}=e,o=it[t],r=l??H(c),i=Oe(r),h=nt(a),f=at(n),p=st(s),b=je(i),R={sunAltitude:i,haze:Math.max(p,(o.cloud?.darkness??0)*.3),starVisibility:b&&!o.cloud?1:b?1-(o.cloud?.coverage??0):0},C={atmosphere:R};if(o.cloud&&(C.cloud={...o.cloud,speed:o.cloud.speed*(1+h*.5),turbulence:o.cloud.turbulence*(1+h*.3)}),o.rain){let E=f>0?f:o.rain.intensity;C.rain={...o.rain,intensity:E,angle:o.rain.angle+h*10}}o.lightning&&(C.lightning={...o.lightning}),o.snow&&(C.snow={...o.snow,windDrift:o.snow.windDrift+h*.3});let A=Qe(c),k=ot[t];C.celestial={timeOfDay:r,moonPhase:A,starDensity:b?k.starDensity:0,celestialX:k.x,celestialY:k.y,sunSize:k.sunSize,moonSize:k.moonSize,sunGlowIntensity:k.sunGlowIntensity,sunGlowSize:k.sunGlowSize,sunRayCount:k.sunRayCount,sunRayLength:k.sunRayLength,sunRayIntensity:k.sunRayIntensity,moonGlowIntensity:k.moonGlowIntensity,moonGlowSize:k.moonGlowSize};let w=te(R.haze),T=C.cloud?.coverage??0,Q=T>.001,$=te(.04+(t==="fog"?.18:t==="thunderstorm"?.12:t==="heavy-rain"?.1:t==="overcast"?.08:t==="cloudy"||t==="partly-cloudy"?.06:.04)+w*.22),G=1.1+w*1.2,z=C.lightning?.enabled?.85:0,V=ee(-.05,.08,i),F=1-ee(.18,.7,Math.max(0,i)),d=ee(.25,.85,T),u=1-ee(.97,1,T),y=.35+w*.65,g=Q?te(V*F*d*u*y*.6):0,m={enabled:!0,haze:w,bloomIntensity:$,bloomRadius:G,exposureIntensity:z,godRayIntensity:g};return C.post=m,C}function rt(e){let t=Me(e),a=e.timeOfDay??t.celestial?.timeOfDay??H(e.timestamp),n=t.cloud!==void 0,s=t.rain!==void 0,c=t.lightning!==void 0,l=t.snow!==void 0,o=t.lightning?.intervalMin??4,r=t.lightning?.intervalMax??12;return{layers:{celestial:!0,clouds:n,rain:s,lightning:c,snow:l},celestial:{timeOfDay:a,moonPhase:t.celestial?.moonPhase??.5,starDensity:t.celestial?.starDensity??.5,celestialX:t.celestial?.celestialX??.5,celestialY:t.celestial?.celestialY??.72,sunSize:t.celestial?.sunSize??.06,moonSize:t.celestial?.moonSize??.05,sunGlowIntensity:t.celestial?.sunGlowIntensity??1,sunGlowSize:t.celestial?.sunGlowSize??.3,sunRayCount:t.celestial?.sunRayCount??12,sunRayLength:t.celestial?.sunRayLength??.5,sunRayIntensity:t.celestial?.sunRayIntensity??.4,sunRayShimmer:1,sunRayShimmerSpeed:1,moonGlowIntensity:t.celestial?.moonGlowIntensity??1,moonGlowSize:t.celestial?.moonGlowSize??.2,skyBrightness:1,skySaturation:1,skyContrast:1},cloud:{cloudScale:1.5,coverage:t.cloud?.coverage??.5,density:.7,softness:.3,windSpeed:t.cloud?.speed??.5,windAngle:0,turbulence:t.cloud?.turbulence??.5,lightIntensity:1,ambientDarkness:t.cloud?.darkness??.3,backlightIntensity:.5,numLayers:3},rain:{glassIntensity:s?(t.rain?.intensity??.5)*.7:0,zoom:1,fallingIntensity:s?t.rain?.intensity??.6:0,fallingSpeed:1,fallingAngle:s?(t.rain?.angle??5)*.02:.1,fallingStreakLength:.8,fallingLayers:3,fallingRefraction:.3},lightning:{autoMode:c?t.lightning?.autoTrigger??!0:!1,autoInterval:c?(o+r)/2:8,glowIntensity:.8,branchDensity:.6,sceneIllumination:.6},snow:{intensity:l?t.snow?.intensity??.7:0,layers:4,fallSpeed:.5,windSpeed:l?t.snow?.windDrift??.3:.3,windAngle:0,turbulence:.3,drift:l?t.snow?.windDrift??.3:.3,flutter:.5,windShear:.2,flakeSize:1,sizeVariation:.5,opacity:.8,glowAmount:.3,sparkle:.2},post:{enabled:!0,haze:0,hazeHorizon:.5,hazeDesaturation:.3,hazeContrast:.2,bloomIntensity:0,bloomThreshold:.8,bloomKnee:.5,bloomRadius:8,bloomTapScale:1,exposureIntensity:0,exposureDesaturation:.3,exposureRecovery:2,godRayIntensity:0,godRayDecay:.96,godRayDensity:.5,godRayWeight:.3,godRaySamples:60}}}function lt(e){return{layers:e.layers,celestial:{timeOfDay:e.celestial.timeOfDay,moonPhase:e.celestial.moonPhase,starDensity:e.celestial.starDensity,celestialX:e.celestial.celestialX,celestialY:e.celestial.celestialY,sunSize:e.celestial.sunSize,moonSize:e.celestial.moonSize,sunGlowIntensity:e.celestial.sunGlowIntensity,sunGlowSize:e.celestial.sunGlowSize,sunRayCount:e.celestial.sunRayCount,sunRayLength:e.celestial.sunRayLength,sunRayIntensity:e.celestial.sunRayIntensity,sunRayShimmer:e.celestial.sunRayShimmer,sunRayShimmerSpeed:e.celestial.sunRayShimmerSpeed,moonGlowIntensity:e.celestial.moonGlowIntensity,moonGlowSize:e.celestial.moonGlowSize,skyBrightness:e.celestial.skyBrightness,skySaturation:e.celestial.skySaturation,skyContrast:e.celestial.skyContrast},cloud:{coverage:e.cloud.coverage,density:e.cloud.density,softness:e.cloud.softness,cloudScale:e.cloud.cloudScale,windSpeed:e.cloud.windSpeed,windAngle:e.cloud.windAngle,turbulence:e.cloud.turbulence,lightIntensity:e.cloud.lightIntensity,ambientDarkness:e.cloud.ambientDarkness,backlightIntensity:e.cloud.backlightIntensity,numLayers:e.cloud.numLayers},rain:{glassIntensity:e.rain.glassIntensity,glassZoom:e.rain.zoom,fallingIntensity:e.rain.fallingIntensity,fallingSpeed:e.rain.fallingSpeed,fallingAngle:e.rain.fallingAngle,fallingStreakLength:e.rain.fallingStreakLength,fallingLayers:e.rain.fallingLayers},lightning:{enabled:e.layers.lightning,autoMode:e.lightning.autoMode,autoInterval:e.lightning.autoInterval,flashIntensity:e.lightning.glowIntensity,branchDensity:e.lightning.branchDensity},snow:{intensity:e.snow.intensity,layers:e.snow.layers,fallSpeed:e.snow.fallSpeed,windSpeed:e.snow.windSpeed,windAngle:e.snow.windAngle,turbulence:e.snow.turbulence,drift:e.snow.drift,flutter:e.snow.flutter,windShear:e.snow.windShear,flakeSize:e.snow.flakeSize,sizeVariation:e.snow.sizeVariation,opacity:e.snow.opacity,glowAmount:e.snow.glowAmount,sparkle:e.snow.sparkle},interactions:{rainRefractionStrength:e.rain.fallingRefraction,lightningSceneIllumination:e.lightning.sceneIllumination},post:e.post}}function Be(e){return lt(rt(e))}var me={dawn:.25,noon:.5,dusk:.75,midnight:0},ut=["dawn","noon","dusk","midnight"];function q(e){let t=(e%1+1)%1,a="noon",n=1/0;for(let s of ut){let c=me[s],l=Math.abs(t-c);l>.5&&(l=1-l);let o=Math.abs(l-n)<=Number.EPSILON;(l<n||o&&s==="midnight")&&(n=l,a=s)}return a}function W(e,t){if(!(!e&&!t))return{...e,...t}}function Ne(e,t){return{...e,layers:W(e.layers,t.layers),celestial:W(e.celestial,t.celestial),cloud:W(e.cloud,t.cloud),rain:W(e.rain,t.rain),lightning:W(e.lightning,t.lightning),snow:W(e.snow,t.snow),glass:W(e.glass,t.glass),interactions:W(e.interactions,t.interactions),post:W(e.post,t.post)}}function Ye(e){let t=Be(e),a=e.timeOfDay;typeof a=="number"&&t.celestial&&(t.celestial.timeOfDay=a);let n=e.tunedPresets?.[e.conditionCode],s=a??t.celestial?.timeOfDay;if(!n||s===void 0)return t;let c=q(s);return Ne(t,n[c])}function ct(){if(typeof window>"u")return"high";let e=window.devicePixelRatio||1,t=window.innerWidth*window.innerHeight*e*e,a=typeof navigator<"u"?navigator.hardwareConcurrency:void 0,n=typeof navigator<"u"?navigator.deviceMemory:void 0,s=window.innerWidth<768;return typeof n=="number"&&n<=4||typeof a=="number"&&a<=4||t>25e5?s?"low":"medium":s?"medium":"high"}function Ve(e){return e==="low"||e==="medium"||e==="high"?e:ct()}function Xe(e){if(typeof window>"u")return;let t=window.devicePixelRatio||1;return Math.max(1,Math.min(t,e==="low"?1:e==="medium"?1.5:2))}import{jsx as He}from"react/jsx-runtime";var mt=de;function yt({conditionCode:e,windSpeed:t,precipitationLevel:a,visibility:n,timestamp:s,timeOfDay:c,settings:l,className:o}){let[r,i]=ft(!1),h=l?.enabled!==!1,f=l?.reducedMotion??!1,p=ye(()=>Ve(l?.quality??"auto"),[l?.quality]);dt(()=>{i(!0)},[]);let b=ye(()=>Xe(p),[p]),R=ye(()=>!h||f?null:Ye({conditionCode:e,windSpeed:t,precipitationLevel:a,visibility:n,timestamp:s,timeOfDay:c,tunedPresets:mt}),[h,f,e,t,a,n,s,c]);return!r||!h||f||!R?null:He("div",{className:o,style:{position:"absolute",inset:0,overflow:"hidden",pointerEvents:"none",borderRadius:"inherit"},"aria-hidden":"true",children:He(Fe,{className:"absolute inset-0",dpr:b,...R})})}function ht({glassStyles:e,blurAmount:t}){if(!!e.backdropFilter)return e;let n=`blur(${t}px)`;return{backdropFilter:n,WebkitBackdropFilter:n}}import{useEffect as gt,useMemo as pt,useState as St}from"react";var Y={depth:12,radius:12,strength:40,chromaticAberration:8,blur:2,brightness:1.05,saturation:1.2};function vt({width:e,height:t,radius:a,depth:n}){let s=Math.ceil(a/t*15),c=Math.ceil(a/e*15),l=Math.max(0,e-2*n),o=Math.max(0,t-2*n),r=`<svg height="${t}" width="${e}" viewBox="0 0 ${e} ${t}" xmlns="http://www.w3.org/2000/svg">
+    <style>.mix { mix-blend-mode: screen; }</style>
+    <defs>
+      <linearGradient id="Y" x1="0" x2="0" y1="${s}%" y2="${100-s}%">
+        <stop offset="0%" stop-color="#0F0" />
+        <stop offset="100%" stop-color="#000" />
+      </linearGradient>
+      <linearGradient id="X" x1="${c}%" x2="${100-c}%" y1="0" y2="0">
+        <stop offset="0%" stop-color="#F00" />
+        <stop offset="100%" stop-color="#000" />
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" height="${t}" width="${e}" fill="#808080" />
+    <g filter="blur(2px)">
+      <rect x="0" y="0" height="${t}" width="${e}" fill="#000080" />
+      <rect x="0" y="0" height="${t}" width="${e}" fill="url(#Y)" class="mix" />
+      <rect x="0" y="0" height="${t}" width="${e}" fill="url(#X)" class="mix" />
+      <rect x="${n}" y="${n}" height="${o}" width="${l}" fill="#808080" rx="${a}" ry="${a}" filter="blur(${n}px)" />
+    </g>
+  </svg>`;return"data:image/svg+xml;utf8,"+encodeURIComponent(r)}function bt({width:e,height:t,radius:a,depth:n,strength:s,chromaticAberration:c}){let l=vt({width:e,height:t,radius:a,depth:n}),o=`<feImage x="0" y="0" height="${t}" width="${e}" href="${l}" result="displacementMap" />`,r;if(c===0)r=`
+      ${o}
+      <feDisplacementMap in="SourceGraphic" in2="displacementMap" scale="${s}" xChannelSelector="R" yChannelSelector="G" />
+    `;else{let h=s+c*2,f=s+c;r=`
+      ${o}
+      <feDisplacementMap in="SourceGraphic" in2="displacementMap" scale="${h}" xChannelSelector="R" yChannelSelector="G" />
+      <feColorMatrix type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="displacedR" />
+      <feDisplacementMap in="SourceGraphic" in2="displacementMap" scale="${f}" xChannelSelector="R" yChannelSelector="G" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="displacedG" />
+      <feDisplacementMap in="SourceGraphic" in2="displacementMap" scale="${s}" xChannelSelector="R" yChannelSelector="G" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="displacedB" />
+      <feBlend in="displacedR" in2="displacedG" mode="screen"/>
+      <feBlend in2="displacedB" mode="screen"/>
+    `}let i=`<svg height="${t}" width="${e}" viewBox="0 0 ${e} ${t}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <filter id="displace" color-interpolation-filters="sRGB">${r}</filter>
+    </defs>
+  </svg>`;return"data:image/svg+xml;utf8,"+encodeURIComponent(i)+"#displace"}function wt({filterUrl:e,blur:t,brightness:a,saturation:n}){return`blur(${t/2}px) url('${e}') blur(${t}px) brightness(${a}) saturate(${n})`}function xt(){let[e,t]=St(!0);return gt(()=>{let a=CSS.supports("backdrop-filter","blur(1px)")||CSS.supports("-webkit-backdrop-filter","blur(1px)");t(a)},[]),e}function It({width:e,height:t,depth:a=Y.depth,radius:n=Y.radius,strength:s=Y.strength,chromaticAberration:c=Y.chromaticAberration,blur:l=Y.blur,brightness:o=Y.brightness,saturation:r=Y.saturation,enabled:i=!0}){let h=xt();return pt(()=>{if(!i||!h||e<=0||t<=0)return{};let f=bt({width:e,height:t,radius:n,depth:a,strength:s,chromaticAberration:c}),p=wt({filterUrl:f,blur:l,brightness:o,saturation:r});return{backdropFilter:p,WebkitBackdropFilter:p}},[e,t,a,n,s,c,l,o,r,i,h])}function Ue(e){return(e%1+1)%1}function Rt(e){let t=Ue(e),a=q(t);return me[a]}function kt(e){return((Math.floor(e)%12+12)%12+.5)/12}function _t(e){let{time:t,updatedAt:a}=e;return typeof t?.timeBucket=="number"?{timeOfDay:kt(t.timeBucket),source:"timeBucket"}:typeof t?.localTimeOfDay=="number"?{timeOfDay:Ue(t.localTimeOfDay),source:"localTimeOfDay"}:typeof a=="string"?{timeOfDay:H(a),source:"updatedAt"}:{timeOfDay:.5,source:"defaultNoon"}}export{yt as EffectCompositorRuntime,de as TUNED_WEATHER_EFFECTS_CHECKPOINT_OVERRIDES,q as getNearestCheckpoint,tt as getSceneBrightnessFromTimeOfDay,H as getTimeOfDay,et as getWeatherTheme,ht as resolveGlassBackdropFilterStyles,_t as resolveWeatherTime,Rt as snapTimeOfDayToNearestCheckpoint,It as useGlassStyles};
diff --git a/frontend/src/toolui/components/weather-widget/runtime.ts b/frontend/src/toolui/components/weather-widget/runtime.ts
new file mode 100644
index 00000000..56f26545
--- /dev/null
+++ b/frontend/src/toolui/components/weather-widget/runtime.ts
@@ -0,0 +1,18 @@
+/**
+ * Start here when wiring the Weather Widget in your app.
+ *
+ * Import `WeatherWidget` and the runtime types from this file for production use.
+ * Reach for `index.tsx` only if you're actively working on authoring/debug internals.
+ */
+export { WeatherWidget } from "./weather-widget-container";
+export type {
+  WeatherWidgetPayload,
+  WeatherWidgetRuntimeProps as WeatherWidgetProps,
+  WeatherWidgetCurrent,
+  WeatherWidgetTime,
+  WeatherWidgetLocation,
+  WeatherConditionCode,
+  ForecastDay,
+  TemperatureUnit,
+  PrecipitationLevel,
+} from "./schema-runtime";
diff --git a/frontend/src/toolui/components/weather-widget/schema-runtime.ts b/frontend/src/toolui/components/weather-widget/schema-runtime.ts
new file mode 100644
index 00000000..080d7113
--- /dev/null
+++ b/frontend/src/toolui/components/weather-widget/schema-runtime.ts
@@ -0,0 +1,72 @@
+export type WeatherConditionCode =
+  | "clear"
+  | "partly-cloudy"
+  | "cloudy"
+  | "overcast"
+  | "fog"
+  | "drizzle"
+  | "rain"
+  | "heavy-rain"
+  | "thunderstorm"
+  | "snow"
+  | "sleet"
+  | "hail"
+  | "windy";
+
+export type TemperatureUnit = "celsius" | "fahrenheit";
+
+export type PrecipitationLevel = "none" | "light" | "moderate" | "heavy";
+
+export type TimeBucket = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+
+export interface ForecastDay {
+  label: string;
+  conditionCode: WeatherConditionCode;
+  tempMin: number;
+  tempMax: number;
+}
+
+export interface WeatherWidgetCurrent {
+  conditionCode: WeatherConditionCode;
+  temperature: number;
+  tempMin: number;
+  tempMax: number;
+  windSpeed?: number;
+  precipitationLevel?: PrecipitationLevel;
+  visibility?: number;
+}
+
+export interface WeatherWidgetTime {
+  timeBucket?: TimeBucket;
+  localTimeOfDay?: number;
+}
+
+export interface WeatherWidgetLocation {
+  name: string;
+}
+
+export interface WeatherWidgetPayload {
+  version: "3.1";
+  id: string;
+  location: WeatherWidgetLocation;
+  units: {
+    temperature: TemperatureUnit;
+  };
+  current: WeatherWidgetCurrent;
+  forecast: ForecastDay[];
+  time: WeatherWidgetTime;
+  updatedAt?: string;
+}
+
+export type EffectQuality = "low" | "medium" | "high" | "auto";
+
+export interface EffectSettings {
+  enabled?: boolean;
+  quality?: EffectQuality;
+  reducedMotion?: boolean;
+}
+
+export interface WeatherWidgetRuntimeProps extends WeatherWidgetPayload {
+  className?: string;
+  effects?: EffectSettings;
+}
diff --git a/frontend/src/toolui/components/weather-widget/weather-data-overlay.tsx b/frontend/src/toolui/components/weather-widget/weather-data-overlay.tsx
new file mode 100644
index 00000000..649983f4
--- /dev/null
+++ b/frontend/src/toolui/components/weather-widget/weather-data-overlay.tsx
@@ -0,0 +1,586 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+  Sun,
+  Cloud,
+  CloudSun,
+  CloudFog,
+  CloudDrizzle,
+  CloudRain,
+  CloudLightning,
+  Snowflake,
+  CloudHail,
+  Wind,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@toolui/lib/utils";
+import type {
+  ForecastDay,
+  TemperatureUnit,
+  WeatherConditionCode,
+} from "./schema-runtime";
+import {
+  getSceneBrightnessFromTimeOfDay,
+  getTimeOfDay,
+  getWeatherTheme,
+} from "./generated/weather-runtime-core.generated";
+import {
+  resolveGlassBackdropFilterStyles,
+  useGlassStyles,
+} from "./generated/weather-runtime-core.generated";
+
+type WeatherTheme = "light" | "dark";
+
+function getPeakIntensity(timeOfDay: number): number {
+  const noonDistance = Math.abs(timeOfDay - 0.5);
+  const midnightDistance = Math.min(timeOfDay, 1 - timeOfDay);
+  const minDistance = Math.min(noonDistance, midnightDistance);
+  return Math.max(0, 1 - minDistance * 4);
+}
+
+function sineEasedGradient(
+  x: number,
+  y: number,
+  radius: number,
+  peakOpacity: number,
+  steps = 8,
+): string {
+  const stops: string[] = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const eased = Math.sin((t * Math.PI) / 2);
+    const opacity = peakOpacity * (1 - eased);
+    const position = t * 100;
+    stops.push(
+      `rgba(255,255,255,${opacity.toFixed(4)}) ${position.toFixed(1)}%`,
+    );
+  }
+  return `radial-gradient(circle ${radius}px at ${x}px ${y}px, ${stops.join(", ")})`;
+}
+
+const conditionIcons: Record<WeatherConditionCode, LucideIcon> = {
+  clear: Sun,
+  "partly-cloudy": CloudSun,
+  cloudy: Cloud,
+  overcast: Cloud,
+  fog: CloudFog,
+  drizzle: CloudDrizzle,
+  rain: CloudRain,
+  "heavy-rain": CloudRain,
+  thunderstorm: CloudLightning,
+  snow: Snowflake,
+  sleet: CloudHail,
+  hail: CloudHail,
+  windy: Wind,
+};
+
+export interface GlassEffectParams {
+  enabled?: boolean;
+  depth?: number;
+  strength?: number;
+  chromaticAberration?: number;
+  blur?: number;
+  brightness?: number;
+  saturation?: number;
+}
+
+export interface WeatherDataOverlayProps {
+  location: string;
+  conditionCode: WeatherConditionCode;
+  temperature: number;
+  tempHigh: number;
+  tempLow: number;
+  forecast?: ForecastDay[];
+  unit?: TemperatureUnit;
+  theme?: WeatherTheme;
+  /**
+   * Provide either `timeOfDay` (0-1) or a `timestamp` ISO string.
+   * If neither is provided, defaults to noon (0.5).
+   */
+  timeOfDay?: number;
+  timestamp?: string | undefined;
+  className?: string;
+  reducedMotion?: boolean;
+  /**
+   * Glass refraction effect parameters for the forecast card.
+   * When enabled, applies SVG displacement filter for realistic glass distortion.
+   */
+  glassParams?: GlassEffectParams | undefined;
+}
+
+interface GlowState {
+  x: number;
+  y: number;
+  intensity: number;
+}
+
+export function observeCardDimensions(
+  element: HTMLDivElement | null,
+  onResize: () => void,
+): () => void {
+  if (!element || typeof ResizeObserver !== "function") {
+    return () => {};
+  }
+
+  const observer = new ResizeObserver(onResize);
+  observer.observe(element);
+  return () => observer.disconnect();
+}
+
+export function WeatherDataOverlay({
+  location,
+  conditionCode,
+  temperature,
+  tempHigh,
+  tempLow,
+  forecast = [],
+  unit = "fahrenheit",
+  theme: themeProp,
+  timeOfDay: timeOfDayProp,
+  timestamp,
+  className,
+  reducedMotion = false,
+  glassParams,
+}: WeatherDataOverlayProps) {
+  const timeOfDay =
+    typeof timeOfDayProp === "number"
+      ? timeOfDayProp
+      : typeof timestamp === "string"
+        ? getTimeOfDay(timestamp)
+        : 0.5;
+
+  const [glowState, setGlowState] = useState<GlowState>({
+    x: 0,
+    y: 0,
+    intensity: 0,
+  });
+  const [cardDimensions, setCardDimensions] = useState({ width: 0, height: 0 });
+  const cardRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pendingGlowStateRef = useRef<GlowState | null>(null);
+  const pendingGlowFrameRef = useRef<number | null>(null);
+
+  // Glass effect styles applied directly to forecast container.
+  // Enabled by default - falls back to simple blur if SVG filter unsupported.
+  const glassEnabled = glassParams?.enabled !== false;
+  const glassStyles = useGlassStyles({
+    width: cardDimensions.width,
+    height: cardDimensions.height,
+    depth: glassParams?.depth ?? 3,
+    radius: 12,
+    strength: glassParams?.strength ?? 75,
+    chromaticAberration: glassParams?.chromaticAberration ?? 6,
+    blur: glassParams?.blur ?? 1.5,
+    brightness: glassParams?.brightness ?? 0.8,
+    saturation: glassParams?.saturation ?? 1.3,
+    enabled: glassEnabled,
+  });
+
+  // Track forecast card dimensions for glass effect
+  const updateCardDimensions = useCallback(() => {
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect();
+      setCardDimensions({
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+      });
+    }
+  }, []);
+  const hasForecastStrip = forecast.length > 0;
+
+  useEffect(() => {
+    updateCardDimensions();
+    return observeCardDimensions(cardRef.current, updateCardDimensions);
+  }, [hasForecastStrip, updateCardDimensions]);
+
+  const theme =
+    themeProp ??
+    getWeatherTheme(
+      getSceneBrightnessFromTimeOfDay(timeOfDay, conditionCode),
+      undefined,
+    );
+
+  const commitGlowState = useCallback((nextState: GlowState) => {
+    setGlowState((prevState) => {
+      if (
+        prevState.x === nextState.x &&
+        prevState.y === nextState.y &&
+        prevState.intensity === nextState.intensity
+      ) {
+        return prevState;
+      }
+
+      return nextState;
+    });
+  }, []);
+
+  const cancelPendingGlowFrame = useCallback(() => {
+    pendingGlowStateRef.current = null;
+
+    if (
+      pendingGlowFrameRef.current !== null &&
+      typeof window !== "undefined" &&
+      typeof window.cancelAnimationFrame === "function"
+    ) {
+      window.cancelAnimationFrame(pendingGlowFrameRef.current);
+    }
+
+    pendingGlowFrameRef.current = null;
+  }, []);
+
+  const scheduleGlowState = useCallback(
+    (nextState: GlowState) => {
+      pendingGlowStateRef.current = nextState;
+
+      if (pendingGlowFrameRef.current !== null) {
+        return;
+      }
+
+      if (
+        typeof window === "undefined" ||
+        typeof window.requestAnimationFrame !== "function"
+      ) {
+        pendingGlowStateRef.current = null;
+        commitGlowState(nextState);
+        return;
+      }
+
+      pendingGlowFrameRef.current = window.requestAnimationFrame(() => {
+        pendingGlowFrameRef.current = null;
+        const pendingState = pendingGlowStateRef.current;
+        pendingGlowStateRef.current = null;
+
+        if (pendingState) {
+          commitGlowState(pendingState);
+        }
+      });
+    },
+    [commitGlowState],
+  );
+
+  const clearGlowIntensity = useCallback(() => {
+    cancelPendingGlowFrame();
+    setGlowState((prevState) => {
+      if (prevState.intensity === 0) {
+        return prevState;
+      }
+
+      return { ...prevState, intensity: 0 };
+    });
+  }, [cancelPendingGlowFrame]);
+
+  useEffect(() => {
+    if (reducedMotion) {
+      clearGlowIntensity();
+      return;
+    }
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!cardRef.current) return;
+      const cardRect = cardRef.current.getBoundingClientRect();
+
+      const clampedX = Math.max(
+        cardRect.left,
+        Math.min(e.clientX, cardRect.right),
+      );
+      const clampedY = Math.max(
+        cardRect.top,
+        Math.min(e.clientY, cardRect.bottom),
+      );
+
+      const distanceX =
+        e.clientX < cardRect.left
+          ? cardRect.left - e.clientX
+          : e.clientX > cardRect.right
+            ? e.clientX - cardRect.right
+            : 0;
+      const distanceY =
+        e.clientY < cardRect.top
+          ? cardRect.top - e.clientY
+          : e.clientY > cardRect.bottom
+            ? e.clientY - cardRect.bottom
+            : 0;
+      const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+
+      const maxDistance = 150;
+      const intensity = Math.max(0, 1 - distance / maxDistance);
+
+      scheduleGlowState({
+        x: clampedX - cardRect.left,
+        y: clampedY - cardRect.top,
+        intensity,
+      });
+    };
+
+    const handleMouseLeave = () => {
+      clearGlowIntensity();
+    };
+
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("mouseleave", handleMouseLeave);
+      cancelPendingGlowFrame();
+    };
+  }, [
+    reducedMotion,
+    clearGlowIntensity,
+    scheduleGlowState,
+    cancelPendingGlowFrame,
+  ]);
+
+  const roundedTemperature = Math.round(temperature);
+  const unitSymbol = unit === "celsius" ? "C" : "F";
+  const spokenUnit = unit === "celsius" ? "Celsius" : "Fahrenheit";
+  const peakIntensity = getPeakIntensity(timeOfDay);
+
+  const isDark = theme === "dark";
+  const textPrimary = isDark ? "text-white" : "text-black";
+  const textPrimarySoft = isDark ? "text-white/90" : "text-black/85";
+  const textSecondary = isDark ? "text-white/80" : "text-black/80";
+  const textSubtle = isDark ? "text-white/40" : "text-black/40";
+
+  const baseBgOpacity = isDark ? 0.04 : 0.04;
+  const bgOpacity = baseBgOpacity * (1 - peakIntensity * 0.7);
+  const midnightDistance = Math.min(timeOfDay, 1 - timeOfDay);
+  const baseBlur = isDark ? 2 + midnightDistance * 38 : 24;
+  const blurAmount = isDark
+    ? baseBlur
+    : baseBlur - peakIntensity * (baseBlur - 8);
+
+  // Dawn intensity peaks around timeOfDay 0.2-0.3 (morning transition)
+  const isDawn = timeOfDay > 0.1 && timeOfDay < 0.4;
+  const dawnIntensity = isDawn ? 1 - Math.abs(timeOfDay - 0.25) * 4 : 0;
+  const forecastTextShadow =
+    dawnIntensity > 0
+      ? `0 0.5px 1px rgba(0,0,0,${(dawnIntensity * 0.4).toFixed(2)})`
+      : undefined;
+
+  const shadowStyle = isDark
+    ? "0 1px 8px rgba(0,0,0,0.3)"
+    : "0 1px 8px rgba(255,255,255,0.3)";
+
+  // Fluid type scales with the widget container size. (Requires container-type:size.)
+  const locationFontSize = "clamp(13px, 7.5cqmin, 17px)";
+  const temperatureFontSize = "clamp(48px, 32cqmin, 72px)";
+  const degreeFontSize = "clamp(18px, 12cqmin, 28px)";
+  const hiLoFontSize = "clamp(11px, 6.5cqmin, 15px)";
+  const forecastFontFamily =
+    '"SF Pro Text", Inter, "Noto Sans", system-ui, sans-serif';
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "pointer-events-auto absolute inset-0 z-10 flex select-none flex-col",
+        className,
+      )}
+    >
+      {/* Current weather (more inset than forecast strip) */}
+      <div className="px-6 pt-6">
+        <div className="flex flex-col items-start">
+          <h2
+            className={cn(
+              "font-medium leading-[1.08] tracking-tight",
+              textSecondary,
+            )}
+            style={{
+              fontSize: locationFontSize,
+              fontFamily: forecastFontFamily,
+              textShadow: shadowStyle,
+            }}
+          >
+            {location}
+          </h2>
+
+          <div className="-mt-0.5 flex items-start gap-1">
+            <span
+              className={cn(
+                "font-[250] tabular-nums leading-[1.02] tracking-[-0.015em]",
+                textPrimarySoft,
+              )}
+              style={{
+                fontSize: temperatureFontSize,
+                fontFamily: forecastFontFamily,
+                fontFeatureSettings: '"tnum" 1, "case" 1',
+                textShadow: isDark
+                  ? "0 2px 20px rgba(0,0,0,0.25)"
+                  : "0 2px 20px rgba(255,255,255,0.3)",
+              }}
+              aria-hidden="true"
+            >
+              {roundedTemperature}
+            </span>
+            <span
+              className={cn("mt-2 font-[250] tabular-nums", textSecondary)}
+              style={{
+                fontSize: degreeFontSize,
+                fontFamily: forecastFontFamily,
+                fontFeatureSettings: '"tnum" 1, "case" 1',
+              }}
+              aria-hidden="true"
+            >
+              °{unitSymbol}
+            </span>
+            <span className="sr-only">
+              {roundedTemperature} degrees {spokenUnit}
+            </span>
+          </div>
+
+          <div
+            className="mt-0.5 flex items-center gap-3"
+            style={{
+              fontFamily: forecastFontFamily,
+              fontFeatureSettings: '"tnum" 1, "case" 1',
+            }}
+          >
+            <span
+              className="font-medium tabular-nums"
+              style={{ fontSize: hiLoFontSize }}
+            >
+              <span className={textSubtle}>H </span>
+              <span className={textPrimary}>{Math.round(tempHigh)}°</span>
+            </span>
+            <span
+              className="font-medium tabular-nums"
+              style={{ fontSize: hiLoFontSize }}
+            >
+              <span className={textSubtle}>L </span>
+              <span className={textPrimary}>{Math.round(tempLow)}°</span>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Forecast strip - hidden at small container sizes (less inset than header) */}
+      {forecast.length > 0 && (
+        <div className="px-3 pb-3">
+          {/* Show the strip earlier, but progressively reduce content as height shrinks. */}
+          <div ref={cardRef} className="weather-forecast-strip relative hidden">
+            {/* Edge shine - outside overflow-hidden so it aligns with border */}
+            <div
+              className="pointer-events-none absolute inset-0 z-10 rounded-xl transition-opacity duration-300 ease-out"
+              style={{
+                opacity: glowState.intensity,
+                background: sineEasedGradient(
+                  glowState.x,
+                  glowState.y,
+                  100,
+                  isDark ? 0.6 : 1,
+                ),
+                mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+                maskComposite: "exclude",
+                WebkitMaskComposite: "xor",
+                padding: "0.5px",
+              }}
+            />
+            <div
+              className="relative overflow-hidden rounded-xl px-3 py-2.5"
+              style={{
+                backgroundColor: `rgba(255, 255, 255, ${bgOpacity})`,
+                ...resolveGlassBackdropFilterStyles({
+                  glassStyles,
+                  blurAmount,
+                }),
+              }}
+            >
+              {/* Inner glow */}
+              <div
+                className="pointer-events-none absolute inset-0 mix-blend-color-dodge transition-opacity duration-300 ease-out"
+                style={{
+                  opacity: glowState.intensity,
+                  background: sineEasedGradient(
+                    glowState.x,
+                    glowState.y,
+                    120,
+                    isDark ? 0.06 : 0.15,
+                  ),
+                }}
+              />
+              <div className="relative flex items-center justify-between">
+                {forecast.slice(0, 5).map((day, index) => {
+                  const DayIcon = conditionIcons[day.conditionCode];
+                  return (
+                    <div
+                      key={`${day.label}-${index}`}
+                      className="flex flex-1 flex-col items-center gap-0.5"
+                      style={{
+                        fontFamily: forecastFontFamily,
+                        fontFeatureSettings: '"tnum" 1, "case" 1',
+                        textShadow: forecastTextShadow,
+                      }}
+                    >
+                      <span
+                        className={cn(
+                          "text-[10px] uppercase tracking-[0.08em]",
+                          index === 0 ? "font-semibold" : "font-medium",
+                          textPrimary,
+                        )}
+                      >
+                        {day.label}
+                      </span>
+                      <DayIcon
+                        className={cn(
+                          "my-0.5 size-5",
+                          textPrimary,
+                          index === 0 ? "opacity-100" : "opacity-70",
+                          // At shorter containers (but still showing the strip),
+                          // omit the icon to preserve legibility.
+                          "weather-forecast-icon hidden",
+                        )}
+                        strokeWidth={1.5}
+                        aria-hidden="true"
+                      />
+                      <div className="flex flex-col items-center gap-0.5">
+                        <span
+                          className={cn(
+                            "text-[15px] tabular-nums leading-[1.2] tracking-[-0.01em]",
+                            index === 0 ? "font-semibold" : "font-medium",
+                            textPrimary,
+                          )}
+                        >
+                          {Math.round(day.tempMax)}°
+                        </span>
+                        <span
+                          className={cn(
+                            "font-normal text-[12px] tabular-nums leading-[1.3]",
+                            textPrimary,
+                          )}
+                        >
+                          {Math.round(day.tempMin)}°
+                        </span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Height-based container queries (requires container-type:size on the weather container). */}
+      <style>{`
+        @container weather (min-height: 245px) {
+          .weather-forecast-strip {
+            display: block !important;
+          }
+        }
+        @container weather (min-height: 280px) {
+          .weather-forecast-icon {
+            display: block !important;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/components/weather-widget/weather-widget-container.tsx b/frontend/src/toolui/components/weather-widget/weather-widget-container.tsx
new file mode 100644
index 00000000..7542784b
--- /dev/null
+++ b/frontend/src/toolui/components/weather-widget/weather-widget-container.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@toolui/lib/utils";
+import {
+  EffectCompositorRuntime,
+  getNearestCheckpoint,
+  getSceneBrightnessFromTimeOfDay,
+  getWeatherTheme,
+  resolveWeatherTime,
+  snapTimeOfDayToNearestCheckpoint,
+  TUNED_WEATHER_EFFECTS_CHECKPOINT_OVERRIDES,
+} from "./generated/weather-runtime-core.generated";
+import type { WeatherWidgetRuntimeProps } from "./schema-runtime";
+import { WeatherDataOverlay } from "./weather-data-overlay";
+
+type TimeCheckpoint = "dawn" | "noon" | "dusk" | "midnight";
+
+export function WeatherWidget({
+  version: _version,
+  id,
+  location,
+  units,
+  current,
+  forecast,
+  time,
+  updatedAt,
+  className,
+  effects,
+}: WeatherWidgetRuntimeProps) {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+
+    return (
+      window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false
+    );
+  });
+
+  useEffect(() => {
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      return;
+    }
+
+    const mediaQueryList = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    );
+    setPrefersReducedMotion(mediaQueryList.matches);
+
+    const handleMotionPreferenceChange = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches);
+    };
+
+    if (typeof mediaQueryList.addEventListener === "function") {
+      mediaQueryList.addEventListener("change", handleMotionPreferenceChange);
+      return () => {
+        mediaQueryList.removeEventListener(
+          "change",
+          handleMotionPreferenceChange,
+        );
+      };
+    }
+
+    mediaQueryList.addListener(handleMotionPreferenceChange);
+    return () => {
+      mediaQueryList.removeListener(handleMotionPreferenceChange);
+    };
+  }, []);
+
+  const reducedMotion = effects?.reducedMotion ?? prefersReducedMotion;
+  const effectsEnabled = effects?.enabled !== false && !reducedMotion;
+
+  const resolvedTime = resolveWeatherTime({
+    time,
+    updatedAt,
+  });
+  const timeOfDay = snapTimeOfDayToNearestCheckpoint(resolvedTime.timeOfDay);
+  const tunedOverrides =
+    TUNED_WEATHER_EFFECTS_CHECKPOINT_OVERRIDES[current.conditionCode];
+  const checkpoint = getNearestCheckpoint(timeOfDay) as TimeCheckpoint;
+  const checkpointOverrides = tunedOverrides?.[checkpoint];
+  const glassParams =
+    checkpointOverrides && "glass" in checkpointOverrides
+      ? checkpointOverrides.glass
+      : undefined;
+  const brightness = getSceneBrightnessFromTimeOfDay(
+    timeOfDay,
+    current.conditionCode,
+  );
+  const weatherTheme = getWeatherTheme(brightness, undefined);
+  const isWeatherDark = weatherTheme === "dark";
+  const backgroundClass = isWeatherDark
+    ? "bg-gradient-to-b from-zinc-950 via-zinc-900/70 to-zinc-950"
+    : "bg-gradient-to-b from-sky-50 via-sky-100/70 to-white";
+
+  return (
+    <article
+      data-slot="weather-widget"
+      data-tool-ui-id={id}
+      className={cn("isolate w-full max-w-md", className)}
+    >
+      <div
+        data-slot="card"
+        className={cn(
+          "@container/weather relative aspect-[4/3] overflow-clip rounded-2xl border-0 p-0 shadow-none [container-type:size]",
+          backgroundClass,
+        )}
+      >
+        {effectsEnabled && (
+          <EffectCompositorRuntime
+            className="absolute inset-0"
+            conditionCode={current.conditionCode}
+            windSpeed={current.windSpeed}
+            precipitationLevel={current.precipitationLevel}
+            visibility={current.visibility}
+            timestamp={updatedAt}
+            timeOfDay={timeOfDay}
+            settings={effects}
+          />
+        )}
+
+        <WeatherDataOverlay
+          location={location.name}
+          conditionCode={current.conditionCode}
+          temperature={current.temperature}
+          tempHigh={current.tempMax}
+          tempLow={current.tempMin}
+          forecast={forecast}
+          unit={units.temperature}
+          theme={weatherTheme}
+          timeOfDay={timeOfDay}
+          timestamp={updatedAt}
+          glassParams={glassParams}
+          reducedMotion={reducedMotion}
+        />
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/src/toolui/components/x-post/README.md b/frontend/src/toolui/components/x-post/README.md
new file mode 100644
index 00000000..19feb21c
--- /dev/null
+++ b/frontend/src/toolui/components/x-post/README.md
@@ -0,0 +1,19 @@
+# X Post
+
+Implementation for the "x-post" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/x-post/index.ts
+- serializable schema + parse helpers: components/tool-ui/x-post/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/social-post/content.mdx
+- Preset payload: lib/presets/x-post.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/x-post/_adapter.tsx b/frontend/src/toolui/components/x-post/_adapter.tsx
new file mode 100644
index 00000000..c314b96c
--- /dev/null
+++ b/frontend/src/toolui/components/x-post/_adapter.tsx
@@ -0,0 +1,19 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn      → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button  → shadcn/ui Button
+ *   Tooltip → shadcn/ui Tooltip
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@toolui/ui/tooltip";
diff --git a/frontend/src/toolui/components/x-post/index.ts b/frontend/src/toolui/components/x-post/index.ts
new file mode 100644
index 00000000..6f81b441
--- /dev/null
+++ b/frontend/src/toolui/components/x-post/index.ts
@@ -0,0 +1,9 @@
+export { XPost } from "./x-post";
+export type { XPostProps } from "./x-post";
+export type {
+  XPostData,
+  XPostAuthor,
+  XPostMedia,
+  XPostLinkPreview,
+  XPostStats,
+} from "./schema";
diff --git a/frontend/src/toolui/components/x-post/schema.ts b/frontend/src/toolui/components/x-post/schema.ts
new file mode 100644
index 00000000..24f0e97a
--- /dev/null
+++ b/frontend/src/toolui/components/x-post/schema.ts
@@ -0,0 +1,68 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+
+export const XPostAuthorSchema = z.object({
+  name: z.string(),
+  handle: z.string(),
+  avatarUrl: z.url(),
+  verified: z.boolean().optional(),
+});
+
+export const XPostMediaSchema = z.object({
+  type: z.enum(["image", "video"]),
+  url: z.url(),
+  alt: z.string(),
+  aspectRatio: z.enum(["1:1", "4:3", "16:9", "9:16"]).optional(),
+});
+
+export const XPostLinkPreviewSchema = z.object({
+  url: z.url(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  imageUrl: z.url().optional(),
+  domain: z.string().optional(),
+});
+
+export const XPostStatsSchema = z.object({
+  likes: z.number().optional(),
+  isLiked: z.boolean().optional(),
+  isReposted: z.boolean().optional(),
+  isBookmarked: z.boolean().optional(),
+});
+
+export interface XPostData {
+  id: string;
+  author: z.infer<typeof XPostAuthorSchema>;
+  text?: string;
+  media?: z.infer<typeof XPostMediaSchema>;
+  linkPreview?: z.infer<typeof XPostLinkPreviewSchema>;
+  quotedPost?: XPostData;
+  stats?: z.infer<typeof XPostStatsSchema>;
+  createdAt?: string;
+}
+
+export const SerializableXPostSchema: z.ZodType<XPostData> = z.object({
+  id: z.string(),
+  author: XPostAuthorSchema,
+  text: z.string().optional(),
+  media: XPostMediaSchema.optional(),
+  linkPreview: XPostLinkPreviewSchema.optional(),
+  quotedPost: z.lazy(() => SerializableXPostSchema).optional(),
+  stats: XPostStatsSchema.optional(),
+  createdAt: z.string().optional(),
+});
+export type XPostAuthor = z.infer<typeof XPostAuthorSchema>;
+export type XPostMedia = z.infer<typeof XPostMediaSchema>;
+export type XPostLinkPreview = z.infer<typeof XPostLinkPreviewSchema>;
+export type XPostStats = z.infer<typeof XPostStatsSchema>;
+
+const SerializableXPostSchemaContract = defineToolUiContract(
+  "XPost",
+  SerializableXPostSchema,
+);
+
+export const parseSerializableXPost: (input: unknown) => XPostData =
+  SerializableXPostSchemaContract.parse;
+
+export const safeParseSerializableXPost: (input: unknown) => XPostData | null =
+  SerializableXPostSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/x-post/x-post.tsx b/frontend/src/toolui/components/x-post/x-post.tsx
new file mode 100644
index 00000000..7b16b54c
--- /dev/null
+++ b/frontend/src/toolui/components/x-post/x-post.tsx
@@ -0,0 +1,348 @@
+"use client";
+
+import * as React from "react";
+import { Heart, Share } from "lucide-react";
+import {
+  cn,
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./_adapter";
+import { formatCount, formatRelativeTime, getDomain } from "../shared/utils";
+
+import { resolveSafeNavigationHref } from "../shared/media";
+import type { XPostData, XPostMedia, XPostLinkPreview } from "./schema";
+
+export interface XPostProps {
+  post: XPostData;
+  className?: string;
+  onAction?: (action: string, post: XPostData) => void;
+}
+
+function Avatar({ src, alt }: { src: string; alt: string }) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      width={40}
+      height={40}
+      className="size-10 shrink-0 rounded-full object-cover"
+    />
+  );
+}
+
+function XLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 300 271"
+      className={className}
+      role="img"
+      aria-label="X (formerly Twitter) logo"
+    >
+      <path
+        fill="currentColor"
+        d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"
+      />
+    </svg>
+  );
+}
+
+function VerifiedBadge({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={className}
+      role="img"
+      aria-label="Verified account"
+    >
+      <path
+        fill="currentColor"
+        d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .495.083.965.238 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"
+      />
+    </svg>
+  );
+}
+
+function AuthorInfo({
+  name,
+  handle,
+  verified,
+  createdAt,
+}: {
+  name: string;
+  handle: string;
+  verified?: boolean;
+  createdAt?: string;
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-1">
+      <span className="truncate font-semibold">{name}</span>
+      {verified && (
+        <VerifiedBadge className="size-[18px] shrink-0 text-blue-500" />
+      )}
+      <span className="text-muted-foreground truncate">@{handle}</span>
+      {createdAt && (
+        <>
+          <span className="text-muted-foreground">·</span>
+          <span className="text-muted-foreground">
+            {formatRelativeTime(createdAt)}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}
+
+function PostBody({ text }: { text?: string }) {
+  if (!text) return null;
+  return (
+    <p className="text-[15px] leading-normal text-pretty wrap-break-word whitespace-pre-wrap">
+      {text}
+    </p>
+  );
+}
+
+function PostMedia({
+  media,
+  onOpen,
+}: {
+  media: XPostMedia;
+  onOpen?: () => void;
+}) {
+  const aspectRatio =
+    media.aspectRatio === "1:1"
+      ? "1"
+      : media.aspectRatio === "4:3"
+        ? "4/3"
+        : "16/9";
+
+  return (
+    <button
+      type="button"
+      className="bg-muted mt-2 w-full overflow-hidden rounded-xl"
+      style={{ aspectRatio }}
+      onClick={() => onOpen?.()}
+    >
+      {media.type === "image" ? (
+        <img
+          src={media.url}
+          alt={media.alt}
+          className="size-full object-cover"
+          loading="lazy"
+        />
+      ) : (
+        <video
+          src={media.url}
+          controls
+          playsInline
+          className="size-full object-contain"
+        />
+      )}
+    </button>
+  );
+}
+
+function PostLinkPreview({ preview }: { preview: XPostLinkPreview }) {
+  const href = resolveSafeNavigationHref(preview.url);
+  const domain = preview.domain ?? getDomain(preview.url);
+  const content = (
+    <>
+      {preview.imageUrl && (
+        <img
+          src={preview.imageUrl}
+          alt=""
+          className="h-48 w-full object-cover"
+          loading="lazy"
+        />
+      )}
+      <div className="p-3">
+        {domain && (
+          <div className="text-muted-foreground text-xs">{domain}</div>
+        )}
+        {preview.title && (
+          <div className="font-medium text-pretty">{preview.title}</div>
+        )}
+        {preview.description && (
+          <div className="text-muted-foreground line-clamp-2 text-sm text-pretty">
+            {preview.description}
+          </div>
+        )}
+      </div>
+    </>
+  );
+
+  if (!href) {
+    return (
+      <div className="mt-2 block overflow-hidden rounded-xl border">
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="hover:bg-muted/50 mt-2 block overflow-hidden rounded-xl border transition-colors"
+    >
+      {content}
+    </a>
+  );
+}
+
+function QuotedPostCard({ post }: { post: XPostData }) {
+  return (
+    <div className="hover:bg-muted/30 mt-2 rounded-xl border p-3 transition-colors">
+      <div className="flex min-w-0 items-center gap-1">
+        <img
+          src={post.author.avatarUrl}
+          alt={`${post.author.name} avatar`}
+          width={16}
+          height={16}
+          className="size-4 rounded-full object-cover"
+        />
+        <span className="truncate font-semibold">{post.author.name}</span>
+        {post.author.verified && (
+          <VerifiedBadge className="size-3.5 shrink-0 text-blue-500" />
+        )}
+        <span className="text-muted-foreground truncate">
+          @{post.author.handle}
+        </span>
+        {post.createdAt && (
+          <>
+            <span className="text-muted-foreground shrink-0">·</span>
+            <span className="text-muted-foreground shrink-0">
+              {formatRelativeTime(post.createdAt)}
+            </span>
+          </>
+        )}
+      </div>
+      {post.text && <p className="mt-1.5">{post.text}</p>}
+      {post.media && (
+        <img
+          src={post.media.url}
+          alt={post.media.alt}
+          className="mt-2 rounded-lg"
+        />
+      )}
+    </div>
+  );
+}
+
+function ActionButton({
+  icon: Icon,
+  label,
+  count,
+  active,
+  hoverColor,
+  activeColor,
+  onClick,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  count?: number;
+  active?: boolean;
+  hoverColor: string;
+  activeColor?: string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick();
+          }}
+          className={cn(
+            "h-auto gap-1.5 px-2 py-1",
+            hoverColor,
+            active && activeColor,
+          )}
+          aria-label={label}
+        >
+          <Icon className="size-4" />
+          {count !== undefined && (
+            <span className="text-sm">{formatCount(count)}</span>
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function PostActions({
+  stats,
+  onAction,
+}: {
+  stats?: XPostData["stats"];
+  onAction: (action: string) => void;
+}) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className="mt-3 flex items-center gap-4">
+        <ActionButton
+          icon={Heart}
+          label="Like"
+          count={stats?.likes}
+          active={stats?.isLiked}
+          hoverColor="hover:text-pink-500 hover:bg-pink-500/10"
+          activeColor="text-pink-500 fill-pink-500"
+          onClick={() => onAction("like")}
+        />
+        <ActionButton
+          icon={Share}
+          label="Share"
+          hoverColor="hover:text-blue-500 hover:bg-blue-500/10"
+          onClick={() => onAction("share")}
+        />
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export function XPost({ post, className, onAction }: XPostProps) {
+  return (
+    <div
+      className={cn("flex max-w-xl flex-col gap-3", className)}
+      data-tool-ui-id={post.id}
+      data-slot="x-post"
+    >
+      <article className="bg-card rounded-xl border p-3 shadow-sm">
+        <div className="flex gap-3">
+          <Avatar
+            src={post.author.avatarUrl}
+            alt={`${post.author.name} avatar`}
+          />
+          <div className="min-w-0 flex-1">
+            <div className="flex items-start justify-between gap-2">
+              <AuthorInfo
+                name={post.author.name}
+                handle={post.author.handle}
+                verified={post.author.verified}
+                createdAt={post.createdAt}
+              />
+              <XLogo className="text-muted-foreground/40 size-4" />
+            </div>
+            <PostBody text={post.text} />
+            {post.media && <PostMedia media={post.media} />}
+            {post.quotedPost && <QuotedPostCard post={post.quotedPost} />}
+            {post.linkPreview && !post.quotedPost && (
+              <PostLinkPreview preview={post.linkPreview} />
+            )}
+            <PostActions
+              stats={post.stats}
+              onAction={(action) => onAction?.(action, post)}
+            />
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}
diff --git a/frontend/src/toolui/lib/utils.ts b/frontend/src/toolui/lib/utils.ts
new file mode 100644
index 00000000..a5ef1935
--- /dev/null
+++ b/frontend/src/toolui/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/frontend/src/toolui/registry.tsx b/frontend/src/toolui/registry.tsx
new file mode 100644
index 00000000..34d620ae
--- /dev/null
+++ b/frontend/src/toolui/registry.tsx
@@ -0,0 +1,102 @@
+import React, { lazy } from 'react';
+import type { ZodType } from 'zod';
+import './toolui.css';
+
+/** One vendored tool-ui component: lazy renderer + the upstream Serializable wire schema. */
+export interface ToolUiEntry {
+  Component: React.LazyExoticComponent<React.ComponentType<any>>;
+  loadSchema: () => Promise<ZodType<any>>;
+}
+
+/* Every entry lazy-loads both the component and its zod contract so the chat bundle only pays
+   for components a transcript actually uses. Names mirror upstream tool-ui component slugs. */
+export const TOOL_UI_REGISTRY: Record<string, ToolUiEntry> = {
+  'approval-card': {
+    Component: lazy(() => import('./components/approval-card').then((m) => ({ default: m.ApprovalCard }))),
+    loadSchema: () => import('./components/approval-card/schema').then((m) => m.SerializableApprovalCardSchema),
+  },
+  'citation': {
+    Component: lazy(() => import('./components/citation').then((m) => ({ default: m.Citation }))),
+    loadSchema: () => import('./components/citation/schema').then((m) => m.SerializableCitationSchema),
+  },
+  'data-table': {
+    Component: lazy(() => import('./components/data-table').then((m) => ({ default: m.DataTable }))),
+    loadSchema: () => import('./components/data-table/schema').then((m) => m.SerializableDataTableSchema),
+  },
+  'image': {
+    Component: lazy(() => import('./components/image').then((m) => ({ default: m.Image }))),
+    loadSchema: () => import('./components/image/schema').then((m) => m.SerializableImageSchema),
+  },
+  'image-gallery': {
+    Component: lazy(() => import('./components/image-gallery').then((m) => ({ default: m.ImageGallery }))),
+    loadSchema: () => import('./components/image-gallery/schema').then((m) => m.SerializableImageGallerySchema),
+  },
+  'instagram-post': {
+    Component: lazy(() => import('./components/instagram-post').then((m) => ({ default: m.InstagramPost }))),
+    loadSchema: () => import('./components/instagram-post/schema').then((m) => m.SerializableInstagramPostSchema),
+  },
+  'item-carousel': {
+    Component: lazy(() => import('./components/item-carousel').then((m) => ({ default: m.ItemCarousel }))),
+    loadSchema: () => import('./components/item-carousel/schema').then((m) => m.SerializableItemSchema),
+  },
+  'link-preview': {
+    Component: lazy(() => import('./components/link-preview').then((m) => ({ default: m.LinkPreview }))),
+    loadSchema: () => import('./components/link-preview/schema').then((m) => m.SerializableLinkPreviewSchema),
+  },
+  'linkedin-post': {
+    Component: lazy(() => import('./components/linkedin-post').then((m) => ({ default: m.LinkedInPost }))),
+    loadSchema: () => import('./components/linkedin-post/schema').then((m) => m.SerializableLinkedInPostSchema),
+  },
+  'message-draft': {
+    Component: lazy(() => import('./components/message-draft').then((m) => ({ default: m.MessageDraft }))),
+    loadSchema: () => import('./components/message-draft/schema').then((m) => m.SerializableEmailDraftSchema),
+  },
+  'option-list': {
+    Component: lazy(() => import('./components/option-list').then((m) => ({ default: m.OptionList }))),
+    loadSchema: () => import('./components/option-list/schema').then((m) => m.SerializableOptionListSchema),
+  },
+  'order-summary': {
+    Component: lazy(() => import('./components/order-summary').then((m) => ({ default: m.OrderSummary }))),
+    loadSchema: () => import('./components/order-summary/schema').then((m) => m.SerializableOrderSummarySchema),
+  },
+  'parameter-slider': {
+    Component: lazy(() => import('./components/parameter-slider').then((m) => ({ default: m.ParameterSlider }))),
+    loadSchema: () => import('./components/parameter-slider/schema').then((m) => m.SerializableParameterSliderSchema),
+  },
+  'plan': {
+    Component: lazy(() => import('./components/plan').then((m) => ({ default: m.Plan }))),
+    loadSchema: () => import('./components/plan/schema').then((m) => m.SerializablePlanSchema),
+  },
+  'preferences-panel': {
+    Component: lazy(() => import('./components/preferences-panel').then((m) => ({ default: m.PreferencesPanel }))),
+    loadSchema: () => import('./components/preferences-panel/schema').then((m) => m.SerializablePreferencesPanelSchema),
+  },
+  'progress-tracker': {
+    Component: lazy(() => import('./components/progress-tracker').then((m) => ({ default: m.ProgressTracker }))),
+    loadSchema: () => import('./components/progress-tracker/schema').then((m) => m.SerializableProgressTrackerSchema),
+  },
+  'question-flow': {
+    Component: lazy(() => import('./components/question-flow').then((m) => ({ default: m.QuestionFlow }))),
+    loadSchema: () => import('./components/question-flow/schema').then((m) => m.SerializableProgressiveModeSchema),
+  },
+  'stats-display': {
+    Component: lazy(() => import('./components/stats-display').then((m) => ({ default: m.StatsDisplay }))),
+    loadSchema: () => import('./components/stats-display/schema').then((m) => m.SerializableStatsDisplaySchema),
+  },
+  'terminal': {
+    Component: lazy(() => import('./components/terminal').then((m) => ({ default: m.Terminal }))),
+    loadSchema: () => import('./components/terminal/schema').then((m) => m.SerializableTerminalSchema),
+  },
+  'video': {
+    Component: lazy(() => import('./components/video').then((m) => ({ default: m.Video }))),
+    loadSchema: () => import('./components/video/schema').then((m) => m.SerializableVideoSchema),
+  },
+  'x-post': {
+    Component: lazy(() => import('./components/x-post').then((m) => ({ default: m.XPost }))),
+    loadSchema: () => import('./components/x-post/schema').then((m) => m.SerializableXPostSchema),
+  },
+};
+
+export function isToolUiComponent(name: string): boolean {
+  return Object.prototype.hasOwnProperty.call(TOOL_UI_REGISTRY, name);
+}
diff --git a/frontend/src/toolui/toolui.css b/frontend/src/toolui/toolui.css
new file mode 100644
index 00000000..d8f14243
--- /dev/null
+++ b/frontend/src/toolui/toolui.css
@@ -0,0 +1,141 @@
+/* Vendored tool-ui styling: Tailwind v4 UTILITIES ONLY (no preflight import, so MUI and app
+   styles are untouched) plus the shadcn theme variables scoped to .tool-ui-scope. */
+@custom-variant dark (&:is(.dark *));
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "tw-animate-css";
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+}
+
+/* Scoped mini-preflight: exactly the resets the vendored components rely on, never global. */
+.tool-ui-scope,
+.tool-ui-scope *,
+.tool-ui-scope *::before,
+.tool-ui-scope *::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--border);
+}
+.tool-ui-scope button {
+  background-color: transparent;
+  background-image: none;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+}
+.tool-ui-scope p,
+.tool-ui-scope h1,
+.tool-ui-scope h2,
+.tool-ui-scope h3,
+.tool-ui-scope h4,
+.tool-ui-scope ul,
+.tool-ui-scope ol,
+.tool-ui-scope figure {
+  margin: 0;
+}
+.tool-ui-scope ul,
+.tool-ui-scope ol {
+  list-style: none;
+  padding: 0;
+}
+.tool-ui-scope img,
+.tool-ui-scope video,
+.tool-ui-scope canvas {
+  max-width: 100%;
+  display: block;
+}
+.tool-ui-scope {
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.tool-ui-scope {
+  color-scheme: light;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.723 0.219 149.579);
+  --chart-2: oklch(0.637 0.237 25.331);
+  --chart-3: oklch(0.623 0.214 259.815);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.795 0.184 86.047);
+}
+
+.tool-ui-scope.dark,
+.dark .tool-ui-scope {
+  color-scheme: dark;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.792 0.209 151.711);
+  --chart-2: oklch(0.704 0.191 22.216);
+  --chart-3: oklch(0.707 0.165 254.624);
+  --chart-4: oklch(0.714 0.203 305.504);
+  --chart-5: oklch(0.852 0.199 91.936);
+}
diff --git a/frontend/src/toolui/ui/accordion.tsx b/frontend/src/toolui/ui/accordion.tsx
new file mode 100644
index 00000000..05a8f267
--- /dev/null
+++ b/frontend/src/toolui/ui/accordion.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:scale-y-[-1]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="group data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-y-clip overflow-x-visible text-sm"
+      {...props}
+    >
+      <div
+        className={cn(
+          "pt-0 pb-4",
+          "group-data-[state=open]:animate-in group-data-[state=open]:fade-in-0",
+          "group-data-[state=closed]:animate-out group-data-[state=closed]:fade-out-0",
+          "duration-200",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/frontend/src/toolui/ui/alert.tsx b/frontend/src/toolui/ui/alert.tsx
new file mode 100644
index 00000000..6c3af783
--- /dev/null
+++ b/frontend/src/toolui/ui/alert.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        warning:
+          "border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/50 dark:text-amber-200 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend/src/toolui/ui/avatar.tsx b/frontend/src/toolui/ui/avatar.tsx
new file mode 100644
index 00000000..0c3fc777
--- /dev/null
+++ b/frontend/src/toolui/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@toolui/lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/frontend/src/toolui/ui/badge.tsx b/frontend/src/toolui/ui/badge.tsx
new file mode 100644
index 00000000..21f94264
--- /dev/null
+++ b/frontend/src/toolui/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        warning:
+          "border-transparent bg-amber-500/10 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400 [a&]:hover:bg-amber-500/20 dark:[a&]:hover:bg-amber-500/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/frontend/src/toolui/ui/button-group.tsx b/frontend/src/toolui/ui/button-group.tsx
new file mode 100644
index 00000000..2e2ef94b
--- /dev/null
+++ b/frontend/src/toolui/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+import { Separator } from "@toolui/ui/separator";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};
diff --git a/frontend/src/toolui/ui/button.tsx b/frontend/src/toolui/ui/button.tsx
new file mode 100644
index 00000000..c242889b
--- /dev/null
+++ b/frontend/src/toolui/ui/button.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+        homeCTA: "rounded-full px-6 py-3 text-lg w-fit text-start",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/frontend/src/toolui/ui/card.tsx b/frontend/src/toolui/ui/card.tsx
new file mode 100644
index 00000000..30477315
--- /dev/null
+++ b/frontend/src/toolui/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};
diff --git a/frontend/src/toolui/ui/collapsible.tsx b/frontend/src/toolui/ui/collapsible.tsx
new file mode 100644
index 00000000..32c4a525
--- /dev/null
+++ b/frontend/src/toolui/ui/collapsible.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cn } from "@toolui/lib/utils";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      className={cn(
+        "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/frontend/src/toolui/ui/dialog.tsx b/frontend/src/toolui/ui/dialog.tsx
new file mode 100644
index 00000000..d3e1b90b
--- /dev/null
+++ b/frontend/src/toolui/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/frontend/src/toolui/ui/dropdown-menu.tsx b/frontend/src/toolui/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..2c1ded35
--- /dev/null
+++ b/frontend/src/toolui/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@toolui/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
diff --git a/frontend/src/toolui/ui/input-group.tsx b/frontend/src/toolui/ui/input-group.tsx
new file mode 100644
index 00000000..7321a233
--- /dev/null
+++ b/frontend/src/toolui/ui/input-group.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+import { Button } from "@toolui/ui/button";
+import { Input } from "@toolui/ui/input";
+import { Textarea } from "@toolui/ui/textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};
diff --git a/frontend/src/toolui/ui/input.tsx b/frontend/src/toolui/ui/input.tsx
new file mode 100644
index 00000000..81cd6e1d
--- /dev/null
+++ b/frontend/src/toolui/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/frontend/src/toolui/ui/item.tsx b/frontend/src/toolui/ui/item.tsx
new file mode 100644
index 00000000..11ad8f6f
--- /dev/null
+++ b/frontend/src/toolui/ui/item.tsx
@@ -0,0 +1,193 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+import { Separator } from "@toolui/ui/separator";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-0", className)}
+      {...props}
+    />
+  );
+}
+
+const itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};
diff --git a/frontend/src/toolui/ui/label.tsx b/frontend/src/toolui/ui/label.tsx
new file mode 100644
index 00000000..986b7839
--- /dev/null
+++ b/frontend/src/toolui/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@toolui/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/frontend/src/toolui/ui/popover.tsx b/frontend/src/toolui/ui/popover.tsx
new file mode 100644
index 00000000..1ba8de99
--- /dev/null
+++ b/frontend/src/toolui/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@toolui/lib/utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/frontend/src/toolui/ui/radio-group.tsx b/frontend/src/toolui/ui/radio-group.tsx
new file mode 100644
index 00000000..447fdfe3
--- /dev/null
+++ b/frontend/src/toolui/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+
+import { cn } from "@toolui/lib/utils";
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/frontend/src/toolui/ui/select.tsx b/frontend/src/toolui/ui/select.tsx
new file mode 100644
index 00000000..3e90234a
--- /dev/null
+++ b/frontend/src/toolui/ui/select.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/frontend/src/toolui/ui/separator.tsx b/frontend/src/toolui/ui/separator.tsx
new file mode 100644
index 00000000..b278c01b
--- /dev/null
+++ b/frontend/src/toolui/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@toolui/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/frontend/src/toolui/ui/sheet.tsx b/frontend/src/toolui/ui/sheet.tsx
new file mode 100644
index 00000000..1acc4557
--- /dev/null
+++ b/frontend/src/toolui/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/frontend/src/toolui/ui/skeleton.tsx b/frontend/src/toolui/ui/skeleton.tsx
new file mode 100644
index 00000000..7c678308
--- /dev/null
+++ b/frontend/src/toolui/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@toolui/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/frontend/src/toolui/ui/slider.tsx b/frontend/src/toolui/ui/slider.tsx
new file mode 100644
index 00000000..144f3aac
--- /dev/null
+++ b/frontend/src/toolui/ui/slider.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@toolui/lib/utils";
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };
diff --git a/frontend/src/toolui/ui/switch.tsx b/frontend/src/toolui/ui/switch.tsx
new file mode 100644
index 00000000..079e3ddb
--- /dev/null
+++ b/frontend/src/toolui/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "@toolui/lib/utils";
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/frontend/src/toolui/ui/table.tsx b/frontend/src/toolui/ui/table.tsx
new file mode 100644
index 00000000..ce44e1ef
--- /dev/null
+++ b/frontend/src/toolui/ui/table.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };
diff --git a/frontend/src/toolui/ui/tabs.tsx b/frontend/src/toolui/ui/tabs.tsx
new file mode 100644
index 00000000..6cf21e43
--- /dev/null
+++ b/frontend/src/toolui/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@toolui/lib/utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground hover:text-primary inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/frontend/src/toolui/ui/textarea.tsx b/frontend/src/toolui/ui/textarea.tsx
new file mode 100644
index 00000000..c82f2767
--- /dev/null
+++ b/frontend/src/toolui/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@toolui/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/frontend/src/toolui/ui/toggle-group.tsx b/frontend/src/toolui/ui/toggle-group.tsx
new file mode 100644
index 00000000..f234cb2c
--- /dev/null
+++ b/frontend/src/toolui/ui/toggle-group.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+import { toggleVariants } from "@toolui/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/frontend/src/toolui/ui/toggle.tsx b/frontend/src/toolui/ui/toggle.tsx
new file mode 100644
index 00000000..632c65b0
--- /dev/null
+++ b/frontend/src/toolui/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@toolui/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };
diff --git a/frontend/src/toolui/ui/tooltip.tsx b/frontend/src/toolui/ui/tooltip.tsx
new file mode 100644
index 00000000..7c3dd14f
--- /dev/null
+++ b/frontend/src/toolui/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@toolui/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 247abeb6..40c123f0 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -19,7 +19,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@toolui/*": ["./src/toolui/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 3556793b..1cc3c782 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -31,6 +31,15 @@ module.exports = (env, argv) => {
             }
           }
         },
+        {
+          // Vendored tool-ui styles: Tailwind v4 utilities compiled through PostCSS, scoped under .tool-ui-scope.
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            { loader: 'css-loader', options: { importLoaders: 1 } },
+            { loader: 'postcss-loader', options: { postcssOptions: { plugins: ['@tailwindcss/postcss'] } } },
+          ],
+        },
         {
           test: /\.module\.(scss|sass)$/,
           use: [
@@ -53,7 +62,8 @@ module.exports = (env, argv) => {
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       alias: {
-        '@': path.resolve(__dirname, 'src')
+        '@': path.resolve(__dirname, 'src'),
+        '@toolui': path.resolve(__dirname, 'src/toolui')
       }
     },
 

From 17b3a5f1571d621afa90e89588a78eecffaf5212 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 22:55:09 -0700
Subject: [PATCH 084/248] [eric] chat: AskUI blocking channel (interactive
 tool-ui answers flow back as tool results) + restore
 audio/chart/code-block/code-diff/geo-map + zod-generated prop hints

---
 .../permissions/build_effective_tool_lists.py |   9 +-
 .../manager/register_builtin_mcp_servers.py   |  12 +-
 backend/apps/agents/show_ui_mcp_server.py     | 131 ++-
 backend/apps/agents/ui_request_bridge.py      |  56 ++
 backend/main.py                               |  37 +
 frontend/package-lock.json                    | 878 +++++++++++++++++-
 frontend/package.json                         |  10 +-
 frontend/scripts/gen-toolui-hints.ts          |  73 ++
 .../src/app/pages/AgentChat/AgentChat.tsx     |  17 +-
 .../pages/AgentChat/tool-ui/AskUiBubble.tsx   |  88 ++
 .../pages/AgentChat/tool-ui/showUiPayload.ts  |   5 +
 frontend/src/toolui/VendoredToolUi.tsx        |   6 +-
 .../src/toolui/components/audio/README.md     |  19 +
 .../src/toolui/components/audio/_adapter.tsx  |   8 +
 .../src/toolui/components/audio/audio.tsx     | 341 +++++++
 .../src/toolui/components/audio/context.tsx   |  53 ++
 frontend/src/toolui/components/audio/index.ts |   5 +
 .../src/toolui/components/audio/schema.ts     |  46 +
 .../src/toolui/components/chart/README.md     |  19 +
 .../src/toolui/components/chart/_adapter.tsx  |  27 +
 .../src/toolui/components/chart/chart.tsx     | 180 ++++
 .../src/toolui/components/chart/index.tsx     |   8 +
 .../src/toolui/components/chart/schema.ts     | 121 +++
 .../toolui/components/code-block/README.md    |  19 +
 .../toolui/components/code-block/_adapter.tsx |  14 +
 .../components/code-block/code-block.tsx      | 469 ++++++++++
 .../toolui/components/code-block/index.tsx    |  11 +
 .../toolui/components/code-block/schema.ts    |  43 +
 .../toolui/components/code-diff/_adapter.tsx  |  14 +
 .../toolui/components/code-diff/code-diff.tsx | 463 +++++++++
 .../src/toolui/components/code-diff/index.tsx |   7 +
 .../src/toolui/components/code-diff/schema.ts |  71 ++
 .../src/toolui/components/geo-map/README.md   |  24 +
 .../toolui/components/geo-map/_adapter.tsx    |  23 +
 .../components/geo-map/geo-map-engine.tsx     | 756 +++++++++++++++
 .../components/geo-map/geo-map-icons.ts       | 131 +++
 .../components/geo-map/geo-map-overlays.tsx   |  86 ++
 .../geo-map/geo-map-theme.module.css          | 216 +++++
 .../src/toolui/components/geo-map/geo-map.tsx | 162 ++++
 .../src/toolui/components/geo-map/index.tsx   |  16 +
 .../components/geo-map/leaflet-overrides.css  |  37 +
 .../src/toolui/components/geo-map/schema.ts   | 198 ++++
 frontend/src/toolui/registry.tsx              |  20 +
 frontend/src/toolui/ui/chart.tsx              | 357 +++++++
 44 files changed, 5207 insertions(+), 79 deletions(-)
 create mode 100644 backend/apps/agents/ui_request_bridge.py
 create mode 100644 frontend/scripts/gen-toolui-hints.ts
 create mode 100644 frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
 create mode 100644 frontend/src/toolui/components/audio/README.md
 create mode 100644 frontend/src/toolui/components/audio/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/audio/audio.tsx
 create mode 100644 frontend/src/toolui/components/audio/context.tsx
 create mode 100644 frontend/src/toolui/components/audio/index.ts
 create mode 100644 frontend/src/toolui/components/audio/schema.ts
 create mode 100644 frontend/src/toolui/components/chart/README.md
 create mode 100644 frontend/src/toolui/components/chart/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/chart/chart.tsx
 create mode 100644 frontend/src/toolui/components/chart/index.tsx
 create mode 100644 frontend/src/toolui/components/chart/schema.ts
 create mode 100644 frontend/src/toolui/components/code-block/README.md
 create mode 100644 frontend/src/toolui/components/code-block/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/code-block/code-block.tsx
 create mode 100644 frontend/src/toolui/components/code-block/index.tsx
 create mode 100644 frontend/src/toolui/components/code-block/schema.ts
 create mode 100644 frontend/src/toolui/components/code-diff/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/code-diff/code-diff.tsx
 create mode 100644 frontend/src/toolui/components/code-diff/index.tsx
 create mode 100644 frontend/src/toolui/components/code-diff/schema.ts
 create mode 100644 frontend/src/toolui/components/geo-map/README.md
 create mode 100644 frontend/src/toolui/components/geo-map/_adapter.tsx
 create mode 100644 frontend/src/toolui/components/geo-map/geo-map-engine.tsx
 create mode 100644 frontend/src/toolui/components/geo-map/geo-map-icons.ts
 create mode 100644 frontend/src/toolui/components/geo-map/geo-map-overlays.tsx
 create mode 100644 frontend/src/toolui/components/geo-map/geo-map-theme.module.css
 create mode 100644 frontend/src/toolui/components/geo-map/geo-map.tsx
 create mode 100644 frontend/src/toolui/components/geo-map/index.tsx
 create mode 100644 frontend/src/toolui/components/geo-map/leaflet-overrides.css
 create mode 100644 frontend/src/toolui/components/geo-map/schema.ts
 create mode 100644 frontend/src/toolui/ui/chart.tsx

diff --git a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
index 4a3833f6..0fa88449 100644
--- a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
+++ b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
@@ -82,10 +82,11 @@ def build_effective_tool_lists(
 
             if name == "openswarm-ui":
                 policy = builtin_perms.get("ShowUI", "always_allow")
-                if policy == "always_allow":
-                    effective_allowed.append("mcp__openswarm-ui__ShowUI")
-                else:
-                    effective_disallowed.append("mcp__openswarm-ui__ShowUI")
+                for ui_tool in ("ShowUI", "AskUI"):
+                    if policy == "always_allow":
+                        effective_allowed.append(f"mcp__openswarm-ui__{ui_tool}")
+                    else:
+                        effective_disallowed.append(f"mcp__openswarm-ui__{ui_tool}")
                 continue
 
             if name == "openswarm-web":
diff --git a/backend/apps/agents/manager/register_builtin_mcp_servers.py b/backend/apps/agents/manager/register_builtin_mcp_servers.py
index 80d54966..32e25239 100644
--- a/backend/apps/agents/manager/register_builtin_mcp_servers.py
+++ b/backend/apps/agents/manager/register_builtin_mcp_servers.py
@@ -159,16 +159,20 @@ def register_builtin_mcp_servers(
         "type": "stdio",
     }
 
-    # Display-only ShowUI server: renders rich inline components (weather, plan, stats, links)
-    # in the transcript. Pure display, no state mutation; the frontend renders from the
-    # tool_call input, the server only validates. Gated on the ShowUI builtin perm.
+    # ShowUI renders rich inline components from the tool_call input (display only, server just
+    # validates); AskUI renders an interactive component and BLOCKS on /api/ui-requests/wait until
+    # the user answers in the transcript. Gated on the ShowUI builtin perm.
     show_ui_denied = builtin_perms.get("ShowUI", "always_allow") == "deny"
     if not show_ui_denied:
         show_ui_server_path = os.path.join(agents_dir, "show_ui_mcp_server.py")
         mcp_servers["openswarm-ui"] = {
             "command": sys.executable,
             "args": [show_ui_server_path],
-            "env": {},
+            "env": {
+                "OPENSWARM_PORT": os.environ.get("OPENSWARM_PORT", "8324"),
+                "OPENSWARM_AUTH_TOKEN": get_auth_token(),
+                "OPENSWARM_PARENT_SESSION_ID": session.id,
+            },
             "type": "stdio",
         }
 
diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
index e00504d3..cdf22bf9 100644
--- a/backend/apps/agents/show_ui_mcp_server.py
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -7,40 +7,84 @@ backend round-trip and nothing here can mutate state.
 """
 
 import json
+import os
 import sys
+import urllib.error
+import urllib.request
+
+BACKEND_PORT = os.environ.get("OPENSWARM_PORT", "8324")
+BACKEND_AUTH = os.environ.get("OPENSWARM_AUTH_TOKEN", "")
+PARENT_SESSION_ID = os.environ.get("OPENSWARM_PARENT_SESSION_ID", "")
+WAIT_URL = f"http://127.0.0.1:{BACKEND_PORT}/api/ui-requests/wait"
+ASK_TIMEOUT_S = 600
 
 MAX_PROPS_BYTES = 20_000
 
 COMPONENT_SPECS = {
     "weather": "props: {location: str, temp: number, unit?: 'F'|'C', high?: number, low?: number, condition?: str, forecast?: [{day: str, condition?: str, high: number, low?: number}] (max 7)}",
-    "plan": "props: {title?: str, steps: [{label: str, status: 'pending'|'in_progress'|'completed'}] (max 20)}",
     "stats": "props: {title?: str, stats: [{label: str, value: str, delta?: str, direction?: 'up'|'down'}] (max 8)}",
     "links": "props: {links: [{title: str, url: str, description?: str}] (max 10)}",
-    # tool-ui vendored set: props follow the upstream Serializable contracts (https://tool-ui.com);
-    # the client validates strictly and shows a validation note instead of rendering on mismatch.
-    "data-table": "tabular results. props: {id: str, columns: [{key: str, label: str}], data: [{<key>: str|number|bool}]}",
-    "citation": "sourced claims. props: {id: str, citations: [{id: str, title: str, url?: str, snippet?: str}]}",
-    "item-carousel": "browsable items. props: {id: str, items: [{id: str, title: str, description?: str, imageUrl?: str, badge?: str}]}",
-    "link-preview": "one rich link card. props: {id: str, url: str, title: str, description?: str, imageUrl?: str, siteName?: str}",
-    "progress-tracker": "multi-stage progress. props: {id: str, stages: [{id: str, label: str, status: 'pending'|'active'|'complete'|'error'}]}",
-    "order-summary": "purchase/receipt breakdown. props: {id: str, items: [{id: str, label: str, amount: number}], total?: number, currency?: str}",
-    "terminal": "command output. props: {id: str, command?: str, output: str}",
-    "image": "single image. props: {id: str, src: str, alt?: str, caption?: str}",
-    "image-gallery": "several images. props: {id: str, images: [{src: str, alt?: str}]}",
-    "video": "video embed. props: {id: str, src: str, poster?: str, title?: str}",
-    "message-draft": "email/message draft for review. props: {id: str, to?: [str], subject?: str, body: str}",
-    "x-post": "an X/Twitter post preview. props: {id: str, author: {name: str, handle: str}, text: str}",
-    "linkedin-post": "a LinkedIn post preview. props: {id: str, author: {name: str, headline?: str}, text: str}",
-    "instagram-post": "an Instagram post preview. props: {id: str, username: str, imageUrl: str, caption?: str}",
-    "option-list": "choices for the user (display for now). props: {id: str, options: [{id: str, label: str, description?: str}], selectionMode?: 'single'|'multi'}",
-    "question-flow": "step-by-step question sequence (display for now). props follow the upstream question-flow contract",
-    "parameter-slider": "adjustable parameters (display for now). props: {id: str, parameters: [{id: str, label: str, min: number, max: number, value: number, step?: number}]}",
-    "preferences-panel": "grouped preference toggles (display for now). props follow the upstream preferences-panel contract",
-    "approval-card": "an approve/reject summary card. props follow the upstream approval-card contract",
-    "stats-display": "upstream stats-display contract (prefer 'stats' unless you need its exact shape)",
+    # Vendored tool-ui set (MIT, https://tool-ui.com); hints are AUTO-GENERATED from the shipped zod
+    # contracts by frontend/scripts/gen-toolui-hints.ts. Regenerate after upgrading src/toolui.
+    "approval-card": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', title: str, description?: str, icon?: str, metadata?: [{key: str, value: str}], variant?: 'default'|'destructive', confirmLabel?: str, cancelLabel?: str, choice?: 'approved'|'denied'}",
+    "audio": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, assetId: str, src: str, title?: str, description?: str, artwork?: str, durationMs?: num, fileSizeBytes?: num, createdAt?: str, locale?: str, source?: {label: str, iconUrl?: str, u...",
+    "chart": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, type: 'bar'|'line', title?: str, description?: str, data: [{}], xKey: str, series: [{key: str, label: str, color?: str}], colors?: [str], showLegend?: bool, showGrid?: bool}",
+    "citation": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, href: str, title: str, snippet?: str, domain?: str, favicon?: str, author?: str, publishedAt?: str, type?: 'webpage'|'document'|'article'|'api'|'code'|'other', locale?: str}",
+    "code-block": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, code: str, language?: str, lineNumbers?: 'visible'|'hidden', filename?: str, highlightLines?: [num], maxCollapsedLines?: num}",
+    "code-diff": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, oldCode?: str, newCode?: str, patch?: str, language?: str, filename?: str, lineNumbers?: 'visible'|'hidden', diffStyle?: 'unified'|'split', maxCollapsedLines?: num}",
+    "data-table": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, columns: [{key: str, label: str, abbr?: str, sortable?: bool, align?: 'left'|'right'|'center', width?: str, truncate?: bool, priority?: 'primary'|'secondary'|'tertiary', hideOnMob...",
+    "geo-map": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, title?: str, description?: str, markers: [{id?: str, lat: num, lng: num, label?: str, description?: str, tooltip?: 'none'|'hover'|'always', icon?: obj|obj|obj}], routes?: [{id?: s...",
+    "image": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, assetId: str, src: str, alt: str, title?: str, description?: str, href?: str, domain?: str, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain', fileSizeBytes?: num,...",
+    "image-gallery": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, images: [{id: str, src: str, alt: str, width: num, height: num, title?: str, caption?: str, source?: obj}], title?: str, description?: str}",
+    "instagram-post": "props: {id: str, author: {name: str, handle: str, avatarUrl: str, verified?: bool}, text?: str, media?: [{type: 'image'|'video', url: str, alt: str}], stats?: {likes?: num, isLiked?: bool}, createdAt?: str}",
+    "item-carousel": "props: {id: str, name: str, subtitle?: str, image?: str, color?: str, actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|'outline', loading?: bool, disabled?: bool, shortcut?: str}]}",
+    "link-preview": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, href: str, title?: str, description?: str, image?: str, domain?: str, favicon?: str, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain', createdAt?: str, locale?: str}",
+    "linkedin-post": "props: {id: str, author: {name: str, avatarUrl: str, headline?: str}, text?: str, media?: {type: 'image'|'video', url: str, alt: str}, linkPreview?: {url: str, title?: str, description?: str, imageUrl?: str, domain?: str}, stats?: {likes?: num, isLiked?: bool}, createdAt?: str}",
+    "message-draft": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', body: str, outcome?: 'sent'|'cancelled', channel: str, subject: str, from?: str, to: [str], cc?: [str], bcc?: [str]}",
+    "option-list": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, options: [{id: str, label: str, description?: str, disabled?: bool}], selectionMode?: 'multi'|'single', defaultValue?: [str]|str|any, choice?: [str]|str|any, actions?: [{id: str, ...",
+    "order-summary": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', title?: str, variant?: 'summary'|'receipt', items: [{id: str, name: str, description?: str, imageUrl?: str, quantity?: num, unitPrice: num}], pricing: {subtotal: num, tax?: num, taxLabel?: str, shipping?: num, discount?: num, discountLabel?: str, total: num, currency?: str}, choice?:...",
+    "parameter-slider": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', sliders: [{id: str, label: str, min: num, max: num, step?: num, value: num, unit?: str, precision?: num, disabled?: bool, trackClassName?: str, fillClassName?: str, handleClassName?: str}], actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'dest...",
+    "plan": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, title: str, description?: str, todos: [{id: str, label: str, status: 'pending'|'in_progress'|'completed'|'cancelled', description?: str}], maxVisibleTodos?: num}",
+    "preferences-panel": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, title?: str, sections: [{heading?: str, items: [any]}], actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|...",
+    "progress-tracker": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', steps: [{id: str, label: str, description?: str, status: 'pending'|'in-progress'|'completed'|'failed'}], elapsedTime?: num, choice?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}}",
+    "question-flow": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', step: num, title: str, description?: str, options: [{id: str, label: str, description?: str, disabled?: bool}], selectionMode?: 'single'|'multi'}",
+    "stats-display": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', title?: str, description?: str, stats: [{key: str, label: str, value: str|num, format?: any, diff?: obj, sparkline?: obj}]}",
+    "terminal": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, command: str, stdout?: str, stderr?: str, exitCode: num, durationMs?: num, cwd?: str, truncated?: bool, maxCollapsedLines?: num}",
+    "video": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, assetId: str, src: str, poster?: str, title?: str, description?: str, href?: str, domain?: str, durationMs?: num, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain'...",
+    "x-post": "props: {id: str, author: {name: str, handle: str, avatarUrl: str, verified?: bool}, text?: str, media?: {type: 'image'|'video', url: str, alt: str, aspectRatio?: '1:1'|'4:3'|'16:9'|'9:16'}, linkPreview?: {url: str, title?: str, description?: str, imageUrl?: str, domain?: str}, quotedPost?: any, stats?: {likes?: num, isLiked?: bool, isReposted?: bool, isBookmarke...",
 }
 
+INTERACTIVE_COMPONENTS = (
+    "option-list", "question-flow", "parameter-slider", "preferences-panel", "approval-card",
+)
+
 TOOLS = [
+    {
+        "name": "AskUI",
+        "description": (
+            "Render an INTERACTIVE component in the chat and WAIT for the user's answer (up to 10 "
+            "minutes); the tool result is their response. Use this instead of plain-text questions "
+            "when the choice fits a component. Components: "
+            + ", ".join(f"'{name}'" for name in INTERACTIVE_COMPONENTS)
+            + ". Props follow the same shapes as ShowUI (props.id is REQUIRED, it correlates the "
+            "answer). The response contains the action taken and the user's selection/values."
+        ),
+        "inputSchema": {
+            "type": "object",
+            "properties": {
+                "component": {
+                    "type": "string",
+                    "enum": list(INTERACTIVE_COMPONENTS),
+                    "description": "Which interactive component to render.",
+                },
+                "props": {
+                    "type": "object",
+                    "description": "Data for the component; must include a stable string id.",
+                },
+            },
+            "required": ["component", "props"],
+        },
+    },
     {
         "name": "ShowUI",
         "description": (
@@ -90,8 +134,6 @@ def validate(component: str, props: dict) -> str:
         return f"props too large ({size} bytes; max {MAX_PROPS_BYTES})."
     if component == "weather" and not (isinstance(props.get("location"), str) and isinstance(props.get("temp"), (int, float))):
         return f"weather needs at least location + temp. {COMPONENT_SPECS['weather']}"
-    if component == "plan" and not (isinstance(props.get("steps"), list) and props["steps"]):
-        return f"plan needs a non-empty steps list. {COMPONENT_SPECS['plan']}"
     if component == "stats" and not (isinstance(props.get("stats"), list) and props["stats"]):
         return f"stats needs a non-empty stats list. {COMPONENT_SPECS['stats']}"
     if component == "links" and not (isinstance(props.get("links"), list) and props["links"]):
@@ -101,7 +143,46 @@ def validate(component: str, props: dict) -> str:
     return ""
 
 
+def p_post(url: str, body: dict, timeout: float) -> dict:
+    payload = json.dumps(body).encode()
+    headers = {"Content-Type": "application/json"}
+    if BACKEND_AUTH:
+        headers["Authorization"] = f"Bearer {BACKEND_AUTH}"
+    req = urllib.request.Request(url, data=payload, headers=headers, method="POST")
+    try:
+        with urllib.request.urlopen(req, timeout=timeout) as resp:
+            return json.loads(resp.read().decode())
+    except urllib.error.HTTPError as e:
+        body_txt = e.read().decode(errors="replace") if e.fp else str(e)
+        return {"error": f"HTTP {e.code}: {body_txt[:300]}"}
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def handle_ask_ui(arguments: dict) -> dict:
+    component = str(arguments.get("component", "")).strip()
+    props = arguments.get("props")
+    if not isinstance(props, dict):
+        return {"content": [{"type": "text", "text": "props must be an object."}], "isError": True}
+    if component not in INTERACTIVE_COMPONENTS:
+        return {"content": [{"type": "text", "text": f"AskUI only supports: {', '.join(INTERACTIVE_COMPONENTS)}. Use ShowUI for display-only components."}], "isError": True}
+    component_id = str(props.get("id", "")).strip()
+    if not component_id:
+        return {"content": [{"type": "text", "text": "props.id (a stable string) is required so the answer can be correlated."}], "isError": True}
+    problem = validate(component, props)
+    if problem:
+        return {"content": [{"type": "text", "text": f"Not rendered: {problem}"}], "isError": True}
+    r = p_post(WAIT_URL, {"session_id": PARENT_SESSION_ID, "component_id": component_id, "timeout_s": ASK_TIMEOUT_S}, timeout=ASK_TIMEOUT_S + 20)
+    if "error" in r:
+        return {"content": [{"type": "text", "text": f"AskUI failed: {r['error']}"}], "isError": True}
+    if not r.get("ok"):
+        return {"content": [{"type": "text", "text": "The user didn't respond within 10 minutes. Continue without their input or ask again."}], "isError": True}
+    return {"content": [{"type": "text", "text": json.dumps(r.get("response"))}]}
+
+
 def handle_tool_call(tool_name: str, arguments: dict) -> dict:
+    if tool_name == "AskUI":
+        return handle_ask_ui(arguments)
     if tool_name != "ShowUI":
         return {"content": [{"type": "text", "text": f"Unknown tool: {tool_name}"}], "isError": True}
     component = str(arguments.get("component", "")).strip()
diff --git a/backend/apps/agents/ui_request_bridge.py b/backend/apps/agents/ui_request_bridge.py
new file mode 100644
index 00000000..4f14722c
--- /dev/null
+++ b/backend/apps/agents/ui_request_bridge.py
@@ -0,0 +1,56 @@
+"""Blocking bridge for interactive tool-ui components: AskUI parks here until the user
+answers in the transcript (or the wait times out). Keyed by (session_id, component props.id),
+so the frontend can respond without ever learning a server-side request id."""
+
+import asyncio
+from typing import Any, Dict, Optional, Tuple
+
+from pydantic import BaseModel, ConfigDict, InstanceOf
+from typeguard import typechecked
+
+MAX_PENDING = 50
+MAX_WAIT_SECONDS = 600.0
+
+
+class PendingUiRequest(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+    event: InstanceOf[asyncio.Event]
+    response: Optional[Dict[str, Any]] = None
+
+
+p_pending: Dict[Tuple[str, str], PendingUiRequest] = {}
+
+
+@typechecked
+async def wait_for_ui_response(session_id: str, component_id: str, timeout_s: float) -> Optional[Dict[str, Any]]:
+    """Registers the request and blocks until respond_to_ui_request fires it; None on timeout."""
+    if len(p_pending) >= MAX_PENDING:
+        raise ValueError("too many pending UI requests")
+    key = (session_id, component_id)
+    # A retried tool call for the same component replaces the stale wait; the old waiter times out.
+    pending = PendingUiRequest(event=asyncio.Event())
+    p_pending[key] = pending
+    try:
+        await asyncio.wait_for(pending.event.wait(), timeout=min(timeout_s, MAX_WAIT_SECONDS))
+        return pending.response
+    except asyncio.TimeoutError:
+        return None
+    finally:
+        if p_pending.get(key) is pending:
+            p_pending.pop(key, None)
+
+
+@typechecked
+def respond_to_ui_request(session_id: str, component_id: str, response: Dict[str, Any]) -> bool:
+    """Delivers the user's answer to the parked wait; False when nothing is waiting."""
+    pending = p_pending.get((session_id, component_id))
+    if pending is None:
+        return False
+    pending.response = response
+    pending.event.set()
+    return True
+
+
+@typechecked
+def has_pending_ui_request(session_id: str, component_id: str) -> bool:
+    return (session_id, component_id) in p_pending
diff --git a/backend/main.py b/backend/main.py
index d4f793fe..23c07edd 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -902,6 +902,43 @@ async def spawn_agent_run(request: Request):
         return JSONResponse({"error": str(e)}, status_code=500)
 
 
+@app.post("/api/ui-requests/wait")
+async def ui_request_wait(request: Request):
+    """AskUI's blocking half: parks until the user answers the interactive component in the
+    transcript. Called by the show_ui_mcp_server stdio subprocess."""
+    body = await request.json()
+    session_id = str(body.get("session_id", ""))
+    component_id = str(body.get("component_id", ""))
+    timeout_s = float(body.get("timeout_s", 600) or 600)
+    if not session_id or not component_id:
+        return JSONResponse({"error": "session_id and component_id are required"}, status_code=400)
+    try:
+        from backend.apps.agents.ui_request_bridge import wait_for_ui_response
+        response = await wait_for_ui_response(session_id, component_id, timeout_s)
+        return JSONResponse({"ok": response is not None, "response": response})
+    except ValueError as e:
+        return JSONResponse({"error": str(e)}, status_code=429)
+    except Exception as e:
+        logger.exception("ui_request_wait failed")
+        return JSONResponse({"error": str(e)}, status_code=500)
+
+
+@app.post("/api/ui-requests/respond")
+async def ui_request_respond(request: Request):
+    """The user's answer from the rendered component; releases the matching parked wait."""
+    body = await request.json()
+    session_id = str(body.get("session_id", ""))
+    component_id = str(body.get("component_id", ""))
+    response = body.get("response")
+    if not session_id or not component_id or not isinstance(response, dict):
+        return JSONResponse({"error": "session_id, component_id and response object are required"}, status_code=400)
+    from backend.apps.agents.ui_request_bridge import respond_to_ui_request
+    delivered = respond_to_ui_request(session_id, component_id, response)
+    if not delivered:
+        return JSONResponse({"error": "no pending request for that component"}, status_code=404)
+    return JSONResponse({"ok": True})
+
+
 @app.post("/api/invoke-agent/run")
 async def invoke_agent_run(request: Request):
     """Fork an existing agent session and send it a new message.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 33a69a28..e4608790 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^7.3.9",
         "@mui/material": "^7.3.9",
+        "@pierre/diffs": "^1.0.11",
         "@reduxjs/toolkit": "^2.8.2",
         "@types/react-syntax-highlighter": "^15.5.13",
         "ansi-to-react": "^6.2.6",
@@ -26,16 +27,20 @@
         "codemirror": "^6.0.2",
         "framer-motion": "^12.35.2",
         "html-to-image": "^1.11.13",
+        "leaflet": "^1.9.4",
         "lucide-react": "^1.17.0",
         "radix-ui": "^1.6.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-leaflet": "^4.2.1",
         "react-markdown": "^10.1.0",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.13.1",
         "react-syntax-highlighter": "^16.1.1",
-        "recharts": "^3.9.2",
+        "recharts": "^2.15.4",
         "remark-gfm": "^4.0.1",
+        "shiki": "^3.23.0",
+        "supercluster": "^8.0.1",
         "tailwind-merge": "^3.6.0",
         "zod": "^4.4.3"
       },
@@ -45,9 +50,11 @@
         "@babel/preset-react": "^7.27.1",
         "@babel/preset-typescript": "^7.27.1",
         "@tailwindcss/postcss": "^4.3.3",
+        "@types/leaflet": "^1.9.21",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         "@types/react-redux": "^7.1.34",
+        "@types/supercluster": "^7.1.3",
         "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^14.0.0",
         "css-loader": "^6.8.0",
@@ -59,6 +66,7 @@
         "sass-loader": "^16.0.5",
         "style-loader": "^3.3.0",
         "tailwindcss": "^4.3.3",
+        "tsx": "^4.23.1",
         "tw-animate-css": "^1.4.0",
         "typescript": "^5.0.0",
         "webpack": "^5.88.0",
@@ -2077,6 +2085,448 @@
       "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
       "license": "MIT"
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
@@ -3130,6 +3580,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pierre/diffs": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@pierre/diffs/-/diffs-1.0.11.tgz",
+      "integrity": "sha512-j6zIEoyImQy1HfcJqbrDwP0O5I7V2VNXAaw53FqQ+SykRfaNwABeZHs9uibXO4supaXPmTx6LEH9Lffr03e1Tw==",
+      "license": "apache-2.0",
+      "dependencies": {
+        "@shikijs/core": "^3.0.0",
+        "@shikijs/engine-javascript": "^3.0.0",
+        "@shikijs/transformers": "^3.0.0",
+        "diff": "8.0.3",
+        "hast-util-to-html": "9.0.5",
+        "lru_map": "0.4.1",
+        "shiki": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1 || ^19.0.0",
+        "react-dom": "^18.3.1 || ^19.0.0"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -4636,6 +5105,17 @@
       "integrity": "sha512-xnXE7wG13PI+cxieVssYXlQJuYVRhH9NBoxt3KNwzghDIA69GMm7d4wXRouHIYjE+KvS6U/MsMO73NdS2MH9ZA==",
       "license": "MIT"
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -4662,6 +5142,83 @@
         }
       }
     },
+    "node_modules/@shikijs/core": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.23.0.tgz",
+      "integrity": "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.5"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.23.0.tgz",
+      "integrity": "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "oniguruma-to-es": "^4.3.4"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.23.0.tgz",
+      "integrity": "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.23.0.tgz",
+      "integrity": "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.23.0"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.23.0.tgz",
+      "integrity": "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.23.0"
+      }
+    },
+    "node_modules/@shikijs/transformers": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-3.23.0.tgz",
+      "integrity": "sha512-F9msZVxdF+krQNSdQ4V+Ja5QemeAoTQ2jxt7nJCwhDsdF1JWS3KxIQXA3lQbyKwS3J61oHRUSv4jYWv3CkaKTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "3.23.0",
+        "@shikijs/types": "3.23.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.23.0.tgz",
+      "integrity": "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -5135,6 +5692,13 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -5188,6 +5752,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -5383,6 +5957,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -6924,6 +7508,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/diff": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
+      "integrity": "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dns-packet": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@@ -7161,15 +7754,47 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/es-toolkit": {
-      "version": "1.49.0",
-      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
-      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+    "node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
+      "dev": true,
+      "hasInstallScript": true,
       "license": "MIT",
-      "workspaces": [
-        "docs",
-        "benchmarks"
-      ]
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
     },
     "node_modules/escalade": {
       "version": "3.2.0",
@@ -7287,7 +7912,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/events": {
@@ -7411,6 +8035,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.1.tgz",
+      "integrity": "sha512-DjlFSM5Pk9cGcL0q5QXl66eGzx0N6szNgaswwc5ZphlBohjTVJSnGgI+rJVOgOi65qUoQnDZN4nDqi33udtydQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
@@ -7883,6 +8516,29 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -8081,6 +8737,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.7",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.7.tgz",
@@ -8738,6 +9404,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.1.0.tgz",
+      "integrity": "sha512-e9vurzrXJQrFX6ckpHP3bvj5l+9CnYzkxDNnNQ1h2QTqdWsUAJgXiKdGNcOa1EY85dU8KbQ+z/FdQdB7P+9yfQ==",
+      "license": "ISC"
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -8759,6 +9431,12 @@
         "shell-quote": "^1.8.3"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -9069,7 +9747,6 @@
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
       "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -9125,6 +9802,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/lru_map": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.4.1.tgz",
+      "integrity": "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -10393,6 +11076,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz",
+      "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==",
+      "license": "MIT"
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz",
+      "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==",
+      "license": "MIT",
+      "dependencies": {
+        "oniguruma-parser": "^0.12.2",
+        "regex": "^6.1.0",
+        "regex-recursion": "^6.0.2"
+      }
+    },
     "node_modules/open": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
@@ -11067,6 +11767,20 @@
       "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-markdown": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
@@ -11202,6 +11916,21 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -11290,39 +12019,42 @@
       }
     },
     "node_modules/recharts": {
-      "version": "3.9.2",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.9.2.tgz",
-      "integrity": "sha512-G4fy+Pk46RaXgwWMh+Nzhyo/lbFAVqXo9gtetlyehe6Ehge9CsgDuOTwQDD+i1+llaLktNBiNq4bhnGlDRXFtw==",
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+      "deprecated": "1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide",
       "license": "MIT",
-      "workspaces": [
-        "www"
-      ],
       "dependencies": {
-        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
-        "clsx": "^2.1.1",
-        "decimal.js-light": "^2.5.1",
-        "es-toolkit": "^1.39.3",
-        "eventemitter3": "^5.0.1",
-        "immer": "^11.1.8",
-        "react-redux": "8.x.x || 9.x.x",
-        "reselect": "5.2.0",
-        "tiny-invariant": "^1.3.3",
-        "use-sync-external-store": "^1.2.2",
-        "victory-vendor": "^37.0.2"
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/recharts/node_modules/eventemitter3": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
-      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
     "node_modules/rechoir": {
@@ -11389,6 +12121,30 @@
         "node": ">=4"
       }
     },
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "license": "MIT"
+    },
     "node_modules/regexpu-core": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.4.0.tgz",
@@ -11977,6 +12733,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shiki": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz",
+      "integrity": "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "3.23.0",
+        "@shikijs/engine-javascript": "3.23.0",
+        "@shikijs/engine-oniguruma": "3.23.0",
+        "@shikijs/langs": "3.23.0",
+        "@shikijs/themes": "3.23.0",
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -12258,6 +13030,15 @@
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
       "license": "MIT"
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -12456,6 +13237,25 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tsx": {
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.23.1.tgz",
+      "integrity": "sha512-GQHnkIfxyx1wYCOS/wonik5MVRZU9hi1TEZmzGZSCJB1y9YgoZ8H6itNE/u4suE+yLmOzuE4E5S4TZ/ZX2wcWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.28.0"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
     "node_modules/tw-animate-css": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
@@ -12804,9 +13604,9 @@
       }
     },
     "node_modules/victory-vendor": {
-      "version": "37.3.6",
-      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
-      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
       "license": "MIT AND ISC",
       "dependencies": {
         "@types/d3-array": "^3.0.3",
diff --git a/frontend/package.json b/frontend/package.json
index b9b9ad14..5bfcd358 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
+    "@pierre/diffs": "^1.0.11",
     "@reduxjs/toolkit": "^2.8.2",
     "@types/react-syntax-highlighter": "^15.5.13",
     "ansi-to-react": "^6.2.6",
@@ -27,16 +28,20 @@
     "codemirror": "^6.0.2",
     "framer-motion": "^12.35.2",
     "html-to-image": "^1.11.13",
+    "leaflet": "^1.9.4",
     "lucide-react": "^1.17.0",
     "radix-ui": "^1.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "react-markdown": "^10.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.13.1",
     "react-syntax-highlighter": "^16.1.1",
-    "recharts": "^3.9.2",
+    "recharts": "^2.15.4",
     "remark-gfm": "^4.0.1",
+    "shiki": "^3.23.0",
+    "supercluster": "^8.0.1",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
@@ -46,9 +51,11 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@tailwindcss/postcss": "^4.3.3",
+    "@types/leaflet": "^1.9.21",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-redux": "^7.1.34",
+    "@types/supercluster": "^7.1.3",
     "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^6.8.0",
@@ -60,6 +67,7 @@
     "sass-loader": "^16.0.5",
     "style-loader": "^3.3.0",
     "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.0.0",
     "webpack": "^5.88.0",
diff --git a/frontend/scripts/gen-toolui-hints.ts b/frontend/scripts/gen-toolui-hints.ts
new file mode 100644
index 00000000..4ada1643
--- /dev/null
+++ b/frontend/scripts/gen-toolui-hints.ts
@@ -0,0 +1,73 @@
+/* Generates terse per-component prop hints for the ShowUI tool description straight from the
+   vendored tool-ui zod contracts, so the server spec can never drift from what validates.
+   Run: npx tsx --tsconfig tsconfig.json scripts/gen-toolui-hints.ts */
+import { z } from 'zod';
+
+const TARGETS: Record<string, [string, string]> = {
+  'approval-card': ['../src/toolui/components/approval-card/schema', 'SerializableApprovalCardSchema'],
+  'audio': ['../src/toolui/components/audio/schema', 'SerializableAudioSchema'],
+  'chart': ['../src/toolui/components/chart/schema', 'SerializableChartSchema'],
+  'citation': ['../src/toolui/components/citation/schema', 'SerializableCitationSchema'],
+  'code-block': ['../src/toolui/components/code-block/schema', 'SerializableCodeBlockSchema'],
+  'code-diff': ['../src/toolui/components/code-diff/schema', 'SerializableCodeDiffSchema'],
+  'data-table': ['../src/toolui/components/data-table/schema', 'SerializableDataTableSchema'],
+  'geo-map': ['../src/toolui/components/geo-map/schema', 'SerializableGeoMapSchema'],
+  'image': ['../src/toolui/components/image/schema', 'SerializableImageSchema'],
+  'image-gallery': ['../src/toolui/components/image-gallery/schema', 'SerializableImageGallerySchema'],
+  'instagram-post': ['../src/toolui/components/instagram-post/schema', 'SerializableInstagramPostSchema'],
+  'item-carousel': ['../src/toolui/components/item-carousel/schema', 'SerializableItemSchema'],
+  'link-preview': ['../src/toolui/components/link-preview/schema', 'SerializableLinkPreviewSchema'],
+  'linkedin-post': ['../src/toolui/components/linkedin-post/schema', 'SerializableLinkedInPostSchema'],
+  'message-draft': ['../src/toolui/components/message-draft/schema', 'SerializableEmailDraftSchema'],
+  'option-list': ['../src/toolui/components/option-list/schema', 'SerializableOptionListSchema'],
+  'order-summary': ['../src/toolui/components/order-summary/schema', 'SerializableOrderSummarySchema'],
+  'parameter-slider': ['../src/toolui/components/parameter-slider/schema', 'SerializableParameterSliderSchema'],
+  'plan': ['../src/toolui/components/plan/schema', 'SerializablePlanSchema'],
+  'preferences-panel': ['../src/toolui/components/preferences-panel/schema', 'SerializablePreferencesPanelSchema'],
+  'progress-tracker': ['../src/toolui/components/progress-tracker/schema', 'SerializableProgressTrackerSchema'],
+  'question-flow': ['../src/toolui/components/question-flow/schema', 'SerializableProgressiveModeSchema'],
+  'stats-display': ['../src/toolui/components/stats-display/schema', 'SerializableStatsDisplaySchema'],
+  'terminal': ['../src/toolui/components/terminal/schema', 'SerializableTerminalSchema'],
+  'video': ['../src/toolui/components/video/schema', 'SerializableVideoSchema'],
+  'x-post': ['../src/toolui/components/x-post/schema', 'SerializableXPostSchema'],
+};
+
+function describe(node: any, depth: number): string {
+  if (!node || typeof node !== 'object') return 'any';
+  if (Array.isArray(node.enum)) return node.enum.map((v: unknown) => `'${v}'`).join('|');
+  if (Array.isArray(node.anyOf)) return node.anyOf.map((n: any) => describe(n, depth)).join('|');
+  const t = node.type;
+  if (t === 'array') return `[${describe(node.items, depth)}]`;
+  if (t === 'object') {
+    if (depth >= 2) return 'obj';
+    const req = new Set(node.required || []);
+    const props = node.properties || {};
+    const parts = Object.keys(props).map((k) => `${k}${req.has(k) ? '' : '?'}: ${describe(props[k], depth + 1)}`);
+    return `{${parts.join(', ')}}`;
+  }
+  if (t === 'string') return 'str';
+  if (t === 'number' || t === 'integer') return 'num';
+  if (t === 'boolean') return 'bool';
+  return 'any';
+}
+
+async function main(): Promise<void> {
+  const out: Record<string, string> = {};
+  for (const [name, [path, exportName]] of Object.entries(TARGETS)) {
+    try {
+      const mod = await import(path);
+      const schema = mod[exportName];
+      const js = z.toJSONSchema(schema, { unrepresentable: 'any', io: 'input' } as any) as any;
+      let hint = describe(js, 0);
+      if (hint.length > 360) hint = hint.slice(0, 357) + '...';
+      out[name] = hint;
+    } catch (e) {
+      out[name] = `ERROR: ${(e as Error).message.slice(0, 80)}`;
+    }
+  }
+  for (const [name, hint] of Object.entries(out)) {
+    console.log(`    "${name}": "props: ${hint.replace(/"/g, "'")}",`);
+  }
+}
+
+void main();
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 06b1886f..b830a890 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -59,7 +59,8 @@ import MessageActionBar from './shell/MessageActionBar';
 import ToolCallBubble, { ToolPair } from './tool-bubbles/ToolCallBubble';
 import ToolGroupBubble, { RenderItem, ToolGroup, isToolGroup, isToolPair } from './tool-bubbles/ToolGroupBubble';
 import ToolUiBubble from './tool-ui/ToolUiBubble';
-import { isShowUiPair } from './tool-ui/showUiPayload';
+import AskUiBubble from './tool-ui/AskUiBubble';
+import { isShowUiPair, isAskUiPair } from './tool-ui/showUiPayload';
 import ApprovalBar, { BatchApprovalBar } from './shell/ApprovalBar';
 import ForceStopAgentBar from './ForceStopAgentBar';
 import { RateLimitPill } from './shell/RateLimitPill';
@@ -1079,10 +1080,10 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
           result: results[idx] || null,
         }));
 
-        // ShowUI calls render as inline components, never buried inside a collapsed group.
+        // ShowUI/AskUI calls render as inline components, never buried inside a collapsed group.
         // They typically cap a run of work, so the quiet group row stays above the widget.
-        const showUiPairs = allPairs.filter(isShowUiPair);
-        const pairs = allPairs.filter((p) => !isShowUiPair(p));
+        const showUiPairs = allPairs.filter((p) => isShowUiPair(p) || isAskUiPair(p));
+        const pairs = allPairs.filter((p) => !isShowUiPair(p) && !isAskUiPair(p));
         const calls = pairs.map((p) => p.call);
 
         const mcpServers = new Set(
@@ -1607,6 +1608,14 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               }
               if (isToolPair(item)) {
                 const isPending = item.result === null && sessionRunning;
+                if (isAskUiPair(item)) {
+                  return (
+                    <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
+                      <AskUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === justStreamedId} />
+                      {compactionChip}
+                    </Box>
+                  );
+                }
                 if (isShowUiPair(item)) {
                   return (
                     <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
new file mode 100644
index 00000000..c0f320fc
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
@@ -0,0 +1,88 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import ToolCallBubble from '../tool-bubbles/ToolCallBubble';
+import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
+import { parseShowUiPayload } from './showUiPayload';
+import VendoredToolUi from '@toolui/VendoredToolUi';
+import { API_BASE, getAuthToken } from '@/shared/config';
+
+interface AskUiBubbleProps {
+  pair: ToolPair;
+  sessionId: string;
+  isPending: boolean;
+  suppressReveal: boolean;
+}
+
+function parseResultResponse(pair: ToolPair): Record<string, unknown> | null {
+  const rc = pair.result?.content;
+  const text = typeof rc === 'string' ? rc : typeof rc === 'object' && rc?.text ? String(rc.text) : '';
+  if (!text.startsWith('{')) return null;
+  try {
+    const parsed = JSON.parse(text);
+    return parsed && typeof parsed === 'object' ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+/** An AskUI call: the live interactive component while the agent waits; its answered state after. */
+function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubbleProps): React.ReactElement {
+  const payload = parseShowUiPayload(pair);
+  const [submitted, setSubmitted] = useState(false);
+  const answered = parseResultResponse(pair);
+
+  const componentId = payload && payload.component === 'vendored' ? String(payload.props.id || '') : '';
+
+  const respond = useCallback(
+    (response: Record<string, unknown>) => {
+      if (submitted) return;
+      setSubmitted(true);
+      void fetch(`${API_BASE}/ui-requests/respond`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getAuthToken()}` },
+        body: JSON.stringify({ session_id: sessionId, component_id: componentId, response }),
+      }).catch(() => setSubmitted(false));
+    },
+    [submitted, sessionId, componentId],
+  );
+
+  // Their embedded-actions contract: onAction(actionId, state) delivers the component's full state;
+  // approval-card uses onConfirm/onCancel instead. Inject a default Send action when none given.
+  const extraProps = useMemo(() => {
+    if (!payload || payload.component !== 'vendored') return {};
+    const waiting = pair.result === null && !submitted;
+    if (payload.name === 'approval-card') {
+      return waiting
+        ? {
+            onConfirm: () => respond({ action: 'confirm', choice: 'approved' }),
+            onCancel: () => respond({ action: 'cancel', choice: 'denied' }),
+          }
+        : { choice: (answered?.choice as string) || undefined };
+    }
+    if (waiting) {
+      const hasActions = Array.isArray((payload.props as { actions?: unknown[] }).actions) && (payload.props as { actions?: unknown[] }).actions!.length > 0;
+      return {
+        ...(hasActions ? {} : { actions: [{ id: 'submit', label: 'Send' }] }),
+        onAction: (actionId: string, state: unknown) => respond({ action: actionId, value: state ?? null }),
+      };
+    }
+    return answered && 'value' in answered ? { choice: answered.value } : {};
+  }, [payload, pair.result, submitted, respond, answered]);
+
+  if (!payload || payload.component !== 'vendored' || !componentId) {
+    return (
+      <ToolCallBubble call={pair.call} result={pair.result} isPending={isPending} sessionId={sessionId} suppressReveal={suppressReveal} />
+    );
+  }
+
+  return (
+    <Box sx={{ my: 1, contain: 'layout style' }} data-select-type="tool-ui-ask" data-select-id={pair.id} data-select-meta={JSON.stringify({ component: payload.name })}>
+      <VendoredToolUi name={payload.name} props={payload.props} extraProps={extraProps} />
+      {submitted && pair.result === null && (
+        <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
+      )}
+    </Box>
+  );
+}
+
+export default AskUiBubble;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
index 09537faa..07a1af82 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -70,6 +70,11 @@ export function isShowUiPair(pair: ToolPair): boolean {
   return /(^|__)ShowUI$/.test(tool);
 }
 
+export function isAskUiPair(pair: ToolPair): boolean {
+  const tool = typeof pair.call.content === 'object' ? String(pair.call.content?.tool || '') : '';
+  return /(^|__)AskUI$/.test(tool);
+}
+
 /** Latest ShowUI payload anywhere in a transcript; the collapsed card pins this artifact under its pill. */
 export function extractLatestShowUi(messages: Array<{ role: string; content: any }>): ShowUiPayload | null {
   for (let i = messages.length - 1; i >= 0; i--) {
diff --git a/frontend/src/toolui/VendoredToolUi.tsx b/frontend/src/toolui/VendoredToolUi.tsx
index 09a33234..6f9fea0b 100644
--- a/frontend/src/toolui/VendoredToolUi.tsx
+++ b/frontend/src/toolui/VendoredToolUi.tsx
@@ -5,12 +5,14 @@ import { TOOL_UI_REGISTRY } from './registry';
 interface VendoredToolUiProps {
   name: string;
   props: Record<string, unknown>;
+  /** Non-serializable React props (callbacks, live overrides) merged AFTER validation of the wire props. */
+  extraProps?: Record<string, unknown>;
 }
 
 type Gate = 'pending' | 'ok' | 'bad';
 
 /** Validates against the upstream zod contract, then renders the vendored component inside the scoped theme. */
-function VendoredToolUi({ name, props }: VendoredToolUiProps): React.ReactElement | null {
+function VendoredToolUi({ name, props, extraProps }: VendoredToolUiProps): React.ReactElement | null {
   const { mode } = useThemeMode();
   const entry = TOOL_UI_REGISTRY[name];
   const [gate, setGate] = useState<Gate>('pending');
@@ -50,7 +52,7 @@ function VendoredToolUi({ name, props }: VendoredToolUiProps): React.ReactElemen
   return (
     <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`}>
       <Suspense fallback={<div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />}>
-        <Component {...props} />
+        <Component {...props} {...(extraProps || {})} />
       </Suspense>
     </div>
   );
diff --git a/frontend/src/toolui/components/audio/README.md b/frontend/src/toolui/components/audio/README.md
new file mode 100644
index 00000000..da6a00e6
--- /dev/null
+++ b/frontend/src/toolui/components/audio/README.md
@@ -0,0 +1,19 @@
+# Audio
+
+Implementation for the "audio" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/audio/index.ts
+- serializable schema + parse helpers: components/tool-ui/audio/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/audio/content.mdx
+- Preset payload: lib/presets/audio.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/audio/_adapter.tsx b/frontend/src/toolui/components/audio/_adapter.tsx
new file mode 100644
index 00000000..ae01af74
--- /dev/null
+++ b/frontend/src/toolui/components/audio/_adapter.tsx
@@ -0,0 +1,8 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ */
+"use client";
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Slider } from "@toolui/ui/slider";
diff --git a/frontend/src/toolui/components/audio/audio.tsx b/frontend/src/toolui/components/audio/audio.tsx
new file mode 100644
index 00000000..785c3c9f
--- /dev/null
+++ b/frontend/src/toolui/components/audio/audio.tsx
@@ -0,0 +1,341 @@
+"use client";
+
+import * as React from "react";
+import { Pause, Play } from "lucide-react";
+import { cn, Button, Slider } from "./_adapter";
+
+import { AudioProvider, useAudio } from "./context";
+import type { SerializableAudio, AudioVariant } from "./schema";
+
+const FALLBACK_LOCALE = "en-US";
+
+function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds)) return "0:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+export interface AudioProps extends SerializableAudio {
+  variant?: AudioVariant;
+  className?: string;
+  onMediaEvent?: (type: "play" | "pause" | "mute" | "unmute") => void;
+}
+
+export function Audio(props: AudioProps) {
+  return (
+    <AudioProvider>
+      <AudioInner {...props} />
+    </AudioProvider>
+  );
+}
+
+interface PlayerControls {
+  isPlaying: boolean;
+  currentTime: number;
+  duration: number;
+  onPlayPause: () => void;
+  onSeek: (value: number[]) => void;
+  onSeekStart: () => void;
+  onSeekEnd: () => void;
+}
+
+interface FullPlayerProps {
+  artwork?: string;
+  title?: string;
+  description?: string;
+  controls: PlayerControls;
+}
+
+function FullPlayer({
+  artwork,
+  title,
+  description,
+  controls,
+}: FullPlayerProps) {
+  return (
+    <div className="flex w-full flex-col">
+      {artwork && (
+        <div className="bg-muted relative aspect-[4/3] w-full overflow-hidden">
+          <img
+            src={artwork}
+            alt=""
+            aria-hidden="true"
+            loading="lazy"
+            decoding="async"
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        </div>
+      )}
+      <div className="flex flex-col gap-5 p-4">
+        {(title || description) && (
+          <div className="space-y-0.5">
+            {title && (
+              <div className="text-foreground line-clamp-2 font-semibold leading-snug">
+                {title}
+              </div>
+            )}
+            {description && (
+              <div className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                {description}
+              </div>
+            )}
+          </div>
+        )}
+        <div className="flex items-start gap-3">
+          <div className="flex flex-1 flex-col gap-2">
+            <Slider
+              value={[controls.currentTime]}
+              max={controls.duration || 100}
+              step={0.1}
+              onValueChange={controls.onSeek}
+              onPointerDown={controls.onSeekStart}
+              onPointerUp={controls.onSeekEnd}
+              className="cursor-pointer [&_[data-slot=range]]:bg-foreground [&_[data-slot=thumb]]:size-3 [&_[data-slot=thumb]]:border-2 [&_[data-slot=thumb]]:border-background [&_[data-slot=thumb]]:bg-foreground"
+              aria-label="Audio progress"
+            />
+            <div className="text-muted-foreground flex items-center justify-between text-xs tabular-nums">
+              <span>{formatTime(controls.currentTime)}</span>
+              <span>{formatTime(controls.duration)}</span>
+            </div>
+          </div>
+          <Button
+            variant="default"
+            size="icon"
+            onClick={controls.onPlayPause}
+            className="-mt-4 size-10 shrink-0 rounded-full"
+            aria-label={controls.isPlaying ? "Pause" : "Play"}
+          >
+            {controls.isPlaying ? (
+              <Pause className="size-4" fill="currentColor" />
+            ) : (
+              <Play className="size-4 ml-0.5" fill="currentColor" />
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface CompactPlayerProps {
+  artwork?: string;
+  title?: string;
+  description?: string;
+  controls: PlayerControls;
+}
+
+function CompactPlayer({
+  artwork,
+  title,
+  description,
+  controls,
+}: CompactPlayerProps) {
+  const progress =
+    controls.duration > 0
+      ? (controls.currentTime / controls.duration) * 100
+      : 0;
+
+  return (
+    <div className="relative flex w-full items-center gap-3 overflow-hidden p-3">
+      {artwork && (
+        <>
+          <img
+            src={artwork}
+            alt=""
+            aria-hidden="true"
+            className="pointer-events-none absolute -left-1/4 top-1/2 h-[200%] w-auto -translate-y-1/2 object-cover opacity-40 blur-2xl saturate-150"
+          />
+          <div className="from-card/60 to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-r" />
+        </>
+      )}
+      {artwork && (
+        <div className="ring-background/20 relative size-12 shrink-0 overflow-hidden rounded-lg shadow-lg ring-1">
+          <img
+            src={artwork}
+            alt=""
+            aria-hidden="true"
+            loading="lazy"
+            decoding="async"
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        </div>
+      )}
+      <div className="relative flex min-w-0 flex-1 flex-col justify-center">
+        {title && (
+          <div className="text-foreground truncate text-sm font-semibold leading-tight">
+            {title}
+          </div>
+        )}
+        {description && (
+          <div className="text-muted-foreground mt-0.5 truncate text-xs leading-tight">
+            {description}
+          </div>
+        )}
+        {controls.duration > 0 && (
+          <div className="mt-1 flex items-center gap-2">
+            <div className="bg-foreground/20 relative h-1 flex-1 overflow-hidden rounded-full">
+              <div
+                className="bg-foreground absolute inset-y-0 left-0 rounded-full transition-all duration-150"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+            <span className="text-muted-foreground text-xs tabular-nums">
+              {formatTime(controls.currentTime)}
+            </span>
+          </div>
+        )}
+      </div>
+      <Button
+        variant="default"
+        size="icon"
+        onClick={controls.onPlayPause}
+        className="relative size-10 shrink-0 rounded-full shadow-md"
+        aria-label={controls.isPlaying ? "Pause" : "Play"}
+      >
+        {controls.isPlaying ? (
+          <Pause className="size-4" fill="currentColor" />
+        ) : (
+          <Play className="size-4 ml-0.5" fill="currentColor" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+function AudioInner(props: AudioProps) {
+  const { variant = "full", className, onMediaEvent, ...serializable } = props;
+
+  const {
+    id,
+    src,
+    title,
+    description,
+    artwork,
+    locale: providedLocale,
+  } = serializable;
+
+  const locale = providedLocale ?? FALLBACK_LOCALE;
+
+  const { state, setState, setAudioElement } = useAudio();
+  const audioRef = React.useRef<HTMLAudioElement | null>(null);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+  const [isSeeking, setIsSeeking] = React.useState(false);
+
+  React.useEffect(() => {
+    setAudioElement(audioRef.current);
+    return () => setAudioElement(null);
+  }, [setAudioElement]);
+
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (state.playing && audio.paused) {
+      void audio.play().catch(() => undefined);
+    } else if (!state.playing && !audio.paused) {
+      audio.pause();
+    }
+  }, [state.playing]);
+
+  const handlePlayPause = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (audio.paused) {
+      void audio.play().catch(() => undefined);
+    } else {
+      audio.pause();
+    }
+  };
+
+  const handleSeek = (value: number[]) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const newTime = value[0];
+    audio.currentTime = newTime;
+    setCurrentTime(newTime);
+  };
+
+  const handleSeekStart = () => {
+    setIsSeeking(true);
+  };
+
+  const handleSeekEnd = () => {
+    setIsSeeking(false);
+  };
+
+  const controls: PlayerControls = {
+    isPlaying: state.playing,
+    currentTime,
+    duration,
+    onPlayPause: handlePlayPause,
+    onSeek: handleSeek,
+    onSeekStart: handleSeekStart,
+    onSeekEnd: handleSeekEnd,
+  };
+
+  const isCompact = variant === "compact";
+
+  return (
+    <article
+      className={cn(
+        "@container/actions relative w-full",
+        isCompact ? "min-w-72 max-w-md" : "min-w-52 max-w-sm",
+        className,
+      )}
+      lang={locale}
+      data-tool-ui-id={id}
+      data-slot="audio"
+    >
+      <div
+        className={cn(
+          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden",
+          "border-border bg-card border text-sm shadow-xs",
+          "rounded-xl",
+        )}
+      >
+        {isCompact ? (
+          <CompactPlayer
+            artwork={artwork}
+            title={title}
+            description={description}
+            controls={controls}
+          />
+        ) : (
+          <FullPlayer
+            artwork={artwork}
+            title={title}
+            description={description}
+            controls={controls}
+          />
+        )}
+
+        <audio
+          ref={audioRef}
+          src={src}
+          preload="metadata"
+          className="hidden"
+          onPlay={() => {
+            setState({ playing: true });
+            onMediaEvent?.("play");
+          }}
+          onPause={() => {
+            setState({ playing: false });
+            onMediaEvent?.("pause");
+          }}
+          onTimeUpdate={(event) => {
+            if (!isSeeking) {
+              setCurrentTime(event.currentTarget.currentTime);
+            }
+          }}
+          onLoadedMetadata={(event) => {
+            setDuration(event.currentTarget.duration);
+          }}
+          onDurationChange={(event) => {
+            setDuration(event.currentTarget.duration);
+          }}
+        />
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/src/toolui/components/audio/context.tsx b/frontend/src/toolui/components/audio/context.tsx
new file mode 100644
index 00000000..18e37ef8
--- /dev/null
+++ b/frontend/src/toolui/components/audio/context.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+
+export interface AudioPlaybackState {
+  playing: boolean;
+  muted: boolean;
+}
+
+export interface AudioContextValue {
+  state: AudioPlaybackState;
+  setState: (patch: Partial<AudioPlaybackState>) => void;
+  audioElement: HTMLAudioElement | null;
+  setAudioElement: (node: HTMLAudioElement | null) => void;
+}
+
+const AudioContext = React.createContext<AudioContextValue | null>(null);
+
+export function useAudio() {
+  const ctx = React.useContext(AudioContext);
+  if (!ctx) {
+    throw new Error("useAudio must be used within an <AudioProvider />");
+  }
+  return ctx;
+}
+
+export interface AudioProviderProps {
+  children: React.ReactNode;
+  defaultState?: Partial<AudioPlaybackState>;
+}
+
+export function AudioProvider({ children, defaultState }: AudioProviderProps) {
+  const [state, setStateInternal] = React.useState<AudioPlaybackState>({
+    playing: defaultState?.playing ?? false,
+    muted: defaultState?.muted ?? false,
+  });
+
+  const [audioElement, setAudioElement] =
+    React.useState<HTMLAudioElement | null>(null);
+
+  const setState = React.useCallback((patch: Partial<AudioPlaybackState>) => {
+    setStateInternal((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const value = React.useMemo(
+    () => ({ state, setState, audioElement, setAudioElement }),
+    [state, setState, audioElement],
+  );
+
+  return (
+    <AudioContext.Provider value={value}>{children}</AudioContext.Provider>
+  );
+}
diff --git a/frontend/src/toolui/components/audio/index.ts b/frontend/src/toolui/components/audio/index.ts
new file mode 100644
index 00000000..9b588b80
--- /dev/null
+++ b/frontend/src/toolui/components/audio/index.ts
@@ -0,0 +1,5 @@
+export { Audio } from "./audio";
+export type { AudioProps } from "./audio";
+export { AudioProvider, useAudio } from "./context";
+export type { AudioPlaybackState, AudioContextValue } from "./context";
+export type { SerializableAudio, Source, AudioVariant } from "./schema";
diff --git a/frontend/src/toolui/components/audio/schema.ts b/frontend/src/toolui/components/audio/schema.ts
new file mode 100644
index 00000000..b4fdcfcf
--- /dev/null
+++ b/frontend/src/toolui/components/audio/schema.ts
@@ -0,0 +1,46 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const SourceSchema = z.object({
+  label: z.string(),
+  iconUrl: z.url().optional(),
+  url: z.url().optional(),
+});
+
+export type Source = z.infer<typeof SourceSchema>;
+
+export const SerializableAudioSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  assetId: z.string(),
+  src: z.url(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  artwork: z.url().optional(),
+  durationMs: z.number().int().positive().optional(),
+  fileSizeBytes: z.number().int().positive().optional(),
+  createdAt: z.string().datetime().optional(),
+  locale: z.string().optional(),
+  source: SourceSchema.optional(),
+});
+
+export type SerializableAudio = z.infer<typeof SerializableAudioSchema>;
+
+const SerializableAudioSchemaContract = defineToolUiContract(
+  "Audio",
+  SerializableAudioSchema,
+);
+
+export const parseSerializableAudio: (input: unknown) => SerializableAudio =
+  SerializableAudioSchemaContract.parse;
+
+export const safeParseSerializableAudio: (
+  input: unknown,
+) => SerializableAudio | null = SerializableAudioSchemaContract.safeParse;
+export type AudioVariant = "full" | "compact";
diff --git a/frontend/src/toolui/components/chart/README.md b/frontend/src/toolui/components/chart/README.md
new file mode 100644
index 00000000..eb421cd2
--- /dev/null
+++ b/frontend/src/toolui/components/chart/README.md
@@ -0,0 +1,19 @@
+# Chart
+
+Implementation for the "chart" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/chart/index.tsx
+- serializable schema + parse helpers: components/tool-ui/chart/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/chart/content.mdx
+- Preset payload: lib/presets/chart.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/chart/_adapter.tsx b/frontend/src/toolui/components/chart/_adapter.tsx
new file mode 100644
index 00000000..52cd2e17
--- /dev/null
+++ b/frontend/src/toolui/components/chart/_adapter.tsx
@@ -0,0 +1,27 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn    → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Chart → shadcn/ui Chart (recharts wrapper)
+ *   Card  → shadcn/ui Card
+ */
+
+export { cn } from "@toolui/lib/utils";
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@toolui/ui/chart";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@toolui/ui/card";
diff --git a/frontend/src/toolui/components/chart/chart.tsx b/frontend/src/toolui/components/chart/chart.tsx
new file mode 100644
index 00000000..97a7b44b
--- /dev/null
+++ b/frontend/src/toolui/components/chart/chart.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { useMemo, useCallback, memo } from "react";
+import {
+  BarChart,
+  LineChart,
+  Bar,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+} from "recharts";
+
+import {
+  cn,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  type ChartConfig,
+} from "./_adapter";
+import type { ChartProps } from "./schema";
+
+const DEFAULT_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
+
+export const Chart = memo(function Chart({
+  id,
+  type,
+  title,
+  description,
+  data,
+  xKey,
+  series,
+  colors,
+  showLegend = false,
+  showGrid = true,
+  className,
+  onDataPointClick,
+}: ChartProps) {
+  const palette = colors?.length ? colors : DEFAULT_COLORS;
+
+  const seriesColors = useMemo(
+    () =>
+      series.map(
+        (seriesItem, index) =>
+          seriesItem.color ?? palette[index % palette.length],
+      ),
+    [series, palette],
+  );
+
+  const chartConfig: ChartConfig = useMemo(
+    () =>
+      Object.fromEntries(
+        series.map((seriesItem, index) => [
+          seriesItem.key,
+          {
+            label: seriesItem.label,
+            color: seriesColors[index],
+          },
+        ]),
+      ),
+    [series, seriesColors],
+  );
+
+  const handleDataPointClick = useCallback(
+    (
+      seriesKey: string,
+      seriesLabel: string,
+      payload: Record<string, unknown>,
+      index: number,
+    ) => {
+      onDataPointClick?.({
+        seriesKey,
+        seriesLabel,
+        xValue: payload[xKey],
+        yValue: payload[seriesKey],
+        index,
+        payload,
+      });
+    },
+    [onDataPointClick, xKey],
+  );
+
+  const ChartComponent = type === "bar" ? BarChart : LineChart;
+
+  const chartContent = (
+    <ChartContainer
+      config={chartConfig}
+      className="min-h-[200px] w-full"
+      data-tool-ui-id={id}
+    >
+      <ChartComponent data={data} accessibilityLayer>
+        {showGrid && <CartesianGrid vertical={false} />}
+        <XAxis
+          dataKey={xKey}
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+        />
+        <YAxis tickLine={false} axisLine={false} tickMargin={10} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+
+        {type === "bar" &&
+          series.map((s, i) => (
+            <Bar
+              key={s.key}
+              dataKey={s.key}
+              fill={seriesColors[i]}
+              radius={4}
+              onClick={(data) =>
+                handleDataPointClick(s.key, s.label, data.payload, data.index)
+              }
+              cursor={onDataPointClick ? "pointer" : undefined}
+            />
+          ))}
+
+        {type === "line" &&
+          series.map((s, i) => (
+            <Line
+              key={s.key}
+              dataKey={s.key}
+              type="monotone"
+              stroke={seriesColors[i]}
+              strokeWidth={2}
+              dot={{ r: 4, cursor: onDataPointClick ? "pointer" : undefined }}
+              activeDot={{
+                r: 6,
+                cursor: onDataPointClick ? "pointer" : undefined,
+                // Recharts types are incorrect - onClick receives (event, dotData) at runtime
+                onClick: ((
+                  _: unknown,
+                  dotData: { payload: Record<string, unknown>; index: number },
+                ) => {
+                  handleDataPointClick(
+                    s.key,
+                    s.label,
+                    dotData.payload,
+                    dotData.index,
+                  );
+                }) as unknown as React.MouseEventHandler,
+              }}
+            />
+          ))}
+      </ChartComponent>
+    </ChartContainer>
+  );
+
+  return (
+    <Card
+      className={cn("w-full min-w-80", className)}
+      data-tool-ui-id={id}
+      data-slot="chart"
+    >
+      {(title || description) && (
+        <CardHeader>
+          {title && <CardTitle className="text-pretty">{title}</CardTitle>}
+          {description && (
+            <CardDescription className="text-pretty">
+              {description}
+            </CardDescription>
+          )}
+        </CardHeader>
+      )}
+      <CardContent>{chartContent}</CardContent>
+    </Card>
+  );
+});
diff --git a/frontend/src/toolui/components/chart/index.tsx b/frontend/src/toolui/components/chart/index.tsx
new file mode 100644
index 00000000..aeebab8f
--- /dev/null
+++ b/frontend/src/toolui/components/chart/index.tsx
@@ -0,0 +1,8 @@
+export { Chart } from "./chart";
+export {
+  type ChartProps,
+  type ChartSeries,
+  type ChartDataPoint,
+  type ChartClientProps,
+  type SerializableChart,
+} from "./schema";
diff --git a/frontend/src/toolui/components/chart/schema.ts b/frontend/src/toolui/components/chart/schema.ts
new file mode 100644
index 00000000..77a5b7f1
--- /dev/null
+++ b/frontend/src/toolui/components/chart/schema.ts
@@ -0,0 +1,121 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const ChartSeriesSchema = z.object({
+  key: z.string().min(1),
+  label: z.string().min(1),
+  color: z.string().optional(),
+});
+
+export type ChartSeries = z.infer<typeof ChartSeriesSchema>;
+
+export const ChartPropsSchema = z
+  .object({
+    id: ToolUIIdSchema,
+    role: ToolUIRoleSchema.optional(),
+    receipt: ToolUIReceiptSchema.optional(),
+    type: z.enum(["bar", "line"]),
+    title: z.string().optional(),
+    description: z.string().optional(),
+    data: z.array(z.record(z.string(), z.unknown())).min(1),
+    xKey: z.string().min(1),
+    series: z.array(ChartSeriesSchema).min(1),
+    /** Color palette applied to series in order. Individual series.color takes precedence. */
+    colors: z.array(z.string().min(1)).min(1).optional(),
+    showLegend: z.boolean().optional(),
+    showGrid: z.boolean().optional(),
+  })
+  .superRefine((value, ctx) => {
+    const seenSeriesKeys = new Set<string>();
+    value.series.forEach((series, index) => {
+      if (seenSeriesKeys.has(series.key)) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["series", index, "key"],
+          message: `Duplicate series key "${series.key}".`,
+        });
+        return;
+      }
+      seenSeriesKeys.add(series.key);
+    });
+
+    value.data.forEach((row, rowIndex) => {
+      if (!(value.xKey in row)) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["data", rowIndex, value.xKey],
+          message: `Missing xKey "${value.xKey}" in data row.`,
+        });
+      } else {
+        const xVal = row[value.xKey];
+        const isValidX = typeof xVal === "string" || typeof xVal === "number";
+        if (!isValidX) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["data", rowIndex, value.xKey],
+            message: `Expected "${value.xKey}" to be a string or number.`,
+          });
+        }
+      }
+
+      value.series.forEach((series) => {
+        if (!(series.key in row)) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["data", rowIndex, series.key],
+            message: `Missing series key "${series.key}" in data row.`,
+          });
+          return;
+        }
+
+        const yVal = row[series.key];
+        if (yVal === null) {
+          return;
+        }
+        if (typeof yVal !== "number" || !Number.isFinite(yVal)) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["data", rowIndex, series.key],
+            message: `Expected "${series.key}" to be a finite number (or null).`,
+          });
+        }
+      });
+    });
+  });
+
+export type ChartDataPoint = {
+  seriesKey: string;
+  seriesLabel: string;
+  xValue: unknown;
+  yValue: unknown;
+  index: number;
+  payload: Record<string, unknown>;
+};
+
+export type ChartClientProps = {
+  className?: string;
+  onDataPointClick?: (point: ChartDataPoint) => void;
+};
+
+export type ChartProps = z.infer<typeof ChartPropsSchema> & ChartClientProps;
+
+export const SerializableChartSchema = ChartPropsSchema;
+
+export type SerializableChart = z.infer<typeof SerializableChartSchema>;
+
+const SerializableChartSchemaContract = defineToolUiContract(
+  "Chart",
+  SerializableChartSchema,
+);
+
+export const parseSerializableChart: (input: unknown) => SerializableChart =
+  SerializableChartSchemaContract.parse;
+
+export const safeParseSerializableChart: (
+  input: unknown,
+) => SerializableChart | null = SerializableChartSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/code-block/README.md b/frontend/src/toolui/components/code-block/README.md
new file mode 100644
index 00000000..80e3f06a
--- /dev/null
+++ b/frontend/src/toolui/components/code-block/README.md
@@ -0,0 +1,19 @@
+# Code Block
+
+Implementation for the "code-block" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/code-block/index.tsx
+- serializable schema + parse helpers: components/tool-ui/code-block/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/code-block/content.mdx
+- Preset payload: lib/presets/code-block.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/code-block/_adapter.tsx b/frontend/src/toolui/components/code-block/_adapter.tsx
new file mode 100644
index 00000000..a929b219
--- /dev/null
+++ b/frontend/src/toolui/components/code-block/_adapter.tsx
@@ -0,0 +1,14 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn          → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button      → shadcn/ui Button
+ *   Collapsible → shadcn/ui Collapsible
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Collapsible, CollapsibleTrigger } from "@toolui/ui/collapsible";
diff --git a/frontend/src/toolui/components/code-block/code-block.tsx b/frontend/src/toolui/components/code-block/code-block.tsx
new file mode 100644
index 00000000..41885d30
--- /dev/null
+++ b/frontend/src/toolui/components/code-block/code-block.tsx
@@ -0,0 +1,469 @@
+"use client";
+
+import {
+  useState,
+  useCallback,
+  useEffect,
+  createContext,
+  useContext,
+  type ReactNode,
+} from "react";
+import {
+  createHighlighter,
+  createJavaScriptRegexEngine,
+  type Highlighter,
+} from "shiki";
+import { Copy, Check, ChevronDown, ChevronUp } from "lucide-react";
+import pierreDarkTheme from "../shared/pierre-dark-theme.js";
+import pierreLightTheme from "../shared/pierre-light-theme.js";
+import type { CodeBlockLineNumbersMode, CodeBlockProps } from "./schema";
+import { useCopyToClipboard } from "../shared/use-copy-to-clipboard";
+
+import { Button, cn, Collapsible, CollapsibleTrigger } from "./_adapter";
+
+const COPY_ID = "codeblock-code";
+const MAX_HTML_CACHE_ENTRIES = 64;
+
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+function getHighlighter(): Promise<Highlighter> {
+  let pending = highlighterPromise;
+  if (!pending) {
+    pending = createHighlighter({
+      themes: [pierreDarkTheme as never, pierreLightTheme as never],
+      langs: [],
+      engine: createJavaScriptRegexEngine(),
+    });
+    highlighterPromise = pending;
+  }
+  return pending;
+}
+
+const htmlCache = new Map<string, string>();
+
+function getCacheKey(
+  code: string,
+  language: string,
+  theme: string,
+  lineNumbers: CodeBlockLineNumbersMode,
+  highlightLines?: number[],
+): string {
+  return JSON.stringify({
+    code,
+    language,
+    theme,
+    lineNumbers,
+    highlightLines: highlightLines ?? null,
+  });
+}
+
+function setCachedHtml(cacheKey: string, html: string): void {
+  if (htmlCache.has(cacheKey)) {
+    htmlCache.set(cacheKey, html);
+    return;
+  }
+
+  if (htmlCache.size >= MAX_HTML_CACHE_ENTRIES) {
+    const oldestKey = htmlCache.keys().next().value;
+    if (typeof oldestKey === "string") {
+      htmlCache.delete(oldestKey);
+    }
+  }
+
+  htmlCache.set(cacheKey, html);
+}
+
+const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
+  typescript: "TypeScript",
+  javascript: "JavaScript",
+  python: "Python",
+  tsx: "TSX",
+  jsx: "JSX",
+  json: "JSON",
+  bash: "Bash",
+  shell: "Shell",
+  css: "CSS",
+  html: "HTML",
+  markdown: "Markdown",
+  sql: "SQL",
+  yaml: "YAML",
+  go: "Go",
+  rust: "Rust",
+  text: "Plain Text",
+};
+
+function getLanguageDisplayName(lang: string): string {
+  return LANGUAGE_DISPLAY_NAMES[lang.toLowerCase()] || lang.toUpperCase();
+}
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function getDocumentTheme(): "light" | "dark" | null {
+  if (typeof document === "undefined") return null;
+  const root = document.documentElement;
+  const dataTheme = root.getAttribute("data-theme")?.toLowerCase();
+  if (dataTheme === "dark") return "dark";
+  if (dataTheme === "light") return "light";
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+  return null;
+}
+
+function useResolvedTheme(): "light" | "dark" {
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    return getDocumentTheme() ?? getSystemTheme();
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+
+    const update = () => setTheme(getDocumentTheme() ?? getSystemTheme());
+
+    const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mql?.addEventListener("change", update);
+
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    });
+
+    return () => {
+      mql?.removeEventListener("change", update);
+      observer.disconnect();
+    };
+  }, []);
+
+  return theme;
+}
+
+export type CodeBlockRootProps = CodeBlockProps & {
+  children: ReactNode;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+};
+
+type CodeBlockSharedState = {
+  id: string;
+  code: string;
+  language: string;
+  filename?: string;
+  highlightedHtml: string | null;
+  isCopied: boolean;
+  copyCode: () => void;
+  lineCount: number;
+  isCollapsed: boolean;
+  shouldCollapse: boolean;
+  toggleExpanded: () => void;
+};
+
+const CodeBlockContext = createContext<CodeBlockSharedState | null>(null);
+
+function useCodeBlock(): CodeBlockSharedState {
+  const context = useContext(CodeBlockContext);
+  if (!context) {
+    throw new Error(
+      "CodeBlock subcomponents must be used within <CodeBlock.Root>.",
+    );
+  }
+  return context;
+}
+
+function CodeBlockRoot({
+  id,
+  code,
+  language = "text",
+  lineNumbers = "visible",
+  filename,
+  highlightLines,
+  maxCollapsedLines,
+  className,
+  children,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
+}: CodeBlockRootProps) {
+  const resolvedTheme = useResolvedTheme();
+  const [expandedState, setExpandedState] = useState(defaultExpanded);
+  const { copiedId, copy } = useCopyToClipboard();
+  const isCopied = copiedId === COPY_ID;
+
+  const expanded = expandedProp ?? expandedState;
+  const setExpanded = useCallback(
+    (nextExpanded: boolean) => {
+      if (expandedProp === undefined) {
+        setExpandedState(nextExpanded);
+      }
+      onExpandedChange?.(nextExpanded);
+    },
+    [expandedProp, onExpandedChange],
+  );
+
+  const theme = resolvedTheme === "dark" ? "pierre-dark" : "pierre-light";
+  const cacheKey = getCacheKey(
+    code,
+    language,
+    theme,
+    lineNumbers,
+    highlightLines,
+  );
+
+  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(
+    () => htmlCache.get(cacheKey) ?? null,
+  );
+
+  useEffect(() => {
+    const cached = htmlCache.get(cacheKey);
+    if (cached) {
+      setHighlightedHtml(cached);
+      return;
+    }
+
+    let cancelled = false;
+    const showLineNumbers = lineNumbers === "visible";
+
+    async function highlight() {
+      if (!code) {
+        if (!cancelled) setHighlightedHtml("");
+        return;
+      }
+
+      try {
+        const highlighter = await getHighlighter();
+        const loadedLangs = highlighter.getLoadedLanguages();
+
+        if (!loadedLangs.includes(language)) {
+          await highlighter.loadLanguage(
+            language as Parameters<Highlighter["loadLanguage"]>[0],
+          );
+        }
+
+        const lineCount = code.split("\n").length;
+        const lineNumberWidth = `${String(lineCount).length + 0.5}ch`;
+
+        const html = highlighter.codeToHtml(code, {
+          lang: language,
+          theme,
+          transformers: [
+            {
+              line(node: any, line: number) {
+                node.properties["data-line"] = line;
+                if (highlightLines?.includes(line)) {
+                  const highlightBg =
+                    resolvedTheme === "dark"
+                      ? "rgba(255,255,255,0.1)"
+                      : "rgba(0,0,0,0.05)";
+                  node.properties.style = `background:${highlightBg};`;
+                }
+                if (showLineNumbers) {
+                  node.children.unshift({
+                    type: "element",
+                    tagName: "span",
+                    properties: {
+                      style: `display:inline-block;width:${lineNumberWidth};text-align:right;margin-right:1.5em;user-select:none;opacity:0.5;`,
+                      "aria-hidden": "true",
+                    },
+                    children: [{ type: "text", value: String(line) }],
+                  });
+                }
+              },
+            },
+          ],
+        });
+        if (!cancelled) {
+          setCachedHtml(cacheKey, html);
+          setHighlightedHtml(html);
+        }
+      } catch {
+        const escaped = code
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;");
+        if (!cancelled) {
+          setHighlightedHtml(`<pre><code>${escaped}</code></pre>`);
+        }
+      }
+    }
+    void highlight();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    cacheKey,
+    code,
+    language,
+    lineNumbers,
+    theme,
+    highlightLines,
+    resolvedTheme,
+  ]);
+
+  const lineCount = code.split("\n").length;
+  const shouldCollapse = !!maxCollapsedLines && lineCount > maxCollapsedLines;
+  const isCollapsed = shouldCollapse && !expanded;
+
+  const copyCode = useCallback(() => {
+    void copy(code, COPY_ID);
+  }, [code, copy]);
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
+  const state: CodeBlockSharedState = {
+    id,
+    code,
+    language,
+    filename,
+    highlightedHtml,
+    isCopied,
+    copyCode,
+    lineCount,
+    shouldCollapse,
+    isCollapsed,
+    toggleExpanded,
+  };
+
+  return (
+    <CodeBlockContext.Provider value={state}>
+      <div
+        className={cn(
+          "@container flex w-full min-w-80 flex-col gap-3",
+          className,
+        )}
+        data-tool-ui-id={id}
+        data-slot="code-block"
+      >
+        <div className="border-border bg-card overflow-hidden rounded-lg border shadow-xs">
+          <Collapsible open={!isCollapsed}>{children}</Collapsible>
+        </div>
+      </div>
+    </CodeBlockContext.Provider>
+  );
+}
+
+export type CodeBlockSectionProps = {
+  className?: string;
+};
+
+function CodeBlockHeader({ className }: CodeBlockSectionProps) {
+  const { language, filename, isCopied, copyCode } = useCodeBlock();
+  return (
+    <div
+      className={cn(
+        "bg-card flex items-center justify-between border-b px-4 py-2",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-1">
+        <span className="text-muted-foreground text-sm">
+          {getLanguageDisplayName(language)}
+        </span>
+        {filename && (
+          <>
+            <span className="text-muted-foreground/50">•</span>
+            <span className="text-foreground text-sm font-medium">
+              {filename}
+            </span>
+          </>
+        )}
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={copyCode}
+        className="h-7 w-7 p-0"
+        aria-label={isCopied ? "Copied" : "Copy code"}
+      >
+        {isCopied ? (
+          <Check className="h-4 w-4 text-green-700 dark:text-green-400" />
+        ) : (
+          <Copy className="text-muted-foreground h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+function CodeBlockContent({ className }: CodeBlockSectionProps) {
+  const { highlightedHtml, isCollapsed } = useCodeBlock();
+  return (
+    <div
+      className={cn(
+        "overflow-x-auto overflow-y-clip text-[13px] leading-[1.4] [&_pre]:bg-transparent [&_pre]:py-4",
+        isCollapsed && "max-h-[200px]",
+        className,
+      )}
+    >
+      {highlightedHtml && (
+        <div dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
+      )}
+    </div>
+  );
+}
+
+function CodeBlockCollapseToggle({ className }: CodeBlockSectionProps) {
+  const { shouldCollapse, isCollapsed, toggleExpanded, lineCount } =
+    useCodeBlock();
+
+  if (!shouldCollapse) return null;
+
+  return (
+    <CollapsibleTrigger asChild>
+      <Button
+        variant="ghost"
+        onClick={toggleExpanded}
+        className={cn(
+          "text-muted-foreground w-full rounded-none border-t font-normal",
+          className,
+        )}
+      >
+        {isCollapsed ? (
+          <>
+            <ChevronDown className="mr-1 size-4" />
+            Show all {lineCount} lines
+          </>
+        ) : (
+          <>
+            <ChevronUp className="mr-2 h-4 w-4" />
+            Collapse
+          </>
+        )}
+      </Button>
+    </CollapsibleTrigger>
+  );
+}
+
+export type CodeBlockComposedProps = Omit<CodeBlockRootProps, "children">;
+
+function CodeBlockComposed(props: CodeBlockComposedProps) {
+  return (
+    <CodeBlockRoot {...props}>
+      <CodeBlockHeader />
+      <CodeBlockContent />
+      <CodeBlockCollapseToggle />
+    </CodeBlockRoot>
+  );
+}
+
+type CodeBlockComponent = typeof CodeBlockComposed & {
+  Root: typeof CodeBlockRoot;
+  Header: typeof CodeBlockHeader;
+  Content: typeof CodeBlockContent;
+  CollapseToggle: typeof CodeBlockCollapseToggle;
+};
+
+export const CodeBlock = Object.assign(CodeBlockComposed, {
+  Root: CodeBlockRoot,
+  Header: CodeBlockHeader,
+  Content: CodeBlockContent,
+  CollapseToggle: CodeBlockCollapseToggle,
+}) as CodeBlockComponent;
diff --git a/frontend/src/toolui/components/code-block/index.tsx b/frontend/src/toolui/components/code-block/index.tsx
new file mode 100644
index 00000000..9fd55b2f
--- /dev/null
+++ b/frontend/src/toolui/components/code-block/index.tsx
@@ -0,0 +1,11 @@
+export { CodeBlock } from "./code-block";
+export type {
+  CodeBlockRootProps,
+  CodeBlockComposedProps,
+  CodeBlockSectionProps,
+} from "./code-block";
+export type {
+  CodeBlockProps,
+  CodeBlockLineNumbersMode,
+  SerializableCodeBlock,
+} from "./schema";
diff --git a/frontend/src/toolui/components/code-block/schema.ts b/frontend/src/toolui/components/code-block/schema.ts
new file mode 100644
index 00000000..35c9b85b
--- /dev/null
+++ b/frontend/src/toolui/components/code-block/schema.ts
@@ -0,0 +1,43 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const CodeBlockPropsSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  code: z.string(),
+  language: z.string().trim().min(1).default("text"),
+  lineNumbers: z.enum(["visible", "hidden"]).default("visible"),
+  filename: z.string().optional(),
+  highlightLines: z.array(z.number().int().positive()).optional(),
+  maxCollapsedLines: z.number().min(1).optional(),
+  className: z.string().optional(),
+});
+
+export type CodeBlockProps = z.infer<typeof CodeBlockPropsSchema>;
+export type CodeBlockLineNumbersMode = CodeBlockProps["lineNumbers"];
+
+export const SerializableCodeBlockSchema = CodeBlockPropsSchema.omit({
+  className: true,
+});
+
+export type SerializableCodeBlock = z.infer<typeof SerializableCodeBlockSchema>;
+
+const SerializableCodeBlockSchemaContract = defineToolUiContract(
+  "CodeBlock",
+  SerializableCodeBlockSchema,
+);
+
+export const parseSerializableCodeBlock: (
+  input: unknown,
+) => SerializableCodeBlock = SerializableCodeBlockSchemaContract.parse;
+
+export const safeParseSerializableCodeBlock: (
+  input: unknown,
+) => SerializableCodeBlock | null =
+  SerializableCodeBlockSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/code-diff/_adapter.tsx b/frontend/src/toolui/components/code-diff/_adapter.tsx
new file mode 100644
index 00000000..f9bae08e
--- /dev/null
+++ b/frontend/src/toolui/components/code-diff/_adapter.tsx
@@ -0,0 +1,14 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn          -> Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Button      -> shadcn/ui Button
+ *   Collapsible -> shadcn/ui Collapsible
+ */
+
+export { cn } from "@toolui/lib/utils";
+export { Button } from "@toolui/ui/button";
+export { Collapsible, CollapsibleTrigger } from "@toolui/ui/collapsible";
diff --git a/frontend/src/toolui/components/code-diff/code-diff.tsx b/frontend/src/toolui/components/code-diff/code-diff.tsx
new file mode 100644
index 00000000..a1d0e96a
--- /dev/null
+++ b/frontend/src/toolui/components/code-diff/code-diff.tsx
@@ -0,0 +1,463 @@
+"use client";
+
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  createContext,
+  useContext,
+  type ReactNode,
+} from "react";
+import {
+  FileDiff as PierreFileDiff,
+  PatchDiff as PierrePatchDiff,
+} from "@pierre/diffs/react";
+import { parseDiffFromFile, RegisteredCustomThemes } from "@pierre/diffs";
+import type { FileDiffMetadata, ThemesType } from "@pierre/diffs";
+import { Copy, Check, ChevronDown, ChevronUp } from "lucide-react";
+import type { CodeDiffProps } from "./schema";
+import { useCopyToClipboard } from "../shared/use-copy-to-clipboard";
+import { Button, cn, Collapsible, CollapsibleTrigger } from "./_adapter";
+
+/*
+ * Pierre's shared_highlighter registers custom themes with dynamic imports
+ * (`import("../themes/pierre-dark.js")`) that fail under Turbopack because the
+ * package `exports` field doesn't include those subpaths. We override the
+ * RegisteredCustomThemes map entries with loaders that point to local vendored
+ * theme files in `components/tool-ui/shared`, which Turbopack can resolve.
+ */
+RegisteredCustomThemes.set("pierre-dark", () =>
+  import("../shared/pierre-dark-theme.js").then((m) => m.default as never),
+);
+RegisteredCustomThemes.set("pierre-light", () =>
+  import("../shared/pierre-light-theme.js").then((m) => m.default as never),
+);
+
+const COPY_ID = "codediff-code";
+
+/* ── Theme detection (mirrors CodeBlock) ────────────────────────── */
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function getDocumentTheme(): "light" | "dark" | null {
+  if (typeof document === "undefined") return null;
+  const root = document.documentElement;
+  const dataTheme = root.getAttribute("data-theme")?.toLowerCase();
+  if (dataTheme === "dark") return "dark";
+  if (dataTheme === "light") return "light";
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+  return null;
+}
+
+function useResolvedTheme(): "light" | "dark" {
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    return getDocumentTheme() ?? getSystemTheme();
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+
+    const update = () => setTheme(getDocumentTheme() ?? getSystemTheme());
+
+    const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mql?.addEventListener("change", update);
+
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    });
+
+    return () => {
+      mql?.removeEventListener("change", update);
+      observer.disconnect();
+    };
+  }, []);
+
+  return theme;
+}
+
+/* ── Language display names (mirrors CodeBlock) ─────────────────── */
+
+const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
+  typescript: "TypeScript",
+  javascript: "JavaScript",
+  python: "Python",
+  tsx: "TSX",
+  jsx: "JSX",
+  json: "JSON",
+  bash: "Bash",
+  shell: "Shell",
+  css: "CSS",
+  html: "HTML",
+  markdown: "Markdown",
+  sql: "SQL",
+  yaml: "YAML",
+  go: "Go",
+  rust: "Rust",
+  text: "Plain Text",
+};
+
+function getLanguageDisplayName(lang: string): string {
+  return LANGUAGE_DISPLAY_NAMES[lang.toLowerCase()] || lang.toUpperCase();
+}
+
+/* ── Shared context ─────────────────────────────────────────────── */
+
+type CodeDiffSharedState = {
+  id: string;
+  isPatchMode: boolean;
+  language: string;
+  lineNumbers: "visible" | "hidden";
+  filename?: string;
+  diffStyle: "unified" | "split";
+  copyableCode: string;
+  isCopied: boolean;
+  copyCode: () => void;
+  isCollapsed: boolean;
+  shouldCollapse: boolean;
+  toggleExpanded: () => void;
+  resolvedTheme: "light" | "dark";
+  pierreThemes: ThemesType;
+  fileDiffMetadata: FileDiffMetadata | null;
+  patch: string | null;
+  additions: number;
+  deletions: number;
+};
+
+const CodeDiffContext = createContext<CodeDiffSharedState | null>(null);
+
+function useCodeDiff(): CodeDiffSharedState {
+  const context = useContext(CodeDiffContext);
+  if (!context) {
+    throw new Error(
+      "CodeDiff subcomponents must be used within <CodeDiff.Root>.",
+    );
+  }
+  return context;
+}
+
+/* ── Subcomponents ──────────────────────────────────────────────── */
+
+export type CodeDiffRootProps = CodeDiffProps & {
+  children: ReactNode;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+};
+
+function CodeDiffRoot({
+  id,
+  oldCode,
+  newCode,
+  patch,
+  language = "text",
+  filename,
+  lineNumbers = "visible",
+  diffStyle = "unified",
+  maxCollapsedLines,
+  className,
+  children,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
+}: CodeDiffRootProps) {
+  const resolvedTheme = useResolvedTheme();
+  const [expandedState, setExpandedState] = useState(defaultExpanded);
+  const { copiedId, copy } = useCopyToClipboard();
+  const isCopied = copiedId === COPY_ID;
+
+  const expanded = expandedProp ?? expandedState;
+  const setExpanded = useCallback(
+    (nextExpanded: boolean) => {
+      if (expandedProp === undefined) {
+        setExpandedState(nextExpanded);
+      }
+      onExpandedChange?.(nextExpanded);
+    },
+    [expandedProp, onExpandedChange],
+  );
+
+  const pierreThemes: ThemesType = {
+    dark: "pierre-dark",
+    light: "pierre-light",
+  };
+
+  // Auto-detect mode: if `patch` is provided, use patch mode; otherwise files mode
+  const isPatchMode = !!patch;
+
+  const fileDiffMetadata = useMemo(() => {
+    if (isPatchMode) return null;
+    return parseDiffFromFile(
+      {
+        name: filename ?? "file",
+        contents: oldCode ?? "",
+        lang: language as never,
+      },
+      {
+        name: filename ?? "file",
+        contents: newCode ?? "",
+        lang: language as never,
+      },
+    );
+  }, [isPatchMode, oldCode, newCode, filename, language]);
+
+  const copyableCode = isPatchMode ? (patch ?? "") : (newCode ?? oldCode ?? "");
+
+  const lineCount = useMemo(() => {
+    if (isPatchMode) {
+      return (patch ?? "").split("\n").length;
+    }
+    if (fileDiffMetadata) {
+      return fileDiffMetadata.unifiedLineCount;
+    }
+    return 0;
+  }, [isPatchMode, patch, fileDiffMetadata]);
+
+  const { additions, deletions } = useMemo(() => {
+    if (!isPatchMode && fileDiffMetadata) {
+      let add = 0;
+      let del = 0;
+      for (const hunk of fileDiffMetadata.hunks) {
+        add += hunk.additionLines;
+        del += hunk.deletionLines;
+      }
+      return { additions: add, deletions: del };
+    }
+    if (isPatchMode && patch) {
+      let add = 0;
+      let del = 0;
+      for (const line of patch.split("\n")) {
+        if (line.startsWith("+") && !line.startsWith("+++ ")) add++;
+        else if (line.startsWith("-") && !line.startsWith("--- ")) del++;
+      }
+      return { additions: add, deletions: del };
+    }
+    return { additions: 0, deletions: 0 };
+  }, [isPatchMode, fileDiffMetadata, patch]);
+
+  const shouldCollapse = !!maxCollapsedLines && lineCount > maxCollapsedLines;
+  const isCollapsed = shouldCollapse && !expanded;
+
+  const copyCode = useCallback(() => {
+    void copy(copyableCode, COPY_ID);
+  }, [copyableCode, copy]);
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
+  const state: CodeDiffSharedState = {
+    id,
+    isPatchMode,
+    language,
+    lineNumbers,
+    filename,
+    diffStyle,
+    copyableCode,
+    isCopied,
+    copyCode,
+    isCollapsed,
+    shouldCollapse,
+    toggleExpanded,
+    resolvedTheme,
+    pierreThemes,
+    fileDiffMetadata,
+    patch: isPatchMode ? (patch ?? null) : null,
+    additions,
+    deletions,
+  };
+
+  return (
+    <CodeDiffContext.Provider value={state}>
+      <div
+        className={cn(
+          "@container flex w-full min-w-80 flex-col gap-3",
+          className,
+        )}
+        data-tool-ui-id={id}
+        data-slot="code-diff"
+      >
+        <div className="border-border bg-card overflow-hidden rounded-lg border shadow-xs">
+          <Collapsible open={!isCollapsed}>{children}</Collapsible>
+        </div>
+      </div>
+    </CodeDiffContext.Provider>
+  );
+}
+
+export type CodeDiffSectionProps = {
+  className?: string;
+};
+
+function CodeDiffHeader({ className }: CodeDiffSectionProps) {
+  const { language, filename, isCopied, copyCode, additions, deletions } =
+    useCodeDiff();
+  const hasChanges = additions > 0 || deletions > 0;
+  return (
+    <div
+      className={cn(
+        "bg-card flex items-center justify-between gap-2 border-b px-4 py-2",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-1">
+        <span className="text-muted-foreground text-sm">
+          {getLanguageDisplayName(language)}
+        </span>
+        {filename && (
+          <>
+            <span className="text-muted-foreground/50">&bull;</span>
+            <span className="text-foreground text-sm font-medium">
+              {filename}
+            </span>
+          </>
+        )}
+      </div>
+      {hasChanges && (
+        <span className="ml-auto text-xs font-mono tabular-nums">
+          {additions > 0 && (
+            <span style={{ color: "#00cab1" }}>+{additions}</span>
+          )}
+          {additions > 0 && deletions > 0 && " "}
+          {deletions > 0 && (
+            <span style={{ color: "#ff2e3f" }}>-{deletions}</span>
+          )}
+        </span>
+      )}
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={copyCode}
+        className="h-7 w-7 p-0"
+        aria-label={isCopied ? "Copied" : "Copy code"}
+      >
+        {isCopied ? (
+          <Check className="h-4 w-4 text-green-700 dark:text-green-400" />
+        ) : (
+          <Copy className="text-muted-foreground h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+function CodeDiffContent({ className }: CodeDiffSectionProps) {
+  const {
+    isPatchMode,
+    diffStyle,
+    lineNumbers,
+    isCollapsed,
+    resolvedTheme,
+    pierreThemes,
+    fileDiffMetadata,
+    patch,
+  } = useCodeDiff();
+
+  const disableLineNumbers = lineNumbers === "hidden";
+
+  return (
+    <div
+      className={cn(
+        "overflow-x-auto overflow-y-clip text-sm",
+        isCollapsed && "max-h-[200px]",
+        className,
+      )}
+    >
+      {!isPatchMode && fileDiffMetadata && (
+        <PierreFileDiff
+          fileDiff={fileDiffMetadata}
+          options={{
+            theme: pierreThemes,
+            themeType: resolvedTheme,
+            diffStyle,
+            disableFileHeader: true,
+            disableLineNumbers,
+          }}
+        />
+      )}
+      {isPatchMode && patch && (
+        <PierrePatchDiff
+          patch={patch}
+          options={{
+            theme: pierreThemes,
+            themeType: resolvedTheme,
+            diffStyle,
+            disableFileHeader: true,
+            disableLineNumbers,
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function CodeDiffCollapseToggle({ className }: CodeDiffSectionProps) {
+  const { shouldCollapse, isCollapsed, toggleExpanded } = useCodeDiff();
+
+  if (!shouldCollapse) return null;
+
+  return (
+    <CollapsibleTrigger asChild>
+      <Button
+        variant="ghost"
+        onClick={toggleExpanded}
+        className={cn(
+          "text-muted-foreground w-full rounded-none border-t font-normal",
+          className,
+        )}
+      >
+        {isCollapsed ? (
+          <>
+            <ChevronDown className="mr-1 size-4" />
+            Show full diff
+          </>
+        ) : (
+          <>
+            <ChevronUp className="mr-2 h-4 w-4" />
+            Collapse
+          </>
+        )}
+      </Button>
+    </CollapsibleTrigger>
+  );
+}
+
+/* ── Composed preset (callable as a flat component) ─────────────── */
+
+export type CodeDiffComposedProps = Omit<CodeDiffRootProps, "children">;
+
+function CodeDiffComposed(props: CodeDiffComposedProps) {
+  return (
+    <CodeDiffRoot {...props}>
+      <CodeDiffHeader />
+      <CodeDiffContent />
+      <CodeDiffCollapseToggle />
+    </CodeDiffRoot>
+  );
+}
+
+/* ── Compound export: CodeDiff is callable AND has subcomponents ── */
+
+type CodeDiffComponent = typeof CodeDiffComposed & {
+  Root: typeof CodeDiffRoot;
+  Header: typeof CodeDiffHeader;
+  Content: typeof CodeDiffContent;
+  CollapseToggle: typeof CodeDiffCollapseToggle;
+};
+
+export const CodeDiff = Object.assign(CodeDiffComposed, {
+  Root: CodeDiffRoot,
+  Header: CodeDiffHeader,
+  Content: CodeDiffContent,
+  CollapseToggle: CodeDiffCollapseToggle,
+}) as CodeDiffComponent;
diff --git a/frontend/src/toolui/components/code-diff/index.tsx b/frontend/src/toolui/components/code-diff/index.tsx
new file mode 100644
index 00000000..5c39834c
--- /dev/null
+++ b/frontend/src/toolui/components/code-diff/index.tsx
@@ -0,0 +1,7 @@
+export { CodeDiff } from "./code-diff";
+export type {
+  CodeDiffRootProps,
+  CodeDiffComposedProps,
+  CodeDiffSectionProps,
+} from "./code-diff";
+export type { CodeDiffProps, SerializableCodeDiff } from "./schema";
diff --git a/frontend/src/toolui/components/code-diff/schema.ts b/frontend/src/toolui/components/code-diff/schema.ts
new file mode 100644
index 00000000..a480cded
--- /dev/null
+++ b/frontend/src/toolui/components/code-diff/schema.ts
@@ -0,0 +1,71 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+const CodeDiffPropsSchemaBase = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  oldCode: z.string().optional(),
+  newCode: z.string().optional(),
+  patch: z.string().optional(),
+  language: z.string().trim().min(1).default("text"),
+  filename: z.string().optional(),
+  lineNumbers: z.enum(["visible", "hidden"]).default("visible"),
+  diffStyle: z.enum(["unified", "split"]).default("unified"),
+  maxCollapsedLines: z.number().min(1).optional(),
+  className: z.string().optional(),
+});
+
+function validateCodeDiffInputMode(
+  data: { patch?: string; oldCode?: string; newCode?: string },
+  ctx: z.RefinementCtx,
+) {
+  const hasPatch = !!data.patch;
+  const hasFiles = !!data.oldCode || !!data.newCode;
+
+  if (!hasPatch && !hasFiles) {
+    ctx.addIssue({
+      code: "custom",
+      message:
+        "Provide either a patch string or at least one of oldCode/newCode",
+    });
+  }
+
+  if (hasPatch && hasFiles) {
+    ctx.addIssue({
+      code: "custom",
+      message:
+        "Cannot mix patch mode with oldCode/newCode — use one or the other",
+    });
+  }
+}
+
+export const CodeDiffPropsSchema = CodeDiffPropsSchemaBase.superRefine(
+  validateCodeDiffInputMode,
+);
+
+export type CodeDiffProps = z.infer<typeof CodeDiffPropsSchema>;
+
+export const SerializableCodeDiffSchema = CodeDiffPropsSchemaBase.omit({
+  className: true,
+}).superRefine(validateCodeDiffInputMode);
+
+export type SerializableCodeDiff = z.infer<typeof SerializableCodeDiffSchema>;
+
+const SerializableCodeDiffSchemaContract = defineToolUiContract(
+  "CodeDiff",
+  SerializableCodeDiffSchema,
+);
+
+export const parseSerializableCodeDiff: (
+  input: unknown,
+) => SerializableCodeDiff = SerializableCodeDiffSchemaContract.parse;
+
+export const safeParseSerializableCodeDiff: (
+  input: unknown,
+) => SerializableCodeDiff | null = SerializableCodeDiffSchemaContract.safeParse;
diff --git a/frontend/src/toolui/components/geo-map/README.md b/frontend/src/toolui/components/geo-map/README.md
new file mode 100644
index 00000000..ca7990b1
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/README.md
@@ -0,0 +1,24 @@
+# Geo Map
+
+Implementation for the "geo-map" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/geo-map/index.tsx
+- serializable schema + parse helpers: components/tool-ui/geo-map/schema.ts
+- public facade component: components/tool-ui/geo-map/geo-map.tsx
+- internal Leaflet engine: components/tool-ui/geo-map/geo-map-engine.tsx
+- colocated Leaflet shell theme styles: components/tool-ui/geo-map/geo-map-theme.module.css
+- icon construction helpers: components/tool-ui/geo-map/geo-map-icons.ts
+- popup/tooltip overlay renderer: components/tool-ui/geo-map/geo-map-overlays.tsx
+
+## Companion assets
+
+- Docs page: app/docs/geo-map/content.mdx
+- Preset payload: lib/presets/geo-map.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test
diff --git a/frontend/src/toolui/components/geo-map/_adapter.tsx b/frontend/src/toolui/components/geo-map/_adapter.tsx
new file mode 100644
index 00000000..1d3dd30c
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/_adapter.tsx
@@ -0,0 +1,23 @@
+/**
+ * Adapter: UI and utility re-exports for copy-standalone portability.
+ *
+ * When copying this component to another project, update these imports
+ * to match your project's paths:
+ *
+ *   cn      → Your Tailwind merge utility (e.g., "@toolui/lib/utils", "~/lib/cn")
+ *   Leaflet → map primitives from react-leaflet
+ */
+
+export { cn } from "@toolui/lib/utils";
+export {
+  CircleMarker,
+  MapContainer,
+  Marker,
+  Polyline,
+  Popup,
+  TileLayer,
+  Tooltip,
+  ZoomControl,
+  useMap,
+  useMapEvents,
+} from "react-leaflet";
diff --git a/frontend/src/toolui/components/geo-map/geo-map-engine.tsx b/frontend/src/toolui/components/geo-map/geo-map-engine.tsx
new file mode 100644
index 00000000..798beee2
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/geo-map-engine.tsx
@@ -0,0 +1,756 @@
+"use client";
+
+import type { Map as LeafletMap } from "leaflet";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Supercluster from "supercluster";
+import {
+  CircleMarker,
+  MapContainer,
+  Marker,
+  Polyline,
+  TileLayer,
+  ZoomControl,
+  useMap,
+  useMapEvents,
+} from "./_adapter";
+import { createClusterIcon, resolveMarkerIcon } from "./geo-map-icons";
+import { GeoMapOverlays } from "./geo-map-overlays";
+import type {
+  GeoMapClustering,
+  GeoMapFitTarget,
+  GeoMapMarker,
+  GeoMapRoute,
+  GeoMapViewport,
+} from "./schema";
+
+const TILE_ATTRIBUTION =
+  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>';
+const ROUTE_DEFAULT_COLOR = "var(--primary)";
+const ROUTE_DEFAULT_WEIGHT = 3;
+const ROUTE_DEFAULT_OPACITY = 0.85;
+const EMPTY_ROUTES: GeoMapRoute[] = [];
+
+const CLUSTER_RADIUS_DEFAULT = 60;
+const CLUSTER_MAX_ZOOM_DEFAULT = 16;
+const CLUSTER_MIN_POINTS_DEFAULT = 2;
+
+const DEFAULT_CENTER: [number, number] = [20, 0];
+export const DEFAULT_VIEW_ZOOM = 2;
+const SINGLE_LOCATION_ZOOM = 13;
+const DEFAULT_VIEWPORT_PADDING = 32;
+
+type LeafletRuntime = Pick<
+  typeof import("leaflet"),
+  "divIcon" | "latLngBounds"
+>;
+
+export type GeoMapBbox = [
+  west: number,
+  south: number,
+  east: number,
+  north: number,
+];
+export type GeoMapLatLng = [lat: number, lng: number];
+
+export type GeoMapClusterProperties = {
+  cluster?: boolean;
+  cluster_id?: number;
+  point_count?: number;
+  markerId?: string;
+};
+
+export type GeoMapClusterFeature = GeoJSON.Feature<
+  GeoJSON.Point,
+  GeoMapClusterProperties
+>;
+
+type MarkerClusterPointProperties = GeoMapClusterProperties & {
+  markerId?: string;
+  marker?: GeoMapMarker;
+};
+
+type MapViewportState = {
+  bbox: GeoMapBbox;
+  zoom: number;
+};
+
+function roundCoordinate(value: number): number {
+  return Math.round(value * 1_000_000) / 1_000_000;
+}
+
+function normalizeViewportState(state: MapViewportState): MapViewportState {
+  return {
+    bbox: [
+      roundCoordinate(state.bbox[0]),
+      roundCoordinate(state.bbox[1]),
+      roundCoordinate(state.bbox[2]),
+      roundCoordinate(state.bbox[3]),
+    ],
+    zoom: state.zoom,
+  };
+}
+
+function areViewportStatesEqual(
+  a: MapViewportState | null,
+  b: MapViewportState,
+): boolean {
+  if (!a) {
+    return false;
+  }
+
+  return (
+    a.zoom === b.zoom &&
+    a.bbox[0] === b.bbox[0] &&
+    a.bbox[1] === b.bbox[1] &&
+    a.bbox[2] === b.bbox[2] &&
+    a.bbox[3] === b.bbox[3]
+  );
+}
+
+function serializeFitPoints(points: [number, number][]): string {
+  return points
+    .map(([lat, lng]) => `${roundCoordinate(lat)},${roundCoordinate(lng)}`)
+    .join("|");
+}
+
+function readViewportState(map: LeafletMap): MapViewportState {
+  const bounds = map.getBounds();
+  return normalizeViewportState({
+    bbox: [
+      bounds.getWest(),
+      bounds.getSouth(),
+      bounds.getEast(),
+      bounds.getNorth(),
+    ],
+    zoom: Math.round(map.getZoom()),
+  });
+}
+
+export function collectFitPoints(
+  markers: GeoMapMarker[],
+  routes: GeoMapRoute[],
+  target: GeoMapFitTarget,
+): GeoMapLatLng[] {
+  const markerPoints =
+    target === "markers" || target === "all"
+      ? markers.map((marker) => [marker.lat, marker.lng] as GeoMapLatLng)
+      : [];
+
+  const routePoints =
+    target === "routes" || target === "all"
+      ? routes.flatMap((route) =>
+          route.points.map((point) => [point.lat, point.lng] as GeoMapLatLng),
+        )
+      : [];
+
+  return [...markerPoints, ...routePoints];
+}
+
+export function resolveFitPointsWithFallback(
+  markers: GeoMapMarker[],
+  routes: GeoMapRoute[],
+  target: GeoMapFitTarget,
+): GeoMapLatLng[] {
+  const selected = collectFitPoints(markers, routes, target);
+  if (selected.length > 0) {
+    return selected;
+  }
+
+  if (target !== "markers") {
+    return collectFitPoints(markers, routes, "markers");
+  }
+
+  return [];
+}
+
+export function splitDatelineBbox(bbox: GeoMapBbox): GeoMapBbox[] {
+  const [west, south, east, north] = bbox;
+
+  if (west <= east) {
+    return [bbox];
+  }
+
+  return [
+    [west, south, 180, north],
+    [-180, south, east, north],
+  ];
+}
+
+function getClusterFeatureKey(feature: GeoMapClusterFeature): string {
+  const properties = feature.properties ?? {};
+
+  if (properties.cluster && typeof properties.cluster_id === "number") {
+    return `cluster:${properties.cluster_id}`;
+  }
+
+  if (
+    typeof properties.markerId === "string" &&
+    properties.markerId.length > 0
+  ) {
+    return `marker:${properties.markerId}`;
+  }
+
+  if (feature.id !== undefined && feature.id !== null) {
+    return `id:${String(feature.id)}`;
+  }
+
+  const [lng, lat] = feature.geometry.coordinates;
+  return `point:${lat}:${lng}`;
+}
+
+function dedupeClusterFeatures(
+  features: GeoMapClusterFeature[],
+): GeoMapClusterFeature[] {
+  const seen = new Set<string>();
+  const deduped: GeoMapClusterFeature[] = [];
+
+  features.forEach((feature) => {
+    const key = getClusterFeatureKey(feature);
+    if (seen.has(key)) {
+      return;
+    }
+
+    seen.add(key);
+    deduped.push(feature);
+  });
+
+  return deduped;
+}
+
+export function getClustersForDatelineAwareBbox(
+  bbox: GeoMapBbox,
+  zoom: number,
+  getClustersForBbox: (
+    candidateBbox: GeoMapBbox,
+    zoom: number,
+  ) => GeoMapClusterFeature[],
+): GeoMapClusterFeature[] {
+  const queried = splitDatelineBbox(bbox).flatMap((candidateBbox) =>
+    getClustersForBbox(candidateBbox, zoom),
+  );
+
+  return dedupeClusterFeatures(queried);
+}
+
+export function toSafeExpansionZoom(
+  zoom: number,
+  options?: { minZoom?: number; maxZoom?: number; fallback?: number },
+): number {
+  const minZoom = options?.minZoom ?? 1;
+  const maxZoom = options?.maxZoom ?? 22;
+  const fallback = options?.fallback ?? 2;
+
+  if (!Number.isFinite(zoom)) {
+    return fallback;
+  }
+
+  return Math.min(maxZoom, Math.max(minZoom, Math.round(zoom)));
+}
+
+function resolveInitialView(
+  markers: GeoMapMarker[],
+  routes: GeoMapRoute[],
+  viewport: GeoMapViewport | undefined,
+): { center: [number, number]; zoom: number } {
+  if (viewport?.mode === "center") {
+    return {
+      center: [viewport.center.lat, viewport.center.lng],
+      zoom: viewport.zoom,
+    };
+  }
+
+  const fitTarget = viewport?.target ?? "all";
+  const fitPoints = resolveFitPointsWithFallback(markers, routes, fitTarget);
+
+  if (fitPoints.length === 1) {
+    return {
+      center: [fitPoints[0][0], fitPoints[0][1]],
+      zoom: viewport?.maxZoom
+        ? Math.min(SINGLE_LOCATION_ZOOM, viewport.maxZoom)
+        : SINGLE_LOCATION_ZOOM,
+    };
+  }
+
+  return { center: DEFAULT_CENTER, zoom: DEFAULT_VIEW_ZOOM };
+}
+
+function ViewportController({
+  markers,
+  routes,
+  viewport,
+  leafletRuntime,
+}: {
+  markers: GeoMapMarker[];
+  routes: GeoMapRoute[];
+  viewport: GeoMapViewport | undefined;
+  leafletRuntime: LeafletRuntime;
+}) {
+  const map = useMap();
+  const lastAppliedViewportRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    lastAppliedViewportRef.current = null;
+  }, [map]);
+
+  useEffect(() => {
+    if (viewport?.mode === "center") {
+      const viewportKey = `center:${roundCoordinate(viewport.center.lat)}:${roundCoordinate(viewport.center.lng)}:${viewport.zoom}`;
+      if (lastAppliedViewportRef.current === viewportKey) {
+        return;
+      }
+
+      lastAppliedViewportRef.current = viewportKey;
+      map.setView([viewport.center.lat, viewport.center.lng], viewport.zoom);
+      return;
+    }
+
+    const fitTarget = viewport?.target ?? "all";
+    const fitPoints = resolveFitPointsWithFallback(markers, routes, fitTarget);
+    if (fitPoints.length === 0) {
+      return;
+    }
+
+    const maxZoom = viewport?.maxZoom;
+    if (fitPoints.length === 1) {
+      const [lat, lng] = fitPoints[0];
+      const zoom = maxZoom
+        ? Math.min(SINGLE_LOCATION_ZOOM, maxZoom)
+        : SINGLE_LOCATION_ZOOM;
+      const viewportKey = `fit-single:${roundCoordinate(lat)}:${roundCoordinate(lng)}:${zoom}`;
+      if (lastAppliedViewportRef.current === viewportKey) {
+        return;
+      }
+
+      lastAppliedViewportRef.current = viewportKey;
+      map.setView([lat, lng], zoom);
+      return;
+    }
+
+    const padding = viewport?.padding ?? DEFAULT_VIEWPORT_PADDING;
+    const viewportKey = `fit:${fitTarget}:${padding}:${maxZoom ?? "none"}:${serializeFitPoints(fitPoints)}`;
+    if (lastAppliedViewportRef.current === viewportKey) {
+      return;
+    }
+
+    lastAppliedViewportRef.current = viewportKey;
+    const bounds = leafletRuntime.latLngBounds(fitPoints);
+    map.fitBounds(bounds, {
+      maxZoom,
+      padding: [padding, padding],
+    });
+  }, [leafletRuntime, map, markers, routes, viewport]);
+
+  return null;
+}
+
+function MapObserver({
+  onViewportChange,
+  onMapReady,
+}: {
+  onViewportChange: (state: MapViewportState) => void;
+  onMapReady: (map: LeafletMap) => void;
+}) {
+  const map = useMapEvents({
+    moveend: () => {
+      onViewportChange(readViewportState(map));
+    },
+    zoomend: () => {
+      onViewportChange(readViewportState(map));
+    },
+  });
+
+  useEffect(() => {
+    onMapReady(map);
+    onViewportChange(readViewportState(map));
+  }, [map, onMapReady, onViewportChange]);
+
+  return null;
+}
+
+function resolveMarkerAriaLabel(marker: GeoMapMarker): string {
+  if (marker.label && marker.description) {
+    return `${marker.label}. ${marker.description}`;
+  }
+
+  return (
+    marker.label ??
+    marker.description ??
+    `Marker at ${marker.lat.toFixed(4)}, ${marker.lng.toFixed(4)}`
+  );
+}
+
+export const GeoMapEngine = memo(function GeoMapEngine({
+  id,
+  markers,
+  routes,
+  clustering,
+  viewport,
+  showZoomControl,
+  tileUrl,
+  mapAriaLabel,
+  tooltipClassName,
+  popupClassName,
+  onMarkerClick,
+  onRouteClick,
+  onReadyChange,
+}: {
+  id: string;
+  markers: GeoMapMarker[];
+  routes?: GeoMapRoute[];
+  clustering?: GeoMapClustering;
+  viewport?: GeoMapViewport;
+  showZoomControl: boolean;
+  tileUrl: string;
+  mapAriaLabel: string;
+  tooltipClassName?: string;
+  popupClassName?: string;
+  onMarkerClick?: (marker: GeoMapMarker) => void;
+  onRouteClick?: (route: GeoMapRoute) => void;
+  onReadyChange?: (isReady: boolean) => void;
+}) {
+  const resolvedRoutes = routes ?? EMPTY_ROUTES;
+  const [leafletRuntime, setLeafletRuntime] = useState<LeafletRuntime | null>(
+    null,
+  );
+  const [mapInstance, setMapInstance] = useState<LeafletMap | null>(null);
+  const [viewportState, setViewportState] = useState<MapViewportState | null>(
+    null,
+  );
+
+  const handleViewportChange = useCallback((nextState: MapViewportState) => {
+    const normalized = normalizeViewportState(nextState);
+    setViewportState((previousState) =>
+      areViewportStatesEqual(previousState, normalized)
+        ? previousState
+        : normalized,
+    );
+  }, []);
+
+  useEffect(() => {
+    let isActive = true;
+
+    void import("leaflet").then((module) => {
+      if (!isActive) {
+        return;
+      }
+
+      setLeafletRuntime({
+        divIcon: module.divIcon,
+        latLngBounds: module.latLngBounds,
+      });
+    });
+
+    return () => {
+      isActive = false;
+    };
+  }, []);
+
+  const isReady = leafletRuntime !== null;
+
+  useEffect(() => {
+    onReadyChange?.(isReady);
+  }, [isReady, onReadyChange]);
+
+  useEffect(() => {
+    if (!mapInstance) {
+      return;
+    }
+
+    const container = mapInstance.getContainer();
+    container.setAttribute("role", "region");
+    container.setAttribute("aria-label", mapAriaLabel);
+  }, [mapAriaLabel, mapInstance]);
+
+  useEffect(() => {
+    if (!mapInstance) {
+      return;
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        mapInstance.closePopup();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [mapInstance]);
+
+  const initialView = useMemo(
+    () => resolveInitialView(markers, resolvedRoutes, viewport),
+    [markers, resolvedRoutes, viewport],
+  );
+
+  const markerById = useMemo(() => {
+    const map = new Map<string, GeoMapMarker>();
+    markers.forEach((marker, index) => {
+      map.set(marker.id ?? `marker-${index}`, marker);
+    });
+    return map;
+  }, [markers]);
+
+  const clusterConfig = useMemo(
+    () => ({
+      enabled: clustering?.enabled === true,
+      radius: clustering?.radius ?? CLUSTER_RADIUS_DEFAULT,
+      maxZoom: clustering?.maxZoom ?? CLUSTER_MAX_ZOOM_DEFAULT,
+      minPoints: clustering?.minPoints ?? CLUSTER_MIN_POINTS_DEFAULT,
+    }),
+    [clustering],
+  );
+
+  const clusterIndex = useMemo(() => {
+    if (!clusterConfig.enabled) {
+      return null;
+    }
+
+    const index = new Supercluster<MarkerClusterPointProperties>({
+      radius: clusterConfig.radius,
+      maxZoom: clusterConfig.maxZoom,
+      minPoints: clusterConfig.minPoints,
+    });
+
+    const points = markers.map((marker, index) => {
+      const markerId = marker.id ?? `marker-${index}`;
+      return {
+        type: "Feature" as const,
+        id: markerId,
+        geometry: {
+          type: "Point" as const,
+          coordinates: [marker.lng, marker.lat] as [number, number],
+        },
+        properties: {
+          markerId,
+          marker,
+        },
+      };
+    });
+
+    index.load(points);
+    return index;
+  }, [
+    clusterConfig.enabled,
+    clusterConfig.maxZoom,
+    clusterConfig.minPoints,
+    clusterConfig.radius,
+    markers,
+  ]);
+
+  const clusteredFeatures = useMemo(() => {
+    if (!clusterConfig.enabled || !clusterIndex || !viewportState) {
+      return [] as GeoMapClusterFeature[];
+    }
+
+    return getClustersForDatelineAwareBbox(
+      viewportState.bbox,
+      viewportState.zoom,
+      (bbox, zoom) =>
+        clusterIndex.getClusters(bbox, zoom) as GeoMapClusterFeature[],
+    );
+  }, [clusterConfig.enabled, clusterIndex, viewportState]);
+
+  const renderMarker = useCallback(
+    (
+      marker: GeoMapMarker,
+      markerKey: string,
+      markerPositionOverride?: [number, number],
+    ) => {
+      const markerPosition: [number, number] = markerPositionOverride ?? [
+        marker.lat,
+        marker.lng,
+      ];
+      const tooltipMode = marker.tooltip ?? "hover";
+      const tooltipContent = marker.label ?? marker.description;
+      const icon = marker.icon;
+      const markerAriaLabel = resolveMarkerAriaLabel(marker);
+
+      if (!leafletRuntime) {
+        return null;
+      }
+
+      const leafletIcon = resolveMarkerIcon(icon, leafletRuntime);
+      if (leafletIcon) {
+        return (
+          <Marker
+            key={markerKey}
+            position={markerPosition}
+            icon={leafletIcon}
+            title={markerAriaLabel}
+            alt={markerAriaLabel}
+            eventHandlers={{
+              click: () => onMarkerClick?.(marker),
+            }}
+          >
+            <GeoMapOverlays
+              tooltipMode={tooltipMode}
+              tooltipContent={tooltipContent}
+              label={marker.label}
+              description={marker.description}
+              tooltipClassName={tooltipClassName}
+              popupClassName={popupClassName}
+            />
+          </Marker>
+        );
+      }
+
+      const markerStroke =
+        icon?.type === "dot"
+          ? (icon.borderColor ?? "var(--border)")
+          : "var(--border)";
+      const markerFill =
+        icon?.type === "dot"
+          ? (icon.color ?? "var(--primary)")
+          : "var(--primary)";
+      const markerRadius = icon?.type === "dot" ? (icon.radius ?? 7) : 7;
+
+      return (
+        <CircleMarker
+          key={markerKey}
+          center={markerPosition}
+          radius={markerRadius}
+          pathOptions={{
+            color: markerStroke,
+            fillColor: markerFill,
+            fillOpacity: 0.95,
+            weight: 2,
+          }}
+          eventHandlers={{
+            click: () => onMarkerClick?.(marker),
+          }}
+        >
+          <GeoMapOverlays
+            tooltipMode={tooltipMode}
+            tooltipContent={tooltipContent}
+            label={marker.label}
+            description={marker.description}
+            tooltipClassName={tooltipClassName}
+            popupClassName={popupClassName}
+          />
+        </CircleMarker>
+      );
+    },
+    [leafletRuntime, onMarkerClick, popupClassName, tooltipClassName],
+  );
+
+  if (!leafletRuntime) {
+    return null;
+  }
+
+  return (
+    <MapContainer
+      center={initialView.center}
+      zoom={initialView.zoom}
+      zoomControl={false}
+      className="h-full w-full"
+      scrollWheelZoom
+    >
+      <TileLayer attribution={TILE_ATTRIBUTION} url={tileUrl} />
+      {showZoomControl && <ZoomControl position="topright" />}
+      <MapObserver
+        onMapReady={setMapInstance}
+        onViewportChange={handleViewportChange}
+      />
+      <ViewportController
+        leafletRuntime={leafletRuntime}
+        markers={markers}
+        routes={resolvedRoutes}
+        viewport={viewport}
+      />
+
+      {resolvedRoutes.map((route, routeIndex) => {
+        const routeKey = route.id ?? `${id}-route-${routeIndex}`;
+        const positions = route.points.map((point) => [
+          point.lat,
+          point.lng,
+        ]) as [number, number][];
+        const tooltipMode = route.tooltip ?? "hover";
+        const tooltipContent = route.label ?? route.description;
+
+        return (
+          <Polyline
+            key={routeKey}
+            positions={positions}
+            pathOptions={{
+              color: route.color ?? ROUTE_DEFAULT_COLOR,
+              weight: route.weight ?? ROUTE_DEFAULT_WEIGHT,
+              opacity: route.opacity ?? ROUTE_DEFAULT_OPACITY,
+              dashArray: route.dashArray,
+            }}
+            eventHandlers={{
+              click: () => onRouteClick?.(route),
+            }}
+          >
+            <GeoMapOverlays
+              tooltipMode={tooltipMode}
+              tooltipContent={tooltipContent}
+              label={route.label}
+              description={route.description}
+              tooltipClassName={tooltipClassName}
+              popupClassName={popupClassName}
+            />
+          </Polyline>
+        );
+      })}
+
+      {clusterConfig.enabled && clusterIndex && viewportState
+        ? clusteredFeatures.map((feature, index) => {
+            const [lng, lat] = feature.geometry.coordinates;
+            const properties = (feature.properties ??
+              {}) as MarkerClusterPointProperties;
+
+            if (
+              properties.cluster &&
+              typeof properties.cluster_id === "number"
+            ) {
+              const pointCount = properties.point_count ?? 0;
+              const clusterId = properties.cluster_id;
+              const clusterIcon = createClusterIcon(pointCount, leafletRuntime);
+              const clusterAriaLabel = `Cluster containing ${pointCount} locations`;
+
+              return (
+                <Marker
+                  key={`cluster-${clusterId}`}
+                  position={[lat, lng]}
+                  icon={clusterIcon}
+                  title={clusterAriaLabel}
+                  alt={clusterAriaLabel}
+                  eventHandlers={{
+                    click: () => {
+                      if (!mapInstance) {
+                        return;
+                      }
+
+                      const expansionZoom = toSafeExpansionZoom(
+                        clusterIndex.getClusterExpansionZoom(clusterId),
+                        {
+                          maxZoom: 22,
+                          fallback:
+                            (viewportState.zoom ?? DEFAULT_VIEW_ZOOM) + 2,
+                        },
+                      );
+                      mapInstance.flyTo([lat, lng], expansionZoom);
+                    },
+                  }}
+                />
+              );
+            }
+
+            const marker =
+              properties.marker ??
+              markerById.get(properties.markerId ?? `marker-${index}`);
+            if (!marker) {
+              return null;
+            }
+
+            const markerKey =
+              marker.id ?? properties.markerId ?? `${id}-cluster-leaf-${index}`;
+            return renderMarker(marker, markerKey, [lat, lng]);
+          })
+        : markers.map((marker, index) =>
+            renderMarker(marker, marker.id ?? `${id}-marker-${index}`),
+          )}
+    </MapContainer>
+  );
+});
diff --git a/frontend/src/toolui/components/geo-map/geo-map-icons.ts b/frontend/src/toolui/components/geo-map/geo-map-icons.ts
new file mode 100644
index 00000000..1c6bfc97
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/geo-map-icons.ts
@@ -0,0 +1,131 @@
+import type { DivIcon } from "leaflet";
+import type { GeoMapMarker } from "./schema";
+
+type LeafletIconRuntime = Pick<typeof import("leaflet"), "divIcon">;
+
+function isSafeHttpUrl(value: string | undefined): boolean {
+  if (!value) {
+    return false;
+  }
+
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function createEmojiIcon(
+  icon: Extract<NonNullable<GeoMapMarker["icon"]>, { type: "emoji" }>,
+  leafletRuntime: LeafletIconRuntime,
+): DivIcon {
+  const size = icon.size ?? 24;
+  const background = icon.bgColor ?? "var(--card)";
+  const border = icon.borderColor ?? "var(--border)";
+
+  return leafletRuntime.divIcon({
+    className: "",
+    html: `<span style="
+display:flex;
+align-items:center;
+justify-content:center;
+width:${size}px;
+height:${size}px;
+border-radius:999px;
+background:${background};
+border:1px solid ${border};
+font-size:${Math.round(size * 0.62)}px;
+line-height:1;
+box-shadow:0 1px 3px oklch(from var(--foreground) l c h / 0.22);
+">${escapeHtml(icon.value)}</span>`,
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+    popupAnchor: [0, -Math.round(size / 2)],
+    tooltipAnchor: [0, -Math.round(size / 2)],
+  });
+}
+
+function createImageIcon(
+  icon: Extract<NonNullable<GeoMapMarker["icon"]>, { type: "image" }>,
+  leafletRuntime: LeafletIconRuntime,
+): DivIcon {
+  const width = icon.width ?? 28;
+  const height = icon.height ?? 28;
+  const borderRadius = icon.borderRadius ?? Math.min(width, height) / 2;
+  const border = icon.borderColor ?? "var(--border)";
+
+  return leafletRuntime.divIcon({
+    className: "",
+    html: `<span style="
+display:block;
+width:${width}px;
+height:${height}px;
+border-radius:${borderRadius}px;
+overflow:hidden;
+border:1px solid ${border};
+background:var(--card);
+box-shadow:0 1px 3px oklch(from var(--foreground) l c h / 0.22);
+"><img src="${escapeHtml(icon.url)}" alt="" style="width:100%;height:100%;object-fit:cover;display:block;" /></span>`,
+    iconSize: [width, height],
+    iconAnchor: [width / 2, height / 2],
+    popupAnchor: [0, -Math.round(height / 2)],
+    tooltipAnchor: [0, -Math.round(height / 2)],
+  });
+}
+
+export function createClusterIcon(
+  count: number,
+  leafletRuntime: LeafletIconRuntime,
+): DivIcon {
+  const size = count >= 100 ? 42 : count >= 10 ? 38 : 34;
+  const background = "var(--primary)";
+  const border = "var(--background)";
+
+  return leafletRuntime.divIcon({
+    className: "",
+    html: `<span style="
+display:flex;
+align-items:center;
+justify-content:center;
+width:${size}px;
+height:${size}px;
+border-radius:999px;
+background:${background};
+border:2px solid ${border};
+color:var(--primary-foreground);
+font-size:12px;
+font-weight:700;
+line-height:1;
+box-shadow:0 2px 6px oklch(from var(--foreground) l c h / 0.25);
+">${count}</span>`,
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+    popupAnchor: [0, -Math.round(size / 2)],
+    tooltipAnchor: [0, -Math.round(size / 2)],
+  });
+}
+
+export function resolveMarkerIcon(
+  icon: GeoMapMarker["icon"] | undefined,
+  leafletRuntime: LeafletIconRuntime,
+): DivIcon | null {
+  if (icon?.type === "emoji") {
+    return createEmojiIcon(icon, leafletRuntime);
+  }
+
+  if (icon?.type === "image" && isSafeHttpUrl(icon.url)) {
+    return createImageIcon(icon, leafletRuntime);
+  }
+
+  return null;
+}
diff --git a/frontend/src/toolui/components/geo-map/geo-map-overlays.tsx b/frontend/src/toolui/components/geo-map/geo-map-overlays.tsx
new file mode 100644
index 00000000..a9cbe105
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/geo-map-overlays.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { Popup, Tooltip, cn } from "./_adapter";
+
+function GeoMapPopupContent({
+  label,
+  description,
+}: {
+  label?: string;
+  description?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      {label && (
+        <p className="block text-sm leading-tight font-semibold tracking-tight text-foreground">
+          {label}
+        </p>
+      )}
+      {description && (
+        <p className="block text-xs leading-relaxed text-muted-foreground">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function GeoMapTooltipContent({ text }: { text: string }) {
+  return <span className="block">{text}</span>;
+}
+
+export function GeoMapOverlays({
+  tooltipMode,
+  tooltipContent,
+  label,
+  description,
+  tooltipClassName,
+  popupClassName,
+}: {
+  tooltipMode: "none" | "hover" | "always";
+  tooltipContent?: string;
+  label?: string;
+  description?: string;
+  tooltipClassName?: string;
+  popupClassName?: string;
+}) {
+  const hasPopup = Boolean(label || description);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const shouldRenderTooltip =
+    tooltipMode !== "none" && tooltipContent && (!hasPopup || !isPopupOpen);
+  const popupEventHandlers = useMemo(
+    () => ({
+      add: () => setIsPopupOpen(true),
+      remove: () => setIsPopupOpen(false),
+    }),
+    [],
+  );
+
+  return (
+    <>
+      {shouldRenderTooltip && (
+        <Tooltip
+          direction="top"
+          permanent={tooltipMode === "always"}
+          className={cn("geo-map-tooltip", tooltipClassName)}
+        >
+          <GeoMapTooltipContent text={tooltipContent} />
+        </Tooltip>
+      )}
+      {hasPopup && (
+        <Popup
+          className={cn("geo-map-popup", popupClassName)}
+          closeButton
+          closeOnEscapeKey
+          minWidth={0}
+          maxWidth={288}
+          eventHandlers={popupEventHandlers}
+        >
+          <GeoMapPopupContent label={label} description={description} />
+        </Popup>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/toolui/components/geo-map/geo-map-theme.module.css b/frontend/src/toolui/components/geo-map/geo-map-theme.module.css
new file mode 100644
index 00000000..833a09e4
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/geo-map-theme.module.css
@@ -0,0 +1,216 @@
+.root[data-slot="geo-map"] {
+  --geo-map-canvas-bg: var(--muted);
+  --geo-map-tooltip-bg: var(--foreground);
+  --geo-map-tooltip-fg: var(--background);
+  --geo-map-tooltip-shadow: 0 8px 20px
+    oklch(from var(--foreground) l c h / 0.18);
+  --geo-map-tooltip-radius: calc(var(--radius) - 2px);
+  --geo-map-tooltip-padding: 0.375rem 0.625rem;
+  --geo-map-tooltip-font-size: 0.75rem;
+  --geo-map-tooltip-font-weight: 500;
+  --geo-map-tooltip-line-height: 1.2;
+  --geo-map-popup-margin-bottom: 12px;
+  --geo-map-popup-border: var(--border);
+  --geo-map-popup-radius: calc(var(--radius) + 2px);
+  --geo-map-popup-bg: oklch(from var(--popover) l c h / 0.96);
+  --geo-map-popup-fg: var(--popover-foreground);
+  --geo-map-popup-shadow: 0 10px 30px oklch(from var(--foreground) l c h / 0.12);
+  --geo-map-popup-blur: 8px;
+  --geo-map-popup-content-padding: 0.625rem 0.75rem;
+  --geo-map-popup-max-width: min(80vw, 18rem);
+  --geo-map-popup-font-family: var(
+    --font-sans,
+    ui-sans-serif,
+    system-ui,
+    sans-serif
+  );
+  --geo-map-zoom-bg: oklch(from var(--background) l c h / 0.78);
+  --geo-map-zoom-fg: var(--foreground);
+  --geo-map-zoom-border: var(--border);
+  --geo-map-zoom-hover-bg: oklch(from var(--accent) l c h / 0.82);
+  --geo-map-zoom-hover-fg: var(--accent-foreground);
+  --geo-map-zoom-disabled-bg: oklch(from var(--muted) l c h / 0.72);
+  --geo-map-zoom-disabled-fg: var(--muted-foreground);
+  --geo-map-zoom-shadow: 0 1px 2px oklch(from var(--foreground) l c h / 0.08);
+  --geo-map-zoom-focus-ring: var(--ring);
+  --geo-map-zoom-radius: 0.5rem;
+  --geo-map-zoom-size: 2.25rem;
+  --geo-map-zoom-font-size: 1.125rem;
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-container) {
+  background: var(--geo-map-canvas-bg);
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom) {
+  border: 1px solid var(--geo-map-zoom-border);
+  box-shadow: var(--geo-map-zoom-shadow);
+  background: var(--geo-map-zoom-bg);
+  backdrop-filter: blur(var(--geo-map-popup-blur));
+  -webkit-backdrop-filter: blur(var(--geo-map-popup-blur));
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom.leaflet-bar) {
+  border-radius: var(--geo-map-zoom-radius) !important;
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--geo-map-zoom-size);
+  height: var(--geo-map-zoom-size);
+  line-height: 1;
+  text-indent: 0;
+  border: 0;
+  background: transparent;
+  color: var(--geo-map-zoom-fg);
+  font-size: var(--geo-map-zoom-font-size);
+  font-weight: 500;
+  box-shadow: none;
+  cursor: default;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    opacity 150ms ease;
+  border-radius: 0 !important;
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a + a) {
+  border-top: 1px solid var(--geo-map-zoom-border);
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a:first-child),
+.root[data-slot="geo-map"]
+  :global(.leaflet-touch .leaflet-control-zoom a:first-child),
+.root[data-slot="geo-map"]
+  :global(.leaflet-control-zoom .leaflet-control-zoom-in) {
+  border-radius: var(--geo-map-zoom-radius) var(--geo-map-zoom-radius) 0 0 !important;
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a:last-child),
+.root[data-slot="geo-map"]
+  :global(.leaflet-touch .leaflet-control-zoom a:last-child),
+.root[data-slot="geo-map"]
+  :global(.leaflet-control-zoom .leaflet-control-zoom-out) {
+  border-top: 0;
+  border-radius: 0 0 var(--geo-map-zoom-radius) var(--geo-map-zoom-radius) !important;
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a:hover) {
+  background: var(--geo-map-zoom-hover-bg);
+  color: var(--geo-map-zoom-hover-fg);
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a:focus),
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a:focus-visible) {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--geo-map-zoom-focus-ring);
+  outline-offset: 1px;
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-control-zoom a.leaflet-disabled),
+.root[data-slot="geo-map"]
+  :global(.leaflet-control-zoom a.leaflet-disabled:hover) {
+  background: var(--geo-map-zoom-disabled-bg);
+  color: var(--geo-map-zoom-disabled-fg);
+  opacity: 0.55;
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-tooltip.geo-map-tooltip) {
+  border: 0;
+  border-radius: var(--geo-map-tooltip-radius);
+  background: var(--geo-map-tooltip-bg);
+  color: var(--geo-map-tooltip-fg);
+  box-shadow: var(--geo-map-tooltip-shadow);
+  font-size: var(--geo-map-tooltip-font-size);
+  font-weight: var(--geo-map-tooltip-font-weight);
+  line-height: var(--geo-map-tooltip-line-height);
+  padding: var(--geo-map-tooltip-padding);
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-tooltip-top.geo-map-tooltip::before) {
+  border-top-color: var(--geo-map-tooltip-bg);
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-tooltip-bottom.geo-map-tooltip::before) {
+  border-bottom-color: var(--geo-map-tooltip-bg);
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-tooltip-left.geo-map-tooltip::before) {
+  border-left-color: var(--geo-map-tooltip-bg);
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-tooltip-right.geo-map-tooltip::before) {
+  border-right-color: var(--geo-map-tooltip-bg);
+}
+
+.root[data-slot="geo-map"] :global(.leaflet-popup.geo-map-popup) {
+  margin-bottom: var(--geo-map-popup-margin-bottom);
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-popup.geo-map-popup .leaflet-popup-content-wrapper) {
+  border: 1px solid var(--geo-map-popup-border);
+  border-radius: var(--geo-map-popup-radius);
+  background: var(--geo-map-popup-bg);
+  color: var(--geo-map-popup-fg);
+  box-shadow: var(--geo-map-popup-shadow);
+  backdrop-filter: blur(var(--geo-map-popup-blur));
+  -webkit-backdrop-filter: blur(var(--geo-map-popup-blur));
+  padding: 0;
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-popup.geo-map-popup .leaflet-popup-content) {
+  margin: 0;
+  min-width: 0;
+  width: max-content;
+  max-width: var(--geo-map-popup-max-width);
+  padding: var(--geo-map-popup-content-padding);
+  font-family: var(--geo-map-popup-font-family);
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-popup.geo-map-popup .leaflet-popup-content p) {
+  margin: 0;
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-popup.geo-map-popup .leaflet-popup-tip-container) {
+  display: none;
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-popup.geo-map-popup .leaflet-popup-close-button) {
+  color: var(--geo-map-popup-fg);
+  opacity: 0.75;
+  top: 0.25rem;
+  right: 0.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.root[data-slot="geo-map"]
+  :global(.leaflet-popup.geo-map-popup .leaflet-popup-close-button:hover) {
+  opacity: 1;
+  background: oklch(from var(--muted) l c h / 0.65);
+}
+
+.root[data-slot="geo-map"]
+  :global(
+    .leaflet-popup.geo-map-popup .leaflet-popup-close-button:focus-visible
+  ) {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
diff --git a/frontend/src/toolui/components/geo-map/geo-map.tsx b/frontend/src/toolui/components/geo-map/geo-map.tsx
new file mode 100644
index 00000000..f56084ed
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/geo-map.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { memo, useEffect, useState } from "react";
+import { cn } from "./_adapter";
+import { GeoMapEngine } from "./geo-map-engine";
+import styles from "./geo-map-theme.module.css";
+import type { GeoMapProps, GeoMapStyle } from "./schema";
+
+const LIGHT_TILE_URL =
+  "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png";
+const DARK_TILE_URL =
+  "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png";
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function getDocumentTheme(): "light" | "dark" | null {
+  if (typeof document === "undefined") return null;
+
+  const root = document.documentElement;
+  const dataTheme = root.getAttribute("data-theme")?.toLowerCase();
+  if (dataTheme === "dark") return "dark";
+  if (dataTheme === "light") return "light";
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+
+  return null;
+}
+
+function useInheritedTheme(): "light" | "dark" {
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    return getDocumentTheme() ?? getSystemTheme();
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+
+    const update = () => setTheme(getDocumentTheme() ?? getSystemTheme());
+
+    const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mql?.addEventListener("change", update);
+
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    });
+
+    return () => {
+      mql?.removeEventListener("change", update);
+      observer.disconnect();
+    };
+  }, []);
+
+  return theme;
+}
+
+function resolveMapAriaLabel(title?: string, description?: string): string {
+  if (title && description) {
+    return `${title}. ${description}`;
+  }
+
+  return title ?? description ?? "Geographic map";
+}
+
+export const GeoMap = memo(function GeoMap({
+  id,
+  role: _role,
+  receipt: _receipt,
+  title,
+  description,
+  markers,
+  routes,
+  clustering,
+  viewport,
+  showZoomControl = true,
+  theme,
+  className,
+  style,
+  tooltipClassName,
+  popupClassName,
+  onMarkerClick,
+  onRouteClick,
+}: GeoMapProps) {
+  const inheritedTheme = useInheritedTheme();
+  const resolvedTheme = theme ?? inheritedTheme;
+  const [isMapReady, setIsMapReady] = useState(false);
+  const tileUrl = resolvedTheme === "dark" ? DARK_TILE_URL : LIGHT_TILE_URL;
+  const mapAriaLabel = resolveMapAriaLabel(title, description);
+  const resolvedRootStyle: GeoMapStyle = {
+    "--geo-map-canvas-bg":
+      resolvedTheme === "dark" ? "var(--background)" : "var(--muted)",
+    ...style,
+  };
+
+  return (
+    <div
+      className={cn("w-full min-w-80", styles.root, className)}
+      style={resolvedRootStyle}
+      data-slot="geo-map"
+      data-tool-ui-id={id}
+    >
+      <div
+        className="bg-muted/20 relative h-[320px] w-full overflow-hidden rounded-lg border"
+        role="region"
+        aria-label={mapAriaLabel}
+      >
+        <GeoMapEngine
+          id={id}
+          markers={markers}
+          routes={routes}
+          clustering={clustering}
+          viewport={viewport}
+          showZoomControl={showZoomControl}
+          tileUrl={tileUrl}
+          mapAriaLabel={mapAriaLabel}
+          tooltipClassName={tooltipClassName}
+          popupClassName={popupClassName}
+          onMarkerClick={onMarkerClick}
+          onRouteClick={onRouteClick}
+          onReadyChange={setIsMapReady}
+        />
+
+        {(title || description) && (
+          <div
+            className={cn(
+              "pointer-events-none absolute top-3 left-3 z-[900]",
+              "max-w-[min(75%,22rem)] rounded-lg border border-border/70 bg-background/70 px-3 py-2",
+              "shadow-sm backdrop-blur-md",
+            )}
+          >
+            {title && (
+              <p className="text-foreground text-sm leading-tight font-semibold">
+                {title}
+              </p>
+            )}
+            {description && (
+              <p className="text-muted-foreground mt-1 text-xs leading-snug">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+
+        {!isMapReady && (
+          <div
+            data-slot="geo-map-loading"
+            className="bg-muted/30 text-muted-foreground pointer-events-none absolute inset-0 flex items-center justify-center"
+          >
+            <span data-slot="geo-map-loading-label">Loading map...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/frontend/src/toolui/components/geo-map/index.tsx b/frontend/src/toolui/components/geo-map/index.tsx
new file mode 100644
index 00000000..09455bef
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/index.tsx
@@ -0,0 +1,16 @@
+import "leaflet/dist/leaflet.css";
+import "./leaflet-overrides.css";
+
+export { GeoMap } from "./geo-map";
+export {
+  type GeoMapClustering,
+  type GeoMapFitTarget,
+  type GeoMapMarker,
+  type GeoMapMarkerIcon,
+  type GeoMapStyle,
+  type GeoMapRoute,
+  type GeoMapViewport,
+  type GeoMapProps,
+  type GeoMapClientProps,
+  type SerializableGeoMap,
+} from "./schema";
diff --git a/frontend/src/toolui/components/geo-map/leaflet-overrides.css b/frontend/src/toolui/components/geo-map/leaflet-overrides.css
new file mode 100644
index 00000000..f8145c0d
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/leaflet-overrides.css
@@ -0,0 +1,37 @@
+/* Leaflet overrides for theme integration */
+
+.leaflet-container {
+  background: var(--muted);
+  /* Isolate Leaflet's high z-indices to prevent them from escaping the container */
+  isolation: isolate;
+}
+
+[data-theme="dark"] .leaflet-container {
+  background: hsl(240 0 10%);
+}
+
+.leaflet-control-attribution {
+  background: oklch(from var(--background) l c h / 0.8) !important;
+  color: var(--muted-foreground);
+}
+
+[data-theme="dark"] .leaflet-control-attribution {
+  background: hsl(240 10% 3.9% / 0.8) !important;
+  color: hsl(240 5% 64.9%);
+}
+
+.leaflet-control-attribution a {
+  color: var(--muted-foreground);
+}
+
+[data-theme="dark"] .leaflet-control-attribution a {
+  color: hsl(240 5% 64.9%);
+}
+
+.leaflet-control-attribution a:hover {
+  color: var(--foreground);
+}
+
+[data-theme="dark"] .leaflet-control-attribution a:hover {
+  color: hsl(0 0% 98%);
+}
diff --git a/frontend/src/toolui/components/geo-map/schema.ts b/frontend/src/toolui/components/geo-map/schema.ts
new file mode 100644
index 00000000..b15ca37a
--- /dev/null
+++ b/frontend/src/toolui/components/geo-map/schema.ts
@@ -0,0 +1,198 @@
+import { z } from "zod";
+import type { CSSProperties } from "react";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+const LatitudeSchema = z.number().finite().min(-90).max(90);
+const LongitudeSchema = z.number().finite().min(-180).max(180);
+const HttpUrlSchema = z
+  .string()
+  .url()
+  .refine((value) => /^https?:\/\//i.test(value), {
+    message: "Expected an http or https URL.",
+  });
+
+const GeoMapMarkerIconDotSchema = z.object({
+  type: z.literal("dot"),
+  color: z.string().optional(),
+  borderColor: z.string().optional(),
+  radius: z.number().min(3).max(16).optional(),
+});
+
+const GeoMapMarkerIconEmojiSchema = z.object({
+  type: z.literal("emoji"),
+  value: z.string().min(1),
+  size: z.number().min(16).max(40).optional(),
+  bgColor: z.string().optional(),
+  borderColor: z.string().optional(),
+});
+
+const GeoMapMarkerIconImageSchema = z.object({
+  type: z.literal("image"),
+  url: HttpUrlSchema,
+  width: z.number().min(16).max(64).optional(),
+  height: z.number().min(16).max(64).optional(),
+  borderRadius: z.number().min(0).max(999).optional(),
+  borderColor: z.string().optional(),
+});
+
+export const GeoMapMarkerIconSchema = z.union([
+  GeoMapMarkerIconDotSchema,
+  GeoMapMarkerIconEmojiSchema,
+  GeoMapMarkerIconImageSchema,
+]);
+
+export type GeoMapMarkerIcon = z.infer<typeof GeoMapMarkerIconSchema>;
+
+export const GeoMapMarkerSchema = z.object({
+  id: z.string().min(1).optional(),
+  lat: LatitudeSchema,
+  lng: LongitudeSchema,
+  label: z.string().optional(),
+  description: z.string().optional(),
+  tooltip: z.enum(["none", "hover", "always"]).optional(),
+  icon: GeoMapMarkerIconSchema.optional(),
+});
+
+export type GeoMapMarker = z.infer<typeof GeoMapMarkerSchema>;
+
+export const GeoMapRoutePointSchema = z.object({
+  lat: LatitudeSchema,
+  lng: LongitudeSchema,
+});
+
+export const GeoMapRouteSchema = z.object({
+  id: z.string().min(1).optional(),
+  points: z.array(GeoMapRoutePointSchema).min(2),
+  label: z.string().optional(),
+  description: z.string().optional(),
+  tooltip: z.enum(["none", "hover", "always"]).optional(),
+  color: z.string().optional(),
+  weight: z.number().min(1).max(12).optional(),
+  opacity: z.number().min(0).max(1).optional(),
+  dashArray: z.string().optional(),
+});
+
+export type GeoMapRoute = z.infer<typeof GeoMapRouteSchema>;
+
+export const GeoMapClusteringSchema = z.object({
+  enabled: z.boolean().optional(),
+  radius: z.number().min(20).max(120).optional(),
+  maxZoom: z.number().min(1).max(22).optional(),
+  minPoints: z.number().min(2).max(20).optional(),
+});
+
+export type GeoMapClustering = z.infer<typeof GeoMapClusteringSchema>;
+
+export const GeoMapFitTargetSchema = z.enum(["markers", "routes", "all"]);
+export type GeoMapFitTarget = z.infer<typeof GeoMapFitTargetSchema>;
+
+const GeoMapFitViewportSchema = z.object({
+  mode: z.literal("fit"),
+  padding: z.number().nonnegative().optional(),
+  maxZoom: z.number().min(1).max(22).optional(),
+  target: GeoMapFitTargetSchema.optional(),
+});
+
+const GeoMapCenterViewportSchema = z.object({
+  mode: z.literal("center"),
+  center: z.object({
+    lat: LatitudeSchema,
+    lng: LongitudeSchema,
+  }),
+  zoom: z.number().min(1).max(22),
+});
+
+export const GeoMapViewportSchema = z.union([
+  GeoMapFitViewportSchema,
+  GeoMapCenterViewportSchema,
+]);
+
+export type GeoMapViewport = z.infer<typeof GeoMapViewportSchema>;
+
+export const GeoMapPropsSchema = z
+  .object({
+    id: ToolUIIdSchema,
+    role: ToolUIRoleSchema.optional(),
+    receipt: ToolUIReceiptSchema.optional(),
+    title: z.string().optional(),
+    description: z.string().optional(),
+    markers: z.array(GeoMapMarkerSchema).min(1),
+    routes: z.array(GeoMapRouteSchema).optional(),
+    clustering: GeoMapClusteringSchema.optional(),
+    viewport: GeoMapViewportSchema.optional(),
+    showZoomControl: z.boolean().optional(),
+    theme: z.enum(["light", "dark"]).optional(),
+  })
+  .superRefine((value, ctx) => {
+    const seenMarkerIds = new Set<string>();
+
+    value.markers.forEach((marker, index) => {
+      if (!marker.id) {
+        return;
+      }
+
+      if (seenMarkerIds.has(marker.id)) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["markers", index, "id"],
+          message: `Duplicate marker id "${marker.id}".`,
+        });
+        return;
+      }
+
+      seenMarkerIds.add(marker.id);
+    });
+
+    const seenRouteIds = new Set<string>();
+    value.routes?.forEach((route, index) => {
+      if (!route.id) {
+        return;
+      }
+
+      if (seenRouteIds.has(route.id)) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["routes", index, "id"],
+          message: `Duplicate route id "${route.id}".`,
+        });
+        return;
+      }
+
+      seenRouteIds.add(route.id);
+    });
+  });
+
+export type GeoMapStyle = CSSProperties &
+  Partial<Record<`--${string}`, string | number>>;
+
+export type GeoMapClientProps = {
+  className?: string;
+  style?: GeoMapStyle;
+  tooltipClassName?: string;
+  popupClassName?: string;
+  onMarkerClick?: (marker: GeoMapMarker) => void;
+  onRouteClick?: (route: GeoMapRoute) => void;
+};
+
+export type GeoMapProps = z.infer<typeof GeoMapPropsSchema> & GeoMapClientProps;
+
+export const SerializableGeoMapSchema = GeoMapPropsSchema;
+
+export type SerializableGeoMap = z.infer<typeof SerializableGeoMapSchema>;
+
+const SerializableGeoMapSchemaContract = defineToolUiContract(
+  "GeoMap",
+  SerializableGeoMapSchema,
+);
+
+export const parseSerializableGeoMap: (input: unknown) => SerializableGeoMap =
+  SerializableGeoMapSchemaContract.parse;
+
+export const safeParseSerializableGeoMap: (
+  input: unknown,
+) => SerializableGeoMap | null = SerializableGeoMapSchemaContract.safeParse;
diff --git a/frontend/src/toolui/registry.tsx b/frontend/src/toolui/registry.tsx
index 34d620ae..06791380 100644
--- a/frontend/src/toolui/registry.tsx
+++ b/frontend/src/toolui/registry.tsx
@@ -11,6 +11,26 @@ export interface ToolUiEntry {
 /* Every entry lazy-loads both the component and its zod contract so the chat bundle only pays
    for components a transcript actually uses. Names mirror upstream tool-ui component slugs. */
 export const TOOL_UI_REGISTRY: Record<string, ToolUiEntry> = {
+  'audio': {
+    Component: lazy(() => import('./components/audio').then((m) => ({ default: m.Audio }))),
+    loadSchema: () => import('./components/audio/schema').then((m) => m.SerializableAudioSchema),
+  },
+  'chart': {
+    Component: lazy(() => import('./components/chart').then((m) => ({ default: m.Chart }))),
+    loadSchema: () => import('./components/chart/schema').then((m) => m.SerializableChartSchema),
+  },
+  'code-block': {
+    Component: lazy(() => import('./components/code-block').then((m) => ({ default: m.CodeBlock }))),
+    loadSchema: () => import('./components/code-block/schema').then((m) => m.SerializableCodeBlockSchema),
+  },
+  'code-diff': {
+    Component: lazy(() => import('./components/code-diff').then((m) => ({ default: m.CodeDiff }))),
+    loadSchema: () => import('./components/code-diff/schema').then((m) => m.SerializableCodeDiffSchema),
+  },
+  'geo-map': {
+    Component: lazy(() => import('./components/geo-map').then((m) => ({ default: m.GeoMap }))),
+    loadSchema: () => import('./components/geo-map/schema').then((m) => m.SerializableGeoMapSchema),
+  },
   'approval-card': {
     Component: lazy(() => import('./components/approval-card').then((m) => ({ default: m.ApprovalCard }))),
     loadSchema: () => import('./components/approval-card/schema').then((m) => m.SerializableApprovalCardSchema),
diff --git a/frontend/src/toolui/ui/chart.tsx b/frontend/src/toolui/ui/chart.tsx
new file mode 100644
index 00000000..07fd5b33
--- /dev/null
+++ b/frontend/src/toolui/ui/chart.tsx
@@ -0,0 +1,357 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@toolui/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className,
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

From f3012d184ae38773c206b144e59eb839ae45dbee Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 22:57:16 -0700
Subject: [PATCH 085/248] [eric] onboarding: entire-chat harvest + clustering
 profile + four-capability reveal

---
 backend/apps/onboarding/models.py             |   8 +
 backend/apps/onboarding/onboarding.py         |  26 ++--
 backend/apps/onboarding/prep.py               | 145 ++++++++++++++++--
 .../apps/onboarding/usage/chatgpt_usage.py    |  62 +++++++-
 backend/apps/onboarding/usage/claude_usage.py |  75 +++++++--
 backend/apps/settings/models.py               |   2 +
 electron/usageHarvest.js                      |  63 ++++++--
 .../src/app/components/Layout/AppShell.tsx    |  10 ++
 .../OnboardingV3/onboardingV3Api.ts           |   4 +
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |  21 +--
 .../app/components/nudges/PrepKeepToast.tsx   |   4 +-
 .../Dashboard/canvas/DashboardCanvas.tsx      |   5 +-
 .../Dashboard/canvas/DashboardOverlays.tsx    |   5 +-
 .../app/pages/Dashboard/cards/AgentCard.tsx   |   7 +-
 .../lifecycle/useOnboardingRevealSeed.ts      |  37 +++--
 .../app/pages/Workflows/app/RunMonitor.tsx    |  49 +++++-
 frontend/src/shared/providerUsage.ts          |  25 ++-
 .../src/shared/state/onboardingV3Slice.ts     |   2 +-
 frontend/src/shared/state/settingsSlice.ts    |   2 +
 19 files changed, 460 insertions(+), 92 deletions(-)

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 46bf0bbe..7336f1bc 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -54,6 +54,9 @@ class PrepRequest(BaseModel):
 class PrepResponse(BaseModel):
     model_config = ConfigDict(validate_assignment=True)
 
+    # A punchy <=10-word identity hook, read at a glance in the reveal's focal beat (the greeting is the
+    # longer warm read for the chat; the headline is the scannable one-liner most people actually read).
+    headline: str = ""
     greeting: str = ""
     starters: List[PersonalizedStarter] = Field(default_factory=list)
     app_title: str = ""
@@ -64,4 +67,9 @@ class PrepResponse(BaseModel):
     research_title: str = ""
     research_prompt: str = ""
     research_reason: str = ""
+    # The "watch it drive a real browser" card: an agent opens a public site and does a multi-step task
+    # live, so the reveal shows off browser control alongside app-building, research, and scheduling.
+    browser_title: str = ""
+    browser_prompt: str = ""
+    browser_reason: str = ""
     automations: List[PersonalizedAutomation] = Field(default_factory=list)
diff --git a/backend/apps/onboarding/onboarding.py b/backend/apps/onboarding/onboarding.py
index 866f47b3..93e79083 100644
--- a/backend/apps/onboarding/onboarding.py
+++ b/backend/apps/onboarding/onboarding.py
@@ -47,16 +47,20 @@ async def post_prep(body: PrepRequest) -> dict:
     from backend.apps.onboarding.usage.claude_usage import harvest_claude_usage
     from backend.apps.settings.store import load_settings
 
-    # The frontend read needs a logged-in provider CARD, which a fresh install lacks. Fill the gap from what we already have: ChatGPT via the codex connect token, Claude via the user's own browser session cookies. Each fails open to "", so a missing one just drops out.
-    if not body.usage_summary.strip():
-        parts: list[str] = []
-        chatgpt = await harvest_chatgpt_usage()
-        if chatgpt:
-            parts.append("ChatGPT usage:\n" + chatgpt)
-        claude = await harvest_claude_usage()
-        if claude:
-            parts.append("Claude usage:\n" + claude)
-        if parts:
-            body.usage_summary = "\n\n".join(parts)
+    # ALWAYS read the ENTIRE recent conversations (not just titles) from the rich providers, ChatGPT via
+    # the codex connect token, Claude via the user's own browser session cookies, and PREFER that over
+    # whatever the frontend read. The frontend reads only the single connected provider, which for a
+    # Gemini/antigravity user is a titles-only DOM scrape that can surface a stale topic (the "skincare
+    # app" the user hasn't touched in ages). Multiple providers connected? We take all the rich ones and
+    # let the clustering pass merge them into one profile. Each fails open to "", so a missing one drops.
+    parts: list[str] = []
+    chatgpt = await harvest_chatgpt_usage()
+    if chatgpt:
+        parts.append("ChatGPT conversations:\n" + chatgpt)
+    claude = await harvest_claude_usage()
+    if claude:
+        parts.append("Claude conversations:\n" + claude)
+    if parts:
+        body.usage_summary = "\n\n".join(parts)   # entire-chat content wins over the frontend's titles
 
     return (await build_prep(load_settings(), body)).model_dump()
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index 26973a78..0202a250 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -27,19 +27,33 @@ P_SYSTEM = (
     "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
-    '{"greeting": string, "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "research_title": string, "research_prompt": string, "research_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
+    '{"headline": string, "greeting": string, "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "research_title": string, "research_prompt": string, "research_reason": string, "browser_title": string, "browser_prompt": string, "browser_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
     "First, silently infer a short, confident profile of this user: who they are and what they are working on. "
-    "If usage_summary is present it is the STRONGEST signal (it is what they actually ask their AI about and facts "
-    "their AI remembers about them); weight it above everything else, then signal_apps (the high-signal tools they "
-    "have installed, like an IDE, a design app, or a DAW: these reveal their craft), then folders, plan tier, email "
-    "domain. Tune every task and the personal app to that profile; do not output the profile. "
+    "If usage_summary is present it is the STRONGEST signal (a distilled profile of who this person is and what "
+    "they actually work on, read from their real AI conversations); weight it above everything else. Do NOT let a "
+    "single installed app override it: signal_apps (an IDE, a design app, a DAW) is only a WEAK hint about their "
+    "craft (having Xcode installed does not make someone an iOS developer), used only to color what the profile "
+    "already says, then folders, plan tier, email domain. Tune every task and the personal app to that profile; "
+    "do not output the profile. "
     "THE BAR every single item must clear: it is either (a) SPECIFICALLY useful to THIS person's real work in a way "
     "they could not quickly get elsewhere (it uses their ACTUAL files, projects, or data to produce a real finished "
     "thing worth keeping), OR (b) a genuine 'oh, it can do THAT?' that makes them see a hundred uses (a surprising "
     "capability shown on their real stuff). A generic chore FAILS the bar and must be replaced: a file-cleanup report, "
     "a folder audit, a read-only summary or mirror dashboard of their data, a research overview they could google, an "
-    "empty log file, or any 'set up / organize / plan' task is BANNED. Depth over breadth: two things that hit the bar "
-    "beat four that do not. "
+    "empty log file, or any 'set up / organize / plan' task is BANNED. "
+    "SPAN THE WHOLE PERSON. First, silently list this person's DISTINCT life threads from the profile (for example: "
+    "their main work or product, their sport or fitness, their food or local life, their tech or tooling curiosity, "
+    "their games or hobbies, a recurring practical need). Then assign the four starters to FOUR DIFFERENT threads, "
+    "one each. HARD RULE: treat EVERYTHING about their company, product, startup, pitch, competitive landscape, "
+    "positioning, pricing, fundraising, growth, or the thing they are building as ONE single 'work' bucket. EXACTLY "
+    "ONE of the four starters may come from that work bucket, no more, count them before you answer. The other THREE "
+    "must each come from a clearly DIFFERENT NON-work thread you actually see in the profile (their sport or fitness, "
+    "their food or local life, their games or hobbies, a personal curiosity or practical need). Anything work-adjacent, "
+    "even a browser tool 'for the product' or research 'for the pitch', is WORK and does NOT count as a non-work "
+    "thread. Before you finalize, verify that THREE of the four starters have nothing to do with their work; if they "
+    "do, replace them. The app and the research should also lean to NON-work threads, not pile onto the work one. The "
+    "ONLY exception: if the profile genuinely shows they talk about almost nothing but that one thing, follow the real "
+    "data instead of forcing variety. Every item still clears the bar on its own. "
     "Exactly 4 starters. Each title is 2-5 words that PLAINLY say what the task does (like 'Frame my screenshots' or "
     "'Compare headphones'), never clever, punny, or brand-style. Each prompt is a concrete, safe, immediately runnable "
     "task referencing the user's real folders, files, or picked apps; never invent facts. The FIRST starter is the one "
@@ -57,13 +71,18 @@ P_SYSTEM = (
     "the 'oh, it can build me THAT?' moment. It must DO something: take their input and produce useful output, or "
     "automate a fiddly micro-task they repeat in their ACTUAL work (inferred from usage_summary + signal_apps). It is "
     "a real interactive tool they would reopen and USE, NOT a read-only dashboard, NOT a mirror of their data, NOT a "
-    "summary, NOT a feed. Examples of the SHAPE only (never copy, always tailor to THEM): for someone shipping iOS "
-    "apps, a tool that frames a raw screenshot into App Store device mockups, or previews an app icon at every iOS "
-    "size on a mock home screen; for a writer, a tool that rewrites a pasted paragraph across tones; for a data "
-    "person, a tool that pastes CSV and instantly charts it. app_title 2-4 words that plainly name what it DOES "
+    "summary, NOT a feed. Examples of the SHAPE only (never copy, always tailor to THEM, and never "
+    "default to an iOS, app, or coding tool just because it is a familiar example): for a writer, a tool that "
+    "rewrites a pasted paragraph across tones; for a data person, a tool that pastes a CSV and instantly charts it; "
+    "for a musician, a tool that transposes a chord progression; for a language learner, a drill built from words "
+    "they paste. Match the shape to THIS person's actual craft from the profile. app_title 2-4 words that plainly name what it DOES "
     "(like 'Icon Previewer' or 'Screenshot Framer'), never punny. app_prompt starts with 'Build me' and specifies the "
-    "tool's INPUT, what it PRODUCES, and the interaction; fully client-side and self-contained (works with no "
-    "accounts, no API keys, no backend, all in the browser). app_reason follows the same one-clause grounded-"
+    "tool's INPUT, what it PRODUCES, and the interaction; fully client-side and self-contained. It MUST run "
+    "on the user's input with DETERMINISTIC logic only (math, parsing, formatting, layout, charts, filtering, "
+    "transforms). It must NEVER call an AI model, an LLM, a chat completion, or any network/remote API, those "
+    "only work inside a published app and will fail in the reveal with 'make sure you're on a published app'. "
+    "If the idea would need AI generation to work, pick a DIFFERENT tool that doesn't (no accounts, no API keys, "
+    "no backend, no fetch, everything computed in the browser). app_reason follows the same one-clause grounded-"
     "observation rule as a starter reason and says why THIS tool fits their real work. "
     "Also pick the SINGLE topic this user most repeatedly asks their AI about (from usage_summary; if it is thin, use "
     "their strongest work signal from signal_apps or folders) and turn it into a live web-research task. research_title "
@@ -72,6 +91,23 @@ P_SYSTEM = (
     "current answer or comparison of THAT topic for this user (an actual answer, never a plan); it must demand "
     "THIS-YEAR information with publication dates on sources, so the answer cannot quietly be stale training data. "
     "research_reason follows the one-clause grounded-observation rule and names the specific recurring question you saw. "
+    "Also design ONE browser task that shows the agent DRIVING a real website live (so the user watches it control a "
+    "browser, not just fetch text). browser_title is 2-4 words plainly naming it (like 'Nearby Michelin' or 'Jump "
+    "Threads'). browser_prompt tells the agent to OPEN a specific real, PUBLIC website by name and do a genuinely "
+    "MULTI-STEP task there: navigate, search, click through, read across a few pages, compare, then report what it "
+    "found. It must be safe read-only browsing on public pages only, NEVER log in, buy, post, submit, or act on the "
+    "user's behalf. Pick a topic from a DIFFERENT thread than the app and the research, ideally a fun or personal "
+    "interest (food, sport, travel, a hobby), not their work. browser_reason follows the one-clause grounded rule. "
+    "THE FOUR THINGS THAT ACTUALLY RUN are the app, the research, the browser task, and the first automation. This "
+    "rule OVERRIDES every 'pick their craft / their top topic' hint above: assign each of these four to a DIFFERENT "
+    "thread of this person's life, and AT MOST ONE of the four may touch their work/company/product/pitch/competitors, "
+    "count them before you answer. FIXED ASSIGNMENT: the APP must be built for a NON-work thread (a hobby, sport, "
+    "food, or personal need), it is a delightful surprise precisely because it is NOT about their job (a jump-log "
+    "tool, a restaurant picker, a practice-drill tool, never a pitch/competitor/metrics dashboard). The BROWSER task "
+    "must also take a clearly personal or fun NON-work thread. Only the RESEARCH may be about their work, and only if "
+    "that is genuinely their burning question; if you use work for the research, then the first automation must be "
+    "NON-work too, so no more than ONE of the four is ever about work. Make all four GENUINELY MULTI-STEP (several "
+    "real actions, never a one-liner). "
     "Also propose 1-2 automations: recurring routines that genuinely help THIS user and clear the bar (NEVER a folder "
     "cleanup, NEVER an empty log, NEVER 'keep a dashboard updated'). A good one delivers something the user actually "
     "wants on a cadence, e.g. a daily digest of what is new in their SPECIFIC niche (named from usage_summary and "
@@ -82,10 +118,19 @@ P_SYSTEM = (
     "schedules or reminders (the schedule already exists), and write the result to a concrete file (like "
     "Documents/<name>_<date>.md). 'Search X and write the result to Y' is right; 'remind me' or 'set up a log' is wrong. "
     "Safe to run unattended (never delete without review). "
-    "The greeting is one or two warm sentences: first say out loud, specifically and confidently, what this person is "
-    "into or working on (grounded in usage_summary, signal_apps, and folders, for example 'Looks like you live in "
-    "Xcode and ship iOS apps'), then name 2-3 concrete things you actually saw. Be specific, never generic, and never "
-    "name boring system apps. Never use em-dashes or en-dashes anywhere. No markdown, no commentary, JSON only."
+    "The HEADLINE is the single most important line: a punchy, specific, SCANNABLE identity hook of AT MOST 10 "
+    "words that this person reads in one second and thinks 'yes, that's me'. Name their actual work and their one "
+    "defining trait, no filler, no full sentence, no period. It is read at a glance in big type, so it must NOT be "
+    "a paragraph. Example shapes only (never copy, tailor to THEM): 'OpenSwarm founder who measures everything, "
+    "vertical jump to agent latency' or 'Ships iOS apps, obsessed with the last 5% of polish'. Sharp, not wordy. "
+    "The greeting is one or two warm, punchy sentences that make this person feel INSTANTLY understood, the "
+    "'wait, it actually gets me' hook. Lead with the single most specific true thing about them from the profile "
+    "(their actual project BY NAME, their real craft, the obsession they keep returning to), then add ONE more "
+    "concrete detail that proves you get them. Ground it in the profile above all; nod to a folder or tool only if "
+    "it sharpens the picture, never lead with a generic installed app, and never name boring system apps. It should "
+    "read like a sharp friend who knows exactly what you're about, not a system reciting what it scanned. Do not be "
+    "creepy: name their work and interests, not private personal numbers. Never use em-dashes or en-dashes anywhere. "
+    "No markdown, no commentary, JSON only."
 )
 
 
@@ -183,6 +228,7 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
     data = p_load_object(text)
     starters = p_build_starters(data.get("starters") if isinstance(data.get("starters"), list) else [])
     automations = p_build_automations(data.get("automations") if isinstance(data.get("automations"), list) else [])
+    headline = str(data.get("headline", "")).strip()
     greeting = str(data.get("greeting", "")).strip()
     app_title = str(data.get("app_title", "")).strip()
     app_prompt = str(data.get("app_prompt", "")).strip()
@@ -190,6 +236,9 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
     research_title = str(data.get("research_title", "")).strip()
     research_prompt = str(data.get("research_prompt", "")).strip()
     research_reason = str(data.get("research_reason", "")).strip()
+    browser_title = str(data.get("browser_title", "")).strip()
+    browser_prompt = str(data.get("browser_prompt", "")).strip()
+    browser_reason = str(data.get("browser_reason", "")).strip()
 
     # Truncation / trailing comma / smart quotes broke the strict load: salvage the complete pieces
     # rather than throwing the whole personalized reveal away for one bad character.
@@ -201,6 +250,8 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
             automations = p_build_automations([o for o in objs if "cadence" in o])
     # Top-level string fields don't live in the flat objects above, so recover them by name when the
     # strict load dropped them (a malformed response was still yielding starters but a blank app).
+    if not headline:
+        headline = p_extract_string_field(text, "headline")
     if not greeting:
         greeting = p_extract_string_field(text, "greeting")
     if not app_title:
@@ -215,10 +266,17 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
         research_prompt = p_extract_string_field(text, "research_prompt")
     if not research_reason:
         research_reason = p_extract_string_field(text, "research_reason")
+    if not browser_title:
+        browser_title = p_extract_string_field(text, "browser_title")
+    if not browser_prompt:
+        browser_prompt = p_extract_string_field(text, "browser_prompt")
+    if not browser_reason:
+        browser_reason = p_extract_string_field(text, "browser_reason")
 
     if not starters:
         return None
     return PrepResponse(
+        headline=p_strip_dashes(headline),
         greeting=p_strip_dashes(greeting),
         starters=starters[:4],
         app_title=p_strip_dashes(app_title),
@@ -227,6 +285,9 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
         research_title=p_strip_dashes(research_title),
         research_prompt=p_strip_dashes(research_prompt),
         research_reason=p_strip_dashes(research_reason),
+        browser_title=p_strip_dashes(browser_title),
+        browser_prompt=p_strip_dashes(browser_prompt),
+        browser_reason=p_strip_dashes(browser_reason),
         automations=automations[:3],
     )
 
@@ -276,6 +337,48 @@ def p_scan_grounded_fallback(request: PrepRequest) -> PrepResponse:
     )
 
 
+# The clustering pass: one cheap read that turns the raw chat dump into a tight character read, so the
+# reveal reasons over "who is this person" instead of skimming fragments and latching onto a stray word.
+P_PROFILE_SYSTEM = (
+    "You are reading a person's OWN recent AI chat conversations (their messages and the AI's replies, "
+    "most recent first). Write a SHORT, confident, specific profile of who this person actually is and "
+    "what they genuinely work on and care about, grounded ONLY in what you see. 3 to 5 sentences, plain "
+    "prose, no lists, no hedging, no preamble, no 'based on'. Name concrete specifics: the projects they "
+    "are building, the tools and languages they use, the topics they return to again and again, their "
+    "interests and side-obsessions, how they think. Separate a real recurring throughline from a one-off "
+    "tangent, weight what they keep coming back to. If one thing is clearly their main focus right now, "
+    "say so plainly; if their attention is split across a few real threads, name them. Never invent "
+    "anything not present. No markdown. Never use em-dashes or en-dashes."
+)
+
+# Below this the usage text is just titles/memories (thin); above it there is real conversation content
+# worth a distill pass. Keep the distill input bounded so the cheap call stays a couple cents.
+P_PROFILE_DISTILL_THRESHOLD = 1500
+P_PROFILE_INPUT_CAP = 140000
+
+
+@typechecked
+async def p_distill_profile(settings: AppSettings, usage_text: str) -> str:
+    """One cheap aux call: raw chat content -> a tight 'who is this person' profile. "" on any failure,
+    so build_prep just falls back to feeding the raw usage text (today's behavior)."""
+    try:
+        from backend.apps.agents.providers.registry import resolve_aux_model
+        from backend.apps.settings.credentials import get_anthropic_client_for_model
+
+        aux_model, _ = await resolve_aux_model(settings, preferred_tier="haiku")
+        client = get_anthropic_client_for_model(settings, aux_model)
+        resp = await client.messages.create(
+            model=aux_model,
+            max_tokens=aux_max_tokens_for(aux_model, base=600),
+            system=P_PROFILE_SYSTEM,
+            messages=[{"role": "user", "content": usage_text[:P_PROFILE_INPUT_CAP]}],
+            timeout=45.0,
+        )
+        return p_strip_dashes(safe_resp_text(resp).strip())
+    except Exception:
+        return ""
+
+
 @typechecked
 async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepResponse:
     from datetime import date
@@ -284,6 +387,14 @@ async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepRespons
     # The aux otherwise assumes its training-cutoff year and writes stale ranges like "2024-2025"
     # into research prompts; telling it today's date keeps "current" meaning current.
     facts["today"] = date.today().isoformat()
+    # If the usage text carries real conversation content, distill it to a tight profile FIRST so the
+    # reveal call reasons over who this person is, not raw logs (and stays in budget). Fail-open: a blank
+    # profile just leaves the raw text in place, which is today's behavior.
+    usage = str(facts.get("usage_summary", ""))
+    if len(usage) > P_PROFILE_DISTILL_THRESHOLD:
+        profile = await p_distill_profile(settings, usage)
+        if profile:
+            facts["usage_summary"] = profile
     try:
         from backend.apps.agents.providers.registry import resolve_aux_model
         from backend.apps.settings.credentials import get_anthropic_client_for_model
diff --git a/backend/apps/onboarding/usage/chatgpt_usage.py b/backend/apps/onboarding/usage/chatgpt_usage.py
index 95fdd4e7..965444e5 100644
--- a/backend/apps/onboarding/usage/chatgpt_usage.py
+++ b/backend/apps/onboarding/usage/chatgpt_usage.py
@@ -8,6 +8,7 @@ machine. Read-only, capped, and fails open to "" on anything (expired token,
 Cloudflare, shape drift) so prep just falls back to the local scan.
 """
 
+import asyncio
 from typing import List, Optional, Tuple
 
 import httpx
@@ -22,6 +23,11 @@ CAP_PAGES = 40
 # Prep only reads ~150 titles; this endpoint is ~4s/page, so fetching 1000 cost 38s of onboarding
 # runway for nothing. Cap the title pull; the real conversation total comes from the API's own count.
 CAP_TITLES = 200
+# Depth: full text of the most recent CONVO_N chats. Per-convo cap stops one marathon dominating; the
+# total cap bounds the block (a clustering pass distills it downstream, so it can be generous).
+CONVO_N = 10
+CONVO_CHARS = 30000
+TOTAL_CONVO_CHARS = 130000
 UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36"
 
 
@@ -37,15 +43,56 @@ def p_codex_creds() -> Optional[Tuple[str, Optional[str]]]:
 
 
 @typechecked
-def summarize_chatgpt_usage(total: int, memories: List[str], titles: List[str], capped: bool = False) -> str:
+def summarize_chatgpt_usage(total: int, memories: List[str], titles: List[str], convos: List[str], capped: bool = False) -> str:
     parts: List[str] = []
     if total > 0:
         parts.append(f"They have {total}{'+' if capped else ''} past AI conversations.")
     if memories:
         parts.append("Facts their AI remembers about them: " + "; ".join(memories))
     if titles:
-        parts.append("Topics they keep coming back to (recent first): " + "; ".join(titles[:150]))
-    return "\n".join(parts)[:4000]
+        parts.append("Recent conversation titles (breadth): " + "; ".join(titles[:150]))
+    if convos:
+        block: List[str] = []
+        used = 0
+        for cv in convos:
+            if used + len(cv) > TOTAL_CONVO_CHARS:
+                break
+            block.append(cv)
+            used += len(cv)
+        if block:
+            parts.append("Full text of their most recent conversations (their real asks + the exchange):\n\n" + "\n\n---\n\n".join(block))
+    return "\n".join(parts)
+
+
+@typechecked
+async def p_fetch_chatgpt_convo(client: httpx.AsyncClient, cid: str) -> str:
+    """One conversation's full text, both sides, ordered, capped. "" on any failure (convo skipped)."""
+    try:
+        r = await client.get(f"{BASE}/conversation/{cid}")
+        if r.status_code != 200:
+            return ""
+        data = r.json()
+        mapping = data.get("mapping") if isinstance(data, dict) else None
+        if not isinstance(mapping, dict):
+            return ""
+        rows: List[Tuple[float, str]] = []
+        for node in mapping.values():
+            m = node.get("message") if isinstance(node, dict) else None
+            if not isinstance(m, dict):
+                continue
+            role = (m.get("author") or {}).get("role")
+            if role not in ("user", "assistant"):
+                continue
+            content = m.get("content") or {}
+            if content.get("content_type") != "text":
+                continue
+            text = " ".join(str(p) for p in (content.get("parts") or []) if p).strip()
+            if len(text) > 5:
+                rows.append((float(m.get("create_time") or 0), ("You: " if role == "user" else "AI: ") + text))
+        rows.sort(key=lambda x: x[0])
+        return "\n".join(t for _, t in rows)[:CONVO_CHARS]
+    except Exception:
+        return ""
 
 
 @typechecked
@@ -64,10 +111,12 @@ async def harvest_chatgpt_usage() -> str:
     if acct:
         headers["chatgpt-account-id"] = acct
     titles: List[str] = []
+    conv_ids: List[str] = []
     seen: set = set()
     memories: List[str] = []
+    convos: List[str] = []
     try:
-        async with httpx.AsyncClient(timeout=15.0, headers=headers) as client:
+        async with httpx.AsyncClient(timeout=20.0, headers=headers) as client:
             offset = 0
             for _ in range(CAP_PAGES):
                 if len(titles) >= CAP_TITLES:
@@ -83,6 +132,7 @@ async def harvest_chatgpt_usage() -> str:
                     cid = it.get("id")
                     if cid and cid not in seen:
                         seen.add(cid)
+                        conv_ids.append(str(cid))
                         title = it.get("title")
                         if title:
                             titles.append(str(title))
@@ -96,6 +146,8 @@ async def harvest_chatgpt_usage() -> str:
                     memories = [str(m.get("content")) for m in (mr.json() or {}).get("memories", []) if m.get("content")][:40]
             except Exception:
                 pass
+            # Depth pass: full text of the most recent few, fetched in parallel.
+            convos = [c for c in await asyncio.gather(*(p_fetch_chatgpt_convo(client, cid) for cid in conv_ids[:CONVO_N])) if c]
     except Exception:
         return ""
-    return summarize_chatgpt_usage(len(seen), memories, titles, capped=len(titles) >= CAP_TITLES)
+    return summarize_chatgpt_usage(len(seen), memories, titles, convos, capped=len(titles) >= CAP_TITLES)
diff --git a/backend/apps/onboarding/usage/claude_usage.py b/backend/apps/onboarding/usage/claude_usage.py
index 634011d1..8f2376cb 100644
--- a/backend/apps/onboarding/usage/claude_usage.py
+++ b/backend/apps/onboarding/usage/claude_usage.py
@@ -1,10 +1,12 @@
-"""Read the user's real Claude conversation topics from claude.ai using their own
-logged-in browser cookies (see browser_cookies), no in-app login. Claude's website
-session is the only way in (its API token is a different realm), and a plain request
-carries it fine (unlike ChatGPT, claude.ai does not fingerprint-block). Capped,
-read-only, fails open to "" on anything so prep falls back to the local scan.
+"""Read the user's real Claude history from claude.ai using their own logged-in browser
+cookies (see browser_cookies), no in-app login. Claude's website session is the only way
+in (its API token is a different realm), and a plain request carries it fine (unlike
+ChatGPT, claude.ai does not fingerprint-block). We pull the recent conversation titles for
+breadth AND the FULL text of the most recent few for depth: their actual asks + the exchange
+are far stronger signal than a vague title. Capped, read-only, fails open to "" on anything.
 """
 
+import asyncio
 from typing import List
 
 import httpx
@@ -17,16 +19,64 @@ UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML,
 PAGE = 100
 CAP_PAGES = 40
 CAP_TITLES = 1000
+# Depth: full text of the most recent CONVO_N chats. A per-convo cap keeps one marathon from
+# dominating; the total cap bounds the whole block (a clustering pass distills it downstream, so
+# this can be generous). ~130K chars is ~32K tokens, a couple cents for the cheap aux model.
+CONVO_N = 10
+CONVO_CHARS = 30000
+TOTAL_CONVO_CHARS = 130000
 
 
 @typechecked
-def summarize_claude_usage(total: int, titles: List[str]) -> str:
+def summarize_claude_usage(total: int, titles: List[str], convos: List[str]) -> str:
     parts: List[str] = []
     if total > 0:
         parts.append(f"They have {total} past Claude conversations.")
     if titles:
-        parts.append("Topics they keep coming back to (recent first): " + "; ".join(titles[:150]))
-    return "\n".join(parts)[:4000]
+        parts.append("Recent conversation titles (breadth): " + "; ".join(titles[:150]))
+    if convos:
+        block: List[str] = []
+        used = 0
+        for cv in convos:
+            if used + len(cv) > TOTAL_CONVO_CHARS:
+                break
+            block.append(cv)
+            used += len(cv)
+        if block:
+            parts.append("Full text of their most recent conversations (their real asks + the exchange):\n\n" + "\n\n---\n\n".join(block))
+    return "\n".join(parts)
+
+
+@typechecked
+async def p_fetch_claude_convo(client: httpx.AsyncClient, org: str, cid: str) -> str:
+    """One conversation's full text, both sides, capped. "" on any failure so a bad convo is skipped."""
+    try:
+        r = await client.get(
+            f"{BASE}/api/organizations/{org}/chat_conversations/{cid}",
+            params={"tree": "True", "rendering_mode": "raw"},
+        )
+        if r.status_code != 200:
+            return ""
+        data = r.json()
+        msgs = data.get("chat_messages") if isinstance(data, dict) else None
+        if not isinstance(msgs, list):
+            return ""
+        lines: List[str] = []
+        for m in msgs:
+            if not isinstance(m, dict):
+                continue
+            sender = m.get("sender")
+            if sender not in ("human", "assistant"):
+                continue
+            text = m.get("text") or ""
+            if not text and isinstance(m.get("content"), list):
+                text = " ".join(str(x.get("text", "")) for x in m["content"] if isinstance(x, dict) and x.get("text"))
+            text = str(text).strip()
+            if len(text) > 5:
+                lines.append(("You: " if sender == "human" else "AI: ") + text)
+        return "\n".join(lines)[:CONVO_CHARS]
+    except Exception:
+        return ""
 
 
 @typechecked
@@ -36,9 +86,10 @@ async def harvest_claude_usage() -> str:
         return ""
     headers = {"Cookie": cookie_header(jar), "User-Agent": UA, "Accept": "application/json"}
     titles: List[str] = []
+    conv_ids: List[str] = []
     seen: set = set()
     try:
-        async with httpx.AsyncClient(timeout=15.0, headers=headers) as client:
+        async with httpx.AsyncClient(timeout=20.0, headers=headers) as client:
             org_res = await client.get(f"{BASE}/api/organizations")
             if org_res.status_code != 200:
                 return ""
@@ -64,6 +115,7 @@ async def harvest_claude_usage() -> str:
                     cid = it.get("uuid")
                     if cid and cid not in seen:
                         seen.add(cid)
+                        conv_ids.append(str(cid))
                         name = it.get("name")
                         if name:
                             titles.append(str(name))
@@ -71,6 +123,9 @@ async def harvest_claude_usage() -> str:
                 if fresh == 0 or len(items) < PAGE:
                     break
                 offset += PAGE
+            # Depth pass: full text of the most recent few, fetched in parallel.
+            top = conv_ids[:CONVO_N]
+            convos = [c for c in await asyncio.gather(*(p_fetch_claude_convo(client, org, cid) for cid in top)) if c]
     except Exception:
         return ""
-    return summarize_claude_usage(len(seen), titles)
+    return summarize_claude_usage(len(seen), titles, convos)
diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index 191ac6cf..f00c1ce4 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -68,6 +68,8 @@ class AppSettings(BaseModel):
     # Multi-stop gradient from the theme pad (2-3 hexes); washes the canvas.
     accent_gradient: Optional[list[str]] = None
     personalized_greeting: Optional[str] = None
+    # Short one-glance identity hook for the reveal's focal beat (greeting is the longer warm read).
+    personalized_headline: Optional[str] = None
     personalized_starters: list["PersonalizedStarter"] = Field(default_factory=list)
     personalized_automations: list["PersonalizedAutomation"] = Field(default_factory=list)
     # Distilled from the user's provider chat history the first time they open ChatGPT/Claude in-app; re-feeds prep to sharpen suggestions.
diff --git a/electron/usageHarvest.js b/electron/usageHarvest.js
index fd3320ba..dff1a150 100644
--- a/electron/usageHarvest.js
+++ b/electron/usageHarvest.js
@@ -30,15 +30,16 @@ function configure(opts) {
 }
 
 // Runs in the page context. Sweeps recent conversation titles (paginated + deduped)
-// plus ChatGPT Memory. Bounded on EVERY dimension so no provider's endpoint speed can
-// wedge the read: a wall-clock BUDGET_MS (ChatGPT's /conversations is ~4s/page, so an
-// unbounded loop over a many-chat account would run minutes and outlive the offscreen
-// window, losing everything), a per-fetch abort, and hard page/title caps. The most
-// recent titles are the strongest personalization signal, so a partial is a good result.
+// plus ChatGPT Memory, THEN pulls the FULL text of the CONVO_N most recent conversations
+// (the user's real asks + the exchange, far higher signal than a vague title). Bounded on
+// EVERY dimension so no provider's endpoint speed can wedge the read: a wall-clock BUDGET_MS,
+// a per-fetch abort, hard page/title caps, and a per-conversation char cap so one marathon
+// chat can't dominate. A partial read is a good result; the recent stuff is the strongest signal.
 const PREAMBLE = `
-  // Prep reads only ~150 titles, so pulling 1000 just burned onboarding runway (up to the 14s budget)
-  // for signal we throw away. Cap the pull; the count becomes an honest "N+" floor when we stop early.
-  const BUDGET_MS=14000, PAGE=100, CAP_PAGES=60, CAP_TITLES=200, GAP_MS=120, FETCH_MS=6000;
+  // Prep reads only ~150 titles, so pulling 1000 just burned onboarding runway for signal we throw
+  // away. Cap the pull; the count becomes an honest "N+" floor when we stop early. CONVO_N full convos
+  // (capped per convo) are the real payload; the budget is raised to fit their detail fetches.
+  const BUDGET_MS=20000, PAGE=100, CAP_PAGES=60, CAP_TITLES=200, GAP_MS=120, FETCH_MS=6000, CONVO_N=10, CONVO_CHARS=8000;
   const startedAt = Date.now();
   const haveTime = () => Date.now() - startedAt < BUDGET_MS;
   const jget = async (url, extra) => {
@@ -50,49 +51,77 @@ const SCRIPT = {
   codex: `(async () => {${PREAMBLE}
     try {
       const sess = await jget('/api/auth/session');
-      if (!sess || !sess.accessToken) return {ok:false, total:0, titles:[], memories:[]};
+      if (!sess || !sess.accessToken) return {ok:false, total:0, titles:[], memories:[], convos:[]};
       const H = {headers:{Authorization:'Bearer '+sess.accessToken, accept:'application/json'}};
-      const seen = new Set(); const titles = [];
+      const seen = new Set(); const titles = []; const convList = [];
       let offset = 0, page = 0;
       while (page < CAP_PAGES && titles.length < CAP_TITLES && haveTime()) {
         const j = await jget('/backend-api/conversations?offset='+offset+'&limit='+PAGE+'&order=updated', H);
         const items = (j && j.items) || [];
         if (!items.length) break;
         let fresh = 0;
-        for (const c of items) { if (c && c.id && !seen.has(c.id)) { seen.add(c.id); if (c.title) titles.push(c.title); fresh++; } }
+        for (const c of items) { if (c && c.id && !seen.has(c.id)) { seen.add(c.id); if (c.title) titles.push(c.title); convList.push({id:c.id, title:c.title||''}); fresh++; } }
         if (fresh === 0 || items.length < PAGE) break;
         offset += PAGE; page++;
         await new Promise(r=>setTimeout(r, GAP_MS));
       }
       const mem = await jget('/backend-api/memories?include_memory_entries=true', H);
+      // The payload: FULL text of the most recent convos, fetched in parallel (bounded by the budget).
+      const top = convList.slice(0, CONVO_N);
+      const details = await Promise.all(top.map(cv => haveTime() ? jget('/backend-api/conversation/'+cv.id, H) : Promise.resolve(null)));
+      const convos = [];
+      for (let i=0;i<top.length;i++) {
+        const d = details[i]; if (!d || !d.mapping) continue;
+        const msgs = Object.keys(d.mapping).map(k=>d.mapping[k] && d.mapping[k].message)
+          .filter(m=>m && m.author && (m.author.role==='user'||m.author.role==='assistant') && m.content && m.content.content_type==='text' && m.content.parts && m.content.parts.length)
+          .sort((a,b)=>(a.create_time||0)-(b.create_time||0))
+          .map(m=>(m.author.role==='user'?'You: ':'AI: ')+String(m.content.parts.join(' ')).trim())
+          .filter(s=>s.length>5);
+        let text = msgs.join('\\n'); if (text.length > CONVO_CHARS) text = text.slice(0, CONVO_CHARS)+' …';
+        if (text) convos.push({title: top[i].title, text});
+      }
       return {
         ok: true,
         total: seen.size,
         capped: seen.size >= CAP_TITLES,
         titles: titles.slice(0, CAP_TITLES),
         memories: ((mem && mem.memories) || []).map(m=>m.content).filter(Boolean).slice(0, 40),
+        convos,
       };
-    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
+    } catch (e) { return {ok:false, total:0, titles:[], memories:[], convos:[]}; }
   })()`,
   claude: `(async () => {${PREAMBLE}
     try {
       const orgs = await jget('/api/organizations', {headers:{accept:'application/json'}});
-      if (!Array.isArray(orgs) || !orgs.length) return {ok:false, total:0, titles:[], memories:[]};
+      if (!Array.isArray(orgs) || !orgs.length) return {ok:false, total:0, titles:[], memories:[], convos:[]};
       const org = orgs[0].uuid;
-      const seen = new Set(); const titles = [];
+      const seen = new Set(); const titles = []; const convList = [];
       let offset = 0, page = 0;
       while (page < CAP_PAGES && titles.length < CAP_TITLES && haveTime()) {
         const convs = await jget('/api/organizations/'+org+'/chat_conversations?limit='+PAGE+'&offset='+offset, {headers:{accept:'application/json'}});
         const items = Array.isArray(convs) ? convs : [];
         if (!items.length) break;
         let fresh = 0;
-        for (const c of items) { const id = c && c.uuid; if (id && !seen.has(id)) { seen.add(id); if (c.name) titles.push(c.name); fresh++; } }
+        for (const c of items) { const id = c && c.uuid; if (id && !seen.has(id)) { seen.add(id); if (c.name) titles.push(c.name); convList.push({id:id, title:c.name||''}); fresh++; } }
         if (fresh === 0 || items.length < PAGE) break;
         offset += PAGE; page++;
         await new Promise(r=>setTimeout(r, GAP_MS));
       }
-      return {ok:true, total:seen.size, capped:seen.size >= CAP_TITLES, titles:titles.slice(0, CAP_TITLES), memories:[]};
-    } catch (e) { return {ok:false, total:0, titles:[], memories:[]}; }
+      // The payload: FULL text of the most recent convos (both sides), fetched in parallel + capped.
+      const top = convList.slice(0, CONVO_N);
+      const details = await Promise.all(top.map(cv => haveTime() ? jget('/api/organizations/'+org+'/chat_conversations/'+cv.id+'?tree=True&rendering_mode=raw', {headers:{accept:'application/json'}}) : Promise.resolve(null)));
+      const convos = [];
+      for (let i=0;i<top.length;i++) {
+        const d = details[i]; if (!d) continue;
+        const cms = (d && d.chat_messages) || (Array.isArray(d) ? d : []);
+        const msgs = cms.filter(m=>m && (m.sender==='human'||m.sender==='assistant'))
+          .map(m=>{ let t = m.text || ''; if(!t && Array.isArray(m.content)) t = m.content.map(x=>x&&x.text).filter(Boolean).join(' '); return (m.sender==='human'?'You: ':'AI: ')+String(t).trim(); })
+          .filter(s=>s.length>5);
+        let text = msgs.join('\\n'); if (text.length > CONVO_CHARS) text = text.slice(0, CONVO_CHARS)+' …';
+        if (text) convos.push({title: top[i].title, text});
+      }
+      return {ok:true, total:seen.size, capped:seen.size >= CAP_TITLES, titles:titles.slice(0, CAP_TITLES), memories:[], convos};
+    } catch (e) { return {ok:false, total:0, titles:[], memories:[], convos:[]}; }
   })()`,
   // Gemini has no clean history JSON (it's the obfuscated batchexecute RPC), so we scrape the
   // rendered rail. Robust by design, one bounded loop that: gates on real TEXT (empty conversation
diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 8d411f62..4f76bd61 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -445,6 +445,16 @@ const AppShell: React.FC = () => {
   const sidebarAway = (sidebarCollapsed || fsActive) && isDashboardViewActive;
   const [sidePeek, setSidePeek] = useState(false);
   useEffect(() => { if (!sidebarAway) setSidePeek(false); }, [sidebarAway]);
+  // When the sidebar docks away, the canvas runs flush to the window's left edge, so the floating
+  // dashboard header would sit right under the macOS traffic lights. Publish an inset the header reads
+  // (only on macOS, where the lights exist) so it clears them; the sidebar carries its own clearance.
+  useEffect(() => {
+    const isMac = typeof navigator !== 'undefined' && /Mac/i.test(navigator.platform);
+    const root = document.documentElement;
+    if (sidebarAway && isMac) root.style.setProperty('--osw-header-inset', '80px');
+    else root.style.removeProperty('--osw-header-inset');
+    return () => { root.style.removeProperty('--osw-header-inset'); };
+  }, [sidebarAway]);
   // Close-on-leave with a grace delay (cancelled on re-enter): a bare mouseLeave closed the peek the
   // instant the cursor dipped past the panel edge while reaching for an item, so clicks never landed.
   const peekCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 2cf9145d..dd4fbbc7 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -24,6 +24,7 @@ export interface ScanResult {
 }
 
 export interface PrepResponse {
+  headline: string;
   greeting: string;
   starters: PersonalizedStarter[];
   app_title: string;
@@ -32,6 +33,9 @@ export interface PrepResponse {
   research_title: string;
   research_prompt: string;
   research_reason: string;
+  browser_title: string;
+  browser_prompt: string;
+  browser_reason: string;
   automations: PersonalizedAutomation[];
 }
 
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 47a3119b..06c9e3c0 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -92,15 +92,16 @@ export function useOnboardingV3Pipeline() {
   }, []);
 
   // Fire one real background agent; the session exists in redux without a card until the reveal composes the canvas.
-  const launchJob = useCallback((title: string, prompt: string, kind: 'audit' | 'app' | 'research', reason: string) => {
+  const launchJob = useCallback((title: string, prompt: string, kind: 'app' | 'research' | 'browser', reason: string) => {
     const { model: liveModel } = launchCtxRef.current;
     const dashboardId = getLastDashboardId() ?? undefined;
-    // The audit reads the user's REAL files unattended, so it runs read-only (Edit/Bash blocked); the
-    // app build writes into its own fresh workspace, so it keeps full tools.
-    const config: AgentConfig = { name: title, model: liveModel, mode: 'agent', dashboard_id: dashboardId, read_only: kind === 'audit' };
+    // All three run with full tools: the app build writes its own workspace, research + the browser task
+    // save their findings. The browser task is kept safe by its PROMPT (public pages, never log in/buy).
+    const config: AgentConfig = { name: title, model: liveModel, mode: 'agent', dashboard_id: dashboardId };
     const draftId = dispatch(createDraftSession({ mode: 'agent', model: liveModel, dashboardId: dashboardId ?? '', setActive: false })).payload.draftId;
-    // expand: false keeps the reveal's left stack as compact cards instead of overlapping transcripts.
-    void dispatch(launchAndSendFirstMessage({ draftId, config, prompt, mode: 'agent', model: liveModel, expand: false }))
+    // Reveal cards open ENLARGED so the user sees the real work (not tiny collapsed stubs), and the
+    // yellow minimize button then has something to collapse. The seeder stacks them at expanded height.
+    void dispatch(launchAndSendFirstMessage({ draftId, config, prompt, mode: 'agent', model: liveModel, expand: true }))
       .then((action) => {
         if (launchAndSendFirstMessage.fulfilled.match(action)) {
           dispatch(addPreppedJob({ sessionId: action.payload.session.id, title, kind, reason }));
@@ -141,11 +142,12 @@ export function useOnboardingV3Pipeline() {
       prepReadyRef.current = prep;
       if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
       launchedRef.current = true;
-      if (prep.starters.length > 0) launchJob(prep.starters[0].title, prep.starters[0].prompt, 'audit', prep.starters[0].reason ?? '');
+      // The four auto-run showcase jobs, one per capability: build an app, dig the web, drive a real
+      // browser, and set up a scheduled task. The lame file-audit is gone; the browser task shows the
+      // agent controlling a real site live.
       if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app', prep.app_reason ?? '');
-      // The "looked into this for you" card: a real live web-research task on the one thing this user
-      // keeps asking about, so the reveal shows OpenSwarm going and finding it, not just planning.
       if (prep.research_title && prep.research_prompt) launchJob(prep.research_title, prep.research_prompt, 'research', prep.research_reason ?? '');
+      if (prep.browser_title && prep.browser_prompt) launchJob(prep.browser_title, prep.browser_prompt, 'browser', prep.browser_reason ?? '');
       // The scheduled task is a first-class part of the reveal (the "it automates for me" capability), so
       // guarantee one: use the model's automation when it emitted one (it sometimes drops the last JSON
       // field), else fall back to a safe, universally-useful weekly Downloads sweep.
@@ -178,6 +180,7 @@ export function useOnboardingV3Pipeline() {
       if (!prep) return;
       dispatch(updateSettingsPatch({
         personalized_greeting: prep.greeting?.trim() || null,
+        personalized_headline: prep.headline?.trim() || null,
         personalized_starters: prep.starters ?? [],
         personalized_automations: prep.automations ?? [],
       }));
diff --git a/frontend/src/app/components/nudges/PrepKeepToast.tsx b/frontend/src/app/components/nudges/PrepKeepToast.tsx
index ba826c23..572d8d5b 100644
--- a/frontend/src/app/components/nudges/PrepKeepToast.tsx
+++ b/frontend/src/app/components/nudges/PrepKeepToast.tsx
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { deleteSession } from '@/shared/state/agentsSlice';
-import { removeCard, removeWorkflowCard } from '@/shared/state/dashboardLayoutSlice';
+import { removeCard, closeWorkflowMonitor } from '@/shared/state/dashboardLayoutSlice';
 import { deleteWorkflow } from '@/shared/state/workflowsSlice';
 import { clearPrepped } from '@/shared/state/onboardingV3Slice';
 
@@ -33,7 +33,7 @@ const PrepKeepToast: React.FC = () => {
   const discard = useCallback(() => {
     for (const job of prepped) {
       if (job.kind === 'schedule' && job.workflowId) {
-        dispatch(removeWorkflowCard(job.workflowId));
+        dispatch(closeWorkflowMonitor());
         void dispatch(deleteWorkflow(job.workflowId));
       } else {
         dispatch(removeCard(job.sessionId));
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 33a3193b..d7ad6354 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -192,8 +192,11 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
           zIndex: 10,
           pointerEvents: 'none',
           // p: 3 (24px) was leaving a chunky air gap between the sidebar edge and the dashboard header that read as "two disconnected panels" rather than one continuous surface. 0.75 (6px) tightens the inset so the header floats just inside the content area without losing its breathing room from the top-most pixel.
-          p: 0.75,
+          pt: 0.75,
+          pr: 0.75,
           pb: 0,
+          // Clears the macOS traffic lights when the sidebar is docked away (AppShell sets the var); 6px otherwise.
+          pl: 'var(--osw-header-inset, 6px)',
           // No scrim: the header carries its own translucent pill (DashboardHeader), so a full-width
           // page->transparent fade here just read as a light-leak band over the themed canvas.
         }}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index 2611e144..f0593fc6 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -9,7 +9,6 @@ import MissedRunsToast from '@/app/pages/Workflows/MissedRunsToast';
 import ProviderHealthToast from '@/app/components/overlays/ProviderHealthToast';
 import ScheduleOfferToast from '@/app/components/nudges/ScheduleOfferToast';
 import PrepKeepToast from '@/app/components/nudges/PrepKeepToast';
-import RevealHero from '@/app/components/nudges/RevealHero';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -163,8 +162,8 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
       {/* One-shot dependency beat: first completed personalized starter offers to become a weekly job */}
       <ScheduleOfferToast dashboardId={dashboardId} />
 
-      {/* Unmissable top-center legend of the work the reveal did, with live working/done status */}
-      <RevealHero />
+      {/* The reveal's payoff is the hold-to-enter gradient flood (BeatEnter) landing you on the live work,
+          not a summary card, so no modal here. */}
 
       {/* Accept-or-deny for the audit + app the flow started on the user's behalf */}
       <PrepKeepToast />
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 5b4fc18f..c49ecc5b 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -594,12 +594,15 @@ const AgentCard: React.FC<Props> = ({
       if (dir.includes('s')) newH = origH + dy;
       if (dir.includes('n')) { newH = origH - dy; newY = origY + dy; }
 
+      // An enlarged card can't be shrunk below its content-showing height, else the user resizes the
+      // chat down until the transcript vanishes (which felt broken). Collapsed cards keep the tiny floor.
+      const minH = expanded ? EXPANDED_OVERLAY_H : MIN_H;
       if (newW < MIN_W) { if (dir.includes('w')) newX = origX + origW - MIN_W; newW = MIN_W; }
-      if (newH < MIN_H) { if (dir.includes('n')) newY = origY + origH - MIN_H; newH = MIN_H; }
+      if (newH < minH) { if (dir.includes('n')) newY = origY + origH - minH; newH = minH; }
 
       return { x: newX, y: newY, w: newW, h: newH };
     },
-    [getCanvasState],
+    [getCanvasState, expanded],
   );
 
   const handleResizeMove = useCallback(
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index c1e4c0a1..f874e86d 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, type RefObject } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { store } from '@/shared/state/store';
 import {
-  placeCard, addWorkflowCard, setWorkflowCardPosition, setViewCardPosition,
+  placeCard, openWorkflowMonitor, setWorkflowsMonitorPosition, setViewCardPosition,
   DEFAULT_CARD_W, DEFAULT_CARD_H, EXPANDED_CARD_MIN_H,
 } from '@/shared/state/dashboardLayoutSlice';
 import { clearReveal, setRevealAnchor } from '@/shared/state/onboardingV3Slice';
@@ -18,6 +18,9 @@ interface Args {
 }
 
 const GAP = 48;
+// The scheduled task renders as a RunMonitor card, which is taller than a job card; reserve its slot so
+// the camera frames it. Mirrors the monitor default height in dashboardLayoutSlice.openWorkflowMonitor.
+const WORKFLOW_MONITOR_H = 560;
 
 /** Where the reveal's app view card is born: right of the welcome chat, top-aligned. The "here's what I did" legend is the fixed RevealHero panel, not a canvas note, so the app sits right next to the chat. */
 export function revealAppSpot(anchor: { cx: number; cy: number }): { x: number; y: number } {
@@ -40,18 +43,24 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
     const a = anchorRef.current;
     if (!a) return;
     prepped.forEach((job) => {
+      // Every job shows its AGENT card (its live transcript), including the app builder, so the reveal
+      // makes it obvious the agent is BUILDING the app, not just a "building..." box. Its finished app
+      // view card appears beside it when it renders (birth-position path in useDashboardLifecycle).
       const key = job.workflowId || job.sessionId;
       if (placedRef.current.has(key)) return;
       const i = placedRef.current.size;
-      // Left column, top-aligned with the expanded welcome chat, tight vertical rhythm.
+      // Left column, top-aligned with the expanded welcome chat. Cards open ENLARGED, so the vertical
+      // rhythm is the expanded height, not the compact one, or enlarged cards would overlap.
       const x = a.cx - DEFAULT_CARD_W / 2 - GAP - DEFAULT_CARD_W;
-      const y = a.cy - EXPANDED_CARD_MIN_H / 2 + i * (DEFAULT_CARD_H + 24);
+      const y = a.cy - EXPANDED_CARD_MIN_H / 2 + i * (EXPANDED_CARD_MIN_H + 24);
       if (job.kind === 'schedule' && job.workflowId) {
-        // The scheduled task is a workflow, not an agent session: place its workflow card in the same stack.
-        dispatch(addWorkflowCard({ workflowId: job.workflowId, expandedSessionIds }));
-        dispatch(setWorkflowCardPosition({ workflowId: job.workflowId, x, y }));
+        // The scheduled task is a workflow. The canvas only draws ONE workflow card (the "monitor"), so
+        // open the scheduled workflow AS that monitor card, else it never renders (the workflowCards map
+        // it used to go into is not drawn). Its taller monitor card gets its own slot below the jobs.
+        dispatch(openWorkflowMonitor({ workflowId: job.workflowId }));
+        dispatch(setWorkflowsMonitorPosition({ x, y }));
       } else {
-        dispatch(placeCard({ sessionId: job.sessionId, x, y, width: DEFAULT_CARD_W, height: DEFAULT_CARD_H, expandedSessionIds, exact: true }));
+        dispatch(placeCard({ sessionId: job.sessionId, x, y, width: DEFAULT_CARD_W, height: EXPANDED_CARD_MIN_H, expandedSessionIds, exact: true }));
       }
       placedRef.current.add(key);
     });
@@ -87,11 +96,21 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
           }
         }
         createWelcomeDraft();
-        // Frame the whole cluster (jobs column + chat + note) so the reveal is readable, not scattered.
+        // Frame the whole cluster (left job column + chat + app view card on the right) so the reveal is
+        // readable, not scattered. The pipeline ALWAYS sets up one scheduled task, whose RunMonitor card is
+        // tall and lands late; reserve its slot now (2 short job cards + the monitor) so the camera never
+        // cuts it off when it arrives. Width runs from the left column to the far edge of the app view card.
         const left = cx - DEFAULT_CARD_W / 2 - GAP - DEFAULT_CARD_W;
         const top = cy - EXPANDED_CARD_MIN_H / 2;
+        const right = cx + DEFAULT_CARD_W / 2 + GAP + DEFAULT_CARD_W;
+        // The left column is now enlarged agent cards (audit + app-builder + research) + the tall
+        // scheduled-task monitor below them, so reserve for three cards plus the monitor.
+        const stackH = 3 * (EXPANDED_CARD_MIN_H + 24) + WORKFLOW_MONITOR_H;
+        // Reserve headroom at the top so the topmost cards clear the macOS traffic lights + the floating
+        // dashboard title pill + the run-status pill, instead of the chat header landing under them.
+        const TOP_CHROME_PAD = 130;
         fitToCards(
-          [{ x: left, y: top, width: (DEFAULT_CARD_W * 2) + (GAP * 2), height: Math.max(EXPANDED_CARD_MIN_H, DEFAULT_CARD_H * 3 + 48) }],
+          [{ x: left, y: top - TOP_CHROME_PAD, width: right - left, height: Math.max(EXPANDED_CARD_MIN_H, stackH) + TOP_CHROME_PAD }],
           0.9,
           true,
         );
diff --git a/frontend/src/app/pages/Workflows/app/RunMonitor.tsx b/frontend/src/app/pages/Workflows/app/RunMonitor.tsx
index ff0b6645..6ed845cd 100644
--- a/frontend/src/app/pages/Workflows/app/RunMonitor.tsx
+++ b/frontend/src/app/pages/Workflows/app/RunMonitor.tsx
@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import AgentChat from '@/app/pages/AgentChat/AgentChat';
 import { fetchRuns, controlWorkflowRun } from '@/shared/state/workflowsSlice';
-import type { Workflow, WorkflowRun } from '@/shared/state/workflowsSlice';
+import type { Workflow, WorkflowRun, ScheduleConfig } from '@/shared/state/workflowsSlice';
 import {
   bringToFront, closeWorkflowMonitor, setWorkflowsMonitorPosition,
 } from '@/shared/state/dashboardLayoutSlice';
@@ -27,6 +27,27 @@ function kindLabel(run: WorkflowRun | null): string {
   return 'SCHEDULED RUN';
 }
 
+const WEEKDAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+function fmtTime(hour: number, minute: number): string {
+  const h12 = hour % 12 === 0 ? 12 : hour % 12;
+  return `${h12}:${String(minute).padStart(2, '0')} ${hour < 12 ? 'AM' : 'PM'}`;
+}
+
+// Plain-English cadence for a scheduled task that hasn't run yet, so the card says WHEN, not "0%".
+function formatSchedule(s: ScheduleConfig): string {
+  const time = fmtTime(s.hour ?? 9, s.minute ?? 0);
+  if (s.repeat_unit === 'week' && s.on_days?.length) {
+    const days = s.on_days.slice().sort((a, b) => a - b);
+    if (days.length === 5 && days.every((d, i) => d === i + 1)) return `Every weekday at ${time}`;
+    return `Every ${days.map((d) => WEEKDAY_NAMES[d] ?? '').filter(Boolean).join(', ')} at ${time}`;
+  }
+  if (s.repeat_unit === 'day') return `Every day at ${time}`;
+  if (s.repeat_unit === 'hour') return 'Every hour';
+  if (s.repeat_unit === 'month') return `Monthly at ${time}`;
+  return `Scheduled for ${time}`;
+}
+
 interface Props {
   workflow: Workflow;
   cardX: number;
@@ -204,10 +225,34 @@ const RunMonitor: React.FC<Props> = ({ workflow, cardX, cardY, cardWidth, cardHe
         <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
           <AgentChat sessionId={sessionId} embedded readOnly />
         </div>
-      ) : (
+      ) : run ? (
         <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: c.text.tertiary }}>
           {isRunning ? 'Waiting for the run to start…' : failed ? 'This run failed before any agent ran.' : 'No agent chat for this run.'}
         </div>
+      ) : (
+        /* Never-run scheduled task: show WHEN it runs and WHAT it does, not an empty 0% run pane. */
+        <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <div>
+            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: c.text.tertiary, marginBottom: 6 }}>Schedule</div>
+            <div style={{ fontSize: 14, fontWeight: 600, color: c.text.primary }}>{formatSchedule(workflow.schedule)}</div>
+            {workflow.next_run_at && (
+              <div style={{ fontSize: 12, color: c.text.tertiary, marginTop: 3 }}>
+                Next run {new Date(workflow.next_run_at).toLocaleString([], { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}
+              </div>
+            )}
+          </div>
+          <div>
+            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: c.text.tertiary, marginBottom: 8 }}>What it does</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
+              {steps.map((st, idx) => (
+                <div key={st.id || idx} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+                  <div style={{ width: 20, height: 20, borderRadius: 6, flex: 'none', background: c.bg.secondary, color: c.text.tertiary, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{idx + 1}</div>
+                  <div style={{ fontSize: 13, color: c.text.secondary, lineHeight: 1.45 }}>{st.label || st.text.trim()}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       )}
 
       {/* footer only while live: Stop fully fails the in-flight run. Once it's
diff --git a/frontend/src/shared/providerUsage.ts b/frontend/src/shared/providerUsage.ts
index 2013f36f..ed531458 100644
--- a/frontend/src/shared/providerUsage.ts
+++ b/frontend/src/shared/providerUsage.ts
@@ -9,14 +9,33 @@ export interface ProviderUsage {
   capped?: boolean;
   titles: string[];
   memories: string[];
+  // FULL text of the most recent few conversations (their real asks + the exchange). The payload:
+  // titles are the vague label, this is the substance a clustering pass turns into a real profile.
+  convos?: { title: string; text: string }[];
 }
 
-// Turn the raw read into a compact profile block for the prep prompt: the memory facts (strongest), the scale, and the most-recent topics. Capped hard so we never ship a wall of PII even for a heavy user; the aux model turns this into the profile.
+// ~130K chars is ~32K tokens: a generous budget for the full-convo block, since a downstream clustering
+// pass distills it before the reveal (so a couple cents, not a bloated final prompt).
+const TOTAL_CONVO_CHARS = 130000;
+
+// Turn the raw read into the profile block for prep: memory facts, the scale, recent titles for breadth,
+// then the FULL recent conversations (the payload). Bounded so even a heavy user can't ship a wall of PII;
+// the backend then distills it to a tight "who is this person" profile.
 export function summarizeUsage(u: ProviderUsage | null): string {
   if (!u || !u.ok) return '';
   const parts: string[] = [];
   if (u.total > 0) parts.push(`They have ${u.total}${u.capped ? '+' : ''} past AI conversations.`);
   if (u.memories.length > 0) parts.push('Facts their AI remembers about them: ' + u.memories.join('; '));
-  if (u.titles.length > 0) parts.push('Topics they keep coming back to (recent first): ' + u.titles.slice(0, 150).join('; '));
-  return parts.join('\n').slice(0, 4000);
+  if (u.titles.length > 0) parts.push('Recent conversation titles (breadth): ' + u.titles.slice(0, 150).join('; '));
+  if (u.convos && u.convos.length > 0) {
+    const block: string[] = [];
+    let used = 0;
+    for (const cv of u.convos) {
+      if (used + cv.text.length > TOTAL_CONVO_CHARS) break;
+      block.push(cv.text);
+      used += cv.text.length;
+    }
+    if (block.length) parts.push('Full text of their most recent conversations (their real asks + the exchange):\n\n' + block.join('\n\n---\n\n'));
+  }
+  return parts.join('\n');
 }
diff --git a/frontend/src/shared/state/onboardingV3Slice.ts b/frontend/src/shared/state/onboardingV3Slice.ts
index f596c844..e4eed784 100644
--- a/frontend/src/shared/state/onboardingV3Slice.ts
+++ b/frontend/src/shared/state/onboardingV3Slice.ts
@@ -7,7 +7,7 @@ export interface PreppedJob {
   /** Agent-session id for audit/app/research jobs; '' for a scheduled workflow (keyed by workflowId instead). */
   sessionId: string;
   title: string;
-  kind: 'audit' | 'app' | 'schedule' | 'research';
+  kind: 'audit' | 'app' | 'schedule' | 'research' | 'browser';
   /** The one-clause "why we started this for you", shown in the reveal note. */
   reason?: string;
   /** Set for kind 'schedule': the created scheduled workflow, placed as a workflow card + deletable on discard. */
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index 4ed91b4d..a5553d24 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -83,6 +83,8 @@ export interface AppSettings {
   /** Multi-stop gradient from the theme pad (2-3 hexes); washes the canvas. */
   accent_gradient?: string[] | null;
   personalized_greeting?: string | null;
+  /** The short one-glance identity hook shown in the reveal's focal beat (greeting is the longer read). */
+  personalized_headline?: string | null;
   personalized_starters?: PersonalizedStarter[];
   personalized_automations?: PersonalizedAutomation[];
   personalized_usage_summary?: string | null;

From 8fb931136cac84eaec45727a1f4ed63e2a7f1cbc Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 23:11:13 -0700
Subject: [PATCH 086/248] [eric] agents: rich_ui system-prompt nudge so the
 model reaches for ShowUI/AskUI by default (skipped when ShowUI denied)

---
 .../prompt/compose_turn_system_prompt.py      | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
index 5ff3beb4..5e04fde1 100644
--- a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
+++ b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
@@ -89,6 +89,25 @@ def compose_turn_system_prompt(
         )
         composed_prompt = f"{composed_prompt}\n\n{apps_note}" if composed_prompt else apps_note
 
+    # Default-on nudge to actually REACH for the rich components; the tool descriptions alone
+    # under-trigger. Skipped entirely when the user disabled ShowUI so we never advertise a dead tool.
+    try:
+        from backend.apps.tools_lib.tools_lib import load_builtin_permissions
+        if load_builtin_permissions().get("ShowUI", "always_allow") != "deny":
+            rich_ui_note = (
+                "<rich_ui>\n"
+                "Strongly prefer rendering rich UI over prose, every time the content fits:\n"
+                "- ShowUI for any structured result: tables, stats, links, plans, progress, code, diffs, "
+                "charts, maps, media, posts, receipts. Render the component, then add one line of text.\n"
+                "- AskUI for ANY question with enumerable choices, an approval, or tunable values: render "
+                "it and wait for the answer instead of asking in prose.\n"
+                "Describing structured data in plain text when a component fits is the worse answer.\n"
+                "</rich_ui>"
+            )
+            composed_prompt = f"{composed_prompt}\n\n{rich_ui_note}" if composed_prompt else rich_ui_note
+    except Exception:
+        pass
+
     # App cards the user picked via the dashboard element picker: give the agent each app's on-disk path + meta + SKILL.md pointer so it can edit them in place (the dashboard card's runtime live-reloads). Additive and independent of view-builder mode above.
     app_ctx = build_selected_app_context(selected_app_output_ids)
     if app_ctx:

From 8d3782a0787b19f49774c27a7f51054dc7aae9dc Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 23:33:18 -0700
Subject: [PATCH 087/248] [eric] onboarding: reveal as 2-col grid + full
 Workflows GUI + staggered launches + coherent greeting

---
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 73 +++++++++++++------
 .../lifecycle/useOnboardingRevealSeed.ts      | 55 +++++++++-----
 2 files changed, 84 insertions(+), 44 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 06c9e3c0..5edc2c0c 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -34,6 +34,16 @@ function cadenceToSchedule(cadence: string): Record<string, unknown> {
   return { ...base, repeat_unit: 'week', on_days: [1] };
 }
 
+// Gap between the demo launches. Right after connect the provider's OAuth token can still be mid-refresh,
+// and four simultaneous cold turns raced that refresh and all "hit a snag"; the first launch warms the
+// token, the rest ride it warm. Fires during the curtain beats, so the lead time is hidden.
+const LAUNCH_STAGGER_MS = 1200;
+
+// How long finish() will wait for prep before staging the reveal. Prep is kicked early (theme beat) so it
+// has usually resolved; this only bites a user who outran it, and a brief wait for a COHERENT reveal beats
+// an instant one showing a previous run's stale greeting. Capped so it's never an open-ended spinner.
+const PREP_WAIT_CAP_MS = 5000;
+
 // Used when prep's aux dropped the automations field, so the reveal always demonstrates automation.
 // A useful digest (not a cleanup chore, which the value bar bans).
 const SCHEDULE_FALLBACK: PersonalizedAutomation = {
@@ -144,14 +154,27 @@ export function useOnboardingV3Pipeline() {
       launchedRef.current = true;
       // The four auto-run showcase jobs, one per capability: build an app, dig the web, drive a real
       // browser, and set up a scheduled task. The lame file-audit is gone; the browser task shows the
-      // agent controlling a real site live.
-      if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app', prep.app_reason ?? '');
-      if (prep.research_title && prep.research_prompt) launchJob(prep.research_title, prep.research_prompt, 'research', prep.research_reason ?? '');
-      if (prep.browser_title && prep.browser_prompt) launchJob(prep.browser_title, prep.browser_prompt, 'browser', prep.browser_reason ?? '');
+      // agent controlling a real site live. Fired STAGGERED so the first turn warms the just-connected
+      // provider token before the rest hit it (see LAUNCH_STAGGER_MS).
+      const launches: Array<() => void> = [];
+      if (prep.app_title && prep.app_prompt) {
+        const t = prep.app_title, p = prep.app_prompt, r = prep.app_reason ?? '';
+        launches.push(() => launchJob(t, p, 'app', r));
+      }
+      if (prep.research_title && prep.research_prompt) {
+        const t = prep.research_title, p = prep.research_prompt, r = prep.research_reason ?? '';
+        launches.push(() => launchJob(t, p, 'research', r));
+      }
+      if (prep.browser_title && prep.browser_prompt) {
+        const t = prep.browser_title, p = prep.browser_prompt, r = prep.browser_reason ?? '';
+        launches.push(() => launchJob(t, p, 'browser', r));
+      }
       // The scheduled task is a first-class part of the reveal (the "it automates for me" capability), so
       // guarantee one: use the model's automation when it emitted one (it sometimes drops the last JSON
-      // field), else fall back to a safe, universally-useful weekly Downloads sweep.
-      createScheduledJob(prep.automations[0] ?? SCHEDULE_FALLBACK);
+      // field), else fall back to a safe, universally-useful weekly roundup.
+      const auto = prep.automations[0] ?? SCHEDULE_FALLBACK;
+      launches.push(() => createScheduledJob(auto));
+      launches.forEach((fn, idx) => { if (idx === 0) fn(); else window.setTimeout(fn, idx * LAUNCH_STAGGER_MS); });
     });
   }, [launchJob, createScheduledJob]);
 
@@ -161,30 +184,32 @@ export function useOnboardingV3Pipeline() {
       dispatch(updateSettingsPatch({ onboarding_v3: 'skipped', accent_color: accent, accent_gradient: gradient, theme: mode }));
       return;
     }
-    // NEVER block the curtain behind a spinner. The connect head-start means prep has usually resolved
-    // during the beats, so seed with the real jobs/greeting synchronously; if a fast user beat prep to
-    // this point, seed with what we have and let the late-jobs effect + the async patch below fill in.
-    // The whole point of gating on connect is this head start, so the reveal must show it in motion.
-    const ready = prepReadyRef.current;
     dispatch(updateSettingsPatch({ onboarding_v3: 'done', accent_color: accent, accent_gradient: gradient, theme: mode }));
+    // Wait for prep (kicked early during the beats, usually already resolved) so the welcome greeting +
+    // starters are from the SAME prep as the launched jobs. A previous run's greeting persists in settings,
+    // so staging the reveal before this patch landed showed a stale, mismatched greeting; persist FIRST,
+    // then stage. Capped so a user who outran prep waits a beat, never an open-ended spinner.
+    let prep = prepReadyRef.current;
+    if (!prep && prepRef.current) {
+      prep = (await Promise.race([
+        prepRef.current,
+        new Promise<null>((res) => window.setTimeout(() => res(null), PREP_WAIT_CAP_MS)),
+      ]).catch(() => null)) ?? prepReadyRef.current;
+    }
+    // Always patch (even to null): clears a previous run's stale greeting when this prep produced none.
+    dispatch(updateSettingsPatch({
+      personalized_greeting: prep?.greeting?.trim() || null,
+      personalized_headline: prep?.headline?.trim() || null,
+      personalized_starters: prep?.starters ?? [],
+      personalized_automations: prep?.automations ?? [],
+    }));
     dispatch(stageReveal({
-      greeting: ready?.greeting?.trim() || null,
-      starters: ready?.starters ?? [],
+      greeting: prep?.greeting?.trim() || null,
+      starters: prep?.starters ?? [],
       scanSummary: summarizeScan(scanResultRef.current),
       autoPrompt: null,
     }));
     dispatch(setFlowActive(false));
-    // Personalized fields land the instant prep resolves (often already have): the welcome greeting
-    // waits for personalized_greeting then streams it in, and the starter chips read it live.
-    void (prepRef.current ?? Promise.resolve(null)).then((prep) => {
-      if (!prep) return;
-      dispatch(updateSettingsPatch({
-        personalized_greeting: prep.greeting?.trim() || null,
-        personalized_headline: prep.headline?.trim() || null,
-        personalized_starters: prep.starters ?? [],
-        personalized_automations: prep.automations ?? [],
-      }));
-    });
   }, [dispatch, accent, gradient, mode]);
 
   return { identity, kickIdentity, kickScan, kickUsageRead, kickPrep, finish };
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index f874e86d..b6d0b058 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -2,8 +2,9 @@ import { useCallback, useEffect, useRef, type RefObject } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { store } from '@/shared/state/store';
 import {
-  placeCard, openWorkflowMonitor, setWorkflowsMonitorPosition, setViewCardPosition,
-  DEFAULT_CARD_W, DEFAULT_CARD_H, EXPANDED_CARD_MIN_H,
+  placeCard, openWorkflowsApp, setWorkflowsHubPosition, setWorkflowsHubSize,
+  clearPendingFocusWorkflowsHub, setViewCardPosition,
+  DEFAULT_CARD_W, EXPANDED_CARD_MIN_H,
 } from '@/shared/state/dashboardLayoutSlice';
 import { clearReveal, setRevealAnchor } from '@/shared/state/onboardingV3Slice';
 
@@ -18,9 +19,10 @@ interface Args {
 }
 
 const GAP = 48;
-// The scheduled task renders as a RunMonitor card, which is taller than a job card; reserve its slot so
-// the camera frames it. Mirrors the monitor default height in dashboardLayoutSlice.openWorkflowMonitor.
-const WORKFLOW_MONITOR_H = 560;
+// The scheduled task opens the FULL Workflows app (rich detail view), sized to span the 2-column agent
+// grid below it so the default 1280x800 hub doesn't dominate the reveal.
+const REVEAL_WORKFLOW_W = 2 * DEFAULT_CARD_W + GAP;
+const REVEAL_WORKFLOW_H = 560;
 
 /** Where the reveal's app view card is born: right of the welcome chat, top-aligned. The "here's what I did" legend is the fixed RevealHero panel, not a canvas note, so the app sits right next to the chat. */
 export function revealAppSpot(anchor: { cx: number; cy: number }): { x: number; y: number } {
@@ -38,28 +40,41 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
   // anchor + placed-set let us keep dropping those cards in the same left stack instead of losing them.
   const anchorRef = useRef<{ cx: number; cy: number } | null>(null);
   const placedRef = useRef<Set<string>>(new Set());
+  // Only the agent-card jobs flow into the 2-column grid; the schedule gets its own wide slot below, so
+  // count agent cards separately or the schedule would leave a hole in the grid rhythm.
+  const agentCountRef = useRef(0);
 
   const placeJobs = useCallback(() => {
     const a = anchorRef.current;
     if (!a) return;
+    // Grid geometry, shared by placement here and the schedule's below-grid slot.
+    const gridLeftX = a.cx - DEFAULT_CARD_W / 2 - 2 * GAP - 2 * DEFAULT_CARD_W;
+    const gridTopY = a.cy - EXPANDED_CARD_MIN_H / 2;
     prepped.forEach((job) => {
       // Every job shows its AGENT card (its live transcript), including the app builder, so the reveal
       // makes it obvious the agent is BUILDING the app, not just a "building..." box. Its finished app
       // view card appears beside it when it renders (birth-position path in useDashboardLifecycle).
       const key = job.workflowId || job.sessionId;
       if (placedRef.current.has(key)) return;
-      const i = placedRef.current.size;
-      // Left column, top-aligned with the expanded welcome chat. Cards open ENLARGED, so the vertical
-      // rhythm is the expanded height, not the compact one, or enlarged cards would overlap.
-      const x = a.cx - DEFAULT_CARD_W / 2 - GAP - DEFAULT_CARD_W;
-      const y = a.cy - EXPANDED_CARD_MIN_H / 2 + i * (EXPANDED_CARD_MIN_H + 24);
       if (job.kind === 'schedule' && job.workflowId) {
-        // The scheduled task is a workflow. The canvas only draws ONE workflow card (the "monitor"), so
-        // open the scheduled workflow AS that monitor card, else it never renders (the workflowCards map
-        // it used to go into is not drawn). Its taller monitor card gets its own slot below the jobs.
-        dispatch(openWorkflowMonitor({ workflowId: job.workflowId }));
-        dispatch(setWorkflowsMonitorPosition({ x, y }));
+        // The scheduled task opens the FULL Workflows app (its rich detail view: schedule + steps), not
+        // the compact run-monitor card, so the reveal shows off the real automation GUI. It sits in a wide
+        // slot below the agent grid. Opening the app normally snaps the camera to the hub (a fitToCards on
+        // pendingFocusWorkflowsHub); clear that flag so the reveal's own framing wins.
+        const sy = gridTopY + 2 * (EXPANDED_CARD_MIN_H + 24);
+        dispatch(openWorkflowsApp({ workflowId: job.workflowId, expandedSessionIds }));
+        dispatch(clearPendingFocusWorkflowsHub());
+        dispatch(setWorkflowsHubSize({ width: REVEAL_WORKFLOW_W, height: REVEAL_WORKFLOW_H }));
+        dispatch(setWorkflowsHubPosition({ x: gridLeftX, y: sy }));
       } else {
+        // 2-column grid to the LEFT of the welcome chat. A single tall column (enlarged cards stacked)
+        // forced the camera so far out the cards went unreadable; wide-and-short frames at a legible zoom.
+        const gi = agentCountRef.current;
+        agentCountRef.current += 1;
+        const col = gi % 2;
+        const row = Math.floor(gi / 2);
+        const x = gridLeftX + col * (DEFAULT_CARD_W + GAP);
+        const y = gridTopY + row * (EXPANDED_CARD_MIN_H + 24);
         dispatch(placeCard({ sessionId: job.sessionId, x, y, width: DEFAULT_CARD_W, height: EXPANDED_CARD_MIN_H, expandedSessionIds, exact: true }));
       }
       placedRef.current.add(key);
@@ -100,12 +115,12 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
         // readable, not scattered. The pipeline ALWAYS sets up one scheduled task, whose RunMonitor card is
         // tall and lands late; reserve its slot now (2 short job cards + the monitor) so the camera never
         // cuts it off when it arrives. Width runs from the left column to the far edge of the app view card.
-        const left = cx - DEFAULT_CARD_W / 2 - GAP - DEFAULT_CARD_W;
+        const left = cx - DEFAULT_CARD_W / 2 - 2 * GAP - 2 * DEFAULT_CARD_W; // left edge of the 2-col grid
         const top = cy - EXPANDED_CARD_MIN_H / 2;
-        const right = cx + DEFAULT_CARD_W / 2 + GAP + DEFAULT_CARD_W;
-        // The left column is now enlarged agent cards (audit + app-builder + research) + the tall
-        // scheduled-task monitor below them, so reserve for three cards plus the monitor.
-        const stackH = 3 * (EXPANDED_CARD_MIN_H + 24) + WORKFLOW_MONITOR_H;
+        const right = cx + DEFAULT_CARD_W / 2 + GAP + DEFAULT_CARD_W; // right edge of the app view card
+        // The agent cards lay out as a 2-column grid (2 enlarged rows) with the full Workflows app spanning
+        // a wide row below them. Reserve for both now so the schedule, which lands late, is already in frame.
+        const stackH = 2 * (EXPANDED_CARD_MIN_H + 24) + REVEAL_WORKFLOW_H;
         // Reserve headroom at the top so the topmost cards clear the macOS traffic lights + the floating
         // dashboard title pill + the run-status pill, instead of the chat header landing under them.
         const TOP_CHROME_PAD = 130;

From 0779692a545df0ccedee81246abf34b59431b98a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 23:44:37 -0700
Subject: [PATCH 088/248] [eric] chat+dashboard: animated WebGL weather widget
 (vendored runtime, adapter keeps simple agent shape); AskUI Confirm wired to
 their native actions + orphan feedback; wallpaper v2 (aerial-perspective
 ridges, lit crests, 120s ambient drift, reduced-motion off)

---
 .../pages/AgentChat/tool-ui/AskUiBubble.tsx   |  28 ++-
 .../pages/AgentChat/tool-ui/WeatherWidget.tsx | 123 ++++-------
 .../Dashboard/desktop/DesktopWallpaper.tsx    | 199 ++++++++++++------
 3 files changed, 199 insertions(+), 151 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
index c0f320fc..f30063a1 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
@@ -29,6 +29,7 @@ function parseResultResponse(pair: ToolPair): Record<string, unknown> | null {
 function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubbleProps): React.ReactElement {
   const payload = parseShowUiPayload(pair);
   const [submitted, setSubmitted] = useState(false);
+  const [orphaned, setOrphaned] = useState(false);
   const answered = parseResultResponse(pair);
 
   const componentId = payload && payload.component === 'vendored' ? String(payload.props.id || '') : '';
@@ -41,13 +42,22 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
         method: 'POST',
         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getAuthToken()}` },
         body: JSON.stringify({ session_id: sessionId, component_id: componentId, response }),
-      }).catch(() => setSubmitted(false));
+      })
+        .then((r) => {
+          if (!r.ok) {
+            // Nothing parked server-side (agent gone or this is a replayed transcript): say so instead of silently swallowing the click.
+            setSubmitted(false);
+            setOrphaned(true);
+          }
+        })
+        .catch(() => setSubmitted(false));
     },
     [submitted, sessionId, componentId],
   );
 
-  // Their embedded-actions contract: onAction(actionId, state) delivers the component's full state;
-  // approval-card uses onConfirm/onCancel instead. Inject a default Send action when none given.
+  // Their embedded-actions contract: onAction(actionId, state) delivers the component's full state,
+  // and the components ship their own footer actions (Clear/Confirm), so we only wire the callback.
+  // 'cancel' is a local clear, never an answer; approval-card uses onConfirm/onCancel instead.
   const extraProps = useMemo(() => {
     if (!payload || payload.component !== 'vendored') return {};
     const waiting = pair.result === null && !submitted;
@@ -60,10 +70,11 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
         : { choice: (answered?.choice as string) || undefined };
     }
     if (waiting) {
-      const hasActions = Array.isArray((payload.props as { actions?: unknown[] }).actions) && (payload.props as { actions?: unknown[] }).actions!.length > 0;
       return {
-        ...(hasActions ? {} : { actions: [{ id: 'submit', label: 'Send' }] }),
-        onAction: (actionId: string, state: unknown) => respond({ action: actionId, value: state ?? null }),
+        onAction: (actionId: string, state: unknown) => {
+          if (actionId === 'cancel') return;
+          respond({ action: actionId, value: state ?? null });
+        },
       };
     }
     return answered && 'value' in answered ? { choice: answered.value } : {};
@@ -81,6 +92,11 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
       {submitted && pair.result === null && (
         <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
       )}
+      {orphaned && (
+        <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>
+          No agent is waiting for this answer (the request expired or this is an old transcript).
+        </Box>
+      )}
     </Box>
   );
 }
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
index e7a4fe30..7034c16f 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
@@ -1,91 +1,54 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
-import CloudOutlinedIcon from '@mui/icons-material/CloudOutlined';
-import GrainIcon from '@mui/icons-material/Grain';
-import AcUnitIcon from '@mui/icons-material/AcUnit';
-import ThunderstormOutlinedIcon from '@mui/icons-material/ThunderstormOutlined';
+import { WeatherWidget as AnimatedWeatherWidget } from '@toolui/components/weather-widget/weather-widget-container';
+import type { WeatherConditionCode, ForecastDay } from '@toolui/components/weather-widget/schema-runtime';
+import { useThemeMode } from '@/shared/styles/ThemeContext';
 import type { WeatherProps } from './showUiPayload';
 
-function conditionIcon(condition: string | undefined, size: number): React.ReactElement {
+function toConditionCode(condition: string | undefined): WeatherConditionCode {
   const cond = (condition || '').toLowerCase();
-  const sx = { fontSize: size, color: 'rgba(255,255,255,0.92)' };
-  if (/thunder|storm/.test(cond)) return <ThunderstormOutlinedIcon sx={sx} />;
-  if (/rain|drizzle|shower/.test(cond)) return <GrainIcon sx={sx} />;
-  if (/snow|sleet|ice/.test(cond)) return <AcUnitIcon sx={sx} />;
-  if (/cloud|overcast|fog|mist/.test(cond)) return <CloudOutlinedIcon sx={sx} />;
-  return <WbSunnyOutlinedIcon sx={sx} />;
+  if (/thunder|storm/.test(cond)) return 'thunderstorm';
+  if (/heavy rain|downpour/.test(cond)) return 'heavy-rain';
+  if (/drizzle/.test(cond)) return 'drizzle';
+  if (/rain|shower/.test(cond)) return 'rain';
+  if (/sleet/.test(cond)) return 'sleet';
+  if (/hail/.test(cond)) return 'hail';
+  if (/snow/.test(cond)) return 'snow';
+  if (/fog|mist|haze/.test(cond)) return 'fog';
+  if (/overcast/.test(cond)) return 'overcast';
+  if (/partly|part sun|some cloud/.test(cond)) return 'partly-cloudy';
+  if (/cloud/.test(cond)) return 'cloudy';
+  if (/wind/.test(cond)) return 'windy';
+  return 'clear';
 }
 
-/** iOS-style weather card: dusk-sky art, big thin temperature, five-day strip. */
+/** Agent-facing 'weather' shape adapted onto the vendored animated (WebGL) weather widget. */
 function WeatherWidget({ props }: { props: WeatherProps }): React.ReactElement {
-  const unit = props.unit || 'F';
+  const { mode } = useThemeMode();
+  const forecast: ForecastDay[] = (props.forecast || []).slice(0, 7).map((d) => ({
+    label: d.day,
+    conditionCode: toConditionCode(d.condition),
+    tempMin: Math.round(d.low ?? d.high - 8),
+    tempMax: Math.round(d.high),
+  }));
+
   return (
-    <Box
-      sx={{
-        width: 300,
-        borderRadius: '16px',
-        overflow: 'hidden',
-        position: 'relative',
-        p: 2,
-        color: '#fff',
-        background:
-          'radial-gradient(120% 90% at 78% 62%, rgba(255,196,110,0.9) 0%, rgba(214,142,90,0.75) 30%, rgba(120,85,80,0.4) 55%, rgba(0,0,0,0) 75%), linear-gradient(180deg, #4d4048 0%, #6b5a58 45%, #8a6a55 100%)',
-        boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
-      }}
-    >
-      <Typography sx={{ fontSize: '1.05rem', fontWeight: 600, textShadow: '0 1px 8px rgba(0,0,0,0.35)' }}>
-        {props.location}
-      </Typography>
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', mt: 0.5 }}>
-        <Typography sx={{ fontSize: '4rem', fontWeight: 200, lineHeight: 1, letterSpacing: '-2px', textShadow: '0 2px 12px rgba(0,0,0,0.3)' }}>
-          {Math.round(props.temp)}
-        </Typography>
-        <Typography sx={{ fontSize: '1.6rem', fontWeight: 300, mt: 0.5, opacity: 0.85 }}>°{unit}</Typography>
-      </Box>
-      {(props.high != null || props.low != null) && (
-        <Box sx={{ display: 'flex', gap: 1.5, mt: 1 }}>
-          {props.high != null && (
-            <Typography sx={{ fontSize: '0.9rem', fontWeight: 600 }}>
-              <Box component="span" sx={{ opacity: 0.6, fontWeight: 400 }}>H </Box>{Math.round(props.high)}°
-            </Typography>
-          )}
-          {props.low != null && (
-            <Typography sx={{ fontSize: '0.9rem', fontWeight: 600 }}>
-              <Box component="span" sx={{ opacity: 0.6, fontWeight: 400 }}>L </Box>{Math.round(props.low)}°
-            </Typography>
-          )}
-        </Box>
-      )}
-      {props.forecast && props.forecast.length > 0 && (
-        <Box
-          sx={{
-            display: 'flex',
-            mt: 2.5,
-            borderRadius: '12px',
-            background: 'rgba(255,255,255,0.14)',
-            backdropFilter: 'blur(6px)',
-            WebkitBackdropFilter: 'blur(6px)',
-            px: 1,
-            py: 1.25,
-          }}
-        >
-          {props.forecast.slice(0, 5).map((d, i) => (
-            <Box key={`${d.day}-${i}`} sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5 }}>
-              <Typography sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', opacity: 0.85 }}>
-                {d.day}
-              </Typography>
-              {conditionIcon(d.condition, 16)}
-              <Typography sx={{ fontSize: '0.82rem', fontWeight: 700 }}>{Math.round(d.high)}°</Typography>
-              {d.low != null && (
-                <Typography sx={{ fontSize: '0.72rem', opacity: 0.6 }}>{Math.round(d.low)}°</Typography>
-              )}
-            </Box>
-          ))}
-        </Box>
-      )}
-    </Box>
+    <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`} style={{ width: 320 }}>
+      <AnimatedWeatherWidget
+        version="3.1"
+        id={`weather-${props.location}`}
+        location={{ name: props.location }}
+        units={{ temperature: props.unit === 'C' ? 'celsius' : 'fahrenheit' }}
+        current={{
+          conditionCode: toConditionCode(props.condition),
+          temperature: Math.round(props.temp),
+          tempMin: Math.round(props.low ?? props.temp - 4),
+          tempMax: Math.round(props.high ?? props.temp + 4),
+        }}
+        forecast={forecast}
+        time={{ localTimeOfDay: new Date().getHours() + new Date().getMinutes() / 60 }}
+        effects={{ enabled: true, quality: 'auto' }}
+      />
+    </div>
   );
 }
 
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
index 1238bcb1..c9a7d035 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
@@ -3,100 +3,169 @@ import Box from '@mui/material/Box';
 import { useThemeMode } from '@/shared/styles/ThemeContext';
 
 /**
- * Monterey-style layered wave wallpaper for the desktop-shell canvas. Pure SVG so it ships with
- * the bundle, scales to any viewport, and stays crisp; sits under the wash/grain/dot-grid layers.
+ * Monterey-style layered-ridge wallpaper. Design rules: scenery not signal (long smooth ridges,
+ * luminance ramps pale sky -> deep indigo so glass chrome always has contrast), depth via aerial
+ * perspective (far ridges blurred + desaturated, near ridges sharp with a lit crest), and life via
+ * ONE imperceptible compositor-only drift (120s, transform-only, off under reduced-motion).
  */
 function DesktopWallpaper(): React.ReactElement {
   const { mode } = useThemeMode();
   return (
     <Box
       aria-hidden
-      sx={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        overflow: 'hidden',
+        '& .osw-wp-drift': {
+          animation: 'osw-wp-drift 120s ease-in-out infinite alternate',
+          willChange: 'transform',
+        },
+        '& .osw-wp-drift-far': {
+          animation: 'osw-wp-drift-far 160s ease-in-out infinite alternate',
+          willChange: 'transform',
+        },
+        '@keyframes osw-wp-drift': {
+          from: { transform: 'translateX(0px)' },
+          to: { transform: 'translateX(-28px)' },
+        },
+        '@keyframes osw-wp-drift-far': {
+          from: { transform: 'translateX(0px)' },
+          to: { transform: 'translateX(18px)' },
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+          '& .osw-wp-drift, & .osw-wp-drift-far': { animation: 'none' },
+        },
+      }}
     >
       <svg
         width="100%"
         height="100%"
         viewBox="0 0 1600 1000"
         preserveAspectRatio="xMidYMid slice"
-        style={{ position: 'absolute', inset: 0, display: 'block' }}
+        style={{ position: 'absolute', inset: '-2%', width: '104%', height: '104%', display: 'block' }}
       >
         <defs>
           <linearGradient id="osw-wp-sky" x1="0.5" y1="0" x2="0.5" y2="1">
-            <stop offset="0" stopColor="#d6d3e4" />
-            <stop offset="0.55" stopColor="#c39bc6" />
-            <stop offset="1" stopColor="#b06ab8" />
+            <stop offset="0" stopColor="#dcd9e8" />
+            <stop offset="0.45" stopColor="#c8b2d4" />
+            <stop offset="1" stopColor="#b490c4" />
           </linearGradient>
-          <linearGradient id="osw-wp-pinkridge" x1="0" y1="0" x2="0.6" y2="1">
-            <stop offset="0" stopColor="#e4a9c6" />
-            <stop offset="0.5" stopColor="#cb9bbf" />
-            <stop offset="1" stopColor="#bd5f92" />
-          </linearGradient>
-          <linearGradient id="osw-wp-redridge" x1="0.2" y1="0" x2="0.7" y2="1">
-            <stop offset="0" stopColor="#e2547e" />
-            <stop offset="0.55" stopColor="#c33f92" />
+          <linearGradient id="osw-wp-redridge" x1="0.15" y1="0" x2="0.6" y2="1">
+            <stop offset="0" stopColor="#e0517c" />
+            <stop offset="0.5" stopColor="#c33f92" />
             <stop offset="1" stopColor="#a5349b" />
           </linearGradient>
-          <linearGradient id="osw-wp-purple" x1="0.1" y1="0.2" x2="0.8" y2="1">
-            <stop offset="0" stopColor="#9a3bbc" />
-            <stop offset="0.6" stopColor="#7726b8" />
-            <stop offset="1" stopColor="#641dab" />
+          <linearGradient id="osw-wp-pink" x1="0.3" y1="0" x2="0.7" y2="1">
+            <stop offset="0" stopColor="#e7b3cd" />
+            <stop offset="0.55" stopColor="#cb8fb8" />
+            <stop offset="1" stopColor="#bd5f92" />
           </linearGradient>
-          <linearGradient id="osw-wp-indigo" x1="0.15" y1="0" x2="0.75" y2="1">
-            <stop offset="0" stopColor="#6716d5" />
-            <stop offset="0.65" stopColor="#3b1a9e" />
-            <stop offset="1" stopColor="#271581" />
+          <linearGradient id="osw-wp-magenta" x1="0.2" y1="0" x2="0.7" y2="1">
+            <stop offset="0" stopColor="#c14fb4" />
+            <stop offset="1" stopColor="#96319b" />
           </linearGradient>
-          <linearGradient id="osw-wp-violetcrest" x1="0" y1="0" x2="1" y2="0.8">
-            <stop offset="0" stopColor="#8f35e0" />
+          <linearGradient id="osw-wp-purple" x1="0.1" y1="0.1" x2="0.7" y2="1">
+            <stop offset="0" stopColor="#8f35c9" />
+            <stop offset="0.6" stopColor="#7326b8" />
+            <stop offset="1" stopColor="#5c1da6" />
+          </linearGradient>
+          <linearGradient id="osw-wp-violet" x1="0" y1="0" x2="0.9" y2="0.9">
+            <stop offset="0" stopColor="#8d33dd" />
             <stop offset="1" stopColor="#6716d5" />
           </linearGradient>
-          <filter id="osw-wp-soft" x="-10%" y="-10%" width="120%" height="120%">
-            <feGaussianBlur stdDeviation="7" />
+          <linearGradient id="osw-wp-indigo" x1="0.2" y1="0" x2="0.8" y2="1">
+            <stop offset="0" stopColor="#5b21c9" />
+            <stop offset="0.6" stopColor="#3b1a9e" />
+            <stop offset="1" stopColor="#271581" />
+          </linearGradient>
+          <linearGradient id="osw-wp-crest" x1="0.5" y1="0" x2="0.5" y2="1">
+            <stop offset="0" stopColor="#ffffff" stopOpacity="0.55" />
+            <stop offset="1" stopColor="#ffffff" stopOpacity="0" />
+          </linearGradient>
+          <filter id="osw-wp-far" x="-10%" y="-10%" width="120%" height="120%">
+            <feGaussianBlur stdDeviation="9" />
+          </filter>
+          <filter id="osw-wp-mid" x="-10%" y="-10%" width="120%" height="120%">
+            <feGaussianBlur stdDeviation="3" />
           </filter>
         </defs>
 
-        <rect width="1600" height="1000" fill="url(#osw-wp-sky)" />
+        <rect x="-40" y="-20" width="1680" height="1040" fill="url(#osw-wp-sky)" />
 
-        {/* Far pink ridge sweeping the right half */}
-        <path
-          d="M820,0 C980,260 1120,380 1320,330 C1450,296 1540,220 1600,150 L1600,1000 L820,1000 Z"
-          fill="url(#osw-wp-pinkridge)"
-          filter="url(#osw-wp-soft)"
-          opacity="0.9"
-        />
+        {/* Far layer: soft pink billow owning the right half + red-magenta ridge from the top-left. Blurred + gentle = aerial distance. */}
+        <g className="osw-wp-drift-far">
+          <path
+            d="M700,40 C900,180 1010,330 1230,360 C1400,382 1520,300 1620,190 L1620,1020 L700,1020 Z"
+            fill="url(#osw-wp-pink)"
+            filter="url(#osw-wp-far)"
+            opacity="0.9"
+          />
+          <path
+            d="M-20,-20 L520,-20 C470,140 500,300 640,440 C480,610 220,600 -20,680 Z"
+            fill="url(#osw-wp-redridge)"
+            filter="url(#osw-wp-mid)"
+            opacity="0.95"
+          />
+        </g>
 
-        {/* Red-magenta ridge descending from the top-left */}
-        <path
-          d="M0,0 L560,0 C480,150 520,300 660,470 C540,650 300,640 0,720 Z"
-          fill="url(#osw-wp-redridge)"
-        />
+        {/* Mid layer: the magenta band bridging the composition. */}
+        <g className="osw-wp-drift">
+          <path
+            d="M-20,600 C280,470 560,540 840,640 C1090,728 1360,700 1620,580 L1620,1020 L-20,1020 Z"
+            fill="url(#osw-wp-magenta)"
+            filter="url(#osw-wp-mid)"
+            opacity="0.9"
+          />
+          <path
+            d="M-20,596 C280,466 560,536 840,636"
+            fill="none"
+            stroke="url(#osw-wp-crest)"
+            strokeWidth="5"
+            opacity="0.35"
+          />
 
-        {/* Mid magenta band bridging center */}
-        <path
-          d="M0,560 C340,430 620,520 900,660 C1120,770 1380,720 1600,600 L1600,1000 L0,1000 Z"
-          fill="#ab37ad"
-          opacity="0.85"
-          filter="url(#osw-wp-soft)"
-        />
+          {/* Deep purple shoulder anchoring the bottom-left. */}
+          <path
+            d="M-20,560 C220,520 420,600 580,760 C420,900 180,880 -20,910 Z"
+            fill="url(#osw-wp-purple)"
+          />
+          <path
+            d="M-20,558 C220,518 420,598 578,756"
+            fill="none"
+            stroke="url(#osw-wp-crest)"
+            strokeWidth="4"
+            opacity="0.3"
+          />
+        </g>
 
-        {/* Deep purple shoulder, left */}
-        <path
-          d="M0,520 C260,470 470,560 640,740 C460,900 200,850 0,880 Z"
-          fill="url(#osw-wp-purple)"
-        />
-
-        {/* Violet crest above the foreground wave */}
-        <path
-          d="M0,830 C360,680 760,850 1060,780 C1280,730 1460,800 1600,740 L1600,1000 L0,1000 Z"
-          fill="url(#osw-wp-violetcrest)"
-          opacity="0.92"
-        />
-
-        {/* Foreground indigo wave */}
-        <path
-          d="M0,880 C320,760 720,910 1020,850 C1260,802 1470,880 1600,830 L1600,1000 L0,1000 Z"
-          fill="url(#osw-wp-indigo)"
-        />
+        {/* Near layer: violet crest + indigo foreground wave, sharpest, with lit crests. */}
+        <g>
+          <path
+            d="M-20,820 C320,690 700,830 1010,772 C1260,726 1450,790 1620,720 L1620,1020 L-20,1020 Z"
+            fill="url(#osw-wp-violet)"
+            opacity="0.95"
+          />
+          <path
+            d="M-20,816 C320,686 700,826 1010,768 C1260,722 1450,786 1620,716"
+            fill="none"
+            stroke="url(#osw-wp-crest)"
+            strokeWidth="4"
+            opacity="0.4"
+          />
+          <path
+            d="M-20,882 C300,780 680,912 1000,856 C1260,810 1470,890 1620,834 L1620,1020 L-20,1020 Z"
+            fill="url(#osw-wp-indigo)"
+          />
+          <path
+            d="M-20,878 C300,776 680,908 1000,852 C1260,806 1470,886 1620,830"
+            fill="none"
+            stroke="url(#osw-wp-crest)"
+            strokeWidth="3"
+            opacity="0.35"
+          />
+        </g>
       </svg>
       {mode === 'dark' && (
         <Box sx={{ position: 'absolute', inset: 0, background: 'rgba(12,6,24,0.38)' }} />

From cc36847b9d9bc5c492ae5e4c4b4b2c7656d9fbf3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 23:50:16 -0700
Subject: [PATCH 089/248] [eric] onboarding+chrome: clear pill/tool labels
 (keep thinking-bubble whimsy), parallel reveal launches, overlay sidebar hugs
 window edges

---
 .../src/app/components/Layout/AppShell.tsx    | 10 ++++--
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 31 +++++--------------
 .../src/app/pages/AgentChat/AgentChat.tsx     | 18 +++--------
 .../app/pages/AgentChat/parsing/toolLabels.ts | 28 +++++------------
 4 files changed, 25 insertions(+), 62 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index b32b6e52..211ddb74 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -853,9 +853,13 @@ const AppShell: React.FC = () => {
           // Zen/Arc compact mode: a detached, rounded panel that SLIDES in and out from the left edge
           // (sidePeek drives the transform both ways; it stays mounted so leaving glides it away, not vanish).
           ...(sideOverlay ? {
-            position: 'fixed', top: 10, left: 10, bottom: 10, zIndex: 1000002,
-            borderRadius: '14px', overflow: 'hidden',
-            boxShadow: '0 16px 48px rgba(0,0,0,0.34)', border: `1px solid ${c.border.medium}`,
+            // Hug the window's top/left/bottom edges (same footprint as the docked sidebar) so the
+            // dashboard's corner tint can't peek in the margins; only the dashboard-facing right corners
+            // stay rounded. The OS clips the square outer corners to the window's own rounding, so the
+            // window edge (the "last border") stays intact.
+            position: 'fixed', top: 0, left: 0, bottom: 0, zIndex: 1000002,
+            borderRadius: '0 14px 14px 0', overflow: 'hidden',
+            boxShadow: '8px 0 32px rgba(0,0,0,0.28)', borderRight: `1px solid ${c.border.medium}`,
             transform: sidePeek ? 'translateX(0)' : 'translateX(-118%)',
             transition: 'transform 240ms cubic-bezier(0.22,1,0.36,1)',
             pointerEvents: sidePeek ? 'auto' : 'none',
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 5edc2c0c..5c8139a9 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -34,11 +34,6 @@ function cadenceToSchedule(cadence: string): Record<string, unknown> {
   return { ...base, repeat_unit: 'week', on_days: [1] };
 }
 
-// Gap between the demo launches. Right after connect the provider's OAuth token can still be mid-refresh,
-// and four simultaneous cold turns raced that refresh and all "hit a snag"; the first launch warms the
-// token, the rest ride it warm. Fires during the curtain beats, so the lead time is hidden.
-const LAUNCH_STAGGER_MS = 1200;
-
 // How long finish() will wait for prep before staging the reveal. Prep is kicked early (theme beat) so it
 // has usually resolved; this only bites a user who outran it, and a brief wait for a COHERENT reveal beats
 // an instant one showing a previous run's stale greeting. Capped so it's never an open-ended spinner.
@@ -153,28 +148,16 @@ export function useOnboardingV3Pipeline() {
       if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
       launchedRef.current = true;
       // The four auto-run showcase jobs, one per capability: build an app, dig the web, drive a real
-      // browser, and set up a scheduled task. The lame file-audit is gone; the browser task shows the
-      // agent controlling a real site live. Fired STAGGERED so the first turn warms the just-connected
-      // provider token before the rest hit it (see LAUNCH_STAGGER_MS).
-      const launches: Array<() => void> = [];
-      if (prep.app_title && prep.app_prompt) {
-        const t = prep.app_title, p = prep.app_prompt, r = prep.app_reason ?? '';
-        launches.push(() => launchJob(t, p, 'app', r));
-      }
-      if (prep.research_title && prep.research_prompt) {
-        const t = prep.research_title, p = prep.research_prompt, r = prep.research_reason ?? '';
-        launches.push(() => launchJob(t, p, 'research', r));
-      }
-      if (prep.browser_title && prep.browser_prompt) {
-        const t = prep.browser_title, p = prep.browser_prompt, r = prep.browser_reason ?? '';
-        launches.push(() => launchJob(t, p, 'browser', r));
-      }
+      // browser, and set up a scheduled task. Each fires INDEPENDENTLY (own draft session, own async
+      // launch, own error handling), so none waits on another and one failing never blocks the rest; a
+      // real first-run's provider token is fresh (just connected), so parallel launch is safe.
+      if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app', prep.app_reason ?? '');
+      if (prep.research_title && prep.research_prompt) launchJob(prep.research_title, prep.research_prompt, 'research', prep.research_reason ?? '');
+      if (prep.browser_title && prep.browser_prompt) launchJob(prep.browser_title, prep.browser_prompt, 'browser', prep.browser_reason ?? '');
       // The scheduled task is a first-class part of the reveal (the "it automates for me" capability), so
       // guarantee one: use the model's automation when it emitted one (it sometimes drops the last JSON
       // field), else fall back to a safe, universally-useful weekly roundup.
-      const auto = prep.automations[0] ?? SCHEDULE_FALLBACK;
-      launches.push(() => createScheduledJob(auto));
-      launches.forEach((fn, idx) => { if (idx === 0) fn(); else window.setTimeout(fn, idx * LAUNCH_STAGGER_MS); });
+      createScheduledJob(prep.automations[0] ?? SCHEDULE_FALLBACK);
     });
   }, [launchJob, createScheduledJob]);
 
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index a04f548c..de84e70d 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -155,22 +155,13 @@ const thinkingShimmerKeyframes = `
 }
 `;
 
-// Pick a label deterministically per session-turn so the pill has variety without flickering between renders. Shared list with MessageBubble.
-function streamingLabelFor(seedKey: string | undefined): string {
-  if (!seedKey) return THINKING_LABELS[0].live;
-  let h = 0;
-  for (let i = 0; i < seedKey.length; i++) {
-    h = ((h << 5) - h + seedKey.charCodeAt(i)) | 0;
-  }
-  return THINKING_LABELS[Math.abs(h) % THINKING_LABELS.length].live;
-}
-
-const ThinkingBubble: React.FC<{ label?: string | null; seedKey?: string }> = ({ label, seedKey }) => {
+const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
   const c = useClaudeTokens();
   const shimmerBase = c.text.tertiary;
   const shimmerHighlight = c.text.primary;
-  // Aux-LLM label wins; otherwise pick a quirky verb keyed off seedKey so different sessions / turns show different verbs without flicker.
-  const display = label ? `${label}…` : `${streamingLabelFor(seedKey)}…`;
+  // Aux-LLM label wins; otherwise the pill stays plain "Thinking". The whimsical verbs read as personality
+  // in the per-message thinking bubble (MessageBubble), but as a vague, confusing status on a working card.
+  const display = label ? `${label}…` : `${THINKING_LABELS[0].live}…`;
   return (
     <Box sx={{ display: 'flex', justifyContent: 'flex-start', my: 0.75 }}>
       <style>{thinkingShimmerKeyframes}</style>
@@ -1779,7 +1770,6 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               <Box sx={{ overflowAnchor: 'none' }}>
                 <ThinkingBubble
                   label={preSendActivityLabel || session.turn_label?.label}
-                  seedKey={`${session.id}:${session.messages?.length ?? 0}`}
                 />
               </Box>
             )}
diff --git a/frontend/src/app/pages/AgentChat/parsing/toolLabels.ts b/frontend/src/app/pages/AgentChat/parsing/toolLabels.ts
index 720dfd60..a28b7ca2 100644
--- a/frontend/src/app/pages/AgentChat/parsing/toolLabels.ts
+++ b/frontend/src/app/pages/AgentChat/parsing/toolLabels.ts
@@ -3,18 +3,12 @@ export interface ToolLabel {
   past: string;
 }
 
-// djb2 hash; same seed always picks the same variant so rows don't flicker.
-function _stableIndex(seed: string | undefined, n: number): number {
-  if (n <= 1 || !seed) return 0;
-  let h = 5381;
-  for (let i = 0; i < seed.length; i++) {
-    h = ((h << 5) + h + seed.charCodeAt(i)) | 0;
-  }
-  return Math.abs(h) % n;
-}
-
+// The clearest label of each verb pool. We used to seed-pick a random synonym for personality, but the
+// whimsical spread ("Rummaging the toolbox", "Eyeballing") read as vague status noise on a working card;
+// that variety lives on in the per-message thinking bubble instead. Index 0 is the plain literal by design.
 function _pick<T>(variants: T[], seed?: string): T {
-  return variants[_stableIndex(seed, variants.length)];
+  void seed;
+  return variants[0];
 }
 
 // Index 0 is the safe default; single-entry pools mean no seeded variation.
@@ -142,17 +136,10 @@ const VARIANTS: Record<string, ToolLabel[]> = {
     { present: 'Pulling up the task', past: 'Pulled up the task' },
   ],
   toolsearch: [
-    { present: 'Looking through the toolbox', past: 'Looked through the toolbox' },
-    { present: 'Hunting for the right tool', past: 'Found a tool' },
-    { present: 'Browsing the toolbox', past: 'Browsed the toolbox' },
-    { present: 'Rummaging the toolbox', past: 'Rummaged the toolbox' },
-    { present: 'Digging through the toolbox', past: 'Dug through the toolbox' },
+    { present: 'Finding the right tool', past: 'Found the right tool' },
   ],
   mcpsearch: [
-    { present: 'Looking through the toolbox', past: 'Looked through the toolbox' },
-    { present: 'Hunting for the right tool', past: 'Found a tool' },
-    { present: 'Browsing the toolbox', past: 'Browsed the toolbox' },
-    { present: 'Rummaging the toolbox', past: 'Rummaged the toolbox' },
+    { present: 'Finding the right tool', past: 'Found the right tool' },
   ],
   // getToolLabelWithInput has the brand-aware version; this is the seedless fallback.
   mcpactivate: [
@@ -164,7 +151,6 @@ const VARIANTS: Record<string, ToolLabel[]> = {
   ],
   mcplist: [
     { present: 'Listing tools', past: 'Listed tools' },
-    { present: 'Browsing the toolbox', past: 'Browsed the toolbox' },
   ],
   settingsread: [
     { present: 'Checking your settings', past: 'Checked your settings' },

From b5b8c5cb4af512eda5aa58c667c7b8339014b54e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 19 Jul 2026 23:52:31 -0700
Subject: [PATCH 090/248] [eric] agents: AskUserQuestion swaps to AskUI when
 openswarm-ui is live (nudges lost to the trained prior; live-proven haiku
 turn) + lenient unknown-key strip before strict zod fallback

---
 .../permissions/build_effective_tool_lists.py |  8 ++++
 .../prompt/compose_turn_system_prompt.py      |  4 +-
 frontend/src/toolui/VendoredToolUi.tsx        | 46 ++++++++++++-------
 3 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
index 0fa88449..7548768a 100644
--- a/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
+++ b/backend/apps/agents/manager/permissions/build_effective_tool_lists.py
@@ -122,6 +122,14 @@ def build_effective_tool_lists(
         for wt_name in ("WebSearch", "WebFetch"):
             if wt_name not in effective_disallowed:
                 effective_disallowed.append(wt_name)
+    # With the openswarm-ui server live, the built-in AskUserQuestion is swapped for AskUI (same
+    # Agent->SpawnAgent playbook: prompt nudges lose to the trained prior, a hard deny doesn't).
+    # AskUI's option-list/question-flow cover the flat-choice cases; denying the built-in is what
+    # actually routes questions through the rich components.
+    if "openswarm-ui" in mcp_servers:
+        effective_allowed = [t for t in effective_allowed if t != "AskUserQuestion"]
+        if "AskUserQuestion" not in effective_disallowed:
+            effective_disallowed.append("AskUserQuestion")
     # Claude's internal Cron* scheduler is denied in favour of the visible native one; withhold it from the SDK so the model doesn't even reach for it.
     for bt in path_gate.CLAUDE_INTERNAL_SCHEDULER_TOOLS:
         if bt not in effective_disallowed:
diff --git a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
index 5e04fde1..6e32f088 100644
--- a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
+++ b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
@@ -100,7 +100,9 @@ def compose_turn_system_prompt(
                 "- ShowUI for any structured result: tables, stats, links, plans, progress, code, diffs, "
                 "charts, maps, media, posts, receipts. Render the component, then add one line of text.\n"
                 "- AskUI for ANY question with enumerable choices, an approval, or tunable values: render "
-                "it and wait for the answer instead of asking in prose.\n"
+                "it and wait for the answer instead of asking in prose. When you would reach for "
+                "AskUserQuestion and the choices are a flat list, call AskUI with an option-list instead; "
+                "keep AskUserQuestion only for multi-question forms.\n"
                 "Describing structured data in plain text when a component fits is the worse answer.\n"
                 "</rich_ui>"
             )
diff --git a/frontend/src/toolui/VendoredToolUi.tsx b/frontend/src/toolui/VendoredToolUi.tsx
index 6f9fea0b..7cc5ff04 100644
--- a/frontend/src/toolui/VendoredToolUi.tsx
+++ b/frontend/src/toolui/VendoredToolUi.tsx
@@ -9,14 +9,35 @@ interface VendoredToolUiProps {
   extraProps?: Record<string, unknown>;
 }
 
-type Gate = 'pending' | 'ok' | 'bad';
+type Gate =
+  | { state: 'pending' }
+  | { state: 'ok'; parsed: Record<string, unknown> }
+  | { state: 'bad'; problem: string };
+
+/** Models pad payloads with invented keys; strip ONLY unrecognized-key issues and retry once, so
+    sloppiness self-heals while genuinely wrong shapes still fall back loudly. */
+function parseLeniently(schema: { safeParse: (v: unknown) => any }, props: Record<string, unknown>): Gate {
+  let result = schema.safeParse(props);
+  if (!result.success) {
+    const issues: Array<{ code: string; keys?: string[]; path: Array<string | number>; message: string }> = result.error.issues;
+    if (issues.every((i) => i.code === 'unrecognized_keys')) {
+      const cleaned: Record<string, unknown> = { ...props };
+      for (const issue of issues) {
+        for (const key of issue.keys || []) delete cleaned[key];
+      }
+      result = schema.safeParse(cleaned);
+    }
+  }
+  if (result.success) return { state: 'ok', parsed: result.data as Record<string, unknown> };
+  const issues = result.error.issues.slice(0, 2).map((i: { path: Array<string | number>; message: string }) => `${i.path.join('.')}: ${i.message}`).join('; ');
+  return { state: 'bad', problem: issues };
+}
 
 /** Validates against the upstream zod contract, then renders the vendored component inside the scoped theme. */
 function VendoredToolUi({ name, props, extraProps }: VendoredToolUiProps): React.ReactElement | null {
   const { mode } = useThemeMode();
   const entry = TOOL_UI_REGISTRY[name];
-  const [gate, setGate] = useState<Gate>('pending');
-  const [problem, setProblem] = useState<string>('');
+  const [gate, setGate] = useState<Gate>({ state: 'pending' });
 
   useEffect(() => {
     let cancelled = false;
@@ -24,35 +45,28 @@ function VendoredToolUi({ name, props, extraProps }: VendoredToolUiProps): React
     entry
       .loadSchema()
       .then((schema) => {
-        if (cancelled) return;
-        const result = schema.safeParse(props);
-        if (result.success) {
-          setGate('ok');
-        } else {
-          setGate('bad');
-          setProblem(result.error.issues.slice(0, 2).map((i) => `${i.path.join('.')}: ${i.message}`).join('; '));
-        }
+        if (!cancelled) setGate(parseLeniently(schema, props));
       })
-      .catch(() => { if (!cancelled) { setGate('bad'); setProblem('component failed to load'); } });
+      .catch(() => { if (!cancelled) setGate({ state: 'bad', problem: 'component failed to load' }); });
     return () => { cancelled = true; };
   }, [entry, props]);
 
   if (!entry) return null;
-  if (gate === 'bad') {
+  if (gate.state === 'bad') {
     return (
       <div style={{ fontSize: '0.75rem', opacity: 0.55, padding: '4px 0' }}>
-        {name} payload didn't validate ({problem})
+        {name} payload didn't validate ({gate.problem})
       </div>
     );
   }
-  if (gate === 'pending') {
+  if (gate.state === 'pending') {
     return <div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />;
   }
   const Component = entry.Component;
   return (
     <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`}>
       <Suspense fallback={<div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />}>
-        <Component {...props} {...(extraProps || {})} />
+        <Component {...gate.parsed} {...(extraProps || {})} />
       </Suspense>
     </div>
   );

From 631978471780d3bfc1c3e08dc94ac62a8aa50633 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 10:12:21 -0700
Subject: [PATCH 091/248] [eric] chat: AskUI free-text input restores the
 'Other' escape hatch (action free_text)

---
 .../prompt/compose_turn_system_prompt.py      |  6 +-
 backend/apps/agents/show_ui_mcp_server.py     |  4 +-
 .../pages/AgentChat/tool-ui/AskUiBubble.tsx   | 58 ++++++++++++++++++-
 3 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
index 6e32f088..7f02b5db 100644
--- a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
+++ b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
@@ -100,9 +100,9 @@ def compose_turn_system_prompt(
                 "- ShowUI for any structured result: tables, stats, links, plans, progress, code, diffs, "
                 "charts, maps, media, posts, receipts. Render the component, then add one line of text.\n"
                 "- AskUI for ANY question with enumerable choices, an approval, or tunable values: render "
-                "it and wait for the answer instead of asking in prose. When you would reach for "
-                "AskUserQuestion and the choices are a flat list, call AskUI with an option-list instead; "
-                "keep AskUserQuestion only for multi-question forms.\n"
+                "it and wait for the answer instead of asking in prose. Flat choices = option-list; a "
+                "multi-question form = one AskUI call per question in sequence. The user can always "
+                "answer off-list in free text (result action 'free_text').\n"
                 "Describing structured data in plain text when a component fits is the worse answer.\n"
                 "</rich_ui>"
             )
diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
index cdf22bf9..261cebbe 100644
--- a/backend/apps/agents/show_ui_mcp_server.py
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -67,7 +67,9 @@ TOOLS = [
             "when the choice fits a component. Components: "
             + ", ".join(f"'{name}'" for name in INTERACTIVE_COMPONENTS)
             + ". Props follow the same shapes as ShowUI (props.id is REQUIRED, it correlates the "
-            "answer). The response contains the action taken and the user's selection/values."
+            "answer). The response contains the action taken and the user's selection/values. "
+            "The user may also answer in their own words instead of picking an option; then the "
+            "result is {action: 'free_text', value: {text}}, treat that text as their answer."
         ),
         "inputSchema": {
             "type": "object",
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
index f30063a1..ff3fa3ee 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
@@ -1,11 +1,17 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
+import InputBase from '@mui/material/InputBase';
+import IconButton from '@mui/material/IconButton';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
 import ToolCallBubble from '../tool-bubbles/ToolCallBubble';
 import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
 import { parseShowUiPayload } from './showUiPayload';
 import VendoredToolUi from '@toolui/VendoredToolUi';
 import { API_BASE, getAuthToken } from '@/shared/config';
 
+// The choice components that replaced AskUserQuestion, which always had an "Other" escape hatch.
+const FREE_TEXT_COMPONENTS = new Set(['option-list', 'question-flow']);
+
 interface AskUiBubbleProps {
   pair: ToolPair;
   sessionId: string;
@@ -30,7 +36,12 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
   const payload = parseShowUiPayload(pair);
   const [submitted, setSubmitted] = useState(false);
   const [orphaned, setOrphaned] = useState(false);
+  const [freeText, setFreeText] = useState('');
   const answered = parseResultResponse(pair);
+  const freeTextAnswer =
+    answered?.action === 'free_text' && answered.value && typeof answered.value === 'object'
+      ? String((answered.value as Record<string, unknown>).text ?? '')
+      : null;
 
   const componentId = payload && payload.component === 'vendored' ? String(payload.props.id || '') : '';
 
@@ -55,12 +66,13 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
     [submitted, sessionId, componentId],
   );
 
+  const waiting = pair.result === null && !submitted;
+
   // Their embedded-actions contract: onAction(actionId, state) delivers the component's full state,
   // and the components ship their own footer actions (Clear/Confirm), so we only wire the callback.
   // 'cancel' is a local clear, never an answer; approval-card uses onConfirm/onCancel instead.
   const extraProps = useMemo(() => {
     if (!payload || payload.component !== 'vendored') return {};
-    const waiting = pair.result === null && !submitted;
     if (payload.name === 'approval-card') {
       return waiting
         ? {
@@ -77,8 +89,16 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
         },
       };
     }
+    // A free-text answer isn't an option id; passing it as `choice` would fail their contract.
+    if (freeTextAnswer !== null) return {};
     return answered && 'value' in answered ? { choice: answered.value } : {};
-  }, [payload, pair.result, submitted, respond, answered]);
+  }, [payload, waiting, respond, answered, freeTextAnswer]);
+
+  const submitFreeText = useCallback(() => {
+    const text = freeText.trim();
+    if (!text) return;
+    respond({ action: 'free_text', value: { text } });
+  }, [freeText, respond]);
 
   if (!payload || payload.component !== 'vendored' || !componentId) {
     return (
@@ -89,6 +109,40 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
   return (
     <Box sx={{ my: 1, contain: 'layout style' }} data-select-type="tool-ui-ask" data-select-id={pair.id} data-select-meta={JSON.stringify({ component: payload.name })}>
       <VendoredToolUi name={payload.name} props={payload.props} extraProps={extraProps} />
+      {waiting && FREE_TEXT_COMPONENTS.has(payload.name) && (
+        <Box
+          component="form"
+          onSubmit={(e: React.FormEvent) => { e.preventDefault(); submitFreeText(); }}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            mt: 0.75,
+            px: 1.25,
+            py: 0.25,
+            borderRadius: 999,
+            background: 'rgba(127,127,127,0.08)',
+            border: '1px solid rgba(127,127,127,0.14)',
+            maxWidth: 420,
+          }}
+        >
+          <InputBase
+            value={freeText}
+            onChange={(e) => setFreeText(e.target.value)}
+            placeholder="Or type your own answer..."
+            inputProps={{ 'aria-label': 'Type your own answer' }}
+            sx={{ flex: 1, fontSize: '0.8rem' }}
+          />
+          <IconButton type="submit" size="small" disabled={!freeText.trim()} aria-label="Send answer">
+            <ArrowUpwardRoundedIcon sx={{ fontSize: 16 }} />
+          </IconButton>
+        </Box>
+      )}
+      {freeTextAnswer !== null && (
+        <Box sx={{ fontSize: '0.78rem', opacity: 0.75, pt: 0.75 }}>
+          &#10003; Answered: {freeTextAnswer}
+        </Box>
+      )}
       {submitted && pair.result === null && (
         <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
       )}

From f2bc65b204c4a26d122783c73b43826af5e37f0c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 13:23:05 -0700
Subject: [PATCH 092/248] [eric] agents: web results carry a render-with-ShowUI
 reminder when openswarm-ui is live (system-prompt nudge alone loses to the
 prose prior; live-proven haiku weather widget)

---
 backend/apps/agents/manager/run/RunOptions.py       |  7 ++++++-
 .../apps/agents/manager/run/run_options_helpers.py  |  3 ++-
 backend/apps/agents/web_mcp_server.py               | 13 +++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/backend/apps/agents/manager/run/RunOptions.py b/backend/apps/agents/manager/run/RunOptions.py
index e58e72e8..08ce61d5 100644
--- a/backend/apps/agents/manager/run/RunOptions.py
+++ b/backend/apps/agents/manager/run/RunOptions.py
@@ -133,7 +133,12 @@ class RunOptions(AgentManagerProtocol):
         )
         if need_web_mcp:
             # browser_ok gates the search-dead fallback nudge: never tell the model to call CreateBrowserAgent in a session where browser delegation is denied.
-            register_web_mcp_server(mcp_servers, p_m, browser_ok=bool(browser_delegation_tools))
+            # rich_ui_ok plants the render-as-component reminder inside web results: the system-prompt nudge alone loses to the prose prior (live-proven on haiku).
+            register_web_mcp_server(
+                mcp_servers, p_m,
+                browser_ok=bool(browser_delegation_tools),
+                rich_ui_ok="openswarm-ui" in mcp_servers,
+            )
 
         effective_allowed, effective_disallowed = build_effective_tool_lists(
             session, mcp_servers, builtin_perms, need_web_mcp,
diff --git a/backend/apps/agents/manager/run/run_options_helpers.py b/backend/apps/agents/manager/run/run_options_helpers.py
index a471a974..4ebadbe1 100644
--- a/backend/apps/agents/manager/run/run_options_helpers.py
+++ b/backend/apps/agents/manager/run/run_options_helpers.py
@@ -101,7 +101,7 @@ def set_framework_overhead(session: AgentSession, composed_prompt: Optional[str]
 
 
 @typechecked
-def register_web_mcp_server(mcp_servers: Dict, p_m: str, browser_ok: bool = False) -> None:
+def register_web_mcp_server(mcp_servers: Dict, p_m: str, browser_ok: bool = False, rich_ui_ok: bool = False) -> None:
     """Register the DDG-backed openswarm-web stdio MCP into the server set when the primary has no
     reliable native web path. The server script lives in the agents package (not here), so resolve
     it off that package dir, not __file__."""
@@ -125,6 +125,7 @@ def register_web_mcp_server(mcp_servers: Dict, p_m: str, browser_ok: bool = Fals
             "OPENSWARM_AUTH_TOKEN": p_get_auth_token3(),
             "OPENSWARM_PRIMARY_API": p_primary_hint,
             "OPENSWARM_BROWSER_OK": "1" if browser_ok else "0",
+            "OPENSWARM_RICH_UI_OK": "1" if rich_ui_ok else "0",
         },
         "type": "stdio",
     }
diff --git a/backend/apps/agents/web_mcp_server.py b/backend/apps/agents/web_mcp_server.py
index dada7086..973550ad 100755
--- a/backend/apps/agents/web_mcp_server.py
+++ b/backend/apps/agents/web_mcp_server.py
@@ -16,6 +16,15 @@ FETCH_URL = f"http://127.0.0.1:{BACKEND_PORT}/api/web/fetch"
 PRIMARY_HINT = os.environ.get("OPENSWARM_PRIMARY_API", "") or None
 # Whether this session actually has browser-delegation tools; gates the backend's "fall back to the browser" nudge.
 BROWSER_OK = os.environ.get("OPENSWARM_BROWSER_OK", "0") == "1"
+# Whether the openswarm-ui server is live this session. The render-as-component reminder rides the
+# tool RESULT because that's what the model reads right before answering; the system-prompt nudge
+# alone loses to the prose prior (live-proven on haiku).
+RICH_UI_OK = os.environ.get("OPENSWARM_RICH_UI_OK", "0") == "1"
+RICH_UI_HINT = (
+    "\n\n[presentation] When you answer the user with this data, render it with the ShowUI tool "
+    "(weather for forecasts, data-table for rows, stats-display for metrics, links for sources, "
+    "chart for series) and keep prose to one line. Answer in plain text only if no component fits."
+)
 
 TOOLS = [
     {
@@ -115,6 +124,8 @@ def handle_tool_call(tool_name: str, arguments: dict) -> dict:
         results = r.get("results", "")
         if not results:
             results = f"No results for: {query}"
+        elif RICH_UI_OK:
+            results += RICH_UI_HINT
         return {"content": [{"type": "text", "text": results}]}
 
     if tool_name == "WebFetch":
@@ -135,6 +146,8 @@ def handle_tool_call(tool_name: str, arguments: dict) -> dict:
         content = r.get("content", "")
         if not content:
             content = f"No content returned from {url}"
+        elif RICH_UI_OK:
+            content += RICH_UI_HINT
         return {"content": [{"type": "text", "text": content}]}
 
     return {"content": [{"type": "text", "text": f"Unknown tool: {tool_name}"}], "isError": True}

From 6f2bf7d5fbf40c30d38ea5379c6fedc52dcaf9ef Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 13:23:05 -0700
Subject: [PATCH 093/248] [eric] dashboard: failed layout fetch can never wipe
 the server layout (res.ok gate + saveArmed only after a successful load)

---
 frontend/src/shared/state/dashboardLayoutSlice.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index fed118c8..670e919b 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -152,6 +152,8 @@ export interface DashboardLayoutState {
   nextZOrder: number;
   loading: boolean;
   initialized: boolean;
+  /** True only after a SUCCESSFUL layout fetch for the current dashboard; saveLayout is a no-op until then (a failed boot fetch must never wipe the server layout). */
+  saveArmed: boolean;
   /** Transient: new browser card id; Dashboard pans/zooms to it then clears via clearPendingFocusBrowserId. */
   pendingFocusBrowserId: string | null;
   // Set when a view card is opened from outside the canvas (sidebar app click / toolbar picker) so the dashboard fits+highlights it on arrival; holds the card key.
@@ -203,6 +205,7 @@ const initialState: DashboardLayoutState = {
   nextZOrder: 1,
   loading: false,
   initialized: false,
+  saveArmed: false,
   pendingFocusBrowserId: null,
   pendingFocusViewCardId: null,
   pendingFocusNoteId: null,
@@ -237,6 +240,8 @@ export const fetchLayout = createAsyncThunk(
   // isReconnect distinguishes a socket-reconnect recovery refetch (merge, keep live positions) from a fresh mount/switch load (replace, snapshot is the user's saved layout). Passed explicitly, not inferred from state, so a stale in-flight fetch from a previous dashboard can't be misread as a merge.
   async ({ dashboardId }: { dashboardId: string; isReconnect?: boolean }) => {
     const res = await fetch(`${DASHBOARDS_API}/${dashboardId}`);
+    // A non-2xx body silently parsing to "no layout" is how a healthy dashboard gets wiped: the empty result gets marked initialized and the next debounced save persists it.
+    if (!res.ok) throw new Error(`layout fetch failed: ${res.status}`);
     const data = await res.json();
     const layout = data.layout ?? {};
     const browserCards = (layout.browser_cards ?? {}) as Record<string, any>;
@@ -271,7 +276,10 @@ interface SaveLayoutPayload extends LayoutPayload {
 
 export const saveLayout = createAsyncThunk(
   'dashboardLayout/save',
-  async (payload: SaveLayoutPayload) => {
+  async (payload: SaveLayoutPayload, { getState }) => {
+    // Never persist a layout this client never successfully loaded; a failed boot fetch otherwise saves the pristine empty store over the server's real layout (the wipe class).
+    const armed = (getState() as { dashboardLayout: { saveArmed: boolean } }).dashboardLayout.saveArmed;
+    if (!armed) return payload;
     await fetch(`${DASHBOARDS_API}/${payload.dashboardId}`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
@@ -1626,6 +1634,7 @@ const dashboardLayoutSlice = createSlice({
       state.persistedExpandedSessionIds = [];
       state.nextZOrder = 1;
       state.initialized = false;
+      state.saveArmed = false;
       state.pendingFocusNoteId = null;
       state.suspendedBrowserCards = keptSuspended;
       state.endingBrowserCards = {};
@@ -1643,6 +1652,7 @@ const dashboardLayoutSlice = createSlice({
         // A fresh mount/switch load replaces (the snapshot is the user's saved layout, authoritative). A reconnect refetch (useDashboardLifecycle line ~90) recovers cards lost in a socket gap and must MERGE, blind- replacing there clobbered the live, collision-placed positions of cards already on canvas (the overlap / vanish under load while many browsers spawn). The caller says which; never inferred from state.
         const isReconnectRefetch = action.meta.arg.isReconnect === true;
         state.initialized = true;
+        state.saveArmed = true;
         const ownerDashboardId = action.meta.arg.dashboardId;
         if (!isReconnectRefetch) {
           state.cards = action.payload.cards;
@@ -1701,6 +1711,7 @@ const dashboardLayoutSlice = createSlice({
       })
       .addCase(fetchLayout.rejected, (state) => {
         state.loading = false;
+        // Fail-open for RENDERING only; saveArmed stays false so this client can never persist the empty layout it booted with over the server's real one (the wipe that hit 2026-07-20).
         state.initialized = true;
       })
       .addCase(fetchSessionRejectedAction, (state, action) => {

From 2a015b83e1a31a6384adb14ccbda529ee7876f8e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 13:48:35 -0700
Subject: [PATCH 094/248] [eric] redesign: widget strip+scene fix,
 finished-turn tool fold, rest composer, pill hydration

---
 .../src/app/pages/AgentChat/AgentChat.tsx     | 81 ++++++++++++++++---
 .../src/app/pages/AgentChat/ChatInput.tsx     |  5 +-
 .../ChatInput/toolbar/ChatInputToolbar.tsx    | 23 +++---
 .../ChatInput/toolbar/ToolbarActions.tsx      |  5 +-
 .../ChatInput/view/ChatInputView.tsx          | 13 ++-
 .../tool-bubbles/ToolGroupBubble.tsx          | 46 ++++++++---
 .../pages/AgentChat/tool-ui/WeatherWidget.tsx | 10 ++-
 .../pages/AgentChat/tool-ui/showUiPayload.ts  |  7 +-
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 10 +++
 .../Dashboard/desktop/AgentNarratorPill.tsx   | 31 ++++++-
 10 files changed, 186 insertions(+), 45 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index b830a890..e866039f 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -57,7 +57,7 @@ import { estimateRenderedTextHeight, RECHECK_VISIBILITY_EVENT } from './bubbles/
 import CompactionMarker from './bubbles/CompactionMarker';
 import MessageActionBar from './shell/MessageActionBar';
 import ToolCallBubble, { ToolPair } from './tool-bubbles/ToolCallBubble';
-import ToolGroupBubble, { RenderItem, ToolGroup, isToolGroup, isToolPair } from './tool-bubbles/ToolGroupBubble';
+import ToolGroupBubble, { RenderItem, ToolGroup, ToolGroupEntry, isToolGroup, isToolPair } from './tool-bubbles/ToolGroupBubble';
 import ToolUiBubble from './tool-ui/ToolUiBubble';
 import AskUiBubble from './tool-ui/AskUiBubble';
 import { isShowUiPair, isAskUiPair } from './tool-ui/showUiPayload';
@@ -1058,17 +1058,40 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   const renderItems: RenderItem[] = useMemo(() => {
     const items: RenderItem[] = [];
     let i = 0;
+    // Narration that led INTO a tool phase; folds into that phase's group on a finished session.
+    let leadNotes: typeof activeBranchMessages = [];
     while (i < activeBranchMessages.length) {
       const msg = activeBranchMessages[i];
       if (msg.role === 'tool_call' || msg.role === 'tool_result') {
         const group: typeof activeBranchMessages = [];
-        while (
-          i < activeBranchMessages.length &&
-          (activeBranchMessages[i].role === 'tool_call' ||
-            activeBranchMessages[i].role === 'tool_result')
-        ) {
-          group.push(activeBranchMessages[i]);
-          i++;
+        // On a finished session the whole tool PHASE folds into one quiet row: short narration
+        // LEADING INTO or BETWEEN tool runs is absorbed (readable on expand), only the final
+        // answer stays out. While running, narration streams visibly, so the phase never folds live.
+        const noteMarks: Array<{ afterCall: number; msg: (typeof activeBranchMessages)[number] }> =
+          leadNotes.map((m) => ({ afterCall: 0, msg: m }));
+        leadNotes = [];
+        let callsSoFar = 0;
+        while (i < activeBranchMessages.length) {
+          const m = activeBranchMessages[i];
+          if (m.role === 'tool_call' || m.role === 'tool_result') {
+            group.push(m);
+            if (m.role === 'tool_call') callsSoFar++;
+            i++;
+            continue;
+          }
+          if (!sessionRunning && m.role === 'assistant') {
+            let j = i;
+            while (j < activeBranchMessages.length && activeBranchMessages[j].role === 'assistant') j++;
+            const next = activeBranchMessages[j];
+            if (next && (next.role === 'tool_call' || next.role === 'tool_result')) {
+              for (let k = i; k < j; k++) {
+                if (!activeBranchMessages[k].hidden) noteMarks.push({ afterCall: callsSoFar, msg: activeBranchMessages[k] });
+              }
+              i = j;
+              continue;
+            }
+          }
+          break;
         }
 
         const allCalls = group.filter((m) => m.role === 'tool_call');
@@ -1086,6 +1109,27 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
         const pairs = allPairs.filter((p) => !isShowUiPair(p) && !isAskUiPair(p));
         const calls = pairs.map((p) => p.call);
 
+        // Folded narration goes back at its original position among the visible pairs.
+        const groupEntries: ToolGroupEntry[] | undefined = (() => {
+          if (noteMarks.length === 0) return undefined;
+          const entries: ToolGroupEntry[] = [];
+          let noteIdx = 0;
+          const noteText = (m: (typeof activeBranchMessages)[number]) =>
+            typeof m.content === 'string' ? m.content : '';
+          allPairs.forEach((pair, idx) => {
+            while (noteIdx < noteMarks.length && noteMarks[noteIdx].afterCall <= idx) {
+              entries.push({ kind: 'note', id: `note-${noteMarks[noteIdx].msg.id}`, text: noteText(noteMarks[noteIdx].msg) });
+              noteIdx++;
+            }
+            if (!isShowUiPair(pair) && !isAskUiPair(pair)) entries.push({ kind: 'pair', pair });
+          });
+          while (noteIdx < noteMarks.length) {
+            entries.push({ kind: 'note', id: `note-${noteMarks[noteIdx].msg.id}`, text: noteText(noteMarks[noteIdx].msg) });
+            noteIdx++;
+          }
+          return entries;
+        })();
+
         const mcpServers = new Set(
           calls.map((m) => {
             const tool = typeof m.content === 'object' ? m.content.tool || '' : '';
@@ -1110,8 +1154,10 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
             label,
             callCount: calls.length,
             mcpServer,
+            entries: groupEntries,
           } satisfies ToolGroup);
-        } else if (pairs.length <= 2) {
+        } else if (sessionRunning && pairs.length <= 2 && !groupEntries) {
+          // Live turns keep bare rows for streaming detail; finished transcripts always rest as the quiet group row.
           items.push(...pairs);
         } else if (pairs.length > 0) {
           const toolNames = new Set(
@@ -1125,10 +1171,24 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
             pairs,
             label,
             callCount: calls.length,
+            entries: groupEntries,
           } satisfies ToolGroup);
+        } else if (noteMarks.length > 0) {
+          // Phase held only ShowUI/AskUI pairs: narration has no group to fold into, keep it visible.
+          for (const nm of noteMarks) items.push(nm.msg);
         }
         items.push(...showUiPairs);
       } else {
+        if (!sessionRunning && msg.role === 'assistant') {
+          let j = i;
+          while (j < activeBranchMessages.length && activeBranchMessages[j].role === 'assistant') j++;
+          const next = activeBranchMessages[j];
+          if (next && (next.role === 'tool_call' || next.role === 'tool_result')) {
+            leadNotes = activeBranchMessages.slice(i, j).filter((m) => !m.hidden);
+            i = j;
+            continue;
+          }
+        }
         if (!msg.hidden) {
           items.push(msg);
         }
@@ -1136,7 +1196,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
       }
     }
     return items;
-  }, [activeBranchMessages]);
+  }, [activeBranchMessages, sessionRunning]);
 
   React.useLayoutEffect(() => {
     const total = renderItems.length;
@@ -2290,6 +2350,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   autoFocus={autoFocus}
                   prefillPrompt={prefillPrompt}
                   placeholderOverride={runContext ? 'Ask about this run...' : embedded ? 'Send a message...' : undefined}
+                  quietComposer={embedded}
                   runContext={runContext}
                   onClearRunContext={onClearRunContext}
                   thinkingLevel={session?.thinking_level ?? 'auto'}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput.tsx b/frontend/src/app/pages/AgentChat/ChatInput.tsx
index 6027f1cb..28b2477a 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput.tsx
@@ -48,12 +48,14 @@ interface Props {
   prefillPrompt?: string;
   // Replaces the default "Agent, @ for context..." placeholder (e.g. "Ask about this run...").
   placeholderOverride?: string;
+  // Desktop-card composer: rest as input + attach/mic; pickers return on focus.
+  quietComposer?: boolean;
   // A workflow run shown as a small removable chip inside the composer.
   runContext?: WorkflowsRunContext;
   onClearRunContext?: () => void;
 }
 
-const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode, onModeChange, model, onModelChange, provider, onProviderChange, isRunning, onStop, autoRunMode, contextEstimate, embedded, autoFocus, sessionId, queueLength = 0, thinkingLevel = 'auto', onThinkingLevelChange, onActivityLabelChange, prefillPrompt, placeholderOverride, runContext, onClearRunContext }, ref) => {
+const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode, onModeChange, model, onModelChange, provider, onProviderChange, isRunning, onStop, autoRunMode, contextEstimate, embedded, autoFocus, sessionId, queueLength = 0, thinkingLevel = 'auto', onThinkingLevelChange, onActivityLabelChange, prefillPrompt, placeholderOverride, quietComposer, runContext, onClearRunContext }, ref) => {
   const c = useClaudeTokens();
   const editorRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -320,6 +322,7 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
       editorRef={editorRef}
       generalFileInputRef={generalFileInputRef}
       embedded={embedded}
+      quietComposer={quietComposer}
       isDragOver={isDragOver}
       isUploading={isUploading}
       handleDragOver={handleDragOver}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
index 045e199f..4d1100fe 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
@@ -50,6 +50,8 @@ interface Props {
   isRunning?: boolean;
   onStop?: () => void;
   handleSend: () => void;
+  /** Embedded-card resting look: only attach + mic; pickers come back on focus. */
+  restMode?: boolean;
 }
 
 export const ChatInputToolbar: React.FC<Props> = (p) => {
@@ -58,7 +60,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
     allModelFlat, model, onModelChange, onProviderChange, picker, pendingKinds, pendingPayloadEstimate,
     thinkingLevel, onThinkingLevelChange, contextEstimate, elementSelection, autoRunMode,
     ownerId, sessionId, generalFileInputRef, addImageFiles, uploadAndAttachFiles,
-    hasContent, disabled, isRunning, onStop, handleSend,
+    hasContent, disabled, isRunning, onStop, handleSend, restMode,
   } = p;
 
   const menuPaperProps = {
@@ -94,12 +96,14 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
         pt: 0,
       }}
     >
-      <ModelControl
-        c={c}
-        setModelAnchor={setModelAnchor}
-        allModelFlat={allModelFlat}
-        model={model}
-      />
+      {!restMode && (
+        <ModelControl
+          c={c}
+          setModelAnchor={setModelAnchor}
+          allModelFlat={allModelFlat}
+          model={model}
+        />
+      )}
 
       <ModelPickerMenu
         c={c}
@@ -134,7 +138,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
         pendingPayloadEstimate={pendingPayloadEstimate}
       />
 
-      {!hideForTrial && (
+      {!hideForTrial && !restMode && (
         <ThinkingLevelControl
           c={c}
           model={model}
@@ -149,7 +153,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
 
       <Box sx={{ flex: 1 }} />
 
-      {contextEstimate && (
+      {contextEstimate && !restMode && (
         <ContextRing
           used={contextEstimate.used}
           limit={contextEstimate.limit}
@@ -160,6 +164,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
 
       <ToolbarActions
         c={c}
+        restMode={restMode}
         elementSelection={elementSelection}
         autoRunMode={autoRunMode}
         ownerId={ownerId}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index 467a12c7..44b2b8d9 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -24,15 +24,16 @@ interface Props {
   isRunning?: boolean;
   onStop?: () => void;
   handleSend: () => void;
+  restMode?: boolean;
 }
 
 export const ToolbarActions: React.FC<Props> = ({
   c, elementSelection, autoRunMode, ownerId, sessionId, generalFileInputRef,
-  addImageFiles, uploadAndAttachFiles, hasContent, disabled, isRunning, onStop, handleSend,
+  addImageFiles, uploadAndAttachFiles, hasContent, disabled, isRunning, onStop, handleSend, restMode,
 }) => {
   return (
     <>
-      {elementSelection && !autoRunMode && (() => {
+      {elementSelection && !autoRunMode && !restMode && (() => {
         const isMySelectMode = elementSelection.selectMode && elementSelection.activeOwnerId === ownerId;
         return (
           <Tooltip title={isMySelectMode ? 'Exit select mode' : 'Select UI element'}>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
index 069f6035..fa317fb5 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import React, { RefObject, useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -28,6 +28,7 @@ interface Props {
   editorRef: RefObject<HTMLDivElement>;
   generalFileInputRef: RefObject<HTMLInputElement>;
   embedded?: boolean;
+  quietComposer?: boolean;
   isDragOver: boolean;
   isUploading: boolean;
   handleDragOver: (e: React.DragEvent) => void;
@@ -106,9 +107,18 @@ interface Props {
 
 export const ChatInputView: React.FC<Props> = (p) => {
   const { c } = p;
+  // Embedded card composers rest as just the input + attach/mic (the frame look); the pickers return on focus, draft text, or any open menu.
+  const [focusWithin, setFocusWithin] = useState(false);
+  const restMode = Boolean(
+    p.quietComposer && !focusWithin && !p.hasContent && !p.modelAnchor && !p.thinkingAnchor && !p.modeAnchor,
+  );
   return (
     <Box
       ref={p.containerRef}
+      onFocusCapture={() => setFocusWithin(true)}
+      onBlurCapture={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocusWithin(false);
+      }}
       onDragOver={p.handleDragOver}
       onDragLeave={p.handleDragLeave}
       onDrop={p.handleDrop}
@@ -246,6 +256,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
 
       <ChatInputToolbar
         c={c}
+        restMode={restMode}
         modeConf={p.modeConf}
         modesArr={p.modesArr}
         mode={p.mode}
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
index e1458ab1..84e91dc3 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
@@ -13,6 +13,10 @@ import { sanitizeSvgString } from '@/shared/sanitizeSvg';
 import { parseMcpToolName, getWorkflowToolLabel } from '@/shared/mcpToolMeta';
 import ToolCallBubble, { ToolPair } from './ToolCallBubble';
 
+export type ToolGroupEntry =
+  | { kind: 'pair'; pair: ToolPair }
+  | { kind: 'note'; id: string; text: string };
+
 export interface ToolGroup {
   type: 'tool_group';
   id: string;
@@ -20,6 +24,8 @@ export interface ToolGroup {
   label: string;
   callCount: number;
   mcpServer?: string;
+  /** Pairs interleaved with the folded mid-phase narration; present only when narration was absorbed. */
+  entries?: ToolGroupEntry[];
 }
 
 export type RenderItem = AgentMessage | ToolGroup | ToolPair;
@@ -75,7 +81,12 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
   const c = useClaudeTokens();
   const reveal = useMountReveal(); // JS-driven slide-in; see useMountReveal (was a fragile mount keyframe)
   const isMcp = !!group.mcpServer;
-  const [expanded, setExpanded] = useState(isMcp);
+  // MCP groups auto-expand only WHILE the run is live; a finished transcript rests as the quiet row.
+  const [expanded, setExpanded] = useState(isMcp && isSessionRunning);
+  const userToggledRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!isSessionRunning && !userToggledRef.current) setExpanded(false);
+  }, [isSessionRunning]);
 
   const completedCount = group.pairs.filter((p) => p.result !== null).length;
   const pendingCount = group.pairs.filter((p) => p.result === null).length;
@@ -126,7 +137,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
         {/* Collapsed = the quiet "N tool calls ›" line; the detail card only materializes on expand. */}
         {!expanded ? (
           <Box
-            onClick={() => setExpanded(true)}
+            onClick={() => { userToggledRef.current = true; setExpanded(true); }}
             sx={{
               display: 'inline-flex',
               alignItems: 'center',
@@ -154,7 +165,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
           </Box>
         ) : (
         <Box
-          onClick={() => setExpanded(false)}
+          onClick={() => { userToggledRef.current = true; setExpanded(false); }}
           sx={{
             display: 'flex',
             alignItems: 'center',
@@ -228,16 +239,25 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
               },
             }}
           >
-            {group.pairs.map((pair) => (
-              <ToolCallBubble
-                key={pair.id}
-                call={pair.call}
-                result={pair.result}
-                isPending={pair.result === null && isSessionRunning}
-                mcpCompact
-                sessionId={sessionId}
-              />
-            ))}
+            {(group.entries ?? group.pairs.map((pair) => ({ kind: 'pair' as const, pair }))).map((entry) =>
+              entry.kind === 'pair' ? (
+                <ToolCallBubble
+                  key={entry.pair.id}
+                  call={entry.pair.call}
+                  result={entry.pair.result}
+                  isPending={entry.pair.result === null && isSessionRunning}
+                  mcpCompact
+                  sessionId={sessionId}
+                />
+              ) : (
+                <Typography
+                  key={entry.id}
+                  sx={{ px: 1.5, py: 0.5, fontSize: '0.78rem', color: c.text.tertiary }}
+                >
+                  {entry.text}
+                </Typography>
+              ),
+            )}
           </Box>
         </Collapse>
       </Box>
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
index 7034c16f..7968f5d7 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
@@ -5,7 +5,8 @@ import { useThemeMode } from '@/shared/styles/ThemeContext';
 import type { WeatherProps } from './showUiPayload';
 
 function toConditionCode(condition: string | undefined): WeatherConditionCode {
-  const cond = (condition || '').toLowerCase();
+  // "Partly Cloudy with Slight Chance of Showers" is a partly-cloudy scene, not a rain scene: drop the chance-of qualifiers so the leading descriptor wins.
+  const cond = (condition || '').toLowerCase().replace(/(slight |small )?chance( of)? (showers?|rain|snow|thunderstorms?)/g, '');
   if (/thunder|storm/.test(cond)) return 'thunderstorm';
   if (/heavy rain|downpour/.test(cond)) return 'heavy-rain';
   if (/drizzle/.test(cond)) return 'drizzle';
@@ -27,12 +28,13 @@ function WeatherWidget({ props }: { props: WeatherProps }): React.ReactElement {
   const forecast: ForecastDay[] = (props.forecast || []).slice(0, 7).map((d) => ({
     label: d.day,
     conditionCode: toConditionCode(d.condition),
-    tempMin: Math.round(d.low ?? d.high - 8),
-    tempMax: Math.round(d.high),
+    tempMin: Math.round(d.low ?? (d.high ?? props.temp) - 8),
+    tempMax: Math.round(d.high ?? (d.low ?? props.temp) + 8),
   }));
 
   return (
-    <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`} style={{ width: 320 }}>
+    // 4:3 card; the vendored strip reveals at 245px height and its day icons at 280px, so width must be >= 374 for the full frame look.
+    <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`} style={{ width: 384, maxWidth: '100%' }}>
       <AnimatedWeatherWidget
         version="3.1"
         id={`weather-${props.location}`}
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
index 07a1af82..c3ea58f8 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -4,7 +4,7 @@ import { isToolUiComponent } from '@toolui/registry';
 export interface WeatherForecastDay {
   day: string;
   condition?: string;
-  high: number;
+  high?: number;
   low?: number;
 }
 
@@ -113,12 +113,13 @@ function parseShowUiInput(input: unknown): ShowUiPayload | null {
     if (!str(p.location) || !num(p.temp)) return null;
     const forecast = Array.isArray(p.forecast)
       ? (p.forecast as Array<Record<string, unknown>>)
-          .filter((d) => str(d.day) && num(d.high))
+          // Either bound is enough; a "Tonight" entry legitimately has only a low.
+          .filter((d) => str(d.day) && (num(d.high) || num(d.low)))
           .slice(0, 7)
           .map((d) => ({
             day: d.day as string,
             condition: str(d.condition) ? d.condition : undefined,
-            high: d.high as number,
+            high: num(d.high) ? d.high : undefined,
             low: num(d.low) ? d.low : undefined,
           }))
       : undefined;
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 41042f74..c4d407e6 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -18,6 +18,7 @@ import {
   handleApproval,
   collapseSession,
   closeSession,
+  fetchSession,
   renameSession,
 } from '@/shared/state/agentsSlice';
 import { displayChatTitle, isLegacyAutoName } from '@/shared/state/sessionDisplay';
@@ -698,6 +699,15 @@ const AgentCard: React.FC<Props> = ({
   const pillLabel = session.turn_label?.label || displayChatTitle(session);
   const pillRunning = session.status === 'running';
 
+  // Cold-loaded collapsed cards carry no transcript (status frames are slim), so the pill can't pin
+  // its widget/checklist artifact; hydrate ONCE per card actually on this dashboard, never in a loop.
+  const pillHydratedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!pillMode || pillHydratedRef.current) return;
+    pillHydratedRef.current = true;
+    if ((session.messages || []).length === 0) dispatch(fetchSession(session.id));
+  }, [pillMode, session.messages, session.id, dispatch]);
+
   // f7's collapsed state: a session that spawned a browser shows that window under the pill.
   const spawnedBrowserId = useAppSelector((s) => {
     for (const bc of Object.values(s.dashboardLayout.browserCards)) {
diff --git a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
index bf5d8302..6d529b94 100644
--- a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
@@ -26,9 +26,28 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
   const visibleTodos = (todos || []).slice(0, MAX_VISIBLE_TODOS);
   const hiddenCount = (todos?.length || 0) - visibleTodos.length;
   const ring = selected || highlighted ? { outline: '2px solid #3b82f6', outlineOffset: '2px' } : undefined;
+  // One key per ladder state so a state CHANGE remounts the artifact and replays the one-shot entrance; nothing loops.
+  const artifactKey = artifact ? 'widget' : browserShot ? 'shot' : visibleTodos.length > 0 ? 'todos' : running ? 'thinking' : 'none';
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 1 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 1,
+        '@keyframes osw-artifact-in': {
+          from: { opacity: 0, transform: 'translateY(8px) scale(0.98)' },
+          to: { opacity: 1, transform: 'translateY(0) scale(1)' },
+        },
+        '& .osw-artifact': {
+          animation: 'osw-artifact-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both',
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+          '& .osw-artifact': { animation: 'none' },
+        },
+      }}
+    >
       <Box
         sx={{
           display: 'inline-flex',
@@ -53,9 +72,13 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
       </Box>
 
       {artifact ? (
-        <ShowUiWidgetView payload={artifact} />
+        <Box key={artifactKey} className="osw-artifact">
+          <ShowUiWidgetView payload={artifact} />
+        </Box>
       ) : browserShot ? (
         <Box
+          key={artifactKey}
+          className="osw-artifact"
           component="img"
           src={browserShot}
           alt=""
@@ -63,6 +86,8 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
         />
       ) : visibleTodos.length > 0 ? (
         <Box
+          key={artifactKey}
+          className="osw-artifact"
           sx={{
             borderRadius: '16px',
             background: GLASS,
@@ -123,6 +148,8 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
         </Box>
       ) : running ? (
         <Box
+          key={artifactKey}
+          className="osw-artifact"
           sx={{
             display: 'inline-flex',
             alignItems: 'center',

From 355c07a7dc072f3148a986bf568a9b4aa83f340f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 14:18:58 -0700
Subject: [PATCH 095/248] [eric] desktop: per-card dock glyphs and hues; real
 OS wallpaper read at runtime (SVG fallback)

---
 electron/main.js                              | 53 +++++++++++++++++++
 electron/preload.js                           |  1 +
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 34 +++++++++---
 .../Dashboard/desktop/DesktopWallpaper.tsx    | 22 +++++++-
 4 files changed, 102 insertions(+), 8 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 1303894e..101ed172 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -3114,6 +3114,59 @@ ipcMain.handle('open-application', (_event, name) => {
   return true;
 });
 
+// The user's REAL desktop wallpaper for the dashboard background, read at runtime and never
+// bundled (Apple's images can't ship in an open-source repo). Any failure on any platform
+// returns null and the renderer keeps its SVG scenery, so this can only ever add.
+let desktopWallpaperCache;
+ipcMain.handle('get-desktop-wallpaper', async () => {
+  if (desktopWallpaperCache !== undefined) return desktopWallpaperCache;
+  const { execFile } = require('child_process');
+  const run = (cmd, args) => new Promise((resolve, reject) => {
+    execFile(cmd, args, { timeout: 8000 }, (err, stdout) => (err ? reject(err) : resolve(String(stdout).trim())));
+  });
+  try {
+    if (process.platform === 'darwin') {
+      let srcPath = await run('/usr/bin/osascript', ['-e', 'tell application "System Events" to get picture of current desktop']).catch(() => '');
+      if (!srcPath || !fs.existsSync(srcPath)) {
+        // Dynamic/aerial wallpapers report a reaped temp frame; the wallpaper store may still hold a real image path.
+        srcPath = '';
+        try {
+          const storePath = path.join(app.getPath('home'), 'Library', 'Application Support', 'com.apple.wallpaper', 'Store', 'Index.plist');
+          const raw = fs.readFileSync(storePath, 'latin1');
+          const candidates = [...raw.matchAll(/file:\/\/(\/[ -~]+?\.(?:jpg|jpeg|png|heic|tiff))/gi)].map((m) => decodeURIComponent(m[1]));
+          srcPath = candidates.find((c) => fs.existsSync(c)) || '';
+        } catch (_) { /* fall through to the SVG scenery */ }
+      }
+      if (!srcPath) { desktopWallpaperCache = null; return null; }
+      // sips normalizes HEIC sources to jpeg and downscales so the data URL stays small.
+      const outPath = path.join(app.getPath('userData'), 'wallpaper-cache.jpg');
+      await run('/usr/bin/sips', ['-s', 'format', 'jpeg', '--resampleHeightWidthMax', '2400', srcPath, '--out', outPath]);
+      desktopWallpaperCache = `data:image/jpeg;base64,${fs.readFileSync(outPath).toString('base64')}`;
+      return desktopWallpaperCache;
+    }
+    if (process.platform === 'win32') {
+      // Windows keeps the active wallpaper pre-transcoded as a JPEG; the registry path is the fallback.
+      const transcoded = path.join(app.getPath('appData'), 'Microsoft', 'Windows', 'Themes', 'TranscodedWallpaper');
+      let srcPath = fs.existsSync(transcoded) ? transcoded : null;
+      if (!srcPath) {
+        const out = await run('reg', ['query', 'HKCU\\Control Panel\\Desktop', '/v', 'WallPaper']);
+        const match = out.match(/WallPaper\s+REG_SZ\s+(.+)$/m);
+        if (match && fs.existsSync(match[1].trim())) srcPath = match[1].trim();
+      }
+      if (!srcPath) { desktopWallpaperCache = null; return null; }
+      const ext = path.extname(srcPath).toLowerCase();
+      const mime = ext === '.png' ? 'image/png' : ext === '.bmp' ? 'image/bmp' : 'image/jpeg';
+      desktopWallpaperCache = `data:${mime};base64,${fs.readFileSync(srcPath).toString('base64')}`;
+      return desktopWallpaperCache;
+    }
+    desktopWallpaperCache = null;
+    return null;
+  } catch (_) {
+    desktopWallpaperCache = null;
+    return null;
+  }
+});
+
 // Affiliate install state. Returns the persisted install.json contents so
 // the renderer can attach the referral code to authenticated cloud calls
 // (Stripe checkout, sign-in events) for downstream attribution.
diff --git a/electron/preload.js b/electron/preload.js
index b34f065a..26c736dc 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -77,6 +77,7 @@ contextBridge.exposeInMainWorld('openswarm', {
   capturePage: (rect) => ipcRenderer.invoke('capture-page', rect),
   getAppIcon: (name) => ipcRenderer.invoke('get-app-icon', name),
   openApplication: (name) => ipcRenderer.invoke('open-application', name),
+  getDesktopWallpaper: () => ipcRenderer.invoke('get-desktop-wallpaper'),
   getUpdateStatus: () => ipcRenderer.invoke('get-update-status'),
   getCrashRecoveryInfo: () => ipcRenderer.invoke('get-crash-recovery-info'),
   checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index d720d29d..8bc49405 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -1,13 +1,12 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import LanguageIcon from '@mui/icons-material/Language';
+import DashboardGlyph from '../canvas/DashboardGlyph';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import CoPresentIcon from '@mui/icons-material/CoPresent';
 import { useAppDispatch } from '@/shared/hooks';
 import { openSettingsModal } from '@/shared/state/settingsSlice';
 import { getWebview } from '@/shared/browserRegistry';
@@ -57,6 +56,21 @@ interface DesktopDockProps {
 const TILE = 30;
 const PREVIEW_W = 190;
 
+// Frames show a colorful per-card dock, not uniform tiles; hues rotate by name so two agents rarely match.
+const AGENT_TILE_HUES = [
+  'linear-gradient(135deg, #4a7dd6, #2b4fa8)',
+  'linear-gradient(135deg, #8a5bd6, #5b34a8)',
+  'linear-gradient(135deg, #3aa88f, #1f7a64)',
+  'linear-gradient(135deg, #d6754a, #a8492b)',
+  'linear-gradient(135deg, #c94a7d, #96305c)',
+];
+
+function hueFor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) | 0;
+  return AGENT_TILE_HUES[Math.abs(h) % AGENT_TILE_HUES.length];
+}
+
 /** Left-edge desktop dock: one tile per open card, hover previews, click focuses the window. */
 function DesktopDock({
   sessions,
@@ -80,12 +94,13 @@ function DesktopDock({
     for (const card of Object.values(cards)) {
       const session = sessions[card.session_id];
       if (!session) continue;
+      const title = displayChatTitle(session);
       list.push({
         id: card.session_id,
-        label: displayChatTitle(session),
+        label: title,
         rect: card,
-        tileBg: 'linear-gradient(135deg, #4a7dd6, #2b4fa8)',
-        icon: <AutoAwesomeIcon sx={{ fontSize: 17, color: '#fff' }} />,
+        tileBg: hueFor(title),
+        icon: <DashboardGlyph name={title} size={16} color="#fff" />,
         snippet: session.turn_label?.label || undefined,
       });
     }
@@ -103,12 +118,17 @@ function DesktopDock({
     }
     for (const [cardKey, vc] of Object.entries(viewCards)) {
       const output = outputs[vc.output_id];
+      const appName = output?.name || 'App';
       list.push({
         id: cardKey,
-        label: output?.name || 'App',
+        label: appName,
         rect: vc,
         tileBg: 'linear-gradient(135deg, #ef9552, #d96a2b)',
-        icon: <CoPresentIcon sx={{ fontSize: 16, color: '#fff' }} />,
+        icon: (
+          <Typography sx={{ fontSize: 14, fontWeight: 700, color: '#fff', lineHeight: 1 }}>
+            {appName.charAt(0).toUpperCase()}
+          </Typography>
+        ),
         thumbnail: output?.thumbnail,
       });
     }
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
index c9a7d035..ee366058 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import { useThemeMode } from '@/shared/styles/ThemeContext';
 
@@ -10,6 +10,26 @@ import { useThemeMode } from '@/shared/styles/ThemeContext';
  */
 function DesktopWallpaper(): React.ReactElement {
   const { mode } = useThemeMode();
+  // The user's real OS wallpaper when the Electron bridge can supply it (never bundled); SVG scenery otherwise.
+  const [realWallpaper, setRealWallpaper] = useState<string | null>(null);
+  useEffect(() => {
+    const getWallpaper = (window as unknown as { openswarm?: { getDesktopWallpaper?: () => Promise<string | null> } })
+      .openswarm?.getDesktopWallpaper;
+    if (!getWallpaper) return;
+    let cancelled = false;
+    getWallpaper().then((dataUrl) => { if (!cancelled && dataUrl) setRealWallpaper(dataUrl); }).catch(() => undefined);
+    return () => { cancelled = true; };
+  }, []);
+
+  if (realWallpaper) {
+    return (
+      <Box aria-hidden sx={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
+        <Box component="img" src={realWallpaper} alt="" sx={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
+        {mode === 'dark' && <Box sx={{ position: 'absolute', inset: 0, background: 'rgba(12,6,24,0.38)' }} />}
+      </Box>
+    );
+  }
+
   return (
     <Box
       aria-hidden

From b8911f28cf20ebda9d23116e83c28ce27a4a5bcc Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 14:45:55 -0700
Subject: [PATCH 096/248] [eric] ui-tools: generated schemas validate ShowUI
 server-side w/ teaching errors (hints kept required fields, model
 self-corrects); drag suspends backdrop blur; ambient widgets low quality; tz
 implies coarse location

---
 .../prompt/compose_turn_system_prompt.py      |    4 +-
 backend/apps/agents/show_ui_mcp_server.py     |  112 +-
 backend/apps/agents/toolui_schemas.json       | 3911 +++++++++++++++++
 frontend/scripts/gen-toolui-hints.ts          |   29 +-
 .../AgentChat/tool-ui/ShowUiWidgetView.tsx    |    6 +-
 .../pages/AgentChat/tool-ui/WeatherWidget.tsx |    4 +-
 .../Dashboard/desktop/AgentNarratorPill.tsx   |    2 +-
 .../Dashboard/desktop/DesktopWallpaper.tsx    |    1 +
 .../app/pages/Dashboard/desktop/desktop.css   |    6 +
 9 files changed, 4022 insertions(+), 53 deletions(-)
 create mode 100644 backend/apps/agents/toolui_schemas.json
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/desktop.css

diff --git a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
index 7f02b5db..216fbe3c 100644
--- a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
+++ b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
@@ -62,7 +62,9 @@ def compose_turn_system_prompt(
             "<current_time>\n"
             f"Today is {now_local.strftime('%A, %B %-d, %Y')}.\n"
             f"Local time: {now_local.strftime('%-I:%M %p')} {tz_abbr} ({tz_name}).\n"
-            "Use this as ground truth for any date/time/day-of-week question.\n"
+            "Use this as ground truth for any date/time/day-of-week question. The timezone also "
+            "gives the user's coarse region; when they say 'here' or 'near me' without a place, "
+            "infer the likely city from it (say you inferred it) instead of claiming you can't know.\n"
             "</current_time>"
         )
         composed_prompt = (composed_prompt + "\n\n" + time_ctx) if composed_prompt else time_ctx
diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
index 261cebbe..c8004e42 100644
--- a/backend/apps/agents/show_ui_mcp_server.py
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -20,40 +20,28 @@ ASK_TIMEOUT_S = 600
 
 MAX_PROPS_BYTES = 20_000
 
+# Hints + JSON Schemas for the vendored tool-ui set are GENERATED from the shipped zod contracts
+# (frontend/scripts/gen-toolui-hints.ts writes toolui_schemas.json next to this file). Loading them
+# here means the tool description and the server-side validation can never drift from what renders.
+def p_load_generated():
+    try:
+        with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), "toolui_schemas.json")) as f:
+            return json.load(f)
+    except Exception:
+        return {}
+
+
+GENERATED = p_load_generated()
+
 COMPONENT_SPECS = {
-    "weather": "props: {location: str, temp: number, unit?: 'F'|'C', high?: number, low?: number, condition?: str, forecast?: [{day: str, condition?: str, high: number, low?: number}] (max 7)}",
+    "weather": "props: {location: str, temp: number, unit?: 'F'|'C', high?: number, low?: number, condition?: str, forecast?: [{day: str, condition?: str, high?: number, low?: number}] (max 7)}",
     "stats": "props: {title?: str, stats: [{label: str, value: str, delta?: str, direction?: 'up'|'down'}] (max 8)}",
     "links": "props: {links: [{title: str, url: str, description?: str}] (max 10)}",
-    # Vendored tool-ui set (MIT, https://tool-ui.com); hints are AUTO-GENERATED from the shipped zod
-    # contracts by frontend/scripts/gen-toolui-hints.ts. Regenerate after upgrading src/toolui.
-    "approval-card": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', title: str, description?: str, icon?: str, metadata?: [{key: str, value: str}], variant?: 'default'|'destructive', confirmLabel?: str, cancelLabel?: str, choice?: 'approved'|'denied'}",
-    "audio": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, assetId: str, src: str, title?: str, description?: str, artwork?: str, durationMs?: num, fileSizeBytes?: num, createdAt?: str, locale?: str, source?: {label: str, iconUrl?: str, u...",
-    "chart": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, type: 'bar'|'line', title?: str, description?: str, data: [{}], xKey: str, series: [{key: str, label: str, color?: str}], colors?: [str], showLegend?: bool, showGrid?: bool}",
-    "citation": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, href: str, title: str, snippet?: str, domain?: str, favicon?: str, author?: str, publishedAt?: str, type?: 'webpage'|'document'|'article'|'api'|'code'|'other', locale?: str}",
-    "code-block": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, code: str, language?: str, lineNumbers?: 'visible'|'hidden', filename?: str, highlightLines?: [num], maxCollapsedLines?: num}",
-    "code-diff": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, oldCode?: str, newCode?: str, patch?: str, language?: str, filename?: str, lineNumbers?: 'visible'|'hidden', diffStyle?: 'unified'|'split', maxCollapsedLines?: num}",
-    "data-table": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, columns: [{key: str, label: str, abbr?: str, sortable?: bool, align?: 'left'|'right'|'center', width?: str, truncate?: bool, priority?: 'primary'|'secondary'|'tertiary', hideOnMob...",
-    "geo-map": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, title?: str, description?: str, markers: [{id?: str, lat: num, lng: num, label?: str, description?: str, tooltip?: 'none'|'hover'|'always', icon?: obj|obj|obj}], routes?: [{id?: s...",
-    "image": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, assetId: str, src: str, alt: str, title?: str, description?: str, href?: str, domain?: str, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain', fileSizeBytes?: num,...",
-    "image-gallery": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, images: [{id: str, src: str, alt: str, width: num, height: num, title?: str, caption?: str, source?: obj}], title?: str, description?: str}",
-    "instagram-post": "props: {id: str, author: {name: str, handle: str, avatarUrl: str, verified?: bool}, text?: str, media?: [{type: 'image'|'video', url: str, alt: str}], stats?: {likes?: num, isLiked?: bool}, createdAt?: str}",
-    "item-carousel": "props: {id: str, name: str, subtitle?: str, image?: str, color?: str, actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|'outline', loading?: bool, disabled?: bool, shortcut?: str}]}",
-    "link-preview": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, href: str, title?: str, description?: str, image?: str, domain?: str, favicon?: str, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain', createdAt?: str, locale?: str}",
-    "linkedin-post": "props: {id: str, author: {name: str, avatarUrl: str, headline?: str}, text?: str, media?: {type: 'image'|'video', url: str, alt: str}, linkPreview?: {url: str, title?: str, description?: str, imageUrl?: str, domain?: str}, stats?: {likes?: num, isLiked?: bool}, createdAt?: str}",
-    "message-draft": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', body: str, outcome?: 'sent'|'cancelled', channel: str, subject: str, from?: str, to: [str], cc?: [str], bcc?: [str]}",
-    "option-list": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, options: [{id: str, label: str, description?: str, disabled?: bool}], selectionMode?: 'multi'|'single', defaultValue?: [str]|str|any, choice?: [str]|str|any, actions?: [{id: str, ...",
-    "order-summary": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', title?: str, variant?: 'summary'|'receipt', items: [{id: str, name: str, description?: str, imageUrl?: str, quantity?: num, unitPrice: num}], pricing: {subtotal: num, tax?: num, taxLabel?: str, shipping?: num, discount?: num, discountLabel?: str, total: num, currency?: str}, choice?:...",
-    "parameter-slider": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', sliders: [{id: str, label: str, min: num, max: num, step?: num, value: num, unit?: str, precision?: num, disabled?: bool, trackClassName?: str, fillClassName?: str, handleClassName?: str}], actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'dest...",
-    "plan": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, title: str, description?: str, todos: [{id: str, label: str, status: 'pending'|'in_progress'|'completed'|'cancelled', description?: str}], maxVisibleTodos?: num}",
-    "preferences-panel": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, title?: str, sections: [{heading?: str, items: [any]}], actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|...",
-    "progress-tracker": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', steps: [{id: str, label: str, description?: str, status: 'pending'|'in-progress'|'completed'|'failed'}], elapsedTime?: num, choice?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}}",
-    "question-flow": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', step: num, title: str, description?: str, options: [{id: str, label: str, description?: str, disabled?: bool}], selectionMode?: 'single'|'multi'}",
-    "stats-display": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', title?: str, description?: str, stats: [{key: str, label: str, value: str|num, format?: any, diff?: obj, sparkline?: obj}]}",
-    "terminal": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, command: str, stdout?: str, stderr?: str, exitCode: num, durationMs?: num, cwd?: str, truncated?: bool, maxCollapsedLines?: num}",
-    "video": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, identifiers?: obj, at: str}, assetId: str, src: str, poster?: str, title?: str, description?: str, href?: str, domain?: str, durationMs?: num, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain'...",
-    "x-post": "props: {id: str, author: {name: str, handle: str, avatarUrl: str, verified?: bool}, text?: str, media?: {type: 'image'|'video', url: str, alt: str, aspectRatio?: '1:1'|'4:3'|'16:9'|'9:16'}, linkPreview?: {url: str, title?: str, description?: str, imageUrl?: str, domain?: str}, quotedPost?: any, stats?: {likes?: num, isLiked?: bool, isReposted?: bool, isBookmarke...",
 }
 
+COMPONENT_SPECS.update({name: entry["hint"] for name, entry in GENERATED.items()})
+
+
 INTERACTIVE_COMPONENTS = (
     "option-list", "question-flow", "parameter-slider", "preferences-panel", "approval-card",
 )
@@ -140,11 +128,73 @@ def validate(component: str, props: dict) -> str:
         return f"stats needs a non-empty stats list. {COMPONENT_SPECS['stats']}"
     if component == "links" and not (isinstance(props.get("links"), list) and props["links"]):
         return f"links needs a non-empty links list. {COMPONENT_SPECS['links']}"
-    # Vendored tool-ui components validate deeply client-side against their zod contracts; here we
-    # only shape-check so a wrong payload comes back as a teaching error instead of a dead render.
+    # Vendored components: validate against the GENERATED JSON Schema so a bad payload comes back
+    # as a teaching error the model can fix in-turn, instead of a dead render it never hears about.
+    entry = GENERATED.get(component)
+    if entry and isinstance(entry.get("schema"), dict):
+        errors = []
+        p_check(props, entry["schema"], "props", errors)
+        if errors:
+            return (
+                f"{component} payload invalid: " + "; ".join(errors[:4])
+                + f". Full shape: {COMPONENT_SPECS[component]}. Fix the props and call the tool again."
+            )
     return ""
 
 
+def p_type_ok(value, t: str) -> bool:
+    if t == "string":
+        return isinstance(value, str)
+    if t in ("number", "integer"):
+        return isinstance(value, (int, float)) and not isinstance(value, bool)
+    if t == "boolean":
+        return isinstance(value, bool)
+    if t == "object":
+        return isinstance(value, dict)
+    if t == "array":
+        return isinstance(value, list)
+    if t == "null":
+        return value is None
+    return True
+
+
+def p_check(value, schema: dict, path: str, errors: list) -> None:
+    """Minimal JSON Schema walk: required keys, primitive types, enums, anyOf. Anything it can't
+    interpret passes; the client zod contract stays the deep authority."""
+    if len(errors) >= 6 or not isinstance(schema, dict):
+        return
+    branches = schema.get("anyOf")
+    if isinstance(branches, list) and branches:
+        for branch in branches:
+            trial = []
+            p_check(value, branch, path, trial)
+            if not trial:
+                return
+        errors.append(f"{path} matches none of its allowed shapes")
+        return
+    enum = schema.get("enum")
+    if isinstance(enum, list) and enum and value not in enum:
+        errors.append(f"{path} must be one of {enum[:6]}")
+        return
+    t = schema.get("type")
+    if isinstance(t, str) and not p_type_ok(value, t):
+        errors.append(f"{path} must be a {t}")
+        return
+    if t == "object" and isinstance(value, dict):
+        for key in schema.get("required", []) or []:
+            if key not in value:
+                errors.append(f"{path}.{key} is required")
+        props = schema.get("properties") or {}
+        for key, sub in props.items():
+            if key in value:
+                p_check(value[key], sub, f"{path}.{key}", errors)
+    elif t == "array" and isinstance(value, list):
+        items = schema.get("items")
+        if isinstance(items, dict):
+            for i, item in enumerate(value):
+                p_check(item, items, f"{path}[{i}]", errors)
+
+
 def p_post(url: str, body: dict, timeout: float) -> dict:
     payload = json.dumps(body).encode()
     headers = {"Content-Type": "application/json"}
diff --git a/backend/apps/agents/toolui_schemas.json b/backend/apps/agents/toolui_schemas.json
new file mode 100644
index 00000000..254665b8
--- /dev/null
+++ b/backend/apps/agents/toolui_schemas.json
@@ -0,0 +1,3911 @@
+{
+ "approval-card": {
+  "hint": "props: {id: str, title: str, role?: 'information'|'decision'|'control'|'state'|'composite', description?: str, icon?: str, metadata?: [{key: str, value: str}], variant?: 'default'|'destructive', confirmLabel?: str, cancelLabel?: str, choice?: 'approved'|'denied'}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "title": {
+     "type": "string",
+     "minLength": 1
+    },
+    "description": {
+     "type": "string"
+    },
+    "icon": {
+     "type": "string"
+    },
+    "metadata": {
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "key": {
+        "type": "string",
+        "minLength": 1
+       },
+       "value": {
+        "type": "string"
+       }
+      },
+      "required": [
+       "key",
+       "value"
+      ]
+     }
+    },
+    "variant": {
+     "type": "string",
+     "enum": [
+      "default",
+      "destructive"
+     ]
+    },
+    "confirmLabel": {
+     "type": "string"
+    },
+    "cancelLabel": {
+     "type": "string"
+    },
+    "choice": {
+     "type": "string",
+     "enum": [
+      "approved",
+      "denied"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "title"
+   ]
+  }
+ },
+ "audio": {
+  "hint": "props: {id: str, assetId: str, src: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, title?: str, description?: str, artwork?: str, durationMs?: num, fileSizeBytes?: num, createdAt?: str, locale?: str, source?: {label: str, iconUrl?: str, url?: str}}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "assetId": {
+     "type": "string"
+    },
+    "src": {
+     "type": "string",
+     "format": "uri"
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    },
+    "artwork": {
+     "type": "string",
+     "format": "uri"
+    },
+    "durationMs": {
+     "type": "integer",
+     "exclusiveMinimum": 0,
+     "maximum": 9007199254740991
+    },
+    "fileSizeBytes": {
+     "type": "integer",
+     "exclusiveMinimum": 0,
+     "maximum": 9007199254740991
+    },
+    "createdAt": {
+     "type": "string",
+     "format": "date-time",
+     "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+    },
+    "locale": {
+     "type": "string"
+    },
+    "source": {
+     "type": "object",
+     "properties": {
+      "label": {
+       "type": "string"
+      },
+      "iconUrl": {
+       "type": "string",
+       "format": "uri"
+      },
+      "url": {
+       "type": "string",
+       "format": "uri"
+      }
+     },
+     "required": [
+      "label"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "assetId",
+    "src"
+   ]
+  }
+ },
+ "chart": {
+  "hint": "props: {id: str, type: 'bar'|'line', data: [{}], xKey: str, series: [{key: str, label: str, color?: str}], role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, title?: str, description?: str, colors?: [str], showLegend?: bool, showGrid?: bool}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "type": {
+     "type": "string",
+     "enum": [
+      "bar",
+      "line"
+     ]
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    },
+    "data": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "propertyNames": {
+       "type": "string"
+      },
+      "additionalProperties": {}
+     }
+    },
+    "xKey": {
+     "type": "string",
+     "minLength": 1
+    },
+    "series": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "key": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "color": {
+        "type": "string"
+       }
+      },
+      "required": [
+       "key",
+       "label"
+      ]
+     }
+    },
+    "colors": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "string",
+      "minLength": 1
+     }
+    },
+    "showLegend": {
+     "type": "boolean"
+    },
+    "showGrid": {
+     "type": "boolean"
+    }
+   },
+   "required": [
+    "id",
+    "type",
+    "data",
+    "xKey",
+    "series"
+   ]
+  }
+ },
+ "citation": {
+  "hint": "props: {id: str, href: str, title: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, snippet?: str, domain?: str, favicon?: str, author?: str, publishedAt?: str, type?: 'webpage'|'document'|'article'|'api'|'code'|'other', locale?: str}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "href": {
+     "type": "string",
+     "format": "uri"
+    },
+    "title": {
+     "type": "string"
+    },
+    "snippet": {
+     "type": "string"
+    },
+    "domain": {
+     "type": "string"
+    },
+    "favicon": {
+     "type": "string",
+     "format": "uri"
+    },
+    "author": {
+     "type": "string"
+    },
+    "publishedAt": {
+     "type": "string",
+     "format": "date-time",
+     "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+    },
+    "type": {
+     "type": "string",
+     "enum": [
+      "webpage",
+      "document",
+      "article",
+      "api",
+      "code",
+      "other"
+     ]
+    },
+    "locale": {
+     "type": "string"
+    }
+   },
+   "required": [
+    "id",
+    "href",
+    "title"
+   ]
+  }
+ },
+ "code-block": {
+  "hint": "props: {id: str, code: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, language?: str, lineNumbers?: 'visible'|'hidden', filename?: str, highlightLines?: [num], maxCollapsedLines?: num}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "code": {
+     "type": "string"
+    },
+    "language": {
+     "default": "text",
+     "type": "string",
+     "minLength": 1
+    },
+    "lineNumbers": {
+     "default": "visible",
+     "type": "string",
+     "enum": [
+      "visible",
+      "hidden"
+     ]
+    },
+    "filename": {
+     "type": "string"
+    },
+    "highlightLines": {
+     "type": "array",
+     "items": {
+      "type": "integer",
+      "exclusiveMinimum": 0,
+      "maximum": 9007199254740991
+     }
+    },
+    "maxCollapsedLines": {
+     "type": "number",
+     "minimum": 1
+    }
+   },
+   "required": [
+    "id",
+    "code"
+   ]
+  }
+ },
+ "code-diff": {
+  "hint": "props: {id: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, oldCode?: str, newCode?: str, patch?: str, language?: str, filename?: str, lineNumbers?: 'visible'|'hidden', diffStyle?: 'unified'|'split', maxCollapsedLines?: num}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "oldCode": {
+     "type": "string"
+    },
+    "newCode": {
+     "type": "string"
+    },
+    "patch": {
+     "type": "string"
+    },
+    "language": {
+     "default": "text",
+     "type": "string",
+     "minLength": 1
+    },
+    "filename": {
+     "type": "string"
+    },
+    "lineNumbers": {
+     "default": "visible",
+     "type": "string",
+     "enum": [
+      "visible",
+      "hidden"
+     ]
+    },
+    "diffStyle": {
+     "default": "unified",
+     "type": "string",
+     "enum": [
+      "unified",
+      "split"
+     ]
+    },
+    "maxCollapsedLines": {
+     "type": "number",
+     "minimum": 1
+    }
+   },
+   "required": [
+    "id"
+   ]
+  }
+ },
+ "data-table": {
+  "hint": "props: {id: str, columns: [{key: str, label: str, abbr?: str, sortable?: bool, align?: 'left'|'right'|'center', width?: str, truncate?: bool, priority?: 'primary'|'secondary'|'tertiary', hideOnMobile?: bool, format?: any}], data: [{}], role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, rowIdKey?: str, defa...",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "columns": {
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "key": {
+        "type": "string"
+       },
+       "label": {
+        "type": "string"
+       },
+       "abbr": {
+        "type": "string"
+       },
+       "sortable": {
+        "type": "boolean"
+       },
+       "align": {
+        "type": "string",
+        "enum": [
+         "left",
+         "right",
+         "center"
+        ]
+       },
+       "width": {
+        "type": "string"
+       },
+       "truncate": {
+        "type": "boolean"
+       },
+       "priority": {
+        "type": "string",
+        "enum": [
+         "primary",
+         "secondary",
+         "tertiary"
+        ]
+       },
+       "hideOnMobile": {
+        "type": "boolean"
+       },
+       "format": {
+        "oneOf": [
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "text"
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "number"
+           },
+           "decimals": {
+            "type": "number"
+           },
+           "unit": {
+            "type": "string"
+           },
+           "compact": {
+            "type": "boolean"
+           },
+           "showSign": {
+            "type": "boolean"
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "currency"
+           },
+           "currency": {
+            "type": "string"
+           },
+           "decimals": {
+            "type": "number"
+           }
+          },
+          "required": [
+           "kind",
+           "currency"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "percent"
+           },
+           "decimals": {
+            "type": "number"
+           },
+           "showSign": {
+            "type": "boolean"
+           },
+           "basis": {
+            "type": "string",
+            "enum": [
+             "fraction",
+             "unit"
+            ]
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "date"
+           },
+           "dateFormat": {
+            "type": "string",
+            "enum": [
+             "short",
+             "long",
+             "relative"
+            ]
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "delta"
+           },
+           "decimals": {
+            "type": "number"
+           },
+           "upIsPositive": {
+            "type": "boolean"
+           },
+           "showSign": {
+            "type": "boolean"
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "status"
+           },
+           "statusMap": {
+            "type": "object",
+            "propertyNames": {
+             "type": "string"
+            },
+            "additionalProperties": {
+             "type": "object",
+             "properties": {
+              "tone": {
+               "type": "string",
+               "enum": [
+                "success",
+                "warning",
+                "danger",
+                "info",
+                "neutral"
+               ]
+              },
+              "label": {
+               "type": "string"
+              }
+             },
+             "required": [
+              "tone"
+             ]
+            }
+           }
+          },
+          "required": [
+           "kind",
+           "statusMap"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "boolean"
+           },
+           "labels": {
+            "type": "object",
+            "properties": {
+             "true": {
+              "type": "string"
+             },
+             "false": {
+              "type": "string"
+             }
+            },
+            "required": [
+             "true",
+             "false"
+            ]
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "link"
+           },
+           "hrefKey": {
+            "type": "string"
+           },
+           "external": {
+            "type": "boolean"
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "badge"
+           },
+           "colorMap": {
+            "type": "object",
+            "propertyNames": {
+             "type": "string"
+            },
+            "additionalProperties": {
+             "type": "string",
+             "enum": [
+              "success",
+              "warning",
+              "danger",
+              "info",
+              "neutral"
+             ]
+            }
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "array"
+           },
+           "maxVisible": {
+            "type": "number"
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         }
+        ]
+       }
+      },
+      "required": [
+       "key",
+       "label"
+      ]
+     }
+    },
+    "data": {
+     "type": "array",
+     "items": {
+      "type": "object",
+      "propertyNames": {
+       "type": "string"
+      },
+      "additionalProperties": {
+       "anyOf": [
+        {
+         "anyOf": [
+          {
+           "type": "string"
+          },
+          {
+           "type": "number"
+          },
+          {
+           "type": "boolean"
+          },
+          {
+           "type": "null"
+          }
+         ]
+        },
+        {
+         "type": "array",
+         "items": {
+          "anyOf": [
+           {
+            "type": "string"
+           },
+           {
+            "type": "number"
+           },
+           {
+            "type": "boolean"
+           },
+           {
+            "type": "null"
+           }
+          ]
+         }
+        }
+       ]
+      }
+     }
+    },
+    "rowIdKey": {
+     "type": "string"
+    },
+    "defaultSort": {
+     "type": "object",
+     "properties": {
+      "by": {
+       "type": "string"
+      },
+      "direction": {
+       "type": "string",
+       "enum": [
+        "asc",
+        "desc"
+       ]
+      }
+     }
+    },
+    "sort": {
+     "type": "object",
+     "properties": {
+      "by": {
+       "type": "string"
+      },
+      "direction": {
+       "type": "string",
+       "enum": [
+        "asc",
+        "desc"
+       ]
+      }
+     }
+    },
+    "emptyMessage": {
+     "type": "string"
+    },
+    "maxHeight": {
+     "type": "string"
+    },
+    "locale": {
+     "type": "string"
+    }
+   },
+   "required": [
+    "id",
+    "columns",
+    "data"
+   ]
+  }
+ },
+ "geo-map": {
+  "hint": "props: {id: str, markers: [{lat: num, lng: num, id?: str, label?: str, description?: str, tooltip?: 'none'|'hover'|'always', icon?: obj|obj|obj}], role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, title?: str, description?: str, routes?: [{points: [obj], id?: str, label?: str, description?: str, tooltip?:...",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    },
+    "markers": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "lat": {
+        "type": "number",
+        "minimum": -90,
+        "maximum": 90
+       },
+       "lng": {
+        "type": "number",
+        "minimum": -180,
+        "maximum": 180
+       },
+       "label": {
+        "type": "string"
+       },
+       "description": {
+        "type": "string"
+       },
+       "tooltip": {
+        "type": "string",
+        "enum": [
+         "none",
+         "hover",
+         "always"
+        ]
+       },
+       "icon": {
+        "anyOf": [
+         {
+          "type": "object",
+          "properties": {
+           "type": {
+            "type": "string",
+            "const": "dot"
+           },
+           "color": {
+            "type": "string"
+           },
+           "borderColor": {
+            "type": "string"
+           },
+           "radius": {
+            "type": "number",
+            "minimum": 3,
+            "maximum": 16
+           }
+          },
+          "required": [
+           "type"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "type": {
+            "type": "string",
+            "const": "emoji"
+           },
+           "value": {
+            "type": "string",
+            "minLength": 1
+           },
+           "size": {
+            "type": "number",
+            "minimum": 16,
+            "maximum": 40
+           },
+           "bgColor": {
+            "type": "string"
+           },
+           "borderColor": {
+            "type": "string"
+           }
+          },
+          "required": [
+           "type",
+           "value"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "type": {
+            "type": "string",
+            "const": "image"
+           },
+           "url": {
+            "type": "string",
+            "format": "uri"
+           },
+           "width": {
+            "type": "number",
+            "minimum": 16,
+            "maximum": 64
+           },
+           "height": {
+            "type": "number",
+            "minimum": 16,
+            "maximum": 64
+           },
+           "borderRadius": {
+            "type": "number",
+            "minimum": 0,
+            "maximum": 999
+           },
+           "borderColor": {
+            "type": "string"
+           }
+          },
+          "required": [
+           "type",
+           "url"
+          ]
+         }
+        ]
+       }
+      },
+      "required": [
+       "lat",
+       "lng"
+      ]
+     }
+    },
+    "routes": {
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "points": {
+        "minItems": 2,
+        "type": "array",
+        "items": {
+         "type": "object",
+         "properties": {
+          "lat": {
+           "type": "number",
+           "minimum": -90,
+           "maximum": 90
+          },
+          "lng": {
+           "type": "number",
+           "minimum": -180,
+           "maximum": 180
+          }
+         },
+         "required": [
+          "lat",
+          "lng"
+         ]
+        }
+       },
+       "label": {
+        "type": "string"
+       },
+       "description": {
+        "type": "string"
+       },
+       "tooltip": {
+        "type": "string",
+        "enum": [
+         "none",
+         "hover",
+         "always"
+        ]
+       },
+       "color": {
+        "type": "string"
+       },
+       "weight": {
+        "type": "number",
+        "minimum": 1,
+        "maximum": 12
+       },
+       "opacity": {
+        "type": "number",
+        "minimum": 0,
+        "maximum": 1
+       },
+       "dashArray": {
+        "type": "string"
+       }
+      },
+      "required": [
+       "points"
+      ]
+     }
+    },
+    "clustering": {
+     "type": "object",
+     "properties": {
+      "enabled": {
+       "type": "boolean"
+      },
+      "radius": {
+       "type": "number",
+       "minimum": 20,
+       "maximum": 120
+      },
+      "maxZoom": {
+       "type": "number",
+       "minimum": 1,
+       "maximum": 22
+      },
+      "minPoints": {
+       "type": "number",
+       "minimum": 2,
+       "maximum": 20
+      }
+     }
+    },
+    "viewport": {
+     "anyOf": [
+      {
+       "type": "object",
+       "properties": {
+        "mode": {
+         "type": "string",
+         "const": "fit"
+        },
+        "padding": {
+         "type": "number",
+         "minimum": 0
+        },
+        "maxZoom": {
+         "type": "number",
+         "minimum": 1,
+         "maximum": 22
+        },
+        "target": {
+         "type": "string",
+         "enum": [
+          "markers",
+          "routes",
+          "all"
+         ]
+        }
+       },
+       "required": [
+        "mode"
+       ]
+      },
+      {
+       "type": "object",
+       "properties": {
+        "mode": {
+         "type": "string",
+         "const": "center"
+        },
+        "center": {
+         "type": "object",
+         "properties": {
+          "lat": {
+           "type": "number",
+           "minimum": -90,
+           "maximum": 90
+          },
+          "lng": {
+           "type": "number",
+           "minimum": -180,
+           "maximum": 180
+          }
+         },
+         "required": [
+          "lat",
+          "lng"
+         ]
+        },
+        "zoom": {
+         "type": "number",
+         "minimum": 1,
+         "maximum": 22
+        }
+       },
+       "required": [
+        "mode",
+        "center",
+        "zoom"
+       ]
+      }
+     ]
+    },
+    "showZoomControl": {
+     "type": "boolean"
+    },
+    "theme": {
+     "type": "string",
+     "enum": [
+      "light",
+      "dark"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "markers"
+   ]
+  }
+ },
+ "image": {
+  "hint": "props: {id: str, assetId: str, src: str, alt: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, title?: str, description?: str, href?: str, domain?: str, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain', fileSizeBytes?: num, createdAt?: str, locale?: str, source?: {label: str, iconUr...",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "assetId": {
+     "type": "string"
+    },
+    "src": {
+     "type": "string",
+     "format": "uri"
+    },
+    "alt": {
+     "type": "string",
+     "minLength": 1
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    },
+    "href": {
+     "type": "string",
+     "format": "uri"
+    },
+    "domain": {
+     "type": "string"
+    },
+    "ratio": {
+     "default": "auto",
+     "type": "string",
+     "enum": [
+      "auto",
+      "1:1",
+      "4:3",
+      "16:9",
+      "9:16"
+     ]
+    },
+    "fit": {
+     "default": "cover",
+     "type": "string",
+     "enum": [
+      "cover",
+      "contain"
+     ]
+    },
+    "fileSizeBytes": {
+     "type": "integer",
+     "exclusiveMinimum": 0,
+     "maximum": 9007199254740991
+    },
+    "createdAt": {
+     "type": "string",
+     "format": "date-time",
+     "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+    },
+    "locale": {
+     "type": "string"
+    },
+    "source": {
+     "type": "object",
+     "properties": {
+      "label": {
+       "type": "string"
+      },
+      "iconUrl": {
+       "type": "string",
+       "format": "uri"
+      },
+      "url": {
+       "type": "string",
+       "format": "uri"
+      }
+     },
+     "required": [
+      "label"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "assetId",
+    "src",
+    "alt"
+   ]
+  }
+ },
+ "image-gallery": {
+  "hint": "props: {id: str, images: [{id: str, src: str, alt: str, width: num, height: num, title?: str, caption?: str, source?: obj}], role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, title?: str, description?: str}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "images": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "src": {
+        "type": "string",
+        "format": "uri"
+       },
+       "alt": {
+        "type": "string",
+        "minLength": 1
+       },
+       "width": {
+        "type": "number",
+        "exclusiveMinimum": 0
+       },
+       "height": {
+        "type": "number",
+        "exclusiveMinimum": 0
+       },
+       "title": {
+        "type": "string"
+       },
+       "caption": {
+        "type": "string"
+       },
+       "source": {
+        "type": "object",
+        "properties": {
+         "label": {
+          "type": "string"
+         },
+         "url": {
+          "type": "string",
+          "format": "uri"
+         }
+        },
+        "required": [
+         "label"
+        ]
+       }
+      },
+      "required": [
+       "id",
+       "src",
+       "alt",
+       "width",
+       "height"
+      ]
+     }
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    }
+   },
+   "required": [
+    "id",
+    "images"
+   ]
+  }
+ },
+ "instagram-post": {
+  "hint": "props: {id: str, author: {name: str, handle: str, avatarUrl: str, verified?: bool}, text?: str, media?: [{type: 'image'|'video', url: str, alt: str}], stats?: {likes?: num, isLiked?: bool}, createdAt?: str}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string"
+    },
+    "author": {
+     "type": "object",
+     "properties": {
+      "name": {
+       "type": "string"
+      },
+      "handle": {
+       "type": "string"
+      },
+      "avatarUrl": {
+       "type": "string"
+      },
+      "verified": {
+       "type": "boolean"
+      }
+     },
+     "required": [
+      "name",
+      "handle",
+      "avatarUrl"
+     ]
+    },
+    "text": {
+     "type": "string"
+    },
+    "media": {
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "type": {
+        "type": "string",
+        "enum": [
+         "image",
+         "video"
+        ]
+       },
+       "url": {
+        "type": "string"
+       },
+       "alt": {
+        "type": "string"
+       }
+      },
+      "required": [
+       "type",
+       "url",
+       "alt"
+      ]
+     }
+    },
+    "stats": {
+     "type": "object",
+     "properties": {
+      "likes": {
+       "type": "number"
+      },
+      "isLiked": {
+       "type": "boolean"
+      }
+     }
+    },
+    "createdAt": {
+     "type": "string"
+    }
+   },
+   "required": [
+    "id",
+    "author"
+   ]
+  }
+ },
+ "item-carousel": {
+  "hint": "props: {id: str, name: str, subtitle?: str, image?: str, color?: str, actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|'outline', loading?: bool, disabled?: bool, shortcut?: str}]}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "name": {
+     "type": "string",
+     "minLength": 1
+    },
+    "subtitle": {
+     "type": "string"
+    },
+    "image": {
+     "type": "string",
+     "format": "uri"
+    },
+    "color": {
+     "type": "string"
+    },
+    "actions": {
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "sentence": {
+        "type": "string"
+       },
+       "confirmLabel": {
+        "type": "string"
+       },
+       "variant": {
+        "type": "string",
+        "enum": [
+         "default",
+         "destructive",
+         "secondary",
+         "ghost",
+         "outline"
+        ]
+       },
+       "loading": {
+        "type": "boolean"
+       },
+       "disabled": {
+        "type": "boolean"
+       },
+       "shortcut": {
+        "type": "string"
+       }
+      },
+      "required": [
+       "id",
+       "label"
+      ]
+     }
+    }
+   },
+   "required": [
+    "id",
+    "name"
+   ]
+  }
+ },
+ "link-preview": {
+  "hint": "props: {id: str, href: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, title?: str, description?: str, image?: str, domain?: str, favicon?: str, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain', createdAt?: str, locale?: str}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "href": {
+     "type": "string",
+     "format": "uri"
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    },
+    "image": {
+     "type": "string",
+     "format": "uri"
+    },
+    "domain": {
+     "type": "string"
+    },
+    "favicon": {
+     "type": "string",
+     "format": "uri"
+    },
+    "ratio": {
+     "default": "auto",
+     "type": "string",
+     "enum": [
+      "auto",
+      "1:1",
+      "4:3",
+      "16:9",
+      "9:16"
+     ]
+    },
+    "fit": {
+     "default": "cover",
+     "type": "string",
+     "enum": [
+      "cover",
+      "contain"
+     ]
+    },
+    "createdAt": {
+     "type": "string",
+     "format": "date-time",
+     "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+    },
+    "locale": {
+     "type": "string"
+    }
+   },
+   "required": [
+    "id",
+    "href"
+   ]
+  }
+ },
+ "linkedin-post": {
+  "hint": "props: {id: str, author: {name: str, avatarUrl: str, headline?: str}, text?: str, media?: {type: 'image'|'video', url: str, alt: str}, linkPreview?: {url: str, title?: str, description?: str, imageUrl?: str, domain?: str}, stats?: {likes?: num, isLiked?: bool}, createdAt?: str}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string"
+    },
+    "author": {
+     "type": "object",
+     "properties": {
+      "name": {
+       "type": "string"
+      },
+      "avatarUrl": {
+       "type": "string"
+      },
+      "headline": {
+       "type": "string"
+      }
+     },
+     "required": [
+      "name",
+      "avatarUrl"
+     ]
+    },
+    "text": {
+     "type": "string"
+    },
+    "media": {
+     "type": "object",
+     "properties": {
+      "type": {
+       "type": "string",
+       "enum": [
+        "image",
+        "video"
+       ]
+      },
+      "url": {
+       "type": "string"
+      },
+      "alt": {
+       "type": "string"
+      }
+     },
+     "required": [
+      "type",
+      "url",
+      "alt"
+     ]
+    },
+    "linkPreview": {
+     "type": "object",
+     "properties": {
+      "url": {
+       "type": "string"
+      },
+      "title": {
+       "type": "string"
+      },
+      "description": {
+       "type": "string"
+      },
+      "imageUrl": {
+       "type": "string"
+      },
+      "domain": {
+       "type": "string"
+      }
+     },
+     "required": [
+      "url"
+     ]
+    },
+    "stats": {
+     "type": "object",
+     "properties": {
+      "likes": {
+       "type": "number"
+      },
+      "isLiked": {
+       "type": "boolean"
+      }
+     }
+    },
+    "createdAt": {
+     "type": "string"
+    }
+   },
+   "required": [
+    "id",
+    "author"
+   ]
+  }
+ },
+ "message-draft": {
+  "hint": "props: {id: str, body: str, channel: str, subject: str, to: [str], role?: 'information'|'decision'|'control'|'state'|'composite', outcome?: 'sent'|'cancelled', from?: str, cc?: [str], bcc?: [str]}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "body": {
+     "type": "string",
+     "minLength": 1
+    },
+    "outcome": {
+     "type": "string",
+     "enum": [
+      "sent",
+      "cancelled"
+     ]
+    },
+    "channel": {
+     "type": "string",
+     "const": "email"
+    },
+    "subject": {
+     "type": "string",
+     "minLength": 1
+    },
+    "from": {
+     "type": "string"
+    },
+    "to": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "string"
+     }
+    },
+    "cc": {
+     "type": "array",
+     "items": {
+      "type": "string"
+     }
+    },
+    "bcc": {
+     "type": "array",
+     "items": {
+      "type": "string"
+     }
+    }
+   },
+   "required": [
+    "id",
+    "body",
+    "channel",
+    "subject",
+    "to"
+   ]
+  }
+ },
+ "option-list": {
+  "hint": "props: {id: str, options: [{id: str, label: str, description?: str, disabled?: bool}], role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, selectionMode?: 'multi'|'single', defaultValue?: [str]|str|any, choice?: [str]|str|any, actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'd...",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "options": {
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "description": {
+        "type": "string"
+       },
+       "disabled": {
+        "type": "boolean"
+       }
+      },
+      "required": [
+       "id",
+       "label"
+      ]
+     }
+    },
+    "selectionMode": {
+     "type": "string",
+     "enum": [
+      "multi",
+      "single"
+     ]
+    },
+    "defaultValue": {
+     "anyOf": [
+      {
+       "type": "array",
+       "items": {
+        "type": "string"
+       }
+      },
+      {
+       "type": "string"
+      },
+      {
+       "type": "null"
+      }
+     ]
+    },
+    "choice": {
+     "anyOf": [
+      {
+       "type": "array",
+       "items": {
+        "type": "string"
+       }
+      },
+      {
+       "type": "string"
+      },
+      {
+       "type": "null"
+      }
+     ]
+    },
+    "actions": {
+     "anyOf": [
+      {
+       "type": "array",
+       "items": {
+        "type": "object",
+        "properties": {
+         "id": {
+          "type": "string",
+          "minLength": 1
+         },
+         "label": {
+          "type": "string",
+          "minLength": 1
+         },
+         "sentence": {
+          "type": "string"
+         },
+         "confirmLabel": {
+          "type": "string"
+         },
+         "variant": {
+          "type": "string",
+          "enum": [
+           "default",
+           "destructive",
+           "secondary",
+           "ghost",
+           "outline"
+          ]
+         },
+         "loading": {
+          "type": "boolean"
+         },
+         "disabled": {
+          "type": "boolean"
+         },
+         "shortcut": {
+          "type": "string"
+         }
+        },
+        "required": [
+         "id",
+         "label"
+        ]
+       }
+      },
+      {
+       "type": "object",
+       "properties": {
+        "items": {
+         "minItems": 1,
+         "type": "array",
+         "items": {
+          "type": "object",
+          "properties": {
+           "id": {
+            "type": "string",
+            "minLength": 1
+           },
+           "label": {
+            "type": "string",
+            "minLength": 1
+           },
+           "sentence": {
+            "type": "string"
+           },
+           "confirmLabel": {
+            "type": "string"
+           },
+           "variant": {
+            "type": "string",
+            "enum": [
+             "default",
+             "destructive",
+             "secondary",
+             "ghost",
+             "outline"
+            ]
+           },
+           "loading": {
+            "type": "boolean"
+           },
+           "disabled": {
+            "type": "boolean"
+           },
+           "shortcut": {
+            "type": "string"
+           }
+          },
+          "required": [
+           "id",
+           "label"
+          ]
+         }
+        },
+        "align": {
+         "type": "string",
+         "enum": [
+          "left",
+          "center",
+          "right"
+         ]
+        },
+        "confirmTimeout": {
+         "type": "number",
+         "exclusiveMinimum": 0
+        }
+       },
+       "required": [
+        "items"
+       ]
+      }
+     ]
+    },
+    "minSelections": {
+     "type": "number",
+     "minimum": 0
+    },
+    "maxSelections": {
+     "type": "number",
+     "minimum": 1
+    }
+   },
+   "required": [
+    "id",
+    "options"
+   ],
+   "additionalProperties": false
+  }
+ },
+ "order-summary": {
+  "hint": "props: {id: str, items: [{id: str, name: str, unitPrice: num, description?: str, imageUrl?: str, quantity?: num}], pricing: {subtotal: num, total: num, tax?: num, taxLabel?: str, shipping?: num, discount?: num, discountLabel?: str, currency?: str}, role?: 'information'|'decision'|'control'|'state'|'composite', title?: str, variant?: 'summary'|'receipt', choice?: {action: str, orderId?: str, confirmedAt?: str}}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "title": {
+     "type": "string"
+    },
+    "variant": {
+     "type": "string",
+     "enum": [
+      "summary",
+      "receipt"
+     ]
+    },
+    "items": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string"
+       },
+       "name": {
+        "type": "string"
+       },
+       "description": {
+        "type": "string"
+       },
+       "imageUrl": {
+        "type": "string",
+        "format": "uri"
+       },
+       "quantity": {
+        "type": "integer",
+        "exclusiveMinimum": 0,
+        "maximum": 9007199254740991
+       },
+       "unitPrice": {
+        "type": "number"
+       }
+      },
+      "required": [
+       "id",
+       "name",
+       "unitPrice"
+      ]
+     }
+    },
+    "pricing": {
+     "type": "object",
+     "properties": {
+      "subtotal": {
+       "type": "number"
+      },
+      "tax": {
+       "type": "number"
+      },
+      "taxLabel": {
+       "type": "string"
+      },
+      "shipping": {
+       "type": "number"
+      },
+      "discount": {
+       "type": "number",
+       "minimum": 0
+      },
+      "discountLabel": {
+       "type": "string"
+      },
+      "total": {
+       "type": "number"
+      },
+      "currency": {
+       "type": "string"
+      }
+     },
+     "required": [
+      "subtotal",
+      "total"
+     ]
+    },
+    "choice": {
+     "type": "object",
+     "properties": {
+      "action": {
+       "type": "string",
+       "const": "confirm"
+      },
+      "orderId": {
+       "type": "string"
+      },
+      "confirmedAt": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "action"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "items",
+    "pricing"
+   ],
+   "additionalProperties": false
+  }
+ },
+ "parameter-slider": {
+  "hint": "props: {id: str, sliders: [{id: str, label: str, min: num, max: num, value: num, step?: num, unit?: str, precision?: num, disabled?: bool, trackClassName?: str, fillClassName?: str, handleClassName?: str}], role?: 'information'|'decision'|'control'|'state'|'composite', actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|'outline', loading?: bool, disa...",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "sliders": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "min": {
+        "type": "number"
+       },
+       "max": {
+        "type": "number"
+       },
+       "step": {
+        "type": "number",
+        "exclusiveMinimum": 0
+       },
+       "value": {
+        "type": "number"
+       },
+       "unit": {
+        "type": "string"
+       },
+       "precision": {
+        "type": "integer",
+        "minimum": 0,
+        "maximum": 9007199254740991
+       },
+       "disabled": {
+        "type": "boolean"
+       },
+       "trackClassName": {
+        "type": "string"
+       },
+       "fillClassName": {
+        "type": "string"
+       },
+       "handleClassName": {
+        "type": "string"
+       }
+      },
+      "required": [
+       "id",
+       "label",
+       "min",
+       "max",
+       "value"
+      ]
+     }
+    },
+    "actions": {
+     "anyOf": [
+      {
+       "type": "array",
+       "items": {
+        "type": "object",
+        "properties": {
+         "id": {
+          "type": "string",
+          "minLength": 1
+         },
+         "label": {
+          "type": "string",
+          "minLength": 1
+         },
+         "sentence": {
+          "type": "string"
+         },
+         "confirmLabel": {
+          "type": "string"
+         },
+         "variant": {
+          "type": "string",
+          "enum": [
+           "default",
+           "destructive",
+           "secondary",
+           "ghost",
+           "outline"
+          ]
+         },
+         "loading": {
+          "type": "boolean"
+         },
+         "disabled": {
+          "type": "boolean"
+         },
+         "shortcut": {
+          "type": "string"
+         }
+        },
+        "required": [
+         "id",
+         "label"
+        ]
+       }
+      },
+      {
+       "type": "object",
+       "properties": {
+        "items": {
+         "minItems": 1,
+         "type": "array",
+         "items": {
+          "type": "object",
+          "properties": {
+           "id": {
+            "type": "string",
+            "minLength": 1
+           },
+           "label": {
+            "type": "string",
+            "minLength": 1
+           },
+           "sentence": {
+            "type": "string"
+           },
+           "confirmLabel": {
+            "type": "string"
+           },
+           "variant": {
+            "type": "string",
+            "enum": [
+             "default",
+             "destructive",
+             "secondary",
+             "ghost",
+             "outline"
+            ]
+           },
+           "loading": {
+            "type": "boolean"
+           },
+           "disabled": {
+            "type": "boolean"
+           },
+           "shortcut": {
+            "type": "string"
+           }
+          },
+          "required": [
+           "id",
+           "label"
+          ]
+         }
+        },
+        "align": {
+         "type": "string",
+         "enum": [
+          "left",
+          "center",
+          "right"
+         ]
+        },
+        "confirmTimeout": {
+         "type": "number",
+         "exclusiveMinimum": 0
+        }
+       },
+       "required": [
+        "items"
+       ]
+      }
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "sliders"
+   ],
+   "additionalProperties": false
+  }
+ },
+ "plan": {
+  "hint": "props: {id: str, title: str, todos: [{id: str, label: str, status: 'pending'|'in_progress'|'completed'|'cancelled', description?: str}], role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, description?: str, maxVisibleTodos?: num}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "title": {
+     "type": "string",
+     "minLength": 1
+    },
+    "description": {
+     "type": "string"
+    },
+    "todos": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "status": {
+        "type": "string",
+        "enum": [
+         "pending",
+         "in_progress",
+         "completed",
+         "cancelled"
+        ]
+       },
+       "description": {
+        "type": "string"
+       }
+      },
+      "required": [
+       "id",
+       "label",
+       "status"
+      ]
+     }
+    },
+    "maxVisibleTodos": {
+     "type": "integer",
+     "minimum": 1,
+     "maximum": 9007199254740991
+    }
+   },
+   "required": [
+    "id",
+    "title",
+    "todos"
+   ]
+  }
+ },
+ "preferences-panel": {
+  "hint": "props: {id: str, sections: [{items: [any], heading?: str}], role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, title?: str, actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|'outline', loading?: bool, disabled?: bool, shortcut?: str}]...",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "title": {
+     "type": "string",
+     "minLength": 1
+    },
+    "sections": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "heading": {
+        "type": "string",
+        "minLength": 1
+       },
+       "items": {
+        "minItems": 1,
+        "type": "array",
+        "items": {
+         "oneOf": [
+          {
+           "type": "object",
+           "properties": {
+            "id": {
+             "type": "string",
+             "minLength": 1
+            },
+            "label": {
+             "type": "string",
+             "minLength": 1
+            },
+            "description": {
+             "type": "string"
+            },
+            "type": {
+             "type": "string",
+             "const": "switch"
+            },
+            "defaultChecked": {
+             "type": "boolean"
+            }
+           },
+           "required": [
+            "id",
+            "label",
+            "type"
+           ]
+          },
+          {
+           "type": "object",
+           "properties": {
+            "id": {
+             "type": "string",
+             "minLength": 1
+            },
+            "label": {
+             "type": "string",
+             "minLength": 1
+            },
+            "description": {
+             "type": "string"
+            },
+            "type": {
+             "type": "string",
+             "const": "toggle"
+            },
+            "options": {
+             "minItems": 2,
+             "type": "array",
+             "items": {
+              "type": "object",
+              "properties": {
+               "value": {
+                "type": "string",
+                "minLength": 1
+               },
+               "label": {
+                "type": "string",
+                "minLength": 1
+               }
+              },
+              "required": [
+               "value",
+               "label"
+              ]
+             }
+            },
+            "defaultValue": {
+             "type": "string"
+            }
+           },
+           "required": [
+            "id",
+            "label",
+            "type",
+            "options"
+           ]
+          },
+          {
+           "type": "object",
+           "properties": {
+            "id": {
+             "type": "string",
+             "minLength": 1
+            },
+            "label": {
+             "type": "string",
+             "minLength": 1
+            },
+            "description": {
+             "type": "string"
+            },
+            "type": {
+             "type": "string",
+             "const": "select"
+            },
+            "selectOptions": {
+             "minItems": 5,
+             "type": "array",
+             "items": {
+              "type": "object",
+              "properties": {
+               "value": {
+                "type": "string",
+                "minLength": 1
+               },
+               "label": {
+                "type": "string",
+                "minLength": 1
+               }
+              },
+              "required": [
+               "value",
+               "label"
+              ]
+             }
+            },
+            "defaultSelected": {
+             "type": "string"
+            }
+           },
+           "required": [
+            "id",
+            "label",
+            "type",
+            "selectOptions"
+           ]
+          }
+         ]
+        }
+       }
+      },
+      "required": [
+       "items"
+      ]
+     }
+    },
+    "actions": {
+     "anyOf": [
+      {
+       "type": "array",
+       "items": {
+        "type": "object",
+        "properties": {
+         "id": {
+          "type": "string",
+          "minLength": 1
+         },
+         "label": {
+          "type": "string",
+          "minLength": 1
+         },
+         "sentence": {
+          "type": "string"
+         },
+         "confirmLabel": {
+          "type": "string"
+         },
+         "variant": {
+          "type": "string",
+          "enum": [
+           "default",
+           "destructive",
+           "secondary",
+           "ghost",
+           "outline"
+          ]
+         },
+         "loading": {
+          "type": "boolean"
+         },
+         "disabled": {
+          "type": "boolean"
+         },
+         "shortcut": {
+          "type": "string"
+         }
+        },
+        "required": [
+         "id",
+         "label"
+        ]
+       }
+      },
+      {
+       "type": "object",
+       "properties": {
+        "items": {
+         "minItems": 1,
+         "type": "array",
+         "items": {
+          "type": "object",
+          "properties": {
+           "id": {
+            "type": "string",
+            "minLength": 1
+           },
+           "label": {
+            "type": "string",
+            "minLength": 1
+           },
+           "sentence": {
+            "type": "string"
+           },
+           "confirmLabel": {
+            "type": "string"
+           },
+           "variant": {
+            "type": "string",
+            "enum": [
+             "default",
+             "destructive",
+             "secondary",
+             "ghost",
+             "outline"
+            ]
+           },
+           "loading": {
+            "type": "boolean"
+           },
+           "disabled": {
+            "type": "boolean"
+           },
+           "shortcut": {
+            "type": "string"
+           }
+          },
+          "required": [
+           "id",
+           "label"
+          ]
+         }
+        },
+        "align": {
+         "type": "string",
+         "enum": [
+          "left",
+          "center",
+          "right"
+         ]
+        },
+        "confirmTimeout": {
+         "type": "number",
+         "exclusiveMinimum": 0
+        }
+       },
+       "required": [
+        "items"
+       ]
+      }
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "sections"
+   ],
+   "additionalProperties": false
+  }
+ },
+ "progress-tracker": {
+  "hint": "props: {id: str, steps: [{id: str, label: str, status: 'pending'|'in-progress'|'completed'|'failed', description?: str}], role?: 'information'|'decision'|'control'|'state'|'composite', elapsedTime?: num, choice?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "steps": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "description": {
+        "type": "string"
+       },
+       "status": {
+        "type": "string",
+        "enum": [
+         "pending",
+         "in-progress",
+         "completed",
+         "failed"
+        ]
+       }
+      },
+      "required": [
+       "id",
+       "label",
+       "status"
+      ]
+     }
+    },
+    "elapsedTime": {
+     "type": "number",
+     "minimum": 0
+    },
+    "choice": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "steps"
+   ],
+   "additionalProperties": false
+  }
+ },
+ "question-flow": {
+  "hint": "props: {id: str, step: num, title: str, options: [{id: str, label: str, description?: str, disabled?: bool}], role?: 'information'|'decision'|'control'|'state'|'composite', description?: str, selectionMode?: 'single'|'multi'}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "step": {
+     "type": "number",
+     "minimum": 1
+    },
+    "title": {
+     "type": "string",
+     "minLength": 1
+    },
+    "description": {
+     "type": "string"
+    },
+    "options": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "id": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "description": {
+        "type": "string"
+       },
+       "disabled": {
+        "type": "boolean"
+       }
+      },
+      "required": [
+       "id",
+       "label"
+      ]
+     }
+    },
+    "selectionMode": {
+     "type": "string",
+     "enum": [
+      "single",
+      "multi"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "step",
+    "title",
+    "options"
+   ]
+  }
+ },
+ "stats-display": {
+  "hint": "props: {id: str, stats: [{key: str, label: str, value: str|num, format?: any, diff?: obj, sparkline?: obj}], role?: 'information'|'decision'|'control'|'state'|'composite', title?: str, description?: str}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    },
+    "stats": {
+     "minItems": 1,
+     "type": "array",
+     "items": {
+      "type": "object",
+      "properties": {
+       "key": {
+        "type": "string",
+        "minLength": 1
+       },
+       "label": {
+        "type": "string",
+        "minLength": 1
+       },
+       "value": {
+        "anyOf": [
+         {
+          "type": "string"
+         },
+         {
+          "type": "number"
+         }
+        ]
+       },
+       "format": {
+        "oneOf": [
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "text"
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "number"
+           },
+           "decimals": {
+            "type": "integer",
+            "minimum": 0,
+            "maximum": 9007199254740991
+           },
+           "compact": {
+            "type": "boolean"
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "currency"
+           },
+           "currency": {
+            "type": "string",
+            "minLength": 1
+           },
+           "decimals": {
+            "type": "integer",
+            "minimum": 0,
+            "maximum": 9007199254740991
+           }
+          },
+          "required": [
+           "kind",
+           "currency"
+          ]
+         },
+         {
+          "type": "object",
+          "properties": {
+           "kind": {
+            "type": "string",
+            "const": "percent"
+           },
+           "decimals": {
+            "type": "integer",
+            "minimum": 0,
+            "maximum": 9007199254740991
+           },
+           "basis": {
+            "type": "string",
+            "enum": [
+             "fraction",
+             "unit"
+            ]
+           }
+          },
+          "required": [
+           "kind"
+          ]
+         }
+        ]
+       },
+       "diff": {
+        "type": "object",
+        "properties": {
+         "value": {
+          "type": "number"
+         },
+         "decimals": {
+          "type": "integer",
+          "minimum": 0,
+          "maximum": 9007199254740991
+         },
+         "upIsPositive": {
+          "type": "boolean"
+         },
+         "label": {
+          "type": "string"
+         }
+        },
+        "required": [
+         "value"
+        ]
+       },
+       "sparkline": {
+        "type": "object",
+        "properties": {
+         "data": {
+          "minItems": 2,
+          "type": "array",
+          "items": {
+           "type": "number"
+          }
+         },
+         "color": {
+          "type": "string"
+         }
+        },
+        "required": [
+         "data"
+        ]
+       }
+      },
+      "required": [
+       "key",
+       "label",
+       "value"
+      ]
+     }
+    }
+   },
+   "required": [
+    "id",
+    "stats"
+   ]
+  }
+ },
+ "terminal": {
+  "hint": "props: {id: str, command: str, exitCode: num, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, stdout?: str, stderr?: str, durationMs?: num, cwd?: str, truncated?: bool, maxCollapsedLines?: num}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "command": {
+     "type": "string"
+    },
+    "stdout": {
+     "type": "string"
+    },
+    "stderr": {
+     "type": "string"
+    },
+    "exitCode": {
+     "type": "integer",
+     "minimum": 0,
+     "maximum": 9007199254740991
+    },
+    "durationMs": {
+     "type": "number"
+    },
+    "cwd": {
+     "type": "string"
+    },
+    "truncated": {
+     "type": "boolean"
+    },
+    "maxCollapsedLines": {
+     "type": "number",
+     "minimum": 1
+    }
+   },
+   "required": [
+    "id",
+    "command",
+    "exitCode"
+   ]
+  }
+ },
+ "video": {
+  "hint": "props: {id: str, assetId: str, src: str, role?: 'information'|'decision'|'control'|'state'|'composite', receipt?: {outcome: 'success'|'partial'|'failed'|'cancelled', summary: str, at: str, identifiers?: obj}, poster?: str, title?: str, description?: str, href?: str, domain?: str, durationMs?: num, ratio?: 'auto'|'1:1'|'4:3'|'16:9'|'9:16', fit?: 'cover'|'contain', createdAt?: str, locale?: str, source?: {label: str, iconU...",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string",
+     "minLength": 1
+    },
+    "role": {
+     "type": "string",
+     "enum": [
+      "information",
+      "decision",
+      "control",
+      "state",
+      "composite"
+     ]
+    },
+    "receipt": {
+     "type": "object",
+     "properties": {
+      "outcome": {
+       "type": "string",
+       "enum": [
+        "success",
+        "partial",
+        "failed",
+        "cancelled"
+       ]
+      },
+      "summary": {
+       "type": "string",
+       "minLength": 1
+      },
+      "identifiers": {
+       "type": "object",
+       "propertyNames": {
+        "type": "string"
+       },
+       "additionalProperties": {
+        "type": "string"
+       }
+      },
+      "at": {
+       "type": "string",
+       "format": "date-time",
+       "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+      }
+     },
+     "required": [
+      "outcome",
+      "summary",
+      "at"
+     ]
+    },
+    "assetId": {
+     "type": "string"
+    },
+    "src": {
+     "type": "string",
+     "format": "uri"
+    },
+    "poster": {
+     "type": "string",
+     "format": "uri"
+    },
+    "title": {
+     "type": "string"
+    },
+    "description": {
+     "type": "string"
+    },
+    "href": {
+     "type": "string",
+     "format": "uri"
+    },
+    "domain": {
+     "type": "string"
+    },
+    "durationMs": {
+     "type": "integer",
+     "exclusiveMinimum": 0,
+     "maximum": 9007199254740991
+    },
+    "ratio": {
+     "default": "auto",
+     "type": "string",
+     "enum": [
+      "auto",
+      "1:1",
+      "4:3",
+      "16:9",
+      "9:16"
+     ]
+    },
+    "fit": {
+     "default": "cover",
+     "type": "string",
+     "enum": [
+      "cover",
+      "contain"
+     ]
+    },
+    "createdAt": {
+     "type": "string",
+     "format": "date-time",
+     "pattern": "^(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))T(?:(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?(?:Z))$"
+    },
+    "locale": {
+     "type": "string"
+    },
+    "source": {
+     "type": "object",
+     "properties": {
+      "label": {
+       "type": "string"
+      },
+      "iconUrl": {
+       "type": "string",
+       "format": "uri"
+      },
+      "url": {
+       "type": "string",
+       "format": "uri"
+      }
+     },
+     "required": [
+      "label"
+     ]
+    }
+   },
+   "required": [
+    "id",
+    "assetId",
+    "src"
+   ]
+  }
+ },
+ "x-post": {
+  "hint": "props: {id: str, author: {name: str, handle: str, avatarUrl: str, verified?: bool}, text?: str, media?: {type: 'image'|'video', url: str, alt: str, aspectRatio?: '1:1'|'4:3'|'16:9'|'9:16'}, linkPreview?: {url: str, title?: str, description?: str, imageUrl?: str, domain?: str}, quotedPost?: any, stats?: {likes?: num, isLiked?: bool, isReposted?: bool, isBookmarked?: bool}, createdAt?: str}",
+  "schema": {
+   "$schema": "https://json-schema.org/draft/2020-12/schema",
+   "type": "object",
+   "properties": {
+    "id": {
+     "type": "string"
+    },
+    "author": {
+     "type": "object",
+     "properties": {
+      "name": {
+       "type": "string"
+      },
+      "handle": {
+       "type": "string"
+      },
+      "avatarUrl": {
+       "type": "string",
+       "format": "uri"
+      },
+      "verified": {
+       "type": "boolean"
+      }
+     },
+     "required": [
+      "name",
+      "handle",
+      "avatarUrl"
+     ]
+    },
+    "text": {
+     "type": "string"
+    },
+    "media": {
+     "type": "object",
+     "properties": {
+      "type": {
+       "type": "string",
+       "enum": [
+        "image",
+        "video"
+       ]
+      },
+      "url": {
+       "type": "string",
+       "format": "uri"
+      },
+      "alt": {
+       "type": "string"
+      },
+      "aspectRatio": {
+       "type": "string",
+       "enum": [
+        "1:1",
+        "4:3",
+        "16:9",
+        "9:16"
+       ]
+      }
+     },
+     "required": [
+      "type",
+      "url",
+      "alt"
+     ]
+    },
+    "linkPreview": {
+     "type": "object",
+     "properties": {
+      "url": {
+       "type": "string",
+       "format": "uri"
+      },
+      "title": {
+       "type": "string"
+      },
+      "description": {
+       "type": "string"
+      },
+      "imageUrl": {
+       "type": "string",
+       "format": "uri"
+      },
+      "domain": {
+       "type": "string"
+      }
+     },
+     "required": [
+      "url"
+     ]
+    },
+    "quotedPost": {
+     "$ref": "#"
+    },
+    "stats": {
+     "type": "object",
+     "properties": {
+      "likes": {
+       "type": "number"
+      },
+      "isLiked": {
+       "type": "boolean"
+      },
+      "isReposted": {
+       "type": "boolean"
+      },
+      "isBookmarked": {
+       "type": "boolean"
+      }
+     }
+    },
+    "createdAt": {
+     "type": "string"
+    }
+   },
+   "required": [
+    "id",
+    "author"
+   ]
+  }
+ }
+}
\ No newline at end of file
diff --git a/frontend/scripts/gen-toolui-hints.ts b/frontend/scripts/gen-toolui-hints.ts
index 4ada1643..15b0b782 100644
--- a/frontend/scripts/gen-toolui-hints.ts
+++ b/frontend/scripts/gen-toolui-hints.ts
@@ -42,7 +42,9 @@ function describe(node: any, depth: number): string {
     if (depth >= 2) return 'obj';
     const req = new Set(node.required || []);
     const props = node.properties || {};
-    const parts = Object.keys(props).map((k) => `${k}${req.has(k) ? '' : '?'}: ${describe(props[k], depth + 1)}`);
+    // Required props FIRST so tail truncation can only ever cost optional detail, never a required field.
+    const keys = Object.keys(props).sort((a, b) => Number(req.has(b)) - Number(req.has(a)));
+    const parts = keys.map((k) => `${k}${req.has(k) ? '' : '?'}: ${describe(props[k], depth + 1)}`);
     return `{${parts.join(', ')}}`;
   }
   if (t === 'string') return 'str';
@@ -52,22 +54,19 @@ function describe(node: any, depth: number): string {
 }
 
 async function main(): Promise<void> {
-  const out: Record<string, string> = {};
+  const fs = await import('fs');
+  const out: Record<string, { hint: string; schema: unknown }> = {};
   for (const [name, [path, exportName]] of Object.entries(TARGETS)) {
-    try {
-      const mod = await import(path);
-      const schema = mod[exportName];
-      const js = z.toJSONSchema(schema, { unrepresentable: 'any', io: 'input' } as any) as any;
-      let hint = describe(js, 0);
-      if (hint.length > 360) hint = hint.slice(0, 357) + '...';
-      out[name] = hint;
-    } catch (e) {
-      out[name] = `ERROR: ${(e as Error).message.slice(0, 80)}`;
-    }
-  }
-  for (const [name, hint] of Object.entries(out)) {
-    console.log(`    "${name}": "props: ${hint.replace(/"/g, "'")}",`);
+    const mod = await import(path);
+    const schema = mod[exportName];
+    const js = z.toJSONSchema(schema, { unrepresentable: 'any', io: 'input' } as any) as any;
+    let hint = describe(js, 0);
+    if (hint.length > 420) hint = hint.slice(0, 417) + '...';
+    out[name] = { hint: `props: ${hint.replace(/"/g, "'")}`, schema: js };
   }
+  const dest = new URL('../../backend/apps/agents/toolui_schemas.json', import.meta.url).pathname;
+  fs.writeFileSync(dest, JSON.stringify(out, null, 1));
+  console.log(`wrote ${Object.keys(out).length} component schemas to ${dest}`);
 }
 
 void main();
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx b/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
index 583a8ac3..d4b78c07 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/ShowUiWidgetView.tsx
@@ -6,9 +6,9 @@ import LinksWidget from './LinksWidget';
 import VendoredToolUi from '@toolui/VendoredToolUi';
 import type { ShowUiPayload } from './showUiPayload';
 
-/** One switch for every surface that renders a ShowUI payload (chat bubble, pill artifact). */
-function ShowUiWidgetView({ payload }: { payload: ShowUiPayload }): React.ReactElement | null {
-  if (payload.component === 'weather') return <WeatherWidget props={payload.props} />;
+/** One switch for every surface that renders a ShowUI payload (chat bubble, pill artifact); ambient = low-cost render for resting surfaces. */
+function ShowUiWidgetView({ payload, ambient }: { payload: ShowUiPayload; ambient?: boolean }): React.ReactElement | null {
+  if (payload.component === 'weather') return <WeatherWidget props={payload.props} ambient={ambient} />;
   if (payload.component === 'plan') return <PlanWidget props={payload.props} />;
   if (payload.component === 'stats') return <StatsWidget props={payload.props} />;
   if (payload.component === 'links') return <LinksWidget props={payload.props} />;
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
index 7968f5d7..541410ba 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx
@@ -23,7 +23,7 @@ function toConditionCode(condition: string | undefined): WeatherConditionCode {
 }
 
 /** Agent-facing 'weather' shape adapted onto the vendored animated (WebGL) weather widget. */
-function WeatherWidget({ props }: { props: WeatherProps }): React.ReactElement {
+function WeatherWidget({ props, ambient }: { props: WeatherProps; ambient?: boolean }): React.ReactElement {
   const { mode } = useThemeMode();
   const forecast: ForecastDay[] = (props.forecast || []).slice(0, 7).map((d) => ({
     label: d.day,
@@ -48,7 +48,7 @@ function WeatherWidget({ props }: { props: WeatherProps }): React.ReactElement {
         }}
         forecast={forecast}
         time={{ localTimeOfDay: new Date().getHours() + new Date().getMinutes() / 60 }}
-        effects={{ enabled: true, quality: 'auto' }}
+        effects={{ enabled: true, quality: ambient ? 'low' : 'auto' }}
       />
     </div>
   );
diff --git a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
index 6d529b94..9c942d4f 100644
--- a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
@@ -73,7 +73,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
 
       {artifact ? (
         <Box key={artifactKey} className="osw-artifact">
-          <ShowUiWidgetView payload={artifact} />
+          <ShowUiWidgetView payload={artifact} ambient />
         </Box>
       ) : browserShot ? (
         <Box
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
index ee366058..a23795d6 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import { useThemeMode } from '@/shared/styles/ThemeContext';
+import './desktop.css';
 
 /**
  * Monterey-style layered-ridge wallpaper. Design rules: scenery not signal (long smooth ridges,
diff --git a/frontend/src/app/pages/Dashboard/desktop/desktop.css b/frontend/src/app/pages/Dashboard/desktop/desktop.css
new file mode 100644
index 00000000..814e3a74
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/desktop.css
@@ -0,0 +1,6 @@
+/* While any card/marquee drag is live, glass stops sampling its backdrop: backdrop-filter re-blurs
+   a card-sized region EVERY frame under motion and is the single biggest drag-jank source. */
+body.dashboard-marquee-active * {
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}

From 249ec9f945801208b13479c05d90212f3d0ac6b4 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 17:05:07 -0700
Subject: [PATCH 097/248] [eric] onboarding: land reveal camera on welcome chat
 at readable zoom, not the whole cluster

---
 .../lifecycle/useOnboardingRevealSeed.ts      | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index b6d0b058..19939017 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -29,7 +29,7 @@ export function revealAppSpot(anchor: { cx: number; cy: number }): { x: number;
   return { x: anchor.cx + DEFAULT_CARD_W / 2 + GAP, y: anchor.cy - EXPANDED_CARD_MIN_H / 2 };
 }
 
-// The reveal: onboarding v3 finished behind the curtain and the prepped work (a personal dashboard app, a live web-research dig, a read-only file tidy-up, and one recurring task) has been running since mid-flow. Compose one tight readable cluster: welcome chat center, jobs stacked left, the plain-English note right; the app view card is born at the arc end (via revealAnchor + the lifecycle auto-add) and the camera glides to it when it arrives. The keep/discard toast owns the jobs' fate afterward.
+// The reveal: onboarding v3 finished behind the curtain and the prepped work (a personal dashboard app, a live web-research dig, a read-only file tidy-up, and one recurring task) has been running since mid-flow. Compose: welcome chat center, job grid + Workflows app to its left, app view card born to its right (via revealAnchor + the lifecycle auto-add). The camera lands on JUST the chat + app slot at readable zoom; the rest peeks in from the left for the user to click into. The keep/discard toast owns the jobs' fate afterward.
 export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards }: Args): void {
   const dispatch = useAppDispatch();
   const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
@@ -111,21 +111,18 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
           }
         }
         createWelcomeDraft();
-        // Frame the whole cluster (left job column + chat + app view card on the right) so the reveal is
-        // readable, not scattered. The pipeline ALWAYS sets up one scheduled task, whose RunMonitor card is
-        // tall and lands late; reserve its slot now (2 short job cards + the monitor) so the camera never
-        // cuts it off when it arrives. Width runs from the left column to the far edge of the app view card.
-        const left = cx - DEFAULT_CARD_W / 2 - 2 * GAP - 2 * DEFAULT_CARD_W; // left edge of the 2-col grid
-        const top = cy - EXPANDED_CARD_MIN_H / 2;
-        const right = cx + DEFAULT_CARD_W / 2 + GAP + DEFAULT_CARD_W; // right edge of the app view card
-        // The agent cards lay out as a 2-column grid (2 enlarged rows) with the full Workflows app spanning
-        // a wide row below them. Reserve for both now so the schedule, which lands late, is already in frame.
-        const stackH = 2 * (EXPANDED_CARD_MIN_H + 24) + REVEAL_WORKFLOW_H;
-        // Reserve headroom at the top so the topmost cards clear the macOS traffic lights + the floating
-        // dashboard title pill + the run-status pill, instead of the chat header landing under them.
+        // Land READABLE: frame only the welcome chat + the app slot beside it. Fitting the whole
+        // cluster (grid + Workflows row, ~2000x1850 canvas) forced ~25% zoom: text unreadable AND
+        // every card on-screen at once (nothing can suspend). The job grid edges into the left of
+        // frame as the discovery cue, and the app view card is born inside the frame so its arrival
+        // never yanks the camera; one click on any card still focuses it (fitToCards at 1.15).
+        const frameLeft = cx - DEFAULT_CARD_W / 2;
+        const frameRight = revealAppSpot({ cx, cy }).x + DEFAULT_CARD_W;
+        // Reserve headroom at the top so the chat header clears the macOS traffic lights + the
+        // floating dashboard title pill + the RevealHero panel, instead of landing under them.
         const TOP_CHROME_PAD = 130;
         fitToCards(
-          [{ x: left, y: top - TOP_CHROME_PAD, width: right - left, height: Math.max(EXPANDED_CARD_MIN_H, stackH) + TOP_CHROME_PAD }],
+          [{ x: frameLeft, y: cy - EXPANDED_CARD_MIN_H / 2 - TOP_CHROME_PAD, width: frameRight - frameLeft, height: EXPANDED_CARD_MIN_H + TOP_CHROME_PAD }],
           0.9,
           true,
         );

From cd0ddcb6b54f3dd54ec8df564e302a19ced15da8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 17:25:55 -0700
Subject: [PATCH 098/248] [eric] ui-tools: live in-place card updates (same
 component+id); social posts wrapped as {post} (flat props crashed the shell);
 per-component error wall; item-carousel validates the carousel shape

---
 .../prompt/compose_turn_system_prompt.py      |  2 +
 backend/apps/agents/show_ui_mcp_server.py     |  7 +-
 backend/apps/agents/toolui_schemas.json       | 90 ++++++++++++-------
 frontend/scripts/gen-toolui-hints.ts          |  2 +-
 .../src/app/pages/AgentChat/AgentChat.tsx     | 37 +++++++-
 frontend/src/toolui/VendoredToolUi.tsx        | 35 +++++++-
 frontend/src/toolui/registry.tsx              | 15 +++-
 7 files changed, 143 insertions(+), 45 deletions(-)

diff --git a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
index 216fbe3c..5fe0d19e 100644
--- a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
+++ b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
@@ -101,6 +101,8 @@ def compose_turn_system_prompt(
                 "Strongly prefer rendering rich UI over prose, every time the content fits:\n"
                 "- ShowUI for any structured result: tables, stats, links, plans, progress, code, diffs, "
                 "charts, maps, media, posts, receipts. Render the component, then add one line of text.\n"
+                "- For multi-step work, render a progress-tracker FIRST and re-call ShowUI with the SAME "
+                "props.id after each step so the card advances live; same-id re-calls update in place.\n"
                 "- AskUI for ANY question with enumerable choices, an approval, or tunable values: render "
                 "it and wait for the answer instead of asking in prose. Flat choices = option-list; a "
                 "multi-question form = one AskUI call per question in sequence. The user can always "
diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
index c8004e42..88164f3d 100644
--- a/backend/apps/agents/show_ui_mcp_server.py
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -34,7 +34,7 @@ def p_load_generated():
 GENERATED = p_load_generated()
 
 COMPONENT_SPECS = {
-    "weather": "props: {location: str, temp: number, unit?: 'F'|'C', high?: number, low?: number, condition?: str, forecast?: [{day: str, condition?: str, high?: number, low?: number}] (max 7)}",
+    "weather": "props: {id?: str, location: str, temp: number, unit?: 'F'|'C', high?: number, low?: number, condition?: str, forecast?: [{day: str, condition?: str, high?: number, low?: number}] (max 7)}",
     "stats": "props: {title?: str, stats: [{label: str, value: str, delta?: str, direction?: 'up'|'down'}] (max 8)}",
     "links": "props: {links: [{title: str, url: str, description?: str}] (max 10)}",
 }
@@ -82,7 +82,10 @@ TOOLS = [
             "Use it whenever a result fits one of the shapes. Supported components:\n"
             + "\n".join(f"- '{name}': {spec}" for name, spec in COMPONENT_SPECS.items())
             + "\nCall it with the component name and a props object matching that shape. "
-            "The component renders in place of raw text; still give a one-line text summary after."
+            "The component renders in place of raw text; still give a one-line text summary after. "
+            "LIVE UPDATES: calling ShowUI again with the SAME component and props.id updates that "
+            "card in place. Use this to advance progress-tracker/plan step statuses AS you complete "
+            "each step of real work, or to refresh data; never mint a new id for an update."
         ),
         "inputSchema": {
             "type": "object",
diff --git a/backend/apps/agents/toolui_schemas.json b/backend/apps/agents/toolui_schemas.json
index 254665b8..3e91b536 100644
--- a/backend/apps/agents/toolui_schemas.json
+++ b/backend/apps/agents/toolui_schemas.json
@@ -1806,7 +1806,7 @@
   }
  },
  "item-carousel": {
-  "hint": "props: {id: str, name: str, subtitle?: str, image?: str, color?: str, actions?: [{id: str, label: str, sentence?: str, confirmLabel?: str, variant?: 'default'|'destructive'|'secondary'|'ghost'|'outline', loading?: bool, disabled?: bool, shortcut?: str}]}",
+  "hint": "props: {id: str, items: [{id: str, name: str, subtitle?: str, image?: str, color?: str, actions?: [obj]}], title?: str, description?: str}",
   "schema": {
    "$schema": "https://json-schema.org/draft/2020-12/schema",
    "type": "object",
@@ -1815,21 +1815,13 @@
      "type": "string",
      "minLength": 1
     },
-    "name": {
-     "type": "string",
-     "minLength": 1
-    },
-    "subtitle": {
+    "title": {
      "type": "string"
     },
-    "image": {
-     "type": "string",
-     "format": "uri"
-    },
-    "color": {
+    "description": {
      "type": "string"
     },
-    "actions": {
+    "items": {
      "type": "array",
      "items": {
       "type": "object",
@@ -1838,46 +1830,76 @@
         "type": "string",
         "minLength": 1
        },
-       "label": {
+       "name": {
         "type": "string",
         "minLength": 1
        },
-       "sentence": {
+       "subtitle": {
         "type": "string"
        },
-       "confirmLabel": {
-        "type": "string"
-       },
-       "variant": {
+       "image": {
         "type": "string",
-        "enum": [
-         "default",
-         "destructive",
-         "secondary",
-         "ghost",
-         "outline"
-        ]
+        "format": "uri"
        },
-       "loading": {
-        "type": "boolean"
-       },
-       "disabled": {
-        "type": "boolean"
-       },
-       "shortcut": {
+       "color": {
         "type": "string"
+       },
+       "actions": {
+        "type": "array",
+        "items": {
+         "type": "object",
+         "properties": {
+          "id": {
+           "type": "string",
+           "minLength": 1
+          },
+          "label": {
+           "type": "string",
+           "minLength": 1
+          },
+          "sentence": {
+           "type": "string"
+          },
+          "confirmLabel": {
+           "type": "string"
+          },
+          "variant": {
+           "type": "string",
+           "enum": [
+            "default",
+            "destructive",
+            "secondary",
+            "ghost",
+            "outline"
+           ]
+          },
+          "loading": {
+           "type": "boolean"
+          },
+          "disabled": {
+           "type": "boolean"
+          },
+          "shortcut": {
+           "type": "string"
+          }
+         },
+         "required": [
+          "id",
+          "label"
+         ]
+        }
        }
       },
       "required": [
        "id",
-       "label"
+       "name"
       ]
      }
     }
    },
    "required": [
     "id",
-    "name"
+    "items"
    ]
   }
  },
diff --git a/frontend/scripts/gen-toolui-hints.ts b/frontend/scripts/gen-toolui-hints.ts
index 15b0b782..75f42631 100644
--- a/frontend/scripts/gen-toolui-hints.ts
+++ b/frontend/scripts/gen-toolui-hints.ts
@@ -15,7 +15,7 @@ const TARGETS: Record<string, [string, string]> = {
   'image': ['../src/toolui/components/image/schema', 'SerializableImageSchema'],
   'image-gallery': ['../src/toolui/components/image-gallery/schema', 'SerializableImageGallerySchema'],
   'instagram-post': ['../src/toolui/components/instagram-post/schema', 'SerializableInstagramPostSchema'],
-  'item-carousel': ['../src/toolui/components/item-carousel/schema', 'SerializableItemSchema'],
+  'item-carousel': ['../src/toolui/components/item-carousel/schema', 'SerializableItemCarouselSchema'],
   'link-preview': ['../src/toolui/components/link-preview/schema', 'SerializableLinkPreviewSchema'],
   'linkedin-post': ['../src/toolui/components/linkedin-post/schema', 'SerializableLinkedInPostSchema'],
   'message-draft': ['../src/toolui/components/message-draft/schema', 'SerializableEmailDraftSchema'],
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index e866039f..e2077877 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -1058,6 +1058,25 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   const renderItems: RenderItem[] = useMemo(() => {
     const items: RenderItem[] = [];
     let i = 0;
+    // Live-updating cards: repeated ShowUI calls with the SAME component+props.id are one card that
+    // UPDATES IN PLACE at its first position (progress advances, data refreshes), never a stack of
+    // stale snapshots. Pre-scan maps each id key to its first slot and its latest call+result.
+    const firstCallIdByKey = new Map<string, string>();
+    const latestByKey = new Map<string, { call: (typeof activeBranchMessages)[number]; result: (typeof activeBranchMessages)[number] | null }>();
+    const keyByCallId = new Map<string, string>();
+    for (let s = 0; s < activeBranchMessages.length; s++) {
+      const m = activeBranchMessages[s];
+      const mc = m.content;
+      if (m.role !== 'tool_call' || typeof mc !== 'object' || !/(^|__)ShowUI$/.test(String(mc?.tool || ''))) continue;
+      const input = mc?.input as { component?: unknown; props?: { id?: unknown } } | undefined;
+      const compId = input?.props?.id;
+      if (!input?.component || typeof compId !== 'string' || !compId) continue;
+      const key = `${input.component}:${compId}`;
+      keyByCallId.set(m.id, key);
+      if (!firstCallIdByKey.has(key)) firstCallIdByKey.set(key, m.id);
+      const next = activeBranchMessages[s + 1];
+      latestByKey.set(key, { call: m, result: next && next.role === 'tool_result' ? next : null });
+    }
     // Narration that led INTO a tool phase; folds into that phase's group on a finished session.
     let leadNotes: typeof activeBranchMessages = [];
     while (i < activeBranchMessages.length) {
@@ -1177,7 +1196,23 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
           // Phase held only ShowUI/AskUI pairs: narration has no group to fold into, keep it visible.
           for (const nm of noteMarks) items.push(nm.msg);
         }
-        items.push(...showUiPairs);
+        for (const p of showUiPairs) {
+          const key = keyByCallId.get(p.call.id);
+          if (!key || isAskUiPair(p)) {
+            items.push(p);
+            continue;
+          }
+          // Later updates render nowhere themselves; the first slot always shows the latest call
+          // under a STABLE key so React updates the mounted component instead of remounting it.
+          if (p.call.id !== firstCallIdByKey.get(key)) continue;
+          const latest = latestByKey.get(key);
+          items.push({
+            type: 'tool_pair' as const,
+            id: `showui-${key}`,
+            call: latest ? latest.call : p.call,
+            result: latest ? latest.result : p.result,
+          });
+        }
       } else {
         if (!sessionRunning && msg.role === 'assistant') {
           let j = i;
diff --git a/frontend/src/toolui/VendoredToolUi.tsx b/frontend/src/toolui/VendoredToolUi.tsx
index 7cc5ff04..fdbbd0c3 100644
--- a/frontend/src/toolui/VendoredToolUi.tsx
+++ b/frontend/src/toolui/VendoredToolUi.tsx
@@ -2,6 +2,33 @@ import React, { Suspense, useEffect, useState } from 'react';
 import { useThemeMode } from '@/shared/styles/ThemeContext';
 import { TOOL_UI_REGISTRY } from './registry';
 
+interface GuardProps { name: string; children: React.ReactNode }
+
+// A component render throwing must cost exactly one quiet line, never the app: the top-level
+// ErrorBoundary unmounts the whole shell for any uncaught child throw (the linkedin-post {post}
+// mismatch took down the dashboard until this wall existed).
+class ComponentGuard extends React.Component<GuardProps, { failed: boolean }> {
+  constructor(props: GuardProps) {
+    super(props);
+    this.state = { failed: false };
+  }
+
+  static getDerivedStateFromError(): { failed: boolean } {
+    return { failed: true };
+  }
+
+  render(): React.ReactNode {
+    if (this.state.failed) {
+      return (
+        <div style={{ fontSize: '0.75rem', opacity: 0.55, padding: '4px 0' }}>
+          {this.props.name} failed to render
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 interface VendoredToolUiProps {
   name: string;
   props: Record<string, unknown>;
@@ -65,9 +92,11 @@ function VendoredToolUi({ name, props, extraProps }: VendoredToolUiProps): React
   const Component = entry.Component;
   return (
     <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`}>
-      <Suspense fallback={<div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />}>
-        <Component {...gate.parsed} {...(extraProps || {})} />
-      </Suspense>
+      <ComponentGuard name={name}>
+        <Suspense fallback={<div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />}>
+          <Component {...gate.parsed} {...(extraProps || {})} />
+        </Suspense>
+      </ComponentGuard>
     </div>
   );
 }
diff --git a/frontend/src/toolui/registry.tsx b/frontend/src/toolui/registry.tsx
index 06791380..39e54561 100644
--- a/frontend/src/toolui/registry.tsx
+++ b/frontend/src/toolui/registry.tsx
@@ -10,6 +10,13 @@ export interface ToolUiEntry {
 
 /* Every entry lazy-loads both the component and its zod contract so the chat bundle only pays
    for components a transcript actually uses. Names mirror upstream tool-ui component slugs. */
+// The social-post components take their data nested as {post}; the wire props ARE the post.
+function wrapAsPost<P extends { id?: unknown }>(Inner: React.ComponentType<{ post: P }>): React.ComponentType<P> {
+  return function PostAdapter(props: P) {
+    return <Inner post={props} />;
+  };
+}
+
 export const TOOL_UI_REGISTRY: Record<string, ToolUiEntry> = {
   'audio': {
     Component: lazy(() => import('./components/audio').then((m) => ({ default: m.Audio }))),
@@ -52,19 +59,19 @@ export const TOOL_UI_REGISTRY: Record<string, ToolUiEntry> = {
     loadSchema: () => import('./components/image-gallery/schema').then((m) => m.SerializableImageGallerySchema),
   },
   'instagram-post': {
-    Component: lazy(() => import('./components/instagram-post').then((m) => ({ default: m.InstagramPost }))),
+    Component: lazy(() => import('./components/instagram-post').then((m) => ({ default: wrapAsPost(m.InstagramPost) }))),
     loadSchema: () => import('./components/instagram-post/schema').then((m) => m.SerializableInstagramPostSchema),
   },
   'item-carousel': {
     Component: lazy(() => import('./components/item-carousel').then((m) => ({ default: m.ItemCarousel }))),
-    loadSchema: () => import('./components/item-carousel/schema').then((m) => m.SerializableItemSchema),
+    loadSchema: () => import('./components/item-carousel/schema').then((m) => m.SerializableItemCarouselSchema),
   },
   'link-preview': {
     Component: lazy(() => import('./components/link-preview').then((m) => ({ default: m.LinkPreview }))),
     loadSchema: () => import('./components/link-preview/schema').then((m) => m.SerializableLinkPreviewSchema),
   },
   'linkedin-post': {
-    Component: lazy(() => import('./components/linkedin-post').then((m) => ({ default: m.LinkedInPost }))),
+    Component: lazy(() => import('./components/linkedin-post').then((m) => ({ default: wrapAsPost(m.LinkedInPost) }))),
     loadSchema: () => import('./components/linkedin-post/schema').then((m) => m.SerializableLinkedInPostSchema),
   },
   'message-draft': {
@@ -112,7 +119,7 @@ export const TOOL_UI_REGISTRY: Record<string, ToolUiEntry> = {
     loadSchema: () => import('./components/video/schema').then((m) => m.SerializableVideoSchema),
   },
   'x-post': {
-    Component: lazy(() => import('./components/x-post').then((m) => ({ default: m.XPost }))),
+    Component: lazy(() => import('./components/x-post').then((m) => ({ default: wrapAsPost(m.XPost) }))),
     loadSchema: () => import('./components/x-post/schema').then((m) => m.SerializableXPostSchema),
   },
 };

From 9fe0c96c5af0064fd4e68a8cb9034965ebceb496 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 17:38:32 -0700
Subject: [PATCH 099/248] [eric] canvas: trackpad two-finger scroll pans, mouse
 wheel keeps zooming (gmaps model)

---
 .../hooks/interaction/useCanvasControls.ts    | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
index 1f5efbdb..d5cebb86 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
@@ -16,6 +16,12 @@ const FIT_DURATION = 150;
 const FIT_SETTLE_DELAY = FIT_DURATION + 60;
 // A mouse notch lands as deltaY 100 where a trackpad sends ~1-10, so cap the per-event zoom delta: uncapped, one notch is a ~24% jump and macOS wheel acceleration stacks them. No-op for trackpads.
 const WHEEL_ZOOM_DELTA_CAP = 24;
+// Trackpad-vs-mouse wheel split (the Google Maps trackpad model): a two-finger scroll PANS, only a
+// discrete mouse notch (or pinch) zooms. Fresh verdicts use the shape of the event (line-mode or a
+// big integer no-X delta = mouse); events inside a burst inherit the previous verdict because a
+// physical device can't change mid-gesture, which keeps momentum-glide events panning.
+const WHEEL_STREAM_GAP_MS = 150;
+const MOUSE_NOTCH_MIN_DELTA = 40;
 
 // Maps the 1 to 100 user setting to an internal multiplier (50 default = 0.004).
 function sensitivityToMultiplier(setting: number): number {
@@ -219,7 +225,7 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
 
   animateToRef.current = animateTo;
 
-  // Plain wheel zooms at the viewport center; cmd/ctrl+wheel pans vertically; trackpad pinch zooms at the cursor.
+  // Google Maps wheel model: mouse notch zooms at the cursor, two-finger trackpad scroll pans, pinch zooms at the cursor, held cmd/ctrl+wheel pans vertically (the mouse user's pan).
   useEffect(() => {
     const el = viewportRef.current;
     if (!el || !enabled) return;  // Skip wheel listener when canvas is hidden
@@ -232,6 +238,21 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
     let wheelRafId: number | null = null;
     // No "gestureend" on trackpads; 140ms idle declares the gesture over (short enough to feel snappy, long enough to span inter-burst gaps).
     let wheelIdleTimer: ReturnType<typeof setTimeout> | null = null;
+    // Device classification for the trackpad-pan vs mouse-zoom split; per-mount so a stale verdict can't leak across dashboards.
+    let lastWheelDeviceAt = 0;
+    let lastWheelWasTrackpad = false;
+
+    const classifyTrackpad = (e: WheelEvent, dx: number, dy: number): boolean => {
+      const inStream = e.timeStamp - lastWheelDeviceAt < WHEEL_STREAM_GAP_MS;
+      lastWheelDeviceAt = e.timeStamp;
+      if (inStream) return lastWheelWasTrackpad;
+      let trackpad: boolean;
+      if (e.deltaMode !== 0) trackpad = false;
+      else if (dx !== 0 || !Number.isInteger(dy)) trackpad = true;
+      else trackpad = Math.abs(dy) < MOUSE_NOTCH_MIN_DELTA;
+      lastWheelWasTrackpad = trackpad;
+      return trackpad;
+    };
 
     const flushWheel = () => {
       wheelRafId = null;
@@ -279,6 +300,8 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
       // Let scrollable children handle the event when appropriate, but fall through to canvas pan if the child is at its scroll boundary.
       const dy = e.deltaMode === 1 ? e.deltaY * 40 : e.deltaY;
       const dx = e.deltaMode === 1 ? e.deltaX * 40 : e.deltaX;
+      // Classify on EVERY event (even ones a scrollable child swallows) so stream continuity holds when a gesture drifts from a chat onto the canvas.
+      const isTrackpadScroll = classifyTrackpad(e, e.deltaX, e.deltaY);
       let target = e.target as HTMLElement | null;
       while (target && target !== el) {
         let cls = scrollableCache.get(target);
@@ -300,7 +323,7 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
         }
 
         if (cls === 'scrollable' && !isModifierWheel) {
-          // Google Maps model: plain scroll zooms the canvas over a CARD (chat, scheduled task) UNLESS you've clicked INTO it. Only a card that isn't scroll-focused diverts to zoom; non-card scrollable UI (dropdowns, menus, nested panels) always scrolls natively, and a focused card scrolls its content.
+          // Google Maps model: plain scroll acts on the CANVAS over a CARD (chat, scheduled task) UNLESS you've clicked INTO it. Only a card that isn't scroll-focused diverts to the canvas gesture; non-card scrollable UI (dropdowns, menus, nested panels) always scrolls natively, and a focused card scrolls its content.
           const cardEl = target.closest('[data-select-id]');
           const cardId = cardEl?.getAttribute('data-select-id') ?? null;
           if (cardId && cardId !== getScrollFocusedCard()) {
@@ -349,12 +372,17 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
         pendingZoomDy += dy;
         pendingZoomCenter = { cx: e.clientX - rect.left, cy: e.clientY - rect.top };
         scheduleWheelFlush();
+      } else if (isTrackpadScroll) {
+        // Two-finger trackpad scroll → pan both axes, exactly like Google Maps; macOS momentum events ride the same branch so the glide keeps panning.
+        pendingPanDx += dx;
+        pendingPanDy += dy;
+        scheduleWheelFlush();
       } else if (Math.abs(dx) > Math.abs(dy)) {
-        // Horizontal-dominant scroll → pan X; it's the only horizontal-pan gesture. Dominant-axis, so the vertical jitter in a sideways swipe doesn't also zoom.
+        // Horizontal-dominant mouse scroll (tilt wheel) → pan X. Dominant-axis, so the vertical jitter in a sideways swipe doesn't also zoom.
         pendingPanDx += dx;
         scheduleWheelFlush();
       } else {
-        // Plain vertical scroll → zoom at the cursor (same anchor as pinch) so the point under the pointer grows toward you, not away. Clamp the per-event delta so a discrete mouse notch is a small step, not a lurch.
+        // Mouse-wheel vertical notch → zoom at the cursor (same anchor as pinch) so the point under the pointer grows toward you, not away. Clamp the per-event delta so a discrete notch is a small step, not a lurch.
         const rect = el.getBoundingClientRect();
         pendingZoomDy += clamp(dy, -WHEEL_ZOOM_DELTA_CAP, WHEEL_ZOOM_DELTA_CAP);
         pendingZoomCenter = { cx: e.clientX - rect.left, cy: e.clientY - rect.top };

From 96c6c8e2aaaa2b44379f37a02bb80b580bba8a96 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 17:48:07 -0700
Subject: [PATCH 100/248] [eric] dashboard: revert to the og eric/onboarding
 canvas background (gradient wash + grain + dot grid); wallpaper layer and its
 IPC removed

---
 electron/main.js                              |  53 -----
 electron/preload.js                           |   1 -
 .../Dashboard/canvas/DashboardCanvas.tsx      |   4 +-
 .../Dashboard/desktop/DesktopWallpaper.tsx    | 198 ------------------
 4 files changed, 1 insertion(+), 255 deletions(-)
 delete mode 100644 frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx

diff --git a/electron/main.js b/electron/main.js
index 101ed172..1303894e 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -3114,59 +3114,6 @@ ipcMain.handle('open-application', (_event, name) => {
   return true;
 });
 
-// The user's REAL desktop wallpaper for the dashboard background, read at runtime and never
-// bundled (Apple's images can't ship in an open-source repo). Any failure on any platform
-// returns null and the renderer keeps its SVG scenery, so this can only ever add.
-let desktopWallpaperCache;
-ipcMain.handle('get-desktop-wallpaper', async () => {
-  if (desktopWallpaperCache !== undefined) return desktopWallpaperCache;
-  const { execFile } = require('child_process');
-  const run = (cmd, args) => new Promise((resolve, reject) => {
-    execFile(cmd, args, { timeout: 8000 }, (err, stdout) => (err ? reject(err) : resolve(String(stdout).trim())));
-  });
-  try {
-    if (process.platform === 'darwin') {
-      let srcPath = await run('/usr/bin/osascript', ['-e', 'tell application "System Events" to get picture of current desktop']).catch(() => '');
-      if (!srcPath || !fs.existsSync(srcPath)) {
-        // Dynamic/aerial wallpapers report a reaped temp frame; the wallpaper store may still hold a real image path.
-        srcPath = '';
-        try {
-          const storePath = path.join(app.getPath('home'), 'Library', 'Application Support', 'com.apple.wallpaper', 'Store', 'Index.plist');
-          const raw = fs.readFileSync(storePath, 'latin1');
-          const candidates = [...raw.matchAll(/file:\/\/(\/[ -~]+?\.(?:jpg|jpeg|png|heic|tiff))/gi)].map((m) => decodeURIComponent(m[1]));
-          srcPath = candidates.find((c) => fs.existsSync(c)) || '';
-        } catch (_) { /* fall through to the SVG scenery */ }
-      }
-      if (!srcPath) { desktopWallpaperCache = null; return null; }
-      // sips normalizes HEIC sources to jpeg and downscales so the data URL stays small.
-      const outPath = path.join(app.getPath('userData'), 'wallpaper-cache.jpg');
-      await run('/usr/bin/sips', ['-s', 'format', 'jpeg', '--resampleHeightWidthMax', '2400', srcPath, '--out', outPath]);
-      desktopWallpaperCache = `data:image/jpeg;base64,${fs.readFileSync(outPath).toString('base64')}`;
-      return desktopWallpaperCache;
-    }
-    if (process.platform === 'win32') {
-      // Windows keeps the active wallpaper pre-transcoded as a JPEG; the registry path is the fallback.
-      const transcoded = path.join(app.getPath('appData'), 'Microsoft', 'Windows', 'Themes', 'TranscodedWallpaper');
-      let srcPath = fs.existsSync(transcoded) ? transcoded : null;
-      if (!srcPath) {
-        const out = await run('reg', ['query', 'HKCU\\Control Panel\\Desktop', '/v', 'WallPaper']);
-        const match = out.match(/WallPaper\s+REG_SZ\s+(.+)$/m);
-        if (match && fs.existsSync(match[1].trim())) srcPath = match[1].trim();
-      }
-      if (!srcPath) { desktopWallpaperCache = null; return null; }
-      const ext = path.extname(srcPath).toLowerCase();
-      const mime = ext === '.png' ? 'image/png' : ext === '.bmp' ? 'image/bmp' : 'image/jpeg';
-      desktopWallpaperCache = `data:${mime};base64,${fs.readFileSync(srcPath).toString('base64')}`;
-      return desktopWallpaperCache;
-    }
-    desktopWallpaperCache = null;
-    return null;
-  } catch (_) {
-    desktopWallpaperCache = null;
-    return null;
-  }
-});
-
 // Affiliate install state. Returns the persisted install.json contents so
 // the renderer can attach the referral code to authenticated cloud calls
 // (Stripe checkout, sign-in events) for downstream attribution.
diff --git a/electron/preload.js b/electron/preload.js
index 26c736dc..b34f065a 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -77,7 +77,6 @@ contextBridge.exposeInMainWorld('openswarm', {
   capturePage: (rect) => ipcRenderer.invoke('capture-page', rect),
   getAppIcon: (name) => ipcRenderer.invoke('get-app-icon', name),
   openApplication: (name) => ipcRenderer.invoke('open-application', name),
-  getDesktopWallpaper: () => ipcRenderer.invoke('get-desktop-wallpaper'),
   getUpdateStatus: () => ipcRenderer.invoke('get-update-status'),
   getCrashRecoveryInfo: () => ipcRenderer.invoke('get-crash-recovery-info'),
   checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 044a4e40..d71edb65 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -7,7 +7,7 @@ import TetherLayer from './TetherLayer';
 import DashboardCardLayer from './DashboardCardLayer';
 import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
-import DesktopWallpaper from '../desktop/DesktopWallpaper';
+import '../desktop/desktop.css';
 import DesktopDock from '../desktop/DesktopDock';
 import MinimizedStack from '../desktop/MinimizedStack';
 import ApplicationsWindow from '../desktop/ApplicationsWindow';
@@ -291,8 +291,6 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
                 : 'default',
         }}
       >
-        <DesktopWallpaper />
-
         {/* Gradient wash: the user's theme-pad stops tint the canvas, Arc-window style; intensity + grain come from the theme device; sits under the dot grid. */}
         {gradient && gradient.length > 1 && (
           <Box
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
deleted file mode 100644
index a23795d6..00000000
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopWallpaper.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
-import { useThemeMode } from '@/shared/styles/ThemeContext';
-import './desktop.css';
-
-/**
- * Monterey-style layered-ridge wallpaper. Design rules: scenery not signal (long smooth ridges,
- * luminance ramps pale sky -> deep indigo so glass chrome always has contrast), depth via aerial
- * perspective (far ridges blurred + desaturated, near ridges sharp with a lit crest), and life via
- * ONE imperceptible compositor-only drift (120s, transform-only, off under reduced-motion).
- */
-function DesktopWallpaper(): React.ReactElement {
-  const { mode } = useThemeMode();
-  // The user's real OS wallpaper when the Electron bridge can supply it (never bundled); SVG scenery otherwise.
-  const [realWallpaper, setRealWallpaper] = useState<string | null>(null);
-  useEffect(() => {
-    const getWallpaper = (window as unknown as { openswarm?: { getDesktopWallpaper?: () => Promise<string | null> } })
-      .openswarm?.getDesktopWallpaper;
-    if (!getWallpaper) return;
-    let cancelled = false;
-    getWallpaper().then((dataUrl) => { if (!cancelled && dataUrl) setRealWallpaper(dataUrl); }).catch(() => undefined);
-    return () => { cancelled = true; };
-  }, []);
-
-  if (realWallpaper) {
-    return (
-      <Box aria-hidden sx={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
-        <Box component="img" src={realWallpaper} alt="" sx={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
-        {mode === 'dark' && <Box sx={{ position: 'absolute', inset: 0, background: 'rgba(12,6,24,0.38)' }} />}
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      aria-hidden
-      sx={{
-        position: 'absolute',
-        inset: 0,
-        pointerEvents: 'none',
-        overflow: 'hidden',
-        '& .osw-wp-drift': {
-          animation: 'osw-wp-drift 120s ease-in-out infinite alternate',
-          willChange: 'transform',
-        },
-        '& .osw-wp-drift-far': {
-          animation: 'osw-wp-drift-far 160s ease-in-out infinite alternate',
-          willChange: 'transform',
-        },
-        '@keyframes osw-wp-drift': {
-          from: { transform: 'translateX(0px)' },
-          to: { transform: 'translateX(-28px)' },
-        },
-        '@keyframes osw-wp-drift-far': {
-          from: { transform: 'translateX(0px)' },
-          to: { transform: 'translateX(18px)' },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          '& .osw-wp-drift, & .osw-wp-drift-far': { animation: 'none' },
-        },
-      }}
-    >
-      <svg
-        width="100%"
-        height="100%"
-        viewBox="0 0 1600 1000"
-        preserveAspectRatio="xMidYMid slice"
-        style={{ position: 'absolute', inset: '-2%', width: '104%', height: '104%', display: 'block' }}
-      >
-        <defs>
-          <linearGradient id="osw-wp-sky" x1="0.5" y1="0" x2="0.5" y2="1">
-            <stop offset="0" stopColor="#dcd9e8" />
-            <stop offset="0.45" stopColor="#c8b2d4" />
-            <stop offset="1" stopColor="#b490c4" />
-          </linearGradient>
-          <linearGradient id="osw-wp-redridge" x1="0.15" y1="0" x2="0.6" y2="1">
-            <stop offset="0" stopColor="#e0517c" />
-            <stop offset="0.5" stopColor="#c33f92" />
-            <stop offset="1" stopColor="#a5349b" />
-          </linearGradient>
-          <linearGradient id="osw-wp-pink" x1="0.3" y1="0" x2="0.7" y2="1">
-            <stop offset="0" stopColor="#e7b3cd" />
-            <stop offset="0.55" stopColor="#cb8fb8" />
-            <stop offset="1" stopColor="#bd5f92" />
-          </linearGradient>
-          <linearGradient id="osw-wp-magenta" x1="0.2" y1="0" x2="0.7" y2="1">
-            <stop offset="0" stopColor="#c14fb4" />
-            <stop offset="1" stopColor="#96319b" />
-          </linearGradient>
-          <linearGradient id="osw-wp-purple" x1="0.1" y1="0.1" x2="0.7" y2="1">
-            <stop offset="0" stopColor="#8f35c9" />
-            <stop offset="0.6" stopColor="#7326b8" />
-            <stop offset="1" stopColor="#5c1da6" />
-          </linearGradient>
-          <linearGradient id="osw-wp-violet" x1="0" y1="0" x2="0.9" y2="0.9">
-            <stop offset="0" stopColor="#8d33dd" />
-            <stop offset="1" stopColor="#6716d5" />
-          </linearGradient>
-          <linearGradient id="osw-wp-indigo" x1="0.2" y1="0" x2="0.8" y2="1">
-            <stop offset="0" stopColor="#5b21c9" />
-            <stop offset="0.6" stopColor="#3b1a9e" />
-            <stop offset="1" stopColor="#271581" />
-          </linearGradient>
-          <linearGradient id="osw-wp-crest" x1="0.5" y1="0" x2="0.5" y2="1">
-            <stop offset="0" stopColor="#ffffff" stopOpacity="0.55" />
-            <stop offset="1" stopColor="#ffffff" stopOpacity="0" />
-          </linearGradient>
-          <filter id="osw-wp-far" x="-10%" y="-10%" width="120%" height="120%">
-            <feGaussianBlur stdDeviation="9" />
-          </filter>
-          <filter id="osw-wp-mid" x="-10%" y="-10%" width="120%" height="120%">
-            <feGaussianBlur stdDeviation="3" />
-          </filter>
-        </defs>
-
-        <rect x="-40" y="-20" width="1680" height="1040" fill="url(#osw-wp-sky)" />
-
-        {/* Far layer: soft pink billow owning the right half + red-magenta ridge from the top-left. Blurred + gentle = aerial distance. */}
-        <g className="osw-wp-drift-far">
-          <path
-            d="M700,40 C900,180 1010,330 1230,360 C1400,382 1520,300 1620,190 L1620,1020 L700,1020 Z"
-            fill="url(#osw-wp-pink)"
-            filter="url(#osw-wp-far)"
-            opacity="0.9"
-          />
-          <path
-            d="M-20,-20 L520,-20 C470,140 500,300 640,440 C480,610 220,600 -20,680 Z"
-            fill="url(#osw-wp-redridge)"
-            filter="url(#osw-wp-mid)"
-            opacity="0.95"
-          />
-        </g>
-
-        {/* Mid layer: the magenta band bridging the composition. */}
-        <g className="osw-wp-drift">
-          <path
-            d="M-20,600 C280,470 560,540 840,640 C1090,728 1360,700 1620,580 L1620,1020 L-20,1020 Z"
-            fill="url(#osw-wp-magenta)"
-            filter="url(#osw-wp-mid)"
-            opacity="0.9"
-          />
-          <path
-            d="M-20,596 C280,466 560,536 840,636"
-            fill="none"
-            stroke="url(#osw-wp-crest)"
-            strokeWidth="5"
-            opacity="0.35"
-          />
-
-          {/* Deep purple shoulder anchoring the bottom-left. */}
-          <path
-            d="M-20,560 C220,520 420,600 580,760 C420,900 180,880 -20,910 Z"
-            fill="url(#osw-wp-purple)"
-          />
-          <path
-            d="M-20,558 C220,518 420,598 578,756"
-            fill="none"
-            stroke="url(#osw-wp-crest)"
-            strokeWidth="4"
-            opacity="0.3"
-          />
-        </g>
-
-        {/* Near layer: violet crest + indigo foreground wave, sharpest, with lit crests. */}
-        <g>
-          <path
-            d="M-20,820 C320,690 700,830 1010,772 C1260,726 1450,790 1620,720 L1620,1020 L-20,1020 Z"
-            fill="url(#osw-wp-violet)"
-            opacity="0.95"
-          />
-          <path
-            d="M-20,816 C320,686 700,826 1010,768 C1260,722 1450,786 1620,716"
-            fill="none"
-            stroke="url(#osw-wp-crest)"
-            strokeWidth="4"
-            opacity="0.4"
-          />
-          <path
-            d="M-20,882 C300,780 680,912 1000,856 C1260,810 1470,890 1620,834 L1620,1020 L-20,1020 Z"
-            fill="url(#osw-wp-indigo)"
-          />
-          <path
-            d="M-20,878 C300,776 680,908 1000,852 C1260,806 1470,886 1620,830"
-            fill="none"
-            stroke="url(#osw-wp-crest)"
-            strokeWidth="3"
-            opacity="0.35"
-          />
-        </g>
-      </svg>
-      {mode === 'dark' && (
-        <Box sx={{ position: 'absolute', inset: 0, background: 'rgba(12,6,24,0.38)' }} />
-      )}
-    </Box>
-  );
-}
-
-export default DesktopWallpaper;

From b0606b786f8d488279add75197b8d7921bc0bbe1 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 17:49:35 -0700
Subject: [PATCH 101/248] [eric] canvas: bump wheel/pinch zoom responsiveness
 25% (notch 6.4% -> 8%)

---
 .../pages/Dashboard/hooks/interaction/useCanvasControls.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
index d5cebb86..b53f055d 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
@@ -23,9 +23,9 @@ const WHEEL_ZOOM_DELTA_CAP = 24;
 const WHEEL_STREAM_GAP_MS = 150;
 const MOUSE_NOTCH_MIN_DELTA = 40;
 
-// Maps the 1 to 100 user setting to an internal multiplier (50 default = 0.004).
+// Maps the 1 to 100 user setting to an internal multiplier (50 default = 0.005; a mouse notch = ~8% zoom step).
 function sensitivityToMultiplier(setting: number): number {
-  return 0.00008 * setting;
+  return 0.0001 * setting;
 }
 
 interface CanvasState {

From 4a1eaee3a77e825e9b76fae9bc255360aefc7315 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 18:05:15 -0700
Subject: [PATCH 102/248] [eric] ui-tools: full jsonschema validation
 server-side (constraint classes like step>=1 slipped the hand walker); dead
 turns freeze in-progress spinners to pending in chat and pill; model told to
 end trackers truthfully

---
 backend/apps/agents/show_ui_mcp_server.py     | 31 +++++++++++++++++--
 .../src/app/pages/AgentChat/AgentChat.tsx     |  2 +-
 .../pages/AgentChat/tool-ui/ToolUiBubble.tsx  | 13 +++++---
 .../pages/AgentChat/tool-ui/showUiPayload.ts  | 16 ++++++++++
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  7 +++--
 5 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
index 88164f3d..fa487274 100644
--- a/backend/apps/agents/show_ui_mcp_server.py
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -85,7 +85,9 @@ TOOLS = [
             "The component renders in place of raw text; still give a one-line text summary after. "
             "LIVE UPDATES: calling ShowUI again with the SAME component and props.id updates that "
             "card in place. Use this to advance progress-tracker/plan step statuses AS you complete "
-            "each step of real work, or to refresh data; never mint a new id for an update."
+            "each step of real work, or to refresh data; never mint a new id for an update. Before "
+            "ending your turn, send a final same-id update with truthful terminal statuses; never "
+            "leave a step marked in-progress for work you are not actually doing."
         ),
         "inputSchema": {
             "type": "object",
@@ -133,10 +135,14 @@ def validate(component: str, props: dict) -> str:
         return f"links needs a non-empty links list. {COMPONENT_SPECS['links']}"
     # Vendored components: validate against the GENERATED JSON Schema so a bad payload comes back
     # as a teaching error the model can fix in-turn, instead of a dead render it never hears about.
+    # jsonschema gives full-constraint parity with the client zod gate (minimum/minLength/minItems
+    # slipped through the hand walker: question-flow step>=1 rendered server-side, died client-side).
     entry = GENERATED.get(component)
     if entry and isinstance(entry.get("schema"), dict):
-        errors = []
-        p_check(props, entry["schema"], "props", errors)
+        errors = p_full_validate(props, entry["schema"])
+        if errors is None:
+            errors = []
+            p_check(props, entry["schema"], "props", errors)
         if errors:
             return (
                 f"{component} payload invalid: " + "; ".join(errors[:4])
@@ -145,6 +151,25 @@ def validate(component: str, props: dict) -> str:
     return ""
 
 
+def p_full_validate(props: dict, schema: dict):
+    """Full JSON Schema validation via jsonschema; None = library unavailable (fallback walker runs)."""
+    try:
+        import jsonschema
+    except ImportError:
+        return None
+    try:
+        validator = jsonschema.Draft202012Validator(schema)
+        out = []
+        for err in sorted(validator.iter_errors(props), key=lambda e: len(e.path)):
+            where = "props" + "".join(f".{p}" if isinstance(p, str) else f"[{p}]" for p in err.path)
+            out.append(f"{where}: {err.message[:90]}")
+            if len(out) >= 6:
+                break
+        return out
+    except Exception:
+        return None
+
+
 def p_type_ok(value, t: str) -> bool:
     if t == "string":
         return isinstance(value, str)
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index e2077877..998d69e6 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -1714,7 +1714,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                 if (isShowUiPair(item)) {
                   return (
                     <Box key={item.id} data-window-item-id={item.id} ref={isLastVisibleItem ? lastVisibleItemRef : undefined}>
-                      <ToolUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === justStreamedId} />
+                      <ToolUiBubble pair={item} sessionId={session.id} isPending={isPending} suppressReveal={item.call.id === justStreamedId} sessionRunning={sessionRunning} />
                       {compactionChip}
                     </Box>
                   );
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
index 292b55aa..e43acc62 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Box from '@mui/material/Box';
 import ToolCallBubble from '../tool-bubbles/ToolCallBubble';
 import type { ToolPair } from '../tool-bubbles/ToolCallBubble';
-import { parseShowUiPayload } from './showUiPayload';
+import { parseShowUiPayload, freezeIfDone } from './showUiPayload';
 import ShowUiWidgetView from './ShowUiWidgetView';
 
 interface ToolUiBubbleProps {
@@ -10,11 +10,16 @@ interface ToolUiBubbleProps {
   sessionId: string;
   isPending: boolean;
   suppressReveal: boolean;
+  sessionRunning?: boolean;
 }
 
 /** Renders a ShowUI call as its inline component; any schema mismatch falls back to the plain tool bubble. */
-function ToolUiBubble({ pair, sessionId, isPending, suppressReveal }: ToolUiBubbleProps): React.ReactElement {
-  const payload = parseShowUiPayload(pair);
+function ToolUiBubble({ pair, sessionId, isPending, suppressReveal, sessionRunning = false }: ToolUiBubbleProps): React.ReactElement {
+  const rawPayload = parseShowUiPayload(pair);
+  const payload = useMemo(
+    () => (rawPayload ? freezeIfDone(rawPayload, sessionRunning) : null),
+    [rawPayload, sessionRunning],
+  );
   if (!payload) {
     return (
       <ToolCallBubble call={pair.call} result={pair.result} isPending={isPending} sessionId={sessionId} suppressReveal={suppressReveal} />
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
index c3ea58f8..42f4d832 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -181,3 +181,19 @@ function parseShowUiInput(input: unknown): ShowUiPayload | null {
 
   return null;
 }
+
+// A dead turn must not keep spinners alive: once the agent stops, any step still marked
+// in-progress is work that is NOT happening, so it renders as its truthful stalled state.
+export function freezeIfDone(payload: ShowUiPayload, running: boolean): ShowUiPayload {
+  if (running || payload.component !== 'vendored') return payload;
+  if (payload.name !== 'progress-tracker' && payload.name !== 'plan') return payload;
+  const steps = payload.props.steps ?? payload.props.todos;
+  if (!Array.isArray(steps)) return payload;
+  const liveKey = payload.name === 'plan' ? 'in_progress' : 'in-progress';
+  if (!steps.some((s) => (s as { status?: string })?.status === liveKey)) return payload;
+  const frozen = steps.map((s) =>
+    (s as { status?: string })?.status === liveKey ? { ...(s as object), status: 'pending' } : s,
+  );
+  const key = payload.name === 'plan' ? 'todos' : 'steps';
+  return { ...payload, props: { ...payload.props, [key]: frozen } };
+}
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index c4d407e6..12faa8d3 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -38,7 +38,7 @@ import WindowControls from './WindowControls';
 import { useTiledStyle } from './tileZones';
 import AgentNarratorPill from '../desktop/AgentNarratorPill';
 import { extractLatestTodos } from '../desktop/agentTodos';
-import { extractLatestShowUi } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
+import { extractLatestShowUi, freezeIfDone } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
 import { getWebview } from '@/shared/browserRegistry';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { QuestionForm } from '@/app/pages/AgentChat/shell/ApprovalBar';
@@ -694,7 +694,10 @@ const AgentCard: React.FC<Props> = ({
   // Desktop-shell narrator pill: a collapsed card with nothing to ask renders as the minimal pill
   // (live turn label + plan checklist); approvals and drafts keep the full card so their UI has a home.
   const todos = useMemo(() => extractLatestTodos(session.messages || []), [session.messages]);
-  const pillArtifact = useMemo(() => extractLatestShowUi(session.messages || []), [session.messages]);
+  const pillArtifact = useMemo(() => {
+    const artifact = extractLatestShowUi(session.messages || []);
+    return artifact ? freezeIfDone(artifact, session.status === 'running') : null;
+  }, [session.messages, session.status]);
   const pillMode = !expanded && !hasPending && !isDraft && !tileZone;
   const pillLabel = session.turn_label?.label || displayChatTitle(session);
   const pillRunning = session.status === 'running';

From 6eed04b1d39c6c6942aa837ab9a8a7c1f5b8f8c8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 18:11:51 -0700
Subject: [PATCH 103/248] [eric] canvas: classify mouse notches by wheelDeltaY
 tick signature; revert multiplier bump, slider governs

---
 .../pages/Dashboard/hooks/interaction/useCanvasControls.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
index b53f055d..7218544c 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
@@ -23,9 +23,9 @@ const WHEEL_ZOOM_DELTA_CAP = 24;
 const WHEEL_STREAM_GAP_MS = 150;
 const MOUSE_NOTCH_MIN_DELTA = 40;
 
-// Maps the 1 to 100 user setting to an internal multiplier (50 default = 0.005; a mouse notch = ~8% zoom step).
+// Maps the 1 to 100 user setting to an internal multiplier (50 default = 0.004).
 function sensitivityToMultiplier(setting: number): number {
-  return 0.0001 * setting;
+  return 0.00008 * setting;
 }
 
 interface CanvasState {
@@ -246,8 +246,11 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
       const inStream = e.timeStamp - lastWheelDeviceAt < WHEEL_STREAM_GAP_MS;
       lastWheelDeviceAt = e.timeStamp;
       if (inStream) return lastWheelWasTrackpad;
+      // Chromium stamps discrete wheel notches with legacy wheelDeltaY = ticks*120; trackpads report 3x the pixel delta. This catches slow mouse notches that macOS acceleration shrinks below any pixel threshold.
+      const legacy = (e as WheelEvent & { wheelDeltaY?: number }).wheelDeltaY ?? 0;
       let trackpad: boolean;
       if (e.deltaMode !== 0) trackpad = false;
+      else if (legacy !== 0 && legacy % 120 === 0 && dx === 0) trackpad = false;
       else if (dx !== 0 || !Number.isInteger(dy)) trackpad = true;
       else trackpad = Math.abs(dy) < MOUSE_NOTCH_MIN_DELTA;
       lastWheelWasTrackpad = trackpad;

From 9362e0fe3e5900e9420b2af3b56ea30e79346851 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 18:36:00 -0700
Subject: [PATCH 104/248] [eric] desktop: dock gains the og toolbar actions
 (chat/browser/workflow/note/history); Applications no longer kills the app
 (getFileIcon native throw SIGTRAPped main; icons now decode via defaults+sips
 children)

---
 electron/main.js                              | 32 +++++++++++++-
 .../app/pages/Dashboard/DashboardToolbar.tsx  |  8 +++-
 .../Dashboard/canvas/DashboardCanvas.tsx      |  3 ++
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 43 +++++++++++++++++++
 4 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 1303894e..2c23248f 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -3097,8 +3097,36 @@ ipcMain.handle('get-app-icon', async (_event, name) => {
   if (!target) return null;
   if (appIconCache.has(name)) return appIconCache.get(name);
   try {
-    const icon = await app.getFileIcon(target, { size: 'large' });
-    const dataUrl = icon && !icon.isEmpty() ? icon.toDataURL() : null;
+    let dataUrl = null;
+    if (process.platform === 'darwin') {
+      // NEVER app.getFileIcon here: a corrupt .icns raises a native ObjC exception no JS try/catch
+      // can contain and SIGTRAPs the whole app (reproduced 2026-07-20: last IPC get-app-icon,
+      // crashpad in_range_cast warning, death). sips does the decode in a disposable child instead.
+      const { execFile } = require('child_process');
+      const os = require('os');
+      const run = (cmd, args) => new Promise((resolve, reject) => {
+        execFile(cmd, args, { timeout: 5000 }, (err, stdout) => (err ? reject(err) : resolve(String(stdout).trim())));
+      });
+      const resources = path.join(target, 'Contents', 'Resources');
+      let icnsName = await run('/usr/bin/defaults', ['read', path.join(target, 'Contents', 'Info'), 'CFBundleIconFile']).catch(() => '');
+      if (icnsName && !icnsName.endsWith('.icns')) icnsName += '.icns';
+      let icns = icnsName ? path.join(resources, icnsName) : '';
+      if (!icns || !fs.existsSync(icns)) {
+        const alt = fs.existsSync(resources) ? fs.readdirSync(resources).find((f) => f.endsWith('.icns')) : null;
+        icns = alt ? path.join(resources, alt) : '';
+      }
+      if (icns && fs.existsSync(icns)) {
+        const outPng = path.join(os.tmpdir(), `osw-icon-${process.pid}-${Date.now()}.png`);
+        await run('/usr/bin/sips', ['-s', 'format', 'png', '-z', '128', '128', icns, '--out', outPng]).catch(() => '');
+        if (fs.existsSync(outPng)) {
+          dataUrl = `data:image/png;base64,${fs.readFileSync(outPng).toString('base64')}`;
+          fs.rmSync(outPng, { force: true });
+        }
+      }
+    } else {
+      const icon = await app.getFileIcon(target, { size: 'large' });
+      dataUrl = icon && !icon.isEmpty() ? icon.toDataURL() : null;
+    }
     appIconCache.set(name, dataUrl);
     return dataUrl;
   } catch (_) {
diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index b65e55ea..92c4558a 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -339,8 +339,14 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
           onAddBrowser();
         }
       };
+      // The desktop dock's History tile opens the same popover as Cmd+O.
+      const handleOpenHistoryEvent = () => handleOpenHistory();
       window.addEventListener('keydown', handleKey);
-      return () => window.removeEventListener('keydown', handleKey);
+      window.addEventListener('openswarm:open-history', handleOpenHistoryEvent);
+      return () => {
+        window.removeEventListener('keydown', handleKey);
+        window.removeEventListener('openswarm:open-history', handleOpenHistoryEvent);
+      };
     }, [handleOpenViewPicker, handleOpenHistory, onAddBrowser]);
 
     useEffect(() => {
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index d71edb65..c36e2bec 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -263,6 +263,9 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
             onHighlightCard?.(cardId);
           }}
           onApplications={() => setAppsWindowOpen((v) => !v)}
+          onNewAgent={onNewAgent}
+          onAddBrowser={onAddBrowser}
+          onAddNote={onAddNote}
         />
       )}
 
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index 8bc49405..364abac4 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -1,8 +1,14 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import LanguageIcon from '@mui/icons-material/Language';
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
+import EventRepeatIcon from '@mui/icons-material/EventRepeat';
+import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
+import HistoryIcon from '@mui/icons-material/History';
 import DashboardGlyph from '../canvas/DashboardGlyph';
+import { openWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
 import EditNoteIcon from '@mui/icons-material/EditNote';
@@ -51,6 +57,9 @@ interface DesktopDockProps {
   selectedIds: string[];
   onFocusCard: (id: string, rect: CardRect) => void;
   onApplications: () => void;
+  onNewAgent: () => void;
+  onAddBrowser: () => void;
+  onAddNote: () => void;
 }
 
 const TILE = 30;
@@ -83,6 +92,9 @@ function DesktopDock({
   selectedIds,
   onFocusCard,
   onApplications,
+  onNewAgent,
+  onAddBrowser,
+  onAddNote,
 }: DesktopDockProps): React.ReactElement | null {
   const dispatch = useAppDispatch();
   const [hovered, setHovered] = useState<{ id: string; top: number } | null>(null);
@@ -250,6 +262,37 @@ function DesktopDock({
       {entries.length > 0 && (
         <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
       )}
+      {/* The og toolbar's actions, dock-resident: chat, browser, workflow, note, history. */}
+      {([
+        { label: 'New chat', icon: <ChatBubbleOutlineIcon sx={{ fontSize: 16, color: '#e8e8ee' }} />, act: onNewAgent },
+        { label: 'New browser', icon: <LanguageIcon sx={{ fontSize: 17, color: '#e8e8ee' }} />, act: onAddBrowser },
+        { label: 'Workflows', icon: <EventRepeatIcon sx={{ fontSize: 16, color: '#e8e8ee' }} />, act: () => dispatch(openWorkflowsApp()) },
+        { label: 'New note', icon: <StickyNote2OutlinedIcon sx={{ fontSize: 16, color: '#e8e8ee' }} />, act: onAddNote },
+        { label: 'History', icon: <HistoryIcon sx={{ fontSize: 17, color: '#e8e8ee' }} />, act: () => window.dispatchEvent(new CustomEvent('openswarm:open-history')) },
+      ] as const).map((a) => (
+        <Tooltip key={a.label} title={a.label} placement="right">
+          <Box
+            onClick={a.act}
+            onMouseEnter={endHover}
+            sx={{
+              width: TILE,
+              height: TILE,
+              borderRadius: '9px',
+              background: 'linear-gradient(135deg, #5a5a62, #34343c)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              flexShrink: 0,
+              transition: 'transform 0.15s ease',
+              '&:hover': { transform: 'scale(1.12)' },
+            }}
+          >
+            {a.icon}
+          </Box>
+        </Tooltip>
+      ))}
+      <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
       <Box
         onClick={() => dispatch(openSettingsModal(undefined))}
         onMouseEnter={endHover}

From 0b19797f7fcc8991e6e03bc4e24820d2892f773b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 21:42:24 -0700
Subject: [PATCH 105/248] [eric] desktop: traffic lights everywhere (browser
 green+tiling, pill hover chips, arc app lights), fullscreen
 dark+full+dock-switcher, knob drag, dock glyphs, rest composer removed

---
 electron/main.js                              |  9 ++
 electron/preload.js                           |  2 +
 .../src/app/components/Layout/AppShell.tsx    |  2 +-
 .../src/app/components/theme/WashDials.tsx    | 20 +++--
 .../src/app/pages/AgentChat/AgentChat.tsx     |  1 -
 .../src/app/pages/AgentChat/ChatInput.tsx     |  5 +-
 .../ChatInput/toolbar/ChatInputToolbar.tsx    | 23 ++---
 .../ChatInput/toolbar/ToolbarActions.tsx      |  5 +-
 .../ChatInput/view/ChatInputView.tsx          | 11 ---
 .../Dashboard/canvas/DashboardCanvas.tsx      | 90 +++++++++++++------
 .../pages/Dashboard/canvas/DashboardGlyph.tsx |  2 +-
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 47 ++++++++--
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 71 ++++++++-------
 .../app/pages/Dashboard/cards/tileZones.ts    |  5 +-
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 15 ++--
 .../Dashboard/desktop/MinimizedStack.tsx      | 38 ++++++--
 frontend/src/types/electron.d.ts              |  1 +
 17 files changed, 224 insertions(+), 123 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 2c23248f..8413da4c 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1238,6 +1238,11 @@ function createWindow() {
     },
   });
 
+  // Arc-style traffic lights: hidden until the renderer's top-edge hover asks for them.
+  if (process.platform === 'darwin') {
+    try { mainWindow.setWindowButtonVisibility(false); } catch (err) { console.warn('[main] setWindowButtonVisibility failed:', err.message); }
+  }
+
   if (isDev) {
     // Dev only: OPENSWARM_DEV_URL (full override) or OPENSWARM_DEV_PORT lets a second worktree's Electron point at its own webpack-dev-server instead of colliding on the shared :3000. Packaged builds never hit this branch.
     mainWindow.loadURL(process.env.OPENSWARM_DEV_URL || `http://localhost:${process.env.OPENSWARM_DEV_PORT || 3000}`);
@@ -2828,6 +2833,10 @@ ipcMain.handle('get-auth-token', async () => {
 ipcMain.on('perf:first-agent-response', () => perfMark('first-agent-response'));
 
 ipcMain.handle('get-app-version', () => app.getVersion());
+ipcMain.handle('set-window-buttons-visible', (_e, visible) => {
+  if (process.platform !== 'darwin' || !mainWindow || mainWindow.isDestroyed()) return;
+  try { mainWindow.setWindowButtonVisibility(!!visible); } catch (err) { console.warn('[main] setWindowButtonVisibility failed:', err.message); }
+});
 // Phase 2 provenance: the renderer's About panel shows the commit this build
 // was cut from, so a screenshot is enough to identify the exact code shipped.
 ipcMain.handle('get-build-info', () => getBuildInfo());
diff --git a/electron/preload.js b/electron/preload.js
index b34f065a..7e814bee 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -41,6 +41,8 @@ contextBridge.exposeInMainWorld('openswarm', {
   getAuthToken: () => ipcRenderer.invoke('get-auth-token'),
 
   getAppVersion: () => ipcRenderer.invoke('get-app-version'),
+  // Arc-style chrome: the mac traffic lights hide at rest; the dashboard's top-edge hover reveals them.
+  setWindowButtonsVisible: (visible) => ipcRenderer.invoke('set-window-buttons-visible', visible),
 
   // Phase 2 provenance: { sha, shortSha, builtAt, channel } for the About panel.
   getBuildInfo: () => ipcRenderer.invoke('get-build-info'),
diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 53d94009..1bf4586f 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -628,7 +628,7 @@ const AppShell: React.FC = () => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary }}>
-      {sidebarAway && !sidePeek && (
+      {sidebarAway && !sidePeek && !fullscreenCardId && (
         <Box onMouseEnter={() => { cancelPeekClose(); setSidePeek(true); }} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
       )}
       {/* Top bar dropped (Arc/Zen): a zero-height anchor left only to float the agent-activity island at top-center; the island renders nothing when idle. */}
diff --git a/frontend/src/app/components/theme/WashDials.tsx b/frontend/src/app/components/theme/WashDials.tsx
index 88543815..be05fdf6 100644
--- a/frontend/src/app/components/theme/WashDials.tsx
+++ b/frontend/src/app/components/theme/WashDials.tsx
@@ -40,17 +40,27 @@ export const SquiggleSlider: React.FC<{ value: number; onChange: (v: number) =>
 };
 
 export const Knob: React.FC<{ value: number; onChange: (v: number) => void; size?: number }> = ({ value, onChange, size = 34 }) => {
-  const dragging = useRef<{ startY: number; startV: number } | null>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [grabbing, setGrabbing] = React.useState(false);
   const angle = -135 + value * 270;
+  // Turn like a physical knob: the indicator chases the pointer's angle around the center.
+  const applyAngle = useCallback((clientX: number, clientY: number) => {
+    const el = ref.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const deg = Math.atan2(clientX - (r.left + r.width / 2), (r.top + r.height / 2) - clientY) * (180 / Math.PI);
+    onChange(Math.min(1, Math.max(0, (Math.max(-135, Math.min(135, deg)) + 135) / 270)));
+  }, [onChange]);
   return (
     <div
+      ref={ref}
       title="Intensity"
-      onPointerDown={(e) => { dragging.current = { startY: e.clientY, startV: value }; (e.target as HTMLElement).setPointerCapture?.(e.pointerId); }}
-      onPointerMove={(e) => { const d = dragging.current; if (!d) return; onChange(Math.min(1, Math.max(0, d.startV + (d.startY - e.clientY) / 120))); }}
-      onPointerUp={() => { dragging.current = null; }}
+      onPointerDown={(e) => { setGrabbing(true); (e.target as HTMLElement).setPointerCapture?.(e.pointerId); applyAngle(e.clientX, e.clientY); }}
+      onPointerMove={(e) => { if (grabbing) applyAngle(e.clientX, e.clientY); }}
+      onPointerUp={() => setGrabbing(false)}
       style={{
         position: 'relative', width: size + 10, height: size + 10, display: 'flex', alignItems: 'center',
-        justifyContent: 'center', cursor: 'ns-resize', touchAction: 'none', flexShrink: 0,
+        justifyContent: 'center', cursor: grabbing ? 'grabbing' : 'grab', touchAction: 'none', flexShrink: 0,
       }}
     >
       <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: '2px dotted currentColor', opacity: 0.4 }} />
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 6883d901..42a2e0ea 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -2375,7 +2375,6 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   autoFocus={autoFocus}
                   prefillPrompt={prefillPrompt}
                   placeholderOverride={runContext ? 'Ask about this run...' : embedded ? 'Send a message...' : undefined}
-                  quietComposer={embedded}
                   runContext={runContext}
                   onClearRunContext={onClearRunContext}
                   thinkingLevel={session?.thinking_level ?? 'auto'}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput.tsx b/frontend/src/app/pages/AgentChat/ChatInput.tsx
index 28b2477a..6027f1cb 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput.tsx
@@ -48,14 +48,12 @@ interface Props {
   prefillPrompt?: string;
   // Replaces the default "Agent, @ for context..." placeholder (e.g. "Ask about this run...").
   placeholderOverride?: string;
-  // Desktop-card composer: rest as input + attach/mic; pickers return on focus.
-  quietComposer?: boolean;
   // A workflow run shown as a small removable chip inside the composer.
   runContext?: WorkflowsRunContext;
   onClearRunContext?: () => void;
 }
 
-const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode, onModeChange, model, onModelChange, provider, onProviderChange, isRunning, onStop, autoRunMode, contextEstimate, embedded, autoFocus, sessionId, queueLength = 0, thinkingLevel = 'auto', onThinkingLevelChange, onActivityLabelChange, prefillPrompt, placeholderOverride, quietComposer, runContext, onClearRunContext }, ref) => {
+const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode, onModeChange, model, onModelChange, provider, onProviderChange, isRunning, onStop, autoRunMode, contextEstimate, embedded, autoFocus, sessionId, queueLength = 0, thinkingLevel = 'auto', onThinkingLevelChange, onActivityLabelChange, prefillPrompt, placeholderOverride, runContext, onClearRunContext }, ref) => {
   const c = useClaudeTokens();
   const editorRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -322,7 +320,6 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
       editorRef={editorRef}
       generalFileInputRef={generalFileInputRef}
       embedded={embedded}
-      quietComposer={quietComposer}
       isDragOver={isDragOver}
       isUploading={isUploading}
       handleDragOver={handleDragOver}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
index 4d1100fe..045e199f 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
@@ -50,8 +50,6 @@ interface Props {
   isRunning?: boolean;
   onStop?: () => void;
   handleSend: () => void;
-  /** Embedded-card resting look: only attach + mic; pickers come back on focus. */
-  restMode?: boolean;
 }
 
 export const ChatInputToolbar: React.FC<Props> = (p) => {
@@ -60,7 +58,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
     allModelFlat, model, onModelChange, onProviderChange, picker, pendingKinds, pendingPayloadEstimate,
     thinkingLevel, onThinkingLevelChange, contextEstimate, elementSelection, autoRunMode,
     ownerId, sessionId, generalFileInputRef, addImageFiles, uploadAndAttachFiles,
-    hasContent, disabled, isRunning, onStop, handleSend, restMode,
+    hasContent, disabled, isRunning, onStop, handleSend,
   } = p;
 
   const menuPaperProps = {
@@ -96,14 +94,12 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
         pt: 0,
       }}
     >
-      {!restMode && (
-        <ModelControl
-          c={c}
-          setModelAnchor={setModelAnchor}
-          allModelFlat={allModelFlat}
-          model={model}
-        />
-      )}
+      <ModelControl
+        c={c}
+        setModelAnchor={setModelAnchor}
+        allModelFlat={allModelFlat}
+        model={model}
+      />
 
       <ModelPickerMenu
         c={c}
@@ -138,7 +134,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
         pendingPayloadEstimate={pendingPayloadEstimate}
       />
 
-      {!hideForTrial && !restMode && (
+      {!hideForTrial && (
         <ThinkingLevelControl
           c={c}
           model={model}
@@ -153,7 +149,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
 
       <Box sx={{ flex: 1 }} />
 
-      {contextEstimate && !restMode && (
+      {contextEstimate && (
         <ContextRing
           used={contextEstimate.used}
           limit={contextEstimate.limit}
@@ -164,7 +160,6 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
 
       <ToolbarActions
         c={c}
-        restMode={restMode}
         elementSelection={elementSelection}
         autoRunMode={autoRunMode}
         ownerId={ownerId}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index 44b2b8d9..467a12c7 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -24,16 +24,15 @@ interface Props {
   isRunning?: boolean;
   onStop?: () => void;
   handleSend: () => void;
-  restMode?: boolean;
 }
 
 export const ToolbarActions: React.FC<Props> = ({
   c, elementSelection, autoRunMode, ownerId, sessionId, generalFileInputRef,
-  addImageFiles, uploadAndAttachFiles, hasContent, disabled, isRunning, onStop, handleSend, restMode,
+  addImageFiles, uploadAndAttachFiles, hasContent, disabled, isRunning, onStop, handleSend,
 }) => {
   return (
     <>
-      {elementSelection && !autoRunMode && !restMode && (() => {
+      {elementSelection && !autoRunMode && (() => {
         const isMySelectMode = elementSelection.selectMode && elementSelection.activeOwnerId === ownerId;
         return (
           <Tooltip title={isMySelectMode ? 'Exit select mode' : 'Select UI element'}>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
index fa317fb5..a90c8f5c 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
@@ -28,7 +28,6 @@ interface Props {
   editorRef: RefObject<HTMLDivElement>;
   generalFileInputRef: RefObject<HTMLInputElement>;
   embedded?: boolean;
-  quietComposer?: boolean;
   isDragOver: boolean;
   isUploading: boolean;
   handleDragOver: (e: React.DragEvent) => void;
@@ -107,18 +106,9 @@ interface Props {
 
 export const ChatInputView: React.FC<Props> = (p) => {
   const { c } = p;
-  // Embedded card composers rest as just the input + attach/mic (the frame look); the pickers return on focus, draft text, or any open menu.
-  const [focusWithin, setFocusWithin] = useState(false);
-  const restMode = Boolean(
-    p.quietComposer && !focusWithin && !p.hasContent && !p.modelAnchor && !p.thinkingAnchor && !p.modeAnchor,
-  );
   return (
     <Box
       ref={p.containerRef}
-      onFocusCapture={() => setFocusWithin(true)}
-      onBlurCapture={(e) => {
-        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocusWithin(false);
-      }}
       onDragOver={p.handleDragOver}
       onDragLeave={p.handleDragLeave}
       onDrop={p.handleDrop}
@@ -256,7 +246,6 @@ export const ChatInputView: React.FC<Props> = (p) => {
 
       <ChatInputToolbar
         c={c}
-        restMode={restMode}
         modeConf={p.modeConf}
         modesArr={p.modesArr}
         mode={p.mode}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 7129a8cb..84f7f28f 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, type RefObject } from 'react';
 import Box from '@mui/material/Box';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { clearTiledCard, selectFullscreenCardId } from '@/shared/state/dashboardLayoutSlice';
+import { clearTiledCard, setTiledCard, selectFullscreenCardId } from '@/shared/state/dashboardLayoutSlice';
+import { expandSession } from '@/shared/state/agentsSlice';
 import DashboardHeader from './DashboardHeader';
 import TetherLayer from './TetherLayer';
 import DashboardCardLayer from './DashboardCardLayer';
@@ -185,6 +186,40 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
     return () => window.removeEventListener('keydown', onKey, true);
   }, [fullscreenCardId, dispatch]);
 
+  // Arc-style chrome: the mac traffic lights ride the same top-edge hover as the header overlay.
+  useEffect(() => {
+    window.openswarm?.setWindowButtonsVisible?.(headerRevealed && !fullscreenCardId);
+  }, [headerRevealed, fullscreenCardId]);
+
+  // Reveal on any pointer graze of the top edge. The old 22px strip Box was dead in practice: the
+  // hidden header overlay's pointer-events:auto children sat above it and ate the mouseenter.
+  useEffect(() => {
+    const onMove = (e: MouseEvent): void => {
+      if (e.clientY <= 22) setHeaderRevealed(true);
+    };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, []);
+
+  // Arc/Zen fullscreen: the dock hides with the rest of the chrome but slides back on a left-edge
+  // graze, and clicking a tile SWAPS which card owns the full screen instead of moving the camera.
+  const [fsDockRevealed, setFsDockRevealed] = React.useState(false);
+  useEffect(() => {
+    if (!fullscreenCardId) { setFsDockRevealed(false); return undefined; }
+    const onMove = (e: MouseEvent): void => {
+      if (e.clientX <= 16) setFsDockRevealed(true);
+      else if (e.clientX > 120) setFsDockRevealed(false);
+    };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, [fullscreenCardId]);
+  const swapFullscreen = React.useCallback((cardId: string) => {
+    if (!fullscreenCardId || cardId === fullscreenCardId) return;
+    dispatch(clearTiledCard(fullscreenCardId));
+    if (sessions[cardId]) dispatch(expandSession(cardId));
+    dispatch(setTiledCard({ cardId, zone: 'fullscreen' }));
+  }, [fullscreenCardId, dispatch, sessions]);
+
   // Gestures write the transform imperatively (no React commit per frame), so a foreign render mid-gesture would paint the stale committed transform for a frame. Re-applying live after EVERY render seals that; do not remove.
   React.useLayoutEffect(() => {
     canvas.actions.syncTransform();
@@ -193,11 +228,6 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   return (
     <>
     <Box sx={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
-      {/* Top-edge hover strip: the desktop shell keeps the top chromeless; grazing it reveals the header. */}
-      <Box
-        onMouseEnter={() => setHeaderRevealed(true)}
-        sx={{ position: 'absolute', top: 0, left: 0, right: 0, height: 22, zIndex: 9 }}
-      />
       {/* Floating header overlay */}
       <Box
         onMouseLeave={() => setHeaderRevealed(false)}
@@ -251,25 +281,35 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         />
       )}
 
-      {!fullscreenCardId && (
-        <DesktopDock
-          sessions={sessions}
-          cards={cards}
-          viewCards={viewCards}
-          browserCards={browserCards}
-          notes={notes}
-          workflowCards={workflowCards}
-          outputs={outputs}
-          selectedIds={Array.from(selection.selectedIds.keys())}
-          onFocusCard={(cardId, rect) => {
-            canvas.actions.fitToCards([rect], 1.15, true);
-            onHighlightCard?.(cardId);
-          }}
-          onApplications={() => setAppsWindowOpen((v) => !v)}
-          onNewAgent={onNewAgent}
-          onAddBrowser={onAddBrowser}
-          onAddNote={onAddNote}
-        />
+      {(!fullscreenCardId || fsDockRevealed) && (
+        <Box
+          sx={fullscreenCardId ? {
+            position: 'absolute', left: 0, top: 0, bottom: 0, zIndex: 999995,
+            display: 'flex', alignItems: 'center', pl: '4px',
+            animation: 'osw-fsdock-in 160ms ease-out',
+            '@keyframes osw-fsdock-in': { from: { transform: 'translateX(-52px)', opacity: 0 }, to: { transform: 'translateX(0)', opacity: 1 } },
+          } : undefined}
+        >
+          <DesktopDock
+            sessions={sessions}
+            cards={cards}
+            viewCards={viewCards}
+            browserCards={browserCards}
+            notes={notes}
+            workflowCards={workflowCards}
+            outputs={outputs}
+            selectedIds={Array.from(selection.selectedIds.keys())}
+            onFocusCard={(cardId, rect) => {
+              if (fullscreenCardId) { swapFullscreen(cardId); return; }
+              canvas.actions.fitToCards([rect], 1.15, true);
+              onHighlightCard?.(cardId);
+            }}
+            onApplications={() => setAppsWindowOpen((v) => !v)}
+            onNewAgent={onNewAgent}
+            onAddBrowser={onAddBrowser}
+            onAddNote={onAddNote}
+          />
+        </Box>
       )}
 
       {appsWindowOpen && !fullscreenCardId && (
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
index e2581403..71aa8dc3 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
@@ -65,7 +65,7 @@ const KEYWORDS: Record<string, LucideIcon> = {
   weather: CloudSun, forecast: CloudSun, temperature: CloudSun,
 };
 
-function pickIcon(title: string): LucideIcon | null {
+export function pickIcon(title: string): LucideIcon | null {
   const words = title.toLowerCase().match(/[a-z]+/g) || [];
   for (const w of words) {
     const hit = KEYWORDS[w] || (w.endsWith('s') ? KEYWORDS[w.slice(0, -1)] : undefined);
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 57b24feb..959dee61 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -17,6 +17,7 @@ import {
   AgentSession,
   handleApproval,
   collapseSession,
+  expandSession,
   closeSession,
   fetchSession,
   renameSession,
@@ -670,10 +671,18 @@ const AgentCard: React.FC<Props> = ({
   void tileTick;
   const cam = getCanvasState();
   const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+  // A collapsed chat can never stay tiled: collapsing while fullscreen left a white full-window shell
+  // (the header collapse control still fires in full size view). Seal the state instead of the path.
+  useEffect(() => {
+    if (tileZone && !expanded) dispatch(clearTiledCard(session.id));
+  }, [tileZone, expanded, dispatch, session.id]);
   const onMinimize = (): void => { dispatch(collapseSession(session.id)); };
   const onTile = (zone: string): void => {
     if (zone === 'restore') dispatch(clearTiledCard(session.id));
-    else dispatch(setTiledCard({ cardId: session.id, zone }));
+    else {
+      if (!expanded) dispatch(expandSession(session.id));
+      dispatch(setTiledCard({ cardId: session.id, zone }));
+    }
   };
 
 
@@ -913,13 +922,18 @@ const AgentCard: React.FC<Props> = ({
           cursor: isDragging ? 'grabbing' : 'grab',
           '&:hover': {},
         }),
-        // Expanded chat wears the desktop dark glass; the header only surfaces on hover.
-        ...(expanded && !tiledStyle && {
-          bgcolor: 'rgba(26,16,34,0.85)',
-          backdropFilter: 'blur(24px) saturate(150%)',
-          WebkitBackdropFilter: 'blur(24px) saturate(150%)',
+        // Expanded chat wears the desktop dark glass; the header only surfaces on hover. Tiled keeps
+        // the SAME dark surface (excluding it rendered the light-theme white card, the "fullscreen
+        // turns white" bug) but solid + blur-free: nothing shows behind a tiled card, and a
+        // window-sized backdrop blur is pure GPU tax.
+        ...(expanded && {
+          bgcolor: tiledStyle ? 'rgb(26,16,34)' : 'rgba(26,16,34,0.85)',
+          ...(tiledStyle ? {} : {
+            backdropFilter: 'blur(24px) saturate(150%)',
+            WebkitBackdropFilter: 'blur(24px) saturate(150%)',
+          }),
           border: isSelected ? '2px solid #3b82f6' : '1px solid rgba(255,255,255,0.08)',
-          borderRadius: '20px',
+          borderRadius: tiledStyle ? '12px' : '20px',
           boxShadow: '0 18px 48px rgba(0,0,0,0.4)',
         }),
       }}
@@ -968,8 +982,25 @@ const AgentCard: React.FC<Props> = ({
           onPointerDown={handleDragPointerDown}
           onPointerMove={handleDragPointerMove}
           onPointerUp={handleDragPointerUp}
-          sx={{ touchAction: 'none', userSelect: 'none' }}
+          sx={{ position: 'relative', touchAction: 'none', userSelect: 'none', pt: '26px', mt: '-26px', '&:hover .osw-pill-lights': { opacity: 1, pointerEvents: 'auto' } }}
         >
+          <Box
+            className="osw-pill-lights osw-card"
+            onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
+            sx={{
+              position: 'absolute', top: 0, left: 4, zIndex: 2, display: 'flex', alignItems: 'center',
+              px: 1, py: 0.5, borderRadius: 999, background: 'rgba(24,14,32,0.85)',
+              backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
+              opacity: 0, pointerEvents: 'none', transition: 'opacity 140ms ease',
+            }}
+          >
+            <WindowControls
+              onClose={() => handleRemove()}
+              onMinimize={() => dispatch(expandSession(session.id))}
+              onTile={(zone: string) => { dispatch(expandSession(session.id)); onTile(zone); }}
+              tiled={false}
+            />
+          </Box>
           <AgentNarratorPill
             label={pillLabel}
             running={pillRunning}
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 93af934d..1e7554eb 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -38,8 +38,12 @@ import {
   moveBrowserTab,
   recordClosedCard,
   toggleMinimizeCard,
+  setTiledCard,
+  clearTiledCard,
   type BrowserTab,
 } from '@/shared/state/dashboardLayoutSlice';
+import WindowControls from './WindowControls';
+import { useTiledStyle } from './tileZones';
 import { saveMinimizedShot } from '../desktop/minimizedShots';
 import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
 import { createSelector } from '@reduxjs/toolkit';
@@ -71,17 +75,6 @@ const CHROME_BORDER = 'rgba(0,0,0,0.08)';
 const CHROME_TEXT = '#3c3744';
 const CHROME_TEXT_MUTED = '#8a8494';
 
-const browserLightSx = (color: string): Record<string, unknown> => ({
-  width: 12,
-  height: 12,
-  p: 0,
-  borderRadius: '50%',
-  border: '0.5px solid rgba(0,0,0,0.08)',
-  background: '#d6d3cd',
-  cursor: 'pointer',
-  transition: 'background 150ms',
-  '.osw-card:hover &': { background: color },
-});
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 
 type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
@@ -229,6 +222,22 @@ const BrowserCard: React.FC<Props> = ({
   );
   const browserAgentSession = useAppSelector(selectBrowserAgentSession);
   const isMinimized = useAppSelector((s) => Boolean(s.dashboardLayout.minimizedCards[browserId]));
+  const tileZone = useAppSelector((s) => s.dashboardLayout.tiledCards[browserId]);
+  // Tiled geometry must track pan/zoom, but the camera lives outside React now; subscribe to the pan event ONLY while tiled and read the live getter.
+  const [tileTick, setTileTick] = useState(0);
+  useEffect(() => {
+    if (!tileZone) return undefined;
+    const onPan = (): void => setTileTick((t) => t + 1);
+    window.addEventListener('openswarm:canvas-pan-changed', onPan);
+    return () => window.removeEventListener('openswarm:canvas-pan-changed', onPan);
+  }, [tileZone]);
+  void tileTick;
+  const cam = getCanvasState();
+  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+  const onTile = useCallback((zone: string): void => {
+    if (zone === 'restore') dispatch(clearTiledCard(browserId));
+    else dispatch(setTiledCard({ cardId: browserId, zone }));
+  }, [dispatch, browserId]);
 
   const suspendedSnap = useAppSelector((state) => state.dashboardLayout.suspendedBrowserCards[browserId]);
   const endingState = useAppSelector((state) => state.dashboardLayout.endingBrowserCards[browserId]);
@@ -546,8 +555,11 @@ const BrowserCard: React.FC<Props> = ({
   const handleMinimize = useCallback(() => {
     const wv = webviewMap.current.get(activeTabId);
     const capture = wv?.capturePage?.();
-    const park = (): void => { dispatch(toggleMinimizeCard({ cardId: browserId })); };
+    let parked = false;
+    const park = (): void => { if (parked) return; parked = true; dispatch(toggleMinimizeCard({ cardId: browserId })); };
     if (capture && typeof (capture as Promise<unknown>).then === 'function') {
+      // capturePage can hang forever on off-screen guests (Electron 42); the timer guarantees the park.
+      window.setTimeout(park, 800);
       (capture as Promise<{ toDataURL(): string }>)
         .then((img) => { saveMinimizedShot(browserId, img.toDataURL()); })
         .catch(() => undefined)
@@ -917,19 +929,20 @@ const BrowserCard: React.FC<Props> = ({
         contain: 'layout style',
         // Own compositor layer so hover/paint invalidations stay contained to this card. See AgentCard for full rationale.
         willChange: 'transform',
-        left: keepAliveHidden || isMinimized ? -100000 : (dragging ? cardX : displayX),
-        top: dragging ? cardY : displayY,
-        transform: dragging ? `translate3d(${dragTx}px, ${dragTy}px, 0)` : undefined,
-        width: displayW,
-        height: displayH,
-        borderRadius: `${c.radius.lg}px`,
+        left: keepAliveHidden || isMinimized ? -100000 : (tiledStyle ? tiledStyle.left : (dragging ? cardX : displayX)),
+        top: tiledStyle && !(keepAliveHidden || isMinimized) ? tiledStyle.top : (dragging ? cardY : displayY),
+        transform: tiledStyle ? tiledStyle.transform : (dragging ? `translate3d(${dragTx}px, ${dragTy}px, 0)` : undefined),
+        transformOrigin: tiledStyle ? tiledStyle.transformOrigin : undefined,
+        width: tiledStyle ? tiledStyle.width : displayW,
+        height: tiledStyle ? tiledStyle.height : displayH,
+        borderRadius: tileZone === 'fullscreen' ? '12px' : `${c.radius.lg}px`,
         border: agentBorder,
         bgcolor: c.bg.surface,
         boxShadow: agentShadow,
         overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
-        zIndex: (isDragging || isResizing) ? 999999 : cardZOrder,
+        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : cardZOrder,
         transition: noTransition ? 'none' : 'box-shadow 0.4s ease, border 0.3s ease',
         '&:hover .resize-handle': { opacity: 1 },
         ...(isHighlighted && {
@@ -979,21 +992,13 @@ const BrowserCard: React.FC<Props> = ({
       >
         <Box
           onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
-          sx={{ display: 'flex', alignItems: 'center', gap: '7px', pl: 1.25, pr: 0.75, flexShrink: 0 }}
+          sx={{ display: 'flex', alignItems: 'center', pl: 1.25, pr: 0.75, flexShrink: 0 }}
         >
-          <Box
-            component="button"
-            type="button"
-            aria-label="Close browser"
-            onClick={handleRemove}
-            sx={{ ...browserLightSx('#ff5f57'), }}
-          />
-          <Box
-            component="button"
-            type="button"
-            aria-label="Minimize browser"
-            onClick={(e: React.MouseEvent) => { e.stopPropagation(); handleMinimize(); }}
-            sx={{ ...browserLightSx('#febc2e'), }}
+          <WindowControls
+            onClose={() => { dispatch(recordClosedCard({ kind: 'browser', id: browserId })); removeBrowserCardCleanly(browserId, dispatch); }}
+            onMinimize={handleMinimize}
+            onTile={onTile}
+            tiled={!!tileZone}
           />
         </Box>
         <Box
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index e2d8660b..7434e32b 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -47,11 +47,10 @@ function workspaceSize(): { w: number; h: number } {
 
 export function computeTiledStyle(zone: string, panX: number, panY: number, zoom: number): TiledStyle | null {
   // 'fullscreen' = macOS full screen: the app chrome hides (AppShell/DashboardCanvas react to
-  // selectFullscreenCardId) and the card covers the window minus a thin PEEK sliver, the Zen/Arc
-  // touch where the surroundings stay ever-so-slightly visible. Target is WINDOW space here, so
+  // selectFullscreenCardId) and the card covers the WHOLE window. Target is WINDOW space here, so
   // the viewport origin does NOT cancel; once the chrome collapses that origin goes to ~0 anyway.
   if (zone === 'fullscreen') {
-    const PEEK = 10;
+    const PEEK = 0;
     const el = document.querySelector('[data-canvas-viewport]');
     const r = el ? el.getBoundingClientRect() : null;
     const ox = r ? r.left : 0;
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index 364abac4..1e93a9bf 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -7,7 +7,8 @@ import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
 import EventRepeatIcon from '@mui/icons-material/EventRepeat';
 import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
 import HistoryIcon from '@mui/icons-material/History';
-import DashboardGlyph from '../canvas/DashboardGlyph';
+import { pickIcon } from '../canvas/DashboardGlyph';
+import { MessageSquare } from 'lucide-react';
 import { openWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
@@ -107,12 +108,13 @@ function DesktopDock({
       const session = sessions[card.session_id];
       if (!session) continue;
       const title = displayChatTitle(session);
+      const ChatIcon = pickIcon(title) || MessageSquare;
       list.push({
         id: card.session_id,
         label: title,
         rect: card,
         tileBg: hueFor(title),
-        icon: <DashboardGlyph name={title} size={16} color="#fff" />,
+        icon: <ChatIcon size={16} strokeWidth={1.75} color="#fff" />,
         snippet: session.turn_label?.label || undefined,
       });
     }
@@ -230,6 +232,7 @@ function DesktopDock({
               onFocusCard(entry.id, entry.rect);
             }}
             sx={{
+              position: 'relative',
               width: TILE,
               height: TILE,
               borderRadius: '9px',
@@ -245,15 +248,15 @@ function DesktopDock({
               ...(isActive && { outline: '2px solid #6aa2ff', outlineOffset: '2px' }),
             }}
           >
-            {entry.faviconUrl ? (
+            {entry.icon}
+            {entry.faviconUrl && (
               <Box
                 component="img"
                 src={entry.faviconUrl}
                 alt=""
-                sx={{ width: 18, height: 18, borderRadius: '4px' }}
+                onError={(e: React.SyntheticEvent<HTMLImageElement>) => { e.currentTarget.style.display = 'none'; }}
+                sx={{ position: 'absolute', width: 18, height: 18, borderRadius: '4px' }}
               />
-            ) : (
-              entry.icon
             )}
           </Box>
         );
diff --git a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
index abe96e3b..18789319 100644
--- a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
@@ -3,7 +3,9 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import LanguageIcon from '@mui/icons-material/Language';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { toggleMinimizeCard } from '@/shared/state/dashboardLayoutSlice';
+import { toggleMinimizeCard, setTiledCard, recordClosedCard } from '@/shared/state/dashboardLayoutSlice';
+import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
+import WindowControls from '../cards/WindowControls';
 import { getMinimizedShot, dropMinimizedShot } from './minimizedShots';
 import type { BrowserCardPosition } from '@/shared/state/dashboardLayoutSlice';
 
@@ -44,28 +46,48 @@ function MinimizedStack({ browserCards, onRestore }: MinimizedStackProps): React
       {entries.map((bc) => {
         const activeTab = bc.tabs.find((t) => t.id === bc.activeTabId) || bc.tabs[0];
         const shot = getMinimizedShot(bc.browser_id);
+        const restore = (): void => {
+          dropMinimizedShot(bc.browser_id);
+          dispatch(toggleMinimizeCard({ cardId: bc.browser_id }));
+          onRestore(bc.browser_id, bc);
+        };
         return (
           <Box
             key={bc.browser_id}
-            onClick={() => {
-              dropMinimizedShot(bc.browser_id);
-              dispatch(toggleMinimizeCard({ cardId: bc.browser_id }));
-              onRestore(bc.browser_id, bc);
-            }}
+            onClick={restore}
             title={activeTab?.title || 'Browser'}
+            className="osw-card"
             sx={{
+              position: 'relative',
               width: THUMB_W,
               borderRadius: '8px',
-              overflow: 'hidden',
               cursor: 'pointer',
               boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
               background: '#fff',
               transition: 'transform 0.15s ease, box-shadow 0.15s ease',
               '&:hover': { transform: 'scale(1.06)', boxShadow: '0 10px 28px rgba(0,0,0,0.4)' },
+              '&:hover .osw-pill-lights': { opacity: 1, pointerEvents: 'auto' },
             }}
           >
+            <Box
+              className="osw-pill-lights"
+              onClick={(e: React.MouseEvent) => e.stopPropagation()}
+              sx={{
+                position: 'absolute', top: 3, left: 3, zIndex: 2, display: 'flex', alignItems: 'center',
+                px: 1, py: 0.5, borderRadius: 999, background: 'rgba(24,14,32,0.85)',
+                backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
+                opacity: 0, pointerEvents: 'none', transition: 'opacity 140ms ease',
+              }}
+            >
+              <WindowControls
+                onClose={() => { dispatch(recordClosedCard({ kind: 'browser', id: bc.browser_id })); removeBrowserCardCleanly(bc.browser_id, dispatch); }}
+                onMinimize={restore}
+                onTile={(zone: string) => { restore(); if (zone !== 'restore') dispatch(setTiledCard({ cardId: bc.browser_id, zone })); }}
+                tiled={false}
+              />
+            </Box>
             {shot ? (
-              <Box component="img" src={shot} alt="" sx={{ width: '100%', display: 'block' }} />
+              <Box component="img" src={shot} alt="" sx={{ width: '100%', display: 'block', borderRadius: '8px' }} />
             ) : (
               <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5, py: 1.5, px: 1 }}>
                 {activeTab?.favicon ? (
diff --git a/frontend/src/types/electron.d.ts b/frontend/src/types/electron.d.ts
index 38f904cc..52b23eb4 100644
--- a/frontend/src/types/electron.d.ts
+++ b/frontend/src/types/electron.d.ts
@@ -35,6 +35,7 @@ declare global {
     getBackendPort: () => number;
     getWebviewPreloadPath: () => string;
     getAppVersion: () => Promise<string>;
+    setWindowButtonsVisible?: (visible: boolean) => Promise<void>;
     getBuildInfo: () => Promise<{ sha: string; shortSha: string; builtAt: string | null; channel: string }>;
     getUpdateStatus: () => Promise<{ status: string; info: any; error: string | null }>;
     getCrashRecoveryInfo?: () => Promise<{ ts: number; parent_pid: number; uptime_ms: number } | null>;

From dd4d6f3faafe294f7b167d89426c5c042aae55d6 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 22:23:31 -0700
Subject: [PATCH 106/248] [eric] desktop: fullscreen dock ports zen
 compact-mode hover semantics; stale-tile states sealed (close, dashboard
 switch, collapse)

---
 .../Dashboard/canvas/DashboardCanvas.tsx      | 63 ++++++++++++++++---
 .../src/shared/state/dashboardLayoutSlice.ts  | 10 +++
 2 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 84f7f28f..b5303ee3 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -186,32 +186,76 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
     return () => window.removeEventListener('keydown', onKey, true);
   }, [fullscreenCardId, dispatch]);
 
-  // Arc-style chrome: the mac traffic lights ride the same top-edge hover as the header overlay.
+  // Arc-style chrome: the mac traffic lights ride the top-edge hover, in fullscreen too (Arc/Zen both
+  // keep the native buttons reachable in compact/fullscreen; Zen even exempts them from hover-leave).
   useEffect(() => {
-    window.openswarm?.setWindowButtonsVisible?.(headerRevealed && !fullscreenCardId);
-  }, [headerRevealed, fullscreenCardId]);
+    window.openswarm?.setWindowButtonsVisible?.(headerRevealed);
+  }, [headerRevealed]);
 
   // Reveal on any pointer graze of the top edge. The old 22px strip Box was dead in practice: the
   // hidden header overlay's pointer-events:auto children sat above it and ate the mouseenter.
   useEffect(() => {
     const onMove = (e: MouseEvent): void => {
       if (e.clientY <= 22) setHeaderRevealed(true);
+      else if (fullscreenCardId && e.clientY > 80) setHeaderRevealed(false);
     };
     window.addEventListener('mousemove', onMove);
     return () => window.removeEventListener('mousemove', onMove);
-  }, []);
+  }, [fullscreenCardId]);
 
   // Arc/Zen fullscreen: the dock hides with the rest of the chrome but slides back on a left-edge
   // graze, and clicking a tile SWAPS which card owns the full screen instead of moving the camera.
+  // Hover semantics are a 1:1 port of Zen's compact mode (ZenCompactMode.mjs + compact-mode.yaml):
+  // sidebar-keep-hover 150ms grace after leaving, 1000ms retention when the cursor exits the window
+  // across the dock's screen edge, and an 800ms flash when the active (fullscreen) card switches.
+  const FS_KEEP_HOVER_MS = 150;
+  const FS_WINDOW_LEAVE_MS = 1000;
+  const FS_FLASH_MS = 800;
   const [fsDockRevealed, setFsDockRevealed] = React.useState(false);
+  const fsDockRef = React.useRef<HTMLDivElement | null>(null);
+  const fsRevealedRef = React.useRef(false);
+  fsRevealedRef.current = fsDockRevealed;
   useEffect(() => {
     if (!fullscreenCardId) { setFsDockRevealed(false); return undefined; }
+    let hideTimer: number | null = null;
+    const cancelHide = (): void => { if (hideTimer != null) { window.clearTimeout(hideTimer); hideTimer = null; } };
+    const scheduleHide = (ms: number): void => { cancelHide(); hideTimer = window.setTimeout(() => setFsDockRevealed(false), ms); };
+    const overDock = (x: number, y: number): boolean => {
+      const el = fsDockRef.current;
+      if (!el) return false;
+      const r = el.getBoundingClientRect();
+      return x >= r.left - 8 && x <= r.right + 8 && y >= r.top - 8 && y <= r.bottom + 8;
+    };
     const onMove = (e: MouseEvent): void => {
-      if (e.clientX <= 16) setFsDockRevealed(true);
-      else if (e.clientX > 120) setFsDockRevealed(false);
+      if (e.clientX <= 16 || overDock(e.clientX, e.clientY)) {
+        cancelHide();
+        if (!fsRevealedRef.current) setFsDockRevealed(true);
+      } else if (fsRevealedRef.current && hideTimer == null) {
+        scheduleHide(FS_KEEP_HOVER_MS);
+      }
+    };
+    // Cursor flung out of the window across the dock's edge: keep the dock up (Zen's screen-edge
+    // retention), then let the next in-window move decide.
+    const onOut = (e: MouseEvent): void => {
+      if (!e.relatedTarget && e.clientX <= 24 && fsRevealedRef.current) scheduleHide(FS_WINDOW_LEAVE_MS);
     };
     window.addEventListener('mousemove', onMove);
-    return () => window.removeEventListener('mousemove', onMove);
+    window.addEventListener('mouseout', onOut);
+    return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseout', onOut); cancelHide(); };
+  }, [fullscreenCardId]);
+  // Zen flashes the sidebar on tab switch in compact mode; swapping the fullscreen card is our tab switch.
+  const prevFsCardRef = React.useRef<string | null>(null);
+  useEffect(() => {
+    const prev = prevFsCardRef.current;
+    prevFsCardRef.current = fullscreenCardId;
+    if (!fullscreenCardId || !prev || prev === fullscreenCardId) return undefined;
+    setFsDockRevealed(true);
+    const t = window.setTimeout(() => {
+      const el = fsDockRef.current;
+      if (el && el.matches(':hover')) return;
+      setFsDockRevealed(false);
+    }, FS_FLASH_MS);
+    return () => window.clearTimeout(t);
   }, [fullscreenCardId]);
   const swapFullscreen = React.useCallback((cardId: string) => {
     if (!fullscreenCardId || cardId === fullscreenCardId) return;
@@ -283,8 +327,11 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
 
       {(!fullscreenCardId || fsDockRevealed) && (
         <Box
+          ref={fsDockRef}
           sx={fullscreenCardId ? {
-            position: 'absolute', left: 0, top: 0, bottom: 0, zIndex: 999995,
+            // Explicit width: the dock inside is position:absolute so the wrapper would collapse to
+            // its padding, and the hover-keep hit test would miss the dock entirely.
+            position: 'absolute', left: 0, top: 0, bottom: 0, width: 64, zIndex: 999995,
             display: 'flex', alignItems: 'center', pl: '4px',
             animation: 'osw-fsdock-in 160ms ease-out',
             '@keyframes osw-fsdock-in': { from: { transform: 'translateX(-52px)', opacity: 0 }, to: { transform: 'translateX(0)', opacity: 1 } },
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index 670e919b..d1281c2b 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -694,6 +694,8 @@ const dashboardLayoutSlice = createSlice({
 
     removeCard(state, action: PayloadAction<string>) {
       delete state.cards[action.payload];
+      delete state.tiledCards[action.payload];
+      delete state.minimizedCards[action.payload];
     },
 
     reconcileSessions(
@@ -866,6 +868,8 @@ const dashboardLayoutSlice = createSlice({
 
     removeViewCard(state, action: PayloadAction<string>) {
       delete state.viewCards[action.payload];
+      delete state.tiledCards[action.payload];
+      delete state.minimizedCards[action.payload];
       if (state.activeViewCardId === action.payload) state.activeViewCardId = null;
     },
 
@@ -945,6 +949,8 @@ const dashboardLayoutSlice = createSlice({
       delete state.browserCards[action.payload];
       delete state.suspendedBrowserCards[action.payload];
       delete state.endingBrowserCards[action.payload];
+      delete state.tiledCards[action.payload];
+      delete state.minimizedCards[action.payload];
     },
 
     markBrowserCardEnding(
@@ -1484,6 +1490,8 @@ const dashboardLayoutSlice = createSlice({
 
     removeNote(state, action: PayloadAction<string>) {
       delete state.notes[action.payload];
+      delete state.tiledCards[action.payload];
+      delete state.minimizedCards[action.payload];
     },
 
     clearPendingFocusNoteId(state) {
@@ -1614,6 +1622,8 @@ const dashboardLayoutSlice = createSlice({
     },
 
     resetLayout(state, action: PayloadAction<{ keepBrowserIds?: string[] } | undefined>) {
+      state.tiledCards = {};
+      state.minimizedCards = {};
       // Keep the recently-used (keep-alive) browser cards mounted across a dashboard switch so their webContents + sessionStorage survive (logged-in sites stay logged in); everything else is wiped for the fresh load. Their suspend entry rides along so a parked one isn't silently dropped.
       const keep = new Set(action.payload?.keepBrowserIds || []);
       const keptBrowsers: typeof state.browserCards = {};

From ea4e01480307acc8f94149a2eec5afa8321e88eb Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 23:35:13 -0700
Subject: [PATCH 107/248] [eric] desktop: dock fisheye magnification (mac-style
 wheel) + minimized traffic lights fan out on a circular arc

---
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  7 +--
 .../pages/Dashboard/cards/WindowControls.tsx  | 19 ++++++++
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 43 +++++++++++++++----
 .../Dashboard/desktop/MinimizedStack.tsx      |  8 ++--
 4 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 959dee61..1e12171a 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -35,7 +35,7 @@ import {
   setTiledCard,
   clearTiledCard,
 } from '@/shared/state/dashboardLayoutSlice';
-import WindowControls from './WindowControls';
+import WindowControls, { ARC_CHIP_SX } from './WindowControls';
 import { useTiledStyle } from './tileZones';
 import AgentNarratorPill from '../desktop/AgentNarratorPill';
 import { extractLatestTodos } from '../desktop/agentTodos';
@@ -982,14 +982,15 @@ const AgentCard: React.FC<Props> = ({
           onPointerDown={handleDragPointerDown}
           onPointerMove={handleDragPointerMove}
           onPointerUp={handleDragPointerUp}
+          className="osw-pill-host"
           sx={{ position: 'relative', touchAction: 'none', userSelect: 'none', pt: '26px', mt: '-26px', '&:hover .osw-pill-lights': { opacity: 1, pointerEvents: 'auto' } }}
         >
           <Box
             className="osw-pill-lights osw-card"
             onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
             sx={{
-              position: 'absolute', top: 0, left: 4, zIndex: 2, display: 'flex', alignItems: 'center',
-              px: 1, py: 0.5, borderRadius: 999, background: 'rgba(24,14,32,0.85)',
+              ...ARC_CHIP_SX,
+              position: 'absolute', top: -8, left: 4, zIndex: 2, background: 'rgba(24,14,32,0.85)',
               backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
               opacity: 0, pointerEvents: 'none', transition: 'opacity 140ms ease',
             }}
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index dd5f9599..392c7b29 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -31,6 +31,25 @@ const dotSx = (color: string): Record<string, unknown> => ({
   '& > span': { fontSize: 9, fontWeight: 800, lineHeight: 1, color: 'rgba(0,0,0,0.5)', opacity: 0, transition: 'opacity 120ms', pointerEvents: 'none' },
 });
 
+// Circular chip form for minimized pills/thumbnails: the three dots collapse to a point and fan out
+// along an arc on hover (OptionWheel / macOS-dock energy), instead of a flat row in a lozenge.
+export const ARC_CHIP_SX: Record<string, unknown> = {
+  width: 40,
+  height: 40,
+  borderRadius: 999,
+  '& .osw-window-lights': { position: 'relative', width: '100%', height: '100%', display: 'block' },
+  '& .osw-window-lights > *': {
+    position: 'absolute', left: '50%', top: '50%',
+    transform: 'translate(-50%, -50%) scale(0.35)', opacity: 0,
+    transition: 'transform 190ms cubic-bezier(.3,.9,.3,1), opacity 150ms ease',
+  },
+  // red / yellow / green land at 150deg / 90deg / 30deg on a 12px arc over the chip's crown.
+  // Keyed off the HOST (whole pill/thumb) hover, so grazing any part of it fans the dots out.
+  '.osw-pill-host:hover & .osw-window-lights > :nth-of-type(1)': { transform: 'translate(calc(-50% - 11px), calc(-50% + 5px)) scale(1)', opacity: 1 },
+  '.osw-pill-host:hover & .osw-window-lights > :nth-of-type(2)': { transform: 'translate(-50%, calc(-50% - 7px)) scale(1)', opacity: 1, transitionDelay: '40ms' },
+  '.osw-pill-host:hover & .osw-window-lights > :nth-of-type(3)': { transform: 'translate(calc(-50% + 11px), calc(-50% + 5px)) scale(1)', opacity: 1, transitionDelay: '80ms' },
+};
+
 function WindowControls({ onClose, onMinimize, onTile, tiled }: WindowControlsProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
   const closeTimer = useRef<number | null>(null);
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index 1e93a9bf..fdcc6ee8 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -98,6 +98,21 @@ function DesktopDock({
   onAddNote,
 }: DesktopDockProps): React.ReactElement | null {
   const dispatch = useAppDispatch();
+  const dockBodyRef = useRef<HTMLDivElement | null>(null);
+  // macOS-dock fisheye: tiles swell as the cursor nears and neighbors fall off along the curve,
+  // with a slight outward bulge so the column reads as a wheel (OptionWheel-style), not a ruler.
+  const applyFisheye = useCallback((clientY: number | null) => {
+    const root = dockBodyRef.current;
+    if (!root) return;
+    const rootTop = root.getBoundingClientRect().top;
+    root.querySelectorAll<HTMLElement>('.osw-dock-tile').forEach((el) => {
+      if (clientY == null) { el.style.transform = ''; return; }
+      const cy = rootTop + el.offsetTop + el.offsetHeight / 2;
+      const t = Math.max(0, 1 - Math.abs(clientY - cy) / 90);
+      const emph = t * t;
+      el.style.transform = `translateX(${(9 * emph).toFixed(1)}px) scale(${(1 + 0.5 * emph).toFixed(3)})`;
+    });
+  }, []);
   const [hovered, setHovered] = useState<{ id: string; top: number } | null>(null);
   const [liveShot, setLiveShot] = useState<{ id: string; dataUrl: string } | null>(null);
   const hoverTimer = useRef<number | null>(null);
@@ -202,7 +217,9 @@ function DesktopDock({
 
   return (
     <Box
-      onMouseLeave={endHover}
+      ref={dockBodyRef}
+      onMouseMove={(e: React.MouseEvent) => applyFisheye(e.clientY)}
+      onMouseLeave={() => { endHover(); applyFisheye(null); }}
       sx={{
         position: 'absolute',
         left: 12,
@@ -231,6 +248,7 @@ function DesktopDock({
               endHover();
               onFocusCard(entry.id, entry.rect);
             }}
+            className="osw-dock-tile"
             sx={{
               position: 'relative',
               width: TILE,
@@ -243,8 +261,9 @@ function DesktopDock({
               cursor: 'pointer',
               overflow: 'hidden',
               flexShrink: 0,
-              transition: 'transform 0.15s ease',
-              '&:hover': { transform: 'scale(1.12)' },
+              transition: 'transform 0.12s ease-out',
+              willChange: 'transform',
+              transformOrigin: 'left center',
               ...(isActive && { outline: '2px solid #6aa2ff', outlineOffset: '2px' }),
             }}
           >
@@ -277,6 +296,7 @@ function DesktopDock({
           <Box
             onClick={a.act}
             onMouseEnter={endHover}
+            className="osw-dock-tile"
             sx={{
               width: TILE,
               height: TILE,
@@ -287,8 +307,9 @@ function DesktopDock({
               justifyContent: 'center',
               cursor: 'pointer',
               flexShrink: 0,
-              transition: 'transform 0.15s ease',
-              '&:hover': { transform: 'scale(1.12)' },
+              transition: 'transform 0.12s ease-out',
+              willChange: 'transform',
+              transformOrigin: 'left center',
             }}
           >
             {a.icon}
@@ -299,6 +320,7 @@ function DesktopDock({
       <Box
         onClick={() => dispatch(openSettingsModal(undefined))}
         onMouseEnter={endHover}
+        className="osw-dock-tile"
         sx={{
           width: TILE,
           height: TILE,
@@ -309,8 +331,9 @@ function DesktopDock({
           justifyContent: 'center',
           cursor: 'pointer',
           flexShrink: 0,
-          transition: 'transform 0.15s ease',
-          '&:hover': { transform: 'scale(1.12)' },
+          transition: 'transform 0.12s ease-out',
+          willChange: 'transform',
+          transformOrigin: 'left center',
         }}
       >
         <SettingsIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
@@ -318,6 +341,7 @@ function DesktopDock({
       <Box
         onClick={onApplications}
         onMouseEnter={endHover}
+        className="osw-dock-tile"
         sx={{
           width: TILE,
           height: TILE,
@@ -328,8 +352,9 @@ function DesktopDock({
           justifyContent: 'center',
           cursor: 'pointer',
           flexShrink: 0,
-          transition: 'transform 0.15s ease',
-          '&:hover': { transform: 'scale(1.12)' },
+          transition: 'transform 0.12s ease-out',
+          willChange: 'transform',
+          transformOrigin: 'left center',
         }}
       >
         <AppsRoundedIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
diff --git a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
index 18789319..4b0a675f 100644
--- a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
@@ -5,7 +5,7 @@ import LanguageIcon from '@mui/icons-material/Language';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { toggleMinimizeCard, setTiledCard, recordClosedCard } from '@/shared/state/dashboardLayoutSlice';
 import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
-import WindowControls from '../cards/WindowControls';
+import WindowControls, { ARC_CHIP_SX } from '../cards/WindowControls';
 import { getMinimizedShot, dropMinimizedShot } from './minimizedShots';
 import type { BrowserCardPosition } from '@/shared/state/dashboardLayoutSlice';
 
@@ -56,7 +56,7 @@ function MinimizedStack({ browserCards, onRestore }: MinimizedStackProps): React
             key={bc.browser_id}
             onClick={restore}
             title={activeTab?.title || 'Browser'}
-            className="osw-card"
+            className="osw-card osw-pill-host"
             sx={{
               position: 'relative',
               width: THUMB_W,
@@ -73,8 +73,8 @@ function MinimizedStack({ browserCards, onRestore }: MinimizedStackProps): React
               className="osw-pill-lights"
               onClick={(e: React.MouseEvent) => e.stopPropagation()}
               sx={{
-                position: 'absolute', top: 3, left: 3, zIndex: 2, display: 'flex', alignItems: 'center',
-                px: 1, py: 0.5, borderRadius: 999, background: 'rgba(24,14,32,0.85)',
+                ...ARC_CHIP_SX,
+                position: 'absolute', top: 2, left: 2, zIndex: 2, background: 'rgba(24,14,32,0.85)',
                 backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
                 opacity: 0, pointerEvents: 'none', transition: 'opacity 140ms ease',
               }}

From d015747d40626d6bbcdbcb9a95b5337ad036eacc Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 23:43:42 -0700
Subject: [PATCH 108/248] [eric] desktop: fullscreen is the arc layout
 (persistent dock rail, card fills the dashboard, pinned: no
 drag/collapse/camera until restored)

---
 .../Dashboard/canvas/DashboardCanvas.tsx      | 63 +------------------
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  5 +-
 .../app/pages/Dashboard/cards/BrowserCard.tsx |  3 +-
 .../Dashboard/cards/DashboardViewCard.tsx     |  3 +-
 .../app/pages/Dashboard/cards/NoteCard.tsx    |  3 +-
 .../app/pages/Dashboard/cards/tileZones.ts    | 17 ++---
 .../interaction/useDashboardInteractions.ts   |  5 ++
 7 files changed, 26 insertions(+), 73 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index b5303ee3..228d1bb9 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -203,60 +203,8 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
     return () => window.removeEventListener('mousemove', onMove);
   }, [fullscreenCardId]);
 
-  // Arc/Zen fullscreen: the dock hides with the rest of the chrome but slides back on a left-edge
-  // graze, and clicking a tile SWAPS which card owns the full screen instead of moving the camera.
-  // Hover semantics are a 1:1 port of Zen's compact mode (ZenCompactMode.mjs + compact-mode.yaml):
-  // sidebar-keep-hover 150ms grace after leaving, 1000ms retention when the cursor exits the window
-  // across the dock's screen edge, and an 800ms flash when the active (fullscreen) card switches.
-  const FS_KEEP_HOVER_MS = 150;
-  const FS_WINDOW_LEAVE_MS = 1000;
-  const FS_FLASH_MS = 800;
-  const [fsDockRevealed, setFsDockRevealed] = React.useState(false);
-  const fsDockRef = React.useRef<HTMLDivElement | null>(null);
-  const fsRevealedRef = React.useRef(false);
-  fsRevealedRef.current = fsDockRevealed;
-  useEffect(() => {
-    if (!fullscreenCardId) { setFsDockRevealed(false); return undefined; }
-    let hideTimer: number | null = null;
-    const cancelHide = (): void => { if (hideTimer != null) { window.clearTimeout(hideTimer); hideTimer = null; } };
-    const scheduleHide = (ms: number): void => { cancelHide(); hideTimer = window.setTimeout(() => setFsDockRevealed(false), ms); };
-    const overDock = (x: number, y: number): boolean => {
-      const el = fsDockRef.current;
-      if (!el) return false;
-      const r = el.getBoundingClientRect();
-      return x >= r.left - 8 && x <= r.right + 8 && y >= r.top - 8 && y <= r.bottom + 8;
-    };
-    const onMove = (e: MouseEvent): void => {
-      if (e.clientX <= 16 || overDock(e.clientX, e.clientY)) {
-        cancelHide();
-        if (!fsRevealedRef.current) setFsDockRevealed(true);
-      } else if (fsRevealedRef.current && hideTimer == null) {
-        scheduleHide(FS_KEEP_HOVER_MS);
-      }
-    };
-    // Cursor flung out of the window across the dock's edge: keep the dock up (Zen's screen-edge
-    // retention), then let the next in-window move decide.
-    const onOut = (e: MouseEvent): void => {
-      if (!e.relatedTarget && e.clientX <= 24 && fsRevealedRef.current) scheduleHide(FS_WINDOW_LEAVE_MS);
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseout', onOut);
-    return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseout', onOut); cancelHide(); };
-  }, [fullscreenCardId]);
-  // Zen flashes the sidebar on tab switch in compact mode; swapping the fullscreen card is our tab switch.
-  const prevFsCardRef = React.useRef<string | null>(null);
-  useEffect(() => {
-    const prev = prevFsCardRef.current;
-    prevFsCardRef.current = fullscreenCardId;
-    if (!fullscreenCardId || !prev || prev === fullscreenCardId) return undefined;
-    setFsDockRevealed(true);
-    const t = window.setTimeout(() => {
-      const el = fsDockRef.current;
-      if (el && el.matches(':hover')) return;
-      setFsDockRevealed(false);
-    }, FS_FLASH_MS);
-    return () => window.clearTimeout(t);
-  }, [fullscreenCardId]);
+  // Arc fullscreen layout: the dock rail STAYS PUT (Arc's persistent sidebar) while the card
+  // expands into the whole dashboard beside it; clicking a tile SWAPS which card owns the screen.
   const swapFullscreen = React.useCallback((cardId: string) => {
     if (!fullscreenCardId || cardId === fullscreenCardId) return;
     dispatch(clearTiledCard(fullscreenCardId));
@@ -325,16 +273,11 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         />
       )}
 
-      {(!fullscreenCardId || fsDockRevealed) && (
+      {(
         <Box
-          ref={fsDockRef}
           sx={fullscreenCardId ? {
-            // Explicit width: the dock inside is position:absolute so the wrapper would collapse to
-            // its padding, and the hover-keep hit test would miss the dock entirely.
             position: 'absolute', left: 0, top: 0, bottom: 0, width: 64, zIndex: 999995,
             display: 'flex', alignItems: 'center', pl: '4px',
-            animation: 'osw-fsdock-in 160ms ease-out',
-            '@keyframes osw-fsdock-in': { from: { transform: 'translateX(-52px)', opacity: 0 }, to: { transform: 'translateX(0)', opacity: 1 } },
           } : undefined}
         >
           <DesktopDock
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 1e12171a..44f5da5e 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -472,8 +472,10 @@ const AgentCard: React.FC<Props> = ({
   const justDraggedRef = useRef(false);
   const lastPointerRef = useRef<{ clientX: number; clientY: number }>({ clientX: 0, clientY: 0 });
 
+  const tileZone = useAppSelector((s) => s.dashboardLayout.tiledCards[session.id]);
   const handleDragPointerDown = useCallback((e: React.PointerEvent) => {
     if (e.button !== 0) return;
+    if (tileZone) return;
     e.preventDefault();
     e.stopPropagation();
     const cs = getCanvasState();
@@ -483,7 +485,7 @@ const AgentCard: React.FC<Props> = ({
     setIsDragging(true);
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
     onDragStart?.(session.id, 'agent');
-  }, [cardX, cardY, onDragStart, session.id, getCanvasState]);
+  }, [cardX, cardY, onDragStart, session.id, getCanvasState, tileZone]);
 
   const recomputeDragPos = useCallback(() => {
     const ds = dragState.current;
@@ -656,7 +658,6 @@ const AgentCard: React.FC<Props> = ({
     }
   };
 
-  const tileZone = useAppSelector((s) => s.dashboardLayout.tiledCards[session.id]);
   const isFullscreen = tileZone === 'fullscreen';
   // Fullscreen pins the card to the viewport, so while tiled the geometry must track canvas pan/zoom.
   // Chat cards read the camera via a getter (not props) to avoid re-rendering on every pan tick, so
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 1e7554eb..74312337 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -712,6 +712,7 @@ const BrowserCard: React.FC<Props> = ({
 
   const handleDragPointerDown = useCallback((e: React.PointerEvent) => {
     if (e.button !== 0) return;
+    if (tileZone) return;
     e.preventDefault();
     e.stopPropagation();
     const cs = getCanvasState();
@@ -721,7 +722,7 @@ const BrowserCard: React.FC<Props> = ({
     setIsDragging(true);
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
     onDragStart?.(browserId, 'browser');
-  }, [cardX, cardY, onDragStart, browserId, getCanvasState]);
+  }, [cardX, cardY, onDragStart, browserId, getCanvasState, tileZone]);
 
   const recomputeDragPos = useCallback(() => {
     const ds = dragState.current;
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index b13941dd..627e961d 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -242,6 +242,7 @@ const DashboardViewCard: React.FC<Props> = ({
 
   const handleDragPointerDown = useCallback((e: React.PointerEvent) => {
     if (e.button !== 0) return;
+    if (tileZone) return;
     e.preventDefault();
     e.stopPropagation();
     const cs = getCanvasState();
@@ -251,7 +252,7 @@ const DashboardViewCard: React.FC<Props> = ({
     setIsDragging(true);
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
     onDragStart?.(cardKey, 'view');
-  }, [cardX, cardY, onDragStart, cardKey, getCanvasState]);
+  }, [cardX, cardY, onDragStart, cardKey, getCanvasState, tileZone]);
 
   const recomputeDragPos = useCallback(() => {
     const ds = dragState.current;
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 8a8f599c..809baa99 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -108,6 +108,7 @@ const NoteCard: React.FC<Props> = ({
 
   const handleDragPointerDown = useCallback((e: React.PointerEvent) => {
     if (e.button !== 0) return;
+    if (tileZone) return;
     e.preventDefault();
     e.stopPropagation();
     const cs = getCanvasState();
@@ -121,7 +122,7 @@ const NoteCard: React.FC<Props> = ({
     setIsDragging(true);
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
     onDragStart?.(noteId, 'note');
-  }, [cardX, cardY, noteId, onDragStart, getCanvasState]);
+  }, [cardX, cardY, noteId, onDragStart, getCanvasState, tileZone]);
 
   const recomputeDragPos = useCallback(() => {
     const ds = dragState.current;
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index 7434e32b..3d34b755 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -23,6 +23,8 @@ export const TILE_ZONES: Record<string, { x: number; y: number; w: number; h: nu
 
 // macOS Sequoia leaves a small gap between tiled windows; we match it.
 const GAP = 8;
+// Width the persistent dock rail owns while a card is fullscreen (the Arc sidebar analog).
+export const FULLSCREEN_DOCK_RAIL = 64;
 
 export interface TiledStyle {
   left: number;
@@ -46,20 +48,19 @@ function workspaceSize(): { w: number; h: number } {
 }
 
 export function computeTiledStyle(zone: string, panX: number, panY: number, zoom: number): TiledStyle | null {
-  // 'fullscreen' = macOS full screen: the app chrome hides (AppShell/DashboardCanvas react to
-  // selectFullscreenCardId) and the card covers the WHOLE window. Target is WINDOW space here, so
-  // the viewport origin does NOT cancel; once the chrome collapses that origin goes to ~0 anyway.
+  // 'fullscreen' = the Arc layout: the app chrome hides except the dock rail, which stays put on
+  // the left, and the card expands into the ENTIRE dashboard beside it, floating on the same gap
+  // the tile zones use. Target is WINDOW space here, so the viewport origin does NOT cancel.
   if (zone === 'fullscreen') {
-    const PEEK = 0;
     const el = document.querySelector('[data-canvas-viewport]');
     const r = el ? el.getBoundingClientRect() : null;
     const ox = r ? r.left : 0;
     const oy = r ? r.top : 0;
     return {
-      left: (PEEK - ox - panX) / zoom,
-      top: (PEEK - oy - panY) / zoom,
-      width: window.innerWidth - PEEK * 2,
-      height: window.innerHeight - PEEK * 2,
+      left: (FULLSCREEN_DOCK_RAIL + GAP - ox - panX) / zoom,
+      top: (GAP - oy - panY) / zoom,
+      width: window.innerWidth - FULLSCREEN_DOCK_RAIL - GAP * 2,
+      height: window.innerHeight - GAP * 2,
       transform: `scale(${1 / zoom})`,
       transformOrigin: 'top left',
     };
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
index 1215fca2..c1770936 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
@@ -73,6 +73,10 @@ export function useDashboardInteractions({
     // The Workflows window is an app you click around inside, not a card you re-center every tap. Single-click only raises + selects it; double-click still zoom-to-fits (handleCardDoubleClick). Without this, clicking any button inside it yanked the canvas into a re-zoom.
     if (type === 'workflows-hub' || type === 'workflows-monitor') return;
 
+    // A tiled (fullscreen/snapped) card is pinned Arc-style: clicking inside it must not collapse
+    // it or glide the camera; it leaves the mode via its own controls (yellow, Esc, dock swap).
+    if (store.getState().dashboardLayout.tiledCards[id]) return;
+
     const alreadyExpanded = type === 'agent' && expandedSessionIds.includes(id);
 
     if (alreadyExpanded) {
@@ -206,6 +210,7 @@ export function useDashboardInteractions({
     }
     dispatch(bringToFront({ id, type }));
     setFocusedCardId(id);
+    if (store.getState().dashboardLayout.tiledCards[id]) return;
     setTimeout(() => {
       const rect = getCardRect(id, type);
       if (rect) canvas.actions.fitToCards([rect], 1.15, true);

From 960674e913d5b9e7a5f02e65d7b945969d683ed7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 23:46:52 -0700
Subject: [PATCH 109/248] [eric] desktop: sidebar peek works in fullscreen too,
 sliding over the dock rail (one left-edge behavior everywhere)

---
 frontend/src/app/components/Layout/AppShell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 1bf4586f..53d94009 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -628,7 +628,7 @@ const AppShell: React.FC = () => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary }}>
-      {sidebarAway && !sidePeek && !fullscreenCardId && (
+      {sidebarAway && !sidePeek && (
         <Box onMouseEnter={() => { cancelPeekClose(); setSidePeek(true); }} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
       )}
       {/* Top bar dropped (Arc/Zen): a zero-height anchor left only to float the agent-activity island at top-center; the island renders nothing when idle. */}

From 9509cd43844437c3464350a602326fd00dee69fe Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 20 Jul 2026 23:50:51 -0700
Subject: [PATCH 110/248] [eric] desktop: sidebar clicks act in fullscreen (app
 row swaps the pinned card, current dashboard exits to canvas)

---
 frontend/src/app/components/Layout/AppShell.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 53d94009..df6e8322 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -43,7 +43,7 @@ import { shallowEqual } from 'react-redux';
 import { fetchDashboards, createDashboard, renameDashboard } from '@/shared/state/dashboardsSlice';
 import { Typewriter } from '@/app/components/feedback/Animated';
 import { setPendingFocusAgentId } from '@/shared/state/tempStateSlice';
-import { addBrowserCard, addBrowserTab, cycleBrowserTab, reopenLastClosed, addViewCard, selectFullscreenCardId } from '@/shared/state/dashboardLayoutSlice';
+import { addBrowserCard, addBrowserTab, cycleBrowserTab, reopenLastClosed, addViewCard, selectFullscreenCardId, setTiledCard, clearTiledCard } from '@/shared/state/dashboardLayoutSlice';
 import { setPendingBrowserUrl } from '@/shared/state/tempStateSlice';
 import { fetchOutputs, deleteOutput, updateOutput } from '@/shared/state/outputsSlice';
 import { removeViewCardCleanly } from '@/shared/viewTeardown';
@@ -521,13 +521,18 @@ const AppShell: React.FC = () => {
   }, [switchDashboard]);
 
   const [lastDashboardId, setLastDashboardId] = useLastDashboardId();
-  // Apps no longer have a full-page editor; clicking one in the sidebar drops (or focuses) its live card on the current dashboard. Fold-in of the old App Builder.
+  // Apps no longer have a full-page editor; clicking one in the sidebar drops (or focuses) its live card on the current dashboard. Fold-in of the old App Builder. While a card is fullscreen the click SWAPS the pinned card to this app (Arc: the sidebar switches what fills the screen), otherwise the new card would land invisibly behind it.
   const navigateToApp = useCallback((id: string) => {
     dispatch(addViewCard({ outputId: id }));
+    if (fullscreenCardId) {
+      if (fullscreenCardId !== id) dispatch(clearTiledCard(fullscreenCardId));
+      dispatch(setTiledCard({ cardId: id, zone: 'fullscreen' }));
+      return;
+    }
     if (lastDashboardId && location.pathname !== `/dashboard/${lastDashboardId}`) {
       navigate(`/dashboard/${lastDashboardId}`);
     }
-  }, [dispatch, navigate, lastDashboardId, location.pathname]);
+  }, [dispatch, navigate, lastDashboardId, location.pathname, fullscreenCardId]);
   // The real delete, run only once Undo has lapsed: tear the live view card down cleanly (never rip a
   // webview GPU surface mid-composite), then delete the output for good.
   const commitDeleteApp = useCallback((id: string) => {
@@ -596,6 +601,12 @@ const AppShell: React.FC = () => {
 
   const handleDashboardItemClick = (dashboardId: string) => {
     if (renamingDashboardId === dashboardId) return;
+    // In fullscreen, clicking the dashboard you are already on means "show me the canvas": exit the
+    // pinned view. A different dashboard exits via the resetLayout tile clear on switch.
+    if (fullscreenCardId && activeDashboardId === dashboardId) {
+      dispatch(clearTiledCard(fullscreenCardId));
+      return;
+    }
     navigate(`/dashboard/${dashboardId}`);
   };
 

From cd07b2143f6d1ac8b57d86881794344f22d80583 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 00:03:37 -0700
Subject: [PATCH 111/248] [eric] desktop: sidebar toggle pins the sidebar open
 in fullscreen; card anchors to the viewport so docked chrome squeezes it

---
 .../src/app/components/Layout/AppShell.tsx    | 18 ++++++++++++++---
 .../app/pages/Dashboard/cards/tileZones.ts    | 20 +++++++++----------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index df6e8322..261ca811 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -444,7 +444,10 @@ const AppShell: React.FC = () => {
   // Zen compact mode: the sidebar is the only chrome now, so whenever it's "away" (user collapsed it,
   // OR a fullscreen card hides everything) a left-edge hover floats it back in as an overlay.
   const fsActive = !!fullscreenCardId && isDashboardViewActive;
-  const sidebarAway = (sidebarCollapsed || fsActive) && isDashboardViewActive;
+  // Arc: the sidebar toggle PINS the sidebar open inside fullscreen (docked, card shrinks beside it);
+  // unpinned fullscreen keeps the hover-peek overlay.
+  const [fsSidebarPinned, setFsSidebarPinned] = useState(false);
+  const sidebarAway = (sidebarCollapsed || (fsActive && !fsSidebarPinned)) && isDashboardViewActive;
   const [sidePeek, setSidePeek] = useState(false);
   useEffect(() => { if (!sidebarAway) setSidePeek(false); }, [sidebarAway]);
   // When the sidebar docks away, the canvas runs flush to the window's left edge, so the floating
@@ -849,7 +852,7 @@ const AppShell: React.FC = () => {
       )}
 
       <Box sx={{ display: 'flex', flex: 1, minHeight: 0 }}>
-      {((!sidebarCollapsed && !fsHideChrome) || sideOverlay) && (
+      {((!sidebarCollapsed && (!fsHideChrome || fsSidebarPinned)) || sideOverlay) && (
       <>
       <Box
         onMouseEnter={() => { if (sideOverlay) cancelPeekClose(); }}
@@ -900,7 +903,16 @@ const AppShell: React.FC = () => {
             <Tooltip title={sideOverlay ? 'Dock sidebar' : 'Hide sidebar'}>
               {/* Arc-style pin: from the floating peek this DOCKS the sidebar permanently (pushes the
                   canvas), from docked it collapses back to peek. Toggle, not one-way collapse. */}
-              <IconButton size="small" onClick={() => setSidebarCollapsed((v) => !v)}
+              <IconButton size="small" onClick={() => {
+                  if (fsActive) {
+                    setFsSidebarPinned((v) => {
+                      if (!v) setSidebarCollapsed(false);
+                      return !v;
+                    });
+                    return;
+                  }
+                  setSidebarCollapsed((v) => !v);
+                }}
                 data-onboarding="sidebar-toggle" aria-expanded={!sidebarCollapsed}
                 sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` } }}>
                 <AnimatedPanelLeft size={17} />
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index 3d34b755..eeb19867 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -48,19 +48,17 @@ function workspaceSize(): { w: number; h: number } {
 }
 
 export function computeTiledStyle(zone: string, panX: number, panY: number, zoom: number): TiledStyle | null {
-  // 'fullscreen' = the Arc layout: the app chrome hides except the dock rail, which stays put on
-  // the left, and the card expands into the ENTIRE dashboard beside it, floating on the same gap
-  // the tile zones use. Target is WINDOW space here, so the viewport origin does NOT cancel.
+  // 'fullscreen' = the Arc layout: the dock rail stays put on the left and the card expands into
+  // the ENTIRE dashboard beside it, floating on the same gap the tile zones use. Anchored to the
+  // VIEWPORT (not the window) so docked chrome, like the pinned sidebar, squeezes the card instead
+  // of being covered by it.
   if (zone === 'fullscreen') {
-    const el = document.querySelector('[data-canvas-viewport]');
-    const r = el ? el.getBoundingClientRect() : null;
-    const ox = r ? r.left : 0;
-    const oy = r ? r.top : 0;
+    const { w: vpW, h: vpH } = workspaceSize();
     return {
-      left: (FULLSCREEN_DOCK_RAIL + GAP - ox - panX) / zoom,
-      top: (GAP - oy - panY) / zoom,
-      width: window.innerWidth - FULLSCREEN_DOCK_RAIL - GAP * 2,
-      height: window.innerHeight - GAP * 2,
+      left: (FULLSCREEN_DOCK_RAIL + GAP - panX) / zoom,
+      top: (GAP - panY) / zoom,
+      width: vpW - FULLSCREEN_DOCK_RAIL - GAP * 2,
+      height: vpH - GAP * 2,
       transform: `scale(${1 / zoom})`,
       transformOrigin: 'top left',
     };

From cd6add56b115dfeebb424b4a0d2d52a3b967e6e8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 13:44:23 -0700
Subject: [PATCH 112/248] [eric] desktop: full size view reads like a chat page
 (centered reading column), drop the dock rail + fisheye

---
 .../src/app/pages/AgentChat/AgentChat.tsx     | 10 +++-
 .../Dashboard/canvas/DashboardCanvas.tsx      | 58 +++++++------------
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  3 +-
 .../app/pages/Dashboard/cards/tileZones.ts    | 13 ++---
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 35 +----------
 5 files changed, 36 insertions(+), 83 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 42a2e0ea..278817db 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -84,6 +84,10 @@ const CONTEXT_WINDOWS: Record<string, number> = {
   haiku: 200_000,
 };
 
+// Full size view reads like a chat page, not a card: the transcript + composer center in one
+// column at a comfortable measure (assistant-ui parks at 44rem, LibreChat 48rem; 760 splits them).
+const FULLSCREEN_READING_MAX_W = 760;
+
 // Only a fallback for never-rendered items; real heights are measured once on screen.
 const RENDER_ITEM_ESTIMATED_HEIGHT = 140;
 // Conservative estimate for an unmeasured tool row: tool groups/pairs render collapsed (~40-50px) far more often than expanded. Leaning low keeps scrollHeight (and the scrollbar thumb) from jumping when a tool row measures shorter.
@@ -228,6 +232,8 @@ interface AgentChatProps {
   workflowEditId?: string;
   // View-only transcript (e.g. the Run Monitor): renders messages + tool calls but no composer, so the session can't be typed into.
   readOnly?: boolean;
+  // Full size view: center the whole chat in a reading column so an expanded card reads like a chat page.
+  fullscreenChat?: boolean;
   // One-shot text to drop into the composer (e.g. a run attached as context).
   prefillPrompt?: string;
   // A workflow run attached as a removable context chip above the composer; while present, each send routes through onSendRunQuestion so the run's transcript rides along as hidden context for that turn.
@@ -236,7 +242,7 @@ interface AgentChatProps {
   onSendRunQuestion?: (prompt: string, runId: string) => Promise<void>;
 }
 
-const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose, embedded, autoFocus, isGlowing, onDismissGlow, initialContextPaths, onBranch, workflowEditId, readOnly, prefillPrompt, runContext, onClearRunContext, onSendRunQuestion }) => {
+const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose, embedded, autoFocus, isGlowing, onDismissGlow, initialContextPaths, onBranch, workflowEditId, readOnly, fullscreenChat, prefillPrompt, runContext, onClearRunContext, onSendRunQuestion }) => {
   const c = useClaudeTokens();
   const STATUS_STYLES: Record<string, { color: string; bg: string }> = {
     running: { color: c.status.success, bg: c.status.successBg },
@@ -1443,7 +1449,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   return (
     <Box sx={{ display: 'flex', height: '100%' }}>
       <ContextDrawer />
-      <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0, overflow: 'hidden' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0, overflow: 'hidden', ...(fullscreenChat && { maxWidth: FULLSCREEN_READING_MAX_W, width: '100%', mx: 'auto' }) }}>
         {!embedded && (
           <Box
             sx={{
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 228d1bb9..3c11a1eb 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, type RefObject } from 'react';
 import Box from '@mui/material/Box';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { clearTiledCard, setTiledCard, selectFullscreenCardId } from '@/shared/state/dashboardLayoutSlice';
-import { expandSession } from '@/shared/state/agentsSlice';
+import { clearTiledCard, selectFullscreenCardId } from '@/shared/state/dashboardLayoutSlice';
 import DashboardHeader from './DashboardHeader';
 import TetherLayer from './TetherLayer';
 import DashboardCardLayer from './DashboardCardLayer';
@@ -203,15 +202,6 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
     return () => window.removeEventListener('mousemove', onMove);
   }, [fullscreenCardId]);
 
-  // Arc fullscreen layout: the dock rail STAYS PUT (Arc's persistent sidebar) while the card
-  // expands into the whole dashboard beside it; clicking a tile SWAPS which card owns the screen.
-  const swapFullscreen = React.useCallback((cardId: string) => {
-    if (!fullscreenCardId || cardId === fullscreenCardId) return;
-    dispatch(clearTiledCard(fullscreenCardId));
-    if (sessions[cardId]) dispatch(expandSession(cardId));
-    dispatch(setTiledCard({ cardId, zone: 'fullscreen' }));
-  }, [fullscreenCardId, dispatch, sessions]);
-
   // Gestures write the transform imperatively (no React commit per frame), so a foreign render mid-gesture would paint the stale committed transform for a frame. Re-applying live after EVERY render seals that; do not remove.
   React.useLayoutEffect(() => {
     canvas.actions.syncTransform();
@@ -273,33 +263,25 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         />
       )}
 
-      {(
-        <Box
-          sx={fullscreenCardId ? {
-            position: 'absolute', left: 0, top: 0, bottom: 0, width: 64, zIndex: 999995,
-            display: 'flex', alignItems: 'center', pl: '4px',
-          } : undefined}
-        >
-          <DesktopDock
-            sessions={sessions}
-            cards={cards}
-            viewCards={viewCards}
-            browserCards={browserCards}
-            notes={notes}
-            workflowCards={workflowCards}
-            outputs={outputs}
-            selectedIds={Array.from(selection.selectedIds.keys())}
-            onFocusCard={(cardId, rect) => {
-              if (fullscreenCardId) { swapFullscreen(cardId); return; }
-              canvas.actions.fitToCards([rect], 1.15, true);
-              onHighlightCard?.(cardId);
-            }}
-            onApplications={() => setAppsWindowOpen((v) => !v)}
-            onNewAgent={onNewAgent}
-            onAddBrowser={onAddBrowser}
-            onAddNote={onAddNote}
-          />
-        </Box>
+      {!fullscreenCardId && (
+        <DesktopDock
+          sessions={sessions}
+          cards={cards}
+          viewCards={viewCards}
+          browserCards={browserCards}
+          notes={notes}
+          workflowCards={workflowCards}
+          outputs={outputs}
+          selectedIds={Array.from(selection.selectedIds.keys())}
+          onFocusCard={(cardId, rect) => {
+            canvas.actions.fitToCards([rect], 1.15, true);
+            onHighlightCard?.(cardId);
+          }}
+          onApplications={() => setAppsWindowOpen((v) => !v)}
+          onNewAgent={onNewAgent}
+          onAddBrowser={onAddBrowser}
+          onAddNote={onAddNote}
+        />
       )}
 
       {appsWindowOpen && !fullscreenCardId && (
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 44f5da5e..5436279d 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -933,7 +933,7 @@ const AgentCard: React.FC<Props> = ({
             backdropFilter: 'blur(24px) saturate(150%)',
             WebkitBackdropFilter: 'blur(24px) saturate(150%)',
           }),
-          border: isSelected ? '2px solid #3b82f6' : '1px solid rgba(255,255,255,0.08)',
+          border: isFullscreen ? 'none' : isSelected ? '2px solid #3b82f6' : '1px solid rgba(255,255,255,0.08)',
           borderRadius: tiledStyle ? '12px' : '20px',
           boxShadow: '0 18px 48px rgba(0,0,0,0.4)',
         }),
@@ -1189,6 +1189,7 @@ const AgentCard: React.FC<Props> = ({
               sessionId={session.id}
               onClose={() => dispatch(collapseSession(session.id))}
               embedded
+              fullscreenChat={isFullscreen}
               autoFocus={autoFocusInput}
               isGlowing={isGlowingRedux && !glowFading}
               onDismissGlow={dismissGlow}
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index eeb19867..63d389ae 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -23,8 +23,6 @@ export const TILE_ZONES: Record<string, { x: number; y: number; w: number; h: nu
 
 // macOS Sequoia leaves a small gap between tiled windows; we match it.
 const GAP = 8;
-// Width the persistent dock rail owns while a card is fullscreen (the Arc sidebar analog).
-export const FULLSCREEN_DOCK_RAIL = 64;
 
 export interface TiledStyle {
   left: number;
@@ -48,16 +46,15 @@ function workspaceSize(): { w: number; h: number } {
 }
 
 export function computeTiledStyle(zone: string, panX: number, panY: number, zoom: number): TiledStyle | null {
-  // 'fullscreen' = the Arc layout: the dock rail stays put on the left and the card expands into
-  // the ENTIRE dashboard beside it, floating on the same gap the tile zones use. Anchored to the
-  // VIEWPORT (not the window) so docked chrome, like the pinned sidebar, squeezes the card instead
-  // of being covered by it.
+  // 'fullscreen' = the card expands into the ENTIRE dashboard, floating on the same gap the tile
+  // zones use. Anchored to the VIEWPORT (not the window) so docked chrome, like the pinned sidebar,
+  // squeezes the card instead of being covered by it (the canvas viewport shrinks with the sidebar).
   if (zone === 'fullscreen') {
     const { w: vpW, h: vpH } = workspaceSize();
     return {
-      left: (FULLSCREEN_DOCK_RAIL + GAP - panX) / zoom,
+      left: (GAP - panX) / zoom,
       top: (GAP - panY) / zoom,
-      width: vpW - FULLSCREEN_DOCK_RAIL - GAP * 2,
+      width: vpW - GAP * 2,
       height: vpH - GAP * 2,
       transform: `scale(${1 / zoom})`,
       transformOrigin: 'top left',
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index fdcc6ee8..702ad5c5 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -98,21 +98,6 @@ function DesktopDock({
   onAddNote,
 }: DesktopDockProps): React.ReactElement | null {
   const dispatch = useAppDispatch();
-  const dockBodyRef = useRef<HTMLDivElement | null>(null);
-  // macOS-dock fisheye: tiles swell as the cursor nears and neighbors fall off along the curve,
-  // with a slight outward bulge so the column reads as a wheel (OptionWheel-style), not a ruler.
-  const applyFisheye = useCallback((clientY: number | null) => {
-    const root = dockBodyRef.current;
-    if (!root) return;
-    const rootTop = root.getBoundingClientRect().top;
-    root.querySelectorAll<HTMLElement>('.osw-dock-tile').forEach((el) => {
-      if (clientY == null) { el.style.transform = ''; return; }
-      const cy = rootTop + el.offsetTop + el.offsetHeight / 2;
-      const t = Math.max(0, 1 - Math.abs(clientY - cy) / 90);
-      const emph = t * t;
-      el.style.transform = `translateX(${(9 * emph).toFixed(1)}px) scale(${(1 + 0.5 * emph).toFixed(3)})`;
-    });
-  }, []);
   const [hovered, setHovered] = useState<{ id: string; top: number } | null>(null);
   const [liveShot, setLiveShot] = useState<{ id: string; dataUrl: string } | null>(null);
   const hoverTimer = useRef<number | null>(null);
@@ -217,9 +202,7 @@ function DesktopDock({
 
   return (
     <Box
-      ref={dockBodyRef}
-      onMouseMove={(e: React.MouseEvent) => applyFisheye(e.clientY)}
-      onMouseLeave={() => { endHover(); applyFisheye(null); }}
+      onMouseLeave={endHover}
       sx={{
         position: 'absolute',
         left: 12,
@@ -248,7 +231,6 @@ function DesktopDock({
               endHover();
               onFocusCard(entry.id, entry.rect);
             }}
-            className="osw-dock-tile"
             sx={{
               position: 'relative',
               width: TILE,
@@ -261,9 +243,6 @@ function DesktopDock({
               cursor: 'pointer',
               overflow: 'hidden',
               flexShrink: 0,
-              transition: 'transform 0.12s ease-out',
-              willChange: 'transform',
-              transformOrigin: 'left center',
               ...(isActive && { outline: '2px solid #6aa2ff', outlineOffset: '2px' }),
             }}
           >
@@ -296,7 +275,6 @@ function DesktopDock({
           <Box
             onClick={a.act}
             onMouseEnter={endHover}
-            className="osw-dock-tile"
             sx={{
               width: TILE,
               height: TILE,
@@ -307,9 +285,6 @@ function DesktopDock({
               justifyContent: 'center',
               cursor: 'pointer',
               flexShrink: 0,
-              transition: 'transform 0.12s ease-out',
-              willChange: 'transform',
-              transformOrigin: 'left center',
             }}
           >
             {a.icon}
@@ -320,7 +295,6 @@ function DesktopDock({
       <Box
         onClick={() => dispatch(openSettingsModal(undefined))}
         onMouseEnter={endHover}
-        className="osw-dock-tile"
         sx={{
           width: TILE,
           height: TILE,
@@ -331,9 +305,6 @@ function DesktopDock({
           justifyContent: 'center',
           cursor: 'pointer',
           flexShrink: 0,
-          transition: 'transform 0.12s ease-out',
-          willChange: 'transform',
-          transformOrigin: 'left center',
         }}
       >
         <SettingsIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
@@ -341,7 +312,6 @@ function DesktopDock({
       <Box
         onClick={onApplications}
         onMouseEnter={endHover}
-        className="osw-dock-tile"
         sx={{
           width: TILE,
           height: TILE,
@@ -352,9 +322,6 @@ function DesktopDock({
           justifyContent: 'center',
           cursor: 'pointer',
           flexShrink: 0,
-          transition: 'transform 0.12s ease-out',
-          willChange: 'transform',
-          transformOrigin: 'left center',
         }}
       >
         <AppsRoundedIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />

From 8735408c87366c02281c6e15399fef37781dd93d Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 14:09:17 -0700
Subject: [PATCH 113/248] [eric] agents: make tool-ui fire more (direct-call
 hint + exact component names in the nudge, slim ShowUI tool def ~2.1K tokens)

---
 .../manager/prompt/compose_turn_system_prompt.py   | 14 ++++++++++----
 backend/apps/agents/show_ui_mcp_server.py          |  9 +++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
index 5fe0d19e..f05f9ba0 100644
--- a/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
+++ b/backend/apps/agents/manager/prompt/compose_turn_system_prompt.py
@@ -98,13 +98,19 @@ def compose_turn_system_prompt(
         if load_builtin_permissions().get("ShowUI", "always_allow") != "deny":
             rich_ui_note = (
                 "<rich_ui>\n"
-                "Strongly prefer rendering rich UI over prose, every time the content fits:\n"
-                "- ShowUI for any structured result: tables, stats, links, plans, progress, code, diffs, "
-                "charts, maps, media, posts, receipts. Render the component, then add one line of text.\n"
+                "Strongly prefer rendering rich UI over prose, every time the content fits. The tools "
+                "are mcp__openswarm-ui__ShowUI and mcp__openswarm-ui__AskUI; they are always available "
+                "this session, so call them DIRECTLY by that name, no ToolSearch step needed.\n"
+                "- ShowUI for any structured result. Use the EXACT component name: a table = data-table, "
+                "stats = stats-display, links = link-preview, a plan = plan, steps = progress-tracker, "
+                "code = code-block, a diff = code-diff, a chart = chart, a map = geo-map, media = "
+                "image/image-gallery/video/audio, a social post = x-post/linkedin-post/instagram-post, "
+                "a receipt = order-summary. Render the component, then add one line of text.\n"
                 "- For multi-step work, render a progress-tracker FIRST and re-call ShowUI with the SAME "
                 "props.id after each step so the card advances live; same-id re-calls update in place.\n"
                 "- AskUI for ANY question with enumerable choices, an approval, or tunable values: render "
-                "it and wait for the answer instead of asking in prose. Flat choices = option-list; a "
+                "it (option-list, question-flow, parameter-slider, preferences-panel, approval-card) and "
+                "wait for the answer instead of asking in prose. Flat choices = option-list; a "
                 "multi-question form = one AskUI call per question in sequence. The user can always "
                 "answer off-list in free text (result action 'free_text').\n"
                 "Describing structured data in plain text when a component fits is the worse answer.\n"
diff --git a/backend/apps/agents/show_ui_mcp_server.py b/backend/apps/agents/show_ui_mcp_server.py
index fa487274..ceb97259 100644
--- a/backend/apps/agents/show_ui_mcp_server.py
+++ b/backend/apps/agents/show_ui_mcp_server.py
@@ -79,10 +79,11 @@ TOOLS = [
         "name": "ShowUI",
         "description": (
             "Render a rich inline UI component in the chat instead of describing data as text. "
-            "Use it whenever a result fits one of the shapes. Supported components:\n"
-            + "\n".join(f"- '{name}': {spec}" for name, spec in COMPONENT_SPECS.items())
-            + "\nCall it with the component name and a props object matching that shape. "
-            "The component renders in place of raw text; still give a one-line text summary after. "
+            "Use it whenever a result fits a component. Components: "
+            + ", ".join(COMPONENT_SPECS.keys())
+            + ". Call it with the component name and a props object; if your props are off, the tool "
+            "returns that component's exact required shape so you can fix and re-call. The component "
+            "renders in place of raw text; still give a one-line text summary after. "
             "LIVE UPDATES: calling ShowUI again with the SAME component and props.id updates that "
             "card in place. Use this to advance progress-tracker/plan step statuses AS you complete "
             "each step of real work, or to refresh data; never mint a new id for an update. Before "

From 3416aab991ba72af8ab3631b3d09a171bd580914 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 14:51:12 -0700
Subject: [PATCH 114/248] [eric] canvas: invert mouse buttons to Google Maps
 (left drag pans, right drag marquee-selects, meta+left still selects)

---
 .../hooks/interaction/useDashboardInteractions.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
index c1770936..3c40bf23 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
@@ -140,15 +140,20 @@ export function useDashboardInteractions({
   }, [selection, dispatch]);
 
   // ---- Viewport event handlers (compose pan + marquee) ----
+  // Google Maps model: LEFT drag pans the canvas, RIGHT drag marquee-selects (inverse of a design
+  // tool, matching how the user asked for it). Middle keeps panning. The viewport move/up handlers
+  // run BOTH pan + marquee every frame, so which one is "armed" is decided here on mousedown.
   const handleViewportMouseDown = useCallback((e: React.MouseEvent) => {
     if (e.button === 1) {
       canvas.handlers.onMouseDown(e);
       return;
     }
 
+    // RIGHT button = marquee select. preventDefault kills the OS context menu on the canvas.
     if (e.button === 2) {
       e.preventDefault();
-      canvas.handlers.onMouseDown(e);
+      if (isCardTarget(e.target, e.currentTarget)) return;
+      selection.handleCanvasMouseDown(e.nativeEvent);
       return;
     }
 
@@ -172,11 +177,13 @@ export function useDashboardInteractions({
       return;
     }
 
-    if (e.metaKey || e.ctrlKey || canvas.spaceHeld) {
+    // meta/ctrl + LEFT keeps a way to marquee-select with the primary button (additive selection);
+    // plain LEFT (and space-held) pans. A plain empty-canvas press clears the selection.
+    if (e.metaKey || e.ctrlKey) {
+      selection.handleCanvasMouseDown(e.nativeEvent);
+    } else {
       selection.deselectAll();
       canvas.handlers.onMouseDown(e);
-    } else {
-      selection.handleCanvasMouseDown(e.nativeEvent);
     }
   }, [canvas.handlers, canvas.spaceHeld, selection, isElementSelectMode]);
 

From 8c22ec8c802a6bacd5df10f4d49a274cd9f53b10 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 14:51:12 -0700
Subject: [PATCH 115/248] [eric] composer: ghost-text prompt prediction in the
 user's voice (aux-LLM from recent topics), Tab to accept

---
 backend/apps/agents/agents.py                 |   8 ++
 .../apps/agents/manager/predict_prompts.py    | 116 ++++++++++++++++++
 .../src/app/pages/AgentChat/ChatInput.tsx     |   9 +-
 .../ChatInput/hooks/useEditorHandlers.ts      |  31 ++++-
 .../ChatInput/view/ChatInputView.tsx          |   2 +
 .../ChatInput/view/EditorSurface.tsx          |  32 ++++-
 .../app/pages/Dashboard/DashboardToolbar.tsx  |  32 +++++
 7 files changed, 225 insertions(+), 5 deletions(-)
 create mode 100644 backend/apps/agents/manager/predict_prompts.py

diff --git a/backend/apps/agents/agents.py b/backend/apps/agents/agents.py
index e1688c4c..ea72414a 100644
--- a/backend/apps/agents/agents.py
+++ b/backend/apps/agents/agents.py
@@ -67,6 +67,14 @@ async def list_sessions(dashboard_id: str = ""):
     sessions = agent_manager.get_all_sessions(dashboard_id=dashboard_id or None)
     return {"sessions": [p_session_list_item(s) for s in sessions]}
 
+@agents.router.get("/predict-prompts")
+async def predict_prompts_route(count: int = 5):
+    """Guess a few prompts the user might type next, in their own voice, from what they've already
+    worked on. Drives the composer's ghost-text suggestion. Fails open to [] (no signal / no
+    provider / error), so the composer just keeps its static placeholder."""
+    from backend.apps.agents.manager.predict_prompts import predict_prompts
+    return {"suggestions": await predict_prompts(count=max(1, min(count, 8)))}
+
 @agents.router.get("/activity")
 async def agent_activity():
     """How many agent tasks are live right now, plus seconds until the next scheduled
diff --git a/backend/apps/agents/manager/predict_prompts.py b/backend/apps/agents/manager/predict_prompts.py
new file mode 100644
index 00000000..f41ebad8
--- /dev/null
+++ b/backend/apps/agents/manager/predict_prompts.py
@@ -0,0 +1,116 @@
+"""Aux-LLM prompt prediction: guess a few prompts the user might type next, in their own voice,
+from what they've already worked on (recent chat topics + onboarding starters). Provider-agnostic
+(cheap tier of whichever provider is connected); fail-open to [] so the composer just falls back to
+its static placeholder when there is no signal, no provider, or the call errors."""
+
+import logging
+import re
+from typing import List
+
+from typeguard import typechecked
+
+from backend.apps.agents.core.aux_llm import aux_max_tokens_for
+from backend.apps.agents.manager.session.session_store import load_all_session_data
+from backend.apps.settings.settings import load_settings
+
+logger = logging.getLogger(__name__)
+
+MAX_TOPICS = 24
+MAX_SUGGESTIONS = 5
+# Names the aux title-gen hands out for empty/greeting chats; they carry no topic signal.
+P_SKIP_NAMES = {"untitled", "new chat", "greeting", "chat", ""}
+
+
+def p_recent_topics(limit: int = MAX_TOPICS) -> List[str]:
+    """Recent chat topic titles (the aux-distilled 2-4 word names), newest first, deduped."""
+    data = load_all_session_data()
+    data.sort(
+        key=lambda pair: pair[1].get("closed_at") or pair[1].get("created_at") or "",
+        reverse=True,
+    )
+    topics: List[str] = []
+    seen = set()
+    for _sid, d in data:
+        name = (d.get("name") or "").strip()
+        low = name.lower()
+        if low in P_SKIP_NAMES or low in seen:
+            continue
+        seen.add(low)
+        topics.append(name)
+        if len(topics) >= limit:
+            break
+    return topics
+
+
+def p_parse_lines(raw: str, count: int) -> List[str]:
+    """One suggestion per line; strip bullets/numbering/quotes, drop empties, cap at count."""
+    out: List[str] = []
+    for line in raw.splitlines():
+        s = line.strip()
+        s = re.sub(r"^\s*(?:[-*•]|\d+[.)])\s*", "", s).strip()
+        s = s.strip('"“”‘’')
+        if s and len(s) <= 140:
+            out.append(s)
+        if len(out) >= count:
+            break
+    return out
+
+
+@typechecked
+async def predict_prompts(count: int = MAX_SUGGESTIONS) -> List[str]:
+    """Predict up to `count` short prompts the user might type next, in their style. [] on any miss."""
+    try:
+        from backend.apps.settings.credentials import get_anthropic_client_for_model
+        from backend.apps.agents.providers.registry import resolve_aux_model
+
+        global_settings = load_settings()
+        topics = p_recent_topics()
+        starters = [
+            (s.prompt or "").strip()
+            for s in (global_settings.personalized_starters or [])
+            if getattr(s, "prompt", None)
+        ]
+        # Nothing to personalize from: let the composer keep its static placeholder.
+        if not topics and not starters:
+            return []
+
+        aux_model = (await resolve_aux_model(global_settings, preferred_tier="haiku"))[0]
+        client = get_anthropic_client_for_model(global_settings, aux_model)
+
+        name = (global_settings.user_name or "").strip()
+        signal_lines: List[str] = []
+        if topics:
+            signal_lines.append("Recent things they worked on: " + "; ".join(topics))
+        if starters:
+            signal_lines.append("Tasks they were interested in: " + "; ".join(starters[:6]))
+        signal = "\n".join(signal_lines)
+
+        system_prompt = (
+            "You predict what a user is likely to type next into their AI agent platform, based on "
+            "what they already work on. You NEVER answer or explain; you only produce plausible next "
+            "prompts in the USER'S voice (imperative, first person, the way someone types to their "
+            "own assistant), matching their topics and phrasing.\n\n"
+            f"Return exactly {count} short prompts, one per line, no numbering, no quotes, no preamble. "
+            "Each is a single line under ~90 characters, concrete and immediately actionable. Vary "
+            "them across the topics; do not repeat a task they clearly just finished verbatim."
+        )
+        user_turn = (
+            (f"The user's name is {name}.\n" if name else "")
+            + "Here is what this user works on:\n<signal>\n"
+            + signal
+            + f"\n</signal>\n\nPredict {count} prompts they might type next."
+        )
+
+        chunks: List[str] = []
+        async with client.messages.stream(
+            model=aux_model,
+            max_tokens=aux_max_tokens_for(aux_model, base=300),
+            system=system_prompt,
+            messages=[{"role": "user", "content": user_turn}],
+        ) as stream:
+            async for text in stream.text_stream:
+                chunks.append(text)
+        return p_parse_lines("".join(chunks), count)
+    except Exception as e:
+        logger.info(f"[predict-prompts] fail-open ([]): {e}")
+        return []
diff --git a/frontend/src/app/pages/AgentChat/ChatInput.tsx b/frontend/src/app/pages/AgentChat/ChatInput.tsx
index 6027f1cb..b4cffe7b 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput.tsx
@@ -48,14 +48,19 @@ interface Props {
   prefillPrompt?: string;
   // Replaces the default "Agent, @ for context..." placeholder (e.g. "Ask about this run...").
   placeholderOverride?: string;
+  // Predicted next prompt (in the user's voice) shown as ghost text in the empty composer; Tab fills it.
+  ghostSuggestion?: string;
   // A workflow run shown as a small removable chip inside the composer.
   runContext?: WorkflowsRunContext;
   onClearRunContext?: () => void;
 }
 
-const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode, onModeChange, model, onModelChange, provider, onProviderChange, isRunning, onStop, autoRunMode, contextEstimate, embedded, autoFocus, sessionId, queueLength = 0, thinkingLevel = 'auto', onThinkingLevelChange, onActivityLabelChange, prefillPrompt, placeholderOverride, runContext, onClearRunContext }, ref) => {
+const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode, onModeChange, model, onModelChange, provider, onProviderChange, isRunning, onStop, autoRunMode, contextEstimate, embedded, autoFocus, sessionId, queueLength = 0, thinkingLevel = 'auto', onThinkingLevelChange, onActivityLabelChange, prefillPrompt, placeholderOverride, ghostSuggestion, runContext, onClearRunContext }, ref) => {
   const c = useClaudeTokens();
   const editorRef = useRef<HTMLDivElement>(null);
+  // Live ref so the keydown closure reads the current suggestion without re-creating handlers.
+  const ghostSuggestionRef = useRef<string>('');
+  ghostSuggestionRef.current = ghostSuggestion || '';
   const containerRef = useRef<HTMLDivElement>(null);
   const generalFileInputRef = useRef<HTMLInputElement>(null);
   const dispatch = useAppDispatch();
@@ -298,6 +303,7 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
     elementSelection, setHasContent, setAttachedSkills, setForcedTools, onModeChange,
     addImageFiles, uploadAndAttachFiles, handleSend,
     onPasteExpand: setPreviewPasteId,
+    ghostSuggestionRef,
   });
 
   useDraftLoad(editorRef, ownerId, setPreviewPasteId, removePasteCard, c.font.mono, c.status.error);
@@ -353,6 +359,7 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
       queueLength={queueLength}
       modeConf={modeConf}
       placeholderOverride={placeholderOverride}
+      ghostSuggestion={ghostSuggestion}
       runContext={runContext}
       onClearRunContext={onClearRunContext}
       handleInput={handleInput}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/hooks/useEditorHandlers.ts b/frontend/src/app/pages/AgentChat/ChatInput/hooks/useEditorHandlers.ts
index a743fece..3200bab6 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/hooks/useEditorHandlers.ts
+++ b/frontend/src/app/pages/AgentChat/ChatInput/hooks/useEditorHandlers.ts
@@ -62,13 +62,15 @@ interface Params {
   uploadAndAttachFiles: (files: File[]) => void;
   handleSend: () => void;
   onPasteExpand: (pasteId: string) => void;
+  // Ghost-text prediction shown in the empty composer; Tab fills it as real, editable text.
+  ghostSuggestionRef?: RefObject<string>;
 }
 
 export function useEditorHandlers(p: Params) {
   const {
     editorRef, generalFileInputRef, ownerId, sessionId, autoRunMode, c, skills,
     elementSelection, setHasContent, setAttachedSkills, setForcedTools, onModeChange,
-    addImageFiles, uploadAndAttachFiles, handleSend, onPasteExpand,
+    addImageFiles, uploadAndAttachFiles, handleSend, onPasteExpand, ghostSuggestionRef,
   } = p;
   const dispatch = useAppDispatch();
   const [picker, setPicker] = useState<TriggerState>(EMPTY_TRIGGER);
@@ -233,6 +235,33 @@ export function useEditorHandlers(p: Params) {
       e.preventDefault();
       return;
     }
+    // Tab accepts the ghost prediction (Copilot-style): only when the editor is empty and a
+    // suggestion is showing, so Tab keeps its normal meaning the instant the user starts typing.
+    if (e.key === 'Tab' && !e.shiftKey) {
+      const ghost = ghostSuggestionRef?.current || '';
+      const editor = editorRef.current;
+      if (ghost && editor && !readEditorText(editor).trim()) {
+        e.preventDefault();
+        if (isTextareaEl(editor)) {
+          editor.value = ghost;
+          editor.setSelectionRange(ghost.length, ghost.length);
+        } else {
+          editor.textContent = ghost;
+          const sel = window.getSelection();
+          if (sel) {
+            const range = document.createRange();
+            range.selectNodeContents(editor);
+            range.collapse(false);
+            sel.removeAllRanges();
+            sel.addRange(range);
+          }
+        }
+        editor.focus();
+        updateHasContent();
+        scheduleDraftSave(ownerId, () => readEditorHTML(editor));
+        return;
+      }
+    }
     if ((e.ctrlKey || e.metaKey) && ['b', 'i', 'u'].includes(e.key.toLowerCase())) {
       e.preventDefault();
       return;
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
index a90c8f5c..a224040c 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
@@ -61,6 +61,7 @@ interface Props {
   queueLength: number;
   modeConf: ModeConf;
   placeholderOverride?: string;
+  ghostSuggestion?: string;
   runContext?: WorkflowsRunContext;
   onClearRunContext?: () => void;
   handleInput: () => void;
@@ -238,6 +239,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
         isRunning={p.isRunning}
         queueLength={p.queueLength}
         placeholderLabel={p.placeholderOverride ?? 'Ask anything, @ for context, / for commands'}
+        ghostSuggestion={p.ghostSuggestion}
         onInput={p.handleInput}
         onClick={p.handleEditorClick}
         onKeyDown={p.handleKeyDown}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
index 03977d82..801444ea 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
@@ -12,6 +12,7 @@ interface Props {
   isRunning?: boolean;
   queueLength: number;
   placeholderLabel: string;
+  ghostSuggestion?: string;
   onInput: () => void;
   onClick: () => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
@@ -20,15 +21,18 @@ interface Props {
 
 export const EditorSurface: React.FC<Props> = ({
   c, editorRef, disabled, hasContent, hasAttachments, autoRunMode, isRunning, queueLength,
-  placeholderLabel, onInput, onClick, onKeyDown, onPaste,
+  placeholderLabel, ghostSuggestion, onInput, onClick, onKeyDown, onPaste,
 }) => {
+  // A live prediction outranks the static placeholder while the box is empty and idle; the Tab pill
+  // tells the user how to take it. Falls back to the placeholder the moment there's no suggestion.
+  const showGhost = !!ghostSuggestion && !disabled && !autoRunMode && !isRunning;
   const placeholderText = disabled
     ? 'Agent is working...'
     : autoRunMode
       ? 'Describe what data to generate…'
       : isRunning
         ? (queueLength > 0 ? `${queueLength} queued, type another or wait…` : 'Agent is working, messages will queue…')
-        : placeholderLabel;
+        : showGhost ? ghostSuggestion! : placeholderLabel;
 
   return (
     <Box sx={{ px: 1.5, pt: hasAttachments ? 0.5 : 1.25, pb: 0.25, position: 'relative' }}>
@@ -72,9 +76,31 @@ export const EditorSurface: React.FC<Props> = ({
             fontFamily: 'inherit',
             pointerEvents: 'none',
             userSelect: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
           }}
         >
-          {placeholderText}
+          <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {placeholderText}
+          </span>
+          {showGhost && (
+            <span
+              style={{
+                flexShrink: 0,
+                fontSize: '0.7rem',
+                fontWeight: 600,
+                letterSpacing: '0.02em',
+                color: c.text.tertiary,
+                border: `1px solid ${c.border.medium}`,
+                borderRadius: 5,
+                padding: '1px 6px',
+                opacity: 0.8,
+              }}
+            >
+              Tab
+            </span>
+          )}
         </div>
       )}
     </Box>
diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 92c4558a..179a0848 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -20,6 +20,7 @@ import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { searchHistory, clearHistorySearch } from '@/shared/state/agentsSlice';
 import { updateSettingsPatch, AppSettings } from '@/shared/state/settingsSlice';
 import { store } from '@/shared/state/store';
+import { API_BASE, getAuthToken } from '@/shared/config';
 import type { Output } from '@/shared/state/outputsSlice';
 
 interface Props {
@@ -94,6 +95,36 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
         settingsApplied.current = true;
       }
     }, [settingsLoaded, defaultMode, defaultModel, defaultThinkingLevel]);
+    // Ghost-text predictions: what the user might type next, in their own voice. Fetched once per app
+    // load (cached), then one is shown at a time and cycled while the composer sits idle+empty. Empty
+    // list (no signal / no provider / error) just leaves the static "What should I do sir..." placeholder.
+    const [ghostList, setGhostList] = useState<string[]>([]);
+    const [ghostIdx, setGhostIdx] = useState(0);
+    const ghostFetchedRef = useRef(false);
+    useEffect(() => {
+      if (!inputOpen || ghostFetchedRef.current) return;
+      ghostFetchedRef.current = true;
+      (async () => {
+        try {
+          const tok = (() => { try { return getAuthToken(); } catch { return ''; } })();
+          const headers: Record<string, string> = {};
+          if (tok) headers['Authorization'] = `Bearer ${tok}`;
+          const resp = await fetch(`${API_BASE}/agents/predict-prompts?count=5`, { headers });
+          if (!resp.ok) return;
+          const data = await resp.json();
+          if (Array.isArray(data.suggestions)) setGhostList(data.suggestions.filter((s: unknown) => typeof s === 'string' && s));
+        } catch { /* fail open: keep the static placeholder */ }
+      })();
+    }, [inputOpen]);
+    // Rotate the visible suggestion every few seconds while the composer is open, so the user sees a
+    // few different ideas instead of one. Cheap; the list is already fetched and cached.
+    useEffect(() => {
+      if (!inputOpen || ghostList.length <= 1) return undefined;
+      const t = setInterval(() => setGhostIdx((i) => (i + 1) % ghostList.length), 4500);
+      return () => clearInterval(t);
+    }, [inputOpen, ghostList.length]);
+    const ghostSuggestion = ghostList.length ? ghostList[ghostIdx % ghostList.length] : undefined;
+
     // Reset defaults on each new compose session so in-session picks don't leak into the next new-chat draft.
     const prevInputOpen = useRef(false);
     useEffect(() => {
@@ -417,6 +448,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                 onThinkingLevelChange={handleThinkingLevelChange}
                 prefillPrompt={prefillPrompt}
                 placeholderOverride="What should I do sir..."
+                ghostSuggestion={ghostSuggestion}
               />
             </DarkTokensScope>
           </div>

From 9e8ae56e454d3665e3a019294f5c699bd5e61fb9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 15:37:01 -0700
Subject: [PATCH 116/248] [eric] tool-ui: data-table renders as a real grid
 (force table layout + container-type), not the column-hiding mobile accordion

---
 frontend/src/toolui/registry.tsx | 5 ++++-
 frontend/src/toolui/toolui.css   | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/toolui/registry.tsx b/frontend/src/toolui/registry.tsx
index 39e54561..42092504 100644
--- a/frontend/src/toolui/registry.tsx
+++ b/frontend/src/toolui/registry.tsx
@@ -47,7 +47,10 @@ export const TOOL_UI_REGISTRY: Record<string, ToolUiEntry> = {
     loadSchema: () => import('./components/citation/schema').then((m) => m.SerializableCitationSchema),
   },
   'data-table': {
-    Component: lazy(() => import('./components/data-table').then((m) => ({ default: m.DataTable }))),
+    // Force the real grid (.Table) instead of the responsive default: every chat surface we render
+    // into (card ~380px, fullscreen column ~442px) sits just under the component's @md breakpoint,
+    // so "auto" always fell back to the mobile accordion that buries every column but the first.
+    Component: lazy(() => import('./components/data-table').then((m) => ({ default: m.DataTable.Table }))),
     loadSchema: () => import('./components/data-table/schema').then((m) => m.SerializableDataTableSchema),
   },
   'image': {
diff --git a/frontend/src/toolui/toolui.css b/frontend/src/toolui/toolui.css
index d8f14243..d4ffec5b 100644
--- a/frontend/src/toolui/toolui.css
+++ b/frontend/src/toolui/toolui.css
@@ -82,6 +82,11 @@
   color: var(--foreground);
   font-size: 14px;
   line-height: 1.5;
+  /* The vendored components (data-table, etc.) switch layout on @container width. Without a
+     containment context those queries never match, so a table is stuck in its narrow mobile
+     accordion forever (columns hidden behind a chevron). This makes width-responsive actually work:
+     wide bubble = real grid, narrow = cards. */
+  container-type: inline-size;
 }
 
 .tool-ui-scope {

From 56038ebbb48b0dcd52169b18b5759d8ed6b70f18 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 15:53:38 -0700
Subject: [PATCH 117/248] [eric] chat: fix title hover painting a white pill on
 the dark glass header (neutral translucent hover)

---
 frontend/src/app/components/InlineEditableTitle.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/InlineEditableTitle.tsx b/frontend/src/app/components/InlineEditableTitle.tsx
index 543be5ce..fb6e7bfd 100644
--- a/frontend/src/app/components/InlineEditableTitle.tsx
+++ b/frontend/src/app/components/InlineEditableTitle.tsx
@@ -97,7 +97,10 @@ export default function InlineEditableTitle({ value, onCommit, sx, placeholder,
       title="Click to rename"
       sx={{
         minWidth: 0, cursor: 'text', borderRadius: 0.5, px: 0.25, mx: -0.25,
-        '&:hover': { bgcolor: c.bg.elevated },
+        // Neutral translucent hover instead of a solid surface token: this title also rides dark
+        // glass headers (the chat card) that live outside the theme scope, where bg.elevated resolved
+        // to a light near-white pill. A gray alpha darkens on light and lightens on dark, reading right on both.
+        '&:hover': { bgcolor: 'rgba(136,136,136,0.18)' },
         ...sx,
       }}
     >

From 844dfb93008ff0f7e1f8d3b71ecf20eb43d4bdcb Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 15:53:39 -0700
Subject: [PATCH 118/248] [eric] composer: web-search toggle (globe) forces
 WebSearch/WebFetch while on, like a search mode

---
 .../src/app/pages/AgentChat/ChatInput.tsx     | 13 +++++++-
 .../ChatInput/toolbar/ChatInputToolbar.tsx    |  6 +++-
 .../ChatInput/toolbar/ToolbarActions.tsx      | 31 +++++++++++++++++++
 .../ChatInput/view/ChatInputView.tsx          |  4 +++
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/ChatInput.tsx b/frontend/src/app/pages/AgentChat/ChatInput.tsx
index b4cffe7b..ba1974b5 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput.tsx
@@ -113,6 +113,10 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
   }, [prefillPrompt]);
 
   const [hasContent, setHasContent] = useState(() => !!loadDraft(ownerId));
+  // Web-search mode: a conversation-level toggle (like Open WebUI's search switch). While on, every
+  // send forces the WebSearch/WebFetch tools so the model actually searches instead of answering
+  // from memory. Merged into forcedTools at send time so it doesn't clutter the attachment chips.
+  const [webSearchOn, setWebSearchOn] = useState(false);
   const [attachedSkills, setAttachedSkills] = useState<Record<string, AttachedSkill>>({});
   const [previewPasteId, setPreviewPasteId] = useState<string | null>(null);
   const attachedSkillsRef = useRef(attachedSkills);
@@ -253,6 +257,11 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
 
     const sendImages = allImages.length > 0 ? allImages : undefined;
     const allForcedToolNames = forcedTools.flatMap((ft) => ft.tools);
+    if (webSearchOn) {
+      for (const t of ['WebSearch', 'WebFetch']) {
+        if (!allForcedToolNames.includes(t)) allForcedToolNames.push(t);
+      }
+    }
     const currentSkills = Object.values(attachedSkillsRef.current);
     const sendSkills = currentSkills.length > 0
       ? currentSkills.map((s) => ({ id: s.id, name: s.name, content: s.content }))
@@ -290,7 +299,7 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
     setAttachedSkills({});
     setHasContent(false);
     elementSelection?.clearOwnerElements(ownerId);
-  }, [disabled, images, contextPaths, forcedTools, onSend, elementSelection, ownerId, summarizingPath, summarizingAll, oversizeQueue, pendingSendRef, sessionId, currentModelCtx, contextEstimate, sessionFrameworkOverhead, setSendBlock, onActivityLabelChange]);
+  }, [disabled, images, contextPaths, forcedTools, webSearchOn, onSend, elementSelection, ownerId, summarizingPath, summarizingAll, oversizeQueue, pendingSendRef, sessionId, currentModelCtx, contextEstimate, sessionFrameworkOverhead, setSendBlock, onActivityLabelChange]);
 
   const {
     picker: editorPicker, setPicker,
@@ -358,6 +367,8 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
       isRunning={isRunning}
       queueLength={queueLength}
       modeConf={modeConf}
+      webSearchOn={webSearchOn}
+      onToggleWebSearch={() => setWebSearchOn((v) => !v)}
       placeholderOverride={placeholderOverride}
       ghostSuggestion={ghostSuggestion}
       runContext={runContext}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
index 045e199f..78cdb70f 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
@@ -50,6 +50,8 @@ interface Props {
   isRunning?: boolean;
   onStop?: () => void;
   handleSend: () => void;
+  webSearchOn?: boolean;
+  onToggleWebSearch?: () => void;
 }
 
 export const ChatInputToolbar: React.FC<Props> = (p) => {
@@ -58,7 +60,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
     allModelFlat, model, onModelChange, onProviderChange, picker, pendingKinds, pendingPayloadEstimate,
     thinkingLevel, onThinkingLevelChange, contextEstimate, elementSelection, autoRunMode,
     ownerId, sessionId, generalFileInputRef, addImageFiles, uploadAndAttachFiles,
-    hasContent, disabled, isRunning, onStop, handleSend,
+    hasContent, disabled, isRunning, onStop, handleSend, webSearchOn, onToggleWebSearch,
   } = p;
 
   const menuPaperProps = {
@@ -172,6 +174,8 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
         isRunning={isRunning}
         onStop={onStop}
         handleSend={handleSend}
+        webSearchOn={webSearchOn}
+        onToggleWebSearch={onToggleWebSearch}
       />
     </Box>
   );
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index 467a12c7..6cb493cd 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -7,6 +7,7 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import StopIcon from '@mui/icons-material/Stop';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import AdsClickIcon from '@mui/icons-material/AdsClick';
+import LanguageIcon from '@mui/icons-material/Language';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 import { ClaudeTokens } from '@/shared/styles/claudeTokens';
 
@@ -24,14 +25,44 @@ interface Props {
   isRunning?: boolean;
   onStop?: () => void;
   handleSend: () => void;
+  webSearchOn?: boolean;
+  onToggleWebSearch?: () => void;
 }
 
 export const ToolbarActions: React.FC<Props> = ({
   c, elementSelection, autoRunMode, ownerId, sessionId, generalFileInputRef,
   addImageFiles, uploadAndAttachFiles, hasContent, disabled, isRunning, onStop, handleSend,
+  webSearchOn, onToggleWebSearch,
 }) => {
   return (
     <>
+      {onToggleWebSearch && !autoRunMode && (
+        <Tooltip title={webSearchOn ? 'Web search on: replies search the web' : 'Search the web'}>
+          <IconButton
+            size="small"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={onToggleWebSearch}
+            sx={{
+              p: 0.5,
+              ...(webSearchOn
+                ? {
+                    bgcolor: '#3b82f6',
+                    color: '#fff',
+                    '&:hover': { bgcolor: '#2563eb' },
+                    boxShadow: '0 0 0 3px rgba(59,130,246,0.18)',
+                  }
+                : {
+                    color: c.text.tertiary,
+                    '&:hover': { color: c.text.secondary, bgcolor: 'rgba(0,0,0,0.04)' },
+                  }),
+              transition: 'background-color 0.15s, color 0.15s',
+            }}
+          >
+            <LanguageIcon sx={{ fontSize: 18 }} />
+          </IconButton>
+        </Tooltip>
+      )}
+
       {elementSelection && !autoRunMode && (() => {
         const isMySelectMode = elementSelection.selectMode && elementSelection.activeOwnerId === ownerId;
         return (
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
index a224040c..fb9292ed 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
@@ -60,6 +60,8 @@ interface Props {
   isRunning?: boolean;
   queueLength: number;
   modeConf: ModeConf;
+  webSearchOn?: boolean;
+  onToggleWebSearch?: () => void;
   placeholderOverride?: string;
   ghostSuggestion?: string;
   runContext?: WorkflowsRunContext;
@@ -281,6 +283,8 @@ export const ChatInputView: React.FC<Props> = (p) => {
         isRunning={p.isRunning}
         onStop={p.onStop}
         handleSend={p.handleSend}
+        webSearchOn={p.webSearchOn}
+        onToggleWebSearch={p.onToggleWebSearch}
       />
 
       <ChatInputOverlays

From 7c86293b72fe7764d169631259253741bb21689f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 17:15:45 -0700
Subject: [PATCH 119/248] [eric] chat: web tool rows show a clean source
 domain/query, not the raw url+prompt dump

---
 .../src/app/pages/AgentChat/parsing/toolResultParsing.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts b/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts
index a49bf603..102c23e7 100644
--- a/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts
+++ b/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts
@@ -24,7 +24,14 @@ export function getInputSummary(toolName: string, input: any): string {
     if (isSettingsReadTool(toolName)) return '';
 
     const mcp = parseMcpToolName(toolName);
-    if (mcp.isMcp) return getMcpInputSummary(input, mcp.action, mcp.serverSlug);
+    if (mcp.isMcp) {
+      // Web tools (our openswarm-web MCP) get the clean source summary, a bare domain / quoted query,
+      // instead of the generic "url: https://… prompt: …" key-value dump. Reads like Perplexity sources.
+      const act = (mcp.action || '').toLowerCase();
+      if (act === 'websearch') return quoteQuery(input.query || input.search_term || '');
+      if (act === 'webfetch') return prettyUrl(input.url || '');
+      return getMcpInputSummary(input, mcp.action, mcp.serverSlug);
+    }
 
     const n = toolName.toLowerCase();
     if (isBashTool(toolName)) {

From c0f089b7414bcb4db172aad551f8e091526cdfde Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:40:19 -0700
Subject: [PATCH 120/248] [eric] chat: web tools read as sources (favicon
 stacks + domains at the shared summary choke point), perplexity treatment

---
 .../AgentChat/parsing/toolResultParsing.ts    |  9 +-
 .../tool-bubbles/CompactMcpBubble.tsx         | 46 ++++++----
 .../tool-bubbles/DefaultToolBubble.tsx        | 43 ++++++---
 .../AgentChat/tool-bubbles/SourceFavicons.tsx | 90 +++++++++++++++++++
 .../tool-bubbles/ToolGroupBubble.tsx          | 44 +++++++--
 frontend/src/shared/mcpToolMeta.ts            | 14 +++
 6 files changed, 203 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx

diff --git a/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts b/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts
index 102c23e7..a49bf603 100644
--- a/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts
+++ b/frontend/src/app/pages/AgentChat/parsing/toolResultParsing.ts
@@ -24,14 +24,7 @@ export function getInputSummary(toolName: string, input: any): string {
     if (isSettingsReadTool(toolName)) return '';
 
     const mcp = parseMcpToolName(toolName);
-    if (mcp.isMcp) {
-      // Web tools (our openswarm-web MCP) get the clean source summary, a bare domain / quoted query,
-      // instead of the generic "url: https://… prompt: …" key-value dump. Reads like Perplexity sources.
-      const act = (mcp.action || '').toLowerCase();
-      if (act === 'websearch') return quoteQuery(input.query || input.search_term || '');
-      if (act === 'webfetch') return prettyUrl(input.url || '');
-      return getMcpInputSummary(input, mcp.action, mcp.serverSlug);
-    }
+    if (mcp.isMcp) return getMcpInputSummary(input, mcp.action, mcp.serverSlug);
 
     const n = toolName.toLowerCase();
     if (isBashTool(toolName)) {
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
index 4f713a79..0243e622 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
@@ -18,6 +18,7 @@ import { ParsedResult } from '../parsing/toolResultParsing';
 import { isSettingsWriteTool, settingsWriteSummary } from '../parsing/settingsToolMeta';
 import { McpToolInfo, getMcpShortAction, getMcpInputSummary, getWorkflowToolLabel } from '@/shared/mcpToolMeta';
 import { McpResultCard } from '../mcp-cards/McpResultCard';
+import { domainFromUrl, faviconUrlForDomain } from './SourceFavicons';
 
 interface CompactMcpBubbleProps {
   call: AgentMessage;
@@ -57,6 +58,9 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
   })();
   const serviceLabel = mcpInfo.isMcp ? mcpVerbLabel : shortAction;
   const inputSummary = mcpInfo.isMcp ? getMcpInputSummary(input, mcpInfo.action, mcpInfo.serverSlug) : '';
+  // Web rows read as sources: favicon beside the domain/query, body text instead of mono.
+  const isWebRow = /web(fetch|search)$/i.test(toolName);
+  const webDomain = /webfetch$/i.test(toolName) && typeof input?.url === 'string' ? domainFromUrl(input.url) : '';
   // A grouped settings write shows the masked change list (input-derived, so it reads even while pending) instead of the generic "Applied: theme" result line.
   const visibleSummary = isSettingsWriteTool(toolName)
     ? settingsWriteSummary(input)
@@ -95,21 +99,33 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
             </Typography>
           )}
           {visibleSummary && !isError && !stackBelow && (
-            <Typography
-              sx={{
-                color: hideVerbLabel ? c.text.primary : c.text.secondary,
-                fontSize: '0.74rem',
-                // Args are data (ids, URLs, params), so they read in mono, not the body serif.
-                fontFamily: c.font.mono,
-                flex: 1,
-                minWidth: 0,
-                ...(showBody && canToggleDetails
-                  ? { whiteSpace: 'normal', overflowWrap: 'anywhere' }
-                  : { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }),
-              }}
-            >
-              {visibleSummary}
-            </Typography>
+            <>
+              {webDomain && (
+                <Box
+                  component="img"
+                  src={faviconUrlForDomain(webDomain)}
+                  alt=""
+                  loading="lazy"
+                  onError={(e: React.SyntheticEvent<HTMLImageElement>) => { e.currentTarget.style.display = 'none'; }}
+                  sx={{ width: 13, height: 13, borderRadius: '3px', flexShrink: 0 }}
+                />
+              )}
+              <Typography
+                sx={{
+                  color: hideVerbLabel ? c.text.primary : c.text.secondary,
+                  fontSize: '0.74rem',
+                  // Args are data (ids, URLs, params) and read in mono; web rows are SOURCES and read in body text.
+                  fontFamily: isWebRow ? undefined : c.font.mono,
+                  flex: 1,
+                  minWidth: 0,
+                  ...(showBody && canToggleDetails
+                    ? { whiteSpace: 'normal', overflowWrap: 'anywhere' }
+                    : { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }),
+                }}
+              >
+                {visibleSummary}
+              </Typography>
+            </>
           )}
           {(stackBelow || !visibleSummary) && !showTimer && <Box sx={{ flex: 1 }} />}
           {showTimer && (
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
index ac477e69..7a5aaebb 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
@@ -20,6 +20,7 @@ import { useTermColors, colorizeInput, colorizeOutput } from '../parsing/toolCol
 import { ParsedResult } from '../parsing/toolResultParsing';
 import { McpToolInfo } from '@/shared/mcpToolMeta';
 import { McpResultCard } from '../mcp-cards/McpResultCard';
+import { domainFromUrl, faviconUrlForDomain } from './SourceFavicons';
 
 interface DefaultToolBubbleProps {
   call: AgentMessage;
@@ -59,6 +60,10 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
   const reveal = useMountReveal();
   const enterStyle = (!mcpCompact && !suppressReveal) ? reveal : {};
   const canToggleDetails = !!inputSummary && !isStreaming;
+  // A web read shows its SOURCE (favicon + domain), not a url dump; the Perplexity treatment.
+  const webDomain = /webfetch$/i.test(toolName) && typeof input?.url === 'string'
+    ? domainFromUrl(input.url)
+    : '';
 
   return (
     <Box
@@ -82,7 +87,8 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
           }`,
           borderRadius: mcpCompact ? 0 : 2,
           overflow: 'hidden',
-          animation: (isPending || isStreaming) && !mcpCompact ? 'border-glow 2s ease-in-out infinite' : 'none',
+          // Live state stays calm: the accent border + the ElapsedTimer's small pulsing dot carry
+          // "working"; the old whole-bubble box-shadow glow loop read as noise (animation-purge rule).
           transition: 'border-color 0.3s, box-shadow 0.3s',
         } as any}
       >
@@ -134,18 +140,29 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
             </Typography>
           )}
           {inputSummary && !isStreaming && (
-            <Typography
-              noWrap
-              sx={{
-                color: c.text.tertiary,
-                fontSize: '0.75rem',
-                fontFamily: c.font.mono,
-                flex: 1,
-                minWidth: 0,
-              }}
-            >
-              {inputSummary}
-            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flex: 1, minWidth: 0 }}>
+              {webDomain && (
+                <Box
+                  component="img"
+                  src={faviconUrlForDomain(webDomain)}
+                  alt=""
+                  loading="lazy"
+                  onError={(e: React.SyntheticEvent<HTMLImageElement>) => { e.currentTarget.style.display = 'none'; }}
+                  sx={{ width: 13, height: 13, borderRadius: '3px', flexShrink: 0 }}
+                />
+              )}
+              <Typography
+                noWrap
+                sx={{
+                  color: c.text.tertiary,
+                  fontSize: '0.75rem',
+                  fontFamily: webDomain ? undefined : c.font.mono,
+                  minWidth: 0,
+                }}
+              >
+                {inputSummary}
+              </Typography>
+            </Box>
           )}
           {!inputSummary && <Box sx={{ flex: 1 }} />}
           {isStreaming && <Box sx={{ flex: 1 }} />}
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
new file mode 100644
index 00000000..8574aaf5
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import Box from '@mui/material/Box';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// Same favicon service LibreChat ships with; the browser cards already load arbitrary sites, so
+// fetching site icons adds no new exposure class.
+export function faviconUrlForDomain(domain: string): string {
+  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=64`;
+}
+
+export function domainFromUrl(url: string): string {
+  try {
+    return new URL(url).host.replace(/^www\./, '');
+  } catch {
+    return url.replace(/^https?:\/\//, '').split(/[/?#]/)[0];
+  }
+}
+
+const MAX_STACK = 3;
+
+const FaviconDot: React.FC<{ domain: string; size: number; overlap: boolean; z: number }> = ({ domain, size, overlap, z }) => {
+  const c = useClaudeTokens();
+  const [failed, setFailed] = useState(false);
+  const ring = {
+    width: size,
+    height: size,
+    borderRadius: '50%',
+    border: `1.5px solid ${c.bg.elevated}`,
+    bgcolor: c.bg.secondary,
+    ml: overlap ? '-6px' : 0,
+    zIndex: z,
+    position: 'relative' as const,
+    flexShrink: 0,
+  };
+  if (failed) {
+    // assistant-ui's fallback: the domain's first letter beats a hole in the stack.
+    return (
+      <Box sx={{ ...ring, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: c.text.tertiary, fontSize: size * 0.55, fontWeight: 700 }}>
+        {(domain[0] || '?').toUpperCase()}
+      </Box>
+    );
+  }
+  return (
+    <Box
+      component="img"
+      src={faviconUrlForDomain(domain)}
+      alt=""
+      loading="lazy"
+      onError={() => setFailed(true)}
+      sx={ring}
+    />
+  );
+};
+
+/** Perplexity-style overlapping favicon stack for web-source rows. */
+export const SourceFavicons: React.FC<{ domains: string[]; size?: number }> = ({ domains, size = 16 }) => {
+  const c = useClaudeTokens();
+  if (domains.length === 0) return null;
+  const shown = domains.slice(0, MAX_STACK);
+  const extra = domains.length - shown.length;
+  return (
+    <Box sx={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}>
+      {shown.map((d, i) => (
+        <FaviconDot key={d} domain={d} size={size} overlap={i !== 0} z={MAX_STACK - i} />
+      ))}
+      {extra > 0 && (
+        <Box
+          sx={{
+            ml: '-6px',
+            minWidth: size,
+            height: size,
+            px: 0.4,
+            borderRadius: 999,
+            border: `1.5px solid ${c.bg.elevated}`,
+            bgcolor: c.bg.secondary,
+            color: c.text.tertiary,
+            fontSize: '0.6rem',
+            fontWeight: 600,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+          }}
+        >
+          +{extra}
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
index 84e91dc3..2a72de4c 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
@@ -12,6 +12,7 @@ import { useMountReveal } from './useMountReveal';
 import { sanitizeSvgString } from '@/shared/sanitizeSvg';
 import { parseMcpToolName, getWorkflowToolLabel } from '@/shared/mcpToolMeta';
 import ToolCallBubble, { ToolPair } from './ToolCallBubble';
+import { SourceFavicons, domainFromUrl } from './SourceFavicons';
 
 export type ToolGroupEntry =
   | { kind: 'pair'; pair: ToolPair }
@@ -107,8 +108,24 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
     }).filter(Boolean))) as string[];
     return parsedLabels.length === 1 ? parsedLabels[0] : 'Workflow actions';
   })();
-  const displayName = workflowGroupLabel || meta?.name || group.label;
-  const hasSvg = !!meta?.svg && !workflowGroupLabel;
+  // A web group is a SEARCH, so it wears its sources: favicon stack + "Searched the web", the
+  // Perplexity read (same special-case precedent as openswarm-schedule above).
+  const webDomains = useMemo(() => {
+    if (group.mcpServer !== 'openswarm-web') return null;
+    const domains: string[] = [];
+    for (const p of group.pairs) {
+      const cc = typeof p.call.content === 'object' ? p.call.content : {};
+      const url = (cc.input as { url?: unknown } | undefined)?.url;
+      if (typeof url === 'string' && url) {
+        const d = domainFromUrl(url);
+        if (d && !domains.includes(d)) domains.push(d);
+      }
+    }
+    return domains;
+  }, [group]);
+  const webGroupLabel = webDomains ? 'Searched the web' : null;
+  const displayName = workflowGroupLabel || webGroupLabel || meta?.name || group.label;
+  const hasSvg = !!meta?.svg && !workflowGroupLabel && !webGroupLabel;
 
   return (
     <Box
@@ -141,21 +158,27 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             sx={{
               display: 'inline-flex',
               alignItems: 'center',
-              gap: 0.5,
+              gap: 0.75,
               py: 0.4,
               cursor: 'pointer',
               color: c.text.tertiary,
               '&:hover': { color: c.text.secondary },
             }}
           >
+            {webDomains && webDomains.length > 0 && <SourceFavicons domains={webDomains} size={16} />}
             <Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit' }}>
-              {group.callCount} tool call{group.callCount === 1 ? '' : 's'}
+              {webGroupLabel ?? `${group.callCount} tool call${group.callCount === 1 ? '' : 's'}`}
             </Typography>
             {!allDone && (
               <Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
                 {completedCount}/{group.callCount}
               </Typography>
             )}
+            {allDone && webDomains && webDomains.length > 0 && (
+              <Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontVariantNumeric: 'tabular-nums' }}>
+                {webDomains.length} source{webDomains.length === 1 ? '' : 's'}
+              </Typography>
+            )}
             {deniedCount > 0 && (
               <Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
                 {deniedCount} denied
@@ -176,7 +199,9 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             '&:hover': { bgcolor: 'rgba(0,0,0,0.02)' },
           }}
         >
-          {!meta ? (
+          {webDomains && webDomains.length > 0 ? (
+            <SourceFavicons domains={webDomains} size={16} />
+          ) : !meta ? (
             <SkeletonPulse width={15} height={15} borderRadius={8} />
           ) : hasSvg ? (
             <GeneratedSvgIcon svg={meta.svg} size={15} color={c.accent.primary} />
@@ -184,7 +209,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             <TerminalIcon sx={{ fontSize: 15, color: c.accent.primary, flexShrink: 0 }} />
           )}
 
-          {!meta ? (
+          {!meta && !webGroupLabel && !workflowGroupLabel ? (
             <Box sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
               <SkeletonPulse width={100} height={12} />
             </Box>
@@ -231,8 +256,13 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             sx={{
               borderTop: `0.5px solid ${c.border.medium}`,
               '& > *': {
-                animation: 'toolRowFadeIn 140ms ease-out',
+                animation: 'toolRowFadeIn 140ms ease-out backwards',
               },
+              // Staggered entrance (assistant-ui's tool-group treatment): rows cascade instead of popping at once.
+              '& > *:nth-of-type(2)': { animationDelay: '40ms' },
+              '& > *:nth-of-type(3)': { animationDelay: '80ms' },
+              '& > *:nth-of-type(4)': { animationDelay: '120ms' },
+              '& > *:nth-of-type(n+5)': { animationDelay: '160ms' },
               '@keyframes toolRowFadeIn': {
                 from: { opacity: 0, transform: 'translateY(-2px)' },
                 to: { opacity: 1, transform: 'translateY(0)' },
diff --git a/frontend/src/shared/mcpToolMeta.ts b/frontend/src/shared/mcpToolMeta.ts
index f5ecef13..00cf2d93 100644
--- a/frontend/src/shared/mcpToolMeta.ts
+++ b/frontend/src/shared/mcpToolMeta.ts
@@ -166,6 +166,20 @@ function p_cleanSummaryText(s: string): string {
 
 export function getMcpInputSummary(input: any, action?: string, serverSlug?: string): string {
   if (!input || typeof input !== 'object') return '';
+  // Web tools read as SOURCES, not payload dumps: a quoted query for a search, a bare domain for a
+  // page read. Lives here so every caller (compact rows, labels, approvals) gets the clean form.
+  const p_act = (action || '').toLowerCase();
+  if (p_act === 'websearch') {
+    const q = input.query ?? input.search_term;
+    if (typeof q === 'string' && q.trim()) return `"${p_cleanSummaryText(q.trim())}"`;
+  }
+  if (p_act === 'webfetch' && typeof input.url === 'string' && input.url) {
+    try {
+      return new URL(input.url).host.replace(/^www\./, '');
+    } catch {
+      return input.url.replace(/^https?:\/\//, '').split(/[/?#]/)[0];
+    }
+  }
   if (serverSlug === 'openswarm-schedule' || (action && getWorkflowToolLabel(action))) {
     const workflowSummary = compactWorkflowSchedule(input);
     if (workflowSummary) return workflowSummary;

From 647e3c4ff0b684b7d4dbd817ede0237a9934a49b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:40:19 -0700
Subject: [PATCH 121/248] [eric] chat: calm the in-between (no glow loops,
 quiet thinking line, duration-only summary w/ metrics in tooltip)

---
 .../src/app/pages/AgentChat/AgentChat.tsx     |  18 +--
 .../pages/AgentChat/bubbles/MessageBubble.tsx | 127 +++++++++---------
 .../tool-bubbles/CreateAgentBubble.tsx        |   1 -
 .../tool-bubbles/InvokeAgentBubble.tsx        |   1 -
 4 files changed, 64 insertions(+), 83 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 278817db..a557efbf 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -169,26 +169,16 @@ const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
   // Aux-LLM label wins; otherwise the pill stays plain "Thinking". The whimsical verbs read as personality
   // in the per-message thinking bubble (MessageBubble), but as a vague, confusing status on a working card.
   const display = label ? `${label}…` : `${THINKING_LABELS[0].live}…`;
+  // A quiet shimmer LINE, not a bordered card: status shares one visual language with the
+  // per-message thinking row, so only real content gets bubbles (the ChatGPT/Claude pattern).
   return (
     <Box sx={{ display: 'flex', justifyContent: 'flex-start', my: 0.75 }}>
       <style>{thinkingShimmerKeyframes}</style>
-      <Box
-        sx={{
-          bgcolor: c.bg.surface,
-          border: `1px solid ${c.border.subtle}`,
-          borderRadius: '16px 16px 16px 4px',
-          px: 2,
-          py: 1.5,
-          boxShadow: c.shadow.sm,
-          display: 'flex',
-          alignItems: 'center',
-          minHeight: 36,
-        }}
-      >
+      <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75, py: 0.5, px: 1, ml: -1 }}>
         <Box
           component="span"
           sx={{
-            fontSize: '0.85rem',
+            fontSize: '0.8rem',
             fontWeight: 500,
             background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
             backgroundSize: '200% 100%',
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index bf9cfa42..3ef9d940 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -599,9 +599,9 @@ const ThinkingBubble: React.FC<{
   const finalTokens = persistedTokens
     ?? (text && !isStreaming ? Math.max(1, Math.round(text.length / 3.6)) : null);
 
-  const activeLabel = dynamicLabel
-    ? (liveTokenEstimate > 0 ? `${dynamicLabel}… ~${liveTokenEstimate} tokens` : `${dynamicLabel}…`)
-    : (liveTokenEstimate > 0 ? `${turnLabel.live}… (~${liveTokenEstimate} tokens)` : `${turnLabel.live}…`);
+  // No token counter while streaming: the label carries WHAT it's doing, the shimmer carries "live".
+  void liveTokenEstimate;
+  const activeLabel = dynamicLabel ? `${dynamicLabel}…` : `${turnLabel.live}…`;
 
   const fmtTokens = (n: number) => {
     if (n >= 1000) {
@@ -637,70 +637,61 @@ const ThinkingBubble: React.FC<{
     return { total: combinedTotalTokens, output: finalTokens, input: inputSide };
   })();
 
+  // Resting line reads like ChatGPT's "Thought for 12s": duration only. The dev metrics (token
+  // breakdown, tool count) live in a hover tooltip so the curious still get them without the
+  // transcript reading as telemetry.
   const renderPostStreamLabel = () => {
-    const segments: React.ReactNode[] = [];
-    segments.push(
-      <span key="duration">
-        {finalSeconds != null
-          ? `${turnLabel.past} for ${fmtThoughtDuration(finalSeconds)}`
-          : turnLabel.past}
-      </span>
-    );
-    if (tokenBreakdown) {
-      const { total, input, output } = tokenBreakdown;
-      const tooltipBody = input != null && output != null ? (
-        <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem', lineHeight: 1.5 }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
-            <span>Input</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{input.toLocaleString()}</span>
-          </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
-            <span>Output</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{output.toLocaleString()}</span>
-          </Box>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, mt: 0.25, pt: 0.25, borderTop: `1px solid ${c.border.subtle}`, fontWeight: 600 }}>
-            <span>Total</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{total.toLocaleString()}</span>
+    const durationText = finalSeconds != null
+      ? `${turnLabel.past} for ${fmtThoughtDuration(finalSeconds)}`
+      : turnLabel.past;
+    if (!tokenBreakdown && !(persistedToolCount != null && persistedToolCount > 0)) {
+      return <span key="duration">{durationText}</span>;
+    }
+    const { total, input, output } = tokenBreakdown ?? { total: 0, input: null, output: null };
+    const tooltipBody = (
+      <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem', lineHeight: 1.5 }}>
+        {input != null && output != null ? (
+          <>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
+              <span>Input</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{input.toLocaleString()}</span>
+            </Box>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
+              <span>Output</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{output.toLocaleString()}</span>
+            </Box>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, mt: 0.25, pt: 0.25, borderTop: `1px solid ${c.border.subtle}`, fontWeight: 600 }}>
+              <span>Total</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{total.toLocaleString()}</span>
+            </Box>
+          </>
+        ) : tokenBreakdown ? (
+          <Box>{total.toLocaleString()} tokens (input + output + children)</Box>
+        ) : null}
+        {persistedToolCount != null && persistedToolCount > 0 && (
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, mt: tokenBreakdown ? 0.25 : 0 }}>
+            <span>Tools used</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{persistedToolCount}</span>
           </Box>
+        )}
+        {input != null && output != null && (
           <Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.7rem', fontStyle: 'italic' }}>
             Input shown is your message, history, and tool outputs. The fixed
             framework preamble (system prompt, tool defs, MCP descriptions) is
             excluded, since it's constant overhead from the agent runtime,
             not anything you can shrink.
           </Box>
-        </Box>
-      ) : (
-        <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem' }}>
-          {total.toLocaleString()} tokens (input + output + children)
-        </Box>
-      );
-      segments.push(<span key="sep-1">, </span>);
-      segments.push(
-        <Tooltip
-          key="tokens"
-          title={tooltipBody}
-          placement="top"
-          arrow
-          slotProps={{ tooltip: { sx: { bgcolor: c.bg.elevated, color: c.text.primary, border: `1px solid ${c.border.medium}`, maxWidth: 'none' } } }}
-        >
-          <Box
-            component="span"
-            onClick={(e) => { e.stopPropagation(); }}
-            sx={{
-              cursor: 'help',
-              borderBottom: `1px dotted ${c.border.medium}`,
-              '&:hover': { color: c.text.secondary },
-            }}
-          >
-            {fmtTokens(total)} tokens
-          </Box>
-        </Tooltip>
-      );
-    }
-    if (persistedToolCount != null && persistedToolCount > 0) {
-      segments.push(<span key="sep-2">, </span>);
-      segments.push(
-        <span key="tools">{persistedToolCount} tool{persistedToolCount === 1 ? '' : 's'} used</span>
-      );
-    }
-    return segments;
+        )}
+      </Box>
+    );
+    return (
+      <Tooltip
+        key="duration"
+        title={tooltipBody}
+        placement="top"
+        arrow
+        enterDelay={400}
+        slotProps={{ tooltip: { sx: { bgcolor: c.bg.elevated, color: c.text.primary, border: `1px solid ${c.border.medium}`, maxWidth: 'none' } } }}
+      >
+        <span>{durationText}</span>
+      </Tooltip>
+    );
   };
 
   // Shimmer needs a flat string; post-stream label needs nodes for the token tooltip.
@@ -1053,16 +1044,18 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
     >
       <Box
         sx={{
-          maxWidth: '85%',
+          // Only USER messages wear a bubble (the ChatGPT/Claude grammar): the assistant's words sit
+          // directly on the page, so its answers read as the page's voice, not another chat balloon.
+          maxWidth: isUser ? '85%' : '100%',
           minWidth: 0,
           // Oversized messages are block-virtualized, so the set of rendered blocks (and thus the widest visible content) changes as you scroll. Pin them to a stable width so the bubble doesn't shrink-to-fit and resize horizontally frame to frame. Normal messages keep shrink-to-fit.
-          ...(isOversized ? { width: '85%' } : {}),
-          bgcolor: isUser ? c.user.bubble : c.bg.surface,
-          border: isUser ? (isFailed ? `1px solid ${c.status.error}` : 'none') : `1px solid ${c.border.subtle}`,
-          borderRadius: isUser ? '18px' : '16px 16px 16px 4px',
-          px: 2,
-          py: 1.25,
-          boxShadow: isUser ? 'none' : c.shadow.sm,
+          ...(isOversized ? { width: isUser ? '85%' : '100%' } : {}),
+          bgcolor: isUser ? c.user.bubble : 'transparent',
+          border: isUser && isFailed ? `1px solid ${c.status.error}` : 'none',
+          borderRadius: isUser ? '18px' : 0,
+          px: isUser ? 2 : 0,
+          py: isUser ? 1.25 : 0.5,
+          boxShadow: 'none',
           overflow: 'hidden',
           opacity: isPending ? 0.7 : 1,
           transition: 'opacity 0.2s, border-color 0.2s',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
index fe823dbf..7db5815a 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
@@ -53,7 +53,6 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
           }`,
           borderRadius: 2,
           overflow: 'hidden',
-          animation: isPending ? 'border-glow 2s ease-in-out infinite' : 'none',
           transition: 'border-color 0.3s, box-shadow 0.3s',
         } as any}
       >
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
index 396a3490..7961b851 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
@@ -53,7 +53,6 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
           }`,
           borderRadius: 2,
           overflow: 'hidden',
-          animation: isPending ? 'border-glow 2s ease-in-out infinite' : 'none',
           transition: 'border-color 0.3s, box-shadow 0.3s',
         } as any}
       >

From 76cf209edaea17b2ec172957df090824d13758eb Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:40:19 -0700
Subject: [PATCH 122/248] [eric] chat: assistant answers drop the bubble
 (user-only bubbles); tool-ui cards get skeleton + blur-in entrance

---
 .../pages/AgentChat/tool-ui/ToolUiBubble.tsx  | 17 +++++++++++-
 frontend/src/toolui/VendoredToolUi.tsx        | 27 +++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
index e43acc62..59a68b68 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/ToolUiBubble.tsx
@@ -26,7 +26,22 @@ function ToolUiBubble({ pair, sessionId, isPending, suppressReveal, sessionRunni
     );
   }
   return (
-    <Box sx={{ my: 1, contain: 'layout style' }} data-select-type="tool-ui" data-select-id={pair.id} data-select-meta={JSON.stringify({ component: payload.component })}>
+    <Box
+      sx={{
+        my: 1,
+        contain: 'layout style',
+        // One-shot entrance (assistant-ui's fade + rise + blur-in): the card arrives, it doesn't pop.
+        animation: 'toolUiEnter 240ms cubic-bezier(0.32, 0.72, 0, 1)',
+        '@keyframes toolUiEnter': {
+          from: { opacity: 0, transform: 'translateY(6px)', filter: 'blur(2px)' },
+          to: { opacity: 1, transform: 'translateY(0)', filter: 'blur(0)' },
+        },
+        '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+      }}
+      data-select-type="tool-ui"
+      data-select-id={pair.id}
+      data-select-meta={JSON.stringify({ component: payload.component })}
+    >
       <ShowUiWidgetView payload={payload} />
     </Box>
   );
diff --git a/frontend/src/toolui/VendoredToolUi.tsx b/frontend/src/toolui/VendoredToolUi.tsx
index fdbbd0c3..00e9c8d0 100644
--- a/frontend/src/toolui/VendoredToolUi.tsx
+++ b/frontend/src/toolui/VendoredToolUi.tsx
@@ -60,6 +60,29 @@ function parseLeniently(schema: { safeParse: (v: unknown) => any }, props: Recor
   return { state: 'bad', problem: issues };
 }
 
+// Rough resting height per component family so the loading skeleton reserves believable space
+// (Lobe/Open WebUI pattern: a breathing block where the card will land, not a tiny sliver).
+function skeletonHeightFor(name: string): number {
+  if (/table|chart|gallery|map|carousel|post|terminal/.test(name)) return 180;
+  if (/stats|weather|plan|order|preferences|question/.test(name)) return 110;
+  return 56;
+}
+
+const SkeletonBlock: React.FC<{ name: string }> = ({ name }) => (
+  <div
+    style={{
+      height: skeletonHeightFor(name),
+      width: '100%',
+      maxWidth: 520,
+      borderRadius: 12,
+      background: 'rgba(127,127,127,0.12)',
+      animation: 'toolui-skeleton-pulse 1.4s ease-in-out infinite',
+    }}
+  >
+    <style>{'@keyframes toolui-skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }'}</style>
+  </div>
+);
+
 /** Validates against the upstream zod contract, then renders the vendored component inside the scoped theme. */
 function VendoredToolUi({ name, props, extraProps }: VendoredToolUiProps): React.ReactElement | null {
   const { mode } = useThemeMode();
@@ -87,13 +110,13 @@ function VendoredToolUi({ name, props, extraProps }: VendoredToolUiProps): React
     );
   }
   if (gate.state === 'pending') {
-    return <div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />;
+    return <SkeletonBlock name={name} />;
   }
   const Component = entry.Component;
   return (
     <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`}>
       <ComponentGuard name={name}>
-        <Suspense fallback={<div style={{ height: 48, width: 280, borderRadius: 12, background: 'rgba(127,127,127,0.12)' }} />}>
+        <Suspense fallback={<SkeletonBlock name={name} />}>
           <Component {...gate.parsed} {...(extraProps || {})} />
         </Suspense>
       </ComponentGuard>

From c5efd8fd57a36935f6b11057cab96781d0ace3ce Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:40:19 -0700
Subject: [PATCH 123/248] [eric] desktop: fullscreen card collapses its traffic
 lights to one exit control (native lights own that corner)

---
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  2 +-
 .../app/pages/Dashboard/cards/BrowserCard.tsx |  1 +
 .../Dashboard/cards/DashboardViewCard.tsx     |  2 +-
 .../app/pages/Dashboard/cards/NoteCard.tsx    |  2 +-
 .../pages/Dashboard/cards/WindowControls.tsx  | 30 ++++++++++++++++++-
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 5436279d..4f6d461c 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -1071,7 +1071,7 @@ const AgentCard: React.FC<Props> = ({
             onPointerDown={(e) => e.stopPropagation()}
             sx={{ display: 'flex', alignItems: 'center', mr: 0.75, flexShrink: 0 }}
           >
-            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={isFullscreen} />
           </Box>
           <Box
             sx={{
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 74312337..e821a4dd 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1000,6 +1000,7 @@ const BrowserCard: React.FC<Props> = ({
             onMinimize={handleMinimize}
             onTile={onTile}
             tiled={!!tileZone}
+            fullscreen={tileZone === 'fullscreen'}
           />
         </Box>
         <Box
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 627e961d..6da0a007 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -557,7 +557,7 @@ const DashboardViewCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
         </Box>
         {!isMinimized && <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
         <Typography
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 809baa99..267b3c9f 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -342,7 +342,7 @@ const NoteCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
         </Box>
         {isMinimized && (
           <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 392c7b29..73291ea9 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import Box from '@mui/material/Box';
+import FullscreenExitRoundedIcon from '@mui/icons-material/FullscreenExitRounded';
 import { TILE_ZONES } from './tileZones';
 
 interface WindowControlsProps {
@@ -7,6 +8,9 @@ interface WindowControlsProps {
   onMinimize: () => void;
   onTile: (zone: string) => void; // a TILE_ZONES key, or 'restore'
   tiled?: boolean;
+  // Full size view: the native macOS lights sit right above this corner, so a second dot cluster
+  // reads as double chrome; collapse to ONE exit control and let the natives own window ops.
+  fullscreen?: boolean;
 }
 
 // macOS-style traffic lights on every card = the "AI OS" window feel. Grey at rest so a canvas
@@ -50,13 +54,37 @@ export const ARC_CHIP_SX: Record<string, unknown> = {
   '.osw-pill-host:hover & .osw-window-lights > :nth-of-type(3)': { transform: 'translate(calc(-50% + 11px), calc(-50% + 5px)) scale(1)', opacity: 1, transitionDelay: '80ms' },
 };
 
-function WindowControls({ onClose, onMinimize, onTile, tiled }: WindowControlsProps): React.ReactElement {
+function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen }: WindowControlsProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
   const closeTimer = useRef<number | null>(null);
   const openMenu = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
   const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
   const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
 
+  if (fullscreen) {
+    return (
+      <Box className="osw-window-lights" onPointerDown={stop} sx={{ display: 'flex', alignItems: 'center', flex: 'none' }}>
+        <Box
+          component="button"
+          type="button"
+          aria-label="Exit full screen"
+          title="Exit full screen (Esc)"
+          onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile('restore'); }}
+          onPointerDown={stop}
+          sx={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            width: 22, height: 22, p: 0, border: 'none', borderRadius: '6px',
+            background: 'transparent', color: 'inherit', opacity: 0.65, cursor: 'pointer',
+            transition: 'opacity 120ms, background 120ms',
+            '&:hover': { opacity: 1, background: 'rgba(136,136,136,0.18)' },
+          }}
+        >
+          <FullscreenExitRoundedIcon sx={{ fontSize: 16 }} />
+        </Box>
+      </Box>
+    );
+  }
+
   const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
     <Box component="button" type="button" aria-label={label}
       onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick(); }} onPointerDown={stop} sx={dotSx(color)}>

From 1a6d9dde9e8a8002445cecdd10d7830dffa81257 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:53:42 -0700
Subject: [PATCH 124/248] [eric] chat: burst commits type out too (fresh
 whole-message commits route through the same smooth reveal)

---
 .../src/app/pages/AgentChat/AgentChat.tsx     | 47 +++++++++++++++----
 .../AgentChat/bubbles/BurstRevealBubble.tsx   | 47 +++++++++++++++++++
 2 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/app/pages/AgentChat/bubbles/BurstRevealBubble.tsx

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index a557efbf..b7af3e1c 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -53,6 +53,7 @@ import WelcomeQuickReplies from './WelcomeQuickReplies';
 import { useWelcomeGreeting } from './useWelcomeGreeting';
 import { THINKING_LABELS } from './thinkingLabels';
 import MessageBubble from './bubbles/MessageBubble';
+import BurstRevealBubble from './bubbles/BurstRevealBubble';
 import { estimateRenderedTextHeight, RECHECK_VISIBILITY_EVENT } from './bubbles/markdownMeasure';
 import CompactionMarker from './bubbles/CompactionMarker';
 import MessageActionBar from './shell/MessageActionBar';
@@ -630,7 +631,12 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
     };
   }, [id, session?.id, scheduleWindowRecompute]);
 
+  // Burst-reveal bookkeeping: ids present at open (or after a session/branch hop) are HISTORY and
+  // never animate; only ids that appear later, while the agent is working, type themselves out.
+  const seenMessageIdsRef = useRef<Set<string> | null>(null);
+
   React.useLayoutEffect(() => {
+    seenMessageIdsRef.current = null;
     const seed = initialSeedItems(viewportHeight);
     const total = renderItemsLengthRef.current;
     const end = total;
@@ -1715,6 +1721,18 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               }
               const msg = item;
               const isEditing = editingMessageId === msg.id;
+              // First pass after open/hop seeds the set; later unseen assistant ids arrived live.
+              if (seenMessageIdsRef.current === null) {
+                seenMessageIdsRef.current = new Set(renderItems.map((it) => it.id));
+              }
+              const burstAnimate =
+                msg.role === 'assistant' &&
+                typeof msg.content === 'string' &&
+                !isEditing &&
+                !seenMessageIdsRef.current.has(msg.id) &&
+                msg.id !== justStreamedId &&
+                (sessionRunning || awaitingResponse);
+              seenMessageIdsRef.current.add(msg.id);
               const siblings = getSiblingBranches(msg.id);
               const hasBranches = siblings.length > 0;
               const currentBranchIdx = hasBranches
@@ -1732,15 +1750,26 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                     containIntrinsicSize: 'auto 120px',
                   }}
                 >
-                  <MessageBubble
-                    message={msg}
-                    editing={isEditing}
-                    onSaveEdit={handleSaveEdit}
-                    onCancelEdit={handleCancelEdit}
-                    viewportHeight={viewportHeight}
-                    viewportWidth={viewportWidth}
-                    scrollRoot={scrollRoot}
-                  />
+                  {msg.role === 'assistant' && typeof msg.content === 'string' && !isEditing ? (
+                    <BurstRevealBubble
+                      message={msg}
+                      animate={burstAnimate}
+                      onGrew={stickToBottomIfNeeded}
+                      viewportHeight={viewportHeight}
+                      viewportWidth={viewportWidth}
+                      scrollRoot={scrollRoot}
+                    />
+                  ) : (
+                    <MessageBubble
+                      message={msg}
+                      editing={isEditing}
+                      onSaveEdit={handleSaveEdit}
+                      onCancelEdit={handleCancelEdit}
+                      viewportHeight={viewportHeight}
+                      viewportWidth={viewportWidth}
+                      scrollRoot={scrollRoot}
+                    />
+                  )}
                   {!isEditing && (msg.role === 'user' || (msg.role === 'assistant' && lastAssistantIdsInTurn.has(msg.id))) && (
                     <MessageActionBar
                       role={msg.role as 'user' | 'assistant'}
diff --git a/frontend/src/app/pages/AgentChat/bubbles/BurstRevealBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/BurstRevealBubble.tsx
new file mode 100644
index 00000000..2f412f05
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/bubbles/BurstRevealBubble.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { AgentMessage } from '@/shared/state/agentsSlice';
+import MessageBubble from './MessageBubble';
+import { useSmoothText } from './useSmoothText';
+
+interface Props {
+  message: AgentMessage;
+  // Captured once at mount: a message that arrived whole mid-run types itself out; history never re-animates.
+  animate: boolean;
+  onGrew?: () => void;
+  viewportHeight?: number;
+  viewportWidth?: number;
+  scrollRoot?: Element | null;
+}
+
+/** Short post-tool answers often COMMIT whole and skip the streaming slice entirely, so they popped
+    while true streams typed. Route fresh commits through the same smooth reveal (assistant-ui's
+    drain pattern), then settle into the identical committed render so the handoff can't flash. */
+function BurstRevealBubble({ message, animate, onGrew, viewportHeight, viewportWidth, scrollRoot }: Props): React.ReactElement {
+  const [shouldAnimate] = useState(animate);
+  const full = typeof message.content === 'string' ? message.content : '';
+  const [done, setDone] = useState(!shouldAnimate || full.length === 0);
+  const { text, revealRef } = useSmoothText(full, !done);
+  useEffect(() => {
+    if (!done && text.length >= full.length) setDone(true);
+  }, [done, text.length, full.length]);
+  const grewRef = React.useRef(onGrew);
+  grewRef.current = onGrew;
+  useEffect(() => {
+    if (!done) grewRef.current?.();
+  }, [text.length, done]);
+  if (done) {
+    return <MessageBubble message={message} viewportHeight={viewportHeight} viewportWidth={viewportWidth} scrollRoot={scrollRoot} />;
+  }
+  return (
+    <MessageBubble
+      message={{ ...message, content: text }}
+      isStreaming
+      revealRef={revealRef}
+      viewportHeight={viewportHeight}
+      viewportWidth={viewportWidth}
+      scrollRoot={scrollRoot}
+    />
+  );
+}
+
+export default BurstRevealBubble;

From f0836319bf490cf4ca768ecb20a943c7f6b4ad73 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:53:42 -0700
Subject: [PATCH 125/248] [eric] chat: group rows go quiet (web rows drop the
 repeated verb, timings ghost until hover, chevrons hover-only)

---
 .../AgentChat/tool-bubbles/CompactMcpBubble.tsx  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
index 0243e622..584dd231 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
@@ -7,6 +7,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import BlockIcon from '@mui/icons-material/Block';
+import SearchIcon from '@mui/icons-material/Search';
 import { AgentMessage } from '@/shared/state/agentsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { getToolLabel } from '../parsing/toolLabels';
@@ -84,9 +85,14 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           '&:hover': canToggleDetails ? { bgcolor: 'rgba(0,0,0,0.02)' } : undefined,
         }}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, px: 1.5, py: 0.6 }}>
+        <Box className="osw-mcp-row" sx={{ display: 'flex', alignItems: 'center', gap: 0.75, px: 1.5, py: 0.6 }}>
           {ServiceIcon}
-          {!hideVerbLabel && (
+          {/* Web rows drop the repeated verb (the group header already says "Searched the web"); a
+              muted glyph + the source carries the row, so the card isn't a wall of accent green. */}
+          {isWebRow && !webDomain && (
+            <SearchIcon sx={{ fontSize: 13, color: c.text.tertiary, flexShrink: 0 }} />
+          )}
+          {!hideVerbLabel && !isWebRow && (
             <Typography
               sx={{
                 color: c.accent.primary,
@@ -145,15 +151,17 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
               {isError && (
                 <ErrorOutlineIcon sx={{ fontSize: 12, color: c.status.error }} />
               )}
+              {/* Timings are debug detail, not content: ghosted at rest, legible on row hover
+                  (LibreChat/ChatGPT show none at all; we keep them one hover away). */}
               {resultElapsedMs != null && (
-                <Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
+                <Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.ghost, transition: 'color 120ms', '.osw-mcp-row:hover &': { color: c.text.tertiary } }}>
                   {formatElapsed(resultElapsedMs)}
                 </Typography>
               )}
             </Box>
           )}
           {canToggleDetails && (
-            <IconButton size="small" sx={{ color: c.text.tertiary, p: 0.15, flexShrink: 0 }}>
+            <IconButton size="small" sx={{ color: c.text.tertiary, p: 0.15, flexShrink: 0, opacity: 0, transition: 'opacity 120ms', '.osw-mcp-row:hover &': { opacity: 1 }, ...(showBody ? { opacity: 1 } : {}) }}>
               {showBody ? <ExpandLessIcon sx={{ fontSize: 16 }} /> : <ExpandMoreIcon sx={{ fontSize: 16 }} />}
             </IconButton>
           )}

From 56c4accd78695049f22759f85aec9e200577c217 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:53:42 -0700
Subject: [PATCH 126/248] [eric] chat: claude-style edit in place, web-force
 reads as a quiet globe not an actions banner, context row unbannered

---
 .../pages/AgentChat/bubbles/MessageBubble.tsx | 81 ++++++++++++-------
 1 file changed, 50 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index 3ef9d940..082f8e7a 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
+import InputBase from '@mui/material/InputBase';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Tooltip from '@mui/material/Tooltip';
@@ -16,6 +17,7 @@ import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
 import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';
+import LanguageIcon from '@mui/icons-material/Language';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import WindowedMarkdown from './WindowedMarkdown';
@@ -354,16 +356,30 @@ function buildContextGroups(
 
   const forcedTools = message.forced_tools;
   if (forcedTools && forcedTools.length > 0) {
-    groups.push({
-      key: 'tools',
-      icon: <BuildOutlinedIcon sx={{ fontSize: 13 }} />,
-      color: '#f59e0b',
-      label: `${forcedTools.length} action${forcedTools.length > 1 ? 's' : ''} requested`,
-      chips: forcedTools.map((t) => ({
-        label: t,
-        icon: <BuildOutlinedIcon sx={{ fontSize: 12 }} />,
-      })),
-    });
+    // The web-search toggle forces WebSearch/WebFetch on every send; that's a MODE, not an
+    // attachment, so it reads as one quiet globe instead of an amber "2 actions requested" banner.
+    const visibleForced = forcedTools.filter((t) => t !== 'WebSearch' && t !== 'WebFetch');
+    if (visibleForced.length !== forcedTools.length) {
+      groups.push({
+        key: 'web',
+        icon: <LanguageIcon sx={{ fontSize: 13 }} />,
+        color: '#8a8a94',
+        label: 'Web search',
+        chips: [],
+      });
+    }
+    if (visibleForced.length > 0) {
+      groups.push({
+        key: 'tools',
+        icon: <BuildOutlinedIcon sx={{ fontSize: 13 }} />,
+        color: '#f59e0b',
+        label: `${visibleForced.length} action${visibleForced.length > 1 ? 's' : ''} requested`,
+        chips: visibleForced.map((t) => ({
+          label: t,
+          icon: <BuildOutlinedIcon sx={{ fontSize: 12 }} />,
+        })),
+      });
+    }
   }
 
   return groups;
@@ -380,7 +396,8 @@ const AttachedContextSection: React.FC<{
   if (groups.length === 0) return null;
 
   return (
-    <Box sx={{ mt: 1, pt: 0.75, borderTop: `1px solid ${c.border.subtle}` }}>
+    // Quiet metadata, not a banner: no divider, ghost text, tiny glyphs; detail stays one click away.
+    <Box sx={{ mt: 0.75 }}>
       <Box
         onClick={() => setExpanded(!expanded)}
         sx={{
@@ -388,8 +405,9 @@ const AttachedContextSection: React.FC<{
           alignItems: 'center',
           gap: 0.5,
           cursor: 'pointer',
-          mb: 0.5,
-          '&:hover': { opacity: 0.8 },
+          opacity: 0.75,
+          '&:hover': { opacity: 1 },
+          transition: 'opacity 120ms',
         }}
       >
         {groups.map((g) => (
@@ -397,7 +415,7 @@ const AttachedContextSection: React.FC<{
             {g.icon}
           </Box>
         ))}
-        <Typography sx={{ fontSize: '0.7rem', fontWeight: 600, color: c.text.muted }}>
+        <Typography sx={{ fontSize: '0.68rem', fontWeight: 500, color: c.text.muted }}>
           {groups.map((g) => g.label).join(' · ')}
         </Typography>
         <ExpandMoreIcon
@@ -1071,14 +1089,14 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
       >
         {isUser ? (
           editing ? (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, minWidth: 240 }}>
-              <TextField
+            // Claude's edit grammar: the SAME bubble becomes editable in place, no boxed field, no
+            // focus ring, no explainer banner; just the text with two quiet controls under it.
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75, minWidth: 240 }}>
+              <InputBase
                 multiline
                 fullWidth
                 value={editText}
                 onChange={(e) => setEditText(e.target.value)}
-                variant="outlined"
-                size="small"
                 autoFocus
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && !e.shiftKey) {
@@ -1088,35 +1106,36 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                   if (e.key === 'Escape') handleCancelEdit();
                 }}
                 sx={{
-                  '& .MuiOutlinedInput-root': {
-                    color: c.text.primary,
-                    fontSize: '0.875rem',
-                    '& fieldset': { borderColor: c.border.strong },
-                    '&:hover fieldset': { borderColor: c.text.tertiary },
-                    '&.Mui-focused fieldset': { borderColor: c.accent.primary },
-                  },
+                  color: c.text.primary,
+                  fontSize: '0.875rem',
+                  lineHeight: 1.55,
+                  p: 0,
+                  '& textarea': { p: 0 },
                 }}
               />
-              <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+              <Box sx={{ display: 'flex', gap: 0.5, justifyContent: 'flex-end', alignItems: 'center' }}>
                 <Button
                   size="small"
                   onClick={handleCancelEdit}
-                  sx={{ color: c.text.muted, fontSize: '0.75rem' }}
+                  sx={{ color: c.text.muted, fontSize: '0.75rem', textTransform: 'none', minWidth: 0, px: 1 }}
                 >
                   Cancel
                 </Button>
                 <Button
                   size="small"
-                  variant="contained"
                   onClick={handleSaveEdit}
                   disabled={!editText.trim() || editText.trim() === rawText}
                   sx={{
-                    bgcolor: c.accent.primary,
+                    color: c.accent.primary,
+                    fontWeight: 600,
                     fontSize: '0.75rem',
-                    '&:hover': { bgcolor: c.accent.hover },
+                    textTransform: 'none',
+                    minWidth: 0,
+                    px: 1,
+                    '&.Mui-disabled': { color: c.text.ghost },
                   }}
                 >
-                  Save & Submit
+                  Save
                 </Button>
               </Box>
             </Box>

From 038f57383a91f3fa163037a7bb78aef8b61e77ec Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:53:43 -0700
Subject: [PATCH 127/248] [eric] canvas: full size view swallows stray wheel
 (no more zoom glitch while scrolling the chat)

---
 .../Dashboard/hooks/interaction/useCanvasControls.ts      | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
index 7218544c..47861b8c 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
@@ -1,4 +1,5 @@
 import { useState, useCallback, useRef, useEffect, useMemo, RefObject } from 'react';
+import { store } from '@/shared/state/store';
 import { setCanvasInteractionActive } from '@/shared/canvasInteractionState';
 import { getLastInteractedBrowser } from '@/shared/browserFocus';
 import { getScrollFocusedCard } from '@/shared/cardScrollFocus';
@@ -297,6 +298,13 @@ export function useCanvasControls(zoomSensitivity: number = 50, contentBounds?:
     const scrollableCache: WeakMap<HTMLElement, 'scrollable' | 'not'> = new WeakMap();
 
     const onWheel = (e: WheelEvent) => {
+      // Full size view owns the whole surface: any wheel that escapes the chat's scroll container
+      // (side gutters, header) must NOT zoom/pan the hidden canvas underneath, that read as a
+      // glitchy zoom while scrolling the chat. Fullscreen has no canvas nav, period.
+      const tiledCards = store.getState().dashboardLayout.tiledCards;
+      for (const z of Object.values(tiledCards)) {
+        if (z === 'fullscreen') return;
+      }
       // ctrl/cmd wheel is a modifier gesture: a real held key (cmd/ctrl + scroll → vertical pan) or a trackpad pinch, which also sets ctrlKey (→ zoom at cursor). Either way it bypasses scrollable children and acts on the canvas.
       const isModifierWheel = e.ctrlKey || e.metaKey;
 

From 69600ea53386accf8133e8ac1a8c0f0a45cbf1d8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 18:53:43 -0700
Subject: [PATCH 128/248] [eric] chat: warm neutral dark surface replaces the
 saturated plum; composer drops the dead mic

---
 .../ChatInput/toolbar/ToolbarActions.tsx        | 17 -----------------
 .../src/app/pages/Dashboard/cards/AgentCard.tsx |  4 +++-
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index 6cb493cd..6e1b65bf 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -2,7 +2,6 @@ import React, { RefObject } from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import StopIcon from '@mui/icons-material/Stop';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
@@ -179,22 +178,6 @@ export const ToolbarActions: React.FC<Props> = ({
                 <StopIcon sx={{ fontSize: 16 }} />
               </IconButton>
             </Tooltip>
-          ) : !hasContent ? (
-            <Tooltip title="Voice input (coming soon)">
-              <span>
-                <IconButton
-                  size="small"
-                  disabled
-                  sx={{
-                    color: c.text.tertiary,
-                    p: 0.5,
-                    '&.Mui-disabled': { color: c.text.ghost },
-                  }}
-                >
-                  <MicNoneOutlinedIcon sx={{ fontSize: 18 }} />
-                </IconButton>
-              </span>
-            </Tooltip>
           ) : null}
         </Box>
       )}
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 4f6d461c..c75dccad 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -928,7 +928,9 @@ const AgentCard: React.FC<Props> = ({
         // turns white" bug) but solid + blur-free: nothing shows behind a tiled card, and a
         // window-sized backdrop blur is pure GPU tax.
         ...(expanded && {
-          bgcolor: tiledStyle ? 'rgb(26,16,34)' : 'rgba(26,16,34,0.85)',
+          // Warm near-neutral dark (the Claude/ChatGPT family) instead of the saturated plum: long
+          // reading sessions want a quiet ground; the accent system carries the brand color.
+          bgcolor: tiledStyle ? 'rgb(33,31,36)' : 'rgba(33,31,36,0.88)',
           ...(tiledStyle ? {} : {
             backdropFilter: 'blur(24px) saturate(150%)',
             WebkitBackdropFilter: 'blur(24px) saturate(150%)',

From 1042942d88e176177fd01a88b2bd1adae6637a77 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 19:11:56 -0700
Subject: [PATCH 129/248] [eric] chat: editing a user message widens to the
 full column and stays editable (was right-hugging + cramped)

---
 .../pages/AgentChat/bubbles/MessageBubble.tsx | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index 082f8e7a..9479575a 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -1054,7 +1054,9 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
       data-select-meta={JSON.stringify({ role, content: truncatedContent })}
       sx={{
         display: 'flex',
-        justifyContent: isUser ? 'flex-end' : 'flex-start',
+        // Editing a user message widens it to the full column (Claude's grammar), so the field is
+        // comfortable to type in instead of a cramped right-hugging box.
+        justifyContent: isUser && !editing ? 'flex-end' : 'flex-start',
         my: 0.75,
         // Isolates reflow so an expanding bubble doesn't shake the transcript.
         contain: 'layout style',
@@ -1064,10 +1066,11 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
         sx={{
           // Only USER messages wear a bubble (the ChatGPT/Claude grammar): the assistant's words sit
           // directly on the page, so its answers read as the page's voice, not another chat balloon.
-          maxWidth: isUser ? '85%' : '100%',
+          maxWidth: isUser && !editing ? '85%' : '100%',
+          width: editing ? '100%' : undefined,
           minWidth: 0,
           // Oversized messages are block-virtualized, so the set of rendered blocks (and thus the widest visible content) changes as you scroll. Pin them to a stable width so the bubble doesn't shrink-to-fit and resize horizontally frame to frame. Normal messages keep shrink-to-fit.
-          ...(isOversized ? { width: isUser ? '85%' : '100%' } : {}),
+          ...(isOversized && !editing ? { width: isUser ? '85%' : '100%' } : {}),
           bgcolor: isUser ? c.user.bubble : 'transparent',
           border: isUser && isFailed ? `1px solid ${c.status.error}` : 'none',
           borderRadius: isUser ? '18px' : 0,
@@ -1089,9 +1092,9 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
       >
         {isUser ? (
           editing ? (
-            // Claude's edit grammar: the SAME bubble becomes editable in place, no boxed field, no
-            // focus ring, no explainer banner; just the text with two quiet controls under it.
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75, minWidth: 240 }}>
+            // Claude's edit grammar: the message widens to the full column and becomes an editable
+            // field in place (subtle surface, no explainer banner), with two quiet controls under it.
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75, width: '100%' }}>
               <InputBase
                 multiline
                 fullWidth
@@ -1099,6 +1102,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                 onChange={(e) => setEditText(e.target.value)}
                 autoFocus
                 onKeyDown={(e) => {
+                  e.stopPropagation();
                   if (e.key === 'Enter' && !e.shiftKey) {
                     e.preventDefault();
                     handleSaveEdit();
@@ -1109,7 +1113,10 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                   color: c.text.primary,
                   fontSize: '0.875rem',
                   lineHeight: 1.55,
-                  p: 0,
+                  bgcolor: 'rgba(255,255,255,0.06)',
+                  borderRadius: '10px',
+                  px: 1.25,
+                  py: 1,
                   '& textarea': { p: 0 },
                 }}
               />

From dc91a4225fd2d9e25c46afb80504ffc15151a25a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 19:11:56 -0700
Subject: [PATCH 130/248] [eric] onboarding: harvest ChatGPT + Claude in
 parallel under a budget (13.7s -> 6.9s, 49% off the reveal wait)

---
 backend/apps/onboarding/onboarding.py | 32 +++++++++++++++++++++------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/backend/apps/onboarding/onboarding.py b/backend/apps/onboarding/onboarding.py
index 93e79083..a0147b6e 100644
--- a/backend/apps/onboarding/onboarding.py
+++ b/backend/apps/onboarding/onboarding.py
@@ -5,11 +5,25 @@ the user's machine and providers; nothing here mutates state or leaves the box
 except the prep call, which goes to the user's own configured model.
 """
 
+import asyncio
 from contextlib import asynccontextmanager
 from pathlib import Path
+from typing import Awaitable
 
 from typeguard import typechecked
 
+# Hard cap on any single provider harvest so a wedged endpoint can't hold the whole reveal hostage
+# (the raw-httpx paths already carry a 20s per-request timeout; this bounds the multi-request loop).
+P_HARVEST_BUDGET_S = 26.0
+
+
+async def p_budgeted(coro: Awaitable[str]) -> str:
+    """Await a harvest under the budget; any failure (timeout, provider down) fails open to ''."""
+    try:
+        return await asyncio.wait_for(coro, timeout=P_HARVEST_BUDGET_S)
+    except Exception:
+        return ""
+
 from backend.apps.onboarding.identity import build_identity
 from backend.apps.onboarding.local_scan import run_local_scan
 from backend.apps.onboarding.models import PrepRequest
@@ -48,16 +62,20 @@ async def post_prep(body: PrepRequest) -> dict:
     from backend.apps.settings.store import load_settings
 
     # ALWAYS read the ENTIRE recent conversations (not just titles) from the rich providers, ChatGPT via
-    # the codex connect token, Claude via the user's own browser session cookies, and PREFER that over
-    # whatever the frontend read. The frontend reads only the single connected provider, which for a
-    # Gemini/antigravity user is a titles-only DOM scrape that can surface a stale topic (the "skincare
-    # app" the user hasn't touched in ages). Multiple providers connected? We take all the rich ones and
-    # let the clustering pass merge them into one profile. Each fails open to "", so a missing one drops.
+    # the codex connect token (platform-independent), Claude via the user's own browser session cookies,
+    # and PREFER that over whatever the frontend read. The frontend reads only the single connected
+    # provider, which for a Gemini/antigravity user is a titles-only DOM scrape that can surface a stale
+    # topic (the "skincare app" the user hasn't touched in ages). Multiple providers connected? We take
+    # all the rich ones and let the clustering pass merge them. Each fails open to "", so a missing one
+    # drops. Harvested in PARALLEL under a budget: stacked awaits added a ~15s ChatGPT pull ON TOP of a
+    # ~8s Claude pull for ~23s of dead reveal time; gathered they overlap to the slower of the two.
+    chatgpt, claude = await asyncio.gather(
+        p_budgeted(harvest_chatgpt_usage()),
+        p_budgeted(harvest_claude_usage()),
+    )
     parts: list[str] = []
-    chatgpt = await harvest_chatgpt_usage()
     if chatgpt:
         parts.append("ChatGPT conversations:\n" + chatgpt)
-    claude = await harvest_claude_usage()
     if claude:
         parts.append("Claude conversations:\n" + claude)
     if parts:

From 63eef8b416fb7861bfab2b04556c3240b4601521 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 19:11:56 -0700
Subject: [PATCH 131/248] [eric] onboarding: cookie harvest works on Windows
 too (DPAPI key + AES-GCM), macOS path unchanged; ChatGPT-token path already
 cross-platform

---
 .../apps/onboarding/usage/browser_cookies.py  | 134 ++++++++++++++----
 backend/tests/test_onboarding.py              |  41 ++++++
 2 files changed, 147 insertions(+), 28 deletions(-)

diff --git a/backend/apps/onboarding/usage/browser_cookies.py b/backend/apps/onboarding/usage/browser_cookies.py
index 828ee62d..0d69b28b 100644
--- a/backend/apps/onboarding/usage/browser_cookies.py
+++ b/backend/apps/onboarding/usage/browser_cookies.py
@@ -1,33 +1,56 @@
 """Read the user's own logged-in provider cookies from their real browser, so
 onboarding can harvest their actual chat history at first run without an in-app login.
 
-macOS + Chromium only for now (Chrome/Arc/Brave/Edge). We first find WHICH store holds
-the session by counting cookie names in the SQLite (no decryption, no keychain), then
-decrypt only that one store, so the "Safe Storage" keychain is touched at most once per
-browser (cached for the process). Values are v10/v11 AES-CBC. Fails open to {} on
-anything (no browser, app-bound v20 cookies, denied keychain, Safari-only user), so
-prep just falls back to the local scan.
+Chromium (Chrome/Arc/Brave/Edge) on macOS AND Windows. We first find WHICH store holds the
+session by counting cookie names in the SQLite (no decryption, no keychain/DPAPI), then decrypt
+only that one store, so the secret key is fetched at most once per browser (cached for the
+process). Per-OS decryption:
+  - macOS: "Safe Storage" keychain password -> PBKDF2 -> AES-CBC (v10/v11).
+  - Windows: DPAPI-unwrapped key from Local State -> AES-256-GCM (v10/v11).
+v20 = app-bound encryption (modern Chrome), out of reach on both without the browser's own
+elevation service. Fails open to {} on anything (no browser, app-bound cookies, denied
+keychain/DPAPI, Safari-only user), so prep just falls back to the local scan.
 
 Only ever reads the specific provider domain asked for; never a general cookie sweep.
 The values are session secrets: used in-process for the harvest, never logged or stored.
+
+NOTE: the Windows path is written to the well-documented Chromium/DPAPI scheme but is NOT
+live-tested from this repo's dev machine (macOS); the macOS path is live-proven (490 real
+Claude convos). Both fail open, so a Windows decryption miss degrades to the scan, never crashes.
 """
 
+import base64
 import hashlib
+import json
 import os
 import shutil
 import sqlite3
 import subprocess
+import sys
 import tempfile
 from typing import Any, Dict, List, Optional, Tuple
 
 from typeguard import typechecked
 
-CHROMIUM_ROOTS = {
-    "Chrome": "Library/Application Support/Google/Chrome",
-    "Arc": "Library/Application Support/Arc/User Data",
-    "Brave": "Library/Application Support/BraveSoftware/Brave-Browser",
-    "Edge": "Library/Application Support/Microsoft Edge",
-}
+IS_WIN = sys.platform == "win32"
+
+# Per-OS "User Data" roots (relative to the home dir), where profiles + Local State live.
+if IS_WIN:
+    p_local = os.environ.get("LOCALAPPDATA", os.path.expanduser("~/AppData/Local"))
+    CHROMIUM_ROOTS = {
+        "Chrome": os.path.join(p_local, "Google", "Chrome", "User Data"),
+        "Arc": os.path.join(p_local, "Packages"),  # Arc/Windows is UWP-packaged + rare; best-effort
+        "Brave": os.path.join(p_local, "BraveSoftware", "Brave-Browser", "User Data"),
+        "Edge": os.path.join(p_local, "Microsoft", "Edge", "User Data"),
+    }
+else:
+    p_home = os.path.expanduser("~")
+    CHROMIUM_ROOTS = {
+        "Chrome": os.path.join(p_home, "Library/Application Support/Google/Chrome"),
+        "Arc": os.path.join(p_home, "Library/Application Support/Arc/User Data"),
+        "Brave": os.path.join(p_home, "Library/Application Support/BraveSoftware/Brave-Browser"),
+        "Edge": os.path.join(p_home, "Library/Application Support/Microsoft Edge"),
+    }
 KEYCHAIN_SERVICE = {
     "Chrome": "Chrome Safe Storage",
     "Arc": "Arc Safe Storage",
@@ -36,15 +59,58 @@ KEYCHAIN_SERVICE = {
 }
 PROFILES = ["Default"] + [f"Profile {i}" for i in range(1, 12)]
 
-# One keychain read per browser per process; "Always Allow" then never re-prompts.
+# One key fetch per browser per process; "Always Allow" (mac) / DPAPI (win) then never re-prompts.
 p_key_cache: Dict[str, Optional[bytes]] = {}
 
 
 @typechecked
-def p_safe_storage_key(browser: str) -> Optional[bytes]:
-    if browser in p_key_cache:
-        return p_key_cache[browser]
-    key: Optional[bytes] = None
+def p_win_dpapi_unprotect(data: bytes) -> Optional[bytes]:
+    """CryptUnprotectData via crypt32.dll (no pywin32 dependency). None on any failure."""
+    try:
+        import ctypes
+        from ctypes import wintypes
+
+        class DATA_BLOB(ctypes.Structure):
+            p_fields = [("cbData", wintypes.DWORD), ("pbData", ctypes.POINTER(ctypes.c_char))]
+            _fields_ = p_fields
+
+        buf = ctypes.create_string_buffer(data, len(data))
+        blob_in = DATA_BLOB(len(data), ctypes.cast(buf, ctypes.POINTER(ctypes.c_char)))
+        blob_out = DATA_BLOB()
+        ok = ctypes.windll.crypt32.CryptUnprotectData(
+            ctypes.byref(blob_in), None, None, None, None, 0, ctypes.byref(blob_out)
+        )
+        if not ok:
+            return None
+        n = int(blob_out.cbData)
+        out = ctypes.create_string_buffer(n)
+        ctypes.memmove(out, blob_out.pbData, n)
+        ctypes.windll.kernel32.LocalFree(blob_out.pbData)
+        return out.raw
+    except Exception:
+        return None
+
+
+@typechecked
+def p_win_storage_key(browser: str) -> Optional[bytes]:
+    """The AES key from a Chromium install's Local State: base64 -> strip 'DPAPI' -> CryptUnprotectData."""
+    base = CHROMIUM_ROOTS.get(browser)
+    if not base:
+        return None
+    local_state = os.path.join(base, "Local State")
+    try:
+        with open(local_state, "r", encoding="utf-8") as f:
+            enc_b64 = json.load(f)["os_crypt"]["encrypted_key"]
+        raw = base64.b64decode(enc_b64)
+        if raw[:5] != b"DPAPI":
+            return None
+        return p_win_dpapi_unprotect(raw[5:])
+    except Exception:
+        return None
+
+
+@typechecked
+def p_mac_storage_key(browser: str) -> Optional[bytes]:
     try:
         r = subprocess.run(
             ["security", "find-generic-password", "-w", "-s", KEYCHAIN_SERVICE[browser]],
@@ -52,9 +118,17 @@ def p_safe_storage_key(browser: str) -> Optional[bytes]:
         )
         pw = r.stdout.strip()
         if pw:
-            key = hashlib.pbkdf2_hmac("sha1", pw.encode(), b"saltysalt", 1003, 16)
+            return hashlib.pbkdf2_hmac("sha1", pw.encode(), b"saltysalt", 1003, 16)
     except Exception:
-        key = None
+        pass
+    return None
+
+
+@typechecked
+def p_safe_storage_key(browser: str) -> Optional[bytes]:
+    if browser in p_key_cache:
+        return p_key_cache[browser]
+    key = p_win_storage_key(browser) if IS_WIN else p_mac_storage_key(browser)
     p_key_cache[browser] = key
     return key
 
@@ -82,11 +156,9 @@ def p_count_domain(db_path: str, domain: str) -> int:
 @typechecked
 def p_best_store(domain: str) -> Optional[Tuple[str, str]]:
     """The (browser, db_path) holding the most cookies for `domain`, found WITHOUT the keychain."""
-    home = os.path.expanduser("~")
     best: Optional[Tuple[str, str]] = None
     best_score = (0, -1.0)
-    for browser, rel in CHROMIUM_ROOTS.items():
-        base = os.path.join(home, rel)
+    for browser, base in CHROMIUM_ROOTS.items():
         if not os.path.isdir(base):
             continue
         for prof in PROFILES:
@@ -107,13 +179,19 @@ def p_decrypt(enc: bytes, key: bytes) -> Optional[str]:
     if enc[:3] not in (b"v10", b"v11"):
         return None  # v20 = app-bound encryption, out of reach without the browser
     try:
-        from cryptography.hazmat.backends import default_backend
-        from cryptography.hazmat.primitives.ciphers import Cipher, algorithms, modes
+        if IS_WIN:
+            # Windows Chromium: v10/v11 = AES-256-GCM, [3:15]=nonce, tail 16 bytes=tag (bundled with ct).
+            from cryptography.hazmat.primitives.ciphers.aead import AESGCM
 
-        c = Cipher(algorithms.AES(key), modes.CBC(b" " * 16), backend=default_backend())
-        d = c.decryptor()
-        dec = d.update(enc[3:]) + d.finalize()
-        dec = dec[: -dec[-1]]  # strip PKCS7 padding
+            dec = AESGCM(key).decrypt(enc[3:15], enc[15:], None)
+        else:
+            from cryptography.hazmat.backends import default_backend
+            from cryptography.hazmat.primitives.ciphers import Cipher, algorithms, modes
+
+            c = Cipher(algorithms.AES(key), modes.CBC(b" " * 16), backend=default_backend())
+            d = c.decryptor()
+            dec = d.update(enc[3:]) + d.finalize()
+            dec = dec[: -dec[-1]]  # strip PKCS7 padding
         for cut in (0, 32):  # newer Chromium prepends a 32-byte domain hash
             try:
                 return dec[cut:].decode("utf-8")
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index ad39a74c..1a9ee6b8 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -154,6 +154,47 @@ def test_read_provider_cookies_fails_open_without_a_store(monkeypatch):
     assert browser_cookies.read_provider_cookie_records("claude.ai") == []
 
 
+def test_win_storage_key_parses_local_state_and_unwraps(monkeypatch, tmp_path):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # Local State carries a base64 "DPAPI"-prefixed key; the Windows path strips the prefix and
+    # hands the rest to CryptUnprotectData. Prove the parse + prefix-strip without needing Windows.
+    raw_key = b"DPAPI" + b"wrapped-key-bytes"
+    local_state_dir = tmp_path / "UserData"
+    local_state_dir.mkdir()
+    (local_state_dir / "Local State").write_text(
+        json.dumps({"os_crypt": {"encrypted_key": base64.b64encode(raw_key).decode()}})
+    )
+    monkeypatch.setattr(browser_cookies, "CHROMIUM_ROOTS", {"Chrome": str(local_state_dir)})
+    seen = {}
+
+    def fake_unprotect(data: bytes):
+        seen["passed"] = data
+        return b"unwrapped-aes-key"
+
+    monkeypatch.setattr(browser_cookies, "p_win_dpapi_unprotect", fake_unprotect)
+    key = browser_cookies.p_win_storage_key("Chrome")
+    assert key == b"unwrapped-aes-key"
+    assert seen["passed"] == b"wrapped-key-bytes"  # the 5-byte "DPAPI" prefix was stripped
+
+
+def test_win_storage_key_fails_open(monkeypatch, tmp_path):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # Missing Local State, malformed JSON, and DPAPI failure all fail open to None (-> scan fallback).
+    monkeypatch.setattr(browser_cookies, "CHROMIUM_ROOTS", {"Chrome": str(tmp_path)})
+    assert browser_cookies.p_win_storage_key("Chrome") is None  # no Local State file
+    assert browser_cookies.p_win_storage_key("Nonexistent") is None
+
+
+def test_decrypt_rejects_app_bound_v20():
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # v20 = app-bound encryption (modern Chrome), out of reach on both OSes -> None, never a crash.
+    assert browser_cookies.p_decrypt(b"v20" + b"anything", b"\x00" * 32) is None
+    assert browser_cookies.p_decrypt(b"", b"\x00" * 32) is None
+
+
 def test_dump_cookies_only_serves_allowlisted_domains(monkeypatch, capsys):
     from backend.apps.onboarding.usage import dump_cookies
 

From 56e3db3445802e7efceeff341b8f4d08a561f04a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 19:37:27 -0700
Subject: [PATCH 132/248] [eric] composer: collapse the bar actions into one +
 menu (attach + web + select), active toggles surface as removable pills

---
 .../ChatInput/toolbar/ComposerPlusMenu.tsx    | 139 ++++++++++++++++++
 .../ChatInput/toolbar/ToolbarActions.tsx      | 132 ++++++-----------
 2 files changed, 185 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx

diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
new file mode 100644
index 00000000..59eb304d
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { ClaudeTokens } from '@/shared/styles/claudeTokens';
+
+export interface PlusMenuItem {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+  // A toggle shows a check when active and stays open-able; an action fires and closes.
+  toggle?: boolean;
+  active?: boolean;
+  onSelect: () => void;
+}
+
+// One "+" that holds every composer action so the bar reads empty at rest but has room to grow
+// (the ChatGPT/Claude/Open WebUI grammar). Active toggles ALSO surface as a pill on the bar (see
+// ActiveTogglePills) so their state is visible with the menu closed.
+export const ComposerPlusMenu: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[] }> = ({ c, items }) => {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  if (items.length === 0) return null;
+  return (
+    <>
+      <Tooltip title="Add">
+        <IconButton
+          size="small"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={(e) => setAnchor(e.currentTarget)}
+          data-onboarding="composer-plus"
+          sx={{
+            p: 0.5,
+            color: anchor ? c.text.secondary : c.text.tertiary,
+            bgcolor: anchor ? 'rgba(0,0,0,0.04)' : 'transparent',
+            '&:hover': { color: c.text.secondary, bgcolor: 'rgba(0,0,0,0.04)' },
+            transition: 'color 0.12s, background-color 0.12s',
+          }}
+        >
+          <AddRoundedIcon sx={{ fontSize: 19 }} />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        anchorEl={anchor}
+        open={!!anchor}
+        onClose={() => setAnchor(null)}
+        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        slotProps={{
+          paper: {
+            sx: {
+              bgcolor: c.bg.surface,
+              border: `1px solid ${c.border.subtle}`,
+              borderRadius: '12px',
+              minWidth: 208,
+              mb: 0.5,
+              boxShadow: c.shadow.lg,
+              overflow: 'hidden',
+            },
+          },
+        }}
+      >
+        {items.map((it) => (
+          <MenuItem
+            key={it.key}
+            onClick={() => {
+              it.onSelect();
+              if (!it.toggle) setAnchor(null);
+            }}
+            sx={{
+              py: 0.9,
+              px: 1.5,
+              gap: 1.25,
+              display: 'flex',
+              alignItems: 'center',
+              color: it.active ? c.accent.primary : c.text.secondary,
+              '&:hover': { bgcolor: c.bg.secondary },
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', color: 'inherit', flexShrink: 0 }}>{it.icon}</Box>
+            <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
+            {it.toggle && it.active && <CheckRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+// The active toggles as compact pills on the bar, so the mode is visible + one-click-off without
+// reopening the menu. Empty when nothing is active, so the resting bar stays minimal.
+export const ActiveTogglePills: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[] }> = ({ c, items }) => {
+  const active = items.filter((it) => it.toggle && it.active);
+  if (active.length === 0) return null;
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 1, minWidth: 0 }}>
+      {active.map((it) => (
+        <Tooltip key={it.key} title={`${it.label}: on. Click to turn off.`}>
+          <Box
+            role="button"
+            onClick={it.onSelect}
+            onMouseDown={(e) => e.preventDefault()}
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 0.5,
+              height: 24,
+              pl: 0.75,
+              pr: 0.9,
+              borderRadius: 999,
+              cursor: 'pointer',
+              bgcolor: `${c.accent.primary}1f`,
+              color: c.accent.primary,
+              border: `1px solid ${c.accent.primary}33`,
+              '&:hover': { bgcolor: `${c.accent.primary}2e` },
+              transition: 'background-color 0.12s',
+              '& svg': { fontSize: 14 },
+              // Icon at rest, X on hover: the remove affordance without a permanent close button.
+              '& .osw-pill-x': { display: 'none' },
+              '&:hover .osw-pill-icon': { display: 'none' },
+              '&:hover .osw-pill-x': { display: 'inline-flex' },
+            }}
+          >
+            <Box component="span" className="osw-pill-icon" sx={{ display: 'inline-flex' }}>{it.icon}</Box>
+            <Box component="span" className="osw-pill-x" sx={{ alignItems: 'center' }}><CloseRoundedIcon /></Box>
+            <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: 'inherit', whiteSpace: 'nowrap' }}>
+              {it.label}
+            </Typography>
+          </Box>
+        </Tooltip>
+      ))}
+    </Box>
+  );
+};
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index 6e1b65bf..7138ae55 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -9,6 +9,7 @@ import AdsClickIcon from '@mui/icons-material/AdsClick';
 import LanguageIcon from '@mui/icons-material/Language';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 import { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import { ComposerPlusMenu, ActiveTogglePills, PlusMenuItem } from './ComposerPlusMenu';
 
 interface Props {
   c: ClaudeTokens;
@@ -33,81 +34,51 @@ export const ToolbarActions: React.FC<Props> = ({
   addImageFiles, uploadAndAttachFiles, hasContent, disabled, isRunning, onStop, handleSend,
   webSearchOn, onToggleWebSearch,
 }) => {
+  // Every composer action collapses into one "+" so the bar reads empty at rest; active toggles
+  // (web search, selecting) still surface as a pill so their state stays visible. New capabilities
+  // (skills, MCP tools, voice, image) just push another entry onto this list, no new bar icon.
+  const isSelecting = !!elementSelection && elementSelection.selectMode && elementSelection.activeOwnerId === ownerId;
+  const toggleSelect = (): void => {
+    if (!elementSelection) return;
+    if (isSelecting) {
+      elementSelection.setSelectMode(false);
+    } else {
+      if (elementSelection.activeOwnerId !== ownerId) elementSelection.clearOwnerElements(ownerId);
+      elementSelection.setActiveOwnerId(ownerId);
+      elementSelection.setExcludeSelectId(sessionId ?? null);
+      elementSelection.setSelectMode(true);
+    }
+  };
+  const plusItems: PlusMenuItem[] = [];
+  plusItems.push({
+    key: 'attach',
+    label: 'Attach file',
+    icon: <AttachFileIcon sx={{ fontSize: 17 }} />,
+    onSelect: () => generalFileInputRef.current?.click(),
+  });
+  if (onToggleWebSearch) {
+    plusItems.push({
+      key: 'web',
+      label: 'Web search',
+      icon: <LanguageIcon sx={{ fontSize: 17 }} />,
+      toggle: true,
+      active: !!webSearchOn,
+      onSelect: onToggleWebSearch,
+    });
+  }
+  if (elementSelection) {
+    plusItems.push({
+      key: 'select',
+      label: 'Select an element',
+      icon: <AdsClickIcon sx={{ fontSize: 17 }} />,
+      toggle: true,
+      active: isSelecting,
+      onSelect: toggleSelect,
+    });
+  }
+
   return (
     <>
-      {onToggleWebSearch && !autoRunMode && (
-        <Tooltip title={webSearchOn ? 'Web search on: replies search the web' : 'Search the web'}>
-          <IconButton
-            size="small"
-            onMouseDown={(e) => e.preventDefault()}
-            onClick={onToggleWebSearch}
-            sx={{
-              p: 0.5,
-              ...(webSearchOn
-                ? {
-                    bgcolor: '#3b82f6',
-                    color: '#fff',
-                    '&:hover': { bgcolor: '#2563eb' },
-                    boxShadow: '0 0 0 3px rgba(59,130,246,0.18)',
-                  }
-                : {
-                    color: c.text.tertiary,
-                    '&:hover': { color: c.text.secondary, bgcolor: 'rgba(0,0,0,0.04)' },
-                  }),
-              transition: 'background-color 0.15s, color 0.15s',
-            }}
-          >
-            <LanguageIcon sx={{ fontSize: 18 }} />
-          </IconButton>
-        </Tooltip>
-      )}
-
-      {elementSelection && !autoRunMode && (() => {
-        const isMySelectMode = elementSelection.selectMode && elementSelection.activeOwnerId === ownerId;
-        return (
-          <Tooltip title={isMySelectMode ? 'Exit select mode' : 'Select UI element'}>
-            <IconButton
-              size="small"
-              onMouseDown={(e) => e.preventDefault()}
-              data-onboarding="element-selection-toggle"
-              onClick={() => {
-                if (isMySelectMode) {
-                  elementSelection.setSelectMode(false);
-                } else {
-                  if (elementSelection.activeOwnerId !== ownerId) {
-                    elementSelection.clearOwnerElements(ownerId);
-                  }
-                  elementSelection.setActiveOwnerId(ownerId);
-                  if (sessionId) {
-                    elementSelection.setExcludeSelectId(sessionId);
-                  } else {
-                    elementSelection.setExcludeSelectId(null);
-                  }
-                  elementSelection.setSelectMode(true);
-                }
-              }}
-              sx={{
-                p: 0.5,
-                ...(isMySelectMode
-                  ? {
-                      bgcolor: '#3b82f6',
-                      color: '#fff',
-                      '&:hover': { bgcolor: '#2563eb' },
-                      boxShadow: '0 0 0 3px rgba(59,130,246,0.18)',
-                    }
-                  : {
-                      color: c.text.tertiary,
-                      '&:hover': { color: c.text.secondary, bgcolor: 'rgba(0,0,0,0.04)' },
-                    }),
-                transition: 'background-color 0.15s, color 0.15s',
-              }}
-            >
-              <AdsClickIcon sx={{ fontSize: 18 }} />
-            </IconButton>
-          </Tooltip>
-        );
-      })()}
-
       <input
         ref={generalFileInputRef}
         type="file"
@@ -123,19 +94,8 @@ export const ToolbarActions: React.FC<Props> = ({
           e.target.value = '';
         }}
       />
-      <Tooltip title="Attach file">
-        <IconButton
-          size="small"
-          onClick={() => generalFileInputRef.current?.click()}
-          sx={{
-            color: c.text.tertiary,
-            p: 0.5,
-            '&:hover': { color: c.text.secondary, bgcolor: 'rgba(0,0,0,0.04)' },
-          }}
-        >
-          <AttachFileIcon sx={{ fontSize: 18 }} />
-        </IconButton>
-      </Tooltip>
+      {!autoRunMode && <ActiveTogglePills c={c} items={plusItems} />}
+      {!autoRunMode && <ComposerPlusMenu c={c} items={plusItems} />}
       {!autoRunMode && (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
           {hasContent && (

From 8d67e7c3769ae1f2da7eff6510275ec7900ca69a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 19:41:40 -0700
Subject: [PATCH 133/248] [eric] dock: rounder squircle tiles + a springy
 hover-lift on every tile (brings back life without the fisheye wobble)

---
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index 702ad5c5..dba00d28 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -214,11 +214,20 @@ function DesktopDock({
         alignItems: 'center',
         gap: '9px',
         p: '7px',
-        borderRadius: '14px',
+        borderRadius: '16px',
         background: 'rgba(22,12,34,0.66)',
         backdropFilter: 'blur(20px) saturate(160%)',
         WebkitBackdropFilter: 'blur(20px) saturate(160%)',
         boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
+        // One tasteful hover for every tile: a spring-y lift (replaces the fisheye that read as wobble),
+        // and every tile is a rounder squircle so they feel like real app icons, not lame little squares.
+        '& .osw-dock-tile': {
+          borderRadius: '12px',
+          transition: 'transform 0.16s cubic-bezier(.34,1.56,.64,1)',
+          willChange: 'transform',
+        },
+        '& .osw-dock-tile:hover': { transform: 'scale(1.16)' },
+        '& .osw-dock-tile:active': { transform: 'scale(1.04)' },
       }}
     >
       {entries.map((entry) => {
@@ -226,6 +235,7 @@ function DesktopDock({
         return (
           <Box
             key={entry.id}
+            className="osw-dock-tile"
             onMouseEnter={(e) => beginHover(entry, e.currentTarget as HTMLElement)}
             onClick={() => {
               endHover();
@@ -235,7 +245,7 @@ function DesktopDock({
               position: 'relative',
               width: TILE,
               height: TILE,
-              borderRadius: '9px',
+              borderRadius: '12px',
               background: entry.tileBg,
               display: 'flex',
               alignItems: 'center',
@@ -253,7 +263,7 @@ function DesktopDock({
                 src={entry.faviconUrl}
                 alt=""
                 onError={(e: React.SyntheticEvent<HTMLImageElement>) => { e.currentTarget.style.display = 'none'; }}
-                sx={{ position: 'absolute', width: 18, height: 18, borderRadius: '4px' }}
+                sx={{ position: 'absolute', width: 18, height: 18, borderRadius: '6px' }}
               />
             )}
           </Box>
@@ -273,12 +283,13 @@ function DesktopDock({
       ] as const).map((a) => (
         <Tooltip key={a.label} title={a.label} placement="right">
           <Box
+            className="osw-dock-tile"
             onClick={a.act}
             onMouseEnter={endHover}
             sx={{
               width: TILE,
               height: TILE,
-              borderRadius: '9px',
+              borderRadius: '12px',
               background: 'linear-gradient(135deg, #5a5a62, #34343c)',
               display: 'flex',
               alignItems: 'center',
@@ -293,12 +304,13 @@ function DesktopDock({
       ))}
       <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
       <Box
+        className="osw-dock-tile"
         onClick={() => dispatch(openSettingsModal(undefined))}
         onMouseEnter={endHover}
         sx={{
           width: TILE,
           height: TILE,
-          borderRadius: '9px',
+          borderRadius: '12px',
           background: 'linear-gradient(135deg, #5a5a62, #34343c)',
           display: 'flex',
           alignItems: 'center',
@@ -310,12 +322,13 @@ function DesktopDock({
         <SettingsIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
       </Box>
       <Box
+        className="osw-dock-tile"
         onClick={onApplications}
         onMouseEnter={endHover}
         sx={{
           width: TILE,
           height: TILE,
-          borderRadius: '9px',
+          borderRadius: '12px',
           background: 'linear-gradient(135deg, #3d3d46, #232329)',
           display: 'flex',
           alignItems: 'center',

From 582084996a13a05bd30d9dfe9ea8e202a4bc2fa2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 19:50:48 -0700
Subject: [PATCH 134/248] [eric] dock: real macOS magnify (hovered tile grows,
 neighbors slide away, no pop-out) + round chat glyph everywhere

---
 .../pages/Dashboard/canvas/DashboardGlyph.tsx |  4 +-
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 47 +++++++++++++++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
index 71aa8dc3..d59e2e91 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardGlyph.tsx
@@ -4,7 +4,7 @@ import type { LucideIcon } from 'lucide-react';
 import {
   Timer, Clock, Calendar, ListChecks, Wallet, BarChart3, Megaphone, Code,
   Terminal, Palette, PenLine, FileText, BookOpen, FlaskConical, Mail,
-  MessageSquare, Plane, Map, Dumbbell, HeartPulse, Utensils, ChefHat, Coffee,
+  MessageCircle, Plane, Map, Dumbbell, HeartPulse, Utensils, ChefHat, Coffee,
   Music, Video, Image, Camera, ShoppingCart, Bot, Gamepad2, Home, Shield,
   Users, Scale, Building2, Newspaper, Briefcase, Rocket, Globe, Database,
   Wrench, Lightbulb, Target, Trophy, Bell, Folder, Package, Truck,
@@ -29,7 +29,7 @@ const KEYWORDS: Record<string, LucideIcon> = {
   research: BookOpen, study: BookOpen, learning: BookOpen, course: BookOpen, education: BookOpen, school: BookOpen, exam: BookOpen, thesis: BookOpen,
   science: FlaskConical, lab: FlaskConical, experiment: FlaskConical, chemistry: FlaskConical, biology: FlaskConical, physics: FlaskConical,
   mail: Mail, email: Mail, inbox: Mail, outreach: Mail, newsletter: Mail,
-  chat: MessageSquare, message: MessageSquare, messaging: MessageSquare, support: MessageSquare, dm: MessageSquare,
+  chat: MessageCircle, message: MessageCircle, messaging: MessageCircle, support: MessageCircle, dm: MessageCircle,
   travel: Plane, trip: Plane, flight: Plane, vacation: Plane, tour: Plane, itinerary: Plane,
   map: Map, location: Map, geo: Map, route: Map, navigation: Map,
   fitness: Dumbbell, workout: Dumbbell, gym: Dumbbell, exercise: Dumbbell, training: Dumbbell,
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index dba00d28..9dd9cb24 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -8,7 +8,7 @@ import EventRepeatIcon from '@mui/icons-material/EventRepeat';
 import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
 import HistoryIcon from '@mui/icons-material/History';
 import { pickIcon } from '../canvas/DashboardGlyph';
-import { MessageSquare } from 'lucide-react';
+import { MessageCircle } from 'lucide-react';
 import { openWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
@@ -98,6 +98,37 @@ function DesktopDock({
   onAddNote,
 }: DesktopDockProps): React.ReactElement | null {
   const dispatch = useAppDispatch();
+  const dockBodyRef = useRef<HTMLDivElement | null>(null);
+  // macOS Dock magnification: the tile under the cursor grows on a bell curve and its neighbors
+  // SLIDE AWAY to make room (no horizontal pop-out, the part that read as wobble). Each tile that
+  // grows by `extra` pushes every tile past it by extra/2, so the column opens up smoothly.
+  const applyDockMagnify = useCallback((clientY: number | null) => {
+    const root = dockBodyRef.current;
+    if (!root) return;
+    const tiles = Array.from(root.querySelectorAll<HTMLElement>('.osw-dock-tile'));
+    if (tiles.length === 0) return;
+    if (clientY == null) {
+      tiles.forEach((t) => { t.style.transform = ''; t.style.zIndex = ''; });
+      return;
+    }
+    const rootTop = root.getBoundingClientRect().top;
+    const cy = clientY - rootTop;
+    const BOOST = 0.5;   // hovered tile grows to 1.5x
+    const FALLOFF = 44;  // px spread of the bell curve (how many neighbors react)
+    const bases = tiles.map((t) => t.offsetTop + t.offsetHeight / 2);
+    const scales = bases.map((b) => 1 + BOOST * Math.exp(-(((cy - b) / FALLOFF) ** 2)));
+    const extra = scales.map((s) => TILE * (s - 1));
+    tiles.forEach((t, i) => {
+      let shift = 0;
+      for (let j = 0; j < tiles.length; j++) {
+        if (j === i) continue;
+        shift += (extra[j] / 2) * Math.sign(bases[i] - bases[j]);
+      }
+      t.style.transform = `translateY(${shift.toFixed(1)}px) scale(${scales[i].toFixed(3)})`;
+      t.style.transformOrigin = 'left center';
+      t.style.zIndex = String(10 + Math.round((scales[i] - 1) * 100));
+    });
+  }, []);
   const [hovered, setHovered] = useState<{ id: string; top: number } | null>(null);
   const [liveShot, setLiveShot] = useState<{ id: string; dataUrl: string } | null>(null);
   const hoverTimer = useRef<number | null>(null);
@@ -108,7 +139,7 @@ function DesktopDock({
       const session = sessions[card.session_id];
       if (!session) continue;
       const title = displayChatTitle(session);
-      const ChatIcon = pickIcon(title) || MessageSquare;
+      const ChatIcon = pickIcon(title) || MessageCircle;
       list.push({
         id: card.session_id,
         label: title,
@@ -202,7 +233,9 @@ function DesktopDock({
 
   return (
     <Box
-      onMouseLeave={endHover}
+      ref={dockBodyRef}
+      onMouseMove={(e: React.MouseEvent) => applyDockMagnify(e.clientY)}
+      onMouseLeave={() => { endHover(); applyDockMagnify(null); }}
       sx={{
         position: 'absolute',
         left: 12,
@@ -219,15 +252,13 @@ function DesktopDock({
         backdropFilter: 'blur(20px) saturate(160%)',
         WebkitBackdropFilter: 'blur(20px) saturate(160%)',
         boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
-        // One tasteful hover for every tile: a spring-y lift (replaces the fisheye that read as wobble),
-        // and every tile is a rounder squircle so they feel like real app icons, not lame little squares.
+        // Rounder squircle tiles (real app icons, not lame squares). The magnify transform is set
+        // imperatively per-frame by applyDockMagnify; a short ease smooths the chase + the reset.
         '& .osw-dock-tile': {
           borderRadius: '12px',
-          transition: 'transform 0.16s cubic-bezier(.34,1.56,.64,1)',
+          transition: 'transform 0.12s ease-out',
           willChange: 'transform',
         },
-        '& .osw-dock-tile:hover': { transform: 'scale(1.16)' },
-        '& .osw-dock-tile:active': { transform: 'scale(1.04)' },
       }}
     >
       {entries.map((entry) => {

From 669deb3076b88218400dbdba19d82876eb270a4e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 20:17:50 -0700
Subject: [PATCH 135/248] [eric] workflows: traffic-light window controls +
 fullscreen (hides dock)

---
 .../Dashboard/canvas/DashboardCanvas.tsx      |  4 ++-
 .../pages/Dashboard/cards/WindowControls.tsx  |  7 ++--
 .../pages/Workflows/app/WorkflowsAppCard.tsx  | 29 ++++++++++++---
 .../Workflows/app/WorkflowsAppContent.tsx     | 35 +++++++++++--------
 .../src/shared/state/dashboardLayoutSlice.ts  | 10 ++++++
 5 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 3c11a1eb..7eb4b036 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -172,6 +172,8 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   // macOS full screen: one card owns the whole window, every piece of chrome steps aside; Esc exits.
   const dispatch = useAppDispatch();
   const fullscreenCardId = useAppSelector(selectFullscreenCardId);
+  // The Workflows window has its own fullscreen flag (not a tiledCard); its fill also hides the dock.
+  const anyFullscreen = !!fullscreenCardId || !!workflowsHub?.fullscreen;
   const [headerRevealed, setHeaderRevealed] = React.useState(false);
   const [appsWindowOpen, setAppsWindowOpen] = React.useState(false);
   useEffect(() => {
@@ -263,7 +265,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         />
       )}
 
-      {!fullscreenCardId && (
+      {!anyFullscreen && (
         <DesktopDock
           sessions={sessions}
           cards={cards}
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 73291ea9..7dd0fd03 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -11,6 +11,9 @@ interface WindowControlsProps {
   // Full size view: the native macOS lights sit right above this corner, so a second dot cluster
   // reads as double chrome; collapse to ONE exit control and let the natives own window ops.
   fullscreen?: boolean;
+  // Green = direct fullscreen toggle, no Fill/Halves/Quarters submenu (for surfaces that only
+  // support fullscreen, like the Workflows window, where half-tiling has nowhere to land).
+  noTileMenu?: boolean;
 }
 
 // macOS-style traffic lights on every card = the "AI OS" window feel. Grey at rest so a canvas
@@ -54,10 +57,10 @@ export const ARC_CHIP_SX: Record<string, unknown> = {
   '.osw-pill-host:hover & .osw-window-lights > :nth-of-type(3)': { transform: 'translate(calc(-50% + 11px), calc(-50% + 5px)) scale(1)', opacity: 1, transitionDelay: '80ms' },
 };
 
-function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen }: WindowControlsProps): React.ReactElement {
+function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTileMenu }: WindowControlsProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
   const closeTimer = useRef<number | null>(null);
-  const openMenu = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
+  const openMenu = (): void => { if (noTileMenu) return; if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
   const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
   const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
 
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
index 58a58adc..9570afde 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useAppDispatch } from '@/shared/hooks';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { setWorkflowsHubPosition, setWorkflowsHubSize } from '@/shared/state/dashboardLayoutSlice';
+import { useTiledStyle } from '@/app/pages/Dashboard/cards/tileZones';
 import { useWC } from './uiKit';
 import WorkflowsAppContent from './WorkflowsAppContent';
 
@@ -53,6 +54,18 @@ const WorkflowsAppCard: React.FC<Props> = ({
 }) => {
   const WC = useWC();
   const dispatch = useAppDispatch();
+  const isFullscreen = useAppSelector((s) => !!s.dashboardLayout.workflowsHub?.fullscreen);
+  // Fullscreen pins the card to the viewport, so its geometry must track pan/zoom like the tiled
+  // agent/browser cards; reuse the exact same helper. Subscribe to pan only while fullscreen.
+  const [, forceTick] = useState(0);
+  useEffect(() => {
+    if (!isFullscreen) return undefined;
+    const onPan = (): void => forceTick((t) => t + 1);
+    window.addEventListener('openswarm:canvas-pan-changed', onPan);
+    return () => window.removeEventListener('openswarm:canvas-pan-changed', onPan);
+  }, [isFullscreen]);
+  const cam = getCanvasState();
+  const fsStyle = useTiledStyle(isFullscreen ? 'fullscreen' : undefined, cam.panX, cam.panY, cam.zoom);
 
 
   // ---- Drag (title bar is the handle) ----
@@ -67,6 +80,7 @@ const WorkflowsAppCard: React.FC<Props> = ({
 
   const onHeaderPointerDown = useCallback((e: React.PointerEvent) => {
     if (e.button !== 0) return;
+    if (isFullscreen) return;  // pinned to the viewport, no drag until restored
     const target = e.target as HTMLElement;
     if (target.closest('[data-no-drag], button, [role="button"], input, textarea, select')) return;
     e.preventDefault();
@@ -197,15 +211,20 @@ const WorkflowsAppCard: React.FC<Props> = ({
         position: 'absolute',
         contain: 'layout style',
         willChange: 'transform',
-        left: dx, top: dy, width: dw, height: dh,
+        left: fsStyle ? fsStyle.left : dx,
+        top: fsStyle ? fsStyle.top : dy,
+        width: fsStyle ? fsStyle.width : dw,
+        height: fsStyle ? fsStyle.height : dh,
+        transform: fsStyle ? fsStyle.transform : undefined,
+        transformOrigin: fsStyle ? fsStyle.transformOrigin : undefined,
         background: WC.page,
-        border,
+        border: fsStyle ? 'none' : border,
         borderRadius: WC.radius.lg,
         boxShadow: (isDragging || isResizing) ? WC.shadow.lg : WC.shadow.md,
         overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
-        zIndex: (isDragging || isResizing) ? 999999 : cardZOrder,
+        zIndex: fsStyle ? 999990 : (isDragging || isResizing) ? 999999 : cardZOrder,
         transition: noTransition ? 'none' : 'box-shadow 0.3s ease, border-color 0.2s ease',
       }}
     >
@@ -218,7 +237,7 @@ const WorkflowsAppCard: React.FC<Props> = ({
         }}
       />
 
-      {HANDLE_DEFS.map(({ dir, css }) => (
+      {!isFullscreen && HANDLE_DEFS.map(({ dir, css }) => (
         <div
           key={dir}
           data-no-drag
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
index 4eb98a50..e2790773 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
@@ -1,14 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import EventRepeatIcon from '@mui/icons-material/EventRepeat';
-import CloseIcon from '@mui/icons-material/Close';
-import IconButton from '@mui/material/IconButton';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { clearWorkflowsAppTarget, closeWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
+import { clearWorkflowsAppTarget, closeWorkflowsApp, toggleWorkflowsHubFullscreen } from '@/shared/state/dashboardLayoutSlice';
+import WindowControls from '@/app/pages/Dashboard/cards/WindowControls';
 import {
   fetchWorkflows, fetchAllRuns, fetchPausedState, fetchActiveRuns, fetchDeletedWorkflows,
 } from '@/shared/state/workflowsSlice';
 import { fetchMissedRuns } from '@/shared/state/missedRunsSlice';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import ShareButton from '@/app/components/share/ShareButton';
 import { FONT_SANS, FONT_SERIF, useWC } from './uiKit';
 import type { AppMode, CalView, AppNav, CardHeader } from './types';
@@ -22,9 +20,9 @@ import TrashView from './TrashView';
 // The three-pane Workflows body plus its title bar. The card wraps this with drag/resize geometry and passes the drag handlers in; the title bar lives here because Share needs to know which workflow is open.
 const WorkflowsAppContent: React.FC<{ header: CardHeader }> = ({ header }) => {
   const WC = useWC();
-  const c = useClaudeTokens();
   const dispatch = useAppDispatch();
   const target = useAppSelector((s) => s.dashboardLayout.workflowsAppTarget);
+  const isFullscreen = useAppSelector((s) => !!s.dashboardLayout.workflowsHub?.fullscreen);
   const dashboardId = useAppSelector((s) => s.tempState.lastDashboardId) || undefined;
 
   const [mode, setMode] = useState<AppMode>('home');
@@ -74,6 +72,23 @@ const WorkflowsAppContent: React.FC<{ header: CardHeader }> = ({ header }) => {
         onPointerUp={header.onPointerUp}
         style={{ height: 42, flex: 'none', display: 'flex', alignItems: 'center', padding: '0 16px', borderBottom: `1px solid ${WC.line}`, background: WC.panel, gap: 14, cursor: header.dragging ? 'grabbing' : 'grab', touchAction: 'none', userSelect: 'none' }}
       >
+        {/* macOS traffic lights: the whole window gets close / minimize / full size view like every card. */}
+        <span
+          className="osw-card"
+          data-no-drag
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+          style={{ display: 'flex', alignItems: 'center' }}
+        >
+          <WindowControls
+            onClose={() => dispatch(closeWorkflowsApp())}
+            onMinimize={() => dispatch(closeWorkflowsApp())}
+            onTile={() => dispatch(toggleWorkflowsHubFullscreen())}
+            tiled={isFullscreen}
+            fullscreen={isFullscreen}
+            noTileMenu
+          />
+        </span>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <EventRepeatIcon sx={{ fontSize: 18, color: WC.accent, display: 'block' }} />
           <span style={{ fontFamily: FONT_SERIF, fontSize: 14.5, fontWeight: 500, color: WC.ink, letterSpacing: '-0.01em', lineHeight: 1, transform: 'translateY(2.5px)' }}>Workflows</span>
@@ -93,16 +108,6 @@ const WorkflowsAppContent: React.FC<{ header: CardHeader }> = ({ header }) => {
             />
           </span>
         )}
-        <IconButton
-          aria-label="Close"
-          data-no-drag
-          size="small"
-          onClick={(e) => { e.stopPropagation(); dispatch(closeWorkflowsApp()); }}
-          onPointerDown={(e) => e.stopPropagation()}
-          sx={{ color: c.text.tertiary, '&:hover': { color: c.status.error, bgcolor: `${c.status.error}14` } }}
-        >
-          <CloseIcon fontSize="small" />
-        </IconButton>
       </div>
 
       <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index d1281c2b..34ec48bb 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -100,6 +100,8 @@ export interface WorkflowsHubPosition {
   width: number;
   height: number;
   zOrder: number;
+  // Full size view: the card fills the whole dashboard (reuses the fullscreen tile geometry).
+  fullscreen?: boolean;
 }
 
 
@@ -1125,6 +1127,13 @@ const dashboardLayoutSlice = createSlice({
       state.workflowsMonitorCard = null;
     },
 
+    toggleWorkflowsHubFullscreen(state) {
+      if (state.workflowsHub) {
+        state.workflowsHub.fullscreen = !state.workflowsHub.fullscreen;
+        state.workflowsHub.zOrder = state.nextZOrder++;
+      }
+    },
+
     clearWorkflowsAppTarget(state) {
       state.workflowsAppTarget = null;
     },
@@ -1823,6 +1832,7 @@ export const {
   closeWorkflowsHub,
   openWorkflowsApp,
   closeWorkflowsApp,
+  toggleWorkflowsHubFullscreen,
   clearWorkflowsAppTarget,
   openWorkflowMonitor,
   closeWorkflowMonitor,

From 48ee557cf63f5caad5c52de0ae860f3f22e65017 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 20:31:49 -0700
Subject: [PATCH 136/248] [eric] sidebar: right-click context menu on dashboard
 + app rows (rename/duplicate/delete)

---
 .../src/app/components/Layout/AppShell.tsx    | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 261ca811..e6b730a5 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -8,6 +8,8 @@ import Box from '@mui/material/Box';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -29,6 +31,9 @@ const SEARCH_HOTKEY_LABEL = typeof navigator !== 'undefined' && /Mac|iPod|iPhone
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
 import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import LinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
 // Settings modal lazy-loaded so its 2.3K LOC + Stripe/OAuth helpers don't ship on first paint.
@@ -40,7 +45,7 @@ import { useLastDashboardId } from '@/shared/hooks/useLastDashboardId';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { hasModelConnected as selectHasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { shallowEqual } from 'react-redux';
-import { fetchDashboards, createDashboard, renameDashboard } from '@/shared/state/dashboardsSlice';
+import { fetchDashboards, createDashboard, renameDashboard, deleteDashboard, duplicateDashboard } from '@/shared/state/dashboardsSlice';
 import { Typewriter } from '@/app/components/feedback/Animated';
 import { setPendingFocusAgentId } from '@/shared/state/tempStateSlice';
 import { addBrowserCard, addBrowserTab, cycleBrowserTab, reopenLastClosed, addViewCard, selectFullscreenCardId, setTiledCard, clearTiledCard } from '@/shared/state/dashboardLayoutSlice';
@@ -90,6 +95,7 @@ const AppShell: React.FC = () => {
   const [renameValue, setRenameValue] = useState('');
   // Arc-style delete: the row vanishes at once but the real delete waits behind an Undo toast.
   const [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null);
+  const [rowMenu, setRowMenu] = useState<{ top: number; left: number; kind: 'dashboard' | 'app'; id: string; name: string } | null>(null);
   const pendingDeleteRef = useRef<{ id: string; name: string } | null>(null);
   const deleteTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Arc-style peek: hovering an app row (with intent, not a fly-by) floats a preview beside the sidebar.
@@ -619,6 +625,33 @@ const AppShell: React.FC = () => {
     setRenameValue(currentName);
   };
 
+  // Right-click a sidebar row for the same actions the Dashboards grid offers, Mac-style at the cursor.
+  const openRowMenu = (e: React.MouseEvent, kind: 'dashboard' | 'app', id: string, name: string): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    setRowMenu({ top: e.clientY, left: e.clientX, kind, id, name });
+  };
+  const closeRowMenu = (): void => setRowMenu(null);
+  const rowMenuRename = (): void => {
+    const m = rowMenu;
+    closeRowMenu();
+    if (!m) return;
+    // Defer so the menu's focus trap releases before the inline field autofocuses.
+    setTimeout(() => (m.kind === 'dashboard' ? handleStartDashboardRename(m.id, m.name) : handleStartAppRename(m.id, m.name)), 150);
+  };
+  const rowMenuDelete = (e: React.MouseEvent): void => {
+    const m = rowMenu;
+    closeRowMenu();
+    if (!m) return;
+    if (m.kind === 'dashboard') dispatch(deleteDashboard(m.id));
+    else handleDeleteApp(e, m.id, m.name);
+  };
+  const rowMenuDuplicate = (): void => {
+    const m = rowMenu;
+    closeRowMenu();
+    if (m?.kind === 'dashboard') dispatch(duplicateDashboard(m.id));
+  };
+
   const handleDashboardRenameSubmit = (id: string) => {
     const trimmed = renameValue.trim();
     const previousName = dashboardItems[id]?.name;
@@ -1033,6 +1066,7 @@ const AppShell: React.FC = () => {
                         idx === 0 ? 'dashboard-row-first' : `dashboard-row-${entry.id}`
                       }
                       onClick={() => handleDashboardItemClick(entry.id)}
+                      onContextMenu={(e) => openRowMenu(e, 'dashboard', entry.id, entry.name)}
                       sx={{
                         display: 'flex',
                         alignItems: 'center',
@@ -1173,6 +1207,7 @@ const AppShell: React.FC = () => {
                     <Box
                       key={app.id}
                       onClick={() => { if (!isRenamingApp) navigateToApp(app.id); }}
+                      onContextMenu={(e) => openRowMenu(e, 'app', app.id, appName)}
                       onMouseEnter={(e) => {
                         if (isRenamingApp) return;
                         const top = e.currentTarget.getBoundingClientRect().top;
@@ -1499,6 +1534,30 @@ const AppShell: React.FC = () => {
         </Box>
       )}
 
+      {/* Right-click a dashboard or app row: the same actions as the Dashboards grid, at the cursor. */}
+      <Menu
+        anchorReference="anchorPosition"
+        anchorPosition={rowMenu ? { top: rowMenu.top, left: rowMenu.left } : undefined}
+        open={!!rowMenu}
+        onClose={closeRowMenu}
+        slotProps={{ paper: { sx: { bgcolor: c.bg.surface, border: `1px solid ${c.border.subtle}`, boxShadow: c.shadow.lg, minWidth: 160 } } }}
+      >
+        <MenuItem onClick={rowMenuRename}>
+          <ListItemIcon><EditIcon sx={{ fontSize: 18 }} /></ListItemIcon>
+          <ListItemText>Rename</ListItemText>
+        </MenuItem>
+        {rowMenu?.kind === 'dashboard' && (
+          <MenuItem onClick={rowMenuDuplicate}>
+            <ListItemIcon><ContentCopyIcon sx={{ fontSize: 18 }} /></ListItemIcon>
+            <ListItemText>Duplicate</ListItemText>
+          </MenuItem>
+        )}
+        <MenuItem onClick={rowMenuDelete} sx={{ color: c.status.error }}>
+          <ListItemIcon><DeleteOutlineIcon sx={{ fontSize: 18, color: c.status.error }} /></ListItemIcon>
+          <ListItemText>Delete</ListItemText>
+        </MenuItem>
+      </Menu>
+
       {/* Arc-style Undo for a just-deleted app. Open while the delete is pending; our own 6s timer commits it and closes this. */}
       <Snackbar
         open={!!pendingDelete}

From 8a482ce0295af3d5668415429e2c8b604b0921c0 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 22:07:24 -0700
Subject: [PATCH 137/248] [eric] canvas: drag a lone card into the screen edge
 to snap-tile it (halves/quarters/fullscreen)

---
 .../Dashboard/canvas/DashboardCanvas.tsx      |  5 ++
 .../Dashboard/canvas/SnapZonePreview.tsx      | 43 ++++++++++++++++
 .../hooks/interaction/useCardDrag.ts          | 49 +++++++++++++++++--
 .../hooks/state/useDashboardController.ts     |  3 +-
 4 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 7eb4b036..5d195732 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -7,6 +7,7 @@ import TetherLayer from './TetherLayer';
 import DashboardCardLayer from './DashboardCardLayer';
 import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
+import SnapZonePreview from './SnapZonePreview';
 import '../desktop/desktop.css';
 import DesktopDock from '../desktop/DesktopDock';
 import MinimizedStack from '../desktop/MinimizedStack';
@@ -61,6 +62,7 @@ interface DashboardCanvasProps {
   focusedCardId: string | null;
   pendingFocusNoteId: string | null;
   multiDragDelta: { dx: number; dy: number } | null;
+  snapZone: string | null;
   shakeDirection: Direction | null;
   neighborDirections: NeighborDirections;
   toolbarOpen: boolean;
@@ -124,6 +126,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   focusedCardId,
   pendingFocusNoteId,
   multiDragDelta,
+  snapZone,
   shakeDirection,
   neighborDirections,
   toolbarOpen,
@@ -265,6 +268,8 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         />
       )}
 
+      <SnapZonePreview zone={snapZone} />
+
       {!anyFullscreen && (
         <DesktopDock
           sessions={sessions}
diff --git a/frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx b/frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx
new file mode 100644
index 00000000..f0980e75
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { TILE_ZONES } from '@/app/pages/Dashboard/cards/tileZones';
+
+// A translucent ghost of where a dragged card will land once released against the edge. Screen-space
+// (fixed), so it lives outside the pan/zoom layer and never counter-transforms. 'fullscreen' fills
+// the whole viewport; every other zone is a fraction of it.
+const GAP = 8;
+
+interface SnapZonePreviewProps {
+  zone: string | null;
+}
+
+const SnapZonePreview: React.FC<SnapZonePreviewProps> = ({ zone }) => {
+  const c = useClaudeTokens();
+  if (!zone) return null;
+
+  const vp = document.querySelector('[data-canvas-viewport]');
+  const rect = vp ? vp.getBoundingClientRect() : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
+  const frac = zone === 'fullscreen' ? { x: 0, y: 0, w: 1, h: 1 } : TILE_ZONES[zone];
+  if (!frac) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left: rect.left + frac.x * rect.width + GAP,
+        top: rect.top + frac.y * rect.height + GAP,
+        width: frac.w * rect.width - GAP * 2,
+        height: frac.h * rect.height - GAP * 2,
+        borderRadius: 14,
+        background: `${c.accent.primary}22`,
+        border: `2px solid ${c.accent.primary}`,
+        boxShadow: `0 0 0 100vmax ${c.accent.primary}0A`,
+        pointerEvents: 'none',
+        zIndex: 999985,
+        transition: 'left 0.12s ease, top 0.12s ease, width 0.12s ease, height 0.12s ease',
+      }}
+    />
+  );
+};
+
+export default SnapZonePreview;
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts
index c01850e7..1c609173 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
 import { report } from '@/shared/serviceClient';
 import { useAppDispatch } from '@/shared/hooks';
-import { moveCards } from '@/shared/state/dashboardLayoutSlice';
+import { moveCards, setTiledCard } from '@/shared/state/dashboardLayoutSlice';
 import type { CardType, useDashboardSelection } from '../state/useDashboardSelection';
 import type { CanvasActions } from './useCanvasControls';
 
@@ -15,6 +15,25 @@ interface UseCardDragArgs {
 
 const EDGE_ZONE = 60;
 const EDGE_MAX_SPEED = 8;
+// Jam a dragged card into the very edge (inside the pan zone) to snap-tile it. Grazing the 60px
+// edge still pans the infinite canvas; only the inner 24px band arms a snap and pauses the pan, so
+// the two never fight. Top = fullscreen (macOS drag-to-top), sides = halves, corners = quarters.
+const SNAP_BAND = 24;
+
+function snapZoneFor(mx: number, my: number, rect: DOMRect): string | null {
+  const nearL = mx <= rect.left + SNAP_BAND;
+  const nearR = mx >= rect.right - SNAP_BAND;
+  const nearT = my <= rect.top + SNAP_BAND;
+  const nearB = my >= rect.bottom - SNAP_BAND;
+  if (nearT && nearL) return 'tl';
+  if (nearT && nearR) return 'tr';
+  if (nearB && nearL) return 'bl';
+  if (nearB && nearR) return 'br';
+  if (nearT) return 'fullscreen';
+  if (nearL) return 'left';
+  if (nearR) return 'right';
+  return null;  // bottom-center is left alone: the composer + dock live there.
+}
 
 // Clamped: an infinite canvas lets the cursor sit arbitrarily far outside the viewport, where an unclamped ramp would scale pan speed with distance instead of saturating.
 function axisIntensity(pos: number, lo: number, hi: number): number {
@@ -32,6 +51,10 @@ export function useCardDrag({
 
   const [multiDragDelta, setMultiDragDelta] = useState<{ dx: number; dy: number } | null>(null);
   const [liveDragInfo, setLiveDragInfo] = useState<{ cardId: string; dx: number; dy: number } | null>(null);
+  const [snapZone, setSnapZone] = useState<string | null>(null);
+  const snapZoneRef = useRef<string | null>(null);
+  // Snap only a lone card: dragging one of several selected cards to the edge shouldn't tile just it.
+  const snapEligibleRef = useRef(true);
   const activeDragCardRef = useRef<string | null>(null);
   const isMultiDragRef = useRef(false);
 
@@ -57,7 +80,8 @@ export function useCardDrag({
     const dx = EDGE_MAX_SPEED * axisIntensity(mx, rect.left, rect.right);
     const dy = EDGE_MAX_SPEED * axisIntensity(my, rect.top, rect.bottom);
 
-    if (dx !== 0 || dy !== 0) {
+    // Snap armed = the card is about to tile at this edge, so freeze the canvas instead of panning.
+    if ((dx !== 0 || dy !== 0) && !snapZoneRef.current) {
       // Live-only write (no React commit per frame); clearDrag commits once when the drag ends.
       canvasActions.panBy(dx, dy);
     }
@@ -67,6 +91,7 @@ export function useCardDrag({
 
   const handleCardDragStart = useCallback((id: string, type: CardType) => {
     activeDragCardRef.current = id;
+    snapEligibleRef.current = selection.selectedArray().filter((s) => s.id !== id).length === 0;
     if (selection.isSelected(id)) {
       isMultiDragRef.current = true;
     } else {
@@ -80,6 +105,16 @@ export function useCardDrag({
     if (mouseX !== undefined && mouseY !== undefined) {
       lastMousePosRef.current = { x: mouseX, y: mouseY };
     }
+    // Arm/clear the snap target from the live cursor. Single-card drags only: snapping one card of a
+    // multi-selection while the rest move is incoherent.
+    const vp = viewportRef.current;
+    const nextSnap = (vp && snapEligibleRef.current && mouseX !== undefined && mouseY !== undefined)
+      ? snapZoneFor(mouseX, mouseY, vp.getBoundingClientRect())
+      : null;
+    if (nextSnap !== snapZoneRef.current) {
+      snapZoneRef.current = nextSnap;
+      setSnapZone(nextSnap);
+    }
     // Arm the webview shield on the first real MOVE, not on pointerdown: a plain click also arms the drag machinery, and shielding then made the click-to-focus camera fit skip (it saw a "drag in progress"), so focusing a card took two clicks. On a real drag the shield still goes up before the pointer travels, so the webview neutralization + no-nudge + release-over-webview fixes all hold. Idempotent add.
     document.body.classList.add('dashboard-marquee-active');
     // Start edge panning only once actual dragging begins; a live frame handle means the loop is already running.
@@ -99,6 +134,8 @@ export function useCardDrag({
     // Reconcile React with whatever edge-pan wrote live during the drag.
     canvasActions.commit();
     activeDragCardRef.current = null;
+    snapZoneRef.current = null;
+    setSnapZone(null);
     document.body.classList.remove('dashboard-marquee-active');
     isMultiDragRef.current = false;
     setMultiDragDelta(null);
@@ -107,7 +144,12 @@ export function useCardDrag({
 
   const handleCardDragEnd = useCallback((dx: number, dy: number, didDrag: boolean) => {
     if (didDrag) report('dashboard', 'card_dragged');
-    if (isMultiDragRef.current && didDrag) {
+    const snap = snapZoneRef.current;
+    const activeId = activeDragCardRef.current;
+    if (snap && didDrag && activeId) {
+      // Released against the edge: tile the card there instead of leaving it at the drop position.
+      dispatch(setTiledCard({ cardId: activeId, zone: snap }));
+    } else if (isMultiDragRef.current && didDrag) {
       const items = selection.selectedArray()
         .filter((s) => s.id !== activeDragCardRef.current);
       if (items.length > 0) {
@@ -134,6 +176,7 @@ export function useCardDrag({
   return {
     multiDragDelta,
     liveDragInfo,
+    snapZone,
     handleCardDragStart,
     handleCardDragMove,
     handleCardDragEnd,
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index 7a06e8ba..7a1db232 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -103,6 +103,7 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
   const {
     multiDragDelta,
     liveDragInfo,
+    snapZone,
     handleCardDragStart,
     handleCardDragMove,
     handleCardDragEnd,
@@ -332,7 +333,7 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
     cards, viewCards, browserCards, keepAliveBrowserCards, notes, outputs, glowingAgentCards,
     workflowCards, workflowsHub,
     expandedSessionIds, tethers, highlightedCardId, autoFocusSessionId,
-    focusedCardId, pendingFocusNoteId, multiDragDelta, shakeDirection,
+    focusedCardId, pendingFocusNoteId, multiDragDelta, snapZone, shakeDirection,
     neighborDirections, toolbarOpen, searchPaletteOpen, newAgentBounce,
     toolbarRef, spawnOriginsRef, revealSpawnedRef, measuredHeightsRef, getCanvasState,
     toolbarPrefill,

From 02ba9db33ba93f581b658fbfbbcf79a7ea57909d Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 22:25:48 -0700
Subject: [PATCH 138/248] [eric] canvas: revert drag-to-edge snap
 (card-disappear bug on the real drag)

---
 .../Dashboard/canvas/DashboardCanvas.tsx      |  5 --
 .../Dashboard/canvas/SnapZonePreview.tsx      | 43 ----------------
 .../hooks/interaction/useCardDrag.ts          | 49 ++-----------------
 .../hooks/state/useDashboardController.ts     |  3 +-
 4 files changed, 4 insertions(+), 96 deletions(-)
 delete mode 100644 frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 5d195732..7eb4b036 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -7,7 +7,6 @@ import TetherLayer from './TetherLayer';
 import DashboardCardLayer from './DashboardCardLayer';
 import DashboardOverlays from './DashboardOverlays';
 import DashboardEmptyState from './DashboardEmptyState';
-import SnapZonePreview from './SnapZonePreview';
 import '../desktop/desktop.css';
 import DesktopDock from '../desktop/DesktopDock';
 import MinimizedStack from '../desktop/MinimizedStack';
@@ -62,7 +61,6 @@ interface DashboardCanvasProps {
   focusedCardId: string | null;
   pendingFocusNoteId: string | null;
   multiDragDelta: { dx: number; dy: number } | null;
-  snapZone: string | null;
   shakeDirection: Direction | null;
   neighborDirections: NeighborDirections;
   toolbarOpen: boolean;
@@ -126,7 +124,6 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   focusedCardId,
   pendingFocusNoteId,
   multiDragDelta,
-  snapZone,
   shakeDirection,
   neighborDirections,
   toolbarOpen,
@@ -268,8 +265,6 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         />
       )}
 
-      <SnapZonePreview zone={snapZone} />
-
       {!anyFullscreen && (
         <DesktopDock
           sessions={sessions}
diff --git a/frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx b/frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx
deleted file mode 100644
index f0980e75..00000000
--- a/frontend/src/app/pages/Dashboard/canvas/SnapZonePreview.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { TILE_ZONES } from '@/app/pages/Dashboard/cards/tileZones';
-
-// A translucent ghost of where a dragged card will land once released against the edge. Screen-space
-// (fixed), so it lives outside the pan/zoom layer and never counter-transforms. 'fullscreen' fills
-// the whole viewport; every other zone is a fraction of it.
-const GAP = 8;
-
-interface SnapZonePreviewProps {
-  zone: string | null;
-}
-
-const SnapZonePreview: React.FC<SnapZonePreviewProps> = ({ zone }) => {
-  const c = useClaudeTokens();
-  if (!zone) return null;
-
-  const vp = document.querySelector('[data-canvas-viewport]');
-  const rect = vp ? vp.getBoundingClientRect() : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
-  const frac = zone === 'fullscreen' ? { x: 0, y: 0, w: 1, h: 1 } : TILE_ZONES[zone];
-  if (!frac) return null;
-
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        left: rect.left + frac.x * rect.width + GAP,
-        top: rect.top + frac.y * rect.height + GAP,
-        width: frac.w * rect.width - GAP * 2,
-        height: frac.h * rect.height - GAP * 2,
-        borderRadius: 14,
-        background: `${c.accent.primary}22`,
-        border: `2px solid ${c.accent.primary}`,
-        boxShadow: `0 0 0 100vmax ${c.accent.primary}0A`,
-        pointerEvents: 'none',
-        zIndex: 999985,
-        transition: 'left 0.12s ease, top 0.12s ease, width 0.12s ease, height 0.12s ease',
-      }}
-    />
-  );
-};
-
-export default SnapZonePreview;
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts
index 1c609173..c01850e7 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useCardDrag.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
 import { report } from '@/shared/serviceClient';
 import { useAppDispatch } from '@/shared/hooks';
-import { moveCards, setTiledCard } from '@/shared/state/dashboardLayoutSlice';
+import { moveCards } from '@/shared/state/dashboardLayoutSlice';
 import type { CardType, useDashboardSelection } from '../state/useDashboardSelection';
 import type { CanvasActions } from './useCanvasControls';
 
@@ -15,25 +15,6 @@ interface UseCardDragArgs {
 
 const EDGE_ZONE = 60;
 const EDGE_MAX_SPEED = 8;
-// Jam a dragged card into the very edge (inside the pan zone) to snap-tile it. Grazing the 60px
-// edge still pans the infinite canvas; only the inner 24px band arms a snap and pauses the pan, so
-// the two never fight. Top = fullscreen (macOS drag-to-top), sides = halves, corners = quarters.
-const SNAP_BAND = 24;
-
-function snapZoneFor(mx: number, my: number, rect: DOMRect): string | null {
-  const nearL = mx <= rect.left + SNAP_BAND;
-  const nearR = mx >= rect.right - SNAP_BAND;
-  const nearT = my <= rect.top + SNAP_BAND;
-  const nearB = my >= rect.bottom - SNAP_BAND;
-  if (nearT && nearL) return 'tl';
-  if (nearT && nearR) return 'tr';
-  if (nearB && nearL) return 'bl';
-  if (nearB && nearR) return 'br';
-  if (nearT) return 'fullscreen';
-  if (nearL) return 'left';
-  if (nearR) return 'right';
-  return null;  // bottom-center is left alone: the composer + dock live there.
-}
 
 // Clamped: an infinite canvas lets the cursor sit arbitrarily far outside the viewport, where an unclamped ramp would scale pan speed with distance instead of saturating.
 function axisIntensity(pos: number, lo: number, hi: number): number {
@@ -51,10 +32,6 @@ export function useCardDrag({
 
   const [multiDragDelta, setMultiDragDelta] = useState<{ dx: number; dy: number } | null>(null);
   const [liveDragInfo, setLiveDragInfo] = useState<{ cardId: string; dx: number; dy: number } | null>(null);
-  const [snapZone, setSnapZone] = useState<string | null>(null);
-  const snapZoneRef = useRef<string | null>(null);
-  // Snap only a lone card: dragging one of several selected cards to the edge shouldn't tile just it.
-  const snapEligibleRef = useRef(true);
   const activeDragCardRef = useRef<string | null>(null);
   const isMultiDragRef = useRef(false);
 
@@ -80,8 +57,7 @@ export function useCardDrag({
     const dx = EDGE_MAX_SPEED * axisIntensity(mx, rect.left, rect.right);
     const dy = EDGE_MAX_SPEED * axisIntensity(my, rect.top, rect.bottom);
 
-    // Snap armed = the card is about to tile at this edge, so freeze the canvas instead of panning.
-    if ((dx !== 0 || dy !== 0) && !snapZoneRef.current) {
+    if (dx !== 0 || dy !== 0) {
       // Live-only write (no React commit per frame); clearDrag commits once when the drag ends.
       canvasActions.panBy(dx, dy);
     }
@@ -91,7 +67,6 @@ export function useCardDrag({
 
   const handleCardDragStart = useCallback((id: string, type: CardType) => {
     activeDragCardRef.current = id;
-    snapEligibleRef.current = selection.selectedArray().filter((s) => s.id !== id).length === 0;
     if (selection.isSelected(id)) {
       isMultiDragRef.current = true;
     } else {
@@ -105,16 +80,6 @@ export function useCardDrag({
     if (mouseX !== undefined && mouseY !== undefined) {
       lastMousePosRef.current = { x: mouseX, y: mouseY };
     }
-    // Arm/clear the snap target from the live cursor. Single-card drags only: snapping one card of a
-    // multi-selection while the rest move is incoherent.
-    const vp = viewportRef.current;
-    const nextSnap = (vp && snapEligibleRef.current && mouseX !== undefined && mouseY !== undefined)
-      ? snapZoneFor(mouseX, mouseY, vp.getBoundingClientRect())
-      : null;
-    if (nextSnap !== snapZoneRef.current) {
-      snapZoneRef.current = nextSnap;
-      setSnapZone(nextSnap);
-    }
     // Arm the webview shield on the first real MOVE, not on pointerdown: a plain click also arms the drag machinery, and shielding then made the click-to-focus camera fit skip (it saw a "drag in progress"), so focusing a card took two clicks. On a real drag the shield still goes up before the pointer travels, so the webview neutralization + no-nudge + release-over-webview fixes all hold. Idempotent add.
     document.body.classList.add('dashboard-marquee-active');
     // Start edge panning only once actual dragging begins; a live frame handle means the loop is already running.
@@ -134,8 +99,6 @@ export function useCardDrag({
     // Reconcile React with whatever edge-pan wrote live during the drag.
     canvasActions.commit();
     activeDragCardRef.current = null;
-    snapZoneRef.current = null;
-    setSnapZone(null);
     document.body.classList.remove('dashboard-marquee-active');
     isMultiDragRef.current = false;
     setMultiDragDelta(null);
@@ -144,12 +107,7 @@ export function useCardDrag({
 
   const handleCardDragEnd = useCallback((dx: number, dy: number, didDrag: boolean) => {
     if (didDrag) report('dashboard', 'card_dragged');
-    const snap = snapZoneRef.current;
-    const activeId = activeDragCardRef.current;
-    if (snap && didDrag && activeId) {
-      // Released against the edge: tile the card there instead of leaving it at the drop position.
-      dispatch(setTiledCard({ cardId: activeId, zone: snap }));
-    } else if (isMultiDragRef.current && didDrag) {
+    if (isMultiDragRef.current && didDrag) {
       const items = selection.selectedArray()
         .filter((s) => s.id !== activeDragCardRef.current);
       if (items.length > 0) {
@@ -176,7 +134,6 @@ export function useCardDrag({
   return {
     multiDragDelta,
     liveDragInfo,
-    snapZone,
     handleCardDragStart,
     handleCardDragMove,
     handleCardDragEnd,
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index 7a1db232..7a06e8ba 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -103,7 +103,6 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
   const {
     multiDragDelta,
     liveDragInfo,
-    snapZone,
     handleCardDragStart,
     handleCardDragMove,
     handleCardDragEnd,
@@ -333,7 +332,7 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
     cards, viewCards, browserCards, keepAliveBrowserCards, notes, outputs, glowingAgentCards,
     workflowCards, workflowsHub,
     expandedSessionIds, tethers, highlightedCardId, autoFocusSessionId,
-    focusedCardId, pendingFocusNoteId, multiDragDelta, snapZone, shakeDirection,
+    focusedCardId, pendingFocusNoteId, multiDragDelta, shakeDirection,
     neighborDirections, toolbarOpen, searchPaletteOpen, newAgentBounce,
     toolbarRef, spawnOriginsRef, revealSpawnedRef, measuredHeightsRef, getCanvasState,
     toolbarPrefill,

From 70545a3fa35e1d2aa6aa48a82fd968d7685cbd5a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 22:33:24 -0700
Subject: [PATCH 139/248] [eric] electron: native right-click menu for the app
 renderer (copy/cut/paste/select-all, copy-link, spelling)

---
 electron/main.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/electron/main.js b/electron/main.js
index 8413da4c..f0116c14 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -2187,6 +2187,51 @@ function buildBrowserContextMenu(contents, params, webContentsId) {
   } catch (_) {}
 }
 
+// The app's OWN renderer (chat, outputs, sidebar) gets no native menu from Electron by default, so
+// right-clicking text used to do nothing. This is the browser menu minus the nav items that mean
+// nothing inside a single-page app: spelling, copy-link, and the edit/copy roles.
+function buildAppContextMenu(contents, params) {
+  const template = [];
+  const sep = () => template.push({ type: 'separator' });
+
+  if (params.misspelledWord) {
+    const suggestions = params.dictionarySuggestions || [];
+    if (suggestions.length) {
+      for (const s of suggestions) template.push({ label: s, click: () => { try { contents.replaceMisspelling(s); } catch (_) {} } });
+    } else {
+      template.push({ label: 'No spelling suggestions', enabled: false });
+    }
+    template.push({ label: 'Add to Dictionary', click: () => { try { contents.session.addWordToSpellCheckerDictionary(params.misspelledWord); } catch (_) {} } });
+    sep();
+  }
+
+  if (params.linkURL) {
+    template.push({ label: 'Copy Link', click: () => clipboard.writeText(params.linkURL) });
+    sep();
+  }
+
+  const flags = params.editFlags || {};
+  if (params.isEditable) {
+    template.push({ role: 'cut', enabled: flags.canCut !== false });
+    template.push({ role: 'copy', enabled: flags.canCopy !== false });
+    template.push({ role: 'paste', enabled: flags.canPaste !== false });
+    template.push({ role: 'selectAll' });
+  } else if (params.selectionText) {
+    template.push({ role: 'copy' });
+  }
+
+  if (isDev) {
+    if (template.length) sep();
+    template.push({ label: 'Inspect Element', click: () => { try { contents.inspectElement(params.x, params.y); } catch (_) {} } });
+  }
+
+  // Nothing worth showing (empty right-click on non-dev chrome): let the OS do nothing.
+  if (!template.length) return;
+  try {
+    Menu.buildFromTemplate(template).popup({ window: mainWindow || undefined });
+  } catch (_) {}
+}
+
 app.on('web-contents-created', (_event, contents) => {
   // Block Cmd+W from closing the main window, whether the window chrome or one of
   // its embedded webviews has focus. OAuth popups (their own 'window' contents,
@@ -2196,6 +2241,11 @@ app.on('web-contents-created', (_event, contents) => {
     contents.on('before-input-event', swallowCloseWindowShortcut);
     contents.on('before-input-event', routeReloadShortcut);
   }
+  // The main app window (created while this flag is set) gets a text-focused native menu; OAuth
+  // popups are 'window' contents created with the flag OFF, so they keep the OS default.
+  if (isCreatingMainWindow) {
+    contents.on('context-menu', (_e, params) => buildAppContextMenu(contents, params));
+  }
   if (contents.getType() === 'webview') {
     const wcId = contents.id;
     contents.on('before-input-event', (event, input) => routeBrowserShortcut(event, input, wcId));

From 7baba619cf9073a7addaf8b38cf2ab2aab7c2fbf Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 23:06:58 -0700
Subject: [PATCH 140/248] [eric] voice: local whisper.cpp dictation engine
 (warm whisper-server + transcribe/inject/hotkey IPC)

---
 electron/main.js                 |  42 +++++++++++-
 electron/preload.js              |  10 +++
 electron/voice/textInjector.js   |  39 +++++++++++
 electron/voice/whisperService.js | 112 +++++++++++++++++++++++++++++++
 4 files changed, 202 insertions(+), 1 deletion(-)
 create mode 100644 electron/voice/textInjector.js
 create mode 100644 electron/voice/whisperService.js

diff --git a/electron/main.js b/electron/main.js
index f0116c14..9bb6bc8a 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,4 +1,6 @@
-const { app, components, BrowserWindow, ipcMain, shell, session, dialog, crashReporter, powerMonitor, Menu, clipboard } = require('electron');
+const { app, components, BrowserWindow, ipcMain, shell, session, dialog, crashReporter, powerMonitor, Menu, clipboard, globalShortcut } = require('electron');
+const whisperService = require('./voice/whisperService');
+const { injectText } = require('./voice/textInjector');
 
 // Browser cards live in their own persistent partition so cookies/localStorage/IndexedDB survive reload + quit (Discord etc. stay logged in) and site data stays isolated from the app's defaultSession. The "clear browsing data" wipe nukes only this partition. MUST match BROWSER_PARTITION in frontend BrowserCard.tsx.
 const BROWSER_PARTITION = 'persist:openswarm-browser';
@@ -1786,6 +1788,14 @@ app.whenReady().then(async () => {
   // Off-window mouse-release crash dodge (macOS). Safe to call before windows exist.
   installMacMouseClamp();
 
+  // Voice dictation toggle: press anywhere (even in another app) to start/stop dictating. globalShortcut
+  // can't see key-up, so this is a press-to-toggle, not hold-to-talk; the renderer owns the record state.
+  try {
+    globalShortcut.register('CommandOrControl+Shift+D', () => {
+      if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:toggle');
+    });
+  } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+
   // PASSKEY SPIKE (macOS only): turn on the Secure-Enclave/Touch ID WebAuthn authenticator that Electron 42 added. Without this, isUserVerifyingPlatformAuthenticatorAvailable() is hardwired false (why the old reject-shim existed). keychainAccessGroup MUST match the keychain-access-groups entitlement (Y26NUZH4NG.<bundle>.webauthn) or this throws. Windows has no equivalent, so the reject-shim still runs there.
   if (process.platform === 'darwin' && typeof app.configureWebAuthn === 'function') {
     try {
@@ -2773,6 +2783,8 @@ app.on('before-quit', async (event) => {
 
 app.on('will-quit', () => {
   if (!isDev) killBackend();
+  try { globalShortcut.unregisterAll(); } catch (_) {}
+  try { whisperService.stopServer(); } catch (_) {}
 });
 
 app.on('activate', () => {
@@ -2857,6 +2869,34 @@ ipcMain.handle = (channel, handler) => {
 };
 
 ipcMain.handle('get-backend-port', () => backendPort);
+
+// ---- Voice dictation (local whisper.cpp) ----
+function voiceResourceDir() {
+  return getResourcePath('whisper');
+}
+function voiceUserDataDir() {
+  try { return app.getPath('userData'); } catch (_) { return __dirname; }
+}
+// Renderer records the mic, encodes a 16kHz-mono WAV, and hands us the bytes; we run them through the
+// warm whisper server and return text. Fail-soft: any error becomes { ok:false } so the pill can show
+// a clean "couldn't hear that" instead of the app throwing.
+ipcMain.handle('voice:transcribe', async (_e, wavArrayBuffer) => {
+  try {
+    const buf = Buffer.from(wavArrayBuffer);
+    const text = await whisperService.transcribe(voiceResourceDir(), voiceUserDataDir(), buf);
+    return { ok: true, text };
+  } catch (err) {
+    return { ok: false, error: String(err && err.message ? err.message : err) };
+  }
+});
+// Warm the model ahead of the first phrase so dictation feels instant, not "1s to boot then type".
+ipcMain.handle('voice:warmup', async () => {
+  try { await whisperService.ensureServer(voiceResourceDir(), voiceUserDataDir()); return { ok: true }; } catch (err) { return { ok: false, error: String(err && err.message ? err.message : err) }; }
+});
+// Paste the text into the frontmost app (dictate-anywhere). Returns whether the OS paste actually fired.
+ipcMain.handle('voice:inject', async (_e, text) => {
+  try { const pasted = await injectText(String(text || '')); return { ok: true, pasted }; } catch (err) { return { ok: false, error: String(err && err.message ? err.message : err) }; }
+});
 // Sync mirrors so preload.js can expose window.openswarm synchronously (no await), closing the race where React renders before the async exposure resolves and window.openswarm is briefly undefined. backendPort is assigned in app.whenReady before any BrowserWindow is created, so it is always set by the time preload runs.
 ipcMain.on('get-backend-port-sync', (event) => { event.returnValue = backendPort; });
 ipcMain.on('get-webview-preload-path-sync', (event) => {
diff --git a/electron/preload.js b/electron/preload.js
index 7e814bee..c21fc629 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -62,6 +62,16 @@ contextBridge.exposeInMainWorld('openswarm', {
   // Clears cookies/cache/localStorage for the browser-card partition only (never the app's defaultSession). Logs you out of sites opened in browser cards.
   clearBrowserData: () => ipcRenderer.invoke('browser:clear-data'),
   connectSlack: () => ipcRenderer.invoke('connect-slack'),
+  // Voice dictation (local whisper.cpp). transcribe takes a 16kHz-mono WAV ArrayBuffer; inject pastes
+  // text into the frontmost app; warmup pre-loads the model; onVoiceToggle fires on the global hotkey.
+  voiceWarmup: () => ipcRenderer.invoke('voice:warmup'),
+  voiceTranscribe: (wavArrayBuffer) => ipcRenderer.invoke('voice:transcribe', wavArrayBuffer),
+  voiceInject: (text) => ipcRenderer.invoke('voice:inject', text),
+  onVoiceToggle: (cb) => {
+    const listener = () => cb();
+    ipcRenderer.on('voice:toggle', listener);
+    return () => ipcRenderer.removeListener('voice:toggle', listener);
+  },
   // Hands a vetted social platform's partition cookies to its session-backed MCP shim (allowlisted domains only, gated again in the main process).
   getPartitionCookies: (domain) => ipcRenderer.invoke('get-partition-cookies', domain),
   // Silently reads the user's own chatgpt.com/claude.ai history offscreen (no card) for onboarding personalization; main owns the injected script + gates the provider.
diff --git a/electron/voice/textInjector.js b/electron/voice/textInjector.js
new file mode 100644
index 00000000..575d73e7
--- /dev/null
+++ b/electron/voice/textInjector.js
@@ -0,0 +1,39 @@
+// Drop transcribed text into whatever app currently has focus, WhisperFlow-style. We can't synthesize
+// raw keystrokes from a sandboxed renderer, so the durable trick is the clipboard: stash the user's
+// existing clipboard, write our text, fire the OS paste chord, then restore the clipboard a beat later
+// so we don't clobber what they had. macOS paste needs Accessibility permission (same wall clicky hits).
+
+const { clipboard } = require('electron');
+const { exec } = require('child_process');
+
+function pasteFrontmost() {
+  return new Promise((resolve) => {
+    if (process.platform === 'darwin') {
+      exec('osascript -e \'tell application "System Events" to keystroke "v" using command down\'', (err) => resolve(!err));
+    } else if (process.platform === 'win32') {
+      // SendWait "^v" = Ctrl+V into the focused control.
+      exec('powershell -NoProfile -Command "Add-Type -AssemblyName System.Windows.Forms; [System.Windows.Forms.SendKeys]::SendWait(\'^v\')"', (err) => resolve(!err));
+    } else {
+      resolve(false);
+    }
+  });
+}
+
+// Write text to the clipboard and paste it into the focused field, then put the old clipboard back so
+// dictation is non-destructive. Returns false if we couldn't fire the paste (e.g. no Accessibility grant).
+async function injectText(text) {
+  if (!text) return false;
+  const previous = clipboard.readText();
+  clipboard.writeText(text);
+  const pasted = await pasteFrontmost();
+  // Restore after the paste has had time to read the clipboard. If the paste failed the text stays on
+  // the clipboard so the user can paste it by hand rather than losing the dictation entirely.
+  if (pasted) {
+    setTimeout(() => {
+      try { if (clipboard.readText() === text) clipboard.writeText(previous); } catch (_) {}
+    }, 400);
+  }
+  return pasted;
+}
+
+module.exports = { injectText };
diff --git a/electron/voice/whisperService.js b/electron/voice/whisperService.js
new file mode 100644
index 00000000..c9f4a452
--- /dev/null
+++ b/electron/voice/whisperService.js
@@ -0,0 +1,112 @@
+// Local speech-to-text via whisper.cpp, kept WARM so a phrase transcribes in ~0.2s instead of the
+// ~16s cold-model-load a fresh CLI pays every time. We spawn `whisper-server` once (model loaded),
+// then POST audio to it per utterance. Same "bundle a binary + manage its lifecycle" shape as the
+// 9router subprocess: dev uses the system whisper.cpp, prod uses the per-arch binary + model we ship.
+
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const MODEL_FILE = 'ggml-base.en.bin';
+
+// Resolve the whisper-server binary. Env override wins (dev convenience), then the bundled per-arch
+// copy, then whatever is on PATH so a dev machine with `brew install whisper-cpp` just works.
+function resolveBinary(resourceDir) {
+  if (process.env.OPENSWARM_WHISPER_BIN && fs.existsSync(process.env.OPENSWARM_WHISPER_BIN)) {
+    return process.env.OPENSWARM_WHISPER_BIN;
+  }
+  const exe = process.platform === 'win32' ? 'whisper-server.exe' : 'whisper-server';
+  const bundled = path.join(resourceDir, exe);
+  if (fs.existsSync(bundled)) return bundled;
+  const brew = process.platform === 'win32' ? null : '/opt/homebrew/bin/whisper-server';
+  if (brew && fs.existsSync(brew)) return brew;
+  return exe; // last resort: hope it is on PATH
+}
+
+// Resolve the model file. Env override, then bundled, then a dev cache under the app's data dir.
+function resolveModel(resourceDir, userDataDir) {
+  if (process.env.OPENSWARM_WHISPER_MODEL && fs.existsSync(process.env.OPENSWARM_WHISPER_MODEL)) {
+    return process.env.OPENSWARM_WHISPER_MODEL;
+  }
+  const bundled = path.join(resourceDir, MODEL_FILE);
+  if (fs.existsSync(bundled)) return bundled;
+  const cached = path.join(userDataDir, 'whisper', MODEL_FILE);
+  if (fs.existsSync(cached)) return cached;
+  return null;
+}
+
+let proc = null;
+let port = 0;
+let readyPromise = null;
+
+function pickPort() {
+  // Fixed-ish high port; whisper-server has no ephemeral-port reporting, so we pick and probe.
+  return 8300 + Math.floor(Math.random() * 400);
+}
+
+async function waitForReady(p, timeoutMs) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    try {
+      const res = await fetch(`http://127.0.0.1:${p}/`, { method: 'GET' });
+      if (res.status) return true; // any HTTP answer means the socket is serving
+    } catch (_) { /* not up yet */ }
+    await new Promise((r) => setTimeout(r, 150));
+  }
+  return false;
+}
+
+// Boot the warm server once. resourceDir = where a packaged build put the binary+model; userDataDir
+// = app.getPath('userData') for the dev cache. Returns the port, or throws with an actionable reason.
+async function ensureServer(resourceDir, userDataDir) {
+  if (proc && port) return port;
+  if (readyPromise) return readyPromise;
+  readyPromise = (async () => {
+    const bin = resolveBinary(resourceDir);
+    const model = resolveModel(resourceDir, userDataDir);
+    if (!model) {
+      readyPromise = null;
+      throw new Error('no-model'); // caller surfaces a "voice model missing" state, never crashes
+    }
+    const p = pickPort();
+    const child = spawn(bin, ['-m', model, '--port', String(p), '-nt', '--convert'], {
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+    child.on('error', () => { proc = null; port = 0; });
+    child.on('exit', () => { proc = null; port = 0; readyPromise = null; });
+    const ok = await waitForReady(p, 20000);
+    if (!ok) {
+      try { child.kill(); } catch (_) {}
+      readyPromise = null;
+      throw new Error('server-timeout');
+    }
+    proc = child;
+    port = p;
+    return p;
+  })();
+  return readyPromise;
+}
+
+// Transcribe a 16kHz-mono WAV buffer to text. The renderer records + encodes the WAV so the audio
+// never crosses a CORS boundary; we POST from the main process where there is none.
+async function transcribe(resourceDir, userDataDir, wavBuffer) {
+  const p = await ensureServer(resourceDir, userDataDir);
+  const form = new FormData();
+  form.append('file', new Blob([wavBuffer], { type: 'audio/wav' }), 'audio.wav');
+  form.append('response_format', 'text');
+  const res = await fetch(`http://127.0.0.1:${p}/inference`, { method: 'POST', body: form });
+  if (!res.ok) throw new Error(`whisper-http-${res.status}`);
+  const text = (await res.text()).trim();
+  return text;
+}
+
+function stopServer() {
+  if (proc) {
+    try { proc.kill(); } catch (_) {}
+  }
+  proc = null;
+  port = 0;
+  readyPromise = null;
+}
+
+module.exports = { ensureServer, transcribe, stopServer, resolveBinary, resolveModel };

From d5f0887e0eeab52053783368572f148e46022671 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 23:11:33 -0700
Subject: [PATCH 141/248] [eric] voice: renderer dictation (mic capture, 16kHz
 wav encode, help-pill mic + hotkey)

---
 .../app/pages/Dashboard/desktop/HelpPill.tsx  |  27 +++--
 .../Dashboard/desktop/useVoiceDictation.ts    | 100 ++++++++++++++++++
 frontend/src/shared/voice/encodeWav.ts        |  38 +++++++
 frontend/src/types/electron.d.ts              |   4 +
 4 files changed, 163 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/useVoiceDictation.ts
 create mode 100644 frontend/src/shared/voice/encodeWav.ts

diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index eba61551..ea7e1c82 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -2,15 +2,22 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
+import CircularProgress from '@mui/material/CircularProgress';
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
+import MicIcon from '@mui/icons-material/Mic';
 import { useAppDispatch } from '@/shared/hooks';
 import { addBrowserCard } from '@/shared/state/dashboardLayoutSlice';
+import { useVoiceDictation } from './useVoiceDictation';
 
 const HELP_URL = 'https://openswarm.com';
 
-/** Top-right desktop help pill: opens the docs site in an in-app browser card. */
+/** Top-right desktop pill: Help opens the docs; the mic dictates (local whisper) into the focused field. */
 function HelpPill(): React.ReactElement {
   const dispatch = useAppDispatch();
+  const { state, toggle } = useVoiceDictation();
+  const recording = state === 'recording';
+  const transcribing = state === 'transcribing';
+
   return (
     <Box
       sx={{
@@ -21,21 +28,29 @@ function HelpPill(): React.ReactElement {
         pl: 1.5,
         pr: 1,
         borderRadius: 999,
-        background: 'rgba(22,12,34,0.66)',
+        background: recording ? 'rgba(150,30,40,0.72)' : 'rgba(22,12,34,0.66)',
         backdropFilter: 'blur(20px) saturate(160%)',
         WebkitBackdropFilter: 'blur(20px) saturate(160%)',
         boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
         cursor: 'pointer',
         userSelect: 'none',
+        transition: 'background 0.2s ease',
       }}
       onClick={() => dispatch(addBrowserCard({ url: HELP_URL }))}
     >
       <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
-        Help
+        {recording ? 'Listening' : transcribing ? 'Transcribing' : 'Help'}
       </Typography>
-      <Tooltip title="Voice help (coming soon)" placement="bottom" arrow>
-        <Box sx={{ display: 'flex', alignItems: 'center', color: 'rgba(255,255,255,0.45)' }} onClick={(e) => e.stopPropagation()}>
-          <MicNoneOutlinedIcon sx={{ fontSize: 15 }} />
+      <Tooltip title={recording ? 'Stop dictation' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
+        <Box
+          sx={{ display: 'flex', alignItems: 'center', color: recording ? '#fff' : 'rgba(255,255,255,0.55)' }}
+          onClick={(e) => { e.stopPropagation(); if (!transcribing) toggle(); }}
+        >
+          {transcribing
+            ? <CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} />
+            : recording
+              ? <MicIcon sx={{ fontSize: 16 }} />
+              : <MicNoneOutlinedIcon sx={{ fontSize: 15 }} />}
         </Box>
       </Tooltip>
     </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/useVoiceDictation.ts b/frontend/src/app/pages/Dashboard/desktop/useVoiceDictation.ts
new file mode 100644
index 00000000..fc68cbea
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/useVoiceDictation.ts
@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { encodeWav, VOICE_SAMPLE_RATE } from '@/shared/voice/encodeWav';
+
+export type VoiceState = 'idle' | 'recording' | 'transcribing';
+
+// WhisperFlow-style push-to-dictate: toggle recording (global hotkey or the pill), speak, and the
+// transcribed text is pasted into whatever field has focus. Capture is 16kHz mono PCM so it feeds
+// whisper.cpp with no server-side resample. The recording path can only be proven with a real mic;
+// the encode -> transcribe -> inject half is exercised by the encoder round-trip test.
+interface Recorder {
+  ctx: AudioContext;
+  stream: MediaStream;
+  node: ScriptProcessorNode;
+  source: MediaStreamAudioSourceNode;
+  chunks: Float32Array[];
+}
+
+export function useVoiceDictation() {
+  const [state, setState] = useState<VoiceState>('idle');
+  const [lastText, setLastText] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+  const recRef = useRef<Recorder | null>(null);
+  const stateRef = useRef<VoiceState>('idle');
+  stateRef.current = state;
+
+  const teardown = useCallback((): Float32Array | null => {
+    const rec = recRef.current;
+    recRef.current = null;
+    if (!rec) return null;
+    try { rec.node.disconnect(); } catch (_) { /* already gone */ }
+    try { rec.source.disconnect(); } catch (_) { /* already gone */ }
+    try { rec.stream.getTracks().forEach((t) => t.stop()); } catch (_) { /* already gone */ }
+    try { void rec.ctx.close(); } catch (_) { /* already gone */ }
+    const total = rec.chunks.reduce((n, c) => n + c.length, 0);
+    if (!total) return new Float32Array(0);
+    const out = new Float32Array(total);
+    let off = 0;
+    for (const c of rec.chunks) { out.set(c, off); off += c.length; }
+    return out;
+  }, []);
+
+  const start = useCallback(async (): Promise<void> => {
+    if (stateRef.current !== 'idle') return;
+    setError(null);
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
+      const ctx = new AudioContext({ sampleRate: VOICE_SAMPLE_RATE });
+      const source = ctx.createMediaStreamSource(stream);
+      const node = ctx.createScriptProcessor(4096, 1, 1);
+      const chunks: Float32Array[] = [];
+      node.onaudioprocess = (e): void => { chunks.push(new Float32Array(e.inputBuffer.getChannelData(0))); };
+      source.connect(node);
+      node.connect(ctx.destination);
+      recRef.current = { ctx, stream, node, source, chunks };
+      setState('recording');
+      // Warm the model the moment recording begins so transcription is instant on stop.
+      void window.openswarm?.voiceWarmup?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'mic-unavailable');
+      setState('idle');
+    }
+  }, []);
+
+  const stop = useCallback(async (): Promise<void> => {
+    if (stateRef.current !== 'recording') return;
+    const samples = teardown();
+    setState('transcribing');
+    try {
+      if (!samples || samples.length < VOICE_SAMPLE_RATE * 0.2) { setState('idle'); return; } // < 0.2s = a misfire
+      const wav = encodeWav(samples);
+      const res = await window.openswarm?.voiceTranscribe?.(wav);
+      if (res?.ok && res.text) {
+        setLastText(res.text);
+        await window.openswarm?.voiceInject?.(res.text);
+      } else {
+        setError(res?.error || 'transcription-failed');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'transcription-failed');
+    } finally {
+      setState('idle');
+    }
+  }, [teardown]);
+
+  const toggle = useCallback((): void => {
+    if (stateRef.current === 'recording') void stop();
+    else if (stateRef.current === 'idle') void start();
+  }, [start, stop]);
+
+  // Global hotkey (CommandOrControl+Shift+D) routes here from the main process.
+  useEffect(() => {
+    const off = window.openswarm?.onVoiceToggle?.(() => toggle());
+    return () => { off?.(); };
+  }, [toggle]);
+
+  // A dangling recorder (unmount mid-capture) must release the mic.
+  useEffect(() => () => { teardown(); }, [teardown]);
+
+  return { state, lastText, error, toggle, start, stop };
+}
diff --git a/frontend/src/shared/voice/encodeWav.ts b/frontend/src/shared/voice/encodeWav.ts
new file mode 100644
index 00000000..14863366
--- /dev/null
+++ b/frontend/src/shared/voice/encodeWav.ts
@@ -0,0 +1,38 @@
+// whisper.cpp wants 16kHz mono 16-bit PCM WAV. We capture at 16kHz already (the AudioContext is created
+// at that rate), so this is just the float32 -> int16 pack plus the 44-byte RIFF header. Kept dead simple:
+// one channel, no resampling here, so there is nothing to get subtly wrong.
+
+const SAMPLE_RATE = 16000;
+
+export function encodeWav(samples: Float32Array): ArrayBuffer {
+  const buffer = new ArrayBuffer(44 + samples.length * 2);
+  const view = new DataView(buffer);
+
+  const writeStr = (offset: number, s: string): void => {
+    for (let i = 0; i < s.length; i++) view.setUint8(offset + i, s.charCodeAt(i));
+  };
+
+  writeStr(0, 'RIFF');
+  view.setUint32(4, 36 + samples.length * 2, true);
+  writeStr(8, 'WAVE');
+  writeStr(12, 'fmt ');
+  view.setUint32(16, 16, true);       // PCM chunk size
+  view.setUint16(20, 1, true);        // format = PCM
+  view.setUint16(22, 1, true);        // channels = mono
+  view.setUint32(24, SAMPLE_RATE, true);
+  view.setUint32(28, SAMPLE_RATE * 2, true); // byte rate
+  view.setUint16(32, 2, true);        // block align
+  view.setUint16(34, 16, true);       // bits per sample
+  writeStr(36, 'data');
+  view.setUint32(40, samples.length * 2, true);
+
+  let offset = 44;
+  for (let i = 0; i < samples.length; i++) {
+    const clamped = Math.max(-1, Math.min(1, samples[i]));
+    view.setInt16(offset, clamped < 0 ? clamped * 0x8000 : clamped * 0x7fff, true);
+    offset += 2;
+  }
+  return buffer;
+}
+
+export const VOICE_SAMPLE_RATE = SAMPLE_RATE;
diff --git a/frontend/src/types/electron.d.ts b/frontend/src/types/electron.d.ts
index 52b23eb4..b57c8df9 100644
--- a/frontend/src/types/electron.d.ts
+++ b/frontend/src/types/electron.d.ts
@@ -54,6 +54,10 @@ declare global {
     harvestUsage?: (provider: string) => Promise<{ ok: boolean; total: number; titles: string[]; memories: string[] } | null>;
     hardReset?: () => Promise<void>;
     clearBrowserData?: () => Promise<{ ok: boolean }>;
+    voiceWarmup?: () => Promise<{ ok: boolean; error?: string }>;
+    voiceTranscribe?: (wav: ArrayBuffer) => Promise<{ ok: boolean; text?: string; error?: string }>;
+    voiceInject?: (text: string) => Promise<{ ok: boolean; pasted?: boolean; error?: string }>;
+    onVoiceToggle?: (cb: () => void) => () => void;
     onAuthUrl?: (cb: (url: string) => void) => () => void;
     onOauthClaim?: (cb: (url: string) => void) => () => void;
   }

From 237e8f90b21866c5cb5765ef9510b0b56cf4290c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 23:35:20 -0700
Subject: [PATCH 142/248] [eric] voice: wire both mics (help pill + spawn
 composer) to one shared recorder + first-run model download

---
 electron/main.js                              |  2 +
 electron/preload.js                           |  1 +
 electron/voice/whisperService.js              | 48 ++++++++++++++++++-
 .../src/app/components/Layout/AppShell.tsx    | 39 ++++++++-------
 .../Dashboard/desktop/DesktopSpawnPill.tsx    | 24 ++++++++--
 .../app/pages/Dashboard/desktop/HelpPill.tsx  | 14 +++---
 .../shared/voice/VoiceDictationContext.tsx    | 31 ++++++++++++
 .../voice}/useVoiceDictation.ts               | 33 ++++++++++---
 frontend/src/types/electron.d.ts              |  1 +
 9 files changed, 158 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/shared/voice/VoiceDictationContext.tsx
 rename frontend/src/{app/pages/Dashboard/desktop => shared/voice}/useVoiceDictation.ts (74%)

diff --git a/electron/main.js b/electron/main.js
index 9bb6bc8a..3f1ed372 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -2893,6 +2893,8 @@ ipcMain.handle('voice:transcribe', async (_e, wavArrayBuffer) => {
 ipcMain.handle('voice:warmup', async () => {
   try { await whisperService.ensureServer(voiceResourceDir(), voiceUserDataDir()); return { ok: true }; } catch (err) { return { ok: false, error: String(err && err.message ? err.message : err) }; }
 });
+// First-run model download progress so the pill can show "Preparing voice N%".
+ipcMain.handle('voice:status', () => whisperService.modelStatus());
 // Paste the text into the frontmost app (dictate-anywhere). Returns whether the OS paste actually fired.
 ipcMain.handle('voice:inject', async (_e, text) => {
   try { const pasted = await injectText(String(text || '')); return { ok: true, pasted }; } catch (err) { return { ok: false, error: String(err && err.message ? err.message : err) }; }
diff --git a/electron/preload.js b/electron/preload.js
index c21fc629..53cb6f3b 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -65,6 +65,7 @@ contextBridge.exposeInMainWorld('openswarm', {
   // Voice dictation (local whisper.cpp). transcribe takes a 16kHz-mono WAV ArrayBuffer; inject pastes
   // text into the frontmost app; warmup pre-loads the model; onVoiceToggle fires on the global hotkey.
   voiceWarmup: () => ipcRenderer.invoke('voice:warmup'),
+  voiceStatus: () => ipcRenderer.invoke('voice:status'),
   voiceTranscribe: (wavArrayBuffer) => ipcRenderer.invoke('voice:transcribe', wavArrayBuffer),
   voiceInject: (text) => ipcRenderer.invoke('voice:inject', text),
   onVoiceToggle: (cb) => {
diff --git a/electron/voice/whisperService.js b/electron/voice/whisperService.js
index c9f4a452..03839697 100644
--- a/electron/voice/whisperService.js
+++ b/electron/voice/whisperService.js
@@ -6,8 +6,50 @@
 const { spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
+const https = require('https');
 
 const MODEL_FILE = 'ggml-base.en.bin';
+const MODEL_URL = 'https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-base.en.bin';
+
+// First-run model fetch, so a dev build (or a prod build that shipped without the model) still works
+// instead of dead-ending on "no model". Progress is exposed so the pill can say "Preparing voice 40%".
+const download = { active: false, pct: 0, error: null };
+
+function downloadModel(dest) {
+  if (download.active) return;
+  download.active = true;
+  download.pct = 0;
+  download.error = null;
+  try { fs.mkdirSync(path.dirname(dest), { recursive: true }); } catch (_) {}
+  const tmp = `${dest}.part`;
+  const file = fs.createWriteStream(tmp);
+  const req = https.get(MODEL_URL, (res) => {
+    if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+      // Follow HuggingFace's CDN redirect once.
+      https.get(res.headers.location, (r2) => pipeTo(r2, file, tmp, dest)).on('error', onErr);
+      return;
+    }
+    pipeTo(res, file, tmp, dest);
+  });
+  req.on('error', onErr);
+  function onErr(e) { download.active = false; download.error = String(e && e.message ? e.message : e); try { file.close(); fs.unlinkSync(tmp); } catch (_) {} }
+}
+
+function pipeTo(res, file, tmp, dest) {
+  const total = Number(res.headers['content-length'] || 0);
+  let got = 0;
+  res.on('data', (c) => { got += c.length; if (total) download.pct = Math.round((got / total) * 100); });
+  res.pipe(file);
+  file.on('finish', () => file.close(() => {
+    try { fs.renameSync(tmp, dest); download.pct = 100; } catch (e) { download.error = String(e); }
+    download.active = false;
+  }));
+  res.on('error', () => { download.active = false; download.error = 'stream-error'; try { fs.unlinkSync(tmp); } catch (_) {} });
+}
+
+function modelStatus() {
+  return { downloading: download.active, pct: download.pct, error: download.error };
+}
 
 // Resolve the whisper-server binary. Env override wins (dev convenience), then the bundled per-arch
 // copy, then whatever is on PATH so a dev machine with `brew install whisper-cpp` just works.
@@ -66,7 +108,9 @@ async function ensureServer(resourceDir, userDataDir) {
     const model = resolveModel(resourceDir, userDataDir);
     if (!model) {
       readyPromise = null;
-      throw new Error('no-model'); // caller surfaces a "voice model missing" state, never crashes
+      // Kick off a one-time background fetch to the dev cache so the NEXT dictation just works.
+      downloadModel(path.join(userDataDir, 'whisper', MODEL_FILE));
+      throw new Error(download.active ? 'model-downloading' : 'no-model');
     }
     const p = pickPort();
     const child = spawn(bin, ['-m', model, '--port', String(p), '-nt', '--convert'], {
@@ -109,4 +153,4 @@ function stopServer() {
   readyPromise = null;
 }
 
-module.exports = { ensureServer, transcribe, stopServer, resolveBinary, resolveModel };
+module.exports = { ensureServer, transcribe, stopServer, resolveBinary, resolveModel, modelStatus };
diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index e6b730a5..b932035c 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -10,6 +10,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { VoiceDictationProvider } from '@/shared/voice/VoiceDictationContext';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -1399,24 +1400,28 @@ const AppShell: React.FC = () => {
         ml: fsHideChrome ? 0 : '6px',
         borderRadius: fsHideChrome ? 0 : '14px',
       }}>
-        {/* Hidden (not unmounted) when the dashboard view is active so the persistent Dashboard layered above can take over. */}
-        <Box
-          sx={{
-            position: 'absolute',
-            inset: 0,
-            visibility: isDashboardViewActive ? 'hidden' : 'visible',
-            pointerEvents: isDashboardViewActive ? 'none' : 'auto',
-          }}
-        >
-          <Outlet />
-        </Box>
+        {/* One voice controller wraps BOTH the routed content and the persistent Dashboard host, so
+            the spawn-pill mic (which lives in the persistent host, not the Outlet) shares the recorder. */}
+        <VoiceDictationProvider>
+          {/* Hidden (not unmounted) when the dashboard view is active so the persistent Dashboard layered above can take over. */}
+          <Box
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              visibility: isDashboardViewActive ? 'hidden' : 'visible',
+              pointerEvents: isDashboardViewActive ? 'none' : 'auto',
+            }}
+          >
+            <Outlet />
+          </Box>
 
-        {/* CSS-hidden on other routes so webviews + state survive nav. */}
-        {lastDashboardId && (
-          <DashboardHost visible={isDashboardViewActive}>
-            <Dashboard dashboardId={lastDashboardId} isActive={isDashboardViewActive} />
-          </DashboardHost>
-        )}
+          {/* CSS-hidden on other routes so webviews + state survive nav. */}
+          {lastDashboardId && (
+            <DashboardHost visible={isDashboardViewActive}>
+              <Dashboard dashboardId={lastDashboardId} isActive={isDashboardViewActive} />
+            </DashboardHost>
+          )}
+        </VoiceDictationProvider>
       </Box>
       </Box>
 
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index b0af5641..863cc55d 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -4,6 +4,9 @@ import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
 import AddRounded from '@mui/icons-material/AddRounded';
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
+import MicIcon from '@mui/icons-material/Mic';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useVoice } from '@/shared/voice/VoiceDictationContext';
 import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
 import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
 import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
@@ -38,6 +41,11 @@ function DesktopSpawnPill({
 }: DesktopSpawnPillProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
+  const { state: voiceState, pct: voicePct, toggle: toggleVoice } = useVoice();
+  const recording = voiceState === 'recording';
+  const transcribing = voiceState === 'transcribing';
+  const preparing = voiceState === 'preparing';
+  const voiceBusy = transcribing || preparing;
 
   useEffect(() => {
     if (!menuOpen) return undefined;
@@ -152,8 +160,11 @@ function DesktopSpawnPill({
         >
           <AddRounded sx={{ fontSize: 18 }} />
         </Box>
-        <Tooltip title="Voice input (coming soon)" placement="top" arrow>
+        <Tooltip title={recording ? 'Stop dictation' : preparing ? `Downloading voice model ${voicePct}%` : 'Dictate (Cmd+Shift+D)'} placement="top" arrow>
           <Box
+            role="button"
+            aria-label="Voice dictation"
+            onClick={(e) => { e.stopPropagation(); if (!voiceBusy) toggleVoice(); }}
             sx={{
               display: 'flex',
               alignItems: 'center',
@@ -161,11 +172,16 @@ function DesktopSpawnPill({
               width: 22,
               height: 22,
               borderRadius: '50%',
-              color: 'rgba(255,255,255,0.45)',
-              cursor: 'default',
+              color: recording ? '#ff8a8a' : 'rgba(255,255,255,0.6)',
+              cursor: voiceBusy ? 'default' : 'pointer',
+              '&:hover': { color: '#fff', background: 'rgba(255,255,255,0.12)' },
             }}
           >
-            <MicNoneOutlinedIcon sx={{ fontSize: 16 }} />
+            {voiceBusy
+              ? <CircularProgress size={14} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} />
+              : recording
+                ? <MicIcon sx={{ fontSize: 16 }} />
+                : <MicNoneOutlinedIcon sx={{ fontSize: 16 }} />}
           </Box>
         </Tooltip>
       </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index ea7e1c82..b167ca5b 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -7,16 +7,18 @@ import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
 import MicIcon from '@mui/icons-material/Mic';
 import { useAppDispatch } from '@/shared/hooks';
 import { addBrowserCard } from '@/shared/state/dashboardLayoutSlice';
-import { useVoiceDictation } from './useVoiceDictation';
+import { useVoice } from '@/shared/voice/VoiceDictationContext';
 
 const HELP_URL = 'https://openswarm.com';
 
 /** Top-right desktop pill: Help opens the docs; the mic dictates (local whisper) into the focused field. */
 function HelpPill(): React.ReactElement {
   const dispatch = useAppDispatch();
-  const { state, toggle } = useVoiceDictation();
+  const { state, pct, toggle } = useVoice();
   const recording = state === 'recording';
   const transcribing = state === 'transcribing';
+  const preparing = state === 'preparing';
+  const busy = transcribing || preparing;
 
   return (
     <Box
@@ -39,14 +41,14 @@ function HelpPill(): React.ReactElement {
       onClick={() => dispatch(addBrowserCard({ url: HELP_URL }))}
     >
       <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
-        {recording ? 'Listening' : transcribing ? 'Transcribing' : 'Help'}
+        {recording ? 'Listening' : transcribing ? 'Transcribing' : preparing ? `Preparing ${pct}%` : 'Help'}
       </Typography>
-      <Tooltip title={recording ? 'Stop dictation' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
+      <Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
         <Box
           sx={{ display: 'flex', alignItems: 'center', color: recording ? '#fff' : 'rgba(255,255,255,0.55)' }}
-          onClick={(e) => { e.stopPropagation(); if (!transcribing) toggle(); }}
+          onClick={(e) => { e.stopPropagation(); if (!busy) toggle(); }}
         >
-          {transcribing
+          {busy
             ? <CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} />
             : recording
               ? <MicIcon sx={{ fontSize: 16 }} />
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
new file mode 100644
index 00000000..169c96a5
--- /dev/null
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -0,0 +1,31 @@
+import React, { createContext, useContext } from 'react';
+import { useVoiceDictation, VoiceState } from './useVoiceDictation';
+
+// One recorder for the whole app. Both mics (the Help pill and the spawn composer) plus the global
+// hotkey drive the SAME dictation session, so two mics can't fight over the microphone or show
+// out-of-sync state. Mounted once near the app root.
+interface VoiceContextValue {
+  state: VoiceState;
+  lastText: string;
+  error: string | null;
+  pct: number;
+  toggle: () => void;
+}
+
+const NOOP: VoiceContextValue = { state: 'idle', lastText: '', error: null, pct: 0, toggle: () => {} };
+const VoiceContext = createContext<VoiceContextValue>(NOOP);
+
+export function VoiceDictationProvider({ children }: { children: React.ReactNode }): React.ReactElement {
+  const { state, lastText, error, pct, toggle } = useVoiceDictation();
+  return (
+    <VoiceContext.Provider value={{ state, lastText, error, pct, toggle }}>
+      {children}
+    </VoiceContext.Provider>
+  );
+}
+
+// A component rendered outside the provider (or a web build with no Electron bridge) gets the no-op,
+// so mics still render and just do nothing rather than crashing.
+export function useVoice(): VoiceContextValue {
+  return useContext(VoiceContext);
+}
diff --git a/frontend/src/app/pages/Dashboard/desktop/useVoiceDictation.ts b/frontend/src/shared/voice/useVoiceDictation.ts
similarity index 74%
rename from frontend/src/app/pages/Dashboard/desktop/useVoiceDictation.ts
rename to frontend/src/shared/voice/useVoiceDictation.ts
index fc68cbea..d670f073 100644
--- a/frontend/src/app/pages/Dashboard/desktop/useVoiceDictation.ts
+++ b/frontend/src/shared/voice/useVoiceDictation.ts
@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { encodeWav, VOICE_SAMPLE_RATE } from '@/shared/voice/encodeWav';
+import { encodeWav, VOICE_SAMPLE_RATE } from './encodeWav';
 
-export type VoiceState = 'idle' | 'recording' | 'transcribing';
+export type VoiceState = 'idle' | 'recording' | 'transcribing' | 'preparing';
 
-// WhisperFlow-style push-to-dictate: toggle recording (global hotkey or the pill), speak, and the
+// WhisperFlow-style push-to-dictate: toggle recording (global hotkey or a mic), speak, and the
 // transcribed text is pasted into whatever field has focus. Capture is 16kHz mono PCM so it feeds
 // whisper.cpp with no server-side resample. The recording path can only be proven with a real mic;
 // the encode -> transcribe -> inject half is exercised by the encoder round-trip test.
@@ -19,10 +19,25 @@ export function useVoiceDictation() {
   const [state, setState] = useState<VoiceState>('idle');
   const [lastText, setLastText] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
+  const [pct, setPct] = useState<number>(0);
   const recRef = useRef<Recorder | null>(null);
   const stateRef = useRef<VoiceState>('idle');
   stateRef.current = state;
 
+  // First-run: the model is downloading. Poll progress until it lands, then drop back to idle so the
+  // next click records for real. Never records while preparing, so nothing is lost to a dropped phrase.
+  const pollModel = useCallback((): void => {
+    const tick = async (): Promise<void> => {
+      const st = await window.openswarm?.voiceStatus?.();
+      if (!st) { setState('idle'); return; }
+      setPct(st.pct || 0);
+      if (st.error) { setError(st.error); setState('idle'); return; }
+      if (!st.downloading) { setState('idle'); return; }
+      setTimeout(() => { void tick(); }, 1000);
+    };
+    void tick();
+  }, []);
+
   const teardown = useCallback((): Float32Array | null => {
     const rec = recRef.current;
     recRef.current = null;
@@ -41,6 +56,7 @@ export function useVoiceDictation() {
 
   const start = useCallback(async (): Promise<void> => {
     if (stateRef.current !== 'idle') return;
+    if (!window.openswarm?.voiceTranscribe) { setError('desktop-only'); return; } // no Electron bridge = web build
     setError(null);
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
@@ -72,15 +88,20 @@ export function useVoiceDictation() {
       if (res?.ok && res.text) {
         setLastText(res.text);
         await window.openswarm?.voiceInject?.(res.text);
+        setState('idle');
+      } else if (res?.error === 'model-downloading' || res?.error === 'no-model') {
+        // First use kicked off the model fetch; show progress and don't error out.
+        setState('preparing');
+        pollModel();
       } else {
         setError(res?.error || 'transcription-failed');
+        setState('idle');
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'transcription-failed');
-    } finally {
       setState('idle');
     }
-  }, [teardown]);
+  }, [teardown, pollModel]);
 
   const toggle = useCallback((): void => {
     if (stateRef.current === 'recording') void stop();
@@ -96,5 +117,5 @@ export function useVoiceDictation() {
   // A dangling recorder (unmount mid-capture) must release the mic.
   useEffect(() => () => { teardown(); }, [teardown]);
 
-  return { state, lastText, error, toggle, start, stop };
+  return { state, lastText, error, pct, toggle, start, stop };
 }
diff --git a/frontend/src/types/electron.d.ts b/frontend/src/types/electron.d.ts
index b57c8df9..a48f26c3 100644
--- a/frontend/src/types/electron.d.ts
+++ b/frontend/src/types/electron.d.ts
@@ -55,6 +55,7 @@ declare global {
     hardReset?: () => Promise<void>;
     clearBrowserData?: () => Promise<{ ok: boolean }>;
     voiceWarmup?: () => Promise<{ ok: boolean; error?: string }>;
+    voiceStatus?: () => Promise<{ downloading: boolean; pct: number; error: string | null }>;
     voiceTranscribe?: (wav: ArrayBuffer) => Promise<{ ok: boolean; text?: string; error?: string }>;
     voiceInject?: (text: string) => Promise<{ ok: boolean; pasted?: boolean; error?: string }>;
     onVoiceToggle?: (cb: () => void) => () => void;

From 8dfe6fbda4f2f41527dc487ac4aee047a106d3e4 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 23:59:47 -0700
Subject: [PATCH 143/248] [eric] composer: stop rotating ghost-text guesses +
 only predict after real usage (4+ chats)

---
 backend/apps/agents/manager/predict_prompts.py      |  9 +++++++--
 .../src/app/pages/Dashboard/DashboardToolbar.tsx    | 13 ++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/backend/apps/agents/manager/predict_prompts.py b/backend/apps/agents/manager/predict_prompts.py
index f41ebad8..5eb73da6 100644
--- a/backend/apps/agents/manager/predict_prompts.py
+++ b/backend/apps/agents/manager/predict_prompts.py
@@ -17,6 +17,10 @@ logger = logging.getLogger(__name__)
 
 MAX_TOPICS = 24
 MAX_SUGGESTIONS = 5
+# Don't predict someone's next prompt until we ACTUALLY know their patterns. Below this many real
+# past chats, any guess is just noise (onboarding starters alone are what they browsed at setup, not
+# a read on what they want now), so we stay silent and let the neutral placeholder stand.
+MIN_REAL_TOPICS = 4
 # Names the aux title-gen hands out for empty/greeting chats; they carry no topic signal.
 P_SKIP_NAMES = {"untitled", "new chat", "greeting", "chat", ""}
 
@@ -70,8 +74,9 @@ async def predict_prompts(count: int = MAX_SUGGESTIONS) -> List[str]:
             for s in (global_settings.personalized_starters or [])
             if getattr(s, "prompt", None)
         ]
-        # Nothing to personalize from: let the composer keep its static placeholder.
-        if not topics and not starters:
+        # Only predict once there's a real track record. Onboarding starters can enrich a prediction
+        # but never trigger one on their own: a brand-new user hasn't shown us what they want yet.
+        if len(topics) < MIN_REAL_TOPICS:
             return []
 
         aux_model = (await resolve_aux_model(global_settings, preferred_tier="haiku"))[0]
diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 179a0848..c3c438dd 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -99,7 +99,6 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
     // load (cached), then one is shown at a time and cycled while the composer sits idle+empty. Empty
     // list (no signal / no provider / error) just leaves the static "What should I do sir..." placeholder.
     const [ghostList, setGhostList] = useState<string[]>([]);
-    const [ghostIdx, setGhostIdx] = useState(0);
     const ghostFetchedRef = useRef(false);
     useEffect(() => {
       if (!inputOpen || ghostFetchedRef.current) return;
@@ -116,14 +115,10 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
         } catch { /* fail open: keep the static placeholder */ }
       })();
     }, [inputOpen]);
-    // Rotate the visible suggestion every few seconds while the composer is open, so the user sees a
-    // few different ideas instead of one. Cheap; the list is already fetched and cached.
-    useEffect(() => {
-      if (!inputOpen || ghostList.length <= 1) return undefined;
-      const t = setInterval(() => setGhostIdx((i) => (i + 1) % ghostList.length), 4500);
-      return () => clearInterval(t);
-    }, [inputOpen, ghostList.length]);
-    const ghostSuggestion = ghostList.length ? ghostList[ghostIdx % ghostList.length] : undefined;
+    // ONE stable suggestion, never a rotating carousel: cycling guesses every few seconds reads as
+    // "the app is throwing darts." The backend only returns anything when it has real usage history to
+    // predict from (see predict_prompts.py), so an empty list just leaves the neutral placeholder.
+    const ghostSuggestion = ghostList.length ? ghostList[0] : undefined;
 
     // Reset defaults on each new compose session so in-session picks don't leak into the next new-chat draft.
     const prevInputOpen = useRef(false);

From 17364d54395437e79f69bd6adc749abe3708cbee Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 23:59:47 -0700
Subject: [PATCH 144/248] [eric] voice: fix stuck model-downloading state +
 harden download + visible status overlay

---
 electron/voice/whisperService.js              | 113 ++++++++++--------
 .../shared/voice/VoiceDictationContext.tsx    |  11 +-
 frontend/src/shared/voice/VoiceOverlay.tsx    |  99 +++++++++++++++
 .../src/shared/voice/useVoiceDictation.ts     |  26 +++-
 4 files changed, 194 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/shared/voice/VoiceOverlay.tsx

diff --git a/electron/voice/whisperService.js b/electron/voice/whisperService.js
index 03839697..83a87c5e 100644
--- a/electron/voice/whisperService.js
+++ b/electron/voice/whisperService.js
@@ -22,29 +22,37 @@ function downloadModel(dest) {
   download.error = null;
   try { fs.mkdirSync(path.dirname(dest), { recursive: true }); } catch (_) {}
   const tmp = `${dest}.part`;
-  const file = fs.createWriteStream(tmp);
-  const req = https.get(MODEL_URL, (res) => {
-    if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
-      // Follow HuggingFace's CDN redirect once.
-      https.get(res.headers.location, (r2) => pipeTo(r2, file, tmp, dest)).on('error', onErr);
-      return;
-    }
-    pipeTo(res, file, tmp, dest);
-  });
-  req.on('error', onErr);
-  function onErr(e) { download.active = false; download.error = String(e && e.message ? e.message : e); try { file.close(); fs.unlinkSync(tmp); } catch (_) {} }
-}
+  try { fs.unlinkSync(tmp); } catch (_) {}
 
-function pipeTo(res, file, tmp, dest) {
-  const total = Number(res.headers['content-length'] || 0);
-  let got = 0;
-  res.on('data', (c) => { got += c.length; if (total) download.pct = Math.round((got / total) * 100); });
-  res.pipe(file);
-  file.on('finish', () => file.close(() => {
-    try { fs.renameSync(tmp, dest); download.pct = 100; } catch (e) { download.error = String(e); }
-    download.active = false;
-  }));
-  res.on('error', () => { download.active = false; download.error = 'stream-error'; try { fs.unlinkSync(tmp); } catch (_) {} });
+  const fail = (msg) => { download.active = false; download.error = String(msg); try { fs.unlinkSync(tmp); } catch (_) {} };
+
+  // HuggingFace bounces resolve -> CDN -> signed URL, so follow redirects instead of assuming one hop.
+  const fetchUrl = (url, hops) => {
+    if (hops > 6) { fail('too-many-redirects'); return; }
+    const req = https.get(url, { headers: { 'User-Agent': 'openswarm-voice' } }, (res) => {
+      const code = res.statusCode || 0;
+      if (code >= 300 && code < 400 && res.headers.location) {
+        res.resume(); // drain so the socket frees
+        fetchUrl(new URL(res.headers.location, url).toString(), hops + 1);
+        return;
+      }
+      if (code !== 200) { res.resume(); fail(`http-${code}`); return; }
+      const total = Number(res.headers['content-length'] || 0);
+      let got = 0;
+      const file = fs.createWriteStream(tmp);
+      res.on('data', (c) => { got += c.length; if (total) download.pct = Math.round((got / total) * 100); });
+      res.pipe(file);
+      file.on('finish', () => file.close(() => {
+        // A truncated download is worse than none: only accept a complete file.
+        if (total && got < total) { fail('truncated'); return; }
+        try { fs.renameSync(tmp, dest); download.pct = 100; download.active = false; } catch (e) { fail(e && e.message ? e.message : e); }
+      }));
+      res.on('error', () => fail('stream-error'));
+      file.on('error', () => fail('write-error'));
+    });
+    req.on('error', (e) => fail(e && e.message ? e.message : e));
+  };
+  fetchUrl(MODEL_URL, 0);
 }
 
 function modelStatus() {
@@ -98,37 +106,46 @@ async function waitForReady(p, timeoutMs) {
   return false;
 }
 
+async function p_bootServer(resourceDir, userDataDir) {
+  const bin = resolveBinary(resourceDir);
+  const model = resolveModel(resourceDir, userDataDir);
+  if (!model) {
+    // Kick off a one-time background fetch so the NEXT dictation just works.
+    downloadModel(path.join(userDataDir, 'whisper', MODEL_FILE));
+    throw new Error(download.active ? 'model-downloading' : 'no-model');
+  }
+  const p = pickPort();
+  const child = spawn(bin, ['-m', model, '--port', String(p), '-nt', '--convert'], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+  child.on('error', () => { proc = null; port = 0; });
+  child.on('exit', () => { proc = null; port = 0; readyPromise = null; });
+  const ok = await waitForReady(p, 20000);
+  if (!ok) {
+    try { child.kill(); } catch (_) {}
+    throw new Error('server-timeout');
+  }
+  proc = child;
+  port = p;
+  return p;
+}
+
 // Boot the warm server once. resourceDir = where a packaged build put the binary+model; userDataDir
 // = app.getPath('userData') for the dev cache. Returns the port, or throws with an actionable reason.
+// The readyPromise is cleared AFTER it settles, never synchronously inside the async body: the old
+// code reset it inside the IIFE where the outer assignment immediately overwrote the null, pinning a
+// settled-rejected promise forever so every later call kept throwing "model-downloading" even after
+// the model finished. Clearing on rejection here lets the next call retry cleanly.
 async function ensureServer(resourceDir, userDataDir) {
   if (proc && port) return port;
   if (readyPromise) return readyPromise;
-  readyPromise = (async () => {
-    const bin = resolveBinary(resourceDir);
-    const model = resolveModel(resourceDir, userDataDir);
-    if (!model) {
-      readyPromise = null;
-      // Kick off a one-time background fetch to the dev cache so the NEXT dictation just works.
-      downloadModel(path.join(userDataDir, 'whisper', MODEL_FILE));
-      throw new Error(download.active ? 'model-downloading' : 'no-model');
-    }
-    const p = pickPort();
-    const child = spawn(bin, ['-m', model, '--port', String(p), '-nt', '--convert'], {
-      stdio: ['ignore', 'pipe', 'pipe'],
-    });
-    child.on('error', () => { proc = null; port = 0; });
-    child.on('exit', () => { proc = null; port = 0; readyPromise = null; });
-    const ok = await waitForReady(p, 20000);
-    if (!ok) {
-      try { child.kill(); } catch (_) {}
-      readyPromise = null;
-      throw new Error('server-timeout');
-    }
-    proc = child;
-    port = p;
-    return p;
-  })();
-  return readyPromise;
+  readyPromise = p_bootServer(resourceDir, userDataDir);
+  try {
+    return await readyPromise;
+  } catch (err) {
+    readyPromise = null;
+    throw err;
+  }
 }
 
 // Transcribe a 16kHz-mono WAV buffer to text. The renderer records + encodes the WAV so the audio
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
index 169c96a5..37829909 100644
--- a/frontend/src/shared/voice/VoiceDictationContext.tsx
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -1,5 +1,6 @@
 import React, { createContext, useContext } from 'react';
-import { useVoiceDictation, VoiceState } from './useVoiceDictation';
+import { useVoiceDictation, VoiceState, VoiceFeedback } from './useVoiceDictation';
+import VoiceOverlay from './VoiceOverlay';
 
 // One recorder for the whole app. Both mics (the Help pill and the spawn composer) plus the global
 // hotkey drive the SAME dictation session, so two mics can't fight over the microphone or show
@@ -9,17 +10,19 @@ interface VoiceContextValue {
   lastText: string;
   error: string | null;
   pct: number;
+  feedback: VoiceFeedback | null;
   toggle: () => void;
 }
 
-const NOOP: VoiceContextValue = { state: 'idle', lastText: '', error: null, pct: 0, toggle: () => {} };
+const NOOP: VoiceContextValue = { state: 'idle', lastText: '', error: null, pct: 0, feedback: null, toggle: () => {} };
 const VoiceContext = createContext<VoiceContextValue>(NOOP);
 
 export function VoiceDictationProvider({ children }: { children: React.ReactNode }): React.ReactElement {
-  const { state, lastText, error, pct, toggle } = useVoiceDictation();
+  const { state, lastText, error, pct, feedback, toggle } = useVoiceDictation();
   return (
-    <VoiceContext.Provider value={{ state, lastText, error, pct, toggle }}>
+    <VoiceContext.Provider value={{ state, lastText, error, pct, feedback, toggle }}>
       {children}
+      <VoiceOverlay />
     </VoiceContext.Provider>
   );
 }
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
new file mode 100644
index 00000000..e235d3ae
--- /dev/null
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import MicIcon from '@mui/icons-material/Mic';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import ContentPasteRoundedIcon from '@mui/icons-material/ContentPasteRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { useVoice } from './VoiceDictationContext';
+
+// The whole point: dictation must never look like "nothing happened." This floats a small status
+// card above the composer for every phase (listening, transcribing, downloading the model) and shows
+// the transcript + whether it was pasted or just copied. Non-interactive, auto-dismisses.
+const FEEDBACK_MS = 4500;
+
+function feedbackIcon(icon: string): React.ReactElement {
+  if (icon === 'check') return <CheckRoundedIcon sx={{ fontSize: 16, color: '#4ade80' }} />;
+  if (icon === 'clipboard') return <ContentPasteRoundedIcon sx={{ fontSize: 15, color: 'rgba(255,255,255,0.8)' }} />;
+  if (icon === 'mic') return <MicIcon sx={{ fontSize: 16, color: '#ff8a8a' }} />;
+  return <InfoOutlinedIcon sx={{ fontSize: 15, color: 'rgba(255,255,255,0.8)' }} />;
+}
+
+const VoiceOverlay: React.FC = () => {
+  const { state, pct, feedback } = useVoice();
+  const [showFeedback, setShowFeedback] = useState(false);
+
+  useEffect(() => {
+    if (!feedback) return undefined;
+    setShowFeedback(true);
+    const t = setTimeout(() => setShowFeedback(false), FEEDBACK_MS);
+    return () => clearTimeout(t);
+  }, [feedback]);
+
+  const live = state !== 'idle';
+  const visible = live || (showFeedback && !!feedback);
+  if (!visible) return null;
+
+  let content: React.ReactElement;
+  if (state === 'recording') {
+    content = (
+      <>
+        <MicIcon sx={{ fontSize: 16, color: '#ff8a8a' }} />
+        <span>Listening</span>
+        <Box component="span" sx={{
+          width: 6, height: 6, borderRadius: '50%', background: '#ff8a8a', ml: 0.25,
+          '@keyframes vpulse': { '0%,100%': { opacity: 0.3 }, '50%': { opacity: 1 } },
+          animation: 'vpulse 1s ease-in-out infinite',
+        }} />
+      </>
+    );
+  } else if (state === 'transcribing') {
+    content = (<><CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} /><span>Transcribing</span></>);
+  } else if (state === 'preparing') {
+    content = (<><CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} /><span>Downloading voice model {pct}%</span></>);
+  } else if (feedback) {
+    content = (
+      <>
+        {feedbackIcon(feedback.icon)}
+        <Box component="span" sx={{ maxWidth: 420, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {feedback.text}
+        </Box>
+      </>
+    );
+  } else {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 84,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 2147483000,
+        pointerEvents: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        px: 1.75,
+        py: 0.9,
+        maxWidth: '80vw',
+        borderRadius: 999,
+        background: 'rgba(22,12,34,0.9)',
+        backdropFilter: 'blur(20px) saturate(160%)',
+        WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+        boxShadow: '0 8px 28px rgba(0,0,0,0.4)',
+        color: 'rgba(255,255,255,0.92)',
+        fontSize: '0.82rem',
+        fontWeight: 500,
+        '@keyframes vin': { from: { opacity: 0, transform: 'translate(-50%, 6px)' }, to: { opacity: 1, transform: 'translate(-50%, 0)' } },
+        animation: 'vin 0.16s ease-out',
+      }}
+    >
+      {content}
+    </Box>
+  );
+};
+
+export default VoiceOverlay;
diff --git a/frontend/src/shared/voice/useVoiceDictation.ts b/frontend/src/shared/voice/useVoiceDictation.ts
index d670f073..a648c002 100644
--- a/frontend/src/shared/voice/useVoiceDictation.ts
+++ b/frontend/src/shared/voice/useVoiceDictation.ts
@@ -15,11 +15,20 @@ interface Recorder {
   chunks: Float32Array[];
 }
 
+// One object per terminal outcome so the overlay's effect always re-fires (new identity every time).
+export interface VoiceFeedback {
+  tone: 'ok' | 'warn' | 'error';
+  icon: 'check' | 'clipboard' | 'mic' | 'info';
+  text: string;
+  at: number;
+}
+
 export function useVoiceDictation() {
   const [state, setState] = useState<VoiceState>('idle');
   const [lastText, setLastText] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [pct, setPct] = useState<number>(0);
+  const [feedback, setFeedback] = useState<VoiceFeedback | null>(null);
   const recRef = useRef<Recorder | null>(null);
   const stateRef = useRef<VoiceState>('idle');
   stateRef.current = state;
@@ -72,7 +81,10 @@ export function useVoiceDictation() {
       // Warm the model the moment recording begins so transcription is instant on stop.
       void window.openswarm?.voiceWarmup?.();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'mic-unavailable');
+      const msg = err instanceof Error ? err.message : 'mic-unavailable';
+      setError(msg);
+      const denied = /NotAllowed|Permission|denied/i.test(msg);
+      setFeedback({ tone: 'error', icon: 'mic', text: denied ? 'Microphone access needed. Enable it in System Settings, Privacy, Microphone.' : 'Could not start the microphone.', at: Date.now() });
       setState('idle');
     }
   }, []);
@@ -87,7 +99,13 @@ export function useVoiceDictation() {
       const res = await window.openswarm?.voiceTranscribe?.(wav);
       if (res?.ok && res.text) {
         setLastText(res.text);
-        await window.openswarm?.voiceInject?.(res.text);
+        const inj = await window.openswarm?.voiceInject?.(res.text);
+        setFeedback(inj?.pasted
+          ? { tone: 'ok', icon: 'check', text: res.text, at: Date.now() }
+          : { tone: 'ok', icon: 'clipboard', text: `${res.text}  (copied, press Cmd+V)`, at: Date.now() });
+        setState('idle');
+      } else if (res?.ok && !res.text) {
+        setFeedback({ tone: 'warn', icon: 'info', text: "Didn't catch that. Try again.", at: Date.now() });
         setState('idle');
       } else if (res?.error === 'model-downloading' || res?.error === 'no-model') {
         // First use kicked off the model fetch; show progress and don't error out.
@@ -95,10 +113,12 @@ export function useVoiceDictation() {
         pollModel();
       } else {
         setError(res?.error || 'transcription-failed');
+        setFeedback({ tone: 'error', icon: 'info', text: 'Voice transcription failed. Try again.', at: Date.now() });
         setState('idle');
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'transcription-failed');
+      setFeedback({ tone: 'error', icon: 'info', text: 'Voice transcription failed. Try again.', at: Date.now() });
       setState('idle');
     }
   }, [teardown, pollModel]);
@@ -117,5 +137,5 @@ export function useVoiceDictation() {
   // A dangling recorder (unmount mid-capture) must release the mic.
   useEffect(() => () => { teardown(); }, [teardown]);
 
-  return { state, lastText, error, pct, toggle, start, stop };
+  return { state, lastText, error, pct, feedback, toggle, start, stop };
 }

From 537c64075e59502c66a61c6d2e046445815a4af9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 21 Jul 2026 23:59:47 -0700
Subject: [PATCH 145/248] [eric] dashboard: keep macOS traffic lights visible
 while the sidebar is docked

---
 frontend/src/app/components/Layout/AppShell.tsx    |  7 +++++++
 .../app/pages/Dashboard/canvas/DashboardCanvas.tsx | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index b932035c..3063e4fd 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -467,6 +467,13 @@ const AppShell: React.FC = () => {
     else root.style.removeProperty('--osw-header-inset');
     return () => { root.style.removeProperty('--osw-header-inset'); };
   }, [sidebarAway]);
+  // When the sidebar is docked, the macOS traffic lights sit over its top strip, which is a window
+  // drag region that swallows mousemove, so the canvas hover-reveal can never fire there. Broadcast
+  // "chrome docked" so the canvas keeps the native lights visible while the sidebar is open (they only
+  // hide-until-hover in the immersive collapsed/fullscreen state). detail.docked = sidebar is present.
+  useEffect(() => {
+    window.dispatchEvent(new CustomEvent('openswarm:chrome-docked', { detail: { docked: !sidebarAway } }));
+  }, [sidebarAway]);
   // Close-on-leave with a grace delay (cancelled on re-enter): a bare mouseLeave closed the peek the
   // instant the cursor dipped past the panel edge while reaching for an item, so clicks never landed.
   const peekCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 7eb4b036..6341f302 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -187,11 +187,21 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
     return () => window.removeEventListener('keydown', onKey, true);
   }, [fullscreenCardId, dispatch]);
 
+  // While the sidebar is docked, its top strip (a window drag region) hides the traffic lights AND
+  // eats the hover that would reveal them, so keep them visible the whole time the sidebar is open,
+  // like every Mac app with a sidebar. Only the immersive collapsed/fullscreen state hover-reveals.
+  const [chromeDocked, setChromeDocked] = React.useState(false);
+  useEffect(() => {
+    const onDocked = (e: Event): void => setChromeDocked(!!(e as CustomEvent).detail?.docked);
+    window.addEventListener('openswarm:chrome-docked', onDocked);
+    return () => window.removeEventListener('openswarm:chrome-docked', onDocked);
+  }, []);
+
   // Arc-style chrome: the mac traffic lights ride the top-edge hover, in fullscreen too (Arc/Zen both
   // keep the native buttons reachable in compact/fullscreen; Zen even exempts them from hover-leave).
   useEffect(() => {
-    window.openswarm?.setWindowButtonsVisible?.(headerRevealed);
-  }, [headerRevealed]);
+    window.openswarm?.setWindowButtonsVisible?.(headerRevealed || chromeDocked);
+  }, [headerRevealed, chromeDocked]);
 
   // Reveal on any pointer graze of the top edge. The old 22px strip Box was dead in practice: the
   // hidden header overlay's pointer-events:auto children sat above it and ate the mouseenter.

From c41291b0856d7327c9f66d5d0b80bfbc2c5f4f4a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 22 Jul 2026 13:34:40 -0700
Subject: [PATCH 146/248] [eric] onboarding: dev replay shows the flow without
 spawning demo jobs onto the live dashboard

---
 .../OnboardingV3/useOnboardingV3Pipeline.ts           | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 5c8139a9..150654c6 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -68,6 +68,13 @@ export function useOnboardingV3Pipeline() {
   const launchCtxRef = useRef({ connected: false, model: 'sonnet' });
   launchCtxRef.current = { connected, model: cheapModel };
   const launchedRef = useRef(false);
+  // Dev replay (osw_force_onboarding): show the whole flow WITHOUT spawning 4 real agents + a scheduled
+  // workflow onto the tester's live dashboard. The flag is stripped in prod, so a real first-run (empty
+  // machine) always gets its wow jobs; only a QA replay on an existing dashboard skips the clutter+lag.
+  const isReplay = ((): boolean => {
+    if (process.env.NODE_ENV === 'production') return false;
+    try { return localStorage.getItem('osw_force_onboarding') === '1'; } catch { return false; }
+  })();
 
   const kickIdentity = useCallback(() => {
     fetchIdentity().then((ids) => { identityRef.current = ids; setIdentity(ids); }).catch(() => {});
@@ -147,6 +154,8 @@ export function useOnboardingV3Pipeline() {
       prepReadyRef.current = prep;
       if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
       launchedRef.current = true;
+      // QA replay: run the flow, but never seed real jobs/schedules onto the tester's working canvas.
+      if (isReplay) return;
       // The four auto-run showcase jobs, one per capability: build an app, dig the web, drive a real
       // browser, and set up a scheduled task. Each fires INDEPENDENTLY (own draft session, own async
       // launch, own error handling), so none waits on another and one failing never blocks the rest; a
@@ -159,7 +168,7 @@ export function useOnboardingV3Pipeline() {
       // field), else fall back to a safe, universally-useful weekly roundup.
       createScheduledJob(prep.automations[0] ?? SCHEDULE_FALLBACK);
     });
-  }, [launchJob, createScheduledJob]);
+  }, [launchJob, createScheduledJob, isReplay]);
 
   const finish = useCallback(async (outcome: 'done' | 'skipped') => {
     if (outcome === 'skipped') {

From 5c9b29cd0e238c3fade81b51f89f6dcd3bb3b53e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 22 Jul 2026 13:58:42 -0700
Subject: [PATCH 147/248] [eric] dashboard: suspend app-card live previews when
 off-screen or too small (frees renderers, kills zoomed-out lag)

---
 .../Dashboard/cards/DashboardViewCard.tsx     | 88 ++++++++++++++++++-
 1 file changed, 87 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 6da0a007..9b18f12f 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -47,6 +47,15 @@ const CORNER_SIZE = 14;
 const MIN_W = 320;
 const MIN_H = 200;
 
+// App-card preview suspend: a live Vite webview is the heaviest thing on the canvas, and unlike browser
+// cards these never suspended, so 4 reveal apps + a zoomed-out canvas all ran live = jank. A built app
+// has no login/scroll state worth keeping, so we just unmount the webview when the card is off-screen or
+// too small to read, and remount (reload) on return. Asymmetric: resume instantly, suspend after a beat
+// so panning past a card doesn't reload it.
+const APP_PREVIEW_MIN_PX = 260;   // below this on-screen width the live page is indistinguishable from a still
+const APP_PREVIEW_MARGIN_PX = 400; // resume once the card is within this of the viewport
+const APP_SUSPEND_SETTLE_MS = 1200;
+
 const CURSOR_MAP: Record<ResizeDir, string> = {
   n: 'ns-resize', s: 'ns-resize', e: 'ew-resize', w: 'ew-resize',
   nw: 'nwse-resize', se: 'nwse-resize', ne: 'nesw-resize', sw: 'nesw-resize',
@@ -152,6 +161,63 @@ const DashboardViewCard: React.FC<Props> = ({
   const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
   const isFullscreen = tileZone === 'fullscreen';
 
+  // Keep the live preview mounted only when the user can actually see/use this app card. Always live
+  // when it's being interacted with, driven by an agent, tiled, or selected; otherwise gated on being
+  // on-screen at a readable size. A suspended card shows its last frame (or a calm placeholder).
+  const alwaysLive = interactive || isSelected || isFullscreen || !!tileZone || showAgentGlow;
+  const [previewLive, setPreviewLive] = useState(true);
+  const [suspendSnapshot, setSuspendSnapshot] = useState<string | null>(null);
+  const previewLiveRef = useRef(true);
+  const suspendTimerRef = useRef<number | null>(null);
+  useEffect(() => {
+    const evaluate = (): void => {
+      let want: boolean;
+      if (alwaysLive) {
+        want = true;
+      } else {
+        const now = getCanvasState();
+        const vpEl = document.querySelector('[data-canvas-viewport]');
+        const vpW = vpEl ? (vpEl as HTMLElement).clientWidth : window.innerWidth;
+        const vpH = vpEl ? (vpEl as HTMLElement).clientHeight : window.innerHeight;
+        if (cardWidth * now.zoom < APP_PREVIEW_MIN_PX) {
+          want = false;
+        } else {
+          const m = APP_PREVIEW_MARGIN_PX / now.zoom;
+          const vx = -now.panX / now.zoom - m;
+          const vy = -now.panY / now.zoom - m;
+          const vw = vpW / now.zoom + 2 * m;
+          const vh = vpH / now.zoom + 2 * m;
+          want = cardX < vx + vw && cardX + cardWidth > vx && cardY < vy + vh && cardY + cardHeight > vy;
+        }
+      }
+      if (want === previewLiveRef.current) return;
+      if (want) {
+        if (suspendTimerRef.current) { clearTimeout(suspendTimerRef.current); suspendTimerRef.current = null; }
+        previewLiveRef.current = true;
+        setSuspendSnapshot(null);
+        setPreviewLive(true);
+      } else if (!suspendTimerRef.current) {
+        suspendTimerRef.current = window.setTimeout(() => {
+          suspendTimerRef.current = null;
+          // Grab the last frame BEFORE unmounting so the parked card shows the app, not a blank box.
+          void (async () => {
+            try { const snap = await previewRef.current?.capture?.(); if (snap) setSuspendSnapshot(snap); } catch { /* no frame = calm placeholder */ }
+            previewLiveRef.current = false;
+            setPreviewLive(false);
+          })();
+        }, APP_SUSPEND_SETTLE_MS);
+      }
+    };
+    evaluate();
+    window.addEventListener('openswarm:canvas-pan-changed', evaluate);
+    window.addEventListener('resize', evaluate);
+    return () => {
+      window.removeEventListener('openswarm:canvas-pan-changed', evaluate);
+      window.removeEventListener('resize', evaluate);
+      if (suspendTimerRef.current) { clearTimeout(suspendTimerRef.current); suspendTimerRef.current = null; }
+    };
+  }, [alwaysLive, cardX, cardY, cardWidth, cardHeight, getCanvasState]);
+
   // Deselecting the card exits interact mode (click anywhere else on canvas).
   useEffect(() => {
     if (!isSelected && interactive) dispatch(setActiveViewCardId(null));
@@ -685,6 +751,8 @@ const DashboardViewCard: React.FC<Props> = ({
           inputData={inputData}
           backendResult={backendResult}
           interactive={interactive}
+          previewLive={previewLive}
+          suspendSnapshot={suspendSnapshot}
           onAppClicked={() => dispatch(setActiveViewCardId(cardKey))}
           onRuntimeLog={handleRuntimeLog}
         />
@@ -830,9 +898,11 @@ const DashboardOutputPreview: React.FC<{
   inputData: Record<string, any>;
   backendResult: any;
   interactive: boolean;
+  previewLive: boolean;
+  suspendSnapshot: string | null;
   onAppClicked: () => void;
   onRuntimeLog?: (line: RuntimeLogLine) => void;
-}> = ({ previewRef, output, cardKey, instance = 1, inputData, backendResult, interactive, onAppClicked, onRuntimeLog }) => {
+}> = ({ previewRef, output, cardKey, instance = 1, inputData, backendResult, interactive, previewLive, suspendSnapshot, onAppClicked, onRuntimeLog }) => {
   const tokens = useClaudeTokens();
   const dispatch = useAppDispatch();
   const workspaceId = output.workspace_id ?? null;
@@ -936,6 +1006,22 @@ const DashboardOutputPreview: React.FC<{
     return <BootingBody />;
   }
 
+  // Parked (off-screen or too small to read): show the last frame (or a calm placeholder) instead of a
+  // live webview, so a zoomed-out canvas of apps doesn't run every Vite preview at once. Resumes on view.
+  if (!previewLive) {
+    return (
+      <Box sx={{ width: '100%', height: '100%', position: 'relative', bgcolor: tokens.bg.surface, overflow: 'hidden' }}>
+        {suspendSnapshot ? (
+          <Box component="img" src={suspendSnapshot} alt="" sx={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top left', display: 'block', filter: 'saturate(0.9)' }} />
+        ) : (
+          <Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Typography sx={{ color: tokens.text.ghost, fontSize: '0.82rem' }}>{output.name || 'App'}</Typography>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
   return (
     <ViewPreview
       ref={previewRef}

From be457d69cd2fb6f2fdfb0decfd48a749fe3a212f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 22 Jul 2026 14:02:11 -0700
Subject: [PATCH 148/248] [eric] onboarding: stagger the 4 reveal jobs so they
 populate one-by-one instead of spiking render at once

---
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 150654c6..09e505b9 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -38,6 +38,9 @@ function cadenceToSchedule(cadence: string): Record<string, unknown> {
 // has usually resolved; this only bites a user who outran it, and a brief wait for a COHERENT reveal beats
 // an instant one showing a previous run's stale greeting. Capped so it's never an open-ended spinner.
 const PREP_WAIT_CAP_MS = 5000;
+// Gap between auto-launched reveal jobs so four CLIs + a live app preview don't all boot in the same
+// frame on the user's first impression; also makes the cards populate one-by-one instead of at once.
+const JOB_STAGGER_MS = 2500;
 
 // Used when prep's aux dropped the automations field, so the reveal always demonstrates automation.
 // A useful digest (not a cleanup chore, which the value bar bans).
@@ -157,16 +160,20 @@ export function useOnboardingV3Pipeline() {
       // QA replay: run the flow, but never seed real jobs/schedules onto the tester's working canvas.
       if (isReplay) return;
       // The four auto-run showcase jobs, one per capability: build an app, dig the web, drive a real
-      // browser, and set up a scheduled task. Each fires INDEPENDENTLY (own draft session, own async
-      // launch, own error handling), so none waits on another and one failing never blocks the rest; a
-      // real first-run's provider token is fresh (just connected), so parallel launch is safe.
-      if (prep.app_title && prep.app_prompt) launchJob(prep.app_title, prep.app_prompt, 'app', prep.app_reason ?? '');
-      if (prep.research_title && prep.research_prompt) launchJob(prep.research_title, prep.research_prompt, 'research', prep.research_reason ?? '');
-      if (prep.browser_title && prep.browser_prompt) launchJob(prep.browser_title, prep.browser_prompt, 'browser', prep.browser_reason ?? '');
+      // browser, and set up a scheduled task. STAGGERED, not all-at-once: firing four CLIs + a live app
+      // preview in the same instant spiked the render on the user's very first impression. Spacing them
+      // ~2.5s apart spreads the load AND reads better, cards populate one-by-one ("watch it work") instead
+      // of lurching in together. Each still fires independently (own draft, own async launch, own errors);
+      // the app goes first so its build (the slowest) gets a head start.
+      const staggered: Array<() => void> = [];
+      if (prep.app_title && prep.app_prompt) staggered.push(() => launchJob(prep.app_title!, prep.app_prompt!, 'app', prep.app_reason ?? ''));
+      if (prep.research_title && prep.research_prompt) staggered.push(() => launchJob(prep.research_title!, prep.research_prompt!, 'research', prep.research_reason ?? ''));
+      if (prep.browser_title && prep.browser_prompt) staggered.push(() => launchJob(prep.browser_title!, prep.browser_prompt!, 'browser', prep.browser_reason ?? ''));
       // The scheduled task is a first-class part of the reveal (the "it automates for me" capability), so
       // guarantee one: use the model's automation when it emitted one (it sometimes drops the last JSON
       // field), else fall back to a safe, universally-useful weekly roundup.
-      createScheduledJob(prep.automations[0] ?? SCHEDULE_FALLBACK);
+      staggered.push(() => createScheduledJob(prep.automations[0] ?? SCHEDULE_FALLBACK));
+      staggered.forEach((fire, i) => { if (i === 0) fire(); else window.setTimeout(fire, i * JOB_STAGGER_MS); });
     });
   }, [launchJob, createScheduledJob, isReplay]);
 

From 940c1f2c902c02e456ace3cc24aa24c99752dcf6 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 22 Jul 2026 15:14:52 -0700
Subject: [PATCH 149/248] [eric] onboarding: reveal apps born as light
 click-to-open cards so the curtain lifts fully instant

---
 .../Dashboard/cards/DashboardViewCard.tsx     | 43 +++++++++++++++----
 .../hooks/lifecycle/useDashboardLifecycle.ts  |  3 +-
 .../src/shared/state/dashboardLayoutSlice.ts  | 15 ++++++-
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 9b18f12f..e5bd3ac3 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -15,7 +15,7 @@ import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
 import AddIcon from '@mui/icons-material/Add';
 import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
 import { Output, SERVE_BASE } from '@/shared/state/outputsSlice';
-import { setViewCardPosition, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard } from '@/shared/state/dashboardLayoutSlice';
+import { setViewCardPosition, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard, activateViewCardPreview } from '@/shared/state/dashboardLayoutSlice';
 import { removeViewCardCleanly } from '@/shared/viewTeardown';
 import WindowControls from './WindowControls';
 import { useTiledStyle } from './tileZones';
@@ -148,6 +148,12 @@ const DashboardViewCard: React.FC<Props> = ({
   const interactive = activeViewCardId === cardKey;
   const tileZone = useAppSelector((s) => s.dashboardLayout.tiledCards[cardKey]);
   const isMinimized = useAppSelector((s) => !!s.dashboardLayout.minimizedCards[cardKey]);
+  // Reveal-born apps stay a light "click to open" card until the first click, so the onboarding curtain
+  // lifts instantly instead of behind an in-frame live Vite boot. The click (selecting it) clears the flag.
+  const previewDeferred = useAppSelector((s) => !!s.dashboardLayout.viewCards[cardKey]?.preview_deferred);
+  useEffect(() => {
+    if (previewDeferred && (isSelected || interactive)) dispatch(activateViewCardPreview(cardKey));
+  }, [previewDeferred, isSelected, interactive, cardKey, dispatch]);
   // Tiled geometry must track pan/zoom, but the camera lives outside React now; subscribe to the pan event ONLY while tiled and read the live getter.
   const [tileTick, setTileTick] = useState(0);
   useEffect(() => {
@@ -165,14 +171,16 @@ const DashboardViewCard: React.FC<Props> = ({
   // when it's being interacted with, driven by an agent, tiled, or selected; otherwise gated on being
   // on-screen at a readable size. A suspended card shows its last frame (or a calm placeholder).
   const alwaysLive = interactive || isSelected || isFullscreen || !!tileZone || showAgentGlow;
-  const [previewLive, setPreviewLive] = useState(true);
+  const [previewLive, setPreviewLive] = useState(!previewDeferred);
   const [suspendSnapshot, setSuspendSnapshot] = useState<string | null>(null);
-  const previewLiveRef = useRef(true);
+  const previewLiveRef = useRef(!previewDeferred);
   const suspendTimerRef = useRef<number | null>(null);
   useEffect(() => {
     const evaluate = (): void => {
       let want: boolean;
-      if (alwaysLive) {
+      if (previewDeferred) {
+        want = false; // reveal-parked: never boot until the first click clears the defer
+      } else if (alwaysLive) {
         want = true;
       } else {
         const now = getCanvasState();
@@ -196,6 +204,11 @@ const DashboardViewCard: React.FC<Props> = ({
         previewLiveRef.current = true;
         setSuspendSnapshot(null);
         setPreviewLive(true);
+      } else if (previewDeferred) {
+        // Reveal-parked from birth: never booted, so no settle + no frame to capture, just stay light.
+        if (suspendTimerRef.current) { clearTimeout(suspendTimerRef.current); suspendTimerRef.current = null; }
+        previewLiveRef.current = false;
+        setPreviewLive(false);
       } else if (!suspendTimerRef.current) {
         suspendTimerRef.current = window.setTimeout(() => {
           suspendTimerRef.current = null;
@@ -216,7 +229,7 @@ const DashboardViewCard: React.FC<Props> = ({
       window.removeEventListener('resize', evaluate);
       if (suspendTimerRef.current) { clearTimeout(suspendTimerRef.current); suspendTimerRef.current = null; }
     };
-  }, [alwaysLive, cardX, cardY, cardWidth, cardHeight, getCanvasState]);
+  }, [alwaysLive, previewDeferred, cardX, cardY, cardWidth, cardHeight, getCanvasState]);
 
   // Deselecting the card exits interact mode (click anywhere else on canvas).
   useEffect(() => {
@@ -752,6 +765,7 @@ const DashboardViewCard: React.FC<Props> = ({
           backendResult={backendResult}
           interactive={interactive}
           previewLive={previewLive}
+          previewDeferred={previewDeferred}
           suspendSnapshot={suspendSnapshot}
           onAppClicked={() => dispatch(setActiveViewCardId(cardKey))}
           onRuntimeLog={handleRuntimeLog}
@@ -899,10 +913,11 @@ const DashboardOutputPreview: React.FC<{
   backendResult: any;
   interactive: boolean;
   previewLive: boolean;
+  previewDeferred: boolean;
   suspendSnapshot: string | null;
   onAppClicked: () => void;
   onRuntimeLog?: (line: RuntimeLogLine) => void;
-}> = ({ previewRef, output, cardKey, instance = 1, inputData, backendResult, interactive, previewLive, suspendSnapshot, onAppClicked, onRuntimeLog }) => {
+}> = ({ previewRef, output, cardKey, instance = 1, inputData, backendResult, interactive, previewLive, previewDeferred, suspendSnapshot, onAppClicked, onRuntimeLog }) => {
   const tokens = useClaudeTokens();
   const dispatch = useAppDispatch();
   const workspaceId = output.workspace_id ?? null;
@@ -1006,9 +1021,21 @@ const DashboardOutputPreview: React.FC<{
     return <BootingBody />;
   }
 
-  // Parked (off-screen or too small to read): show the last frame (or a calm placeholder) instead of a
-  // live webview, so a zoomed-out canvas of apps doesn't run every Vite preview at once. Resumes on view.
+  // Parked: show the last frame (or a placeholder) instead of a live webview, so a zoomed-out canvas of
+  // apps doesn't run every Vite preview at once, and the reveal curtain lifts without an in-frame boot.
   if (!previewLive) {
+    // Reveal-deferred: an inviting "built for you, click to open" card (no snapshot yet, never booted).
+    if (previewDeferred) {
+      return (
+        <Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.25, bgcolor: tokens.bg.surface, cursor: 'pointer' }}>
+          <Box sx={{ width: 44, height: 44, borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${tokens.accent.primary}1F`, color: tokens.accent.primary }}>
+            <VisibilityRoundedIcon sx={{ fontSize: 22 }} />
+          </Box>
+          <Typography sx={{ color: tokens.text.primary, fontSize: '0.92rem', fontWeight: 600 }}>{output.name || 'Your app'}</Typography>
+          <Typography sx={{ color: tokens.text.muted, fontSize: '0.78rem' }}>Built for you, click to open</Typography>
+        </Box>
+      );
+    }
     return (
       <Box sx={{ width: '100%', height: '100%', position: 'relative', bgcolor: tokens.bg.surface, overflow: 'hidden' }}>
         {suspendSnapshot ? (
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
index 4e05773f..62215261 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
@@ -345,7 +345,8 @@ export function useDashboardLifecycle({
         ? revealAppSpot(v3.revealAnchor)
         : null;
       if (revealSpot) {
-        dispatch(addViewCard({ outputId: output.id, expandedSessionIds, x: revealSpot.x, y: revealSpot.y }));
+        // Reveal: born as a light "click to open" card so the curtain lifts instantly, not behind a live Vite boot.
+        dispatch(addViewCard({ outputId: output.id, expandedSessionIds, x: revealSpot.x, y: revealSpot.y, previewDeferred: true }));
       } else {
         dispatch(addViewCard({ outputId: output.id, expandedSessionIds, parentSessionId: sid }));
       }
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index 34ec48bb..fc0b992c 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -52,6 +52,9 @@ export interface ViewCardPosition {
   height: number;
   zOrder: number;
   parent_session_id?: string | null;
+  // Reveal-born apps start as a light "built for you, click to open" card so the onboarding curtain
+  // lifts INSTANTLY instead of booting a live Vite preview in-frame. Cleared on first click -> boots.
+  preview_deferred?: boolean;
 }
 
 // Record key + card identity for a view card. The primary keeps the bare output_id so persisted layouts and every existing by-output lookup stay valid; secondaries append #N.
@@ -802,8 +805,10 @@ const dashboardLayoutSlice = createSlice({
       x?: number; y?: number; width?: number; height?: number;
       // Open ANOTHER independent instance of an already-open app instead of no-op'ing.
       newInstance?: boolean;
+      // Reveal-only: start as a light "click to open" card instead of booting the preview eagerly.
+      previewDeferred?: boolean;
     }>) {
-      const { outputId, expandedSessionIds, parentSessionId, x, y, width, height, newInstance } = action.payload;
+      const { outputId, expandedSessionIds, parentSessionId, x, y, width, height, newInstance, previewDeferred } = action.payload;
       let instance = 1;
       if (state.viewCards[outputId]) {
         if (!newInstance) return;
@@ -839,10 +844,17 @@ const dashboardLayoutSlice = createSlice({
         height: h,
         zOrder: state.nextZOrder++,
         parent_session_id: parentSessionId || null,
+        preview_deferred: previewDeferred || undefined,
       };
       state.pendingFocusViewCardId = cardKey;
     },
 
+    // First click on a reveal-parked app card: drop the defer so its live preview boots.
+    activateViewCardPreview(state, action: PayloadAction<string>) {
+      const card = state.viewCards[action.payload];
+      if (card && card.preview_deferred) card.preview_deferred = undefined;
+    },
+
     clearPendingFocusViewCardId(state) {
       state.pendingFocusViewCardId = null;
     },
@@ -1821,6 +1833,7 @@ export const {
   clearAllTiles,
   clearCardWindowState,
   clearPendingFocusBrowserId,
+  activateViewCardPreview,
   clearPendingFocusViewCardId,
   addWorkflowCard,
   setWorkflowCardPosition,

From c0370e3a51851b9856765cc08714dae4e338f06b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 22 Jul 2026 15:38:10 -0700
Subject: [PATCH 150/248] [eric] chat: pill-aware in-place message editing
 (skills render as chips, elements stay attached, no raw markup)

---
 .../pages/AgentChat/bubbles/MessageBubble.tsx |  80 ++-----------
 .../AgentChat/bubbles/MessageEditSurface.tsx  | 110 ++++++++++++++++++
 2 files changed, 120 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx

diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index 9479575a..e36ea81e 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
-import InputBase from '@mui/material/InputBase';
+import MessageEditSurface from './MessageEditSurface';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Tooltip from '@mui/material/Tooltip';
@@ -861,7 +861,6 @@ interface Props {
 const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, onSaveEdit, onCancelEdit, isStreaming, dynamicTurnLabel, viewportHeight = 0, viewportWidth = 0, scrollRoot = null, revealRef }) => {
   const c = useClaudeTokens();
   const dispatch = useAppDispatch();
-  const [editText, setEditText] = useState('');
   const [pickerOpen, setPickerOpen] = useState(false);
   const bubbleRootRef = React.useRef<HTMLDivElement | null>(null);
   const contentRef = React.useRef<HTMLDivElement | null>(null);
@@ -1020,21 +1019,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
     }
   }, [message.id, openswarmError?.kind, dispatch]);
 
-  React.useEffect(() => {
-    if (editing) setEditText(rawText);
-  }, [editing, rawText]);
-
   const handleCancelEdit = () => {
-    setEditText('');
-    onCancelEdit?.();
-  };
-
-  const handleSaveEdit = () => {
-    const trimmed = editText.trim();
-    if (trimmed && trimmed !== rawText && onSaveEdit) {
-      onSaveEdit(message.id, trimmed);
-    }
-    setEditText('');
     onCancelEdit?.();
   };
 
@@ -1092,60 +1077,15 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
       >
         {isUser ? (
           editing ? (
-            // Claude's edit grammar: the message widens to the full column and becomes an editable
-            // field in place (subtle surface, no explainer banner), with two quiet controls under it.
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75, width: '100%' }}>
-              <InputBase
-                multiline
-                fullWidth
-                value={editText}
-                onChange={(e) => setEditText(e.target.value)}
-                autoFocus
-                onKeyDown={(e) => {
-                  e.stopPropagation();
-                  if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    handleSaveEdit();
-                  }
-                  if (e.key === 'Escape') handleCancelEdit();
-                }}
-                sx={{
-                  color: c.text.primary,
-                  fontSize: '0.875rem',
-                  lineHeight: 1.55,
-                  bgcolor: 'rgba(255,255,255,0.06)',
-                  borderRadius: '10px',
-                  px: 1.25,
-                  py: 1,
-                  '& textarea': { p: 0 },
-                }}
-              />
-              <Box sx={{ display: 'flex', gap: 0.5, justifyContent: 'flex-end', alignItems: 'center' }}>
-                <Button
-                  size="small"
-                  onClick={handleCancelEdit}
-                  sx={{ color: c.text.muted, fontSize: '0.75rem', textTransform: 'none', minWidth: 0, px: 1 }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  size="small"
-                  onClick={handleSaveEdit}
-                  disabled={!editText.trim() || editText.trim() === rawText}
-                  sx={{
-                    color: c.accent.primary,
-                    fontWeight: 600,
-                    fontSize: '0.75rem',
-                    textTransform: 'none',
-                    minWidth: 0,
-                    px: 1,
-                    '&.Mui-disabled': { color: c.text.ghost },
-                  }}
-                >
-                  Save
-                </Button>
-              </Box>
-            </Box>
+            // Claude's edit grammar, pill-aware: skills render as chips and selected-elements stay
+            // attached (read-only) instead of the message dumping raw {{skill:...}} / element markup.
+            <MessageEditSurface
+              userMessage={displayText}
+              elementSuffix={rawText.slice(displayText.length)}
+              elementLabels={selectedElements.map((el) => el.label)}
+              onSave={(full) => { if (full !== rawText && onSaveEdit) onSaveEdit(message.id, full); onCancelEdit?.(); }}
+              onCancel={handleCancelEdit}
+            />
           ) : (
             <Box>
               {message.images && message.images.length > 0 && (
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
new file mode 100644
index 00000000..542206e9
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useRef } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import {
+  deserializeToEditor, serializeEditorContent, type AttachedSkill,
+} from '@/app/components/editor/richEditorUtils';
+
+const SKILL_RE = /\{\{skill:([^}]+)\}\}/g;
+
+// Reconstruct the AttachedSkill map from a message's raw {{skill:X}} markers so the edit surface can
+// render them as real chips (like the composer) instead of the ugly raw braces the old textarea showed.
+function skillsFromText(text: string): Record<string, AttachedSkill> {
+  const byName: Record<string, AttachedSkill> = {};
+  let i = 0;
+  for (const m of text.matchAll(SKILL_RE)) {
+    const name = m[1];
+    if (!byName[name]) byName[name] = { id: `edit-skill-${i++}-${name}`, name, content: '' };
+  }
+  return byName;
+}
+
+interface Props {
+  // The editable prose (everything before the element-context block). Skill markers render as chips.
+  userMessage: string;
+  // The trailing "Selected UI Elements" block (or ''), preserved read-only and re-attached on save.
+  elementSuffix: string;
+  // Human labels for the preserved element context, shown as quiet read-only chips.
+  elementLabels: string[];
+  onSave: (fullContent: string) => void;
+  onCancel: () => void;
+}
+
+// Pill-aware, in-place edit for a user message: same contenteditable + skill-chip grammar as the main
+// composer, so editing a message with skills/selected-elements no longer dumps raw {{skill:...}} and
+// "---Selected UI Elements---" text into a bare textarea. Elements stay attached (read-only) across an edit.
+const MessageEditSurface: React.FC<Props> = ({ userMessage, elementSuffix, elementLabels, onSave, onCancel }) => {
+  const c = useClaudeTokens();
+  const editorRef = useRef<HTMLDivElement>(null);
+  const skillsRef = useRef<Record<string, AttachedSkill>>({});
+
+  // Populate the contenteditable ONCE (uncontrolled: React must not re-write innerHTML under the cursor).
+  useEffect(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    const remove = (id: string): void => { delete skillsRef.current[id]; };
+    skillsRef.current = deserializeToEditor(el, userMessage, skillsFromText(userMessage), remove, c.font.mono, c.status.error);
+    el.focus();
+    // Cursor to the end so typing appends, matching how you'd resume the message.
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const save = (): void => {
+    const el = editorRef.current;
+    if (!el) return;
+    const edited = serializeEditorContent(el, skillsRef.current).trim();
+    if (!edited) return; // never let an edit blank the message
+    onSave(edited + elementSuffix);
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75, width: '100%' }}>
+      {elementLabels.length > 0 && (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+          {elementLabels.map((label, i) => (
+            <Box key={i} sx={{ fontSize: '0.68rem', color: c.text.muted, bgcolor: 'rgba(255,255,255,0.06)', border: `1px solid ${c.border.subtle}`, borderRadius: '999px', px: 0.9, py: 0.15, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {label}
+            </Box>
+          ))}
+        </Box>
+      )}
+      <Box
+        ref={editorRef}
+        contentEditable
+        suppressContentEditableWarning
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); save(); }
+          if (e.key === 'Escape') { e.preventDefault(); onCancel(); }
+        }}
+        sx={{
+          color: c.text.primary,
+          fontSize: '0.875rem',
+          lineHeight: 1.55,
+          bgcolor: 'rgba(255,255,255,0.06)',
+          borderRadius: '10px',
+          px: 1.25,
+          py: 1,
+          minHeight: '1.55em',
+          outline: 'none',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          '&:focus': { boxShadow: `0 0 0 1px ${c.accent.primary}55` },
+        }}
+      />
+      <Box sx={{ display: 'flex', gap: 0.5, justifyContent: 'flex-end', alignItems: 'center' }}>
+        <Button size="small" onClick={onCancel} sx={{ color: c.text.muted, fontSize: '0.75rem', textTransform: 'none', minWidth: 0, px: 1 }}>Cancel</Button>
+        <Button size="small" onClick={save} sx={{ color: c.accent.primary, fontWeight: 600, fontSize: '0.75rem', textTransform: 'none', minWidth: 0, px: 1 }}>Save</Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default MessageEditSurface;

From 45b1b151a692f6d560ca5a8a3c10c0a0a10782f7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 14:29:11 -0700
Subject: [PATCH 151/248] [eric] onboarding: instant reveal + 3 tailored
 starters, drop auto-spawn

---
 backend/apps/onboarding/prep.py               |  65 +++++++--
 .../OnboardingV3/useOnboardingV3Pipeline.ts   | 132 ++----------------
 .../src/app/pages/AgentChat/AgentChat.tsx     |   3 +-
 .../pages/AgentChat/WelcomeQuickReplies.tsx   |  45 +++++-
 .../hooks/lifecycle/useDashboardLifecycle.ts  |  21 +--
 .../lifecycle/useOnboardingRevealSeed.ts      | 116 ++-------------
 frontend/src/shared/starterCategories.ts      |  19 ++-
 7 files changed, 133 insertions(+), 268 deletions(-)

diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index 0202a250..4ab3ffdb 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -11,7 +11,7 @@ from typing import List, Optional
 from typeguard import typechecked
 
 from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
-from backend.apps.onboarding.models import PrepRequest, PrepResponse
+from backend.apps.onboarding.models import PrepRequest, PrepResponse, ScanResult
 from backend.apps.settings.models import AppSettings, PersonalizedAutomation, PersonalizedStarter
 
 VALID_CADENCE = {"daily", "weekday", "weekly"}
@@ -292,6 +292,47 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
     )
 
 
+@typechecked
+def p_scan_grounded_starters(scan: ScanResult) -> List[PersonalizedStarter]:
+    """Build starters from the REAL scan (no LLM): each references something concrete on this machine, a
+    screenshot pile, a content-heavy folder, the app they lean on, their code projects. Every one produces
+    a keepable artifact and never modifies an existing file, so even the no-LLM path is genuinely tailored."""
+    out: List[PersonalizedStarter] = []
+    apps = scan.signal_apps[:3]
+    # Screenshots -> a browsable gallery page (real deliverable from their real files).
+    shots = next((f for f in scan.folders if f.screenshot_count > 2), None)
+    if shots:
+        out.append(PersonalizedStarter(
+            title="Frame my screenshots",
+            prompt=f"Find the screenshot images in my {shots.name} folder and build one browsable gallery web page showing them as a neat scrollable grid. Write only the new page; never move or delete the originals.",
+            reason=f"{shots.screenshot_count} screenshots sitting in {shots.name}.",
+        ))
+    # A content-heavy folder -> a searchable index page of what's in it.
+    docs = next((f for f in scan.folders if f.name in ("Documents", "Downloads", "Desktop") and f.entry_count > 5 and f.top_extensions), None)
+    if docs:
+        ext = docs.top_extensions[0].lstrip(".") or "file"
+        out.append(PersonalizedStarter(
+            title=f"Index my {ext} files",
+            prompt=f"Look through my {docs.name} folder and build one searchable index page listing my {ext} files with their names and dates so I can find things fast. Write only the new page; do not move or delete anything.",
+            reason=f"{docs.entry_count} files in {docs.name}, lots of .{ext}.",
+        ))
+    # Top signal app -> live web research for current tips (a real answer, not a plan).
+    if apps:
+        out.append(PersonalizedStarter(
+            title=f"{apps[0]} tips",
+            prompt=f"Search the web right now for the most useful current tips, shortcuts, and workflows for {apps[0]}, and give me a tight summary with dated sources.",
+            reason=f"You lean on {apps[0]} a lot.",
+        ))
+    # Code projects -> a plain-English recap of where each stands.
+    if scan.git_repo_count > 0:
+        out.append(PersonalizedStarter(
+            title="Recap my projects",
+            prompt="Look at the code projects on my computer, read each one's README and recent activity, and write me one short page summarizing what each project is and where it stands. Write only the summary; change nothing.",
+            reason=f"{scan.git_repo_count} code projects on your machine.",
+        ))
+    return out
+
+
 @typechecked
 def p_scan_grounded_fallback(request: PrepRequest) -> PrepResponse:
     """When the aux call can't be made (a sole gemini/codex lane returns empty on 0.3.60, provider
@@ -300,26 +341,22 @@ def p_scan_grounded_fallback(request: PrepRequest) -> PrepResponse:
     scan = request.scan
     if scan is None:
         return PrepResponse(greeting="", starters=list(FALLBACK_STARTERS))
-    downloads = next((f for f in scan.folders if f.name == "Downloads" and f.entry_count > 0), None)
     apps = scan.signal_apps[:3]
+    starters = p_scan_grounded_starters(scan)
+    # Backfill from the generic list ONLY to reach four, and only when the machine was too sparse to
+    # ground three real ones. On a normal Mac all four come from the scan, so 3-of-4 stays tailored.
+    for s in FALLBACK_STARTERS:
+        if len(starters) >= 4:
+            break
+        if all(s.title != existing.title for existing in starters):
+            starters.append(s)
+    downloads = next((f for f in scan.folders if f.name == "Downloads" and f.entry_count > 0), None)
     bits: List[str] = []
     if downloads:
         bits.append(f"{downloads.entry_count} files in Downloads")
     if apps:
         bits.append(", ".join(apps))
     greeting = f"I took a look around your Mac: {'; '.join(bits)}. Here is where I would start." if bits else ""
-    starters: List[PersonalizedStarter] = []
-    if downloads:
-        starters.append(PersonalizedStarter(
-            title="Audit Downloads",
-            prompt=f"Scan my Downloads folder ({downloads.entry_count} files) and produce one report grouping files by type with cleanup suggestions. Do not move or delete anything; write only the report.",
-            reason=f"Downloads has {downloads.entry_count} files worth sorting.",
-        ))
-    for s in FALLBACK_STARTERS:
-        if len(starters) >= 4:
-            break
-        if all(s.title != existing.title for existing in starters):
-            starters.append(s)
     # Ground the research card on their top tool so the "looked into this" card still appears cross-provider.
     research_title = ""
     research_prompt = ""
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 09e505b9..bfdea934 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -1,56 +1,22 @@
 import { useCallback, useRef, useState } from 'react';
-import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { updateSettingsPatch, type PersonalizedAutomation } from '@/shared/state/settingsSlice';
-import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from '@/shared/state/agentsSlice';
-import { createWorkflow } from '@/shared/state/workflowsSlice';
-import { hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
-import { getLastDashboardId } from '@/shared/lastDashboardId';
-import { setFlowActive, stageReveal, addPreppedJob } from '@/shared/state/onboardingV3Slice';
+import { useAppDispatch } from '@/shared/hooks';
+import { updateSettingsPatch } from '@/shared/state/settingsSlice';
+import { setFlowActive, stageReveal } from '@/shared/state/onboardingV3Slice';
 import { useThemeAccent, useThemeMode } from '@/shared/styles/ThemeContext';
 import {
   fetchIdentity, runPrep, runScan, summarizeScan,
   type PrepResponse, type ProviderIdentity, type ScanResult,
 } from './onboardingV3Api';
 import { summarizeUsage, type ProviderUsage, type UsageProvider } from '@/shared/providerUsage';
-import type { ModelOption } from '@/shared/state/modelsSlice';
-
-// The auto-launched onboarding jobs must ride the CHEAP tier, not the user's premium default; running two Sonnet/Opus agents unprompted on first launch would burn real quota. Pick the lowest-intelligence (cheapest) model in the default's provider group, so a Claude user's demo runs on Haiku, a ChatGPT user's on mini.
-function pickCheapModel(byProvider: Record<string, ModelOption[]>, def: string): string {
-  const groups = Object.values(byProvider);
-  const all = groups.flat();
-  if (!all.length) return def;
-  const defGroup = groups.find((g) => g.some((m) => m.value === def));
-  const pool = (defGroup && defGroup.length ? defGroup : all).filter((m) => Array.isArray(m.tiers));
-  if (!pool.length) return def;
-  return [...pool].sort((a, b) => (a.tiers![0]) - (b.tiers![0]))[0].value;
-}
-
-// Turn an automation's cadence into a real schedule (9am local): daily = every day, weekday = Mon-Fri,
-// weekly = Mondays. The first run is always in the future, so the keep/discard toast can cancel it first.
-function cadenceToSchedule(cadence: string): Record<string, unknown> {
-  const base = { enabled: true, repeat_every: 1, hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 };
-  if (cadence === 'daily') return { ...base, repeat_unit: 'day', on_days: [] };
-  if (cadence === 'weekday') return { ...base, repeat_unit: 'week', on_days: [1, 2, 3, 4, 5] };
-  return { ...base, repeat_unit: 'week', on_days: [1] };
-}
 
 // How long finish() will wait for prep before staging the reveal. Prep is kicked early (theme beat) so it
 // has usually resolved; this only bites a user who outran it, and a brief wait for a COHERENT reveal beats
 // an instant one showing a previous run's stale greeting. Capped so it's never an open-ended spinner.
 const PREP_WAIT_CAP_MS = 5000;
-// Gap between auto-launched reveal jobs so four CLIs + a live app preview don't all boot in the same
-// frame on the user's first impression; also makes the cards populate one-by-one instead of at once.
-const JOB_STAGGER_MS = 2500;
 
-// Used when prep's aux dropped the automations field, so the reveal always demonstrates automation.
-// A useful digest (not a cleanup chore, which the value bar bans).
-const SCHEDULE_FALLBACK: PersonalizedAutomation = {
-  title: 'Weekly Roundup',
-  prompt: 'Search the web for the most notable new tools, articles, and releases from this past week in technology and design, and write a short, skimmable roundup to a dated file at Documents/weekly_roundup_<date>.md. Do it in one pass with no questions.',
-  cadence: 'weekly',
-};
-
-// The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat, and the moment prep resolves the audit AND the app build launch as REAL background agents, so the curtain lifts on work already in motion. Every stage fails soft; the flow never blocks on any of it.
+// The curtain machinery: scan kicks off during the OAuth wait, prep during the theme beat. No agents or
+// apps auto-spawn anymore, the reveal lands INSTANTLY on a clean welcome chat whose greeting + starters
+// are personalized from prep, and the user picks what to run first. Every stage fails soft; nothing blocks.
 export function useOnboardingV3Pipeline() {
   const dispatch = useAppDispatch();
   const { accent, gradient } = useThemeAccent();
@@ -60,24 +26,12 @@ export function useOnboardingV3Pipeline() {
   const scanRef = useRef<Promise<ScanResult | null> | null>(null);
   const prepRef = useRef<Promise<PrepResponse | null> | null>(null);
   // The resolved prep, readable SYNCHRONOUSLY at finish() time: lets the reveal seed with the real
-  // jobs/greeting the instant they're ready (the common case, prep finishes during the beats) without
+  // greeting/starters the instant they're ready (the common case, prep finishes during the beats) without
   // awaiting, so the curtain never blocks behind a spinner.
   const prepReadyRef = useRef<PrepResponse | null>(null);
   const scanResultRef = useRef<ScanResult | null>(null);
   const usageSummaryRef = useRef<string>('');
   const usageReadRef = useRef<Promise<void> | null>(null);
-  const connected = useAppSelector((s) => hasModelConnected(s));
-  const cheapModel = useAppSelector((s) => pickCheapModel(s.models.byProvider, s.settings.data.default_model));
-  const launchCtxRef = useRef({ connected: false, model: 'sonnet' });
-  launchCtxRef.current = { connected, model: cheapModel };
-  const launchedRef = useRef(false);
-  // Dev replay (osw_force_onboarding): show the whole flow WITHOUT spawning 4 real agents + a scheduled
-  // workflow onto the tester's live dashboard. The flag is stripped in prod, so a real first-run (empty
-  // machine) always gets its wow jobs; only a QA replay on an existing dashboard skips the clutter+lag.
-  const isReplay = ((): boolean => {
-    if (process.env.NODE_ENV === 'production') return false;
-    try { return localStorage.getItem('osw_force_onboarding') === '1'; } catch { return false; }
-  })();
 
   const kickIdentity = useCallback(() => {
     fetchIdentity().then((ids) => { identityRef.current = ids; setIdentity(ids); }).catch(() => {});
@@ -106,45 +60,6 @@ export function useOnboardingV3Pipeline() {
       : Promise.resolve(null);
   }, []);
 
-  // Fire one real background agent; the session exists in redux without a card until the reveal composes the canvas.
-  const launchJob = useCallback((title: string, prompt: string, kind: 'app' | 'research' | 'browser', reason: string) => {
-    const { model: liveModel } = launchCtxRef.current;
-    const dashboardId = getLastDashboardId() ?? undefined;
-    // All three run with full tools: the app build writes its own workspace, research + the browser task
-    // save their findings. The browser task is kept safe by its PROMPT (public pages, never log in/buy).
-    const config: AgentConfig = { name: title, model: liveModel, mode: 'agent', dashboard_id: dashboardId };
-    const draftId = dispatch(createDraftSession({ mode: 'agent', model: liveModel, dashboardId: dashboardId ?? '', setActive: false })).payload.draftId;
-    // Reveal cards open ENLARGED so the user sees the real work (not tiny collapsed stubs), and the
-    // yellow minimize button then has something to collapse. The seeder stacks them at expanded height.
-    void dispatch(launchAndSendFirstMessage({ draftId, config, prompt, mode: 'agent', model: liveModel, expand: true }))
-      .then((action) => {
-        if (launchAndSendFirstMessage.fulfilled.match(action)) {
-          dispatch(addPreppedJob({ sessionId: action.payload.session.id, title, kind, reason }));
-        }
-      })
-      .catch(() => {});
-  }, [dispatch]);
-
-  // Set up ONE real scheduled task from the automations, so the reveal shows OpenSwarm having already
-  // automated something for the user, not just run one-off jobs. It's a real workflow on a real schedule
-  // (first run in the future); the keep/discard toast can delete it. Rides the cheap model like the jobs.
-  const createScheduledJob = useCallback((auto: PersonalizedAutomation) => {
-    const { model: liveModel } = launchCtxRef.current;
-    const dashboardId = getLastDashboardId() ?? undefined;
-    void dispatch(createWorkflow({
-      title: auto.title,
-      description: 'Set up for you during onboarding.',
-      steps: [{ id: `step-${Date.now().toString(36)}`, text: auto.prompt, enabled: true }],
-      schedule: cadenceToSchedule(auto.cadence) as never,
-      dashboard_id: dashboardId,
-      model: liveModel,
-    })).unwrap()
-      .then((wf) => {
-        dispatch(addPreppedJob({ sessionId: '', workflowId: wf.id, title: auto.title, kind: 'schedule', reason: `runs ${auto.cadence} on its own` }));
-      })
-      .catch(() => {});
-  }, [dispatch]);
-
   const kickPrep = useCallback((pickedApps: string[]) => {
     if (prepRef.current) return;
     const scanPromise = scanRef.current ?? Promise.resolve(null);
@@ -152,30 +67,9 @@ export function useOnboardingV3Pipeline() {
     prepRef.current = Promise.all([scanPromise, usagePromise])
       .then(([scan]) => runPrep(scan, pickedApps, identityRef.current, usageSummaryRef.current))
       .catch(() => null);
-    // Launch the prepped work MID-FLOW (theme/card beats cover the latency): audit + app build, gated to a real connected model so the fragile free trial never carries it.
-    void prepRef.current.then((prep) => {
-      prepReadyRef.current = prep;
-      if (launchedRef.current || !prep || !prep.greeting || !launchCtxRef.current.connected) return;
-      launchedRef.current = true;
-      // QA replay: run the flow, but never seed real jobs/schedules onto the tester's working canvas.
-      if (isReplay) return;
-      // The four auto-run showcase jobs, one per capability: build an app, dig the web, drive a real
-      // browser, and set up a scheduled task. STAGGERED, not all-at-once: firing four CLIs + a live app
-      // preview in the same instant spiked the render on the user's very first impression. Spacing them
-      // ~2.5s apart spreads the load AND reads better, cards populate one-by-one ("watch it work") instead
-      // of lurching in together. Each still fires independently (own draft, own async launch, own errors);
-      // the app goes first so its build (the slowest) gets a head start.
-      const staggered: Array<() => void> = [];
-      if (prep.app_title && prep.app_prompt) staggered.push(() => launchJob(prep.app_title!, prep.app_prompt!, 'app', prep.app_reason ?? ''));
-      if (prep.research_title && prep.research_prompt) staggered.push(() => launchJob(prep.research_title!, prep.research_prompt!, 'research', prep.research_reason ?? ''));
-      if (prep.browser_title && prep.browser_prompt) staggered.push(() => launchJob(prep.browser_title!, prep.browser_prompt!, 'browser', prep.browser_reason ?? ''));
-      // The scheduled task is a first-class part of the reveal (the "it automates for me" capability), so
-      // guarantee one: use the model's automation when it emitted one (it sometimes drops the last JSON
-      // field), else fall back to a safe, universally-useful weekly roundup.
-      staggered.push(() => createScheduledJob(prep.automations[0] ?? SCHEDULE_FALLBACK));
-      staggered.forEach((fire, i) => { if (i === 0) fire(); else window.setTimeout(fire, i * JOB_STAGGER_MS); });
-    });
-  }, [launchJob, createScheduledJob, isReplay]);
+    // Cache the resolved prep so finish() can stage the reveal the instant it's ready, no await.
+    void prepRef.current.then((prep) => { prepReadyRef.current = prep; });
+  }, []);
 
   const finish = useCallback(async (outcome: 'done' | 'skipped') => {
     if (outcome === 'skipped') {
@@ -185,9 +79,9 @@ export function useOnboardingV3Pipeline() {
     }
     dispatch(updateSettingsPatch({ onboarding_v3: 'done', accent_color: accent, accent_gradient: gradient, theme: mode }));
     // Wait for prep (kicked early during the beats, usually already resolved) so the welcome greeting +
-    // starters are from the SAME prep as the launched jobs. A previous run's greeting persists in settings,
-    // so staging the reveal before this patch landed showed a stale, mismatched greeting; persist FIRST,
-    // then stage. Capped so a user who outran prep waits a beat, never an open-ended spinner.
+    // starters are coherent. A previous run's greeting persists in settings, so staging the reveal before
+    // this patch landed showed a stale greeting; persist FIRST, then stage. Capped so a user who outran
+    // prep waits a beat, never an open-ended spinner.
     let prep = prepReadyRef.current;
     if (!prep && prepRef.current) {
       prep = (await Promise.race([
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index b7af3e1c..bc0eaca9 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -1609,7 +1609,8 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               '&:hover': { scrollbarColor: `${c.border.medium} transparent` },
             }}
           >
-            <Box>
+            {/* The welcome greeting is the FIRST thing and it's the agent talking, no user message above it, so give it real air under the header instead of sitting flush at the top. */}
+            <Box sx={{ pt: session.is_welcome_draft ? 4 : 0 }}>
             {session.context_overflow && (() => {
               const reason = session.context_overflow.reason;
               const isAuth = reason === 'openswarm_pro_auth_expired' || reason === 'anthropic_auth_invalid' || reason === 'auth_error';
diff --git a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
index c6a55c48..69138c4f 100644
--- a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+++ b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
@@ -2,12 +2,35 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Sparkles } from 'lucide-react';
 import { useAppSelector } from '@/shared/hooks';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { STARTER_CATEGORIES } from '@/shared/starterCategories';
 import AutomationChips from '@/app/components/nudges/AutomationChips';
 
+// The always-present 4th option for anyone who doesn't see themselves in the 3 tailored starters: a warm,
+// no-personalization-needed "just start talking" that asks OpenSwarm to show what it can do on their machine.
+const ANCHOR_PROMPT = "I'm new to OpenSwarm. Show me a few concrete things you could do for me right now on my computer, then pick the single most useful one and actually do it as a quick demo.";
+
+const AnchorButton: React.FC<{ c: ClaudeTokens; onPick: (p: string) => void; delay?: number }> = ({ c, onPick, delay = 0 }) => (
+  <motion.button
+    onClick={() => onPick(ANCHOR_PROMPT)}
+    initial={{ opacity: 0, scale: 0.92 }}
+    animate={{ opacity: 1, scale: 1 }}
+    transition={{ type: 'spring', stiffness: 420, damping: 26, delay }}
+    style={{
+      display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left', width: '100%',
+      padding: '10px 14px', borderRadius: 11,
+      border: `1px solid ${c.border.medium}`, background: c.bg.surface,
+      color: c.text.secondary, fontSize: '0.88rem', fontWeight: 500,
+      cursor: 'pointer', fontFamily: 'inherit',
+    }}
+  >
+    <Sparkles size={15} color={c.accent.primary} style={{ flexShrink: 0 }} />
+    Not sure? Show me what you can do
+  </motion.button>
+);
+
 // Quick-reply chips that sit UNDER the streamed greeting bubble. Two levels: category -> concrete prompts. Research/Write/Learn -> onPick (real run); Build -> onPickBuilder (prefill). The greeting itself is a real streamed assistant message (see useWelcomeGreeting); this is just the follow-up affordance. Pure UI, no run until the parent fires.
 const WelcomeQuickReplies: React.FC<{
   c: ClaudeTokens;
@@ -15,11 +38,12 @@ const WelcomeQuickReplies: React.FC<{
   onPickBuilder: (prompt: string) => void;
 }> = ({ c, onPick, onPickBuilder }) => {
   const [expanded, setExpanded] = React.useState<string | null>(null);
-  // Onboarding v3's prep wrote starters about THIS user's machine and apps; they lead, generic categories demote to "More ideas".
-  const personalized = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
+  // Onboarding v3's prep wrote starters about THIS user's machine and apps; they lead, generic categories demote to "More ideas". Show the top 3 tailored + the always-present anchor = 4 options (prep returns 4, so we keep the strongest three and let the anchor be the fourth).
+  const personalized = useAppSelector((s) => (s.settings.data.personalized_starters ?? []).slice(0, 3));
   const [showCategories, setShowCategories] = React.useState(personalized.length === 0);
   const currentCategory = STARTER_CATEGORIES.find((cat) => cat.id === expanded);
   const isAppBuilder = currentCategory?.target === 'app-builder';
+  const isSchedule = currentCategory?.target === 'schedule';
   const currentPrompts = currentCategory?.prompts ?? [];
 
   const pick = (prompt: string) => {
@@ -59,6 +83,7 @@ const WelcomeQuickReplies: React.FC<{
                   {s.title}
                 </motion.button>
               ))}
+              <AnchorButton c={c} onPick={onPick} delay={0.08 + personalized.length * 0.06} />
             </Box>
             <Typography sx={{ color: c.text.ghost, fontSize: '0.78rem', mt: 1.4, mb: 0.6 }}>
               worth putting on a schedule
@@ -123,6 +148,11 @@ const WelcomeQuickReplies: React.FC<{
                 </motion.button>
               ))}
             </Box>
+            {personalized.length === 0 && (
+              <Box sx={{ mt: 1 }}>
+                <AnchorButton c={c} onPick={onPick} delay={0.08 + STARTER_CATEGORIES.length * 0.07} />
+              </Box>
+            )}
           </motion.div>
         ) : (
           <motion.div
@@ -147,6 +177,14 @@ const WelcomeQuickReplies: React.FC<{
             >
               <ArrowLeft size={14} /> back
             </Box>
+            {isSchedule ? (
+              <>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
+                  one click puts it on a schedule
+                </Typography>
+                <AutomationChips c={c} />
+              </>
+            ) : (
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.7 }}>
               {currentPrompts.map((prompt, i) => (
                 <motion.button
@@ -170,6 +208,7 @@ const WelcomeQuickReplies: React.FC<{
                 </motion.button>
               ))}
             </Box>
+            )}
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
index 62215261..d2d65512 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useDashboardLifecycle.ts
@@ -2,7 +2,6 @@ import { useEffect, useRef, useState, type MutableRefObject } from 'react';
 import { report } from '@/shared/serviceClient';
 import { store } from '@/shared/state/store';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { revealAppSpot } from './useOnboardingRevealSeed';
 import {
   fetchSessions,
   fetchHistory,
@@ -338,28 +337,14 @@ export function useDashboardLifecycle({
       if (sess.dashboard_id !== dashboardId) continue;
       autoOpenedOutputsRef.current.add(output.id);
       if (viewCards[output.id]) continue;
-      // The onboarding reveal's app is born at its composed arc-end spot (right of the note), not in
-      // the parent's column, so no post-hoc move ever races layout persistence. One-shot per reveal.
-      const v3 = store.getState().onboardingV3;
-      const revealSpot = (v3.revealAnchor && v3.prepped.some((j) => j.kind === 'app' && j.sessionId === sid))
-        ? revealAppSpot(v3.revealAnchor)
-        : null;
-      if (revealSpot) {
-        // Reveal: born as a light "click to open" card so the curtain lifts instantly, not behind a live Vite boot.
-        dispatch(addViewCard({ outputId: output.id, expandedSessionIds, x: revealSpot.x, y: revealSpot.y, previewDeferred: true }));
-      } else {
-        dispatch(addViewCard({ outputId: output.id, expandedSessionIds, parentSessionId: sid }));
-      }
+      dispatch(addViewCard({ outputId: output.id, expandedSessionIds, parentSessionId: sid }));
       const outputId = output.id;
       setTimeout(() => {
         const vc = store.getState().dashboardLayout.viewCards[outputId];
         if (!vc) return;
         const rects = [{ x: vc.x, y: vc.y, width: vc.width, height: vc.height }];
-        // Reveal spot: frame just the app (the note edges into frame on its left); otherwise include the parent chat.
-        if (!revealSpot) {
-          const ac = store.getState().dashboardLayout.cards[sid];
-          if (ac) rects.push({ x: ac.x, y: ac.y, width: ac.width, height: ac.height });
-        }
+        const ac = store.getState().dashboardLayout.cards[sid];
+        if (ac) rects.push({ x: ac.x, y: ac.y, width: ac.width, height: ac.height });
         canvasActions.revealCards(rects);
         handleHighlightCard(outputId);
       }, 200);
diff --git a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
index 19939017..a233260d 100644
--- a/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/lifecycle/useOnboardingRevealSeed.ts
@@ -1,88 +1,27 @@
-import { useCallback, useEffect, useRef, type RefObject } from 'react';
+import { useEffect, useRef, type RefObject } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { store } from '@/shared/state/store';
-import {
-  placeCard, openWorkflowsApp, setWorkflowsHubPosition, setWorkflowsHubSize,
-  clearPendingFocusWorkflowsHub, setViewCardPosition,
-  DEFAULT_CARD_W, EXPANDED_CARD_MIN_H,
-} from '@/shared/state/dashboardLayoutSlice';
-import { clearReveal, setRevealAnchor } from '@/shared/state/onboardingV3Slice';
+import { DEFAULT_CARD_W, EXPANDED_CARD_MIN_H } from '@/shared/state/dashboardLayoutSlice';
+import { clearReveal } from '@/shared/state/onboardingV3Slice';
 
 interface Args {
   isActive: boolean;
   dashboardId: string;
-  expandedSessionIds: string[];
   viewportRef: RefObject<HTMLDivElement | null>;
   canvasStateRef: RefObject<{ panX: number; panY: number; zoom: number }>;
   createWelcomeDraft: () => void;
   fitToCards: (rects: Array<{ x: number; y: number; width: number; height: number }>, maxZoom?: number, animate?: boolean, minZoom?: number, centered?: boolean) => void;
 }
 
-const GAP = 48;
-// The scheduled task opens the FULL Workflows app (rich detail view), sized to span the 2-column agent
-// grid below it so the default 1280x800 hub doesn't dominate the reveal.
-const REVEAL_WORKFLOW_W = 2 * DEFAULT_CARD_W + GAP;
-const REVEAL_WORKFLOW_H = 560;
-
-/** Where the reveal's app view card is born: right of the welcome chat, top-aligned. The "here's what I did" legend is the fixed RevealHero panel, not a canvas note, so the app sits right next to the chat. */
-export function revealAppSpot(anchor: { cx: number; cy: number }): { x: number; y: number } {
-  return { x: anchor.cx + DEFAULT_CARD_W / 2 + GAP, y: anchor.cy - EXPANDED_CARD_MIN_H / 2 };
-}
-
-// The reveal: onboarding v3 finished behind the curtain and the prepped work (a personal dashboard app, a live web-research dig, a read-only file tidy-up, and one recurring task) has been running since mid-flow. Compose: welcome chat center, job grid + Workflows app to its left, app view card born to its right (via revealAnchor + the lifecycle auto-add). The camera lands on JUST the chat + app slot at readable zoom; the rest peeks in from the left for the user to click into. The keep/discard toast owns the jobs' fate afterward.
-export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards }: Args): void {
+// The reveal: onboarding v3 finished behind the curtain and the flow lands INSTANTLY on a single clean
+// welcome chat (no auto-spawned agents or app preview, that lag is gone). Its greeting + starters are
+// personalized from prep; the user picks what to run first. We just seed the chat and frame the camera on
+// it at readable zoom.
+export function useOnboardingRevealSeed({ isActive, dashboardId, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards }: Args): void {
   const dispatch = useAppDispatch();
   const revealPending = useAppSelector((s) => s.onboardingV3.revealPending);
-  const prepped = useAppSelector((s) => s.onboardingV3.prepped);
   const settingsLoaded = useAppSelector((s) => s.settings.loaded);
   const seededRef = useRef(false);
-  // Jobs launch async at prep-resolve, so some land in `prepped` a beat AFTER the curtain lifts. The
-  // anchor + placed-set let us keep dropping those cards in the same left stack instead of losing them.
-  const anchorRef = useRef<{ cx: number; cy: number } | null>(null);
-  const placedRef = useRef<Set<string>>(new Set());
-  // Only the agent-card jobs flow into the 2-column grid; the schedule gets its own wide slot below, so
-  // count agent cards separately or the schedule would leave a hole in the grid rhythm.
-  const agentCountRef = useRef(0);
 
-  const placeJobs = useCallback(() => {
-    const a = anchorRef.current;
-    if (!a) return;
-    // Grid geometry, shared by placement here and the schedule's below-grid slot.
-    const gridLeftX = a.cx - DEFAULT_CARD_W / 2 - 2 * GAP - 2 * DEFAULT_CARD_W;
-    const gridTopY = a.cy - EXPANDED_CARD_MIN_H / 2;
-    prepped.forEach((job) => {
-      // Every job shows its AGENT card (its live transcript), including the app builder, so the reveal
-      // makes it obvious the agent is BUILDING the app, not just a "building..." box. Its finished app
-      // view card appears beside it when it renders (birth-position path in useDashboardLifecycle).
-      const key = job.workflowId || job.sessionId;
-      if (placedRef.current.has(key)) return;
-      if (job.kind === 'schedule' && job.workflowId) {
-        // The scheduled task opens the FULL Workflows app (its rich detail view: schedule + steps), not
-        // the compact run-monitor card, so the reveal shows off the real automation GUI. It sits in a wide
-        // slot below the agent grid. Opening the app normally snaps the camera to the hub (a fitToCards on
-        // pendingFocusWorkflowsHub); clear that flag so the reveal's own framing wins.
-        const sy = gridTopY + 2 * (EXPANDED_CARD_MIN_H + 24);
-        dispatch(openWorkflowsApp({ workflowId: job.workflowId, expandedSessionIds }));
-        dispatch(clearPendingFocusWorkflowsHub());
-        dispatch(setWorkflowsHubSize({ width: REVEAL_WORKFLOW_W, height: REVEAL_WORKFLOW_H }));
-        dispatch(setWorkflowsHubPosition({ x: gridLeftX, y: sy }));
-      } else {
-        // 2-column grid to the LEFT of the welcome chat. A single tall column (enlarged cards stacked)
-        // forced the camera so far out the cards went unreadable; wide-and-short frames at a legible zoom.
-        const gi = agentCountRef.current;
-        agentCountRef.current += 1;
-        const col = gi % 2;
-        const row = Math.floor(gi / 2);
-        const x = gridLeftX + col * (DEFAULT_CARD_W + GAP);
-        const y = gridTopY + row * (EXPANDED_CARD_MIN_H + 24);
-        dispatch(placeCard({ sessionId: job.sessionId, x, y, width: DEFAULT_CARD_W, height: EXPANDED_CARD_MIN_H, expandedSessionIds, exact: true }));
-      }
-      placedRef.current.add(key);
-    });
-  }, [prepped, dispatch, expandedSessionIds]);
-
-  // One-time: fix the anchor, seed the welcome chat + the "head start" note, place jobs present so far,
-  // then frame the camera on the whole cluster so the curtain lifts onto a composed, readable scene.
   useEffect(() => {
     if (!revealPending || seededRef.current || !isActive || !settingsLoaded) return;
     seededRef.current = true;
@@ -93,38 +32,16 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
         const vr = vp.getBoundingClientRect();
         const cx = (vr.width / 2 - cs.panX) / cs.zoom;
         const cy = (vr.height / 2 - cs.panY) / cs.zoom;
-        anchorRef.current = { cx, cy };
-        dispatch(setRevealAnchor({ cx, cy }));
-        const app = prepped.find((j) => j.kind === 'app');
-        // The "here's what I did" legend is the fixed RevealHero panel (top-center, unmissable, live
-        // status), not a canvas note, so there is no wall-of-text sticky to miss here anymore.
-        placeJobs();
-        // The app agent often creates its output BEFORE the curtain lifts (it gets a head start at
-        // connect), so its view card was auto-added with no anchor to stage against. Move it to the
-        // arc-end spot now; the birth-position path in useDashboardLifecycle covers late arrivals.
-        if (app?.sessionId) {
-          const now = store.getState();
-          const out = Object.values(now.outputs.items).find((o) => o.session_id === app.sessionId);
-          if (out && now.dashboardLayout.viewCards[out.id]) {
-            const spot = revealAppSpot({ cx, cy });
-            dispatch(setViewCardPosition({ outputId: out.id, x: spot.x, y: spot.y }));
-          }
-        }
         createWelcomeDraft();
-        // Land READABLE: frame only the welcome chat + the app slot beside it. Fitting the whole
-        // cluster (grid + Workflows row, ~2000x1850 canvas) forced ~25% zoom: text unreadable AND
-        // every card on-screen at once (nothing can suspend). The job grid edges into the left of
-        // frame as the discovery cue, and the app view card is born inside the frame so its arrival
-        // never yanks the camera; one click on any card still focuses it (fitToCards at 1.15).
-        const frameLeft = cx - DEFAULT_CARD_W / 2;
-        const frameRight = revealAppSpot({ cx, cy }).x + DEFAULT_CARD_W;
-        // Reserve headroom at the top so the chat header clears the macOS traffic lights + the
-        // floating dashboard title pill + the RevealHero panel, instead of landing under them.
+        // Frame the welcome chat, centered. Reserve headroom up top so the chat header clears the macOS
+        // traffic lights + the floating dashboard title pill instead of landing under them.
         const TOP_CHROME_PAD = 130;
         fitToCards(
-          [{ x: frameLeft, y: cy - EXPANDED_CARD_MIN_H / 2 - TOP_CHROME_PAD, width: frameRight - frameLeft, height: EXPANDED_CARD_MIN_H + TOP_CHROME_PAD }],
+          [{ x: cx - DEFAULT_CARD_W / 2, y: cy - EXPANDED_CARD_MIN_H / 2 - TOP_CHROME_PAD, width: DEFAULT_CARD_W, height: EXPANDED_CARD_MIN_H + TOP_CHROME_PAD }],
           0.9,
           true,
+          undefined,
+          true,
         );
       } else {
         createWelcomeDraft();
@@ -132,10 +49,5 @@ export function useOnboardingRevealSeed({ isActive, dashboardId, expandedSession
     } finally {
       dispatch(clearReveal());
     }
-  }, [revealPending, isActive, settingsLoaded, prepped, dashboardId, expandedSessionIds, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards, dispatch, placeJobs]);
-
-  // Jobs that launched after the curtain lifted: drop their cards in as they arrive.
-  useEffect(() => {
-    if (seededRef.current) placeJobs();
-  }, [prepped, placeJobs]);
+  }, [revealPending, isActive, settingsLoaded, dashboardId, viewportRef, canvasStateRef, createWelcomeDraft, fitToCards, dispatch]);
 }
diff --git a/frontend/src/shared/starterCategories.ts b/frontend/src/shared/starterCategories.ts
index 0ac779d8..e7a5063e 100644
--- a/frontend/src/shared/starterCategories.ts
+++ b/frontend/src/shared/starterCategories.ts
@@ -1,13 +1,13 @@
-import { Search, Hammer, Globe, Plug } from 'lucide-react';
+import { Search, Hammer, Globe, CalendarClock } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
-// Two-level starters shared by the empty-state and the first-run welcome chat: pick a category, then a concrete prompt. Chosen to SHOWCASE what only OpenSwarm can do, and to feel PERSONAL: the agents can see the user's own computer/files, drive the browser, plug into their apps (MCPs), build real apps, and run agents in parallel, none of which a plain chatbot can do out of the box. Many prompts deliberately touch the user's own stuff so it matters to them. One-click-runnable (no [placeholders]); reads plainly for a non-dev. All run as a normal agent; the 'build' category (target 'app-builder') just prefills the composer in the welcome chat instead of auto-sending, since the agent builds the app in-place (it calls CreateApp and the live card drops on the canvas).
+// Two-level starters shared by the empty-state and the first-run welcome chat: pick a category, then a concrete prompt. Chosen to SHOWCASE what only OpenSwarm can do, and to feel PERSONAL: the agents can see the user's own computer/files, drive the browser, build real apps, and run recurring routines on a schedule, none of which a plain chatbot can do out of the box. Many prompts deliberately touch the user's own stuff so it matters to them. One-click-runnable (no [placeholders]); reads plainly for a non-dev. Labels name the END RESULT, not the mechanism. The 'build' category (target 'app-builder') prefills the composer since the agent builds the app in-place (CreateApp drops a live card); the 'schedule' category (target 'schedule') hands off to the automation chips, which turn a pick into a real scheduled workflow.
 export type StarterCategory = {
   id: string;
   label: string;
   Icon: LucideIcon;
   prompts: string[];
-  target?: 'app-builder';
+  target?: 'app-builder' | 'schedule';
 };
 
 export const STARTER_CATEGORIES: StarterCategory[] = [
@@ -42,13 +42,10 @@ export const STARTER_CATEGORIES: StarterCategory[] = [
     ],
   },
   {
-    // MCPs: plug your real tools in and let agents work across them.
-    id: 'connect', label: 'Connect your apps', Icon: Plug,
-    prompts: [
-      'Summarize my Gmail inbox and flag what actually needs a reply',
-      'Turn my Notion notes into a clear action plan',
-      'Look at my calendar and lay out a realistic plan for my week',
-      'Pull a sheet from my Google Drive and chart what matters',
-    ],
+    // Recurring routines on a real schedule: the pick hands off to AutomationChips (target 'schedule'),
+    // which shows THIS user's tailored automations and turns a click into a scheduled workflow. Label
+    // names the payoff (a brief waiting for you), not the machinery. No inline prompts: the chips own them.
+    id: 'schedule', label: 'Daily brief', Icon: CalendarClock, target: 'schedule',
+    prompts: [],
   },
 ];

From e37be2f9fca35ead5fcacbe335d24c8fb81b6497 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 14:29:11 -0700
Subject: [PATCH 152/248] [eric] license: MIT to AGPL-3.0

---
 LICENSE               | 674 ++++++++++++++++++++++++++++++++++++++++--
 electron/package.json |   1 +
 frontend/package.json |   1 +
 3 files changed, 659 insertions(+), 17 deletions(-)

diff --git a/LICENSE b/LICENSE
index fde97d56..be3f7b28 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,661 @@
-MIT License
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
-Copyright (c) 2026 Haik Decie
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+                            Preamble
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.
diff --git a/electron/package.json b/electron/package.json
index 3d1c78a9..a54422d9 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -1,6 +1,7 @@
 {
   "name": "openswarm",
   "version": "1.5.8",
+  "license": "AGPL-3.0-only",
   "description": "OpenSwarm — AI Agent Orchestrator",
   "author": "openswarm-ai",
   "main": "main.js",
diff --git a/frontend/package.json b/frontend/package.json
index 5bfcd358..e115efb0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,7 @@
 {
   "name": "open-swarm",
   "version": "1.0.0",
+  "license": "AGPL-3.0-only",
   "description": "Open Swarm — Agent Orchestrator frontend built with React",
   "scripts": {
     "build": "webpack --mode=production",

From df5ec0a018a335b72da6e6cf9e3ae808c5119df7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 14:30:53 -0700
Subject: [PATCH 153/248] [eric] dashboard: composer-hero empty state, type
 scale, text-size setting

---
 .../src/app/components/Layout/AppShell.tsx    |   8 +
 .../app/pages/Dashboard/DashboardToolbar.tsx  |   5 +-
 .../Dashboard/canvas/DashboardCanvas.tsx      |   3 +
 .../Dashboard/canvas/DashboardEmptyState.tsx  | 252 +++++++++---------
 .../Dashboard/canvas/DashboardOverlays.tsx    |   3 +
 .../Dashboard/desktop/DesktopSpawnPill.tsx    |   2 +-
 .../hooks/state/useDashboardController.ts     |  11 +-
 .../sections/general/GeneralInterface.tsx     |  34 +++
 frontend/src/shared/state/settingsSlice.ts    |   3 +
 frontend/src/shared/styles/claudeTokens.ts    |  27 +-
 10 files changed, 215 insertions(+), 133 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 3063e4fd..8485c43e 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -467,6 +467,14 @@ const AppShell: React.FC = () => {
     else root.style.removeProperty('--osw-header-inset');
     return () => { root.style.removeProperty('--osw-header-inset'); };
   }, [sidebarAway]);
+  // Global text-size ratio (Settings > Interface). Scaling the root font-size scales every rem-based
+  // size in one shot, so type grows or shrinks together with no layout breakage. Clamped to a sane band
+  // so a corrupt value can never wreck the whole UI.
+  const uiFontScale = useAppSelector((s) => s.settings.data.ui_font_scale ?? 1);
+  useEffect(() => {
+    const clamped = Math.min(1.4, Math.max(0.8, uiFontScale || 1));
+    document.documentElement.style.fontSize = `${Math.round(clamped * 100)}%`;
+  }, [uiFontScale]);
   // When the sidebar is docked, the macOS traffic lights sit over its top strip, which is a window
   // drag region that swallows mousemove, so the canvas hover-reveal can never fire there. Broadcast
   // "chrome docked" so the canvas keeps the native lights visible while the sidebar is open (they only
diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index c3c438dd..bf1b1799 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -44,6 +44,7 @@ interface Props {
   onAddNote: () => void;
   dashboardId?: string;
   newAgentBounce?: boolean;
+  canvasEmpty?: boolean;
   onNewAgentBounceEnd?: () => void;
   // Text to seed the composer with when it opens (starter-prompt click).
   prefillPrompt?: string;
@@ -70,7 +71,7 @@ function formatRelativeTime(dateStr: string | null): string {
 }
 
 const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
-  ({ inputOpen, onNewAgent, onCancel, onSend, onAddView, onHistoryResume, onAddBrowser, onAddNote, dashboardId, newAgentBounce, onNewAgentBounceEnd, prefillPrompt, prefillMode }, ref) => {
+  ({ inputOpen, onNewAgent, onCancel, onSend, onAddView, onHistoryResume, onAddBrowser, onAddNote, dashboardId, newAgentBounce, canvasEmpty, onNewAgentBounceEnd, prefillPrompt, prefillMode }, ref) => {
     const c = useClaudeTokens();
     const dispatch = useAppDispatch();
     const elementSelection = useElementSelection();
@@ -600,7 +601,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
               )}
             </Box>
           </div>
-        ) : (
+        ) : canvasEmpty ? null : (
           <DesktopSpawnPill
             onOpenComposer={() => {
               if (newAgentBounce) onNewAgentBounceEnd?.();
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 6341f302..fed07fd3 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -66,6 +66,7 @@ interface DashboardCanvasProps {
   toolbarOpen: boolean;
   searchPaletteOpen: boolean;
   newAgentBounce: boolean;
+  canvasEmpty: boolean;
   toolbarRef: RefObject<HTMLDivElement>;
   spawnOriginsRef: RefObject<Record<string, SpawnOrigin>>;
   revealSpawnedRef: RefObject<Set<string>>;
@@ -129,6 +130,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   toolbarOpen,
   searchPaletteOpen,
   newAgentBounce,
+  canvasEmpty,
   toolbarRef,
   spawnOriginsRef,
   revealSpawnedRef,
@@ -427,6 +429,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         toolbarOpen={toolbarOpen}
         searchPaletteOpen={searchPaletteOpen}
         newAgentBounce={newAgentBounce}
+        canvasEmpty={canvasEmpty}
         toolbarRef={toolbarRef}
         onNewAgent={onNewAgent}
         onToolbarCancel={onToolbarCancel}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
index be471602..3d7ab1f1 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
@@ -1,17 +1,37 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { motion, AnimatePresence } from 'framer-motion';
-import { ArrowLeft } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { Search, Hammer, Globe, CalendarClock, FolderGit2, Sparkles, ArrowUp, Image as ImageIcon } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useAppSelector } from '@/shared/hooks';
 import {
   hasModelConnected,
   hasFreeTrialActive,
 } from '@/app/components/Onboarding/steps/skipPredicates';
-import { STARTER_CATEGORIES } from '@/shared/starterCategories';
 
-// Returning-user empty state (the first-run greeting now lives in the auto-popped welcome chat). Quiet: a one-line prompt + the shared starter chips for users who can run, or a connect-a-model hint for users who can't. Two-level: category -> concrete prompts.
+// Empty canvas, styled after ChatGPT / Claude / Manus: a short question, a centered composer as the HERO, then a few TAILORED, icon-led suggestions (the onboarding scan wrote them), never abstract category buttons. Font sizes come from the shared type scale so it reads clean.
+type Suggestion = { title: string; prompt: string };
+
+const FALLBACK_SUGGESTIONS: Suggestion[] = [
+  { title: 'Research something and give me a clear comparison', prompt: 'Research a topic I care about and give me a tight, current comparison with dated sources. Ask me the topic first if you need to.' },
+  { title: 'Build me a small app I can use right now', prompt: 'Build me a simple, useful app I can use right now, and drop it on my canvas.' },
+  { title: 'Send an agent to find something on the web', prompt: 'Open a real website and do a multi-step task for me, then report what you found.' },
+];
+
+// Give each suggestion a leading icon inferred from what it does, so the list reads like real actions (the way ChatGPT tags suggestions with app icons) instead of a wall of identical rows.
+function iconForStarter(text: string): LucideIcon {
+  const t = text.toLowerCase();
+  if (/screenshot|image|photo|gallery|frame/.test(t)) return ImageIcon;
+  if (/schedule|daily|brief|weekly|morning|every day/.test(t)) return CalendarClock;
+  if (/build|app|tool|make me|dashboard/.test(t)) return Hammer;
+  if (/web|browse|site|online|flight|price|open a/.test(t)) return Globe;
+  if (/project|repo|readme|codebase/.test(t)) return FolderGit2;
+  if (/research|compare|find|look up|best|search/.test(t)) return Search;
+  return Sparkles;
+}
+
 const DashboardEmptyState: React.FC<{
   c: ClaudeTokens;
   onLaunch?: (prompt: string, mode: string, model: string) => void;
@@ -20,138 +40,120 @@ const DashboardEmptyState: React.FC<{
   const model = useAppSelector((s) => s.settings.data.default_model);
   const mode = useAppSelector((s) => s.settings.data.default_mode);
   const canRun = useAppSelector((s) => hasFreeTrialActive(s) || hasModelConnected(s));
+  const personalized = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
+  const [text, setText] = React.useState('');
   const [launching, setLaunching] = React.useState(false);
-  const [expanded, setExpanded] = React.useState<string | null>(null);
-  const currentCategory = STARTER_CATEGORIES.find((cat) => cat.id === expanded);
-  const currentPrompts = currentCategory?.prompts ?? [];
 
-  const showChips = !!onLaunch && canRun;
-
-  // "Build an app" launches a normal agent like every other starter; the agent calls CreateApp and its live card drops on the canvas. No separate App Builder mode/page anymore.
   const launch = (prompt: string) => {
-    if (launching) return;
-    if (onLaunch) {
-      setLaunching(true);
-      onLaunch(prompt, mode, model);
-      return;
-    }
-    if (onStarter) onStarter(prompt);
+    const p = prompt.trim();
+    if (launching || !p) return;
+    if (onLaunch) { setLaunching(true); onLaunch(p, mode, model); return; }
+    if (onStarter) onStarter(p);
   };
 
+  const suggestions: Suggestion[] = personalized.length > 0
+    ? personalized.slice(0, 4).map((s) => ({ title: s.title, prompt: s.prompt }))
+    : FALLBACK_SUGGESTIONS;
+
   return (
     <Box
       sx={{
-        position: 'absolute',
-        inset: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        pointerEvents: 'none',
+        position: 'absolute', inset: 0,
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        pointerEvents: 'none', px: 3,
       }}
     >
-      <Typography sx={{ color: c.text.secondary, fontSize: '1.3rem', fontWeight: 500, mb: 2.2, textAlign: 'center' }}>
-        What do you want done?
-      </Typography>
-
-      {showChips ? (
-        <Box sx={{ width: '100%', maxWidth: 560, pointerEvents: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <AnimatePresence mode="wait" initial={false}>
-            {expanded === null ? (
-              <motion.div
-                key="categories"
-                initial={{ opacity: 0, y: 6 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -4 }}
-                transition={{ duration: 0.2 }}
-                style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}
-              >
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.9rem', mb: 1.4 }}>
-                  pick one, or just tell me below
-                </Typography>
-                <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1.2, width: '100%', maxWidth: 460 }}>
-                  {STARTER_CATEGORIES.map((cat) => (
-                    <Box
-                      component="button"
-                      key={cat.id}
-                      onClick={() => setExpanded(cat.id)}
-                      sx={{
-                        display: 'flex', alignItems: 'center', gap: 1.1,
-                        px: 1.9, py: 1.3,
-                        borderRadius: 2.5,
-                        border: `1px solid ${c.border.medium}`,
-                        background: c.bg.surface,
-                        color: c.text.secondary,
-                        fontSize: '0.98rem', fontWeight: 500,
-                        cursor: 'pointer', fontFamily: 'inherit',
-                        transition: 'background 150ms, border-color 150ms',
-                        '&:hover': { background: c.bg.elevated, borderColor: c.border.strong },
-                      }}
-                    >
-                      <cat.Icon size={18} />
-                      {cat.label}
-                    </Box>
-                  ))}
-                </Box>
-              </motion.div>
-            ) : (
-              <motion.div
-                key="specifics"
-                initial={{ opacity: 0, y: 4 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -4 }}
-                transition={{ duration: 0.18 }}
-                style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}
-              >
-                <Box
-                  component="button"
-                  onClick={() => setExpanded(null)}
-                  sx={{
-                    display: 'inline-flex', alignItems: 'center', gap: 0.5,
-                    mb: 1.2, px: 1, py: 0.4,
-                    border: 'none', background: 'transparent',
-                    color: c.text.ghost, fontSize: '0.9rem',
-                    cursor: 'pointer', fontFamily: 'inherit',
-                    '&:hover': { color: c.text.secondary },
-                  }}
-                >
-                  <ArrowLeft size={15} /> back
-                </Box>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.9, width: '100%', maxWidth: 480 }}>
-                  {currentPrompts.map((prompt) => (
-                    <Box
-                      component="button"
-                      key={prompt}
-                      onClick={() => launch(prompt)}
-                      disabled={launching}
-                      sx={{
-                        textAlign: 'left',
-                        px: 1.8, py: 1.1,
-                        borderRadius: 2,
-                        border: `1px solid ${c.border.medium}`,
-                        background: c.bg.surface,
-                        color: c.text.secondary,
-                        fontSize: '0.95rem',
-                        cursor: launching ? 'default' : 'pointer',
-                        opacity: launching ? 0.5 : 1,
-                        fontFamily: 'inherit',
-                        transition: 'background 150ms, border-color 150ms',
-                        '&:hover': launching ? {} : { background: c.bg.elevated, borderColor: c.border.strong },
-                      }}
-                    >
-                      {prompt}
-                    </Box>
-                  ))}
-                </Box>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </Box>
-      ) : (
-        <Typography sx={{ color: c.text.ghost, fontSize: '0.95rem' }}>
-          Connect a model in Settings to get started.
+      <Box sx={{ width: '100%', maxWidth: 620, pointerEvents: 'auto', display: 'flex', flexDirection: 'column' }}>
+        <Typography sx={{ color: c.text.primary, fontSize: c.font.size.display, fontWeight: 600, textAlign: 'center', letterSpacing: '-0.01em', mb: 3 }}>
+          What do you want done?
         </Typography>
-      )}
+
+        {canRun && !!onLaunch ? (
+          <>
+            {/* The hero: a real composer you can just start typing into. Fixed-dark to match the app's
+                floating chrome (sidebar, pills, chat cards), not a stark white box that fights the canvas. */}
+            <Box
+              sx={{
+                display: 'flex', alignItems: 'center', gap: 1,
+                background: 'rgba(22,12,34,0.72)',
+                backdropFilter: 'blur(20px) saturate(160%)',
+                WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+                border: '1px solid rgba(255,255,255,0.12)', borderRadius: '16px',
+                px: 2, py: 1.25, boxShadow: '0 12px 34px rgba(0,0,0,0.32)', mb: 2.5,
+                transition: 'border-color 150ms, box-shadow 150ms',
+                '&:focus-within': { borderColor: 'rgba(255,255,255,0.28)' },
+              }}
+            >
+              <Box
+                component="input"
+                value={text}
+                autoFocus
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setText(e.target.value)}
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); launch(text); setText(''); }
+                }}
+                placeholder="Ask me anything..."
+                disabled={launching}
+                sx={{
+                  flex: 1, border: 'none', outline: 'none', bgcolor: 'transparent',
+                  color: 'rgba(255,255,255,0.92)', fontFamily: 'inherit', fontSize: c.font.size.md,
+                  '&::placeholder': { color: 'rgba(255,255,255,0.45)' },
+                }}
+              />
+              <Box
+                component="button"
+                aria-label="Send"
+                onClick={() => { launch(text); setText(''); }}
+                disabled={launching || !text.trim()}
+                sx={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+                  width: 32, height: 32, borderRadius: '50%', border: 'none',
+                  bgcolor: text.trim() ? c.accent.primary : 'rgba(255,255,255,0.12)',
+                  color: text.trim() ? '#fff' : 'rgba(255,255,255,0.5)',
+                  cursor: text.trim() ? 'pointer' : 'default',
+                  transition: 'background 150ms, color 150ms',
+                }}
+              >
+                <ArrowUp size={17} />
+              </Box>
+            </Box>
+
+            {/* Tailored, icon-led suggestions. */}
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+              {suggestions.map((s, i) => {
+                const Ic = iconForStarter(`${s.title} ${s.prompt}`);
+                return (
+                  <Box
+                    key={s.title}
+                    component={motion.button}
+                    onClick={() => launch(s.prompt)}
+                    disabled={launching}
+                    initial={{ opacity: 0, y: 4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.25, delay: 0.05 + i * 0.05 }}
+                    sx={{
+                      display: 'flex', alignItems: 'center', gap: 1.5, textAlign: 'left', width: '100%',
+                      px: 1.75, py: 1.25, borderRadius: '12px',
+                      border: `1px solid transparent`, background: 'transparent',
+                      color: c.text.secondary, fontFamily: 'inherit', fontSize: c.font.size.base,
+                      cursor: launching ? 'default' : 'pointer',
+                      transition: 'background 150ms, border-color 150ms',
+                      '&:hover': launching ? {} : { background: c.bg.surface, borderColor: c.border.subtle },
+                    }}
+                  >
+                    <Ic size={17} style={{ color: c.text.muted, flexShrink: 0 }} />
+                    {s.title}
+                  </Box>
+                );
+              })}
+            </Box>
+          </>
+        ) : (
+          <Typography sx={{ color: c.text.ghost, fontSize: c.font.size.base, textAlign: 'center' }}>
+            Connect a model in Settings to get started.
+          </Typography>
+        )}
+      </Box>
     </Box>
   );
 };
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index abf9f1b6..f25351df 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -39,6 +39,7 @@ interface DashboardOverlaysProps {
   toolbarOpen: boolean;
   searchPaletteOpen: boolean;
   newAgentBounce: boolean;
+  canvasEmpty: boolean;
   toolbarRef: RefObject<HTMLDivElement>;
   onNewAgent: () => void;
   onToolbarCancel: () => void;
@@ -72,6 +73,7 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
   toolbarOpen,
   searchPaletteOpen,
   newAgentBounce,
+  canvasEmpty,
   toolbarRef,
   onNewAgent,
   onToolbarCancel,
@@ -105,6 +107,7 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
           onAddNote={onAddNote}
           dashboardId={dashboardId}
           newAgentBounce={newAgentBounce}
+          canvasEmpty={canvasEmpty}
           onNewAgentBounceEnd={onNewAgentBounceEnd}
           prefillPrompt={toolbarPrefill}
           prefillMode={toolbarPrefillMode}
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index 863cc55d..b1895b7d 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -137,7 +137,7 @@ function DesktopSpawnPill({
             mr: 1.5,
           }}
         >
-          Spawn an agent...
+          Ask me anything...
         </Typography>
         <Box
           role="button"
diff --git a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
index 7a06e8ba..bb4d112b 100644
--- a/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/state/useDashboardController.ts
@@ -88,8 +88,12 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
 
   // Nudge the chat button while the canvas is empty; the first click dismisses it for this visit.
   const bounceDismissedRef = useRef(false);
+  // Truly-empty canvas: matches the empty-state hero's own render condition (fullscreen is handled
+  // separately, it display:none's the whole overlay layer), so "pill hidden" always coincides with
+  // "hero shown" and a workflow-card-only canvas never ends up with no composer at all.
   const canvasEmpty = layoutInitialized && sessionList.length === 0
-    && Object.keys(viewCards).length === 0 && Object.keys(browserCards).length === 0;
+    && Object.keys(viewCards).length === 0 && Object.keys(browserCards).length === 0
+    && Object.keys(workflowCards).length === 0 && !workflowsHub;
   useEffect(() => {
     setNewAgentBounce(canvasEmpty && !bounceDismissedRef.current);
   }, [canvasEmpty, setNewAgentBounce]);
@@ -163,11 +167,10 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
     spawnOriginsRef,
   });
 
-  // Onboarding v3 reveal: seeds the personalized note + welcome chat the instant the flow's curtain lifts.
+  // Onboarding v3 reveal: seeds the personalized welcome chat the instant the flow's curtain lifts.
   useOnboardingRevealSeed({
     isActive,
     dashboardId,
-    expandedSessionIds,
     viewportRef: canvas.viewportRef,
     canvasStateRef,
     createWelcomeDraft,
@@ -333,7 +336,7 @@ export function useDashboardController(dashboardId: string, isActive: boolean) {
     workflowCards, workflowsHub,
     expandedSessionIds, tethers, highlightedCardId, autoFocusSessionId,
     focusedCardId, pendingFocusNoteId, multiDragDelta, shakeDirection,
-    neighborDirections, toolbarOpen, searchPaletteOpen, newAgentBounce,
+    neighborDirections, toolbarOpen, searchPaletteOpen, newAgentBounce, canvasEmpty,
     toolbarRef, spawnOriginsRef, revealSpawnedRef, measuredHeightsRef, getCanvasState,
     toolbarPrefill,
     toolbarPrefillMode,
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 94d62fa3..885d3162 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -67,6 +67,40 @@ const GeneralInterface: React.FC<{
         </ToggleButtonGroup>
       </Box>
 
+      <Box sx={inlineRowSx} {...settingSelectAttrs('ui_font_scale', 'Text size', 'Interface', 'Scales all text across the app; layout stays intact.')}>
+        <Box sx={{ mr: 3 }}>
+          <Typography sx={labelSx}>Text size</Typography>
+          <Typography sx={descSx}>Scales all text across the app. Layout stays intact.</Typography>
+        </Box>
+        <ToggleButtonGroup
+          value={form.ui_font_scale ?? 1}
+          exclusive
+          onChange={(_, v) => { if (v) setForm({ ...form, ui_font_scale: v }); }}
+          size="small"
+          sx={{
+            '& .MuiToggleButton-root': {
+              color: c.text.muted,
+              borderColor: c.border.medium,
+              textTransform: 'none',
+              px: 1.75,
+              py: 0.5,
+              fontSize: '0.8rem',
+              '&.Mui-selected': {
+                bgcolor: `${c.accent.primary}15`,
+                color: c.accent.primary,
+                borderColor: c.accent.primary,
+                '&:hover': { bgcolor: `${c.accent.primary}20` },
+              },
+            },
+          }}
+        >
+          <ToggleButton value={0.9}>Small</ToggleButton>
+          <ToggleButton value={1}>Default</ToggleButton>
+          <ToggleButton value={1.1}>Large</ToggleButton>
+          <ToggleButton value={1.2}>Largest</ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
+
       <Box sx={rowSx} {...settingSelectAttrs('accent_color', 'Accent color', 'Interface', 'The accent color used across the app.')}>
         <Typography sx={labelSx}>Accent color</Typography>
         <Typography sx={{ ...descSx, mb: 1.5 }}>
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index a5553d24..f2a82a8a 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -82,6 +82,8 @@ export interface AppSettings {
   accent_color?: string | null;
   /** Multi-stop gradient from the theme pad (2-3 hexes); washes the canvas. */
   accent_gradient?: string[] | null;
+  /** Global text-size ratio. Scales the root font-size so every rem-based size grows/shrinks together, no layout breakage. 1 = default. */
+  ui_font_scale?: number;
   personalized_greeting?: string | null;
   /** The short one-glance identity hook shown in the reveal's focal beat (greeting is the longer read). */
   personalized_headline?: string | null;
@@ -148,6 +150,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
   default_max_turns: null,
   default_thinking_level: 'auto',
   zoom_sensitivity: 50,
+  ui_font_scale: 1,
   theme: 'light',
   new_agent_shortcut: 'Meta+l',
   anthropic_api_key: null,
diff --git a/frontend/src/shared/styles/claudeTokens.ts b/frontend/src/shared/styles/claudeTokens.ts
index 3f869521..5efc825a 100644
--- a/frontend/src/shared/styles/claudeTokens.ts
+++ b/frontend/src/shared/styles/claudeTokens.ts
@@ -1,3 +1,26 @@
+// The type scale. OpenSwarm had ~30 near-duplicate hardcoded rem sizes (0.78/0.8/0.82/0.85...), which
+// reads as noise; snap to these 7 steps so type feels intentional and consistent. px comments assume a
+// 16px root. Use c.font.size.* instead of a raw rem string in anything you touch.
+export interface FontSizeScale {
+  xs: string;      // 12px, captions, meta, micro labels
+  sm: string;      // 13px, secondary / small body
+  base: string;    // 14px, default body + most UI text
+  md: string;      // 16px, emphasized body, inputs
+  lg: string;      // 18px, subheads
+  xl: string;      // 22px, section headings
+  display: string; // 28px, hero / empty-state headline
+}
+
+export const fontSize: FontSizeScale = {
+  xs: '0.75rem',
+  sm: '0.8125rem',
+  base: '0.875rem',
+  md: '1rem',
+  lg: '1.125rem',
+  xl: '1.375rem',
+  display: '1.75rem',
+};
+
 export interface ClaudeTokens {
   bg: { page: string; surface: string; elevated: string; secondary: string; inverse: string };
   text: { primary: string; secondary: string; tertiary: string; muted: string; inverse: string; ghost: string };
@@ -7,7 +30,7 @@ export interface ClaudeTokens {
   radius: { xs: number; sm: number; md: number; lg: number; xl: number; full: number };
   status: { success: string; successBg: string; warning: string; warningBg: string; error: string; errorBg: string; info: string; infoBg: string };
   user: { bubble: string };
-  font: { sans: string; mono: string };
+  font: { sans: string; mono: string; size: FontSizeScale };
   transition: string;
 }
 
@@ -58,6 +81,7 @@ export const lightTokens: ClaudeTokens = {
   font: {
     sans: '"Anthropic Sans", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
     mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    size: fontSize,
   },
   transition: 'all 150ms cubic-bezier(0.165, 0.85, 0.45, 1)',
 };
@@ -109,6 +133,7 @@ export const darkTokens: ClaudeTokens = {
   font: {
     sans: '"Anthropic Sans", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
     mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    size: fontSize,
   },
   transition: 'all 150ms cubic-bezier(0.165, 0.85, 0.45, 1)',
 };

From dfd828c838b1f2c3e8d8ae0b15e98db4d59f71b8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 14:35:23 -0700
Subject: [PATCH 154/248] [eric] dashboard: fix empty-state composer, stop
 canvas eating the pointerdown so it can focus

---
 .../app/pages/Dashboard/canvas/DashboardEmptyState.tsx    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
index 3d7ab1f1..608f43ca 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
@@ -63,7 +63,13 @@ const DashboardEmptyState: React.FC<{
         pointerEvents: 'none', px: 3,
       }}
     >
-      <Box sx={{ width: '100%', maxWidth: 620, pointerEvents: 'auto', display: 'flex', flexDirection: 'column' }}>
+      {/* Swallow pointerdown so the canvas's pan/marquee handler doesn't preventDefault the press and
+          steal focus from the composer, that's why clicking the input did nothing. Clicks/typing still work. */}
+      <Box
+        onPointerDown={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        sx={{ width: '100%', maxWidth: 620, pointerEvents: 'auto', display: 'flex', flexDirection: 'column' }}
+      >
         <Typography sx={{ color: c.text.primary, fontSize: c.font.size.display, fontWeight: 600, textAlign: 'center', letterSpacing: '-0.01em', mb: 3 }}>
           What do you want done?
         </Typography>

From 73a22ef79903e1239948fa751abe924d6f658947 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 14:36:57 -0700
Subject: [PATCH 155/248] [eric] canvas: suppress native context menu on
 right-drag marquee (not on cards/inputs)

---
 .../src/app/pages/Dashboard/canvas/DashboardCanvas.tsx   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index fed07fd3..ac3da88a 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -310,6 +310,15 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         onMouseMove={onViewportMouseMove}
         onMouseUp={onViewportMouseUp}
         onDoubleClick={onViewportDoubleClick}
+        onContextMenu={(e) => {
+          // Right-drag is the canvas marquee-select (Google-Maps style), so the native menu (Inspect
+          // Element in dev) shouldn't pop over it. Suppress only on the bare canvas; cards, inputs, and
+          // webviews keep their own menus.
+          const t = e.target as HTMLElement;
+          if (!t.closest('[data-select-id]') && !t.closest('input, textarea, [contenteditable]')) {
+            e.preventDefault();
+          }
+        }}
         sx={{
           position: 'absolute',
           inset: 0,

From f50bf60f781b5aa117761fa5953be5e2e79b0bfa Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 15:37:33 -0700
Subject: [PATCH 156/248] [eric] browser: don't auto-focus/re-center on resize,
 tab add/close, or tab drag

---
 frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx         | 1 +
 .../Dashboard/hooks/interaction/useDashboardInteractions.ts    | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index e821a4dd..3af836d5 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1004,6 +1004,7 @@ const BrowserCard: React.FC<Props> = ({
           />
         </Box>
         <Box
+          data-card-control
           sx={{
             display: 'flex',
             flex: 1,
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
index 3c40bf23..b4744152 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
@@ -30,6 +30,9 @@ function pressLandedOnControl(target: EventTarget | null | undefined): boolean {
   while (el) {
     if (el.hasAttribute(SELECT_ATTR)) return false;
     if (CONTROL_TAGS.has(el.tagName) || el.isContentEditable || el.getAttribute('role') === 'button') return true;
+    // Card-chrome zones (browser tab strip + / x / tab-drag, resize handles) select+raise the card but
+    // must NOT re-center the camera on it, managing a card's frame or tabs is not a "focus this" gesture.
+    if (el.hasAttribute('data-card-control') || (el.classList && el.classList.contains('resize-handle'))) return true;
     el = el.parentElement;
   }
   return false;

From 0595b477250fbb950b5d1b5141e2346b0c8434b1 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 15:46:35 -0700
Subject: [PATCH 157/248] [eric] onboarding: require a real AI connection to
 pass the connect gate (no free-trial bypass)

---
 .../app/components/OnboardingV3/beats/BeatConnect.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index c1fd1429..1d80aae4 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE } from '@/shared/config';
 import { fetchModels } from '@/shared/state/modelsSlice';
 import { fetchSubscriptionStatus, markSubscriptionConnected, selectSubscriptionConnections } from '@/shared/state/subscriptionsSlice';
-import { hasFreeTrialActive, hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
+import { hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { SUBSCRIPTION_PROVIDERS } from '@/app/pages/Settings/sections/subscription/subscriptionProviders';
 import { runConnectFlow } from '@/app/pages/Settings/sections/subscription/subscriptionConnect';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
@@ -23,7 +23,6 @@ const BeatConnect: React.FC<{
 }> = ({ c, identity, onConnected, onNext, onBack }) => {
   const dispatch = useAppDispatch();
   const connected = useAppSelector((s) => hasModelConnected(s));
-  const freeTrial = useAppSelector((s) => hasFreeTrialActive(s));
   const [connecting, setConnecting] = useState<string | null>(null);
   const [userCode, setUserCode] = useState('');
   const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -67,9 +66,10 @@ const BeatConnect: React.FC<{
   // Which provider rows are live, so the tab itself shows "Connected", not a floating label below.
   const connections = useAppSelector(selectSubscriptionConnections);
   const connectedIds = new Set(connections.filter((cx) => cx.isActive !== false).map((cx) => cx.provider));
-  // The whole flow leans on a real connection (identity, chat-history read, personalized reveal), so
-  // there is no skip: Continue stays locked until a provider is connected or the free trial is armed.
-  const canContinue = connected || freeTrial;
+  // Sign-in gate: the whole flow leans on a real connection (identity, chat-history read, personalized
+  // reveal), so Continue stays locked until the user actually connects their own AI (OAuth subscription
+  // or an API key). The silently-armed free trial no longer satisfies the gate, we require a sign-in.
+  const canContinue = connected;
 
   return (
     <BeatShell

From 805607743d7128ebd32403a1b06e1a6ff56c5740 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 16:42:59 -0700
Subject: [PATCH 158/248] [eric] browser: bubbled click now carries its target
 so resize/tab presses never re-center

---
 frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 3af836d5..75f9dbe7 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -916,7 +916,9 @@ const BrowserCard: React.FC<Props> = ({
       }}
       onClick={(e: React.MouseEvent) => {
         if (justDraggedRef.current) return;
-        onCardSelect?.(browserId, 'browser', e.shiftKey);
+        // Pass the target here too: with pointer capture the click after a resize lands on the handle,
+        // and without the target this bubbled path skipped the control carve-out and re-centered the camera.
+        onCardSelect?.(browserId, 'browser', e.shiftKey, e.target);
       }}
       onDoubleClick={(e: React.MouseEvent) => {
         e.stopPropagation();

From 9040fcdfb98f043f5a69c693bb58246608179ef8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 16:45:56 -0700
Subject: [PATCH 159/248] [eric] share: secrets warning as a clean macOS-style
 alert card, short Export anyway button

---
 .../src/app/components/share/ShareModal.tsx   | 62 ++++++++++++++-----
 1 file changed, 47 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/components/share/ShareModal.tsx b/frontend/src/app/components/share/ShareModal.tsx
index 0b61fa25..7a164bb3 100644
--- a/frontend/src/app/components/share/ShareModal.tsx
+++ b/frontend/src/app/components/share/ShareModal.tsx
@@ -13,6 +13,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import DownloadIcon from '@mui/icons-material/Download';
 import LinkIcon from '@mui/icons-material/Link';
 import PublicIcon from '@mui/icons-material/Public';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
 
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 
@@ -147,22 +148,53 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                 <CircularProgress size={20} sx={{ color: c.accent.primary }} />
               </Box>
             ) : error ? (
-              <Box sx={{ py: 1 }}>
-                <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
-                <Button size="small" onClick={load} sx={{ textTransform: 'none', color: c.accent.primary }}>
-                  Try again
-                </Button>
-                {secretOverridable && (
-                  <Button
-                    size="small"
-                    onClick={() => { setError(''); handleDownload(true); }}
-                    disabled={downloading}
-                    sx={{ textTransform: 'none', color: c.status.error, ml: 1 }}
-                  >
-                    Export anyway (includes the flagged value; only send to people you trust)
+              secretOverridable ? (
+                // macOS-alert style: icon + short bold title + quiet detail; the caveat lives in the
+                // body, never inside a button label. Export anyway is a small, bordered, clearly
+                // destructive action, not a paragraph of red text.
+                <Box sx={{ bgcolor: c.status.warningBg, border: `1px solid ${c.status.warning}40`, borderRadius: `${c.radius.md}px`, p: 2 }}>
+                  <Box sx={{ display: 'flex', gap: 1.25 }}>
+                    <WarningAmberRoundedIcon sx={{ fontSize: 20, color: c.status.warning, mt: '1px', flexShrink: 0 }} />
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, mb: 0.25 }}>
+                        This file may contain a secret
+                      </Typography>
+                      <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, lineHeight: 1.5 }}>
+                        {error} If you export it, only send the file to people you trust.
+                      </Typography>
+                    </Box>
+                  </Box>
+                  <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1.5 }}>
+                    <Button
+                      size="small"
+                      onClick={load}
+                      sx={{ textTransform: 'none', fontSize: '0.8rem', color: c.text.secondary, minWidth: 0 }}
+                    >
+                      Try again
+                    </Button>
+                    <Button
+                      size="small"
+                      variant="outlined"
+                      onClick={() => { setError(''); handleDownload(true); }}
+                      disabled={downloading}
+                      sx={{
+                        textTransform: 'none', fontSize: '0.8rem', fontWeight: 600,
+                        color: c.status.error, borderColor: `${c.status.error}80`, borderRadius: '8px',
+                        '&:hover': { borderColor: c.status.error, bgcolor: `${c.status.error}0d` },
+                      }}
+                    >
+                      Export anyway
+                    </Button>
+                  </Box>
+                </Box>
+              ) : (
+                <Box sx={{ py: 1 }}>
+                  <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
+                  <Button size="small" onClick={load} sx={{ textTransform: 'none', color: c.accent.primary }}>
+                    Try again
                   </Button>
-                )}
-              </Box>
+                </Box>
+              )
             ) : preflight ? (
               <IncludesList summary={preflight.summary} />
             ) : null}

From c63663d7db4c28cd2b56052a4f7927396c163c06 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 16:57:09 -0700
Subject: [PATCH 160/248] [eric] signin: dialog was buried under the onboarding
 curtain (z 1300), now top + opens straight to email form

---
 frontend/src/app/components/overlays/SignInDialog.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/overlays/SignInDialog.tsx b/frontend/src/app/components/overlays/SignInDialog.tsx
index d2cc88b1..55a2498e 100644
--- a/frontend/src/app/components/overlays/SignInDialog.tsx
+++ b/frontend/src/app/components/overlays/SignInDialog.tsx
@@ -24,7 +24,7 @@ type Stage = 'choose' | 'email_form' | 'code_form';
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
 
-export default function SignInDialog({ onClose }: { onClose: () => void }): JSX.Element {
+export default function SignInDialog({ onClose, initialStage = 'choose' }: { onClose: () => void; initialStage?: Stage }): JSX.Element {
   const tokens = useClaudeTokens();
   const dispatch = useAppDispatch();
   const proxyUrl = useAppSelector(
@@ -32,7 +32,8 @@ export default function SignInDialog({ onClose }: { onClose: () => void }): JSX.
   );
   const installId = useAppSelector((s) => s.settings.data.installation_id ?? '');
 
-  const [stage, setStage] = useState<Stage>('choose');
+  // Callers that already offered the Google/email choice (the onboarding beat) jump straight to the email form.
+  const [stage, setStage] = useState<Stage>(initialStage);
   const [email, setEmail] = useState('');
   const [code, setCode] = useState('');
   const [busy, setBusy] = useState(false);
@@ -157,7 +158,9 @@ export default function SignInDialog({ onClose }: { onClose: () => void }): JSX.
       open
       onClose={onClose}
       hideBackdrop={false}
-      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      // Must clear the onboarding curtain (z ~2147483000): at MUI's default 1300 this dialog opened
+      // INVISIBLY behind it, so "Continue with email" looked dead during onboarding.
+      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2147483600 }}
       slotProps={{ backdrop: { sx: { backgroundColor: 'rgba(0,0,0,0.55)' } } }}
     >
       <Box

From 352cf7d908611f5f0bb975d9b63abd7e436ff9af Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 16:57:09 -0700
Subject: [PATCH 161/248] [eric] onboarding: required sign-in beat (Google or
 email) before connect; free trial restored as model source

---
 .../OnboardingV3/OnboardingV3Root.tsx         |   8 +-
 .../OnboardingV3/beats/BeatConnect.tsx        |  10 +-
 .../OnboardingV3/beats/BeatSignIn.tsx         | 111 ++++++++++++++++++
 3 files changed, 121 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx

diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 80da455d..47069ade 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -10,12 +10,13 @@ import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useOnboardingV3Pipeline } from './useOnboardingV3Pipeline';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
 import { ARC_BLUE_BG, ONBOARDING_SANS } from './beats/BeatShell';
+import BeatSignIn from './beats/BeatSignIn';
 import BeatConnect from './beats/BeatConnect';
 import BeatApps from './beats/BeatApps';
 import BeatTheme from './beats/BeatTheme';
 import BeatCard from './beats/BeatCard';
 
-type Beat = 'welcome' | 'newos' | 'connect' | 'apps' | 'theme' | 'card';
+type Beat = 'welcome' | 'newos' | 'signin' | 'connect' | 'apps' | 'theme' | 'card';
 
 const V2_STORAGE_KEY = 'openswarm.onboarding.v2';
 const WINDOWED_BEATS: Beat[] = ['welcome', 'newos'];
@@ -194,14 +195,15 @@ const OnboardingV3Root: React.FC = () => {
               style={{ position: 'absolute', inset: 0 }}
             >
               {beat === 'welcome' && <IntroBeat c={c} line="Welcome." onNext={() => setBeat('newos')} />}
-              {beat === 'newos' && <IntroBeat c={c} line="This is your new OS." onNext={() => setBeat('connect')} />}
+              {beat === 'newos' && <IntroBeat c={c} line="This is your new OS." onNext={() => setBeat('signin')} />}
+              {beat === 'signin' && <BeatSignIn c={c} onNext={() => setBeat('connect')} onBack={() => setBeat('newos')} />}
               {beat === 'connect' && (
                 <BeatConnect
                   c={c}
                   identity={pipeline.identity}
                   onConnected={onConnected}
                   onNext={leaveConnect}
-                  onBack={() => setBeat('newos')}
+                  onBack={() => setBeat('signin')}
                 />
               )}
               {beat === 'apps' && <BeatApps c={c} picks={picks} setPicks={setPicks} onNext={leaveApps} onBack={() => setBeat('connect')} />}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index 1d80aae4..13d494b5 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE } from '@/shared/config';
 import { fetchModels } from '@/shared/state/modelsSlice';
 import { fetchSubscriptionStatus, markSubscriptionConnected, selectSubscriptionConnections } from '@/shared/state/subscriptionsSlice';
-import { hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
+import { hasFreeTrialActive, hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { SUBSCRIPTION_PROVIDERS } from '@/app/pages/Settings/sections/subscription/subscriptionProviders';
 import { runConnectFlow } from '@/app/pages/Settings/sections/subscription/subscriptionConnect';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
@@ -23,6 +23,7 @@ const BeatConnect: React.FC<{
 }> = ({ c, identity, onConnected, onNext, onBack }) => {
   const dispatch = useAppDispatch();
   const connected = useAppSelector((s) => hasModelConnected(s));
+  const freeTrial = useAppSelector((s) => hasFreeTrialActive(s));
   const [connecting, setConnecting] = useState<string | null>(null);
   const [userCode, setUserCode] = useState('');
   const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -66,10 +67,9 @@ const BeatConnect: React.FC<{
   // Which provider rows are live, so the tab itself shows "Connected", not a floating label below.
   const connections = useAppSelector(selectSubscriptionConnections);
   const connectedIds = new Set(connections.filter((cx) => cx.isActive !== false).map((cx) => cx.provider));
-  // Sign-in gate: the whole flow leans on a real connection (identity, chat-history read, personalized
-  // reveal), so Continue stays locked until the user actually connects their own AI (OAuth subscription
-  // or an API key). The silently-armed free trial no longer satisfies the gate, we require a sign-in.
-  const canContinue = connected;
+  // The account gate lives in the prior sign-in beat, so here the free trial is a legitimate model
+  // source again: Continue unlocks on a provider connection OR the armed trial (both mean "can run").
+  const canContinue = connected || freeTrial;
 
   return (
     <BeatShell
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
new file mode 100644
index 00000000..21ae6990
--- /dev/null
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import GoogleIcon from '@mui/icons-material/Google';
+import EmailIcon from '@mui/icons-material/Email';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { fetchSettings } from '@/shared/state/settingsSlice';
+import { OPENSWARM_DEFAULT_PROXY_URL } from '@/shared/config';
+import { report } from '@/shared/serviceClient';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+import SignInDialog from '@/app/components/overlays/SignInDialog';
+import OnboardingLogo from '../OnboardingLogo';
+import BeatShell from './BeatShell';
+
+// The account gate: users sign in (Google or email) before anything else, so the free trial and their
+// setup are tied to a real account. Google hands off through the external browser and lands out-of-band
+// (the cloud page POSTs the bearer to the local backend), so we poll settings until user_id appears.
+// Email reuses the proven SignInDialog (magic-link 6-digit code) on top of the beat.
+const BeatSignIn: React.FC<{
+  c: ClaudeTokens;
+  onNext: () => void;
+  onBack: () => void;
+}> = ({ c, onNext, onBack }) => {
+  const dispatch = useAppDispatch();
+  const userId = useAppSelector((s) => s.settings.data.user_id ?? null);
+  const userEmail = useAppSelector((s) => s.settings.data.user_email ?? null);
+  const proxyUrl = useAppSelector((s) => s.settings.data.openswarm_proxy_url || OPENSWARM_DEFAULT_PROXY_URL);
+  const installId = useAppSelector((s) => s.settings.data.installation_id ?? '');
+  const [waitingGoogle, setWaitingGoogle] = useState(false);
+  const [emailOpen, setEmailOpen] = useState(false);
+  const signedIn = !!userId;
+
+  useEffect(() => {
+    if (signedIn || !waitingGoogle) return undefined;
+    const id = window.setInterval(() => { void dispatch(fetchSettings()); }, 2000);
+    return () => window.clearInterval(id);
+  }, [signedIn, waitingGoogle, dispatch]);
+
+  const onGoogle = (): void => {
+    if (signedIn) return;
+    report('signin', 'google_clicked');
+    const localPort = (window as unknown as { __OPENSWARM_PORT__?: number }).__OPENSWARM_PORT__ || 8324;
+    const params = new URLSearchParams({ install_id: installId, local_port: String(localPort) });
+    const startUrl = `${proxyUrl.replace(/\/$/, '')}/api/auth/google/start?${params.toString()}`;
+    const api = (window as unknown as { openswarm?: { openExternal?: (u: string) => void } }).openswarm;
+    if (api?.openExternal) api.openExternal(startUrl);
+    else window.open(startUrl, '_blank');
+    setWaitingGoogle(true);
+  };
+
+  const rows: Array<{ id: string; name: string; icon: React.ReactNode; onClick: () => void; hint?: string }> = [
+    { id: 'google', name: 'Continue with Google', icon: <GoogleIcon sx={{ fontSize: 26, color: '#4285F4' }} />, onClick: onGoogle, hint: waitingGoogle && !signedIn ? 'waiting for your browser...' : undefined },
+    { id: 'email', name: 'Continue with email', icon: <EmailIcon sx={{ fontSize: 26, color: '#8a8a86' }} />, onClick: () => { if (!signedIn) setEmailOpen(true); } },
+  ];
+
+  return (
+    <BeatShell
+      c={c}
+      title="Sign in."
+      body="Your account keeps your setup, and your free trial, tied to you."
+      nextLabel="Continue"
+      onNext={onNext}
+      nextDisabled={!signedIn}
+      onBack={onBack}
+      wide
+      logo={<OnboardingLogo size={52} />}
+    >
+      <div style={{ width: 'min(440px, 100%)', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {rows.map((row, i) => (
+          <motion.button
+            key={row.id}
+            onClick={row.onClick}
+            initial={{ opacity: 0, y: 14 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 14, padding: '0 0 0 18px', textAlign: 'left', overflow: 'hidden',
+              borderRadius: 14, border: 'none',
+              boxShadow: signedIn ? '0 0 0 2px #1a9e6a, 0 10px 26px rgba(20,16,80,0.22)' : '0 10px 26px rgba(20,16,80,0.22)',
+              background: '#ffffff', cursor: signedIn ? 'default' : 'pointer', fontFamily: 'inherit', minHeight: 64,
+            }}
+          >
+            <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
+              <span style={{ fontSize: '0.98rem', fontWeight: 600, color: '#3d3d3a' }}>{row.name}</span>
+              {row.hint && <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>{row.hint}</span>}
+            </span>
+            <span style={{
+              alignSelf: 'stretch', width: 78, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+              background: 'linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02))',
+            }}>
+              {row.icon}
+            </span>
+          </motion.button>
+        ))}
+        {signedIn ? (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center', padding: '6px 0', fontSize: '0.9rem', color: 'rgba(255,255,255,0.92)' }}>
+            <CheckRoundedIcon sx={{ fontSize: 17, color: '#4fdf9f' }} />
+            Signed in{userEmail ? ` as ${userEmail}` : ''}
+          </div>
+        ) : (
+          <div style={{ fontSize: '0.82rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
+            Sign in to continue.
+          </div>
+        )}
+      </div>
+      {emailOpen && !signedIn && <SignInDialog initialStage="email_form" onClose={() => setEmailOpen(false)} />}
+    </BeatShell>
+  );
+};
+
+export default BeatSignIn;

From 7665f4665349f61d32301b0373df2c4d6496e472 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 18:39:37 -0700
Subject: [PATCH 162/248] [eric] voice: aux polish endpoint
 (fillers+punctuation, fail-open) on the cheap tier

---
 backend/apps/voice/polish.py | 82 ++++++++++++++++++++++++++++++++++++
 backend/main.py              |  3 +-
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 backend/apps/voice/polish.py

diff --git a/backend/apps/voice/polish.py b/backend/apps/voice/polish.py
new file mode 100644
index 00000000..ff49e929
--- /dev/null
+++ b/backend/apps/voice/polish.py
@@ -0,0 +1,82 @@
+"""Dictation cleanup: raw whisper text -> punctuated, filler-free prose via the cheap aux tier.
+
+One fast call on whatever lane the user has configured (provider-agnostic per the aux registry).
+Every failure path returns the RAW text so dictation never breaks when the aux is unreachable.
+"""
+
+from contextlib import asynccontextmanager
+from typing import AsyncIterator, Optional
+
+from pydantic import BaseModel, ConfigDict
+from typeguard import typechecked
+
+from backend.config.Apps import SubApp
+
+
+@asynccontextmanager
+async def voice_lifespan() -> AsyncIterator[None]:
+    yield
+
+
+voice = SubApp("voice", voice_lifespan)
+
+P_POLISH_SYSTEM = (
+    "You clean up raw speech-to-text dictation. Return ONLY the cleaned text, nothing else. "
+    "Fix punctuation, capitalization, and obvious homophone errors. Remove filler words (um, uh, "
+    "like when used as filler, you know) and false starts. Apply spoken formatting commands: "
+    "'new line'/'new paragraph' become real breaks, 'period'/'comma'/'question mark' become the "
+    "mark when clearly dictated as punctuation. NEVER add content, never answer questions in the "
+    "text, never translate, never wrap in quotes, never use em-dashes. Keep the speaker's words "
+    "and tone; this is transcription cleanup, not rewriting."
+)
+
+POLISH_INPUT_CAP = 8_000
+
+
+class PolishRequest(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+
+    text: str
+    # A one-line hint about where the user is dictating (e.g. a page title), so names spell right.
+    context: Optional[str] = None
+
+
+class PolishResponse(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+
+    text: str
+    polished: bool
+
+
+@voice.router.post("/polish")
+@typechecked
+async def polish(body: PolishRequest) -> dict:
+    raw = (body.text or "").strip()
+    if not raw:
+        return PolishResponse(text="", polished=False).model_dump()
+    try:
+        from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
+        from backend.apps.agents.providers.registry import resolve_aux_model
+        from backend.apps.settings.credentials import get_anthropic_client_for_model
+        from backend.apps.settings.store import load_settings
+
+        settings = load_settings()
+        aux_model, _ = await resolve_aux_model(settings, preferred_tier="haiku")
+        client = get_anthropic_client_for_model(settings, aux_model)
+        prompt = raw[:POLISH_INPUT_CAP]
+        if body.context:
+            prompt = f"[Dictating into: {body.context[:200]}]\n{prompt}"
+        resp = await client.messages.create(
+            model=aux_model,
+            max_tokens=aux_max_tokens_for(aux_model, base=1000),
+            system=P_POLISH_SYSTEM,
+            messages=[{"role": "user", "content": prompt}],
+            # Dictation is interactive; a slow aux must never hold the paste hostage.
+            timeout=6.0,
+        )
+        cleaned = safe_resp_text(resp).strip()
+        if cleaned:
+            return PolishResponse(text=cleaned, polished=True).model_dump()
+    except Exception:
+        pass
+    return PolishResponse(text=raw, polished=False).model_dump()
diff --git a/backend/main.py b/backend/main.py
index 23c07edd..e278b203 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -43,6 +43,7 @@ from backend.apps.subscription.router import subscription
 from backend.apps.auth.router import auth
 from backend.apps.web.web import web
 from backend.apps.onboarding.onboarding import onboarding
+from backend.apps.voice.polish import voice
 from backend.apps.agents.proxy.anthropic_proxy import anthropic_proxy
 from backend.apps.agents.core.openai_passthrough import openai_passthrough
 from backend.apps.workflows.workflows import workflows
@@ -50,7 +51,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi import WebSocket, WebSocketDisconnect
 import json
 
-main_app = MainApp([health, agents, skills, tools_lib, modes, settings, mcp_registry, skill_registry, outputs, output_versions, dashboards, swarm, service, subscription, auth, web, onboarding, anthropic_proxy, workflows, openai_passthrough])
+main_app = MainApp([health, agents, skills, tools_lib, modes, settings, mcp_registry, skill_registry, outputs, output_versions, dashboards, swarm, service, subscription, auth, web, onboarding, voice, anthropic_proxy, workflows, openai_passthrough])
 app = main_app.app
 
 # Generate per-install auth token BEFORE we bind the HTTP port. By the time any request lands, the token file exists. See backend/auth.py.

From f212534ccf2c9a5618c651c88546f71c1b664bf9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 18:39:38 -0700
Subject: [PATCH 163/248] [eric] voice: hold-to-talk (setting + buttons +
 in-app hotkey), insert-at-focus, aurora + sound cues

---
 electron/main.js                              | 23 ++++--
 .../Dashboard/desktop/DesktopSpawnPill.tsx    |  7 +-
 .../app/pages/Dashboard/desktop/HelpPill.tsx  |  7 +-
 .../sections/general/GeneralInterface.tsx     | 32 ++++++++
 frontend/src/shared/state/settingsSlice.ts    |  3 +
 .../shared/voice/VoiceDictationContext.tsx    | 80 ++++++++++++++++++-
 frontend/src/shared/voice/VoiceOverlay.tsx    | 44 +++++++++-
 frontend/src/shared/voice/injectAtFocus.ts    | 44 ++++++++++
 .../src/shared/voice/useVoiceDictation.ts     | 68 ++++++++++++++--
 frontend/src/shared/voice/voiceSounds.ts      | 35 ++++++++
 10 files changed, 319 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/shared/voice/injectAtFocus.ts
 create mode 100644 frontend/src/shared/voice/voiceSounds.ts

diff --git a/electron/main.js b/electron/main.js
index 3f1ed372..5bcd41ed 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1788,13 +1788,22 @@ app.whenReady().then(async () => {
   // Off-window mouse-release crash dodge (macOS). Safe to call before windows exist.
   installMacMouseClamp();
 
-  // Voice dictation toggle: press anywhere (even in another app) to start/stop dictating. globalShortcut
-  // can't see key-up, so this is a press-to-toggle, not hold-to-talk; the renderer owns the record state.
-  try {
-    globalShortcut.register('CommandOrControl+Shift+D', () => {
-      if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:toggle');
-    });
-  } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+  // Voice dictation hotkey. globalShortcut can't see key-up, so hold-to-talk is impossible through it;
+  // instead the shortcut is only registered while OUR window is unfocused (background toggle), and when
+  // the app is focused the renderer sees the real keydown/keyup and owns hold-vs-toggle itself.
+  const VOICE_COMBO = 'CommandOrControl+Shift+D';
+  const registerVoiceShortcut = () => {
+    try {
+      if (!globalShortcut.isRegistered(VOICE_COMBO)) {
+        globalShortcut.register(VOICE_COMBO, () => {
+          if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:toggle');
+        });
+      }
+    } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+  };
+  registerVoiceShortcut();
+  app.on('browser-window-focus', () => { try { globalShortcut.unregister(VOICE_COMBO); } catch (_) {} });
+  app.on('browser-window-blur', registerVoiceShortcut);
 
   // PASSKEY SPIKE (macOS only): turn on the Secure-Enclave/Touch ID WebAuthn authenticator that Electron 42 added. Without this, isUserVerifyingPlatformAuthenticatorAvailable() is hardwired false (why the old reject-shim existed). keychainAccessGroup MUST match the keychain-access-groups entitlement (Y26NUZH4NG.<bundle>.webauthn) or this throws. Windows has no equivalent, so the reject-shim still runs there.
   if (process.platform === 'darwin' && typeof app.configureWebAuthn === 'function') {
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index b1895b7d..62cedf60 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -41,7 +41,7 @@ function DesktopSpawnPill({
 }: DesktopSpawnPillProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
-  const { state: voiceState, pct: voicePct, toggle: toggleVoice } = useVoice();
+  const { state: voiceState, pct: voicePct, pressStart: voicePressStart, pressEnd: voicePressEnd } = useVoice();
   const recording = voiceState === 'recording';
   const transcribing = voiceState === 'transcribing';
   const preparing = voiceState === 'preparing';
@@ -164,7 +164,10 @@ function DesktopSpawnPill({
           <Box
             role="button"
             aria-label="Voice dictation"
-            onClick={(e) => { e.stopPropagation(); if (!voiceBusy) toggleVoice(); }}
+            onPointerDown={(e) => { e.stopPropagation(); if (!voiceBusy) voicePressStart(); }}
+            onPointerUp={(e) => { e.stopPropagation(); voicePressEnd(); }}
+            onPointerLeave={() => voicePressEnd()}
+            onClick={(e) => e.stopPropagation()}
             sx={{
               display: 'flex',
               alignItems: 'center',
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index b167ca5b..17e044fb 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -14,7 +14,7 @@ const HELP_URL = 'https://openswarm.com';
 /** Top-right desktop pill: Help opens the docs; the mic dictates (local whisper) into the focused field. */
 function HelpPill(): React.ReactElement {
   const dispatch = useAppDispatch();
-  const { state, pct, toggle } = useVoice();
+  const { state, pct, pressStart, pressEnd } = useVoice();
   const recording = state === 'recording';
   const transcribing = state === 'transcribing';
   const preparing = state === 'preparing';
@@ -46,7 +46,10 @@ function HelpPill(): React.ReactElement {
       <Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
         <Box
           sx={{ display: 'flex', alignItems: 'center', color: recording ? '#fff' : 'rgba(255,255,255,0.55)' }}
-          onClick={(e) => { e.stopPropagation(); if (!busy) toggle(); }}
+          onPointerDown={(e) => { e.stopPropagation(); if (!busy) pressStart(); }}
+          onPointerUp={(e) => { e.stopPropagation(); pressEnd(); }}
+          onPointerLeave={() => pressEnd()}
+          onClick={(e) => e.stopPropagation()}
         >
           {busy
             ? <CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} />
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 885d3162..8452d34c 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -101,6 +101,38 @@ const GeneralInterface: React.FC<{
         </ToggleButtonGroup>
       </Box>
 
+      <Box sx={inlineRowSx} {...settingSelectAttrs('voice_hold_to_talk', 'Dictation', 'Interface', 'Hold to talk, or tap to start and stop.')}>
+        <Box sx={{ mr: 3 }}>
+          <Typography sx={labelSx}>Dictation</Typography>
+          <Typography sx={descSx}>Hold the mic or Cmd+Shift+D to talk, or tap to start and stop.</Typography>
+        </Box>
+        <ToggleButtonGroup
+          value={form.voice_hold_to_talk ?? true}
+          exclusive
+          onChange={(_, v) => { if (v !== null) setForm({ ...form, voice_hold_to_talk: v }); }}
+          size="small"
+          sx={{
+            '& .MuiToggleButton-root': {
+              color: c.text.muted,
+              borderColor: c.border.medium,
+              textTransform: 'none',
+              px: 1.75,
+              py: 0.5,
+              fontSize: '0.8rem',
+              '&.Mui-selected': {
+                bgcolor: `${c.accent.primary}15`,
+                color: c.accent.primary,
+                borderColor: c.accent.primary,
+                '&:hover': { bgcolor: `${c.accent.primary}20` },
+              },
+            },
+          }}
+        >
+          <ToggleButton value={true}>Hold to talk</ToggleButton>
+          <ToggleButton value={false}>Tap to toggle</ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
+
       <Box sx={rowSx} {...settingSelectAttrs('accent_color', 'Accent color', 'Interface', 'The accent color used across the app.')}>
         <Typography sx={labelSx}>Accent color</Typography>
         <Typography sx={{ ...descSx, mb: 1.5 }}>
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index f2a82a8a..a971475b 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -84,6 +84,8 @@ export interface AppSettings {
   accent_gradient?: string[] | null;
   /** Global text-size ratio. Scales the root font-size so every rem-based size grows/shrinks together, no layout breakage. 1 = default. */
   ui_font_scale?: number;
+  /** Dictation activation: true = hold the hotkey/mic to record and release to stop (WhisperFlow style); false = tap toggles. */
+  voice_hold_to_talk?: boolean;
   personalized_greeting?: string | null;
   /** The short one-glance identity hook shown in the reveal's focal beat (greeting is the longer read). */
   personalized_headline?: string | null;
@@ -151,6 +153,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
   default_thinking_level: 'auto',
   zoom_sensitivity: 50,
   ui_font_scale: 1,
+  voice_hold_to_talk: true,
   theme: 'light',
   new_agent_shortcut: 'Meta+l',
   anthropic_api_key: null,
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
index 37829909..6fd0df21 100644
--- a/frontend/src/shared/voice/VoiceDictationContext.tsx
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import { useAppSelector } from '@/shared/hooks';
 import { useVoiceDictation, VoiceState, VoiceFeedback } from './useVoiceDictation';
 import VoiceOverlay from './VoiceOverlay';
 
@@ -12,15 +13,86 @@ interface VoiceContextValue {
   pct: number;
   feedback: VoiceFeedback | null;
   toggle: () => void;
+  // Mic-button press semantics that respect the hold/toggle setting: press starts (or toggles),
+  // release stops only in hold mode. Buttons wire onPointerDown/Up to these and stay mode-agnostic.
+  pressStart: () => void;
+  pressEnd: () => void;
+  holdMode: boolean;
+  volumeRef: React.MutableRefObject<number>;
 }
 
-const NOOP: VoiceContextValue = { state: 'idle', lastText: '', error: null, pct: 0, feedback: null, toggle: () => {} };
+const NOOP_REF = { current: 0 };
+const NOOP: VoiceContextValue = { state: 'idle', lastText: '', error: null, pct: 0, feedback: null, toggle: () => {}, pressStart: () => {}, pressEnd: () => {}, holdMode: true, volumeRef: NOOP_REF };
 const VoiceContext = createContext<VoiceContextValue>(NOOP);
 
 export function VoiceDictationProvider({ children }: { children: React.ReactNode }): React.ReactElement {
-  const { state, lastText, error, pct, feedback, toggle } = useVoiceDictation();
+  const { state, lastText, error, pct, feedback, toggle, start, stop, volumeRef } = useVoiceDictation();
+  const holdMode = useAppSelector((s) => s.settings.data.voice_hold_to_talk ?? true);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const heldRef = useRef(false);
+
+  const pressStart = useCallback((): void => {
+    if (holdMode) {
+      if (stateRef.current === 'idle') { heldRef.current = true; void start(); }
+    } else {
+      toggle();
+    }
+  }, [holdMode, start, toggle]);
+
+  const pressEnd = useCallback((): void => {
+    if (holdMode && heldRef.current) {
+      heldRef.current = false;
+      if (stateRef.current === 'recording') void stop();
+    }
+  }, [holdMode, stop]);
+
+  // In-app hold-to-talk on the same combo as the global hotkey (Cmd/Ctrl+Shift+D). Main unregisters
+  // the global shortcut while our window is focused, so these real keydown/keyup events reach us;
+  // when the app is in the background the global shortcut still fires as a toggle (the OS gives us
+  // no key-up out there without a native event tap).
+  useEffect(() => {
+    const isCombo = (e: KeyboardEvent): boolean => (e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'd' || e.key === 'D');
+    let watchdog = 0;
+    const release = (): void => {
+      if (!heldRef.current) return;
+      heldRef.current = false;
+      window.clearTimeout(watchdog);
+      if (stateRef.current === 'recording') void stop();
+    };
+    const down = (e: KeyboardEvent): void => {
+      if (!isCombo(e)) return;
+      e.preventDefault();
+      if (!holdMode) { if (!e.repeat) toggle(); return; }
+      if (!e.repeat && stateRef.current === 'idle') { heldRef.current = true; void start(); }
+      // Belt-and-braces release detection: macOS suppresses letter keyups while Cmd is held, so once
+      // the OS autorepeat stream starts, its going quiet means the key was let go. Arms only after the
+      // first repeat, so keyboards with repeat disabled still rely on the plain keyup below.
+      if (e.repeat && heldRef.current) {
+        window.clearTimeout(watchdog);
+        watchdog = window.setTimeout(release, 900);
+      }
+    };
+    const up = (e: KeyboardEvent): void => {
+      if (!holdMode || !heldRef.current) return;
+      // Any piece of the combo lifting ends the hold; key-order on release varies by hand.
+      if (e.key === 'd' || e.key === 'D' || e.key === 'Meta' || e.key === 'Control' || e.key === 'Shift') release();
+    };
+    // Switching windows mid-hold must never leave the mic hot.
+    const onBlur = (): void => release();
+    window.addEventListener('keydown', down, true);
+    window.addEventListener('keyup', up, true);
+    window.addEventListener('blur', onBlur);
+    return () => {
+      window.clearTimeout(watchdog);
+      window.removeEventListener('keydown', down, true);
+      window.removeEventListener('keyup', up, true);
+      window.removeEventListener('blur', onBlur);
+    };
+  }, [holdMode, start, stop, toggle]);
+
   return (
-    <VoiceContext.Provider value={{ state, lastText, error, pct, feedback, toggle }}>
+    <VoiceContext.Provider value={{ state, lastText, error, pct, feedback, toggle, pressStart, pressEnd, holdMode, volumeRef }}>
       {children}
       <VoiceOverlay />
     </VoiceContext.Provider>
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index e235d3ae..422eae87 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -1,12 +1,48 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import MicIcon from '@mui/icons-material/Mic';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import ContentPasteRoundedIcon from '@mui/icons-material/ContentPasteRounded';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { useThemeAccent } from '@/shared/styles/ThemeContext';
 import { useVoice } from './VoiceDictationContext';
 
+// WhisperFlow-style presence: while the mic is hot, an accent-tinted aurora breathes up from the
+// bottom edge, its height and glow riding the live mic level. Imperative rAF writes only (opacity +
+// transform on a fixed layer), so 60Hz voice never re-renders React.
+const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({ volumeRef }) => {
+  const { accent } = useThemeAccent();
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    let raf = 0;
+    const tick = (): void => {
+      const el = ref.current;
+      if (el) {
+        const v = volumeRef.current;
+        el.style.opacity = String(0.35 + v * 0.65);
+        el.style.transform = `scaleY(${0.55 + v * 1.1})`;
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [volumeRef]);
+  const a = accent || '#6b62f0';
+  return (
+    <div
+      ref={ref}
+      style={{
+        position: 'fixed', left: 0, right: 0, bottom: 0, height: 130, zIndex: 2147482999,
+        pointerEvents: 'none', transformOrigin: 'bottom',
+        background: `linear-gradient(to top, ${a}55 0%, ${a}2e 35%, transparent 100%)`,
+        filter: 'blur(14px)',
+        transition: 'opacity 120ms linear',
+      }}
+    />
+  );
+};
+
 // The whole point: dictation must never look like "nothing happened." This floats a small status
 // card above the composer for every phase (listening, transcribing, downloading the model) and shows
 // the transcript + whether it was pasted or just copied. Non-interactive, auto-dismisses.
@@ -20,7 +56,7 @@ function feedbackIcon(icon: string): React.ReactElement {
 }
 
 const VoiceOverlay: React.FC = () => {
-  const { state, pct, feedback } = useVoice();
+  const { state, pct, feedback, volumeRef } = useVoice();
   const [showFeedback, setShowFeedback] = useState(false);
 
   useEffect(() => {
@@ -33,6 +69,7 @@ const VoiceOverlay: React.FC = () => {
   const live = state !== 'idle';
   const visible = live || (showFeedback && !!feedback);
   if (!visible) return null;
+  const aurora = state === 'recording' ? <VoiceAurora volumeRef={volumeRef} /> : null;
 
   let content: React.ReactElement;
   if (state === 'recording') {
@@ -65,6 +102,8 @@ const VoiceOverlay: React.FC = () => {
   }
 
   return (
+    <>
+    {aurora}
     <Box
       sx={{
         position: 'fixed',
@@ -93,6 +132,7 @@ const VoiceOverlay: React.FC = () => {
     >
       {content}
     </Box>
+    </>
   );
 };
 
diff --git a/frontend/src/shared/voice/injectAtFocus.ts b/frontend/src/shared/voice/injectAtFocus.ts
new file mode 100644
index 00000000..00834139
--- /dev/null
+++ b/frontend/src/shared/voice/injectAtFocus.ts
@@ -0,0 +1,44 @@
+import { getLastInteractedBrowser } from '@/shared/browserFocus';
+import { getWebview } from '@/shared/browserRegistry';
+
+// Dictation lands where the user's cursor actually is, like every real dictation tool: a focused
+// in-app field gets the text typed in (undo-friendly, fires React input events), a focused browser
+// card forwards into the guest page's field, anything else falls back to the OS-level paste.
+export type InjectTarget = 'field' | 'webview' | null;
+
+export function injectAtFocus(text: string): InjectTarget {
+  const active = document.activeElement as HTMLElement | null;
+  if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)) {
+    try {
+      active.focus();
+      // execCommand keeps the undo stack and fires the input events React listens for; the manual
+      // fallback covers fields where Chromium refuses the command (rare, e.g. type=number).
+      const ok = document.execCommand('insertText', false, text);
+      if (!ok && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+        const el = active as HTMLInputElement | HTMLTextAreaElement;
+        const s = el.selectionStart ?? el.value.length;
+        const e = el.selectionEnd ?? el.value.length;
+        el.value = el.value.slice(0, s) + text + el.value.slice(e);
+        el.selectionStart = el.selectionEnd = s + text.length;
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      return 'field';
+    } catch {
+      return null;
+    }
+  }
+  // A webview steals focus when the user clicks into a page, so activeElement IS the webview tag.
+  const focusedTag = active && active.tagName === 'WEBVIEW' ? (active as unknown as { insertText?: (t: string) => Promise<void> }) : null;
+  if (focusedTag?.insertText) {
+    try { void focusedTag.insertText(text); return 'webview'; } catch { /* fall through */ }
+  }
+  // Last-interacted browser card: the user clicked a page field, then hit the hotkey.
+  const browserId = getLastInteractedBrowser();
+  if (browserId) {
+    const wv = getWebview(browserId) as unknown as { insertText?: (t: string) => Promise<void>; focus?: () => void } | undefined;
+    if (wv?.insertText) {
+      try { wv.focus?.(); void wv.insertText(text); return 'webview'; } catch { /* fall through */ }
+    }
+  }
+  return null;
+}
diff --git a/frontend/src/shared/voice/useVoiceDictation.ts b/frontend/src/shared/voice/useVoiceDictation.ts
index a648c002..9a59bd1e 100644
--- a/frontend/src/shared/voice/useVoiceDictation.ts
+++ b/frontend/src/shared/voice/useVoiceDictation.ts
@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { API_BASE } from '@/shared/config';
 import { encodeWav, VOICE_SAMPLE_RATE } from './encodeWav';
+import { injectAtFocus } from './injectAtFocus';
+import { playCancel, playDone, playStart } from './voiceSounds';
 
 export type VoiceState = 'idle' | 'recording' | 'transcribing' | 'preparing';
 
@@ -23,6 +26,33 @@ export interface VoiceFeedback {
   at: number;
 }
 
+// Context hint for the polisher: what the user is dictating into (a field label, a page title), so
+// names and jargon spell right. Never page CONTENT, just the one-line "where".
+function dictationContext(): string {
+  const active = document.activeElement as HTMLElement | null;
+  const hint = active?.getAttribute?.('placeholder') || active?.getAttribute?.('aria-label') || '';
+  return [hint, document.title].filter(Boolean).join(' - ').slice(0, 200);
+}
+
+async function polishText(raw: string): Promise<string> {
+  try {
+    const ctl = new AbortController();
+    const timer = window.setTimeout(() => ctl.abort(), 6500);
+    const res = await fetch(`${API_BASE}/voice/polish`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text: raw, context: dictationContext() }),
+      signal: ctl.signal,
+    });
+    window.clearTimeout(timer);
+    if (!res.ok) return raw;
+    const data = (await res.json()) as { text?: string };
+    return data.text?.trim() || raw;
+  } catch {
+    return raw;
+  }
+}
+
 export function useVoiceDictation() {
   const [state, setState] = useState<VoiceState>('idle');
   const [lastText, setLastText] = useState<string>('');
@@ -31,6 +61,8 @@ export function useVoiceDictation() {
   const [feedback, setFeedback] = useState<VoiceFeedback | null>(null);
   const recRef = useRef<Recorder | null>(null);
   const stateRef = useRef<VoiceState>('idle');
+  // Live mic level (0..1) for the aurora; a ref, not state, so 60Hz visuals never re-render React.
+  const volumeRef = useRef<number>(0);
   stateRef.current = state;
 
   // First-run: the model is downloading. Poll progress until it lands, then drop back to idle so the
@@ -73,11 +105,20 @@ export function useVoiceDictation() {
       const source = ctx.createMediaStreamSource(stream);
       const node = ctx.createScriptProcessor(4096, 1, 1);
       const chunks: Float32Array[] = [];
-      node.onaudioprocess = (e): void => { chunks.push(new Float32Array(e.inputBuffer.getChannelData(0))); };
+      node.onaudioprocess = (e): void => {
+        const data = e.inputBuffer.getChannelData(0);
+        chunks.push(new Float32Array(data));
+        // RMS per chunk drives the aurora; smoothed so it breathes instead of flickering.
+        let sum = 0;
+        for (let i = 0; i < data.length; i += 8) sum += data[i] * data[i];
+        const rms = Math.sqrt(sum / (data.length / 8));
+        volumeRef.current = volumeRef.current * 0.7 + Math.min(1, rms * 6) * 0.3;
+      };
       source.connect(node);
       node.connect(ctx.destination);
       recRef.current = { ctx, stream, node, source, chunks };
       setState('recording');
+      playStart();
       // Warm the model the moment recording begins so transcription is instant on stop.
       void window.openswarm?.voiceWarmup?.();
     } catch (err) {
@@ -98,13 +139,26 @@ export function useVoiceDictation() {
       const wav = encodeWav(samples);
       const res = await window.openswarm?.voiceTranscribe?.(wav);
       if (res?.ok && res.text) {
-        setLastText(res.text);
-        const inj = await window.openswarm?.voiceInject?.(res.text);
-        setFeedback(inj?.pasted
-          ? { tone: 'ok', icon: 'check', text: res.text, at: Date.now() }
-          : { tone: 'ok', icon: 'clipboard', text: `${res.text}  (copied, press Cmd+V)`, at: Date.now() });
+        // WhisperFlow-style cleanup: punctuation + filler words via the cheap aux tier, fail-open to
+        // the raw transcript on any error/timeout so dictation never breaks with the aux down.
+        const text = await polishText(res.text);
+        setLastText(text);
+        // Land the text where the user's cursor is: focused field, then focused browser page, then
+        // the OS paste fallback (other apps). The floating bubble is just confirmation, not the output.
+        const target = injectAtFocus(text);
+        if (target) {
+          playDone();
+          setFeedback({ tone: 'ok', icon: 'check', text, at: Date.now() });
+        } else {
+          const inj = await window.openswarm?.voiceInject?.(text);
+          if (inj?.pasted) playDone();
+          setFeedback(inj?.pasted
+            ? { tone: 'ok', icon: 'check', text, at: Date.now() }
+            : { tone: 'ok', icon: 'clipboard', text: `${text}  (copied, press Cmd+V)`, at: Date.now() });
+        }
         setState('idle');
       } else if (res?.ok && !res.text) {
+        playCancel();
         setFeedback({ tone: 'warn', icon: 'info', text: "Didn't catch that. Try again.", at: Date.now() });
         setState('idle');
       } else if (res?.error === 'model-downloading' || res?.error === 'no-model') {
@@ -137,5 +191,5 @@ export function useVoiceDictation() {
   // A dangling recorder (unmount mid-capture) must release the mic.
   useEffect(() => () => { teardown(); }, [teardown]);
 
-  return { state, lastText, error, pct, feedback, toggle, start, stop };
+  return { state, lastText, error, pct, feedback, toggle, start, stop, volumeRef };
 }
diff --git a/frontend/src/shared/voice/voiceSounds.ts b/frontend/src/shared/voice/voiceSounds.ts
new file mode 100644
index 00000000..1bf79ab6
--- /dev/null
+++ b/frontend/src/shared/voice/voiceSounds.ts
@@ -0,0 +1,35 @@
+// Tiny WebAudio cues for dictation, generated in code (no bundled assets): a soft rising two-note on
+// start, falling on cancel, and a quiet tick when text lands. Volumes stay whisper-level on purpose.
+let ctx: AudioContext | null = null;
+
+function audio(): AudioContext | null {
+  try {
+    if (!ctx) ctx = new AudioContext();
+    if (ctx.state === 'suspended') void ctx.resume();
+    return ctx;
+  } catch {
+    return null;
+  }
+}
+
+function blip(freqs: Array<[number, number, number]>): void {
+  const ac = audio();
+  if (!ac) return;
+  const t0 = ac.currentTime;
+  for (const [freq, at, dur] of freqs) {
+    const osc = ac.createOscillator();
+    const gain = ac.createGain();
+    osc.type = 'sine';
+    osc.frequency.value = freq;
+    gain.gain.setValueAtTime(0, t0 + at);
+    gain.gain.linearRampToValueAtTime(0.055, t0 + at + 0.02);
+    gain.gain.exponentialRampToValueAtTime(0.0001, t0 + at + dur);
+    osc.connect(gain).connect(ac.destination);
+    osc.start(t0 + at);
+    osc.stop(t0 + at + dur + 0.05);
+  }
+}
+
+export function playStart(): void { blip([[523, 0, 0.12], [784, 0.09, 0.16]]); }
+export function playCancel(): void { blip([[784, 0, 0.1], [523, 0.08, 0.14]]); }
+export function playDone(): void { blip([[1047, 0, 0.09]]); }

From a0f95cf36467121a281c1d46c677ac14caf4a0b7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 18:39:38 -0700
Subject: [PATCH 164/248] [eric] chat: fullscreen washes the user's accent into
 the theme ground

---
 frontend/src/app/pages/AgentChat/AgentChat.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index bc0eaca9..22456f3f 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -74,7 +74,7 @@ import { setGlowingBrowserCards, fadeGlowingBrowserCards, clearGlowingBrowserCar
 import type { WorkflowsRunContext } from '@/shared/state/dashboardLayoutSlice';
 import { setCardSidecar, commitDraft, updateWorkflowCard, controlWorkflowRun } from '@/shared/state/workflowsSlice';
 import { shallowEqual } from 'react-redux';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useClaudeTokens, useThemeAccent, useThemeMode } from '@/shared/styles/ThemeContext';
 import { parseMcpToolName, getMcpInputSummary } from '@/shared/mcpToolMeta';
 
 const CONTEXT_WINDOWS: Record<string, number> = {
@@ -235,6 +235,18 @@ interface AgentChatProps {
 
 const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose, embedded, autoFocus, isGlowing, onDismissGlow, initialContextPaths, onBranch, workflowEditId, readOnly, fullscreenChat, prefillPrompt, runContext, onClearRunContext, onSendRunQuestion }) => {
   const c = useClaudeTokens();
+  // Fullscreen reads as a place of its own: the user's onboarding accent washes down from the top and
+  // fades into the theme ground (dark or light), instead of a flat card color stretched to the window.
+  const { accent, gradient: accentStops } = useThemeAccent();
+  const { mode: themeMode } = useThemeMode();
+  const fullscreenWash = (() => {
+    if (!fullscreenChat) return undefined;
+    const stops = (accentStops && accentStops.length ? accentStops : [accent || '#6b62f0']);
+    const a = stops[0];
+    const b = stops[1] || stops[0];
+    const ground = themeMode === 'dark' ? '#1a1918' : '#F5F5F0';
+    return `linear-gradient(180deg, ${a}30 0%, ${b}18 22%, ${ground} 55%)`;
+  })();
   const STATUS_STYLES: Record<string, { color: string; bg: string }> = {
     running: { color: c.status.success, bg: c.status.successBg },
     waiting_approval: { color: c.status.warning, bg: c.status.warningBg },
@@ -1443,7 +1455,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   const statusStyle = STATUS_STYLES[session.status] || { color: c.text.tertiary, bg: c.bg.secondary };
 
   return (
-    <Box sx={{ display: 'flex', height: '100%' }}>
+    <Box sx={{ display: 'flex', height: '100%', ...(fullscreenWash && { background: fullscreenWash }) }}>
       <ContextDrawer />
       <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0, overflow: 'hidden', ...(fullscreenChat && { maxWidth: FULLSCREEN_READING_MAX_W, width: '100%', mx: 'auto' }) }}>
         {!embedded && (

From 87f08e78527b7dd35e3da9ff11f09b2c9b75f3a3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 23 Jul 2026 18:39:38 -0700
Subject: [PATCH 165/248] [eric] onboarding: sign-in beat restyled to the
 Claude/ChatGPT auth grammar

---
 .../OnboardingV3/beats/BeatSignIn.tsx         | 77 +++++++++++--------
 1 file changed, 47 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
index 21ae6990..260a1bbf 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
@@ -49,8 +49,8 @@ const BeatSignIn: React.FC<{
   };
 
   const rows: Array<{ id: string; name: string; icon: React.ReactNode; onClick: () => void; hint?: string }> = [
-    { id: 'google', name: 'Continue with Google', icon: <GoogleIcon sx={{ fontSize: 26, color: '#4285F4' }} />, onClick: onGoogle, hint: waitingGoogle && !signedIn ? 'waiting for your browser...' : undefined },
-    { id: 'email', name: 'Continue with email', icon: <EmailIcon sx={{ fontSize: 26, color: '#8a8a86' }} />, onClick: () => { if (!signedIn) setEmailOpen(true); } },
+    { id: 'google', name: 'Continue with Google', icon: <GoogleIcon sx={{ fontSize: 20, color: '#4285F4' }} />, onClick: onGoogle, hint: waitingGoogle && !signedIn ? 'Waiting for your browser...' : undefined },
+    { id: 'email', name: 'Continue with email', icon: <EmailIcon sx={{ fontSize: 20, color: '#6f6e6a' }} />, onClick: () => { if (!signedIn) setEmailOpen(true); } },
   ];
 
   return (
@@ -65,42 +65,59 @@ const BeatSignIn: React.FC<{
       wide
       logo={<OnboardingLogo size={52} />}
     >
-      <div style={{ width: 'min(440px, 100%)', display: 'flex', flexDirection: 'column', gap: 10 }}>
-        {rows.map((row, i) => (
-          <motion.button
-            key={row.id}
-            onClick={row.onClick}
-            initial={{ opacity: 0, y: 14 }}
+      <div style={{ width: 'min(380px, 100%)', display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {signedIn ? (
+          // Claude/ChatGPT-style done state: one quiet confirmation card, the buttons step aside.
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }}
+            transition={{ type: 'spring', stiffness: 320, damping: 26 }}
             style={{
-              display: 'flex', alignItems: 'center', gap: 14, padding: '0 0 0 18px', textAlign: 'left', overflow: 'hidden',
-              borderRadius: 14, border: 'none',
-              boxShadow: signedIn ? '0 0 0 2px #1a9e6a, 0 10px 26px rgba(20,16,80,0.22)' : '0 10px 26px rgba(20,16,80,0.22)',
-              background: '#ffffff', cursor: signedIn ? 'default' : 'pointer', fontFamily: 'inherit', minHeight: 64,
+              display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px',
+              borderRadius: 14, background: '#ffffff', boxShadow: '0 10px 26px rgba(20,16,80,0.22)',
             }}
           >
-            <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
-              <span style={{ fontSize: '0.98rem', fontWeight: 600, color: '#3d3d3a' }}>{row.name}</span>
-              {row.hint && <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>{row.hint}</span>}
-            </span>
             <span style={{
-              alignSelf: 'stretch', width: 78, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-              background: 'linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02))',
+              width: 34, height: 34, borderRadius: '50%', background: '#e7f6ee', flexShrink: 0,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
             }}>
-              {row.icon}
+              <CheckRoundedIcon sx={{ fontSize: 20, color: '#1a9e6a' }} />
             </span>
-          </motion.button>
-        ))}
-        {signedIn ? (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center', padding: '6px 0', fontSize: '0.9rem', color: 'rgba(255,255,255,0.92)' }}>
-            <CheckRoundedIcon sx={{ fontSize: 17, color: '#4fdf9f' }} />
-            Signed in{userEmail ? ` as ${userEmail}` : ''}
-          </div>
+            <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+              <span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>You're signed in</span>
+              {userEmail && (
+                <span style={{ fontSize: '0.8rem', color: '#8a8a86', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{userEmail}</span>
+              )}
+            </span>
+          </motion.div>
         ) : (
-          <div style={{ fontSize: '0.82rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
-            Sign in to continue.
-          </div>
+          <>
+            {rows.map((row, i) => (
+              // The Claude/ChatGPT auth grammar: full-width white button, brand mark on the left,
+              // label centered, thin border, generous height. No decoration doing the talking.
+              <motion.button
+                key={row.id}
+                onClick={row.onClick}
+                initial={{ opacity: 0, y: 14 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }}
+                style={{
+                  position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  height: 52, borderRadius: 12, border: '1px solid rgba(0,0,0,0.08)',
+                  background: '#ffffff', boxShadow: '0 8px 22px rgba(20,16,80,0.18)',
+                  cursor: 'pointer', fontFamily: 'inherit',
+                }}
+              >
+                <span style={{ position: 'absolute', left: 18, display: 'flex', alignItems: 'center' }}>{row.icon}</span>
+                <span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>
+                  {row.hint ? row.hint : row.name}
+                </span>
+              </motion.button>
+            ))}
+            <div style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.65)', textAlign: 'center', marginTop: 2 }}>
+              Sign in to continue.
+            </div>
+          </>
         )}
       </div>
       {emailOpen && !signedIn && <SignInDialog initialStage="email_form" onClose={() => setEmailOpen(false)} />}

From da0ca09c1adf4a22b013e729e80c633200898490 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 11:41:37 -0700
Subject: [PATCH 166/248] [eric] fonts: snap 865 hardcoded sizes to the 9-step
 type scale (30 stray values -> 9)

---
 frontend/src/app/Main.tsx                     |  4 +-
 .../src/app/components/Layout/AppShell.tsx    | 46 +++++-----
 .../Onboarding/ac/ACMultiChoice.tsx           |  4 +-
 .../app/components/Onboarding/ac/ACPopup.tsx  |  2 +-
 .../OnboardingV3/OnboardingV3Root.tsx         |  2 +-
 .../OnboardingV3/beats/BeatApps.tsx           |  4 +-
 .../OnboardingV3/beats/BeatCard.tsx           |  8 +-
 .../OnboardingV3/beats/BeatConnect.tsx        |  8 +-
 .../OnboardingV3/beats/BeatShell.tsx          |  6 +-
 .../OnboardingV3/beats/BeatSignIn.tsx         |  8 +-
 .../app/components/RunInDesktopMessage.tsx    |  4 +-
 .../app/components/editor/CommandPicker.tsx   |  8 +-
 .../components/editor/DirectoryBrowser.tsx    | 18 ++--
 .../app/components/editor/richEditorUtils.ts  |  4 +-
 .../src/app/components/feedback/Loading.tsx   |  2 +-
 .../app/components/nudges/AutomationChips.tsx |  2 +-
 .../src/app/components/nudges/RevealHero.tsx  | 14 +--
 .../app/components/overlays/DynamicIsland.tsx | 26 +++---
 .../overlays/GlobalSearchPalette.tsx          | 16 ++--
 .../app/components/overlays/PlanPicker.tsx    |  2 +-
 .../components/overlays/PlanPickerModal.tsx   |  2 +-
 .../overlays/TrustedFilePatterns.tsx          |  8 +-
 .../src/app/components/share/ImportModal.tsx  |  8 +-
 .../src/app/components/share/IncludesList.tsx | 12 +--
 .../src/app/components/share/PublishModal.tsx | 28 +++---
 .../src/app/components/share/ShareButton.tsx  |  2 +-
 .../src/app/components/share/ShareModal.tsx   | 22 ++---
 .../app/components/theme/AccentColorPad.tsx   |  2 +-
 .../src/app/pages/AgentChat/AgentChat.tsx     | 22 ++---
 .../model-picker/ModelPickerFooter.tsx        |  6 +-
 .../model-picker/ModelPickerHeader.tsx        | 10 +--
 .../model-picker/ModelPickerList.tsx          | 14 +--
 .../model-picker/ModelPickerMenu.tsx          |  2 +-
 .../model-picker/ModelPickerRecents.tsx       |  6 +-
 .../ChatInput/model-picker/modelTooltip.tsx   |  6 +-
 .../ChatInput/toolbar/ChatInputToolbar.tsx    |  2 +-
 .../ChatInput/toolbar/ComposerPlusMenu.tsx    |  4 +-
 .../ChatInput/toolbar/ModeControl.tsx         |  6 +-
 .../ChatInput/toolbar/ModelControl.tsx        |  2 +-
 .../toolbar/ThinkingLevelControl.tsx          | 10 +--
 .../ChatInput/view/AttachmentChips.tsx        | 10 +--
 .../ChatInput/view/ChatInputOverlays.tsx      |  4 +-
 .../ChatInput/view/ChatInputView.tsx          |  6 +-
 .../ChatInput/view/EditorSurface.tsx          |  6 +-
 .../ChatInput/view/PastePreviewDialog.tsx     |  4 +-
 .../ChatInput/view/SendBlockBanner.tsx        |  2 +-
 .../app/pages/AgentChat/ForceStopAgentBar.tsx |  8 +-
 .../pages/AgentChat/WelcomeQuickReplies.tsx   | 22 ++---
 .../AgentChat/bubbles/CompactionMarker.tsx    |  2 +-
 .../pages/AgentChat/bubbles/MessageBubble.tsx | 32 +++----
 .../AgentChat/bubbles/MessageEditSurface.tsx  |  2 +-
 .../bubbles/renderUserTextWithPills.tsx       |  2 +-
 .../AgentChat/mcp-cards/CalendarCard.tsx      | 22 ++---
 .../pages/AgentChat/mcp-cards/DriveCard.tsx   |  8 +-
 .../AgentChat/mcp-cards/GenericMcpCard.tsx    | 12 +--
 .../pages/AgentChat/mcp-cards/GmailCard.tsx   | 38 ++++----
 .../AgentChat/mcp-cards/McpResultCard.tsx     |  4 +-
 .../AgentChat/parsing/toolBubbleChrome.tsx    |  2 +-
 .../app/pages/AgentChat/shell/ApprovalBar.tsx | 74 ++++++++--------
 .../pages/AgentChat/shell/BranchNavigator.tsx |  2 +-
 .../shell/BrowserAgentInlineFeed.tsx          | 14 +--
 .../pages/AgentChat/shell/FeedbackDialog.tsx  |  6 +-
 .../AgentChat/shell/MessageActionBar.tsx      |  2 +-
 .../tool-bubbles/AgentResponseBody.tsx        | 10 +--
 .../tool-bubbles/CompactMcpBubble.tsx         | 12 +--
 .../tool-bubbles/CreateAgentBubble.tsx        | 10 +--
 .../tool-bubbles/DefaultToolBubble.tsx        | 14 +--
 .../tool-bubbles/InvokeAgentBubble.tsx        | 12 +--
 .../AgentChat/tool-bubbles/SourceFavicons.tsx |  2 +-
 .../tool-bubbles/ToolGroupBubble.tsx          | 18 ++--
 .../pages/AgentChat/tool-ui/AskUiBubble.tsx   |  8 +-
 .../pages/AgentChat/tool-ui/LinksWidget.tsx   |  6 +-
 .../pages/AgentChat/tool-ui/PlanWidget.tsx    |  6 +-
 .../pages/AgentChat/tool-ui/StatsWidget.tsx   |  8 +-
 .../src/app/pages/Analytics/Analytics.tsx     |  8 +-
 .../src/app/pages/Analytics/PixelChart.tsx    |  4 +-
 frontend/src/app/pages/Commands/Commands.tsx  | 18 ++--
 .../app/pages/Dashboard/DashboardToolbar.tsx  |  8 +-
 .../Dashboard/canvas/DashboardHeader.tsx      | 16 ++--
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 14 +--
 .../Dashboard/cards/BrowserAgentOverlay.tsx   | 20 ++---
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 20 ++---
 .../Dashboard/cards/DashboardViewCard.tsx     | 24 +++---
 .../app/pages/Dashboard/cards/NoteCard.tsx    |  2 +-
 .../pages/Dashboard/cards/WindowControls.tsx  |  2 +-
 .../Dashboard/controls/CanvasControls.tsx     |  2 +-
 .../Dashboard/controls/CardSearchPalette.tsx  |  4 +-
 .../Dashboard/controls/DirectionHints.tsx     |  8 +-
 .../Dashboard/desktop/AgentNarratorPill.tsx   |  6 +-
 .../Dashboard/desktop/ApplicationsWindow.tsx  | 12 +--
 .../pages/Dashboard/desktop/DesktopDock.tsx   |  4 +-
 .../Dashboard/desktop/DesktopSpawnPill.tsx    |  4 +-
 .../app/pages/Dashboard/desktop/HelpPill.tsx  |  2 +-
 .../Dashboard/desktop/MinimizedStack.tsx      |  2 +-
 .../DashboardSelection/DashboardSelection.tsx | 10 +--
 .../Settings/sections/SettingsHeader.tsx      |  2 +-
 .../sections/general/DataPrivacySection.tsx   |  8 +-
 .../sections/general/GeneralAdvanced.tsx      |  2 +-
 .../sections/general/GeneralAgentDefaults.tsx | 16 ++--
 .../sections/general/GeneralInterface.tsx     | 12 +--
 .../sections/general/SoftwareUpdateRow.tsx    |  6 +-
 .../Settings/sections/models/ApiKeyCard.tsx   |  4 +-
 .../sections/models/CustomProvidersEditor.tsx | 20 ++---
 .../Settings/sections/models/ModelsTab.tsx    |  4 +-
 .../pages/Settings/sections/settingsStyles.ts |  4 +-
 .../sections/subscription/AccountCard.tsx     | 12 +--
 .../subscription/OpenSwarmProCard.tsx         | 24 +++---
 .../subscription/SubscriptionCard.tsx         | 18 ++--
 .../subscription/SubscriptionCards.tsx        |  8 +-
 .../Settings/sections/usage/UsageStats.tsx    | 18 ++--
 .../pages/Skills/CommunitySkillsDialog.tsx    | 30 +++----
 .../src/app/pages/Skills/SkillBuilderChat.tsx |  6 +-
 frontend/src/app/pages/Skills/Skills.tsx      | 76 ++++++++--------
 frontend/src/app/pages/Tools/Tools.tsx        | 16 ++--
 .../Tools/cards/AgentWorkflowsSection.tsx     |  8 +-
 .../pages/Tools/cards/BrowserLoginConnect.tsx |  4 +-
 .../Tools/cards/BrowserPermissionCard.tsx     | 26 +++---
 .../app/pages/Tools/cards/CustomToolCard.tsx  | 30 +++----
 .../pages/Tools/cards/CustomToolConnect.tsx   |  8 +-
 .../pages/Tools/cards/CustomToolDevInfo.tsx   | 20 ++---
 .../Tools/cards/IntegrationGalleryCard.tsx    |  8 +-
 .../app/pages/Tools/cards/ServiceGroup.tsx    | 26 +++---
 .../src/app/pages/Tools/cards/ToolSection.tsx | 20 ++---
 .../pages/Tools/dialogs/McpConfigDialog.tsx   | 14 +--
 .../Tools/dialogs/RegistryBrowserDialog.tsx   | 10 +--
 .../pages/Tools/dialogs/RegistryServerRow.tsx | 44 +++++-----
 .../app/pages/Tools/dialogs/ToolDialogs.tsx   | 20 ++---
 frontend/src/app/pages/Views/AppCodePanel.tsx |  6 +-
 frontend/src/app/pages/Views/AppFileTree.tsx  |  4 +-
 frontend/src/app/pages/Views/HistoryPanel.tsx | 22 ++---
 .../src/app/pages/Views/TerminalPanel.tsx     |  4 +-
 frontend/src/app/pages/Views/ViewPreview.tsx  |  4 +-
 .../app/pages/Workflows/ScheduleCalendar.tsx  | 34 ++++----
 .../app/pages/Workflows/SchedulePopover.tsx   | 24 +++---
 .../Workflows/ScheduleTestWarningDialog.tsx   |  6 +-
 frontend/src/app/pages/Workflows/StepList.tsx | 12 +--
 .../pages/Workflows/WorkflowCardLiveViews.tsx | 24 +++---
 .../pages/Workflows/WorkflowCardSubviews.tsx  | 86 +++++++++----------
 .../app/pages/Workflows/workflowVisuals.tsx   | 28 +++---
 frontend/src/shared/styles/claudeTokens.ts    |  4 +
 frontend/src/shared/voice/VoiceOverlay.tsx    |  2 +-
 141 files changed, 865 insertions(+), 861 deletions(-)

diff --git a/frontend/src/app/Main.tsx b/frontend/src/app/Main.tsx
index 127f92fd..33109c71 100644
--- a/frontend/src/app/Main.tsx
+++ b/frontend/src/app/Main.tsx
@@ -389,7 +389,7 @@ const DefaultModelGuard: React.FC<{ children: React.ReactNode }> = ({ children }
           severity="info"
           variant="filled"
           onClose={() => setSessionSwitch(null)}
-          sx={{ fontSize: '0.8rem' }}
+          sx={{ fontSize: '0.8125rem' }}
         >
           {sessionSwitch && (sessionSwitch.toFreeTrial ? (
             <>Your model isn't connected, you're on the free trial now{sessionSwitch.runs != null ? <> ({sessionSwitch.runs} runs left)</> : null}.</>
@@ -430,7 +430,7 @@ const CrashRecoveryChip: React.FC = () => {
         bgcolor: 'background.paper',
         border: '1px solid', borderColor: 'divider',
         boxShadow: 3, borderRadius: '10px',
-        px: 1.75, py: 1, fontSize: '0.85rem',
+        px: 1.75, py: 1, fontSize: '0.875rem',
         maxWidth: 360,
       }}>
         <Box component="span" sx={{
diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 8485c43e..e5ed4a72 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -727,7 +727,7 @@ const AppShell: React.FC = () => {
           }}
         >
           <ErrorSlime size={22} />
-          <Typography sx={{ fontSize: '0.86rem', color: '#ef4444', flex: 1, fontWeight: 500, letterSpacing: '0.01em' }}>
+          <Typography sx={{ fontSize: '0.875rem', color: '#ef4444', flex: 1, fontWeight: 500, letterSpacing: '0.01em' }}>
             {!isOnline
               ? 'No internet connection; agents cannot reach AI models or external services'
               : (
@@ -755,7 +755,7 @@ const AppShell: React.FC = () => {
 
       <Collapse in={showFreeTrialNudge && !fsHideChrome} timeout={300} unmountOnExit>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2, py: 0.5, flexShrink: 0 }}>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, flex: 1, letterSpacing: '0.01em' }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, flex: 1, letterSpacing: '0.01em' }}>
             {freeTrialSpent
               ? (refillLabel ? `Out of free runs, fresh ones in ${refillLabel}. ` : "You're out of free runs for now. ")
               : "Nice, you're rolling. "}
@@ -773,7 +773,7 @@ const AppShell: React.FC = () => {
               role="button"
               aria-label="Dismiss"
               onClick={() => { try { localStorage.setItem('os_ft_nudge_dismissed', '1'); } catch {} setFtNudgeDismissed(true); }}
-              sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '0.95rem', lineHeight: 1, px: 0.5, '&:hover': { color: c.text.secondary } }}
+              sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '1rem', lineHeight: 1, px: 0.5, '&:hover': { color: c.text.secondary } }}
             >
               ×
             </Box>
@@ -790,14 +790,14 @@ const AppShell: React.FC = () => {
           {usageResetLabel && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, color: c.text.secondary }}>
               <Clock size={12} style={{ flexShrink: 0 }} />
-              <Typography sx={{ fontSize: '0.8rem', letterSpacing: '0.01em' }}>{usageResetLabel}</Typography>
+              <Typography sx={{ fontSize: '0.8125rem', letterSpacing: '0.01em' }}>{usageResetLabel}</Typography>
             </Box>
           )}
           {proMaxed && (
             <Box
               component="span"
               onClick={() => dispatch(openSettingsModal('models'))}
-              sx={{ color: c.accent.primary, cursor: 'pointer', fontSize: '0.8rem', '&:hover': { textDecoration: 'underline' } }}
+              sx={{ color: c.accent.primary, cursor: 'pointer', fontSize: '0.8125rem', '&:hover': { textDecoration: 'underline' } }}
             >
               Upgrade
             </Box>
@@ -819,7 +819,7 @@ const AppShell: React.FC = () => {
           }}
         >
           <SystemUpdateAltIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />
-          <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {updateStatus === 'available' && `OpenSwarm${verSuffix} is available`}
             {updateStatus === 'downloading' && `Downloading OpenSwarm${verSuffix}…`}
             {updateStatus === 'downloaded' && `OpenSwarm${verSuffix} is ready to install`}
@@ -839,7 +839,7 @@ const AppShell: React.FC = () => {
             />
           )}
           {updateStatus === 'downloading' && (
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, flexShrink: 0 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, flexShrink: 0 }}>
               {Math.round(downloadPercent)}%
             </Typography>
           )}
@@ -979,8 +979,8 @@ const AppShell: React.FC = () => {
             }}
           >
             <SearchGlyph size={15} />
-            <Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.86rem', color: c.text.muted }}>Search</Typography>
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
+            <Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.875rem', color: c.text.muted }}>Search</Typography>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
           </ButtonBase>
         </Box>
         <Box sx={{
@@ -1024,7 +1024,7 @@ const AppShell: React.FC = () => {
                 sx={{
                   '& .MuiListItemText-primary': {
                     color: isDashboardRoute ? c.text.primary : c.text.muted,
-                    fontSize: '0.9rem',
+                    fontSize: '0.875rem',
                     fontWeight: isDashboardRoute ? 600 : 400,
                   },
                 }}
@@ -1114,7 +1114,7 @@ const AppShell: React.FC = () => {
                           sx={{
                             flex: 1,
                             minWidth: 0,
-                            fontSize: '0.86rem',
+                            fontSize: '0.875rem',
                             fontWeight: isActive ? 500 : 400,
                             color: isActive ? c.text.secondary : c.text.ghost,
                             py: 0,
@@ -1135,7 +1135,7 @@ const AppShell: React.FC = () => {
                           }}
                           sx={{
                             color: isActive ? c.text.secondary : c.text.ghost,
-                            fontSize: '0.86rem',
+                            fontSize: '0.875rem',
                             fontWeight: isActive ? 500 : 400,
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
@@ -1182,7 +1182,7 @@ const AppShell: React.FC = () => {
                 sx={{
                   '& .MuiListItemText-primary': {
                     color: isAppsRoute ? c.text.primary : c.text.muted,
-                    fontSize: '0.9rem',
+                    fontSize: '0.875rem',
                     fontWeight: isAppsRoute ? 600 : 400,
                   },
                 }}
@@ -1266,7 +1266,7 @@ const AppShell: React.FC = () => {
                           sx={{
                             flex: 1,
                             minWidth: 0,
-                            fontSize: '0.86rem',
+                            fontSize: '0.875rem',
                             fontWeight: isActive ? 500 : 400,
                             color: isActive ? c.text.secondary : c.text.ghost,
                             py: 0,
@@ -1285,7 +1285,7 @@ const AppShell: React.FC = () => {
                                 onDoubleClick={(e) => { e.stopPropagation(); handleStartAppRename(app.id, appName); }}
                                 sx={{
                                   color: isActive ? c.text.secondary : c.text.ghost,
-                                  fontSize: '0.86rem',
+                                  fontSize: '0.875rem',
                                   fontWeight: isActive ? 500 : 400,
                                   overflow: 'hidden',
                                   textOverflow: 'ellipsis',
@@ -1359,7 +1359,7 @@ const AppShell: React.FC = () => {
               sx={{
                 '& .MuiListItemText-primary': {
                   color: c.text.muted,
-                  fontSize: '0.9rem',
+                  fontSize: '0.875rem',
                   fontWeight: 400,
                 },
               }}
@@ -1461,7 +1461,7 @@ const AppShell: React.FC = () => {
               <Button
                 size="small"
                 onClick={() => setSnackbarDismissed(true)}
-                sx={{ color: c.text.muted, textTransform: 'none', fontSize: '0.8rem', minWidth: 'auto' }}
+                sx={{ color: c.text.muted, textTransform: 'none', fontSize: '0.8125rem', minWidth: 'auto' }}
               >
                 Dismiss
               </Button>
@@ -1474,7 +1474,7 @@ const AppShell: React.FC = () => {
                     bgcolor: c.accent.primary,
                     '&:hover': { bgcolor: c.accent.pressed },
                     textTransform: 'none',
-                    fontSize: '0.8rem',
+                    fontSize: '0.8125rem',
                     borderRadius: 1.5,
                     minWidth: 'auto',
                   }}
@@ -1494,7 +1494,7 @@ const AppShell: React.FC = () => {
                     '&:hover': { bgcolor: c.accent.pressed },
                     '&.Mui-disabled': { bgcolor: c.accent.primary, color: '#fff', opacity: 0.7 },
                     textTransform: 'none',
-                    fontSize: '0.8rem',
+                    fontSize: '0.8125rem',
                     borderRadius: 1.5,
                     minWidth: 'auto',
                   }}
@@ -1539,14 +1539,14 @@ const AppShell: React.FC = () => {
           {peek.thumbnail ? (
             <Box component="img" src={peek.thumbnail} alt="" sx={{ width: '100%', height: 150, objectFit: 'cover', objectPosition: 'top left', display: 'block' }} />
           ) : (
-            <Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.78rem' }}>
+            <Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.75rem' }}>
               No preview yet
             </Box>
           )}
           <Box sx={{ p: 1.25 }}>
-            <Typography sx={{ fontWeight: 600, fontSize: '0.9rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
+            <Typography sx={{ fontWeight: 600, fontSize: '0.875rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
             {peek.description && (
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                 {peek.description}
               </Typography>
             )}
@@ -1590,7 +1590,7 @@ const AppShell: React.FC = () => {
             <Button
               size="small"
               onClick={handleUndoDeleteApp}
-              sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8rem', minWidth: 'auto' }}
+              sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8125rem', minWidth: 'auto' }}
             >
               Undo
             </Button>
diff --git a/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx b/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx
index fc5edf20..022dbead 100644
--- a/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx
+++ b/frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx
@@ -89,7 +89,7 @@ const ACMultiChoice: React.FC<Props> = ({
       >
         <Typography
           sx={{
-            fontSize: '0.84rem',
+            fontSize: '0.8125rem',
             fontWeight: 600,
             color: c.text.primary,
             lineHeight: 1.4,
@@ -118,7 +118,7 @@ const ACMultiChoice: React.FC<Props> = ({
                 borderRadius: '10px',
                 px: 1.1,
                 py: 0.7,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 fontFamily: c.font.sans,
                 transition: 'all 0.12s',
diff --git a/frontend/src/app/components/Onboarding/ac/ACPopup.tsx b/frontend/src/app/components/Onboarding/ac/ACPopup.tsx
index 8cedc55b..3ad41b66 100644
--- a/frontend/src/app/components/Onboarding/ac/ACPopup.tsx
+++ b/frontend/src/app/components/Onboarding/ac/ACPopup.tsx
@@ -164,7 +164,7 @@ const ACPopup: React.FC<Props> = ({ text, offset = { x: 0, y: 14 } }) => {
         <Typography
           sx={{
             // 0.85rem with bold weight reads cleanly without dominating.
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             color: c.text.primary,
             fontWeight: 600,
             lineHeight: 1.4,
diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 47069ade..5c8df322 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -86,7 +86,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.6, delay: 0.8 }}
-        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1.02rem', color: 'rgba(255,255,255,0.75)' }}
+        style={{ position: 'relative', margin: '14px 0 0', fontSize: '1rem', color: 'rgba(255,255,255,0.75)' }}
       >
         {sub}
       </motion.p>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
index ed939f6d..a2ff6d9f 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
@@ -44,7 +44,7 @@ const BeatApps: React.FC<{
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 14px', borderBottom: `1px solid ${c.border.subtle}`, background: c.bg.elevated }}>
-          <span style={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
+          <span style={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
         </div>
         <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(118px, 1fr))', gap: 12 }}>
           {entries.map((entry, i) => {
@@ -68,7 +68,7 @@ const BeatApps: React.FC<{
                 }}
               >
                 <span style={{ width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{entry.icon}</span>
-                <span style={{ fontSize: '0.76rem', fontWeight: 500, color: picked ? c.text.primary : c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
+                <span style={{ fontSize: '0.75rem', fontWeight: 500, color: picked ? c.text.primary : c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
               </motion.button>
             );
           })}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index c8ce1aa2..9e33a00d 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -240,17 +240,17 @@ const BeatCard: React.FC<{
               placeholder="Your name"
               style={{
                 marginTop: 20, border: 'none', outline: 'none', background: 'transparent',
-                fontSize: '1.7rem', fontWeight: 800, color: ink, fontFamily: 'inherit',
+                fontSize: '1.75rem', fontWeight: 800, color: ink, fontFamily: 'inherit',
                 width: '100%', padding: 0,
               }}
             />
-            <div style={{ marginTop: 5, fontFamily: MONO, fontSize: '0.66rem', letterSpacing: '0.14em', color: ink }}>
+            <div style={{ marginTop: 5, fontFamily: MONO, fontSize: '0.6875rem', letterSpacing: '0.14em', color: ink }}>
               {epithet}
             </div>
             <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
               <span style={{
                 display: 'inline-flex', alignItems: 'center', gap: 7,
-                fontFamily: MONO, fontSize: '0.56rem', letterSpacing: '0.08em',
+                fontFamily: MONO, fontSize: '0.625rem', letterSpacing: '0.08em',
                 color: ink, border: `1px solid ${ink}55`, borderRadius: 5, padding: '3px 7px',
               }}>
                 OPENSWARM
@@ -260,7 +260,7 @@ const BeatCard: React.FC<{
                 }} />
                 {today.toUpperCase()}
               </span>
-              <span style={{ fontSize: '0.6rem', letterSpacing: '0.06em', color: ink, fontWeight: 800, textAlign: 'right', lineHeight: 1.35 }}>
+              <span style={{ fontSize: '0.625rem', letterSpacing: '0.06em', color: ink, fontWeight: 800, textAlign: 'right', lineHeight: 1.35 }}>
                 OPEN<br />SWARM
               </span>
             </div>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index 13d494b5..edac464a 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -107,10 +107,10 @@ const BeatConnect: React.FC<{
                 boxShadow: isConnected ? 'inset 0 0 0 3px #ffffff' : 'none',
               }} />
               <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
-                <span style={{ fontSize: '0.98rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
+                <span style={{ fontSize: '1rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
                 {/* The green ring + filled radio already signal connected, so no redundant "Connected" text. */}
                 {!isConnected && isThis && !connected
-                  ? <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
+                  ? <span style={{ fontSize: '0.75rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
                   : null}
               </span>
               {/* Arc's icon tile: a full-height soft-tinted zone on the row's right edge, real brand mark inside. */}
@@ -124,12 +124,12 @@ const BeatConnect: React.FC<{
           );
         })}
         {userCode && !connected && (
-          <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.9rem', color: 'rgba(255,255,255,0.92)' }}>
+          <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.875rem', color: 'rgba(255,255,255,0.92)' }}>
             Your code: <strong style={{ fontFamily: c.font.mono, letterSpacing: '0.08em' }}>{userCode}</strong>
           </div>
         )}
         {!canContinue && (
-          <div style={{ fontSize: '0.82rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
+          <div style={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
             Pick a subscription above to continue.
           </div>
         )}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
index b6263170..77b963b1 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -106,7 +106,7 @@ const BeatShell: React.FC<{
           style={{
             display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
             marginBottom: 18, padding: 0, border: 'none', background: 'transparent',
-            color: 'rgba(255,255,255,0.47)', fontSize: '0.85rem', cursor: 'pointer', fontFamily: 'inherit',
+            color: 'rgba(255,255,255,0.47)', fontSize: '0.875rem', cursor: 'pointer', fontFamily: 'inherit',
             position: wide ? 'absolute' : 'relative', top: wide ? 24 : undefined, left: wide ? 28 : undefined,
           }}
         >
@@ -117,7 +117,7 @@ const BeatShell: React.FC<{
       <motion.h1 {...enter(0.12)} style={{ margin: 0, fontSize: wide ? 'clamp(2.1rem, 2.8vw, 2.7rem)' : 'clamp(2.1rem, 3.2vw, 3rem)', lineHeight: 1.06, fontWeight: 800, letterSpacing: '-0.02em', fontFamily: 'inherit' }}>
         {title}
       </motion.h1>
-      <motion.p {...enter(0.26)} style={{ margin: '18px 0 0', fontSize: '1.04rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: '36ch', whiteSpace: 'pre-line' }}>
+      <motion.p {...enter(0.26)} style={{ margin: '18px 0 0', fontSize: '1rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: '36ch', whiteSpace: 'pre-line' }}>
         {body}
       </motion.p>
       {/* Arc pins the CTA to the panel's bottom on card beats; on the wide account beat it follows the content. */}
@@ -141,7 +141,7 @@ const BeatShell: React.FC<{
             onClick={() => armed && onSecondary()}
             style={{
               marginTop: 12, width: '100%', border: 'none', background: 'transparent',
-              color: 'rgba(255,255,255,0.55)', fontSize: '0.88rem', fontWeight: 500,
+              color: 'rgba(255,255,255,0.55)', fontSize: '0.875rem', fontWeight: 500,
               cursor: 'pointer', fontFamily: 'inherit', padding: 4,
             }}
           >
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
index 260a1bbf..7be6f51b 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
@@ -84,9 +84,9 @@ const BeatSignIn: React.FC<{
               <CheckRoundedIcon sx={{ fontSize: 20, color: '#1a9e6a' }} />
             </span>
             <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-              <span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>You're signed in</span>
+              <span style={{ fontSize: '1rem', fontWeight: 600, color: '#2a2a27' }}>You're signed in</span>
               {userEmail && (
-                <span style={{ fontSize: '0.8rem', color: '#8a8a86', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{userEmail}</span>
+                <span style={{ fontSize: '0.8125rem', color: '#8a8a86', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{userEmail}</span>
               )}
             </span>
           </motion.div>
@@ -109,12 +109,12 @@ const BeatSignIn: React.FC<{
                 }}
               >
                 <span style={{ position: 'absolute', left: 18, display: 'flex', alignItems: 'center' }}>{row.icon}</span>
-                <span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>
+                <span style={{ fontSize: '1rem', fontWeight: 600, color: '#2a2a27' }}>
                   {row.hint ? row.hint : row.name}
                 </span>
               </motion.button>
             ))}
-            <div style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.65)', textAlign: 'center', marginTop: 2 }}>
+            <div style={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.65)', textAlign: 'center', marginTop: 2 }}>
               Sign in to continue.
             </div>
           </>
diff --git a/frontend/src/app/components/RunInDesktopMessage.tsx b/frontend/src/app/components/RunInDesktopMessage.tsx
index 2237c415..07d3179c 100644
--- a/frontend/src/app/components/RunInDesktopMessage.tsx
+++ b/frontend/src/app/components/RunInDesktopMessage.tsx
@@ -25,10 +25,10 @@ const RunInDesktopMessage: React.FC<Props> = ({ kind = 'browser' }) => {
         userSelect: 'none',
       }}
     >
-      <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: '#bbb' }}>
+      <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: '#bbb' }}>
         Open this in the OpenSwarm desktop app
       </Typography>
-      <Typography sx={{ fontSize: '0.82rem', lineHeight: 1.5, maxWidth: 360 }}>
+      <Typography sx={{ fontSize: '0.8125rem', lineHeight: 1.5, maxWidth: 360 }}>
         {noun} run inside the OpenSwarm desktop window, not a regular web browser. It looks like you opened the dev URL directly in a browser; launch OpenSwarm (the Electron window from <code>bash run.sh</code>) and use it there instead.
       </Typography>
     </Box>
diff --git a/frontend/src/app/components/editor/CommandPicker.tsx b/frontend/src/app/components/editor/CommandPicker.tsx
index 04213763..ffcb1526 100644
--- a/frontend/src/app/components/editor/CommandPicker.tsx
+++ b/frontend/src/app/components/editor/CommandPicker.tsx
@@ -412,7 +412,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
                 component="span"
                 sx={{
                   color: c.text.primary,
-                  fontSize: '0.8rem',
+                  fontSize: '0.8125rem',
                   fontWeight: 500,
                   fontFamily: c.font.mono,
                   whiteSpace: 'nowrap',
@@ -425,7 +425,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
                 component="span"
                 sx={{
                   color: c.text.muted,
-                  fontSize: '0.72rem',
+                  fontSize: '0.75rem',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
@@ -459,7 +459,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
           <Box key={label} sx={{ display: 'flex', alignItems: 'center', gap: 0.375 }}>
             <Typography
               sx={{
-                fontSize: '0.58rem',
+                fontSize: '0.625rem',
                 fontFamily: c.font.mono,
                 color: c.text.ghost,
                 bgcolor: c.bg.secondary,
@@ -472,7 +472,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
             >
               {keys}
             </Typography>
-            <Typography sx={{ fontSize: '0.58rem', color: c.text.ghost }}>
+            <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
               {label}
             </Typography>
           </Box>
diff --git a/frontend/src/app/components/editor/DirectoryBrowser.tsx b/frontend/src/app/components/editor/DirectoryBrowser.tsx
index 0934fe65..996f1ab4 100644
--- a/frontend/src/app/components/editor/DirectoryBrowser.tsx
+++ b/frontend/src/app/components/editor/DirectoryBrowser.tsx
@@ -149,7 +149,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
             sx={{
               '& .MuiOutlinedInput-root': {
                 bgcolor: c.bg.page,
-                fontSize: '0.85rem',
+                fontSize: '0.875rem',
                 fontFamily: c.font.mono,
               },
             }}
@@ -192,7 +192,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                 component="button"
                 underline="hover"
                 onClick={() => browse('/')}
-                sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}
+                sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}
               >
                 /
               </Link>
@@ -200,7 +200,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                 const fullPath = '/' + pathSegments.slice(0, i + 1).join('/');
                 const isLast = i === pathSegments.length - 1;
                 return isLast ? (
-                  <Typography key={fullPath} sx={{ color: c.text.primary, fontSize: '0.78rem', fontWeight: 500 }}>
+                  <Typography key={fullPath} sx={{ color: c.text.primary, fontSize: '0.75rem', fontWeight: 500 }}>
                     {seg}
                   </Typography>
                 ) : (
@@ -209,7 +209,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                     component="button"
                     underline="hover"
                     onClick={() => browse(fullPath)}
-                    sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}
+                    sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}
                   >
                     {seg}
                   </Link>
@@ -220,7 +220,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
         )}
 
         {error && (
-          <Typography sx={{ color: c.status.error, fontSize: '0.82rem', px: 1 }}>
+          <Typography sx={{ color: c.status.error, fontSize: '0.8125rem', px: 1 }}>
             {error}
           </Typography>
         )}
@@ -250,7 +250,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
             </Box>
           ) : !hasEntries ? (
             <Box sx={{ py: 4, textAlign: 'center' }}>
-              <Typography sx={{ color: c.text.ghost, fontSize: '0.85rem' }}>
+              <Typography sx={{ color: c.text.ghost, fontSize: '0.875rem' }}>
                 Empty directory
               </Typography>
             </Box>
@@ -277,7 +277,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                   </ListItemIcon>
                   <ListItemText
                     primary={dir}
-                    primaryTypographyProps={{ sx: { fontSize: '0.84rem', color: c.text.primary } }}
+                    primaryTypographyProps={{ sx: { fontSize: '0.8125rem', color: c.text.primary } }}
                   />
                 </ListItemButton>
               ))}
@@ -301,7 +301,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
                   </ListItemIcon>
                   <ListItemText
                     primary={file}
-                    primaryTypographyProps={{ sx: { fontSize: '0.84rem', color: c.text.secondary } }}
+                    primaryTypographyProps={{ sx: { fontSize: '0.8125rem', color: c.text.secondary } }}
                   />
                 </ListItemButton>
               ))}
@@ -310,7 +310,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
         </Box>
       </DialogContent>
       <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'space-between' }}>
-        <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem', pl: 1 }}>
+        <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', pl: 1 }}>
           {selected
             ? `Selected: ${selected.name}`
             : 'Click to select, double-click folders to open'}
diff --git a/frontend/src/app/components/editor/richEditorUtils.ts b/frontend/src/app/components/editor/richEditorUtils.ts
index 543fd99b..b5beb82b 100644
--- a/frontend/src/app/components/editor/richEditorUtils.ts
+++ b/frontend/src/app/components/editor/richEditorUtils.ts
@@ -49,7 +49,7 @@ export function createSkillPillElement(
     borderRadius: '999px',
     background: `${SKILL_COLOR}18`,
     color: SKILL_COLOR,
-    fontSize: '0.72rem',
+    fontSize: '0.75rem',
     fontFamily: monoFont,
     lineHeight: '1.8',
     verticalAlign: 'baseline',
@@ -116,7 +116,7 @@ export function createPasteCardElement(
     borderRadius: '6px',
     background: `${PASTE_CARD_COLOR}1A`,
     color: PASTE_CARD_COLOR,
-    fontSize: '0.72rem',
+    fontSize: '0.75rem',
     fontFamily: monoFont,
     lineHeight: '1.8',
     verticalAlign: 'baseline',
diff --git a/frontend/src/app/components/feedback/Loading.tsx b/frontend/src/app/components/feedback/Loading.tsx
index f36c8156..49cffd42 100644
--- a/frontend/src/app/components/feedback/Loading.tsx
+++ b/frontend/src/app/components/feedback/Loading.tsx
@@ -105,7 +105,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({ icon, title, hint, delay
       }}
     >
       {icon && <Box sx={{ opacity: 0.5, fontSize: 32 }}>{icon}</Box>}
-      <Typography sx={{ fontSize: '0.9rem', fontWeight: 500, color: c.text.muted }}>
+      <Typography sx={{ fontSize: '0.875rem', fontWeight: 500, color: c.text.muted }}>
         {title}
       </Typography>
       {hint && (
diff --git a/frontend/src/app/components/nudges/AutomationChips.tsx b/frontend/src/app/components/nudges/AutomationChips.tsx
index 17c9ea6e..dff1780c 100644
--- a/frontend/src/app/components/nudges/AutomationChips.tsx
+++ b/frontend/src/app/components/nudges/AutomationChips.tsx
@@ -66,7 +66,7 @@ const AutomationChips: React.FC<{ c: ClaudeTokens }> = ({ c }) => {
               border: `1px dashed ${done ? c.status.success : c.border.strong}`,
               background: done ? c.status.successBg : 'transparent',
               color: done ? c.status.success : c.text.secondary,
-              fontSize: '0.88rem', fontWeight: 500,
+              fontSize: '0.875rem', fontWeight: 500,
               cursor: done ? 'default' : 'pointer', fontFamily: 'inherit',
             }}
           >
diff --git a/frontend/src/app/components/nudges/RevealHero.tsx b/frontend/src/app/components/nudges/RevealHero.tsx
index 47085f09..a55b756f 100644
--- a/frontend/src/app/components/nudges/RevealHero.tsx
+++ b/frontend/src/app/components/nudges/RevealHero.tsx
@@ -85,10 +85,10 @@ const RevealHero: React.FC = () => {
               <Sparkles size={18} />
             </div>
             <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ fontSize: '1.02rem', fontWeight: 700, color: c.text.primary, letterSpacing: '-0.01em' }}>
+              <div style={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, letterSpacing: '-0.01em' }}>
                 {userName ? `${userName}, while you set up I got to work` : `While you set up, I got to work`}
               </div>
-              <div style={{ fontSize: '0.8rem', color: c.text.tertiary, marginTop: 2 }}>
+              <div style={{ fontSize: '0.8125rem', color: c.text.tertiary, marginTop: 2 }}>
                 {doneCount === jobs.length ? `All done, here on your canvas` : `${doneCount} of ${jobs.length} done, the rest are running`}
               </div>
             </div>
@@ -114,17 +114,17 @@ const RevealHero: React.FC = () => {
                   }}>
                     {iconFor(job.kind)}
                   </div>
-                  <div style={{ flex: 1, minWidth: 0, fontSize: '0.9rem', fontWeight: 500, color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <div style={{ flex: 1, minWidth: 0, fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {lineFor(job, st)}
                   </div>
                   {st === 'done' ? (
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.74rem', fontWeight: 600, color: c.status.success, flexShrink: 0 }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.75rem', fontWeight: 600, color: c.status.success, flexShrink: 0 }}>
                       <Check size={13} /> done
                     </span>
                   ) : st === 'snag' ? (
-                    <span style={{ fontSize: '0.74rem', fontWeight: 600, color: c.status.warning, flexShrink: 0 }}>needs a look</span>
+                    <span style={{ fontSize: '0.75rem', fontWeight: 600, color: c.status.warning, flexShrink: 0 }}>needs a look</span>
                   ) : (
-                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', fontWeight: 600, color: c.text.tertiary, flexShrink: 0 }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, flexShrink: 0 }}>
                       <span style={{
                         width: 7, height: 7, borderRadius: 999, background: c.accent.primary,
                         animation: 'revealHeroPulse 1.3s ease-in-out infinite',
@@ -136,7 +136,7 @@ const RevealHero: React.FC = () => {
               );
             })}
           </div>
-          <div style={{ padding: '9px 18px 13px', borderTop: `1px solid ${c.border.subtle}`, fontSize: '0.76rem', color: c.text.ghost }}>
+          <div style={{ padding: '9px 18px 13px', borderTop: `1px solid ${c.border.subtle}`, fontSize: '0.75rem', color: c.text.ghost }}>
             It's all on your canvas below. Nothing's saved or deleted without you, keep it or clear it anytime.
           </div>
           <style>{`@keyframes revealHeroPulse { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }`}</style>
diff --git a/frontend/src/app/components/overlays/DynamicIsland.tsx b/frontend/src/app/components/overlays/DynamicIsland.tsx
index 4e795839..25fd5bbe 100644
--- a/frontend/src/app/components/overlays/DynamicIsland.tsx
+++ b/frontend/src/app/components/overlays/DynamicIsland.tsx
@@ -113,7 +113,7 @@ const AgentStatusRow: React.FC<{
       <StatusDot status={agent.status} c={c} />
       <Typography
         sx={{
-          fontSize: '0.78rem',
+          fontSize: '0.75rem',
           fontWeight: 500,
           color: c.text.secondary,
           flex: 1,
@@ -126,7 +126,7 @@ const AgentStatusRow: React.FC<{
       </Typography>
       <Typography
         sx={{
-          fontSize: '0.6rem',
+          fontSize: '0.625rem',
           color: c.text.ghost,
           textTransform: 'uppercase',
           letterSpacing: '0.04em',
@@ -618,7 +618,7 @@ const CompactPill: React.FC<{
       <ActivityIndicator c={c} />
       <Typography
         sx={{
-          fontSize: '0.68rem',
+          fontSize: '0.6875rem',
           fontWeight: 500,
           color: c.text.tertiary,
           flex: 1,
@@ -702,7 +702,7 @@ const CompactActionablePill: React.FC<{
         </Box>
         <Typography
           sx={{
-            fontSize: '0.68rem',
+            fontSize: '0.6875rem',
             fontWeight: 600,
             color: isIntervention ? '#f59e0b' : c.text.secondary,
             flex: 1,
@@ -717,7 +717,7 @@ const CompactActionablePill: React.FC<{
         {remainingCount > 1 && (
           <Typography
             sx={{
-              fontSize: '0.6rem',
+              fontSize: '0.625rem',
               fontWeight: 600,
               color: c.text.ghost,
               flexShrink: 0,
@@ -756,7 +756,7 @@ const CompactActionablePill: React.FC<{
                 height: 18,
                 px: 0.5,
                 borderRadius: '4px',
-                fontSize: '0.58rem',
+                fontSize: '0.625rem',
                 fontWeight: 700,
                 color: '#fff',
                 bgcolor: c.status.success,
@@ -852,7 +852,7 @@ const ExpandedCard: React.FC<{
       >
         <Typography
           sx={{
-            fontSize: '0.76rem',
+            fontSize: '0.75rem',
             fontWeight: 600,
             color: c.text.muted,
             flex: 1,
@@ -863,7 +863,7 @@ const ExpandedCard: React.FC<{
         {badgeCount > 0 && (
           <Typography
             sx={{
-              fontSize: '0.65rem',
+              fontSize: '0.625rem',
               fontWeight: 600,
               color: c.text.ghost,
               flexShrink: 0,
@@ -904,7 +904,7 @@ const ExpandedCard: React.FC<{
             {hasAgents && (
               <Typography
                 sx={{
-                  fontSize: '0.58rem',
+                  fontSize: '0.625rem',
                   fontWeight: 600,
                   color: c.text.ghost,
                   textTransform: 'uppercase',
@@ -921,7 +921,7 @@ const ExpandedCard: React.FC<{
                 {groups.length > 1 && (
                   <Typography
                     sx={{
-                      fontSize: '0.65rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       color: c.text.ghost,
                       textTransform: 'uppercase',
@@ -963,7 +963,7 @@ const ExpandedCard: React.FC<{
             {hasApprovals && (
               <Typography
                 sx={{
-                  fontSize: '0.58rem',
+                  fontSize: '0.625rem',
                   fontWeight: 600,
                   color: c.text.ghost,
                   textTransform: 'uppercase',
@@ -1007,7 +1007,7 @@ const ExpandedCard: React.FC<{
                 >
                   <Typography
                     sx={{
-                      fontSize: '0.58rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       color: c.text.ghost,
                       textTransform: 'uppercase',
@@ -1021,7 +1021,7 @@ const ExpandedCard: React.FC<{
                     component="span"
                     onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClearAllFinished(); }}
                     sx={{
-                      fontSize: '0.58rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       color: c.text.ghost,
                       cursor: 'pointer',
diff --git a/frontend/src/app/components/overlays/GlobalSearchPalette.tsx b/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
index e792e4c9..2633bbae 100644
--- a/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
+++ b/frontend/src/app/components/overlays/GlobalSearchPalette.tsx
@@ -233,7 +233,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
       >
         {/* Input row */}
         <Box sx={{ display: 'flex', alignItems: 'center', px: 2.25, py: 1.75, borderBottom: `1px solid ${c.border.subtle}` }}>
-          <SearchIcon sx={{ fontSize: '1.4rem', color: c.text.muted, mr: 1.5 }} />
+          <SearchIcon sx={{ fontSize: '1.375rem', color: c.text.muted, mr: 1.5 }} />
           <InputBase
             inputRef={inputRef}
             value={query}
@@ -241,14 +241,14 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
             placeholder="Search, or type a command…"
             fullWidth
             sx={{
-              fontSize: '1.05rem',
+              fontSize: '1rem',
               fontFamily: c.font.sans,
               color: c.text.primary,
               '& input::placeholder': { color: c.text.muted, opacity: 1 },
             }}
           />
           {isStillSearching && <CircularProgress size={16} sx={{ color: c.text.muted, ml: 1 }} />}
-          <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, ml: 1.5, fontFamily: c.font.mono }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, ml: 1.5, fontFamily: c.font.mono }}>
             esc
           </Typography>
         </Box>
@@ -256,7 +256,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
         {/* Results */}
         <Box sx={{ overflowY: 'auto', flex: 1 }}>
           {results.length === 0 ? (
-            <Typography sx={{ px: 2, py: 3, fontSize: '0.85rem', color: c.text.muted, textAlign: 'center' }}>
+            <Typography sx={{ px: 2, py: 3, fontSize: '0.875rem', color: c.text.muted, textAlign: 'center' }}>
               {query.trim() ? 'No matches' : 'No dashboards or chats yet'}
             </Typography>
           ) : (
@@ -330,7 +330,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
             gap: 1.5,
             alignItems: 'center',
             color: c.text.ghost,
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
           }}
         >
           <span>↑↓ navigate</span>
@@ -348,7 +348,7 @@ const SectionHeader: React.FC<{ label: string; c: ReturnType<typeof useClaudeTok
       px: 2.25,
       pt: 1.5,
       pb: 0.5,
-      fontSize: '0.72rem',
+      fontSize: '0.75rem',
       fontWeight: 600,
       letterSpacing: '0.06em',
       textTransform: 'uppercase',
@@ -389,7 +389,7 @@ const ResultRow: React.FC<RowProps> = ({ icon, title, subtitle, selected, onClic
     <Box sx={{ flex: 1, minWidth: 0 }}>
       <Typography
         sx={{
-          fontSize: '0.95rem',
+          fontSize: '1rem',
           fontWeight: 500,
           color: c.text.primary,
           overflow: 'hidden',
@@ -402,7 +402,7 @@ const ResultRow: React.FC<RowProps> = ({ icon, title, subtitle, selected, onClic
       {subtitle && (
         <Typography
           sx={{
-            fontSize: '0.78rem',
+            fontSize: '0.75rem',
             color: c.text.muted,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
diff --git a/frontend/src/app/components/overlays/PlanPicker.tsx b/frontend/src/app/components/overlays/PlanPicker.tsx
index b4299e96..04846658 100644
--- a/frontend/src/app/components/overlays/PlanPicker.tsx
+++ b/frontend/src/app/components/overlays/PlanPicker.tsx
@@ -144,7 +144,7 @@ const PlanPicker: React.FC<PlanPickerProps> = ({
           sx={{
             '& .MuiToggleButton-root': {
               textTransform: 'none',
-              fontSize: '0.78rem',
+              fontSize: '0.75rem',
               fontWeight: 500,
               px: 2,
               py: 0.5,
diff --git a/frontend/src/app/components/overlays/PlanPickerModal.tsx b/frontend/src/app/components/overlays/PlanPickerModal.tsx
index 0e1321be..0efd6fe5 100644
--- a/frontend/src/app/components/overlays/PlanPickerModal.tsx
+++ b/frontend/src/app/components/overlays/PlanPickerModal.tsx
@@ -49,7 +49,7 @@ const PlanPickerModal: React.FC<Props> = ({
         boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
       }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 1.5 }}>
-          <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
             {title}
           </Typography>
           <IconButton
diff --git a/frontend/src/app/components/overlays/TrustedFilePatterns.tsx b/frontend/src/app/components/overlays/TrustedFilePatterns.tsx
index d7bb8571..817d1bcc 100644
--- a/frontend/src/app/components/overlays/TrustedFilePatterns.tsx
+++ b/frontend/src/app/components/overlays/TrustedFilePatterns.tsx
@@ -76,10 +76,10 @@ export const TrustedFilePatterns: React.FC = () => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-      <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
+      <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
         Trusted file patterns
       </Typography>
-      <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, lineHeight: 1.45 }}>
+      <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.45 }}>
         Files like SSH keys and shell startup files normally ask before each write, even when you've set Write to "always allow". Patterns you've chosen to always allow appear below. Remove one to start asking again.
       </Typography>
       <Box sx={{ display: 'flex', flexDirection: 'column', border: `1px solid ${c.border.subtle}`, borderRadius: 1.5, overflow: 'hidden', mt: 0.5 }}>
@@ -97,10 +97,10 @@ export const TrustedFilePatterns: React.FC = () => {
             }}
           >
             <Box sx={{ flex: 1, minWidth: 0 }}>
-              <Typography sx={{ fontSize: '0.82rem', color: c.text.primary, fontWeight: 500 }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500 }}>
                 {PATTERN_LABELS[pat] || pat}
               </Typography>
-              <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, fontFamily: c.font.mono, mt: 0.15 }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, fontFamily: c.font.mono, mt: 0.15 }}>
                 {pat}
               </Typography>
             </Box>
diff --git a/frontend/src/app/components/share/ImportModal.tsx b/frontend/src/app/components/share/ImportModal.tsx
index 46b6776b..5987457b 100644
--- a/frontend/src/app/components/share/ImportModal.tsx
+++ b/frontend/src/app/components/share/ImportModal.tsx
@@ -43,7 +43,7 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
       {preflight && (
         <>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 1 }}>
-            <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
               Add {preflight.summary.root.name}?
             </Typography>
             <IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}>
@@ -55,13 +55,13 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
             {preflight.review && preflight.review.findings.length > 0 && (
               <Box sx={{ mt: 1.75, display: 'flex', gap: 0.85, alignItems: 'center' }}>
                 <ShieldOutlinedIcon sx={{ fontSize: 15, color: c.status.warning, flexShrink: 0 }} />
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1.4 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1.4 }}>
                   {preflight.review.findings.join(' ')}
                 </Typography>
               </Box>
             )}
             {preflight.conflicts.length > 0 && (
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mt: 1.5 }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 1.5 }}>
                 Some items already exist and will be added as copies.
               </Typography>
             )}
@@ -82,7 +82,7 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
                   borderRadius: `${c.radius.md}px`,
                   px: 2.5,
                   py: 0.6,
-                  fontSize: '0.85rem',
+                  fontSize: '0.875rem',
                   fontWeight: 600,
                   boxShadow: 'none',
                 }}
diff --git a/frontend/src/app/components/share/IncludesList.tsx b/frontend/src/app/components/share/IncludesList.tsx
index 7e9a8090..df5595fc 100644
--- a/frontend/src/app/components/share/IncludesList.tsx
+++ b/frontend/src/app/components/share/IncludesList.tsx
@@ -51,7 +51,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
     <Box>
       {/* Lead: the bundle's type + a one-line count. The name is in the title. */}
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
-        <Typography sx={{ fontSize: '0.85rem', color: c.text.muted }}>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>
           <Box component="span" sx={{ color: c.text.primary, fontWeight: 600 }}>{rootLabel}</Box>
           {countLine && `  ·  ${countLine}`}
         </Typography>
@@ -60,7 +60,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
             onClick={() => setExpanded((v) => !v)}
             sx={{ display: 'flex', alignItems: 'center', gap: 0.25, color: c.text.tertiary, cursor: 'pointer', '&:hover': { color: c.accent.primary } }}
           >
-            <Typography sx={{ fontSize: '0.72rem' }}>{expanded ? 'Hide' : 'Show'}</Typography>
+            <Typography sx={{ fontSize: '0.75rem' }}>{expanded ? 'Hide' : 'Show'}</Typography>
             <KeyboardArrowDownIcon sx={{ fontSize: 14, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.18s' }} />
           </Box>
         )}
@@ -70,10 +70,10 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
         <Box sx={{ mt: 0.5, maxHeight: 184, overflowY: 'auto' }}>
           {includes.map((it, i) => (
             <Box key={`inc-${i}`} sx={{ display: 'flex', gap: 1, py: 0.4 }}>
-              <Typography sx={{ fontSize: '0.6rem', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: c.text.tertiary, minWidth: 56, flexShrink: 0, mt: '2px' }}>
+              <Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: c.text.tertiary, minWidth: 56, flexShrink: 0, mt: '2px' }}>
                 {KIND_LABEL[it.type] || it.type}
               </Typography>
-              <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {it.name}
               </Typography>
             </Box>
@@ -83,7 +83,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
 
       {summary.requirements.length > 0 && (
         <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 0.75, mt: 1.5 }}>
-          <Typography sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.text.tertiary, mr: 0.25 }}>
+          <Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.text.tertiary, mr: 0.25 }}>
             Needs
           </Typography>
           {summary.requirements.map((r, i) => (
@@ -97,7 +97,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
                 }}
               >
                 {REQ_ICON[r.kind] || <ExtensionOutlinedIcon sx={{ fontSize: 14 }} />}
-                <Typography sx={{ fontSize: '0.76rem', color: c.text.secondary, whiteSpace: 'nowrap' }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, whiteSpace: 'nowrap' }}>
                   {r.label}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/components/share/PublishModal.tsx b/frontend/src/app/components/share/PublishModal.tsx
index d575af41..07fb596c 100644
--- a/frontend/src/app/components/share/PublishModal.tsx
+++ b/frontend/src/app/components/share/PublishModal.tsx
@@ -153,7 +153,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       return center(
         <>
           <CircularProgress size={22} sx={{ color: c.accent.primary }} />
-          <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary }}>Checking your app before it goes live...</Typography>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>Checking your app before it goes live...</Typography>
           <SlowHint active color={c.text.tertiary} />
         </>,
       );
@@ -162,7 +162,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       return center(
         <>
           <CircularProgress size={22} sx={{ color: c.accent.primary }} />
-          <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary }}>Building and publishing your app...</Typography>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>Building and publishing your app...</Typography>
           <SlowHint active color={c.text.tertiary} />
         </>,
       );
@@ -170,8 +170,8 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
     if (phase === 'error') {
       return center(
         <>
-          <Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary }}>Something went wrong</Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, textAlign: 'center' }}>{errorMsg}</Typography>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>Something went wrong</Typography>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, textAlign: 'center' }}>{errorMsg}</Typography>
         </>,
       );
     }
@@ -179,8 +179,8 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       if (confirmUnpublish) {
         return center(
           <>
-            <Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary }}>Take this app offline?</Typography>
-            <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, textAlign: 'center' }}>
+            <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>Take this app offline?</Typography>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, textAlign: 'center' }}>
               The public link will stop working for anyone you've shared it with.
             </Typography>
           </>,
@@ -190,7 +190,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
         <Box sx={{ px: 2.5, py: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <CheckCircleOutlineIcon sx={{ color: c.status.success, fontSize: 22 }} />
-            <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary }}>Your app is live</Typography>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>Your app is live</Typography>
           </Box>
           <Box
             sx={{
@@ -198,7 +198,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
               border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.secondary,
             }}
           >
-            <Typography sx={{ flex: 1, minWidth: 0, fontSize: '0.82rem', color: c.text.primary, fontFamily: 'ui-monospace, Menlo, monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <Typography sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: c.text.primary, fontFamily: 'ui-monospace, Menlo, monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {liveUrl}
             </Typography>
             <IconButton size="small" onClick={copyLink} sx={{ color: c.text.tertiary }}><ContentCopyIcon sx={{ fontSize: 16 }} /></IconButton>
@@ -212,7 +212,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       return center(
         <>
           <CheckCircleOutlineIcon sx={{ color: c.status.success, fontSize: 26 }} />
-          <Typography sx={{ fontSize: '0.88rem', color: c.text.primary }}>Looks good. Ready to publish.</Typography>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.primary }}>Looks good. Ready to publish.</Typography>
         </>,
       );
     }
@@ -220,18 +220,18 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
       <Box sx={{ px: 2.5, py: 2, display: 'flex', flexDirection: 'column', gap: 1.25 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <WarningAmberIcon sx={{ color: c.status.warning, fontSize: 22 }} />
-          <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
             {findings.length} security risk{findings.length === 1 ? '' : 's'} found
           </Typography>
         </Box>
-        <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary }}>
+        <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary }}>
           You can still publish, fix them first, or cancel.
         </Typography>
-        <Button onClick={() => setShowDetails((s) => !s)} sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.accent.primary, fontSize: '0.78rem', px: 0.5 }}>
+        <Button onClick={() => setShowDetails((s) => !s)} sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.accent.primary, fontSize: '0.75rem', px: 0.5 }}>
           {showDetails ? 'Hide details' : 'Show details'}
         </Button>
         {showDetails && (
-          <Box component="ul" sx={{ m: 0, pl: 2.5, color: c.text.secondary, fontSize: '0.76rem', lineHeight: 1.55, maxHeight: 160, overflow: 'auto' }}>
+          <Box component="ul" sx={{ m: 0, pl: 2.5, color: c.text.secondary, fontSize: '0.75rem', lineHeight: 1.55, maxHeight: 160, overflow: 'auto' }}>
             {findings.map((f, i) => (
               <li key={i}>{f}</li>
             ))}
@@ -302,7 +302,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 0.5 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <PublicIcon sx={{ fontSize: 18, color: c.accent.primary }} />
-            <Typography sx={{ fontSize: '1.02rem', fontWeight: 700, color: c.text.primary }}>Publish {outputName}</Typography>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>Publish {outputName}</Typography>
           </Box>
           <IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}><CloseIcon sx={{ fontSize: 18 }} /></IconButton>
         </Box>
diff --git a/frontend/src/app/components/share/ShareButton.tsx b/frontend/src/app/components/share/ShareButton.tsx
index fb70c484..10c61d0c 100644
--- a/frontend/src/app/components/share/ShareButton.tsx
+++ b/frontend/src/app/components/share/ShareButton.tsx
@@ -45,7 +45,7 @@ const ShareButton: React.FC<Props> = ({
   return (
     <>
       {variant === 'menuItem' ? (
-        <MenuItem onClick={start} sx={{ fontSize: '0.85rem', color: c.text.primary, gap: 1 }}>
+        <MenuItem onClick={start} sx={{ fontSize: '0.875rem', color: c.text.primary, gap: 1 }}>
           <ListItemIcon sx={{ minWidth: 0, color: c.text.tertiary }}>
             <IosShareIcon sx={{ fontSize: 16 }} />
           </ListItemIcon>
diff --git a/frontend/src/app/components/share/ShareModal.tsx b/frontend/src/app/components/share/ShareModal.tsx
index 7a164bb3..d90f4122 100644
--- a/frontend/src/app/components/share/ShareModal.tsx
+++ b/frontend/src/app/components/share/ShareModal.tsx
@@ -101,16 +101,16 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
       <Box sx={{ color: selected ? c.accent.primary : c.text.tertiary, display: 'flex' }}>{icon}</Box>
       <Box sx={{ flex: 1, minWidth: 0 }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography sx={{ fontSize: '0.88rem', fontWeight: 600, color: c.text.primary }}>{title}</Typography>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>{title}</Typography>
           {chip && (
             <Chip
               label={chip}
               size="small"
-              sx={{ height: 18, fontSize: '0.62rem', bgcolor: c.bg.secondary, color: c.text.muted }}
+              sx={{ height: 18, fontSize: '0.625rem', bgcolor: c.bg.secondary, color: c.text.muted }}
             />
           )}
         </Box>
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted }}>{subtitle}</Typography>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>{subtitle}</Typography>
       </Box>
     </Box>
   );
@@ -133,7 +133,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 1 }}>
-          <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
             Share {target.name}
           </Typography>
           <IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}>
@@ -156,10 +156,10 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                   <Box sx={{ display: 'flex', gap: 1.25 }}>
                     <WarningAmberRoundedIcon sx={{ fontSize: 20, color: c.status.warning, mt: '1px', flexShrink: 0 }} />
                     <Box sx={{ minWidth: 0 }}>
-                      <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, mb: 0.25 }}>
+                      <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.25 }}>
                         This file may contain a secret
                       </Typography>
-                      <Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, lineHeight: 1.5 }}>
+                      <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5 }}>
                         {error} If you export it, only send the file to people you trust.
                       </Typography>
                     </Box>
@@ -168,7 +168,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                     <Button
                       size="small"
                       onClick={load}
-                      sx={{ textTransform: 'none', fontSize: '0.8rem', color: c.text.secondary, minWidth: 0 }}
+                      sx={{ textTransform: 'none', fontSize: '0.8125rem', color: c.text.secondary, minWidth: 0 }}
                     >
                       Try again
                     </Button>
@@ -178,7 +178,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                       onClick={() => { setError(''); handleDownload(true); }}
                       disabled={downloading}
                       sx={{
-                        textTransform: 'none', fontSize: '0.8rem', fontWeight: 600,
+                        textTransform: 'none', fontSize: '0.8125rem', fontWeight: 600,
                         color: c.status.error, borderColor: `${c.status.error}80`, borderRadius: '8px',
                         '&:hover': { borderColor: c.status.error, bgcolor: `${c.status.error}0d` },
                       }}
@@ -189,7 +189,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                 </Box>
               ) : (
                 <Box sx={{ py: 1 }}>
-                  <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
+                  <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
                   <Button size="small" onClick={load} sx={{ textTransform: 'none', color: c.accent.primary }}>
                     Try again
                   </Button>
@@ -240,7 +240,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
                 borderRadius: `${c.radius.md}px`,
                 px: 2.5,
                 py: 0.6,
-                fontSize: '0.85rem',
+                fontSize: '0.875rem',
                 fontWeight: 600,
                 boxShadow: 'none',
               }}
@@ -261,7 +261,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
           severity="success"
           variant="outlined"
           onClose={() => setToast('')}
-          sx={{ bgcolor: c.bg.surface, color: c.text.primary, border: `1px solid ${c.border.medium}`, fontSize: '0.82rem' }}
+          sx={{ bgcolor: c.bg.surface, color: c.text.primary, border: `1px solid ${c.border.medium}`, fontSize: '0.8125rem' }}
         >
           {toast}
         </Alert>
diff --git a/frontend/src/app/components/theme/AccentColorPad.tsx b/frontend/src/app/components/theme/AccentColorPad.tsx
index 7a51de91..5fb36201 100644
--- a/frontend/src/app/components/theme/AccentColorPad.tsx
+++ b/frontend/src/app/components/theme/AccentColorPad.tsx
@@ -195,7 +195,7 @@ const AccentColorPad: React.FC<{
           onClick={() => onChange(null)}
           style={{
             marginLeft: 'auto', border: 'none', background: 'transparent', padding: 0,
-            color: '#8a8a86', fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
+            color: '#8a8a86', fontSize: '0.8125rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
           }}
         >
           Reset
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 22456f3f..59f3e593 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -179,7 +179,7 @@ const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
         <Box
           component="span"
           sx={{
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             fontWeight: 500,
             background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
             backgroundSize: '200% 100%',
@@ -1910,7 +1910,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   role="button"
                   aria-label="Dismiss"
                   onClick={() => id && dispatch(clearMcpSuggestions({ sessionId: id }))}
-                  sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.72rem', '&:hover': { color: c.text.secondary } }}
+                  sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.75rem', '&:hover': { color: c.text.secondary } }}
                 >
                   Dismiss
                 </Box>
@@ -1954,7 +1954,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   }}
                 >
                   <PlayArrowIcon sx={{ fontSize: 14, color: c.accent.primary }} />
-                  <Typography sx={{ fontSize: '0.78rem', fontWeight: 500, color: c.accent.primary }}>
+                  <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.accent.primary }}>
                     Resume Agent Response
                   </Typography>
                 </Box>
@@ -2011,7 +2011,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               borderRadius: 2.5,
               cursor: 'pointer',
               fontWeight: 600,
-              fontSize: '0.85rem',
+              fontSize: '0.875rem',
               color: c.accent.primary,
               border: `1.5px solid ${c.accent.primary}`,
               background: `${c.accent.primary}08`,
@@ -2052,7 +2052,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                       ? <KeyboardArrowDownIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
                       : <KeyboardArrowUpIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
                     }
-                    <Typography sx={{ fontSize: '0.68rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
+                    <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
                       {queueLength} queued
                     </Typography>
                     <Tooltip title="Clear all">
@@ -2156,7 +2156,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                                 }}
                                 sx={{
                                   '& .MuiOutlinedInput-root': {
-                                    fontSize: '0.78rem',
+                                    fontSize: '0.75rem',
                                     color: c.text.primary,
                                     '& fieldset': { borderColor: c.border.medium },
                                     '&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -2182,7 +2182,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                             <Typography
                               sx={{
                                 flex: 1,
-                                fontSize: '0.78rem',
+                                fontSize: '0.75rem',
                                 color: c.text.secondary,
                                 lineHeight: 1.5,
                                 overflow: 'hidden',
@@ -2252,10 +2252,10 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                       <ErrorSlime size={20} />
                     </Box>
                     <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography sx={{ fontSize: '0.86rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
+                      <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
                         Haiku may run out of room with {enabledMcpCount} apps connected
                       </Typography>
-                      <Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, lineHeight: 1.45 }}>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.45 }}>
                         Haiku is the fastest Claude model but holds the least at once.
                         Each connected app adds instructions Claude has to read first.
                         If your message fails with “Prompt is too long,” turn off a few
@@ -2445,7 +2445,7 @@ function WorkflowModelNotice({ c, label }: { c: ReturnType<typeof useClaudeToken
         px: 1.75, py: 1, zIndex: 6,
       }}>
         <SwapHorizRoundedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
-        <Box sx={{ fontSize: '0.83rem', color: c.text.primary, lineHeight: 1.4 }}>
+        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
           This workflow will now be using <b>{display}</b>.
         </Box>
       </Box>
@@ -2468,7 +2468,7 @@ function FreeTrialModelNotice({ c, notice }: { c: ReturnType<typeof useClaudeTok
         px: 1.75, py: 1, zIndex: 6,
       }}>
         <InfoOutlinedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
-        <Box sx={{ fontSize: '0.83rem', color: c.text.primary, lineHeight: 1.4 }}>
+        <Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
           {display.kind === 'spent' ? (
             <>You're out of free runs, connect a model in Settings to use <b>{display.label}</b>.</>
           ) : (
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx
index 687c734f..f43b417c 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx
@@ -20,7 +20,7 @@ export const ModelPickerFooter: React.FC<Props> = ({ c, pickerSummary, tooltipSl
         bgcolor: c.bg.surface,
         borderTop: `1px solid ${c.border.subtle}`,
         px: 1.25, py: 0.5,
-        fontSize: '0.65rem', color: c.text.ghost,
+        fontSize: '0.625rem', color: c.text.ghost,
         display: 'flex', justifyContent: 'space-between',
         gap: 1,
       }}
@@ -38,9 +38,9 @@ export const ModelPickerFooter: React.FC<Props> = ({ c, pickerSummary, tooltipSl
           ['1M+ context',   pickerSummary.longContext],
         ] as Array<[string, number]>).filter(([, n]) => n > 0);
         const breakdownTooltip = breakdown.length > 0 ? (
-          <Box sx={{ fontSize: '0.74rem', lineHeight: 1.6, minWidth: 180 }}>
+          <Box sx={{ fontSize: '0.75rem', lineHeight: 1.6, minWidth: 180 }}>
             <Box sx={{
-              fontWeight: 600, fontSize: '0.78rem',
+              fontWeight: 600, fontSize: '0.75rem',
               color: c.text.primary,
               pb: 0.6, mb: 0.6,
               borderBottom: `1px solid ${c.border.subtle}`,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx
index cdd21997..c4329216 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx
@@ -68,7 +68,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
           placeholder="Search models…"
           fullWidth
           sx={{
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             color: c.text.primary,
             '& input': { padding: 0 },
             '& input::placeholder': { color: c.text.ghost, opacity: 1 },
@@ -138,7 +138,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
                 cursor: 'pointer', userSelect: 'none',
                 px: 0.85, height: 20,
                 display: 'inline-flex', alignItems: 'center',
-                fontSize: '0.66rem', fontWeight: 600,
+                fontSize: '0.6875rem', fontWeight: 600,
                 letterSpacing: '0.04em',
                 borderRadius: '4px',
                 border: `1px solid ${active ? c.accent.primary : c.border.subtle}`,
@@ -161,7 +161,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
             }}
             sx={{
               cursor: 'pointer', userSelect: 'none',
-              fontSize: '0.66rem', fontWeight: 500,
+              fontSize: '0.6875rem', fontWeight: 500,
               color: c.text.ghost,
               ml: 0.5, px: 0.5,
               '&:hover': { color: c.text.muted },
@@ -186,7 +186,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
             height: 22,
           }}>
             <Box sx={{
-              fontSize: '0.65rem', fontWeight: 500,
+              fontSize: '0.625rem', fontWeight: 500,
               color: c.text.tertiary,
               letterSpacing: '0.02em',
             }}>
@@ -220,7 +220,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
               }}
             />
             <Box sx={{
-              fontSize: '0.65rem', fontWeight: 600,
+              fontSize: '0.625rem', fontWeight: 600,
               color: row.idx > 0 ? c.accent.primary : c.text.ghost,
               fontVariantNumeric: 'tabular-nums',
               textAlign: 'right',
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx
index 1fd980f2..3d0dd8b1 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx
@@ -59,14 +59,14 @@ export const ModelPickerList: React.FC<Props> = ({
         <Box
           sx={{
             px: 2, py: 1.5,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             color: c.text.ghost,
             textAlign: 'center',
             fontStyle: 'italic',
           }}
         >
           {modelSearch.trim() ? (
-            <>No models match "{modelSearch.trim()}".{anyFilterActive && (<><br/><Box component="span" sx={{ fontSize: '0.7rem' }}>Try clearing the filters above.</Box></>)}</>
+            <>No models match "{modelSearch.trim()}".{anyFilterActive && (<><br/><Box component="span" sx={{ fontSize: '0.6875rem' }}>Try clearing the filters above.</Box></>)}</>
           ) : (
             <>No models match the current filters.</>
           )}
@@ -136,7 +136,7 @@ export const ModelPickerList: React.FC<Props> = ({
                 flexShrink: 0,
               }} />
               <Typography sx={{
-                fontSize: '0.7rem', fontWeight: 700,
+                fontSize: '0.6875rem', fontWeight: 700,
                 letterSpacing: '0.08em', textTransform: 'uppercase',
                 flex: 1,
                 ...(isOpenSwarmPro
@@ -150,7 +150,7 @@ export const ModelPickerList: React.FC<Props> = ({
               }}>
                 {prov}
               </Typography>
-              <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontWeight: 500 }}>
+              <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>
                 {ms.length}
               </Typography>
             </Box>
@@ -200,7 +200,7 @@ export const ModelPickerList: React.FC<Props> = ({
                     >
                       <ListItemText
                         primary={highlightMatch(displayLabel)}
-                        slotProps={{ primary: { sx: { fontSize: '0.8rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
+                        slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
                       />
                       {(() => {
                         const win = (opt.context_window as number) || 0;
@@ -217,11 +217,11 @@ export const ModelPickerList: React.FC<Props> = ({
                         return (
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 1 }}>
                             {(cannotPdf || cannotImg) && (
-                              <Box sx={{ fontSize: '0.62rem', color: '#ef4444', border: '1px solid #ef444440', borderRadius: '4px', px: 0.5, py: 0.05, lineHeight: 1.4 }}>
+                              <Box sx={{ fontSize: '0.625rem', color: '#ef4444', border: '1px solid #ef444440', borderRadius: '4px', px: 0.5, py: 0.05, lineHeight: 1.4 }}>
                                 No {cannotPdf ? 'PDF' : 'image'}
                               </Box>
                             )}
-                            <Typography sx={{ fontSize: '0.66rem', color: c.text.ghost, fontVariantNumeric: 'tabular-nums' }}>
+                            <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, fontVariantNumeric: 'tabular-nums' }}>
                               {formatTokenCount(win)}
                             </Typography>
                           </Box>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx
index 1ab62e19..7cd5a93c 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx
@@ -110,7 +110,7 @@ export const ModelPickerMenu: React.FC<Props> = (props) => {
               bgcolor: 'rgba(239, 68, 68, 0.08)',
               border: '1px solid rgba(239, 68, 68, 0.18)',
               color: '#ef4444',
-              fontSize: '0.7rem',
+              fontSize: '0.6875rem',
               flexShrink: 0,
               overflow: 'hidden',
             }}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx
index 74401ec8..fdb7bddd 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx
@@ -51,10 +51,10 @@ export const ModelPickerRecents: React.FC<Props> = ({
             }}
           />
           <AccessTimeIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary, flex: 1 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary, flex: 1 }}>
             Recent
           </Typography>
-          <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontWeight: 500 }}>
+          <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>
             {recentMaterialised.length}
           </Typography>
         </Box>
@@ -78,7 +78,7 @@ export const ModelPickerRecents: React.FC<Props> = ({
             >
               <ListItemText
                 primary={opt.label}
-                slotProps={{ primary: { sx: { fontSize: '0.8rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
+                slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
               />
             </MenuItem>
           </Tooltip>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx
index 7a93f111..2ea496ec 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx
@@ -53,9 +53,9 @@ export function useModelTooltip(c: ClaudeTokens) {
       (opt.context_window ?? 0) >= 1_000_000 && '1M+ context',
     ].filter(Boolean).join(' · ');
     return (
-      <Box sx={{ fontSize: '0.74rem', lineHeight: 1.55, minWidth: 256 }}>
+      <Box sx={{ fontSize: '0.75rem', lineHeight: 1.55, minWidth: 256 }}>
         <Box sx={{
-          fontWeight: 600, fontSize: '0.85rem', mb: 0.85,
+          fontWeight: 600, fontSize: '0.875rem', mb: 0.85,
           color: c.text.primary,
           letterSpacing: '-0.01em',
           pb: 0.6,
@@ -113,7 +113,7 @@ export function useModelTooltip(c: ClaudeTokens) {
         boxShadow: '0 12px 32px rgba(0, 0, 0, 0.32)',
         padding: '12px 14px',
         maxWidth: 340,
-        fontSize: '0.78rem',
+        fontSize: '0.75rem',
         fontFamily: c.font.sans,
       },
     },
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
index 78cdb70f..a48dc8ed 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
@@ -73,7 +73,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
       maxHeight: 400,
       boxShadow: c.shadow.lg,
       '& .MuiMenuItem-root': {
-        fontSize: '0.8rem',
+        fontSize: '0.8125rem',
         color: c.text.secondary,
         py: 0.75,
         px: 1.5,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
index 59eb304d..5e013f04 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
@@ -83,7 +83,7 @@ export const ComposerPlusMenu: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[]
             }}
           >
             <Box sx={{ display: 'flex', alignItems: 'center', color: 'inherit', flexShrink: 0 }}>{it.icon}</Box>
-            <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
+            <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
             {it.toggle && it.active && <CheckRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
           </MenuItem>
         ))}
@@ -128,7 +128,7 @@ export const ActiveTogglePills: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[
           >
             <Box component="span" className="osw-pill-icon" sx={{ display: 'inline-flex' }}>{it.icon}</Box>
             <Box component="span" className="osw-pill-x" sx={{ alignItems: 'center' }}><CloseRoundedIcon /></Box>
-            <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: 'inherit', whiteSpace: 'nowrap' }}>
+            <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: 'inherit', whiteSpace: 'nowrap' }}>
               {it.label}
             </Typography>
           </Box>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx
index 0f4e8adb..274d70f2 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx
@@ -52,7 +52,7 @@ export const ModeControl: React.FC<Props> = ({
         }}
       >
         {modeConf.icon}
-        <Typography sx={{ fontSize: '0.82rem', fontWeight: 600, color: 'inherit', lineHeight: 1 }}>
+        <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: 'inherit', lineHeight: 1 }}>
           {modeConf.label}
         </Typography>
         <KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
@@ -84,7 +84,7 @@ export const ModeControl: React.FC<Props> = ({
               </ListItemIcon>
               <ListItemText
                 primary={m.name}
-                slotProps={{ primary: { sx: { fontSize: '0.8rem', color: mode === m.id ? m.color : c.text.secondary } } }}
+                slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: mode === m.id ? m.color : c.text.secondary } } }}
               />
             </MenuItem>
           );
@@ -108,7 +108,7 @@ export const ModeControl: React.FC<Props> = ({
             transition: 'background 0.15s',
           }}
         >
-          <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
+          <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
             {(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
           </Typography>
           <KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
index b1e1201b..72806795 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
@@ -35,7 +35,7 @@ export const ModelControl: React.FC<Props> = ({ c, setModelAnchor, allModelFlat,
         transition: 'background 0.15s',
       }}
     >
-      <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
+      <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
         {(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
       </Typography>
       <KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx
index 0a7ae6e0..b717260a 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx
@@ -46,7 +46,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
         }}
       >
         <PsychologyOutlinedIcon sx={{ fontSize: 14, opacity: 0.7 }} />
-        <Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
+        <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
           {current.label}
         </Typography>
         <KeyboardArrowDownIcon sx={{ fontSize: 15, color: 'inherit', opacity: 0.7 }} />
@@ -62,7 +62,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
         MenuListProps={{ autoFocusItem: true }}
       >
         <MenuItem disabled sx={{ opacity: '1 !important', py: 0.5, px: 1.5, minHeight: 'auto', pointerEvents: 'none' }}>
-          <Typography sx={{ fontSize: '0.65rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary }}>
+          <Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary }}>
             Thinking Level
           </Typography>
         </MenuItem>
@@ -72,7 +72,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
           if (!isGemini3 || thinkingLevel === 'off') return null;
           return (
             <MenuItem disabled sx={{ opacity: '1 !important', py: 0.6, px: 1.5, minHeight: 'auto', pointerEvents: 'none', mx: 0.5, my: 0.25, borderRadius: 1, bgcolor: 'rgba(245, 158, 11, 0.06)', border: '1px solid rgba(245, 158, 11, 0.18)' }}>
-              <Typography sx={{ fontSize: '0.66rem', color: c.text.muted, lineHeight: 1.4, whiteSpace: 'normal', maxWidth: 240 }}>
+              <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted, lineHeight: 1.4, whiteSpace: 'normal', maxWidth: 240 }}>
                 Web search breaks on Gemini 3 preview while thinking is on. Set to <strong>Off</strong> if you need search.
               </Typography>
             </MenuItem>
@@ -86,10 +86,10 @@ export const ThinkingLevelControl: React.FC<Props> = ({
             sx={{ py: 0.6 }}
           >
             <Box>
-              <Typography sx={{ fontSize: '0.8rem', color: thinkingLevel === lvl.value ? c.text.primary : c.text.muted }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: thinkingLevel === lvl.value ? c.text.primary : c.text.muted }}>
                 {lvl.label}
               </Typography>
-              <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, mt: 0.1 }}>
+              <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, mt: 0.1 }}>
                 {lvl.desc}
               </Typography>
             </Box>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx
index f0aae287..bc209fc8 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx
@@ -119,7 +119,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   tooltip: {
                     sx: {
                       fontFamily: c.font.mono,
-                      fontSize: '0.7rem',
+                      fontSize: '0.6875rem',
                       maxWidth: 280,
                       wordBreak: 'break-all',
                     },
@@ -154,7 +154,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   sx={{
                     bgcolor: `${chipColor}12`,
                     color: chipColor,
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontFamily: c.font.mono,
                     height: 26,
                     maxWidth: 280,
@@ -187,7 +187,7 @@ export const AttachmentChips: React.FC<Props> = ({
               sx={{
                 bgcolor: `${c.status.info}15`,
                 color: c.status.info,
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontFamily: c.font.mono,
                 height: 26,
                 maxWidth: 220,
@@ -224,7 +224,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   tooltip: {
                     sx: {
                       fontFamily: c.font.mono,
-                      fontSize: '0.7rem',
+                      fontSize: '0.6875rem',
                       maxWidth: 420,
                       wordBreak: 'break-all',
                     },
@@ -239,7 +239,7 @@ export const AttachmentChips: React.FC<Props> = ({
                   sx={{
                     bgcolor: 'rgba(59, 130, 246, 0.1)',
                     color: '#3b82f6',
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontFamily: c.font.mono,
                     height: 26,
                     maxWidth: 220,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx
index 8d0a7898..9982152d 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx
@@ -71,7 +71,7 @@ const OversizePopup: React.FC<OversizePopupProps> = ({
             flexShrink: 0,
           }} />
           <Box sx={{
-            color: c.text.primary, fontSize: '0.88rem', lineHeight: 1.45,
+            color: c.text.primary, fontSize: '0.875rem', lineHeight: 1.45,
             flex: '1 1 auto', minWidth: 0,
           }}>
             {label}
@@ -104,7 +104,7 @@ const ErrorToast: React.FC<{ c: ClaudeTokens; message: string | null; onClose: (
         }}
       >
         <Box sx={{
-          color: c.text.primary, fontSize: '0.88rem', lineHeight: 1.45,
+          color: c.text.primary, fontSize: '0.875rem', lineHeight: 1.45,
           flex: '1 1 auto', minWidth: 0,
         }}>
           {display}
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
index fb9292ed..76048505 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
@@ -145,7 +145,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
           }}
         >
           <AttachFileIcon sx={{ fontSize: 16, color: c.accent.primary, mr: 0.5 }} />
-          <Typography sx={{ color: c.accent.primary, fontSize: '0.85rem', fontWeight: 500 }}>
+          <Typography sx={{ color: c.accent.primary, fontSize: '0.875rem', fontWeight: 500 }}>
             Drop files here
           </Typography>
         </Box>
@@ -166,7 +166,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
           }}
         >
           <CircularProgress size={14} sx={{ color: c.accent.primary, mr: 1 }} />
-          <Typography sx={{ color: c.accent.primary, fontSize: '0.85rem', fontWeight: 500 }}>
+          <Typography sx={{ color: c.accent.primary, fontSize: '0.875rem', fontWeight: 500 }}>
             Attaching files…
           </Typography>
         </Box>
@@ -198,7 +198,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
             }}
           >
             <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: p.runContext.color, flex: 'none' }} />
-            <Typography sx={{ fontSize: '0.7rem', fontWeight: 600, color: c.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
               Run attached · {p.runContext.title}
             </Typography>
             <Box
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
index 801444ea..2f07352b 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
@@ -55,7 +55,7 @@ export const EditorSurface: React.FC<Props> = ({
           border: 'none',
           outline: 'none',
           color: c.text.primary,
-          fontSize: '0.95rem',
+          fontSize: '1rem',
           lineHeight: '1.55',
           fontFamily: 'inherit',
           wordBreak: 'break-word',
@@ -71,7 +71,7 @@ export const EditorSurface: React.FC<Props> = ({
             right: 0,
             padding: `${hasAttachments ? 4 : 10}px 12px`,
             color: c.text.tertiary,
-            fontSize: '0.95rem',
+            fontSize: '1rem',
             lineHeight: '1.5',
             fontFamily: 'inherit',
             pointerEvents: 'none',
@@ -88,7 +88,7 @@ export const EditorSurface: React.FC<Props> = ({
             <span
               style={{
                 flexShrink: 0,
-                fontSize: '0.7rem',
+                fontSize: '0.6875rem',
                 fontWeight: 600,
                 letterSpacing: '0.02em',
                 color: c.text.tertiary,
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx
index 213bcc31..96d628d3 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx
@@ -27,7 +27,7 @@ const PasteEditor: React.FC<{ pasteId: string; initial: string; onSave: Props['o
         resize: 'vertical',
         overflowY: 'auto',
         fontFamily: c.font.mono,
-        fontSize: '0.78rem',
+        fontSize: '0.75rem',
         lineHeight: 1.5,
         color: c.text.primary,
         background: 'transparent',
@@ -65,7 +65,7 @@ export const PastePreviewDialog: React.FC<Props> = ({ pasteId, onClose, onSave }
       </Box>
       <Box sx={{ p: 2, bgcolor: c.bg.surface }}>
         {original === undefined || pasteId === null ? (
-          <Typography sx={{ color: c.text.tertiary, fontSize: '0.85rem', fontStyle: 'italic' }}>
+          <Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem', fontStyle: 'italic' }}>
             This pasted text is no longer available. Re-paste to restore it.
           </Typography>
         ) : (
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx
index c0bc27a9..43a418c6 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx
@@ -19,7 +19,7 @@ export const SendBlockBanner: React.FC<Props> = ({ sendBlock, c }) => {
       bgcolor: c.bg.surface,
       border: `1px solid ${c.border.medium}`,
     }}>
-      <Typography sx={{ fontSize: '0.88rem', color: c.text.primary, lineHeight: 1.45 }}>
+      <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, lineHeight: 1.45 }}>
         That message is too long to send. Try shortening it or splitting it into a few smaller ones.
       </Typography>
     </Box>
diff --git a/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx b/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx
index 6ce78863..927d2796 100644
--- a/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx
+++ b/frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx
@@ -28,7 +28,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
           sx={{
             display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.6,
             width: '100%', py: 0.9, borderRadius: 999, cursor: 'pointer',
-            fontSize: '0.85rem', fontWeight: 700,
+            fontSize: '0.875rem', fontWeight: 700,
             color: c.status.error, bgcolor: c.status.error + '14', border: `1px solid ${c.status.error}55`,
             '&:hover': { bgcolor: c.status.error + '22' },
           }}>
@@ -42,7 +42,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
   const tone = testState === 'complete' ? c.status.success : c.status.error;
   return (
     <Box sx={{ px: 2, py: 1.5, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: tone, fontSize: '0.8rem', fontWeight: 600 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: tone, fontSize: '0.8125rem', fontWeight: 600 }}>
         <CheckCircleOutlineRounded sx={{ fontSize: 16 }} />
         {testState === 'complete' ? 'Test finished' : 'Test stopped'}
       </Box>
@@ -52,7 +52,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
           onClick={onContinueEditing}
           sx={{
             flex: 1, textAlign: 'center', py: 0.8, borderRadius: 999, cursor: 'pointer',
-            fontSize: '0.82rem', fontWeight: 600, color: c.text.secondary,
+            fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary,
             border: `1px solid ${c.border.medium}`,
             '&:hover': { bgcolor: c.bg.elevated, color: c.text.primary },
           }}>
@@ -63,7 +63,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
           onClick={onSaveWorkflow}
           sx={{
             flex: 1, textAlign: 'center', py: 0.8, borderRadius: 999, cursor: 'pointer',
-            fontSize: '0.82rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary,
+            fontSize: '0.8125rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary,
             '&:hover': { filter: 'brightness(1.05)' },
           }}>
           Save workflow
diff --git a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
index 69138c4f..ce01992f 100644
--- a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+++ b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
@@ -22,7 +22,7 @@ const AnchorButton: React.FC<{ c: ClaudeTokens; onPick: (p: string) => void; del
       display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left', width: '100%',
       padding: '10px 14px', borderRadius: 11,
       border: `1px solid ${c.border.medium}`, background: c.bg.surface,
-      color: c.text.secondary, fontSize: '0.88rem', fontWeight: 500,
+      color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500,
       cursor: 'pointer', fontFamily: 'inherit',
     }}
   >
@@ -61,7 +61,7 @@ const WelcomeQuickReplies: React.FC<{
       <AnimatePresence mode="wait" initial={false}>
         {!showCategories && expanded === null ? (
           <motion.div key="personal" initial={false} style={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
               made for you, or just type below
             </Typography>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.7 }}>
@@ -76,7 +76,7 @@ const WelcomeQuickReplies: React.FC<{
                     display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left',
                     padding: '10px 14px', borderRadius: 11,
                     border: `1px solid ${c.border.medium}`, background: c.bg.surface,
-                    color: c.text.secondary, fontSize: '0.88rem', fontWeight: 500,
+                    color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500,
                     cursor: 'pointer', fontFamily: 'inherit',
                   }}
                 >
@@ -85,7 +85,7 @@ const WelcomeQuickReplies: React.FC<{
               ))}
               <AnchorButton c={c} onPick={onPick} delay={0.08 + personalized.length * 0.06} />
             </Box>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.78rem', mt: 1.4, mb: 0.6 }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 1.4, mb: 0.6 }}>
               worth putting on a schedule
             </Typography>
             <AutomationChips c={c} />
@@ -95,7 +95,7 @@ const WelcomeQuickReplies: React.FC<{
               sx={{
                 alignSelf: 'flex-start', mt: 0.9, px: 0.6, py: 0.3,
                 border: 'none', background: 'transparent',
-                color: c.text.ghost, fontSize: '0.82rem',
+                color: c.text.ghost, fontSize: '0.8125rem',
                 cursor: 'pointer', fontFamily: 'inherit',
                 '&:hover': { color: c.text.secondary },
               }}
@@ -113,7 +113,7 @@ const WelcomeQuickReplies: React.FC<{
                   display: 'inline-flex', alignItems: 'center', gap: 0.5,
                   alignSelf: 'flex-start', mb: 0.9, px: 0.6, py: 0.3,
                   border: 'none', background: 'transparent',
-                  color: c.text.ghost, fontSize: '0.85rem',
+                  color: c.text.ghost, fontSize: '0.875rem',
                   cursor: 'pointer', fontFamily: 'inherit',
                   '&:hover': { color: c.text.secondary },
                 }}
@@ -121,7 +121,7 @@ const WelcomeQuickReplies: React.FC<{
                 <ArrowLeft size={14} /> your starters
               </Box>
             )}
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
               pick one, or just type below
             </Typography>
             <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
@@ -139,7 +139,7 @@ const WelcomeQuickReplies: React.FC<{
                     border: `1px solid ${c.border.medium}`,
                     background: c.bg.surface,
                     color: c.text.secondary,
-                    fontSize: '0.9rem', fontWeight: 500,
+                    fontSize: '0.875rem', fontWeight: 500,
                     cursor: 'pointer', fontFamily: 'inherit',
                   }}
                 >
@@ -170,7 +170,7 @@ const WelcomeQuickReplies: React.FC<{
                 display: 'inline-flex', alignItems: 'center', gap: 0.5,
                 alignSelf: 'flex-start', mb: 0.9, px: 0.6, py: 0.3,
                 border: 'none', background: 'transparent',
-                color: c.text.ghost, fontSize: '0.85rem',
+                color: c.text.ghost, fontSize: '0.875rem',
                 cursor: 'pointer', fontFamily: 'inherit',
                 '&:hover': { color: c.text.secondary },
               }}
@@ -179,7 +179,7 @@ const WelcomeQuickReplies: React.FC<{
             </Box>
             {isSchedule ? (
               <>
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
                   one click puts it on a schedule
                 </Typography>
                 <AutomationChips c={c} />
@@ -200,7 +200,7 @@ const WelcomeQuickReplies: React.FC<{
                     border: `1px solid ${c.border.medium}`,
                     background: c.bg.surface,
                     color: c.text.secondary,
-                    fontSize: '0.88rem',
+                    fontSize: '0.875rem',
                     cursor: 'pointer', fontFamily: 'inherit',
                   }}
                 >
diff --git a/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx b/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx
index d5907e05..ff23bdf8 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx
@@ -28,7 +28,7 @@ const CompactionMarker: React.FC<{ collapsedCount: number }> = ({ collapsedCount
         }}
       >
         <UnfoldLessOutlinedIcon sx={{ fontSize: 13, opacity: 0.7 }} />
-        <Typography sx={{ fontSize: '0.7rem', lineHeight: 1, fontWeight: 500 }}>
+        <Typography sx={{ fontSize: '0.6875rem', lineHeight: 1, fontWeight: 500 }}>
           {label}
         </Typography>
       </Box>
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index e36ea81e..5102c6b3 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -415,7 +415,7 @@ const AttachedContextSection: React.FC<{
             {g.icon}
           </Box>
         ))}
-        <Typography sx={{ fontSize: '0.68rem', fontWeight: 500, color: c.text.muted }}>
+        <Typography sx={{ fontSize: '0.6875rem', fontWeight: 500, color: c.text.muted }}>
           {groups.map((g) => g.label).join(' · ')}
         </Typography>
         <ExpandMoreIcon
@@ -430,13 +430,13 @@ const AttachedContextSection: React.FC<{
       <Collapse in={expanded}>
         {groups.map((g) => (
           <Box key={g.key} sx={{ mt: 0.5 }}>
-            <Typography sx={{ fontSize: '0.62rem', fontWeight: 600, color: g.color, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.25 }}>
+            <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: g.color, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.25 }}>
               {g.label}
             </Typography>
             <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
               {g.chips.map((chip, i) => (
                 <Tooltip key={i} title={chip.tooltip || chip.label} arrow placement="top"
-                  slotProps={{ tooltip: { sx: { fontFamily: c.font.mono, fontSize: '0.68rem', maxWidth: 400 } } }}
+                  slotProps={{ tooltip: { sx: { fontFamily: c.font.mono, fontSize: '0.6875rem', maxWidth: 400 } } }}
                 >
                   <Chip
                     icon={chip.icon as React.ReactElement}
@@ -445,7 +445,7 @@ const AttachedContextSection: React.FC<{
                     sx={{
                       bgcolor: `${g.color}18`,
                       color: g.color,
-                      fontSize: '0.68rem',
+                      fontSize: '0.6875rem',
                       fontFamily: c.font.mono,
                       height: 22,
                       '& .MuiChip-icon': { color: g.color },
@@ -667,7 +667,7 @@ const ThinkingBubble: React.FC<{
     }
     const { total, input, output } = tokenBreakdown ?? { total: 0, input: null, output: null };
     const tooltipBody = (
-      <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem', lineHeight: 1.5 }}>
+      <Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.75rem', lineHeight: 1.5 }}>
         {input != null && output != null ? (
           <>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
@@ -689,7 +689,7 @@ const ThinkingBubble: React.FC<{
           </Box>
         )}
         {input != null && output != null && (
-          <Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.7rem', fontStyle: 'italic' }}>
+          <Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.6875rem', fontStyle: 'italic' }}>
             Input shown is your message, history, and tool outputs. The fixed
             framework preamble (system prompt, tool defs, MCP descriptions) is
             excluded, since it's constant overhead from the agent runtime,
@@ -729,7 +729,7 @@ const ThinkingBubble: React.FC<{
           gap: 0.75,
           cursor: 'pointer',
           color: c.text.tertiary,
-          fontSize: '0.78rem',
+          fontSize: '0.75rem',
           py: 0.5,
           px: 1,
           ml: -1,
@@ -742,7 +742,7 @@ const ThinkingBubble: React.FC<{
         <PsychologyOutlinedIcon sx={{ fontSize: 14, opacity: 0.75 }} />
         <Typography
           sx={{
-            fontSize: '0.78rem',
+            fontSize: '0.75rem',
             fontWeight: 500,
             ...(isStreaming ? {
               background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
@@ -774,7 +774,7 @@ const ThinkingBubble: React.FC<{
             pl: 1.5,
             borderLeft: `2px solid ${c.border.subtle}`,
             color: c.text.tertiary,
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             lineHeight: 1.55,
             fontStyle: 'normal',
             whiteSpace: 'pre-wrap',
@@ -876,7 +876,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
     }
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', my: 1 }}>
-        <Typography sx={{ color: c.text.ghost, fontSize: '0.8rem', fontStyle: 'italic' }}>
+        <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', fontStyle: 'italic' }}>
           {sysText}
         </Typography>
       </Box>
@@ -1137,7 +1137,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                 borderRadius: 1.5,
                 p: 1.5,
                 overflow: 'auto',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 fontFamily: c.font.mono,
                 border: `1px solid ${c.border.subtle}`,
                 '&::-webkit-scrollbar': { height: 5, width: 5 },
@@ -1155,7 +1155,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                 px: 0.5,
                 py: 0.25,
                 borderRadius: 0.5,
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 fontFamily: c.font.mono,
               },
               '& pre code': { bgcolor: 'transparent', p: 0 },
@@ -1163,7 +1163,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                 width: '100%',
                 borderCollapse: 'collapse',
                 my: 1.5,
-                fontSize: '0.82rem',
+                fontSize: '0.8125rem',
                 border: `1px solid ${c.border.subtle}`,
                 borderRadius: 1,
                 overflow: 'hidden',
@@ -1212,11 +1212,11 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
               >
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                   <ErrorSlime size={22} />
-                  <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary }}>
+                  <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
                     {openswarmError.title}
                   </Typography>
                 </Box>
-                <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, lineHeight: 1.5 }}>
+                <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5 }}>
                   {openswarmError.detail}
                 </Typography>
                 {openswarmError.ctaLabel && (
@@ -1240,7 +1240,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
                       }}
                       sx={{
                         textTransform: 'none',
-                        fontSize: '0.78rem',
+                        fontSize: '0.75rem',
                         borderColor: c.border.medium,
                         color: c.text.primary,
                         borderRadius: `${c.radius.md}px`,
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
index 542206e9..82412b84 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
@@ -69,7 +69,7 @@ const MessageEditSurface: React.FC<Props> = ({ userMessage, elementSuffix, eleme
       {elementLabels.length > 0 && (
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
           {elementLabels.map((label, i) => (
-            <Box key={i} sx={{ fontSize: '0.68rem', color: c.text.muted, bgcolor: 'rgba(255,255,255,0.06)', border: `1px solid ${c.border.subtle}`, borderRadius: '999px', px: 0.9, py: 0.15, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <Box key={i} sx={{ fontSize: '0.6875rem', color: c.text.muted, bgcolor: 'rgba(255,255,255,0.06)', border: `1px solid ${c.border.subtle}`, borderRadius: '999px', px: 0.9, py: 0.15, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {label}
             </Box>
           ))}
diff --git a/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx b/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx
index f5308489..7df53c70 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx
@@ -25,7 +25,7 @@ export function renderUserTextWithPills(text: string, c: ReturnType<typeof useCl
         sx={{
           bgcolor: `${SKILL_COLOR}18`,
           color: SKILL_COLOR,
-          fontSize: '0.72rem',
+          fontSize: '0.75rem',
           fontFamily: c.font.mono,
           height: 20,
           mx: 0.25,
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx
index 0c79991f..a295cdee 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx
@@ -26,27 +26,27 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
             px: 1.5, py: 0.85, borderBottom: `1px solid ${TC_BORDER}`,
           }}>
             <EventIcon sx={{ fontSize: 14, color: TC_SUCCESS, opacity: 0.8 }} />
-            <span style={{ color: TC_HEADING, fontSize: '0.78rem', fontWeight: 600, fontFamily: c.font.sans }}>
+            <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, fontFamily: c.font.sans }}>
               {single.summary || '(no title)'}
             </span>
           </Box>
         )}
         <Box sx={{ px: 1.5, py: 1, display: 'flex', flexDirection: 'column', gap: 0.3 }}>
           {start && (
-            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Start</span>
+            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Start</span>
               <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{formatTimestamp(start)}</span>
             </Box>
           )}
           {end && (
-            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>End</span>
+            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>End</span>
               <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{formatTimestamp(end)}</span>
             </Box>
           )}
           {single.location && (
-            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Where</span>
+            <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+              <span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Where</span>
               <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{single.location}</span>
             </Box>
           )}
@@ -54,7 +54,7 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
             <Box sx={{ mt: 0.3, pt: 0.5, borderTop: `1px solid ${TC_BORDER}` }}>
               <pre style={{
                 margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                fontFamily: c.font.sans, fontSize: '0.68rem', lineHeight: 1.5,
+                fontFamily: c.font.sans, fontSize: '0.6875rem', lineHeight: 1.5,
                 color: TC_BODY,
               }}>
                 {single.description.slice(0, 300)}
@@ -78,16 +78,16 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
             transition: 'background-color 0.15s',
             '&:hover': { bgcolor: TC_HOVER },
           }}>
-            <span style={{ color: TC_HEADING, fontSize: '0.72rem', fontWeight: 500, fontFamily: c.font.sans }}>
+            <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 500, fontFamily: c.font.sans }}>
               {item.summary || '(no title)'}
             </span>
-            <span style={{ color: TC_DIM, fontSize: '0.6rem', flexShrink: 0, fontFamily: c.font.mono }}>
+            <span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
               {formatTimestamp(item.start?.dateTime || item.start?.date || item.start)}
             </span>
           </Box>
         ))}
         {items.length > 6 && (
-          <span style={{ color: TC_DIM, fontSize: '0.64rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
+          <span style={{ color: TC_DIM, fontSize: '0.625rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
             +{items.length - 6} more
           </span>
         )}
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx
index 8c408ff2..64c635e6 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx
@@ -18,11 +18,11 @@ export const DriveCard: React.FC<{ data: Record<string, any> }> = ({ data }) =>
       }}>
         <FolderIcon sx={{ fontSize: 16, color: TC_WARNING, opacity: 0.7 }} />
         <Box>
-          <span style={{ color: TC_HEADING, fontSize: '0.73rem', fontWeight: 500, display: 'block', fontFamily: c.font.sans }}>
+          <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 500, display: 'block', fontFamily: c.font.sans }}>
             {single.name}
           </span>
           {single.mimeType && (
-            <span style={{ color: TC_DIM, fontSize: '0.6rem', fontFamily: c.font.mono }}>{single.mimeType}</span>
+            <span style={{ color: TC_DIM, fontSize: '0.625rem', fontFamily: c.font.mono }}>{single.mimeType}</span>
           )}
         </Box>
       </Box>
@@ -40,9 +40,9 @@ export const DriveCard: React.FC<{ data: Record<string, any> }> = ({ data }) =>
             '&:hover': { bgcolor: TC_HOVER },
           }}>
             <FolderIcon sx={{ fontSize: 13, color: TC_WARNING, opacity: 0.5 }} />
-            <span style={{ color: TC_HEADING, fontSize: '0.7rem', fontFamily: c.font.sans }}>{f.name || f.id}</span>
+            <span style={{ color: TC_HEADING, fontSize: '0.6875rem', fontFamily: c.font.sans }}>{f.name || f.id}</span>
             {f.mimeType && (
-              <span style={{ color: TC_DIM, fontSize: '0.58rem', flexShrink: 0, fontFamily: c.font.mono }}>
+              <span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
                 {f.mimeType.split('/').pop()}
               </span>
             )}
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx
index 498e23f7..901ac7e2 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx
@@ -9,7 +9,7 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
   const entries = Object.entries(data).filter(([, v]) => v != null);
 
   if (entries.length === 0)
-    return <span style={{ color: TC_DIM, fontStyle: 'italic', fontSize: '0.7rem', padding: '8px 12px', display: 'block' }}>(empty response)</span>;
+    return <span style={{ color: TC_DIM, fontStyle: 'italic', fontSize: '0.6875rem', padding: '8px 12px', display: 'block' }}>(empty response)</span>;
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.3, px: 1.5, py: 1 }}>
@@ -17,21 +17,21 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
         const isLong = typeof val === 'string' && val.length > 100;
         const isObj = typeof val === 'object';
         return (
-          <Box key={i} sx={{ fontSize: '0.7rem', display: 'flex', gap: 0.75, lineHeight: 1.5 }}>
-            <span style={{ color: TC_DIM, minWidth: 72, flexShrink: 0, fontWeight: 500, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.03em', paddingTop: 1 }}>
+          <Box key={i} sx={{ fontSize: '0.6875rem', display: 'flex', gap: 0.75, lineHeight: 1.5 }}>
+            <span style={{ color: TC_DIM, minWidth: 72, flexShrink: 0, fontWeight: 500, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.03em', paddingTop: 1 }}>
               {key}
             </span>
             {isObj ? (
               <pre style={{
                 margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                color: TC_BODY, fontFamily: c.font.mono, fontSize: '0.68rem',
+                color: TC_BODY, fontFamily: c.font.mono, fontSize: '0.6875rem',
               }}>
                 {JSON.stringify(val, null, 2).slice(0, 500)}
               </pre>
             ) : isLong ? (
               <pre style={{
                 margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                color: TC_BODY, fontFamily: c.font.sans, fontSize: '0.68rem',
+                color: TC_BODY, fontFamily: c.font.sans, fontSize: '0.6875rem',
               }}>
                 {String(val).slice(0, 500)}{String(val).length > 500 ? '…' : ''}
               </pre>
@@ -42,7 +42,7 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
         );
       })}
       {entries.length > 20 && (
-        <span style={{ color: TC_DIM, fontSize: '0.62rem', fontStyle: 'italic' }}>
+        <span style={{ color: TC_DIM, fontSize: '0.625rem', fontStyle: 'italic' }}>
           +{entries.length - 20} more fields
         </span>
       )}
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx
index dd85d653..2600a9f9 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx
@@ -33,22 +33,22 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
               '&:hover': { bgcolor: TC_HOVER },
             }}>
               <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 1 }}>
-                <span style={{ color: TC_HEADING, fontSize: '0.74rem', fontWeight: 600, fontFamily: c.font.sans }}>
+                <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, fontFamily: c.font.sans }}>
                   {m.subject}
                 </span>
                 {m.date && (
-                  <span style={{ color: TC_DIM, fontSize: '0.6rem', flexShrink: 0, fontFamily: c.font.mono }}>
+                  <span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
                     {m.date}
                   </span>
                 )}
               </Box>
               {m.from && (
-                <span style={{ color: TC_MUTED, fontSize: '0.68rem', fontFamily: c.font.sans }}>
+                <span style={{ color: TC_MUTED, fontSize: '0.6875rem', fontFamily: c.font.sans }}>
                   {m.from}
                 </span>
               )}
               {(m.snippet || m.bodyPreview) && (
-                <span style={{ color: TC_BODY, fontSize: '0.68rem', lineHeight: 1.45, fontFamily: c.font.sans }}>
+                <span style={{ color: TC_BODY, fontSize: '0.6875rem', lineHeight: 1.45, fontFamily: c.font.sans }}>
                   {(m.snippet || m.bodyPreview).slice(0, 120)}
                   {(m.snippet || m.bodyPreview).length > 120 ? '…' : ''}
                 </span>
@@ -57,7 +57,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
           );
         })}
         {messages.length > 5 && (
-          <span style={{ color: TC_DIM, fontSize: '0.66rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
+          <span style={{ color: TC_DIM, fontSize: '0.6875rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
             +{messages.length - 5} more
           </span>
         )}
@@ -82,7 +82,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
           ) : (
             <EmailIcon sx={{ fontSize: 14, color: TC_ACCENT, opacity: 0.8 }} />
           )}
-          <span style={{ color: TC_HEADING, fontSize: '0.78rem', fontWeight: 600, flex: 1, fontFamily: c.font.sans }}>
+          <span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, flex: 1, fontFamily: c.font.sans }}>
             {email.subject}
           </span>
         </Box>
@@ -92,20 +92,20 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
         {(email.from || email.to || email.date) && (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.3 }}>
             {email.from && (
-              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>From</span>
+              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>From</span>
                 <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.from}</span>
               </Box>
             )}
             {email.to && (
-              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>To</span>
+              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>To</span>
                 <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.to}</span>
               </Box>
             )}
             {email.date && (
-              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
-                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Date</span>
+              <Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
+                <span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Date</span>
                 <span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.date}</span>
               </Box>
             )}
@@ -120,7 +120,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
                 bgcolor: `${TC_ACCENT}18`, borderRadius: 0.75,
                 px: 0.6, py: 0.1,
               }}>
-                <span style={{ fontSize: '0.56rem', color: TC_ACCENT, fontFamily: c.font.mono, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{l}</span>
+                <span style={{ fontSize: '0.625rem', color: TC_ACCENT, fontFamily: c.font.mono, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{l}</span>
               </Box>
             ))}
           </Box>
@@ -131,7 +131,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
             mt: 0.25, pt: 0.5, borderTop: `1px solid ${TC_BORDER}`,
             color: TC_BODY,
             fontFamily: c.font.sans,
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             lineHeight: 1.6,
             overflowWrap: 'anywhere',
             wordBreak: 'break-word',
@@ -140,8 +140,8 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
               color: TC_HEADING, fontFamily: c.font.sans,
               mt: 1, mb: 0.5, '&:first-of-type': { mt: 0 },
             },
-            '& h1': { fontSize: '0.82rem' }, '& h2': { fontSize: '0.78rem' },
-            '& h3': { fontSize: '0.74rem' }, '& h4, & h5, & h6': { fontSize: '0.7rem' },
+            '& h1': { fontSize: '0.8125rem' }, '& h2': { fontSize: '0.75rem' },
+            '& h3': { fontSize: '0.75rem' }, '& h4, & h5, & h6': { fontSize: '0.6875rem' },
             '& strong': { color: TC_HEADING, fontWeight: 600 },
             '& em': { fontStyle: 'italic' },
             '& a': { color: TC_ACCENT, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } },
@@ -154,11 +154,11 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
             },
             '& code': {
               bgcolor: `${TC_BORDER}`, px: 0.4, py: 0.15,
-              borderRadius: 0.5, fontSize: '0.65rem', fontFamily: c.font.mono,
+              borderRadius: 0.5, fontSize: '0.625rem', fontFamily: c.font.mono,
             },
             '& pre': {
               bgcolor: `${TC_BORDER}`, borderRadius: 1, p: 1,
-              overflow: 'auto', fontSize: '0.65rem', fontFamily: c.font.mono,
+              overflow: 'auto', fontSize: '0.625rem', fontFamily: c.font.mono,
               m: 0, mb: 0.75,
             },
             '& pre code': { bgcolor: 'transparent', p: 0 },
@@ -183,7 +183,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
                 px: 0.6, py: 0.1,
               }}>
                 <AttachFileIcon sx={{ fontSize: 9, color: TC_WARNING, opacity: 0.7 }} />
-                <span style={{ fontSize: '0.58rem', color: TC_WARNING, fontFamily: c.font.mono }}>
+                <span style={{ fontSize: '0.625rem', color: TC_WARNING, fontFamily: c.font.mono }}>
                   {a.filename || a.name || 'attachment'}
                 </span>
               </Box>
diff --git a/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx b/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx
index ca2af76f..9e36c3ed 100644
--- a/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx
+++ b/frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx
@@ -18,7 +18,7 @@ export const McpResultCard: React.FC<{ parsed: ParsedMcpResult; compact?: boolea
   if (data.error || data.is_error) {
     return (
       <Box sx={{ p: 1 }}>
-        <span style={{ color: tc.STDERR_COLOR, fontSize: '0.73rem' }}>
+        <span style={{ color: tc.STDERR_COLOR, fontSize: '0.75rem' }}>
           {data.error || data.message || JSON.stringify(data, null, 2)}
         </span>
       </Box>
@@ -40,7 +40,7 @@ export const McpResultCard: React.FC<{ parsed: ParsedMcpResult; compact?: boolea
       <Box sx={{ px: 1.5, py: 1 }}>
         <span style={{
           color: TC_BODY,
-          fontSize: '0.72rem',
+          fontSize: '0.75rem',
           fontFamily: c.font.sans,
           whiteSpace: 'pre-wrap',
           wordBreak: 'break-word',
diff --git a/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx b/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx
index 267301c6..d06f88bf 100644
--- a/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx
+++ b/frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx
@@ -55,7 +55,7 @@ export const ElapsedTimer: React.FC<{ startTime: string }> = ({ startTime }) =>
       />
       <Typography
         sx={{
-          fontSize: '0.7rem',
+          fontSize: '0.6875rem',
           fontFamily: c.font.mono,
           color: c.text.tertiary,
           minWidth: 28,
diff --git a/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx b/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx
index 557d0297..02f51c33 100644
--- a/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx
@@ -230,7 +230,7 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
       return (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
           {tool_input.description && (
-            <Typography sx={{ color: c.text.muted, fontSize: '0.78rem' }}>
+            <Typography sx={{ color: c.text.muted, fontSize: '0.75rem' }}>
               {tool_input.description}
             </Typography>
           )}
@@ -242,8 +242,8 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
     case 'Read':
       return (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <DescriptionIcon sx={{ fontSize: '0.9rem', color: c.text.muted }} />
-          <Typography sx={{ color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono }}>
+          <DescriptionIcon sx={{ fontSize: '0.875rem', color: c.text.muted }} />
+          <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono }}>
             {tool_input.file_path || tool_input.path || JSON.stringify(tool_input)}
           </Typography>
         </Box>
@@ -256,8 +256,8 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
       return (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <EditIcon sx={{ fontSize: '0.9rem', color: c.text.muted }} />
-            <Typography sx={{ color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono }}>
+            <EditIcon sx={{ fontSize: '0.875rem', color: c.text.muted }} />
+            <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono }}>
               {path}
             </Typography>
           </Box>
@@ -417,7 +417,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
         <Box sx={{ color: c.accent.primary, display: 'flex', alignItems: 'center' }}>
           <QuestionAnswerIcon sx={{ fontSize: '1rem' }} />
         </Box>
-        <Typography sx={{ color: c.accent.primary, fontWeight: 700, fontSize: '0.85rem' }}>
+        <Typography sx={{ color: c.accent.primary, fontWeight: 700, fontSize: '0.875rem' }}>
           Agent has a question
         </Typography>
       </Box>
@@ -430,11 +430,11 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
           return (
             <Box key={i}>
               {q.header && (
-                <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.25 }}>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.25 }}>
                   {q.header}
                 </Typography>
               )}
-              <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 500, mb: 0.75 }}>
+              <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 500, mb: 0.75 }}>
                 {q.question || q.prompt || q.text || '(question)'}
               </Typography>
               {hasOptions ? (
@@ -450,7 +450,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                           size="small"
                           onClick={() => toggleOption(i, key, multi)}
                           sx={{
-                            fontSize: '0.78rem',
+                            fontSize: '0.75rem',
                             fontWeight: selected ? 600 : 400,
                             cursor: 'pointer',
                             color: selected ? c.accent.primary : c.text.secondary,
@@ -472,7 +472,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                       size="small"
                       onClick={() => toggleOther(i, multi)}
                       sx={{
-                        fontSize: '0.78rem',
+                        fontSize: '0.75rem',
                         fontWeight: isOtherActive ? 600 : 400,
                         fontStyle: 'italic',
                         cursor: 'pointer',
@@ -501,7 +501,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                         mt: 0.25,
                         '& .MuiOutlinedInput-root': {
                           color: c.text.primary,
-                          fontSize: '0.82rem',
+                          fontSize: '0.8125rem',
                           '& fieldset': { borderColor: c.border.medium },
                           '&:hover fieldset': { borderColor: c.border.strong },
                           '&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -522,7 +522,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
                   sx={{
                     '& .MuiOutlinedInput-root': {
                       color: c.text.primary,
-                      fontSize: '0.82rem',
+                      fontSize: '0.8125rem',
                       '& fieldset': { borderColor: c.border.medium },
                       '&:hover fieldset': { borderColor: c.border.strong },
                       '&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -544,7 +544,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
             bgcolor: c.accent.primary,
             '&:hover': { bgcolor: c.accent.hover || c.accent.primary, filter: 'brightness(0.9)' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
           }}
         >
           Submit
@@ -557,7 +557,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
             color: c.text.secondary,
             '&:hover': { borderColor: c.text.secondary, bgcolor: `${c.text.secondary}08` },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
           }}
         >
           Dismiss
@@ -600,7 +600,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
           <Box sx={{ color: c.status.warning, display: 'flex', alignItems: 'center' }}>
             {getToolIcon(request.tool_name)}
           </Box>
-          <Typography sx={{ color: c.status.warning, fontWeight: 700, fontSize: '0.85rem' }}>
+          <Typography sx={{ color: c.status.warning, fontWeight: 700, fontSize: '0.875rem' }}>
             {isSensitive ? 'Sensitive file' : 'Permission Required'}
           </Typography>
           <Chip
@@ -608,7 +608,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             size="small"
             sx={{
               height: 20,
-              fontSize: '0.7rem',
+              fontSize: '0.6875rem',
               fontWeight: 600,
               fontFamily: c.font.mono,
               bgcolor: 'rgba(128,92,31,0.15)',
@@ -633,11 +633,11 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
           >
             <WarningAmberIcon sx={{ fontSize: 18, color: c.status.error, mt: 0.1, flexShrink: 0 }} />
             <Box sx={{ flex: 1, minWidth: 0 }}>
-              <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.82rem', lineHeight: 1.3 }}>
+              <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.8125rem', lineHeight: 1.3 }}>
                 This file is sensitive: {request.sensitive_label}
               </Typography>
               {request.sensitive_why && (
-                <Typography sx={{ color: c.text.secondary, fontSize: '0.78rem', lineHeight: 1.35, mt: 0.3 }}>
+                <Typography sx={{ color: c.text.secondary, fontSize: '0.75rem', lineHeight: 1.35, mt: 0.3 }}>
                   {request.sensitive_why} OpenSwarm asks every time because a bad change here is hard to undo. Approve only if you asked for this.
                 </Typography>
               )}
@@ -655,7 +655,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
               mb: 1,
               ml: 0,
               alignItems: 'flex-start',
-              '& .MuiFormControlLabel-label': { fontSize: '0.78rem', color: c.text.secondary, lineHeight: 1.35, pt: 0.5 },
+              '& .MuiFormControlLabel-label': { fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.35, pt: 0.5 },
             }}
             control={
               <Checkbox
@@ -678,7 +678,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             variant="contained"
             startIcon={<CheckIcon />}
             onClick={() => onApprove(request.id, undefined, isSensitive && trustPattern)}
-            sx={{ bgcolor: c.status.success, '&:hover': { bgcolor: '#1e4d15' }, fontWeight: 600, fontSize: '0.8rem' }}
+            sx={{ bgcolor: c.status.success, '&:hover': { bgcolor: '#1e4d15' }, fontWeight: 600, fontSize: '0.8125rem' }}
           >
             Approve
           </Button>
@@ -687,7 +687,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
               variant="outlined"
               startIcon={<DoneAllIcon />}
               onClick={() => onApprove(request.id, undefined, false, true)}
-              sx={{ borderColor: c.status.success, color: c.status.success, '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' }, fontWeight: 600, fontSize: '0.8rem' }}
+              sx={{ borderColor: c.status.success, color: c.status.success, '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' }, fontWeight: 600, fontSize: '0.8125rem' }}
             >
               Always approve
             </Button>
@@ -696,7 +696,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             variant="outlined"
             startIcon={<CloseIcon />}
             onClick={() => onDeny(request.id)}
-            sx={{ borderColor: c.status.error, color: c.status.error, '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' }, fontWeight: 600, fontSize: '0.8rem' }}
+            sx={{ borderColor: c.status.error, color: c.status.error, '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' }, fontWeight: 600, fontSize: '0.8125rem' }}
           >
             Deny
           </Button>
@@ -736,7 +736,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
 
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9rem' }}>
+            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.875rem' }}>
               {displayName}
             </Typography>
             <Chip
@@ -744,7 +744,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
               size="small"
               sx={{
                 height: 18,
-                fontSize: '0.65rem',
+                fontSize: '0.625rem',
                 fontWeight: 500,
                 bgcolor: `${accentColor}12`,
                 color: accentColor,
@@ -757,7 +757,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             <Typography
               sx={{
                 color: c.text.tertiary,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 lineHeight: 1.3,
                 mt: 0.15,
                 overflow: 'hidden',
@@ -786,7 +786,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             <Typography
               sx={{
                 color: c.text.secondary,
-                fontSize: '0.82rem',
+                fontSize: '0.8125rem',
                 flex: 1,
                 minWidth: 0,
                 overflow: 'hidden',
@@ -819,7 +819,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             bgcolor: c.status.success,
             '&:hover': { bgcolor: '#1e4d15' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             textTransform: 'none',
             borderRadius: 1.5,
             px: 2,
@@ -836,7 +836,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             color: c.status.success,
             '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             textTransform: 'none',
             borderRadius: 1.5,
             px: 2,
@@ -853,7 +853,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
             color: c.status.error,
             '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
             fontWeight: 600,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             textTransform: 'none',
             borderRadius: 1.5,
             px: 2,
@@ -957,7 +957,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
               bgcolor: c.status.warningBg,
             }}
           >
-            <Typography sx={{ fontSize: '0.85rem', fontWeight: 700, color: c.status.warning, flex: 1 }}>
+            <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.status.warning, flex: 1 }}>
               {nonQuestions.length} pending approvals
             </Typography>
             <Button
@@ -969,7 +969,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
                 bgcolor: c.status.success,
                 '&:hover': { bgcolor: '#1e4d15' },
                 fontWeight: 600,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 borderRadius: 1.5,
                 px: 1.5,
@@ -988,7 +988,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
                 color: c.status.success,
                 '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' },
                 fontWeight: 600,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 borderRadius: 1.5,
                 px: 1.5,
@@ -1007,7 +1007,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
                 color: c.status.error,
                 '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
                 fontWeight: 600,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 borderRadius: 1.5,
                 px: 1.5,
@@ -1087,7 +1087,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
             : getToolIcon(group.toolName)}
         </Box>
 
-        <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
           {group.parsed.isMcp ? group.parsed.displayName : group.toolName}
         </Typography>
 
@@ -1097,7 +1097,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
           sx={{
             height: 20,
             minWidth: 24,
-            fontSize: '0.72rem',
+            fontSize: '0.75rem',
             fontWeight: 700,
             bgcolor: `${accentColor}18`,
             color: accentColor,
@@ -1114,7 +1114,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
               sx={{
                 color: c.status.success,
                 fontWeight: 600,
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 minWidth: 0,
                 px: 1,
@@ -1130,7 +1130,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
               sx={{
                 color: c.status.error,
                 fontWeight: 600,
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 textTransform: 'none',
                 minWidth: 0,
                 px: 1,
diff --git a/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx b/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx
index e506f8c5..eec1b3e0 100644
--- a/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx
@@ -41,7 +41,7 @@ const BranchNavigator: React.FC<Props> = ({ currentIndex, totalBranches, onPrevi
         >
           <ChevronLeftIcon sx={{ fontSize: 16 }} />
         </IconButton>
-        <Typography sx={{ color: c.text.tertiary, fontSize: '0.7rem', minWidth: 28, textAlign: 'center', userSelect: 'none' }}>
+        <Typography sx={{ color: c.text.tertiary, fontSize: '0.6875rem', minWidth: 28, textAlign: 'center', userSelect: 'none' }}>
           {currentIndex + 1} / {totalBranches}
         </Typography>
         <IconButton
diff --git a/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx b/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
index 50944c3c..86d50750 100644
--- a/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
@@ -293,7 +293,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
               <LanguageIcon sx={{ fontSize: 12, color: accentColor, opacity: 0.7 }} />
               <Typography
                 sx={{
-                  fontSize: '0.65rem',
+                  fontSize: '0.625rem',
                   fontWeight: 600,
                   color: accentColor,
                   opacity: 0.8,
@@ -310,7 +310,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
           {!showLabels && entries.length === 0 && session.status === 'running' && (
             <Typography
               sx={{
-                fontSize: '0.7rem',
+                fontSize: '0.6875rem',
                 color: c.text.tertiary,
                 fontStyle: 'italic',
                 fontFamily: c.font.mono,
@@ -347,7 +347,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
                 <PanToolOutlinedIcon sx={{ fontSize: 12, color: '#f59e0b', flexShrink: 0, mt: '2px' }} />
                 <Typography
                   sx={{
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontWeight: 600,
                     color: '#f59e0b',
                     flex: 1,
@@ -428,7 +428,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
         />
         <Typography
           sx={{
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             color: fc.thought,
             lineHeight: 1.45,
             wordBreak: 'break-word',
@@ -448,7 +448,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
         <ActionIcon sx={{ fontSize: 11, color: accentColor, mt: '2px', flexShrink: 0 }} />
         <Typography
           sx={{
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             fontFamily: c.font.mono,
             color: accentColor,
             lineHeight: 1.45,
@@ -466,7 +466,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
       <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'flex-start', minWidth: 0, pl: 1.25 }}>
         <Typography
           sx={{
-            fontSize: '0.65rem',
+            fontSize: '0.625rem',
             fontFamily: c.font.mono,
             color: fc.result,
             lineHeight: 1.45,
@@ -485,7 +485,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
         <ErrorOutlineIcon sx={{ fontSize: 10, color: fc.errorIcon, flexShrink: 0 }} />
         <Typography
           sx={{
-            fontSize: '0.68rem',
+            fontSize: '0.6875rem',
             fontFamily: c.font.mono,
             color: fc.error,
             lineHeight: 1.45,
diff --git a/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx b/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx
index e1226ff9..79d189e1 100644
--- a/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx
@@ -43,11 +43,11 @@ const FeedbackDialog: React.FC<Props> = ({ open, sentiment, sessionId, messageId
       PaperProps={{ sx: { bgcolor: c.bg.elevated, borderRadius: 3, p: 1, minWidth: 420, maxWidth: 480 } }}
     >
       <Box sx={{ p: 2 }}>
-        <Typography sx={{ color: c.text.primary, fontSize: '1.15rem', fontWeight: 600, mb: 2 }}>
+        <Typography sx={{ color: c.text.primary, fontSize: '1.125rem', fontWeight: 600, mb: 2 }}>
           {isUp ? 'Give positive feedback' : 'Give negative feedback'}
         </Typography>
 
-        <Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', mb: 1 }}>
+        <Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', mb: 1 }}>
           Please provide details: (optional)
         </Typography>
         <TextField
@@ -62,7 +62,7 @@ const FeedbackDialog: React.FC<Props> = ({ open, sentiment, sessionId, messageId
             '& .MuiOutlinedInput-root': {
               bgcolor: c.bg.page,
               color: c.text.primary,
-              fontSize: '0.9rem',
+              fontSize: '0.875rem',
               '& fieldset': { borderColor: c.border.medium },
               '&:hover fieldset': { borderColor: c.border.strong },
               '&.Mui-focused fieldset': { borderColor: c.accent.primary },
diff --git a/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx b/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx
index eb69863e..e97cad2e 100644
--- a/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx
@@ -117,7 +117,7 @@ const MessageActionBar: React.FC<Props> = ({
               <Typography
                 sx={{
                   color: c.text.tertiary,
-                  fontSize: '0.7rem',
+                  fontSize: '0.6875rem',
                   minWidth: 28,
                   textAlign: 'center',
                   userSelect: 'none',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx
index a2740e2c..176a3d5c 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx
@@ -19,7 +19,7 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
           overflowX: 'hidden',
           color: c.text.secondary,
           fontFamily: c.font.sans,
-          fontSize: '0.78rem',
+          fontSize: '0.75rem',
           lineHeight: 1.65,
           overflowWrap: 'anywhere',
           wordBreak: 'break-word',
@@ -28,8 +28,8 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
             color: c.text.primary, fontFamily: c.font.sans,
             mt: 1, mb: 0.5, '&:first-of-type': { mt: 0 },
           },
-          '& h1': { fontSize: '0.88rem' }, '& h2': { fontSize: '0.84rem' },
-          '& h3': { fontSize: '0.8rem' }, '& h4': { fontSize: '0.78rem' },
+          '& h1': { fontSize: '0.875rem' }, '& h2': { fontSize: '0.8125rem' },
+          '& h3': { fontSize: '0.8125rem' }, '& h4': { fontSize: '0.75rem' },
           '& strong': { color: c.text.primary, fontWeight: 600 },
           '& a': { color: c.accent.primary, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } },
           '& ul, & ol': { pl: 2, mb: 0.75, mt: 0 },
@@ -41,11 +41,11 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
           },
           '& code': {
             bgcolor: c.bg.secondary, px: 0.4, py: 0.15,
-            borderRadius: 0.5, fontSize: '0.72rem', fontFamily: c.font.mono,
+            borderRadius: 0.5, fontSize: '0.75rem', fontFamily: c.font.mono,
           },
           '& pre': {
             bgcolor: c.bg.secondary, borderRadius: 1, p: 1,
-            overflow: 'auto', fontSize: '0.72rem', fontFamily: c.font.mono,
+            overflow: 'auto', fontSize: '0.75rem', fontFamily: c.font.mono,
             m: 0, mb: 0.75,
           },
           '& pre code': { bgcolor: 'transparent', p: 0 },
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
index 584dd231..5dc598c1 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
@@ -96,7 +96,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
             <Typography
               sx={{
                 color: c.accent.primary,
-                fontSize: '0.78rem',
+                fontSize: '0.75rem',
                 fontWeight: 600,
                 flexShrink: 0,
               }}
@@ -119,7 +119,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
               <Typography
                 sx={{
                   color: hideVerbLabel ? c.text.primary : c.text.secondary,
-                  fontSize: '0.74rem',
+                  fontSize: '0.75rem',
                   // Args are data (ids, URLs, params) and read in mono; web rows are SOURCES and read in body text.
                   fontFamily: isWebRow ? undefined : c.font.mono,
                   flex: 1,
@@ -143,7 +143,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 12, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.68rem', fontWeight: 500 }}>denied</Typography>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
             </Box>
           )}
           {result && !isDenied && (
@@ -154,7 +154,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
               {/* Timings are debug detail, not content: ghosted at rest, legible on row hover
                   (LibreChat/ChatGPT show none at all; we keep them one hover away). */}
               {resultElapsedMs != null && (
-                <Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.ghost, transition: 'color 120ms', '.osw-mcp-row:hover &': { color: c.text.tertiary } }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.ghost, transition: 'color 120ms', '.osw-mcp-row:hover &': { color: c.text.tertiary } }}>
                   {formatElapsed(resultElapsedMs)}
                 </Typography>
               )}
@@ -170,7 +170,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           <Typography
             sx={{
               color: c.text.secondary,
-              fontSize: '0.74rem',
+              fontSize: '0.75rem',
               fontFamily: c.font.mono,
               whiteSpace: 'normal',
               overflowWrap: 'anywhere',
@@ -207,7 +207,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
           ) : parsedResult ? (
             <pre style={{
               margin: 0, padding: '8px 12px', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-              fontFamily: c.font.mono, fontSize: '0.73rem', lineHeight: 1.5, color: tc.OUTPUT_COLOR,
+              fontFamily: c.font.mono, fontSize: '0.75rem', lineHeight: 1.5, color: tc.OUTPUT_COLOR,
             }}>
               {parsedResult.type === 'text' ? parsedResult.content : ''}
             </pre>
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
index 7db5815a..ac2435f9 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
@@ -72,7 +72,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
           <Typography
             sx={{
               color: c.accent.primary,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               fontWeight: 600,
               flexShrink: 0,
             }}
@@ -94,7 +94,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
             <Typography
               noWrap
               sx={{
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 color: c.text.secondary,
                 fontFamily: c.font.sans,
@@ -112,7 +112,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
               sx={{
                 flex: 1,
                 minWidth: 0,
-                fontSize: '0.73rem',
+                fontSize: '0.75rem',
                 color: c.text.tertiary,
                 fontFamily: c.font.sans,
               }}
@@ -125,7 +125,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>denied</Typography>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
             </Box>
           )}
 
@@ -135,7 +135,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
                 <ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
               )}
               {resultElapsedMs != null && (
-                <Typography sx={{ fontSize: '0.65rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
                   {formatElapsed(resultElapsedMs)}
                 </Typography>
               )}
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
index 7a5aaebb..0d5574e3 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
@@ -131,7 +131,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
             <Typography
               sx={{
                 color: c.text.tertiary,
-                fontSize: '0.65rem',
+                fontSize: '0.625rem',
                 opacity: 0.7,
                 flexShrink: 0,
               }}
@@ -169,7 +169,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>
                 denied
               </Typography>
             </Box>
@@ -180,7 +180,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                 <>
                   <ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
                   {resultSummary && (
-                    <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>
+                    <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>
                       {resultSummary}
                     </Typography>
                   )}
@@ -189,7 +189,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
               {resultElapsedMs != null && (
                 <Typography
                   sx={{
-                    fontSize: '0.65rem',
+                    fontSize: '0.625rem',
                     fontFamily: c.font.mono,
                     color: c.text.tertiary,
                   }}
@@ -234,7 +234,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                 whiteSpace: 'pre-wrap',
                 wordBreak: 'break-word',
                 fontFamily: c.font.mono,
-                fontSize: '0.73rem',
+                fontSize: '0.75rem',
                 lineHeight: 1.5,
               }}
             >
@@ -278,7 +278,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                   whiteSpace: 'pre-wrap',
                   wordBreak: 'break-word',
                   fontFamily: c.font.mono,
-                  fontSize: '0.73rem',
+                  fontSize: '0.75rem',
                   lineHeight: 1.5,
                 }}
               >
@@ -324,7 +324,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
                 <Typography
                   sx={{
                     color: c.text.secondary,
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     fontFamily: c.font.mono,
                     whiteSpace: 'pre-wrap',
                     wordBreak: 'break-word',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
index 7961b851..b18112cb 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
@@ -72,7 +72,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
           <Typography
             sx={{
               color: c.accent.primary,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               fontWeight: 600,
               flexShrink: 0,
             }}
@@ -94,7 +94,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
             <Typography
               noWrap
               sx={{
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 color: c.text.secondary,
                 fontFamily: c.font.sans,
@@ -112,7 +112,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
               sx={{
                 flex: 1,
                 minWidth: 0,
-                fontSize: '0.73rem',
+                fontSize: '0.75rem',
                 color: c.text.tertiary,
                 fontFamily: c.font.sans,
               }}
@@ -125,7 +125,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
           {isDenied && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
               <BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
-              <Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>denied</Typography>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
             </Box>
           )}
 
@@ -135,12 +135,12 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
                 <ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
               )}
               {resultElapsedMs != null && (
-                <Typography sx={{ fontSize: '0.65rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
                   {formatElapsed(resultElapsedMs)}
                 </Typography>
               )}
               {costLabel && (
-                <Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
+                <Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
                   {costLabel}
                 </Typography>
               )}
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
index 8574aaf5..a6411542 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
@@ -74,7 +74,7 @@ export const SourceFavicons: React.FC<{ domains: string[]; size?: number }> = ({
             border: `1.5px solid ${c.bg.elevated}`,
             bgcolor: c.bg.secondary,
             color: c.text.tertiary,
-            fontSize: '0.6rem',
+            fontSize: '0.625rem',
             fontWeight: 600,
             display: 'inline-flex',
             alignItems: 'center',
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
index 2a72de4c..9e855aa5 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
@@ -166,21 +166,21 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             }}
           >
             {webDomains && webDomains.length > 0 && <SourceFavicons domains={webDomains} size={16} />}
-            <Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit' }}>
+            <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit' }}>
               {webGroupLabel ?? `${group.callCount} tool call${group.callCount === 1 ? '' : 's'}`}
             </Typography>
             {!allDone && (
-              <Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
+              <Typography sx={{ fontSize: '0.6875rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
                 {completedCount}/{group.callCount}
               </Typography>
             )}
             {allDone && webDomains && webDomains.length > 0 && (
-              <Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontVariantNumeric: 'tabular-nums' }}>
+              <Typography sx={{ fontSize: '0.6875rem', color: 'inherit', fontVariantNumeric: 'tabular-nums' }}>
                 {webDomains.length} source{webDomains.length === 1 ? '' : 's'}
               </Typography>
             )}
             {deniedCount > 0 && (
-              <Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
+              <Typography sx={{ color: c.status.error, fontSize: '0.6875rem' }}>
                 {deniedCount} denied
               </Typography>
             )}
@@ -217,7 +217,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
             <Typography
               sx={{
                 color: c.accent.primary,
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 fontWeight: 600,
                 flex: 1,
               }}
@@ -227,7 +227,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
           )}
 
           {deniedCount > 0 && (
-            <Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
+            <Typography sx={{ color: c.status.error, fontSize: '0.6875rem' }}>
               {deniedCount} denied
             </Typography>
           )}
@@ -236,12 +236,12 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
               makes the separate ×N chip redundant. tabular-nums +
               minWidth keep the position stable as digits change. */}
           {allDone && completedCount > 0 && (
-            <Typography sx={{ color: c.status.success, fontSize: '0.68rem', fontVariantNumeric: 'tabular-nums', fontFamily: c.font.mono, minWidth: 36, textAlign: 'right' }}>
+            <Typography sx={{ color: c.status.success, fontSize: '0.6875rem', fontVariantNumeric: 'tabular-nums', fontFamily: c.font.mono, minWidth: 36, textAlign: 'right' }}>
               {completedCount}/{group.callCount}
             </Typography>
           )}
           {!allDone && pendingCount > 0 && (
-            <Typography sx={{ color: c.text.tertiary, fontSize: '0.68rem', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums', minWidth: 36, textAlign: 'right' }}>
+            <Typography sx={{ color: c.text.tertiary, fontSize: '0.6875rem', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums', minWidth: 36, textAlign: 'right' }}>
               {completedCount}/{group.callCount}
             </Typography>
           )}
@@ -282,7 +282,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
               ) : (
                 <Typography
                   key={entry.id}
-                  sx={{ px: 1.5, py: 0.5, fontSize: '0.78rem', color: c.text.tertiary }}
+                  sx={{ px: 1.5, py: 0.5, fontSize: '0.75rem', color: c.text.tertiary }}
                 >
                   {entry.text}
                 </Typography>
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
index ff3fa3ee..da649def 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
@@ -131,7 +131,7 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
             onChange={(e) => setFreeText(e.target.value)}
             placeholder="Or type your own answer..."
             inputProps={{ 'aria-label': 'Type your own answer' }}
-            sx={{ flex: 1, fontSize: '0.8rem' }}
+            sx={{ flex: 1, fontSize: '0.8125rem' }}
           />
           <IconButton type="submit" size="small" disabled={!freeText.trim()} aria-label="Send answer">
             <ArrowUpwardRoundedIcon sx={{ fontSize: 16 }} />
@@ -139,15 +139,15 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
         </Box>
       )}
       {freeTextAnswer !== null && (
-        <Box sx={{ fontSize: '0.78rem', opacity: 0.75, pt: 0.75 }}>
+        <Box sx={{ fontSize: '0.75rem', opacity: 0.75, pt: 0.75 }}>
           &#10003; Answered: {freeTextAnswer}
         </Box>
       )}
       {submitted && pair.result === null && (
-        <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
+        <Box sx={{ fontSize: '0.75rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
       )}
       {orphaned && (
-        <Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>
+        <Box sx={{ fontSize: '0.75rem', opacity: 0.55, pt: 0.5 }}>
           No agent is waiting for this answer (the request expired or this is an old transcript).
         </Box>
       )}
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
index 8d980491..309a5fe0 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
@@ -36,14 +36,14 @@ function LinksWidget({ props }: { props: LinksProps }): React.ReactElement {
             '&:hover': { borderColor: c.border.strong },
           }}
         >
-          <Typography sx={{ fontSize: '0.68rem', color: c.text.tertiary, mb: 0.25 }}>
+          <Typography sx={{ fontSize: '0.6875rem', color: c.text.tertiary, mb: 0.25 }}>
             {hostOf(l.url)}
           </Typography>
-          <Typography sx={{ fontSize: '0.88rem', fontWeight: 600, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
             {l.title}
           </Typography>
           {l.description && (
-            <Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
               {l.description}
             </Typography>
           )}
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
index 92b6fd8a..44334ab7 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
@@ -27,11 +27,11 @@ function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
       }}
     >
       {props.title && (
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1.5 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 1.5 }}>
           {props.title}
         </Typography>
       )}
-      <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, mb: 0.5 }}>
+      <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, mb: 0.5 }}>
         {done} of {props.steps.length} complete
       </Typography>
       <Box sx={{ height: 4, borderRadius: 2, bgcolor: c.border.subtle, mb: 1.5, overflow: 'hidden' }}>
@@ -48,7 +48,7 @@ function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
           )}
           <Typography
             sx={{
-              fontSize: '0.82rem',
+              fontSize: '0.8125rem',
               fontWeight: step.status === 'in_progress' ? 600 : 500,
               color: step.status === 'pending' ? c.text.muted : c.text.primary,
               overflow: 'hidden',
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx b/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
index 22ddaf15..d069958f 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
@@ -12,7 +12,7 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
   return (
     <Box sx={{ maxWidth: 460 }}>
       {props.title && (
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
           {props.title}
         </Typography>
       )}
@@ -30,10 +30,10 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
               py: 1.25,
             }}
           >
-            <Typography sx={{ fontSize: '0.68rem', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.text.tertiary }}>
+            <Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.text.tertiary }}>
               {s.label}
             </Typography>
-            <Typography sx={{ fontSize: '1.15rem', fontWeight: 700, color: c.text.primary, mt: 0.25, fontVariantNumeric: 'tabular-nums' }}>
+            <Typography sx={{ fontSize: '1.125rem', fontWeight: 700, color: c.text.primary, mt: 0.25, fontVariantNumeric: 'tabular-nums' }}>
               {s.value}
             </Typography>
             {s.delta && (
@@ -43,7 +43,7 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
                 ) : (
                   <ArrowUpwardIcon sx={{ fontSize: 12, color: c.status.success }} />
                 )}
-                <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: s.direction === 'down' ? c.status.error : c.status.success }}>
+                <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: s.direction === 'down' ? c.status.error : c.status.success }}>
                   {s.delta}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/pages/Analytics/Analytics.tsx b/frontend/src/app/pages/Analytics/Analytics.tsx
index 7b03defa..4c1377a3 100644
--- a/frontend/src/app/pages/Analytics/Analytics.tsx
+++ b/frontend/src/app/pages/Analytics/Analytics.tsx
@@ -27,10 +27,10 @@ const Analytics: React.FC = () => {
               <circle cx="20" cy="7" r="1.5" fill={c.accent.primary} />
             </svg>
           </Box>
-          <Typography sx={{ color: c.text.primary, fontSize: '1.1rem', fontWeight: 600, mb: 1 }}>
+          <Typography sx={{ color: c.text.primary, fontSize: '1.125rem', fontWeight: 600, mb: 1 }}>
             Your usage
           </Typography>
-          <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.6, mb: 3, maxWidth: 500, mx: 'auto' }}>
+          <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.6, mb: 3, maxWidth: 500, mx: 'auto' }}>
             Usage data is automatically collected: sessions, costs, tool usage, model distribution, and task categories.
             All data is anonymous and can be disabled in Settings.
           </Typography>
@@ -45,10 +45,10 @@ const Analytics: React.FC = () => {
               { label: 'Retention & Funnels', desc: 'User engagement, feature adoption, onboarding flow' },
             ].map((item) => (
               <Box key={item.label} sx={{ p: 2, borderRadius: `${c.radius.md}px`, bgcolor: c.bg.elevated }}>
-                <Typography sx={{ color: c.text.primary, fontSize: '0.82rem', fontWeight: 600, mb: 0.5 }}>
+                <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 600, mb: 0.5 }}>
                   {item.label}
                 </Typography>
-                <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', lineHeight: 1.4 }}>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', lineHeight: 1.4 }}>
                   {item.desc}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/pages/Analytics/PixelChart.tsx b/frontend/src/app/pages/Analytics/PixelChart.tsx
index f889517b..d28ca073 100644
--- a/frontend/src/app/pages/Analytics/PixelChart.tsx
+++ b/frontend/src/app/pages/Analytics/PixelChart.tsx
@@ -360,7 +360,7 @@ const PixelChart: React.FC<PixelChartProps> = ({
               key={xl.idx}
               sx={{
                 color: c.text.ghost,
-                fontSize: '0.58rem',
+                fontSize: '0.625rem',
                 fontFamily: c.font.mono,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -383,7 +383,7 @@ const PixelChart: React.FC<PixelChartProps> = ({
           transition: 'opacity 0.12s',
           bgcolor: c.bg.inverse,
           color: c.text.inverse,
-          fontSize: '0.7rem',
+          fontSize: '0.6875rem',
           fontFamily: c.font.mono,
           fontWeight: 500,
           px: 1,
diff --git a/frontend/src/app/pages/Commands/Commands.tsx b/frontend/src/app/pages/Commands/Commands.tsx
index ea9451ac..445c40a0 100644
--- a/frontend/src/app/pages/Commands/Commands.tsx
+++ b/frontend/src/app/pages/Commands/Commands.tsx
@@ -55,7 +55,7 @@ const SectionHeader: React.FC<{
             size="small"
             sx={{
               height: 20,
-              fontSize: '0.7rem',
+              fontSize: '0.6875rem',
               fontWeight: 600,
               bgcolor: `${c.accent.primary}15`,
               color: c.accent.primary,
@@ -63,7 +63,7 @@ const SectionHeader: React.FC<{
           />
         )}
       </Box>
-      <Typography sx={{ color: c.text.tertiary, fontSize: '0.8rem' }}>{subtitle}</Typography>
+      <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>{subtitle}</Typography>
     </Box>
   </Box>
 );
@@ -230,7 +230,7 @@ export const CommandsContent: React.FC = () => {
               }}
             >
               <TerminalIcon sx={{ fontSize: 36, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.85rem' }}>
+              <Typography sx={{ fontSize: '0.875rem' }}>
                 No slash commands yet. Create skills or modes to see them here.
               </Typography>
             </Box>
@@ -264,7 +264,7 @@ export const CommandsContent: React.FC = () => {
                   <Typography
                     sx={{
                       color: c.text.primary,
-                      fontSize: '0.85rem',
+                      fontSize: '0.875rem',
                       fontFamily: c.font.mono,
                       fontWeight: 500,
                       minWidth: 140,
@@ -277,7 +277,7 @@ export const CommandsContent: React.FC = () => {
                     size="small"
                     sx={{
                       height: 20,
-                      fontSize: '0.65rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
                       bgcolor: cmd.type === 'mode' ? `${modesMap[cmd.id]?.color || c.accent.primary}15`
@@ -289,7 +289,7 @@ export const CommandsContent: React.FC = () => {
                   <Typography
                     sx={{
                       color: c.text.muted,
-                      fontSize: '0.8rem',
+                      fontSize: '0.8125rem',
                       flex: 1,
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
@@ -327,7 +327,7 @@ export const CommandsContent: React.FC = () => {
               }}
             >
               <AlternateEmailIcon sx={{ fontSize: 36, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.85rem' }}>
+              <Typography sx={{ fontSize: '0.875rem' }}>
                 No @ commands yet. Install MCP actions to see them here.
               </Typography>
             </Box>
@@ -367,7 +367,7 @@ export const CommandsContent: React.FC = () => {
                     size="small"
                     sx={{
                       height: 20,
-                      fontSize: '0.65rem',
+                      fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
                       bgcolor: cmd.source === 'builtin' ? `${c.accent.primary}12` : cmd.source === 'view' ? '#f472b615' : `${c.status.info}15`,
@@ -377,7 +377,7 @@ export const CommandsContent: React.FC = () => {
                   <Typography
                     sx={{
                       color: c.text.muted,
-                      fontSize: '0.8rem',
+                      fontSize: '0.8125rem',
                       flex: 1,
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index bf1b1799..71b80e15 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -491,7 +491,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                 placeholder="Search apps..."
                 sx={{
                   flex: 1,
-                  fontSize: '0.85rem',
+                  fontSize: '0.875rem',
                   color: c.text.primary,
                   fontFamily: c.font.sans,
                   '& input::placeholder': { color: c.text.ghost, opacity: 1 },
@@ -515,7 +515,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
             >
               {filteredOutputs.length === 0 ? (
                 <Box sx={{ px: 2, py: 3, textAlign: 'center' }}>
-                  <Typography sx={{ fontSize: '0.82rem', color: c.text.muted }}>
+                  <Typography sx={{ fontSize: '0.8125rem', color: c.text.muted }}>
                     {outputList.length === 0 ? 'No apps created yet' : 'No matching apps'}
                   </Typography>
                 </Box>
@@ -572,7 +572,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                     <Box sx={{ flex: 1, minWidth: 0 }}>
                       <Typography
                         sx={{
-                          fontSize: '0.82rem',
+                          fontSize: '0.8125rem',
                           fontWeight: 500,
                           color: c.text.primary,
                           overflow: 'hidden',
@@ -585,7 +585,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                       {output.description && (
                         <Typography
                           sx={{
-                            fontSize: '0.72rem',
+                            fontSize: '0.75rem',
                             color: c.text.muted,
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
index 765889e7..c11c131e 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
@@ -144,7 +144,7 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
         <Typography
           noWrap
           sx={{
-            fontSize: '0.9rem',
+            fontSize: '0.875rem',
             fontWeight: 600,
             color: c.text.primary,
             lineHeight: 1,
@@ -222,12 +222,12 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
                     />
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
+                      sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
                     >
                       {item.name}
                     </Typography>
                     <Typography
-                      sx={{ fontSize: '0.7rem', color: c.text.ghost, flexShrink: 0 }}
+                      sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0 }}
                     >
                       {friendlyStatusLabel(item.status)}
                     </Typography>
@@ -242,7 +242,7 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
                   <ItemRow key={item.id} onClick={() => handleFocus(item.id, item.card)} c={c}>
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
+                      sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
                     >
                       {item.name}
                     </Typography>
@@ -257,13 +257,13 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
                   <ItemRow key={item.id} onClick={() => handleFocus(item.id, item.card)} c={c}>
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
+                      sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
                     >
                       {item.title}
                     </Typography>
                     <Typography
                       noWrap
-                      sx={{ fontSize: '0.68rem', color: c.text.ghost, maxWidth: 120, flexShrink: 0 }}
+                      sx={{ fontSize: '0.6875rem', color: c.text.ghost, maxWidth: 120, flexShrink: 0 }}
                     >
                       {cleanUrl(item.url)}
                     </Typography>
@@ -305,10 +305,10 @@ const CategoryGroup: React.FC<{
       }}
     >
       <Box sx={{ display: 'flex', color: c.text.tertiary, '& > svg': { fontSize: 15 } }}>{icon}</Box>
-      <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+      <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
         {label}
       </Typography>
-      <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost }}>
+      <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost }}>
         {count}
       </Typography>
     </Box>
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index c75dccad..96433575 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -1088,14 +1088,14 @@ const AgentCard: React.FC<Props> = ({
             <InlineEditableTitle
               value={displayChatTitle(session)}
               onCommit={(name) => dispatch(renameSession({ sessionId: session.id, name }))}
-              sx={{ flex: '0 1 auto', minWidth: 0, maxWidth: '100%', color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}
+              sx={{ flex: '0 1 auto', minWidth: 0, maxWidth: '100%', color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}
             >
               <Typewriter
                 value={displayChatTitle(session)}
                 enabled={!!session.name && !isLegacyAutoName(session.name)}
               >
                 {(t) => (
-                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {t}
                   </Typography>
                 )}
@@ -1131,7 +1131,7 @@ const AgentCard: React.FC<Props> = ({
                     color: accentColor,
                     border: `1px solid ${accentColor}33`,
                     fontWeight: 600,
-                    fontSize: '0.68rem',
+                    fontSize: '0.6875rem',
                     height: 22,
                     flexShrink: 0,
                     '& .MuiChip-icon': { ml: '4px' },
@@ -1225,7 +1225,7 @@ const AgentCard: React.FC<Props> = ({
                 variant="body2"
                 sx={{
                   color: isStreaming ? c.text.secondary : c.text.muted,
-                  fontSize: '0.8rem',
+                  fontSize: '0.8125rem',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
@@ -1277,7 +1277,7 @@ const AgentCard: React.FC<Props> = ({
                       <Typography
                         sx={{
                           color: c.text.muted,
-                          fontSize: '0.7rem',
+                          fontSize: '0.6875rem',
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
                           whiteSpace: 'nowrap',
@@ -1341,7 +1341,7 @@ const AgentCard: React.FC<Props> = ({
                       bgcolor: c.status.success,
                       '&:hover': { bgcolor: '#1e4d15' },
                       fontWeight: 600,
-                      fontSize: '0.72rem',
+                      fontSize: '0.75rem',
                       textTransform: 'none',
                       borderRadius: 1.5,
                       px: 1.25,
@@ -1366,7 +1366,7 @@ const AgentCard: React.FC<Props> = ({
                       color: c.status.error,
                       '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
                       fontWeight: 600,
-                      fontSize: '0.72rem',
+                      fontSize: '0.75rem',
                       textTransform: 'none',
                       borderRadius: 1.5,
                       px: 1.25,
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx
index fb4f3d36..56c6c0c7 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx
@@ -235,7 +235,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
 
         <Typography
           sx={{
-            fontSize: '0.7rem',
+            fontSize: '0.6875rem',
             fontWeight: 600,
             color: intervention ? '#f59e0b' : 'rgba(255,255,255,0.85)',
             flex: 1,
@@ -293,15 +293,15 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
       {/* Body: intervention prompt OR scrollable action log */}
       {intervention ? (
         <Box sx={{ flex: 1, px: 1.25, py: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
-          <Typography sx={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
             {interventionProblem}
           </Typography>
           {interventionInstruction && (
-            <Typography sx={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.45)', fontStyle: 'italic', lineHeight: 1.4 }}>
+            <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)', fontStyle: 'italic', lineHeight: 1.4 }}>
               {interventionInstruction}
             </Typography>
           )}
-          <Typography sx={{ fontSize: '0.65rem', color: 'rgba(255,255,255,0.3)', lineHeight: 1.4 }}>
+          <Typography sx={{ fontSize: '0.625rem', color: 'rgba(255,255,255,0.3)', lineHeight: 1.4 }}>
             Resolve the issue in the browser above, then click Done.
           </Typography>
           {showSkipInput ? (
@@ -319,7 +319,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                 }}
                 sx={{
                   flex: 1,
-                  fontSize: '0.68rem',
+                  fontSize: '0.6875rem',
                   color: 'rgba(255,255,255,0.8)',
                   bgcolor: 'rgba(255,255,255,0.08)',
                   borderRadius: '6px',
@@ -350,7 +350,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   bgcolor: '#f59e0b',
                   '&:hover': { bgcolor: '#d97706' },
                   textTransform: 'none',
-                  fontSize: '0.68rem',
+                  fontSize: '0.6875rem',
                   fontWeight: 600,
                   borderRadius: '6px',
                   px: 1.5,
@@ -368,7 +368,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   color: 'rgba(255,255,255,0.4)',
                   '&:hover': { color: 'rgba(255,255,255,0.7)' },
                   textTransform: 'none',
-                  fontSize: '0.68rem',
+                  fontSize: '0.6875rem',
                   px: 1,
                   py: 0.4,
                   minWidth: 'auto',
@@ -400,7 +400,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
           }}
         >
           {entries.length === 0 && isRunning && (
-            <Typography sx={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.35)', fontStyle: 'italic' }}>
+            <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.35)', fontStyle: 'italic' }}>
               Starting...
             </Typography>
           )}
@@ -421,7 +421,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   />
                   <Typography
                     sx={{
-                      fontSize: '0.68rem',
+                      fontSize: '0.6875rem',
                       color: 'rgba(255,255,255,0.6)',
                       lineHeight: 1.4,
                       overflow: 'hidden',
@@ -449,7 +449,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
                   />
                   <Typography
                     sx={{
-                      fontSize: '0.68rem',
+                      fontSize: '0.6875rem',
                       fontFamily: c.font.mono,
                       color: accentColor,
                       lineHeight: 1.4,
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 75f9dbe7..f76b1e67 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1078,7 +1078,7 @@ const BrowserCard: React.FC<Props> = ({
                 <Typography
                   sx={{
                     flex: 1,
-                    fontSize: '0.7rem',
+                    fontSize: '0.6875rem',
                     fontWeight: isActive ? 600 : 400,
                     color: isActive ? CHROME_TEXT : CHROME_TEXT_MUTED,
                     overflow: 'hidden',
@@ -1169,7 +1169,7 @@ const BrowserCard: React.FC<Props> = ({
                   },
                 }}
               />
-              <Typography sx={{ fontSize: '0.65rem', fontWeight: 600, color: accentColor, lineHeight: 1 }}>
+              <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: accentColor, lineHeight: 1 }}>
                 AI
               </Typography>
             </Box>
@@ -1260,7 +1260,7 @@ const BrowserCard: React.FC<Props> = ({
             placeholder="Search Google or enter URL..."
             sx={{
               flex: 1,
-              fontSize: '0.74rem',
+              fontSize: '0.75rem',
               fontFamily: c.font.mono,
               color: CHROME_TEXT,
               py: 0,
@@ -1330,7 +1330,7 @@ const BrowserCard: React.FC<Props> = ({
                   bgcolor: c.bg.surface,
                 }}
               >
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.9rem', px: 2, textAlign: 'center' }}>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.875rem', px: 2, textAlign: 'center' }}>
                   {activeTitle || activeUrl}
                 </Typography>
               </Box>
@@ -1379,14 +1379,14 @@ const BrowserCard: React.FC<Props> = ({
                   bgcolor: c.bg.surface,
                 }}
               >
-                <Typography sx={{ color: c.text.primary, fontSize: '0.95rem', fontWeight: 500 }}>
+                <Typography sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 500 }}>
                   {endingState?.status === 'error' ? 'Task ended with an error.' : 'Task done.'}
                 </Typography>
                 <Button
                   onClick={() => dispatch(cancelBrowserCardEnding(browserId))}
                   sx={{
                     textTransform: 'none',
-                    fontSize: '0.82rem',
+                    fontSize: '0.8125rem',
                     fontWeight: 600,
                     bgcolor: c.accent.primary,
                     color: '#fff',
@@ -1414,7 +1414,7 @@ const BrowserCard: React.FC<Props> = ({
                   bgcolor: c.bg.surface,
                 }}
               >
-                <Typography sx={{ color: c.text.primary, fontSize: '0.95rem', fontWeight: 500 }}>
+                <Typography sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 500 }}>
                   This page stopped responding.
                 </Typography>
                 <Button
@@ -1422,7 +1422,7 @@ const BrowserCard: React.FC<Props> = ({
                   startIcon={<RefreshIcon sx={{ fontSize: '1rem' }} />}
                   sx={{
                     textTransform: 'none',
-                    fontSize: '0.82rem',
+                    fontSize: '0.8125rem',
                     fontWeight: 600,
                     bgcolor: c.accent.primary,
                     color: '#fff',
@@ -1455,7 +1455,7 @@ const BrowserCard: React.FC<Props> = ({
             Passkeys aren't supported
           </DialogTitle>
           <DialogContent sx={{ pb: 1 }}>
-            <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, lineHeight: 1.5 }}>
+            <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.5 }}>
               Sorry, OpenSwarm doesn't support passkeys. Please sign in with a password or another method.
             </Typography>
           </DialogContent>
@@ -1464,7 +1464,7 @@ const BrowserCard: React.FC<Props> = ({
               onClick={() => setPasskeyDialogOpen(false)}
               sx={{
                 textTransform: 'none',
-                fontSize: '0.82rem',
+                fontSize: '0.8125rem',
                 fontWeight: 600,
                 bgcolor: c.accent.primary,
                 color: '#fff',
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index e5bd3ac3..32dbb972 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -121,9 +121,9 @@ const BootingBody: React.FC = () => {
           },
         }}
       />
-      <Typography sx={{ fontSize: '0.85rem', color: c.text.muted }}>Starting preview</Typography>
+      <Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>Starting preview</Typography>
       <Fade in={slow} timeout={400} unmountOnExit>
-        <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, maxWidth: 240 }}>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, maxWidth: 240 }}>
           First run sets the app up, this can take a moment.
         </Typography>
       </Fade>
@@ -642,7 +642,7 @@ const DashboardViewCard: React.FC<Props> = ({
         <Typography
           sx={{
             flex: 1,
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             fontWeight: 600,
             color: c.text.primary,
             overflow: 'hidden',
@@ -653,7 +653,7 @@ const DashboardViewCard: React.FC<Props> = ({
           {output.name}
         </Typography>
         {instance > 1 && (
-          <Typography sx={{ fontSize: '0.66rem', fontWeight: 700, color: c.text.ghost, bgcolor: c.bg.page, borderRadius: 999, px: 0.75, py: 0.1, flexShrink: 0 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.ghost, bgcolor: c.bg.page, borderRadius: 999, px: 0.75, py: 0.1, flexShrink: 0 }}>
             #{instance}
           </Typography>
         )}
@@ -845,10 +845,10 @@ const DashboardViewCard: React.FC<Props> = ({
             >
               <RestartAltIcon sx={{ fontSize: 18, color: c.text.muted, flexShrink: 0 }} />
               <Box>
-                <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.2 }}>
+                <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.2 }}>
                   Reset & Hard Reload
                 </Typography>
-                <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, mt: 0.25 }}>
+                <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, mt: 0.25 }}>
                   Restart backend.py + reload preview
                 </Typography>
               </Box>
@@ -895,7 +895,7 @@ const BuildingOverlay: React.FC<{ show: boolean }> = ({ show }) => {
             },
           }}
         />
-        <Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', fontWeight: 500 }}>
+        <Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500 }}>
           Building…
         </Typography>
       </Box>
@@ -993,14 +993,14 @@ const DashboardOutputPreview: React.FC<{
           textAlign: 'center',
         }}
       >
-        <Typography sx={{ color: tokens.text.secondary, fontSize: '0.9rem' }}>
+        <Typography sx={{ color: tokens.text.secondary, fontSize: '0.875rem' }}>
           This app's files are missing.
         </Typography>
         <Typography
           onClick={() => void removeViewCardCleanly(cardKey ?? output.id, dispatch)}
           sx={{
             color: tokens.accent.primary,
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             fontWeight: 600,
             cursor: 'pointer',
             '&:hover': { textDecoration: 'underline' },
@@ -1031,8 +1031,8 @@ const DashboardOutputPreview: React.FC<{
           <Box sx={{ width: 44, height: 44, borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${tokens.accent.primary}1F`, color: tokens.accent.primary }}>
             <VisibilityRoundedIcon sx={{ fontSize: 22 }} />
           </Box>
-          <Typography sx={{ color: tokens.text.primary, fontSize: '0.92rem', fontWeight: 600 }}>{output.name || 'Your app'}</Typography>
-          <Typography sx={{ color: tokens.text.muted, fontSize: '0.78rem' }}>Built for you, click to open</Typography>
+          <Typography sx={{ color: tokens.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>{output.name || 'Your app'}</Typography>
+          <Typography sx={{ color: tokens.text.muted, fontSize: '0.75rem' }}>Built for you, click to open</Typography>
         </Box>
       );
     }
@@ -1042,7 +1042,7 @@ const DashboardOutputPreview: React.FC<{
           <Box component="img" src={suspendSnapshot} alt="" sx={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top left', display: 'block', filter: 'saturate(0.9)' }} />
         ) : (
           <Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Typography sx={{ color: tokens.text.ghost, fontSize: '0.82rem' }}>{output.name || 'App'}</Typography>
+            <Typography sx={{ color: tokens.text.ghost, fontSize: '0.8125rem' }}>{output.name || 'App'}</Typography>
           </Box>
         )}
       </Box>
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 267b3c9f..9f0827a8 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -345,7 +345,7 @@ const NoteCard: React.FC<Props> = ({
           <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
         </Box>
         {isMinimized && (
-          <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {content.trim() || 'Note'}
           </Box>
         )}
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 7dd0fd03..b1caf31e 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -118,7 +118,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
           }}>
           {GROUPS.map((g) => (
             <Box key={g.label} sx={{ mb: 0.75, '&:last-of-type': { mb: 0 } }}>
-              <Box sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(115,114,108,0.65)', textTransform: 'uppercase', mb: 0.5 }}>{g.label}</Box>
+              <Box sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(115,114,108,0.65)', textTransform: 'uppercase', mb: 0.5 }}>{g.label}</Box>
               <Box sx={{ display: 'flex', gap: '7px' }}>
                 {g.zones.map((zone) => {
                   const z = TILE_ZONES[zone];
diff --git a/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx b/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
index db8fab0e..cf0e7b4d 100644
--- a/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
+++ b/frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
@@ -140,7 +140,7 @@ const CanvasControls: React.FC<Props> = ({ zoom, actions, onFitToView, onTidy, o
               onClick={onFitToView}
               data-onboarding="canvas-fit-to-view"
               sx={{
-                fontSize: '0.72rem',
+                fontSize: '0.75rem',
                 fontWeight: 500,
                 color: 'rgba(255,255,255,0.78)',
                 minWidth: 38,
diff --git a/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx b/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx
index b961f40c..2445e758 100644
--- a/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx
+++ b/frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx
@@ -159,7 +159,7 @@ const CardSearchPalette: React.FC<Props> = ({
       >
         {/* Search input */}
         <Box sx={{ display: 'flex', alignItems: 'center', px: 2, py: 1.5, borderBottom: `1px solid ${c.border.subtle}` }}>
-          <SearchIcon sx={{ fontSize: '1.25rem', color: c.text.muted, mr: 1.5 }} />
+          <SearchIcon sx={{ fontSize: '1.125rem', color: c.text.muted, mr: 1.5 }} />
           <InputBase
             inputRef={inputRef}
             value={query}
@@ -167,7 +167,7 @@ const CardSearchPalette: React.FC<Props> = ({
             placeholder="Search cards..."
             fullWidth
             sx={{
-              fontSize: '0.9375rem',
+              fontSize: '0.875rem',
               fontFamily: c.font.sans,
               color: c.text.primary,
               '& input::placeholder': { color: c.text.muted, opacity: 1 },
diff --git a/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx b/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx
index b251eb8b..c514038f 100644
--- a/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx
+++ b/frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx
@@ -72,7 +72,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'left' ? shakingSx('left') : hintSx),
           left: 16, top: '50%', transform: 'translateY(-50%)',
         }}>
-          <ChevronLeftIcon sx={{ fontSize: '1.1rem' }} />
+          <ChevronLeftIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
       {showRight && (
@@ -80,7 +80,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'right' ? shakingSx('right') : hintSx),
           right: 16, top: '50%', transform: 'translateY(-50%)',
         }}>
-          <ChevronRightIcon sx={{ fontSize: '1.1rem' }} />
+          <ChevronRightIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
       {showUp && (
@@ -88,7 +88,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'up' ? shakingSx('up') : hintSx),
           top: 16, left: '50%', transform: 'translateX(-50%)',
         }}>
-          <KeyboardArrowUpIcon sx={{ fontSize: '1.1rem' }} />
+          <KeyboardArrowUpIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
       {showDown && (
@@ -96,7 +96,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
           ...(shakeDirection === 'down' ? shakingSx('down') : hintSx),
           bottom: 56, left: '50%', transform: 'translateX(-50%)',
         }}>
-          <KeyboardArrowDownIcon sx={{ fontSize: '1.1rem' }} />
+          <KeyboardArrowDownIcon sx={{ fontSize: '1.125rem' }} />
         </Box>
       )}
     </>
diff --git a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
index 9c942d4f..336b95d5 100644
--- a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
@@ -66,7 +66,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
         }}
       >
         <DashboardGlyph name={label} size={15} color="rgba(255,255,255,0.85)" />
-        <Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'rgba(255,255,255,0.92)' }}>
+        <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'rgba(255,255,255,0.92)' }}>
           {label}
         </Typography>
       </Box>
@@ -125,7 +125,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
                   </Box>
                   <Typography
                     sx={{
-                      fontSize: '0.82rem',
+                      fontSize: '0.8125rem',
                       fontWeight: done || active ? 500 : 400,
                       color: done || active ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.45)',
                       whiteSpace: 'nowrap',
@@ -162,7 +162,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
             boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
           }}
         >
-          <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.6)' }}>
+          <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.6)' }}>
             Thinking...
           </Typography>
         </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx b/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
index 8a21d6be..b1915553 100644
--- a/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
@@ -36,7 +36,7 @@ function LetterTile({ name }: { name: string }): React.ReactElement {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        fontSize: '1.3rem',
+        fontSize: '1.375rem',
         fontWeight: 700,
         color: 'rgba(255,255,255,0.85)',
       }}
@@ -123,8 +123,8 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mb: 1.5 }}>
-          <Typography sx={{ fontSize: '1.15rem' }}>🐙</Typography>
-          <Typography sx={{ fontSize: '1.05rem', fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>
+          <Typography sx={{ fontSize: '1.125rem' }}>🐙</Typography>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>
             Applications
           </Typography>
         </Box>
@@ -141,7 +141,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
                   borderRadius: 999,
                   flexShrink: 0,
                   cursor: 'pointer',
-                  fontSize: '0.72rem',
+                  fontSize: '0.75rem',
                   fontWeight: 500,
                   color: category === cat ? '#fff' : 'rgba(255,255,255,0.6)',
                   background: category === cat ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)',
@@ -161,7 +161,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
             </Box>
           )}
           {error && (
-            <Typography sx={{ color: 'rgba(255,255,255,0.55)', fontSize: '0.85rem', textAlign: 'center', py: 5 }}>
+            <Typography sx={{ color: 'rgba(255,255,255,0.55)', fontSize: '0.875rem', textAlign: 'center', py: 5 }}>
               Could not read /Applications.
             </Typography>
           )}
@@ -188,7 +188,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
                   ) : (
                     <LetterTile name={name} />
                   )}
-                  <Typography sx={{ fontSize: '0.66rem', color: 'rgba(255,255,255,0.82)', textAlign: 'center', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.82)', textAlign: 'center', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {name}
                   </Typography>
                 </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index 9dd9cb24..ab7c1a13 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -389,11 +389,11 @@ function DesktopDock({
             <Box component="img" src={previewImage} alt="" sx={{ width: '100%', display: 'block' }} />
           ) : (
             <Box sx={{ p: 1.25 }}>
-              <Typography sx={{ color: '#fff', fontSize: '0.78rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              <Typography sx={{ color: '#fff', fontSize: '0.75rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {hoveredEntry.label}
               </Typography>
               {hoveredEntry.snippet && (
-                <Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.7rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                <Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.6875rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                   {hoveredEntry.snippet}
                 </Typography>
               )}
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index 62cedf60..664bfb4b 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -103,7 +103,7 @@ function DesktopSpawnPill({
               }}
             >
               <ItemIcon sx={{ fontSize: 17, color: 'rgba(255,255,255,0.75)' }} />
-              <Typography sx={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.88)', fontWeight: 500 }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.88)', fontWeight: 500 }}>
                 {label}
               </Typography>
             </Box>
@@ -130,7 +130,7 @@ function DesktopSpawnPill({
       >
         <Typography
           sx={{
-            fontSize: '0.82rem',
+            fontSize: '0.8125rem',
             color: 'rgba(255,255,255,0.55)',
             fontWeight: 400,
             userSelect: 'none',
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index 17e044fb..d50be64b 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -40,7 +40,7 @@ function HelpPill(): React.ReactElement {
       }}
       onClick={() => dispatch(addBrowserCard({ url: HELP_URL }))}
     >
-      <Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
+      <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
         {recording ? 'Listening' : transcribing ? 'Transcribing' : preparing ? `Preparing ${pct}%` : 'Help'}
       </Typography>
       <Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
diff --git a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
index 4b0a675f..f19f866e 100644
--- a/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
@@ -95,7 +95,7 @@ function MinimizedStack({ browserCards, onRestore }: MinimizedStackProps): React
                 ) : (
                   <LanguageIcon sx={{ fontSize: 20, color: '#8a8494' }} />
                 )}
-                <Typography sx={{ fontSize: '0.62rem', color: '#3c3744', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
+                <Typography sx={{ fontSize: '0.625rem', color: '#3c3744', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
                   {activeTab?.title || 'Browser'}
                 </Typography>
               </Box>
diff --git a/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx b/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx
index b3898b6c..1fd61b8d 100644
--- a/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx
+++ b/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx
@@ -159,7 +159,7 @@ const DashboardSelection: React.FC = () => {
             <Typography variant="h4" sx={{ fontWeight: 700, color: c.text.primary }}>
               Dashboards
             </Typography>
-            <Typography sx={{ color: c.text.tertiary, fontSize: '0.9rem', mt: 0.5 }}>
+            <Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem', mt: 0.5 }}>
               Monitor and manage your agents from a single workspace.
             </Typography>
           </Box>
@@ -212,10 +212,10 @@ const DashboardSelection: React.FC = () => {
           </Box>
         ) : dashboards.length === 0 ? (
           <Box sx={{ textAlign: 'center', py: 10, color: c.text.muted }}>
-            <Typography sx={{ fontSize: '1.1rem', mb: 1 }}>
+            <Typography sx={{ fontSize: '1.125rem', mb: 1 }}>
               {search ? 'No dashboards match your search' : 'No dashboards yet'}
             </Typography>
-            <Typography sx={{ fontSize: '0.85rem', color: c.text.tertiary }}>
+            <Typography sx={{ fontSize: '0.875rem', color: c.text.tertiary }}>
               {search ? 'Try a different search term' : 'Create your first dashboard to get started'}
             </Typography>
           </Box>
@@ -320,7 +320,7 @@ const DashboardSelection: React.FC = () => {
                       onClick={(e) => e.stopPropagation()}
                       sx={{
                         '& .MuiOutlinedInput-root': {
-                          fontSize: '0.95rem',
+                          fontSize: '1rem',
                           fontWeight: 600,
                         },
                       }}
@@ -328,7 +328,7 @@ const DashboardSelection: React.FC = () => {
                   ) : (
                     <Typography
                       sx={{
-                        fontSize: '0.95rem',
+                        fontSize: '1rem',
                         fontWeight: 600,
                         color: c.text.primary,
                         overflow: 'hidden',
diff --git a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx b/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
index a012c273..e2515b97 100644
--- a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
+++ b/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
@@ -40,7 +40,7 @@ const SettingsHeader: React.FC<{
           '& .MuiTab-root': {
             minHeight: 30,
             textTransform: 'none',
-            fontSize: '0.85rem',
+            fontSize: '0.875rem',
             fontWeight: 500,
             color: c.text.muted,
             px: 1.75,
diff --git a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
index 1186b0d4..70a742ef 100644
--- a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
@@ -87,8 +87,8 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
     borderRadius: 2.5,
     maxWidth: 360,
   };
-  const titleSx = { color: c.text.primary, fontSize: '0.95rem', fontWeight: 600, mb: 1 };
-  const bodySx = { color: c.text.secondary, fontSize: '0.8rem', lineHeight: 1.5, mb: 2 };
+  const titleSx = { color: c.text.primary, fontSize: '1rem', fontWeight: 600, mb: 1 };
+  const bodySx = { color: c.text.secondary, fontSize: '0.8125rem', lineHeight: 1.5, mb: 2 };
   const errSx = { color: c.status.error, fontSize: '0.75rem', mb: 1.5 };
   const cancelSx = { color: c.text.secondary, textTransform: 'none', fontWeight: 500 };
   const actionRowSx = { display: 'flex', justifyContent: 'flex-end', gap: 1 };
@@ -98,7 +98,7 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
     color: c.text.secondary,
     borderColor: c.border.medium,
     textTransform: 'none' as const,
-    fontSize: '0.8rem',
+    fontSize: '0.8125rem',
     whiteSpace: 'nowrap' as const,
     '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
   };
@@ -180,7 +180,7 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
             size="small"
             autoFocus
             disabled={busy}
-            sx={{ mb: 2, '& .MuiOutlinedInput-root': { fontSize: '0.8rem' } }}
+            sx={{ mb: 2, '& .MuiOutlinedInput-root': { fontSize: '0.8125rem' } }}
           />
           {err && <Typography sx={errSx}>{err}</Typography>}
           <Box sx={actionRowSx}>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
index 42b4af45..b731ce06 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
@@ -123,7 +123,7 @@ const GeneralAdvanced: React.FC<{
             color: c.text.secondary,
             borderColor: c.border.medium,
             textTransform: 'none',
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             whiteSpace: 'nowrap',
             '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
           }}
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
index d02e9658..9e8b0ef7 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
@@ -72,7 +72,7 @@ const GeneralAgentDefaults: React.FC<{
           sx={{
             '& .MuiOutlinedInput-root': {
               fontFamily: c.font.mono,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               lineHeight: 1.6,
               color: c.text.secondary,
             },
@@ -110,7 +110,7 @@ const GeneralAgentDefaults: React.FC<{
               textTransform: 'none',
               whiteSpace: 'nowrap',
               minWidth: 'auto',
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
             }}
           >
@@ -128,7 +128,7 @@ const GeneralAgentDefaults: React.FC<{
           <Select
             value={form.default_model}
             onChange={(e) => setForm({ ...form, default_model: e.target.value })}
-            sx={{ fontSize: '0.85rem' }}
+            sx={{ fontSize: '0.875rem' }}
             MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
             renderValue={(val) => {
               const m = modelOptions.flat.find((x) => x.value === val);
@@ -136,7 +136,7 @@ const GeneralAgentDefaults: React.FC<{
               return (
                 <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75 }}>
                   <span>{m.label}</span>
-                  <Typography component="span" sx={{ fontSize: '0.65rem', color: c.text.ghost }}>
+                  <Typography component="span" sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
                     · {m.provider}
                   </Typography>
                 </Box>
@@ -171,7 +171,7 @@ const GeneralAgentDefaults: React.FC<{
                     />
                     <Typography
                       sx={{
-                        fontSize: '0.68rem',
+                        fontSize: '0.6875rem',
                         fontWeight: 700,
                         letterSpacing: '0.08em',
                         textTransform: 'uppercase',
@@ -190,7 +190,7 @@ const GeneralAgentDefaults: React.FC<{
                   </Box>
                 </ListSubheader>,
                 ...models.map((m) => (
-                  <MenuItem key={m.value} value={m.value} sx={{ fontSize: '0.85rem', pl: 3 }}>
+                  <MenuItem key={m.value} value={m.value} sx={{ fontSize: '0.875rem', pl: 3 }}>
                     {m.label}
                   </MenuItem>
                 )),
@@ -209,7 +209,7 @@ const GeneralAgentDefaults: React.FC<{
           <Select
             value={form.default_mode}
             onChange={(e) => setForm({ ...form, default_mode: e.target.value })}
-            sx={{ fontSize: '0.85rem' }}
+            sx={{ fontSize: '0.875rem' }}
             MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
           >
             {modesList.map((m) => (
@@ -228,7 +228,7 @@ const GeneralAgentDefaults: React.FC<{
           <Select
             value={form.default_thinking_level}
             onChange={(e) => setForm({ ...form, default_thinking_level: e.target.value as AppSettings['default_thinking_level'] })}
-            sx={{ fontSize: '0.85rem' }}
+            sx={{ fontSize: '0.875rem' }}
             MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
           >
             <MenuItem value="auto">Auto</MenuItem>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 8452d34c..fe817599 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -48,7 +48,7 @@ const GeneralInterface: React.FC<{
               px: 2,
               py: 0.5,
               gap: 0.5,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&.Mui-selected': {
                 bgcolor: `${c.accent.primary}15`,
                 color: c.accent.primary,
@@ -84,7 +84,7 @@ const GeneralInterface: React.FC<{
               textTransform: 'none',
               px: 1.75,
               py: 0.5,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&.Mui-selected': {
                 bgcolor: `${c.accent.primary}15`,
                 color: c.accent.primary,
@@ -118,7 +118,7 @@ const GeneralInterface: React.FC<{
               textTransform: 'none',
               px: 1.75,
               py: 0.5,
-              fontSize: '0.8rem',
+              fontSize: '0.8125rem',
               '&.Mui-selected': {
                 bgcolor: `${c.accent.primary}15`,
                 color: c.accent.primary,
@@ -167,7 +167,7 @@ const GeneralInterface: React.FC<{
             ]}
             sx={{
               color: c.accent.primary,
-              '& .MuiSlider-markLabel': { color: c.text.tertiary, fontSize: '0.7rem' },
+              '& .MuiSlider-markLabel': { color: c.text.tertiary, fontSize: '0.6875rem' },
               '& .MuiSlider-valueLabel': { bgcolor: c.accent.primary },
             }}
           />
@@ -212,11 +212,11 @@ const GeneralInterface: React.FC<{
         >
           <KeyboardIcon sx={{ fontSize: 16, color: recordingShortcut ? c.accent.primary : c.text.tertiary }} />
           {recordingShortcut ? (
-            <Typography sx={{ fontSize: '0.8rem', color: c.accent.primary, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.accent.primary, fontWeight: 500 }}>
               Press shortcut…
             </Typography>
           ) : (
-            <Typography sx={{ fontSize: '0.8rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
               {form.new_agent_shortcut
                 .split('+')
                 .map((p) => {
diff --git a/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx b/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx
index 13783a8f..a2ca42fb 100644
--- a/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/SoftwareUpdateRow.tsx
@@ -87,7 +87,7 @@ const SoftwareUpdateRow: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
                 color: c.text.secondary,
                 borderColor: c.border.medium,
                 textTransform: 'none',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 whiteSpace: 'nowrap',
                 '&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
               }}
@@ -105,7 +105,7 @@ const SoftwareUpdateRow: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
                 color: c.accent.primary,
                 borderColor: c.accent.primary,
                 textTransform: 'none',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 whiteSpace: 'nowrap',
                 '&:hover': { bgcolor: `${c.accent.primary}10` },
               }}
@@ -127,7 +127,7 @@ const SoftwareUpdateRow: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
                 '&:hover': { bgcolor: c.accent.pressed },
                 '&.Mui-disabled': { bgcolor: c.accent.primary, color: '#fff', opacity: 0.7 },
                 textTransform: 'none',
-                fontSize: '0.8rem',
+                fontSize: '0.8125rem',
                 whiteSpace: 'nowrap',
                 borderRadius: 1.5,
               }}
diff --git a/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx b/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx
index c119116a..6568fc72 100644
--- a/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/models/ApiKeyCard.tsx
@@ -44,7 +44,7 @@ const ApiKeyCard: React.FC<{
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <Typography sx={labelSx}>{config.label}</Typography>
         {value ? (
-          <Typography sx={{ fontSize: '0.6rem', fontWeight: 600, color: c.status.success, bgcolor: `${c.status.success}15`, px: 0.75, py: 0.15, borderRadius: '3px' }}>CONNECTED</Typography>
+          <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: c.status.success, bgcolor: `${c.status.success}15`, px: 0.75, py: 0.15, borderRadius: '3px' }}>CONNECTED</Typography>
         ) : null}
       </Box>
       <Typography sx={{ ...descSx, mb: 1 }}>{config.desc}</Typography>
@@ -72,7 +72,7 @@ const ApiKeyCard: React.FC<{
           href={config.href}
           target="_blank"
           rel="noopener"
-          sx={{ color: c.accent.primary, fontSize: '0.72rem', whiteSpace: 'nowrap', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 0.3, '&:hover': { textDecoration: 'underline' } }}
+          sx={{ color: c.accent.primary, fontSize: '0.75rem', whiteSpace: 'nowrap', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 0.3, '&:hover': { textDecoration: 'underline' } }}
         >
           Get key <OpenInNewIcon sx={{ fontSize: 11 }} />
         </Typography>
diff --git a/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx b/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx
index 3463d5e3..95bdd292 100644
--- a/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx
+++ b/frontend/src/app/pages/Settings/sections/models/CustomProvidersEditor.tsx
@@ -35,7 +35,7 @@ const CustomProvidersEditor: React.FC<{
           const allReady = readyCount === list.length;
           return (
             <Typography sx={{
-              fontSize: '0.6rem',
+              fontSize: '0.625rem',
               fontWeight: 600,
               color: allReady ? c.status.success : c.status.warning,
               bgcolor: allReady ? `${c.status.success}15` : `${c.status.warning}1F`,
@@ -105,7 +105,7 @@ const CustomProvidersEditor: React.FC<{
             >
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: -0.25 }}>
                 <Typography sx={{
-                  fontSize: '0.62rem',
+                  fontSize: '0.625rem',
                   fontWeight: 700,
                   letterSpacing: '0.05em',
                   textTransform: 'uppercase' as const,
@@ -147,7 +147,7 @@ const CustomProvidersEditor: React.FC<{
                   required
                   error={dupeNameWithEarlier}
                   helperText={dupeNameWithEarlier ? 'Name must be unique' : undefined}
-                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.72rem', color: c.text.tertiary } }}
+                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.75rem', color: c.text.tertiary } }}
                   sx={fieldSx}
                 />
                 <TextField
@@ -158,7 +158,7 @@ const CustomProvidersEditor: React.FC<{
                   placeholder="https://ollama.com/v1"
                   label="Base URL"
                   required
-                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.72rem', color: c.text.tertiary } }}
+                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.75rem', color: c.text.tertiary } }}
                   sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono } }}
                 />
                 <TextField
@@ -169,7 +169,7 @@ const CustomProvidersEditor: React.FC<{
                   fullWidth
                   placeholder="Leave blank for local servers (LM Studio, Ollama, ...)"
                   label="API Key (optional)"
-                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.72rem', color: c.text.tertiary } }}
+                  InputLabelProps={{ shrink: true, sx: { fontSize: '0.75rem', color: c.text.tertiary } }}
                   sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono } }}
                   InputProps={{
                     endAdornment: (
@@ -184,11 +184,11 @@ const CustomProvidersEditor: React.FC<{
               </Box>
 
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mt: 0.25 }}>
-                <Typography sx={{ fontSize: '0.65rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase' as const, letterSpacing: '0.05em' }}>
+                <Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase' as const, letterSpacing: '0.05em' }}>
                   Models
                 </Typography>
                 {((cp.models || []).length === 0) ? (
-                  <Typography sx={{ fontSize: '0.7rem', color: c.text.muted, fontStyle: 'italic', px: 0.5 }}>
+                  <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted, fontStyle: 'italic', px: 0.5 }}>
                     No models yet, add the model IDs this endpoint serves.
                   </Typography>
                 ) : (
@@ -200,7 +200,7 @@ const CustomProvidersEditor: React.FC<{
                         size="small"
                         fullWidth
                         placeholder="e.g. gpt-oss:120b"
-                        sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono, fontSize: '0.78rem' } }}
+                        sx={{ ...fieldSx, '& .MuiOutlinedInput-root': { ...fieldSx['& .MuiOutlinedInput-root'], fontFamily: c.font.mono, fontSize: '0.75rem' } }}
                       />
                       <IconButton
                         onClick={() => removeModel(mIdx)}
@@ -224,7 +224,7 @@ const CustomProvidersEditor: React.FC<{
                     mt: 0.25,
                     textTransform: 'none',
                     color: c.accent.primary,
-                    fontSize: '0.72rem',
+                    fontSize: '0.75rem',
                     minWidth: 'auto',
                     px: 0.75,
                     py: 0.25,
@@ -254,7 +254,7 @@ const CustomProvidersEditor: React.FC<{
             color: c.text.primary,
             borderColor: c.border.medium,
             borderStyle: 'dashed',
-            fontSize: '0.78rem',
+            fontSize: '0.75rem',
             px: 1.5,
             py: 0.6,
             '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}08` },
diff --git a/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx b/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx
index 4707cd93..066eef37 100644
--- a/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx
+++ b/frontend/src/app/pages/Settings/sections/models/ModelsTab.tsx
@@ -22,7 +22,7 @@ const ModelsTab: React.FC<{
     <Box sx={{ display: 'flex', flexDirection: 'column', pt: 2.5, pb: 1, gap: 2.5, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
 
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
-        <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
+        <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
           Connect a Subscription
         </Typography>
 
@@ -41,7 +41,7 @@ const ModelsTab: React.FC<{
       </Box>
 
       <Box data-onboarding="settings-api-keys" sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
-        <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600, mt: 1 }}>
+        <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600, mt: 1 }}>
           Or Connect With API Keys
         </Typography>
 
diff --git a/frontend/src/app/pages/Settings/sections/settingsStyles.ts b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
index 42776755..be207670 100644
--- a/frontend/src/app/pages/Settings/sections/settingsStyles.ts
+++ b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
@@ -2,12 +2,12 @@
 export function makeSettingsStyles(c: any) {
   const fieldSx = {
     '& .MuiOutlinedInput-root': {
-      fontSize: '0.85rem',
+      fontSize: '0.875rem',
     },
   };
 
   const sectionSx = {
-    fontSize: '0.7rem',
+    fontSize: '0.6875rem',
     fontWeight: 600,
     letterSpacing: '0.06em',
     textTransform: 'uppercase' as const,
diff --git a/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx b/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx
index 034d0b83..57403f1a 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/AccountCard.tsx
@@ -60,8 +60,8 @@ const AccountCard: React.FC = () => {
   if (!userId && !hasBearer) {
     return (
       <Box sx={{ p: 2, mb: 2, borderRadius: `${c.radius.lg}px`, border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface }}>
-        <Typography sx={{ fontSize: '0.85rem', color: c.text.primary, mb: 0.5 }}>Not signed in</Typography>
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mb: 1.25 }}>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, mb: 0.5 }}>Not signed in</Typography>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 1.25 }}>
           Sign in to sync settings across devices and back up your data.
         </Typography>
         <Button
@@ -70,7 +70,7 @@ const AccountCard: React.FC = () => {
           onClick={() => setSignInOpen(true)}
           sx={{
             textTransform: 'none',
-            fontSize: '0.8rem',
+            fontSize: '0.8125rem',
             borderColor: c.border.medium,
             color: c.text.primary,
             '&:hover': { borderColor: c.accent.primary, color: c.accent.primary, bgcolor: 'transparent' },
@@ -88,14 +88,14 @@ const AccountCard: React.FC = () => {
     <Box sx={{ p: 2, mb: 2, borderRadius: `${c.radius.lg}px`, border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface }}>
       <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
         <Box sx={{ minWidth: 0, flex: 1 }}>
-          <Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {userEmail || 'Signed in'}
           </Typography>
           {methodLabel && (
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, mt: 0.25 }}>{methodLabel}</Typography>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.25 }}>{methodLabel}</Typography>
           )}
           {!userId && hasBearer && (
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, mt: 0.25 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.25 }}>
               Subscription connected. Sign in to also link this device to your account.
             </Typography>
           )}
diff --git a/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx b/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx
index e026f469..eaf583ec 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/OpenSwarmProCard.tsx
@@ -139,16 +139,16 @@ const OpenSwarmProCard: React.FC = () => {
               <Box sx={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0, bgcolor: c.border.medium }} />
               <Box sx={{ minWidth: 0 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.7 }}>
-                  <Typography sx={{ fontSize: '0.78rem', fontWeight: 600, color: c.text.primary }}>
+                  <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.primary }}>
                     OpenSwarm Pro
                   </Typography>
                   <Box sx={{ px: 0.7, py: 0.15, borderRadius: 999, bgcolor: `${c.accent.primary}12` }}>
-                    <Typography sx={{ fontSize: '0.58rem', color: c.accent.primary, fontWeight: 600, letterSpacing: '0.03em' }}>
+                    <Typography sx={{ fontSize: '0.625rem', color: c.accent.primary, fontWeight: 600, letterSpacing: '0.03em' }}>
                       RECOMMENDED
                     </Typography>
                   </Box>
                 </Box>
-                <Typography noWrap sx={{ fontSize: '0.65rem', color: c.text.muted }}>
+                <Typography noWrap sx={{ fontSize: '0.625rem', color: c.text.muted }}>
                   {copy.desc}
                 </Typography>
               </Box>
@@ -158,7 +158,7 @@ const OpenSwarmProCard: React.FC = () => {
               variant="contained"
               size="small"
               sx={{
-                textTransform: 'none', fontSize: '0.7rem', minWidth: 70,
+                textTransform: 'none', fontSize: '0.6875rem', minWidth: 70,
                 borderRadius: `${c.radius.md}px`,
                 bgcolor: c.accent.primary, boxShadow: 'none',
                 '&:hover': { bgcolor: c.accent.hover, boxShadow: 'none' },
@@ -218,7 +218,7 @@ const OpenSwarmProCard: React.FC = () => {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>
             OpenSwarm Pro
           </Typography>
           <Box
@@ -236,7 +236,7 @@ const OpenSwarmProCard: React.FC = () => {
             px: 1.2, py: 0.6, mb: 1.2, borderRadius: `${c.radius.sm}px`,
             bgcolor: `${c.status.warning}15`, border: `1px solid ${c.status.warning}40`,
           }}>
-            <Typography sx={{ fontSize: '0.72rem', color: c.status.warning, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.status.warning, fontWeight: 500 }}>
               Subscription canceled. You still have access until {expiresLabel || 'the end of the period'}.
             </Typography>
           </Box>
@@ -245,10 +245,10 @@ const OpenSwarmProCard: React.FC = () => {
         {/* Usage bar; percentage only, no raw counts. */}
         <Box sx={{ mb: 1.2 }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.5 }}>
-            <Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, fontWeight: 500 }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, fontWeight: 500 }}>
               Current usage
             </Typography>
-            <Typography sx={{ fontSize: '0.72rem', color: c.text.muted }}>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>
               {pct}% used
             </Typography>
           </Box>
@@ -266,7 +266,7 @@ const OpenSwarmProCard: React.FC = () => {
             }}
           />
           {windowEndsAt && (
-            <Typography sx={{ fontSize: '0.68rem', color: c.text.muted, mt: 0.4 }}>
+            <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted, mt: 0.4 }}>
               Resets {(() => {
                 const diff = windowEndsAt - Date.now();
                 if (diff <= 0) return 'soon';
@@ -279,7 +279,7 @@ const OpenSwarmProCard: React.FC = () => {
           )}
         </Box>
         {expiresLabel && !isCanceled && (
-          <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, mb: 1.5 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 1.5 }}>
             Renews on {expiresLabel}
           </Typography>
         )}
@@ -289,7 +289,7 @@ const OpenSwarmProCard: React.FC = () => {
               onClick={() => setPickerOpen(true)}
               size="small"
               variant="contained"
-              sx={{ textTransform: 'none', fontSize: '0.78rem', borderRadius: `${c.radius.md}px` }}
+              sx={{ textTransform: 'none', fontSize: '0.75rem', borderRadius: `${c.radius.md}px` }}
             >
               Resubscribe
             </Button>
@@ -299,7 +299,7 @@ const OpenSwarmProCard: React.FC = () => {
             disabled={managing}
             size="small"
             variant={isCanceled ? 'outlined' : 'contained'}
-            sx={{ textTransform: 'none', fontSize: '0.78rem', borderRadius: `${c.radius.md}px` }}
+            sx={{ textTransform: 'none', fontSize: '0.75rem', borderRadius: `${c.radius.md}px` }}
           >
             {managing ? 'Opening…' : 'Manage in Stripe'}
           </Button>
diff --git a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx
index 0de01354..5aaba333 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCard.tsx
@@ -37,15 +37,15 @@ const SubscriptionCard: React.FC<{ provider: SubscriptionProvider; connected: bo
             } : {}),
           }} />
           <Box sx={{ minWidth: 0 }}>
-            <Typography sx={{ fontSize: '0.78rem', fontWeight: 600, color: c.text.primary }}>{provider.name}</Typography>
-            <Typography noWrap sx={{ fontSize: '0.65rem', color: connecting ? c.accent.primary : c.text.muted, transition: 'color 0.2s ease' }}>
+            <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.primary }}>{provider.name}</Typography>
+            <Typography noWrap sx={{ fontSize: '0.625rem', color: connecting ? c.accent.primary : c.text.muted, transition: 'color 0.2s ease' }}>
               {connecting ? 'Waiting for authorization...' : provider.desc}
             </Typography>
           </Box>
         </Box>
 
         {isPreview ? (
-          <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontStyle: 'italic', flexShrink: 0 }}>
+          <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontStyle: 'italic', flexShrink: 0 }}>
             Coming soon
           </Typography>
         ) : connected ? (
@@ -53,26 +53,26 @@ const SubscriptionCard: React.FC<{ provider: SubscriptionProvider; connected: bo
             <CircularProgress size={14} sx={{ color: c.text.ghost }} />
           ) : (
             <Box sx={{ position: 'relative', flexShrink: 0, minWidth: 72, height: 16 }}>
-              <Typography className="sub-rest" sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.68rem', fontWeight: 500, color: c.status.success, transition: 'opacity 0.18s ease' }}>
+              <Typography className="sub-rest" sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.6875rem', fontWeight: 500, color: c.status.success, transition: 'opacity 0.18s ease' }}>
                 Connected
               </Typography>
-              <Typography className="sub-undo" onClick={onDisconnect} sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.68rem', color: c.text.tertiary, cursor: 'pointer', opacity: 0, pointerEvents: 'none', transition: 'opacity 0.18s ease', '&:hover': { color: c.status.error } }}>
+              <Typography className="sub-undo" onClick={onDisconnect} sx={{ position: 'absolute', right: 0, top: 0, fontSize: '0.6875rem', color: c.text.tertiary, cursor: 'pointer', opacity: 0, pointerEvents: 'none', transition: 'opacity 0.18s ease', '&:hover': { color: c.status.error } }}>
                 Disconnect
               </Typography>
             </Box>
           )
         ) : connecting && userCode ? (
           <Box sx={{ textAlign: 'right', flexShrink: 0 }}>
-            <Typography sx={{ fontSize: '0.68rem', color: c.text.muted }}>Enter code:</Typography>
-            <Typography sx={{ fontSize: '0.85rem', fontWeight: 700, color: c.accent.primary, fontFamily: c.font.mono, letterSpacing: '0.1em' }}>{userCode}</Typography>
+            <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted }}>Enter code:</Typography>
+            <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.accent.primary, fontFamily: c.font.mono, letterSpacing: '0.1em' }}>{userCode}</Typography>
           </Box>
         ) : connecting ? (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8, flexShrink: 0 }}>
             <CircularProgress size={14} sx={{ color: c.accent.primary }} />
-            <Typography sx={{ fontSize: '0.68rem', color: c.accent.primary }}>Connecting...</Typography>
+            <Typography sx={{ fontSize: '0.6875rem', color: c.accent.primary }}>Connecting...</Typography>
           </Box>
         ) : (
-          <Button onClick={onConnect} variant="outlined" size="small" sx={{ textTransform: 'none', fontSize: '0.7rem', fontWeight: 600, color: c.text.primary, borderColor: c.border.medium, borderRadius: `${c.radius.sm}px`, minWidth: 72, flexShrink: 0, '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}0a` }, transition: 'all 0.2s ease' }}>
+          <Button onClick={onConnect} variant="outlined" size="small" sx={{ textTransform: 'none', fontSize: '0.6875rem', fontWeight: 600, color: c.text.primary, borderColor: c.border.medium, borderRadius: `${c.radius.sm}px`, minWidth: 72, flexShrink: 0, '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}0a` }, transition: 'all 0.2s ease' }}>
             Connect
           </Button>
         )}
diff --git a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx
index 200dc5e9..8e5e1976 100644
--- a/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx
+++ b/frontend/src/app/pages/Settings/sections/subscription/SubscriptionCards.tsx
@@ -169,10 +169,10 @@ const SubscriptionCards: React.FC = () => {
     return (
       <Box sx={{ p: 2, borderRadius: `${c.radius.md}px`, border: `1px solid ${c.border.subtle}`, textAlign: 'center' }}>
         <CircularProgress size={18} sx={{ color: c.text.ghost, mb: 1 }} />
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mb: 0.5 }}>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 0.5 }}>
           Starting subscription service...
         </Typography>
-        <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost }}>
+        <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
           This connects your existing AI subscriptions. If this doesn't load, make sure Node.js is installed.
         </Typography>
       </Box>
@@ -187,14 +187,14 @@ const SubscriptionCards: React.FC = () => {
           borderRadius: `${c.radius.md}px`, border: `1px solid ${c.border.subtle}`,
           bgcolor: c.bg.surface,
         }}>
-          <Typography sx={{ fontSize: '0.72rem', color: c.text.secondary, flex: 1, lineHeight: 1.4 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, flex: 1, lineHeight: 1.4 }}>
             {connectError}
           </Typography>
           <Box
             role="button"
             aria-label="Dismiss"
             onClick={() => setConnectError(null)}
-            sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '0.9rem', lineHeight: 1, px: 0.3, '&:hover': { color: c.text.secondary } }}
+            sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '0.875rem', lineHeight: 1, px: 0.3, '&:hover': { color: c.text.secondary } }}
           >
             ×
           </Box>
diff --git a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
index a82b57fb..15c8e0a8 100644
--- a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
+++ b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
@@ -94,9 +94,9 @@ const UsageStats: React.FC = () => {
     bgcolor: c.bg.elevated,
     border: `1px solid ${c.border.subtle}`,
   };
-  const labelSx = { fontSize: '0.58rem', fontWeight: 700, color: c.text.ghost, textTransform: 'uppercase' as const, letterSpacing: '0.06em', mb: 0.25 };
-  const valueSx = { fontSize: '1.05rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.2 };
-  const subSx = { fontSize: '0.62rem', color: c.text.tertiary, mt: 0.25 };
+  const labelSx = { fontSize: '0.625rem', fontWeight: 700, color: c.text.ghost, textTransform: 'uppercase' as const, letterSpacing: '0.06em', mb: 0.25 };
+  const valueSx = { fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.2 };
+  const subSx = { fontSize: '0.625rem', color: c.text.tertiary, mt: 0.25 };
 
   const modelEntries = Object.entries(stats.models_used || {}).sort((a: any, b: any) => b[1] - a[1]) as [string, number][];
   const providerEntries = Object.entries(stats.providers_used || {}).sort((a: any, b: any) => b[1] - a[1]) as [string, number][];
@@ -140,8 +140,8 @@ const UsageStats: React.FC = () => {
           bgcolor: `${c.accent.primary}0F`, border: `1px solid ${c.accent.primary}26`,
           display: 'flex', alignItems: 'center', gap: 1,
         }}>
-          <Typography sx={{ fontSize: '0.95rem', lineHeight: 1 }}>✨</Typography>
-          <Typography sx={{ fontSize: '0.74rem', color: c.text.secondary, fontStyle: 'italic', lineHeight: 1.4 }}>
+          <Typography sx={{ fontSize: '1rem', lineHeight: 1 }}>✨</Typography>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, fontStyle: 'italic', lineHeight: 1.4 }}>
             {savingsQuip}
           </Typography>
         </Box>
@@ -220,8 +220,8 @@ const UsageStats: React.FC = () => {
             return (
               <Box key={model} sx={{ mb: 1 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0 }}>
-                  <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, fontWeight: 500 }}>{model}</Typography>
-                  <Typography sx={{ fontSize: '0.68rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, fontWeight: 500 }}>{model}</Typography>
+                  <Typography sx={{ fontSize: '0.6875rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
                     {count} ({pct}%)
                   </Typography>
                 </Box>
@@ -239,8 +239,8 @@ const UsageStats: React.FC = () => {
             return (
               <Box key={tool} sx={{ mb: 1 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0 }}>
-                  <Typography sx={{ fontSize: '0.72rem', color: c.text.muted, fontWeight: 500 }}>{shortName}</Typography>
-                  <Typography sx={{ fontSize: '0.62rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, fontWeight: 500 }}>{shortName}</Typography>
+                  <Typography sx={{ fontSize: '0.625rem', color: c.text.tertiary, fontFamily: c.font.mono }}>
                     {count} call{count !== 1 ? 's' : ''} ({pct}%)
                   </Typography>
                 </Box>
diff --git a/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx b/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx
index d018ba60..22f6fc49 100644
--- a/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx
+++ b/frontend/src/app/pages/Skills/CommunitySkillsDialog.tsx
@@ -113,12 +113,12 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
       PaperProps={{ sx: { bgcolor: c.bg.secondary, borderRadius: `${c.radius.md}px` } }}>
       <DialogTitle sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 700, pb: 0.5 }}>
         Browse community skills
-        <Typography sx={{ fontSize: '0.78rem', color: c.text.tertiary, fontWeight: 400 }}>
+        <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, fontWeight: 400 }}>
           From the skills.sh registry. Community-published and unvetted; you'll see exactly what installs before it lands.
         </Typography>
       </DialogTitle>
       <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, minHeight: 360 }}>
-        {error && <Alert severity="error" sx={{ fontSize: '0.8rem' }}>{error}</Alert>}
+        {error && <Alert severity="error" sx={{ fontSize: '0.8125rem' }}>{error}</Alert>}
 
         {!selected && (
           <>
@@ -132,7 +132,7 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
             />
             {loading && <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}><CircularProgress size={22} /></Box>}
             {!loading && results.length === 0 && (
-              <Typography sx={{ fontSize: '0.82rem', color: c.text.tertiary, textAlign: 'center', py: 3 }}>
+              <Typography sx={{ fontSize: '0.8125rem', color: c.text.tertiary, textAlign: 'center', py: 3 }}>
                 {query.trim() ? 'No matching skills.' : 'Type to search the community registry.'}
               </Typography>
             )}
@@ -145,11 +145,11 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
                   '&:hover': { borderColor: c.accent.primary, bgcolor: `${c.accent.primary}08` },
                 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
-                  <Typography sx={{ fontSize: '0.86rem', fontWeight: 600, color: c.text.primary }}>{s.name}</Typography>
+                  <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>{s.name}</Typography>
                   <Chip label={`${s.installs.toLocaleString()} installs`} size="small"
-                    sx={{ height: 18, fontSize: '0.66rem', bgcolor: c.bg.elevated, color: c.text.tertiary }} />
+                    sx={{ height: 18, fontSize: '0.6875rem', bgcolor: c.bg.elevated, color: c.text.tertiary }} />
                 </Box>
-                <Typography sx={{ fontSize: '0.74rem', color: c.text.tertiary, fontFamily: c.font.mono }}>{s.source}</Typography>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, fontFamily: c.font.mono }}>{s.source}</Typography>
               </Box>
             ))}
           </>
@@ -158,46 +158,46 @@ const CommunitySkillsDialog: React.FC<Props> = ({ open, onClose, onInstalled })
         {selected && (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
             <Button onClick={() => { previewSeq.current++; setSelected(null); setDisclosure(null); }} size="small"
-              sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.text.tertiary, fontSize: '0.78rem' }}>
+              sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.text.tertiary, fontSize: '0.75rem' }}>
               ← Back to results
             </Button>
             {busy && !disclosure && <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}><CircularProgress size={22} /></Box>}
             {disclosure && (
               <>
-                <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary }}>{disclosure.name}</Typography>
+                <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>{disclosure.name}</Typography>
                 {disclosure.description && (
-                  <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary }}>{disclosure.description}</Typography>
+                  <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary }}>{disclosure.description}</Typography>
                 )}
                 <Box
                   component="a" href={disclosure.repo_url} target="_blank" rel="noreferrer"
-                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, fontSize: '0.76rem', color: c.accent.primary, textDecoration: 'none', fontFamily: c.font.mono }}>
+                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, fontSize: '0.75rem', color: c.accent.primary, textDecoration: 'none', fontFamily: c.font.mono }}>
                   {selected.source} <OpenInNewIcon sx={{ fontSize: 13 }} />
                 </Box>
 
                 {/* The real risk for an agent platform: SKILL.md is injected as instructions the
                     agent follows, with its full tool surface. Say that plainly, not just "scripts". */}
-                <Alert severity="info" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.78rem', py: 0 }}>
+                <Alert severity="info" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.75rem', py: 0 }}>
                   This is an unvetted community skill. Its SKILL.md becomes instructions your agent will follow, and it can use your agent's tools (files, browser, settings). Only install from a source you trust, read it below first.
                 </Alert>
 
                 {disclosure.secret_findings.length > 0 && (
-                  <Alert severity="error" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.78rem', py: 0 }}>
+                  <Alert severity="error" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.75rem', py: 0 }}>
                     {disclosure.secret_findings.length} file{disclosure.secret_findings.length === 1 ? '' : 's'} contain secret-shaped text ({disclosure.secret_findings.slice(0, 3).join(', ')}{disclosure.secret_findings.length > 3 ? '…' : ''}). A trustworthy skill shouldn't ship credentials; treat this as a red flag.
                   </Alert>
                 )}
 
                 {disclosure.has_scripts && (
-                  <Alert severity="warning" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.78rem', py: 0 }}>
+                  <Alert severity="warning" icon={<WarningAmberIcon fontSize="small" />} sx={{ fontSize: '0.75rem', py: 0 }}>
                     Includes {disclosure.scripts.length} script file{disclosure.scripts.length === 1 ? '' : 's'} that can run code when an agent uses this skill. Installing only writes the files; nothing runs until an agent does, and that still goes through normal command approval.
                   </Alert>
                 )}
 
-                <Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, mt: 0.5 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, mt: 0.5 }}>
                   {disclosure.files.length} file{disclosure.files.length === 1 ? '' : 's'} will be installed:
                 </Typography>
                 <Box sx={{ maxHeight: 120, overflow: 'auto', border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.sm}px`, p: 1 }}>
                   {disclosure.files.map((f) => (
-                    <Typography key={f} sx={{ fontSize: '0.74rem', fontFamily: c.font.mono, color: disclosure.scripts.includes(f) ? c.status.warning : c.text.secondary }}>
+                    <Typography key={f} sx={{ fontSize: '0.75rem', fontFamily: c.font.mono, color: disclosure.scripts.includes(f) ? c.status.warning : c.text.secondary }}>
                       {disclosure.scripts.includes(f) ? '⚙ ' : ''}{f}
                     </Typography>
                   ))}
diff --git a/frontend/src/app/pages/Skills/SkillBuilderChat.tsx b/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
index f528c818..ff5599c9 100644
--- a/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
+++ b/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
@@ -357,7 +357,7 @@ const SkillBuilderChat: React.FC<SkillBuilderChatProps> = ({ onSkillPreview, onS
         }}
       >
         <AutoFixHighIcon sx={{ fontSize: 18, color: c.accent.primary }} />
-        <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
           Skill Builder
         </Typography>
 
@@ -372,7 +372,7 @@ const SkillBuilderChat: React.FC<SkillBuilderChatProps> = ({ onSkillPreview, onS
               bgcolor: c.accent.primary,
               '&:hover': { bgcolor: c.accent.pressed },
               textTransform: 'none',
-              fontSize: '0.72rem',
+              fontSize: '0.75rem',
               fontWeight: 600,
               px: 1.5,
               py: 0.25,
@@ -421,7 +421,7 @@ const SkillBuilderChat: React.FC<SkillBuilderChatProps> = ({ onSkillPreview, onS
           />
         ) : (
           <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.85rem' }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.875rem' }}>
               Initializing skill builder...
             </Typography>
           </Box>
diff --git a/frontend/src/app/pages/Skills/Skills.tsx b/frontend/src/app/pages/Skills/Skills.tsx
index 8399a2a9..15758616 100644
--- a/frontend/src/app/pages/Skills/Skills.tsx
+++ b/frontend/src/app/pages/Skills/Skills.tsx
@@ -253,7 +253,7 @@ const Skills: React.FC = () => {
           sx={{
             '& .MuiToggleButton-root': {
               color: c.text.tertiary, border: `1px solid ${c.border.medium}`,
-              textTransform: 'none', fontSize: '0.74rem', py: 0.25, px: 1.2, lineHeight: 1.4,
+              textTransform: 'none', fontSize: '0.75rem', py: 0.25, px: 1.2, lineHeight: 1.4,
               '&.Mui-selected': { bgcolor: c.bg.secondary, color: c.text.primary, borderColor: c.border.strong },
               '&:hover': { bgcolor: 'rgba(0,0,0,0.03)' },
             },
@@ -274,7 +274,7 @@ const Skills: React.FC = () => {
           '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 3 },
         }}>
           <Typography component="pre" sx={{
-            color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono,
+            color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono,
             whiteSpace: 'pre-wrap', wordBreak: 'break-word', m: 0, lineHeight: 1.65,
           }}>
             {content}
@@ -288,12 +288,12 @@ const Skills: React.FC = () => {
           overflow: 'auto',
           '&::-webkit-scrollbar': { width: 5 },
           '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 3 },
-          '& h1': { fontSize: '1.3rem', fontWeight: 700, color: c.text.primary, mt: 0, mb: 1.5, fontFamily: c.font.sans },
-          '& h2': { fontSize: '1.1rem', fontWeight: 600, color: c.text.primary, mt: 2, mb: 1, fontFamily: c.font.sans },
-          '& h3': { fontSize: '0.95rem', fontWeight: 600, color: c.text.primary, mt: 1.5, mb: 0.75, fontFamily: c.font.sans },
-          '& p': { fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.7, mb: 1.5 },
-          '& ul, & ol': { pl: 2.5, mb: 1.5, '& li': { fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.7, mb: 0.5 } },
-          '& code': { fontFamily: c.font.mono, fontSize: '0.82rem', bgcolor: 'rgba(0,0,0,0.04)', px: 0.5, py: 0.15, borderRadius: `${c.radius.xs}px` },
+          '& h1': { fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, mt: 0, mb: 1.5, fontFamily: c.font.sans },
+          '& h2': { fontSize: '1.125rem', fontWeight: 600, color: c.text.primary, mt: 2, mb: 1, fontFamily: c.font.sans },
+          '& h3': { fontSize: '1rem', fontWeight: 600, color: c.text.primary, mt: 1.5, mb: 0.75, fontFamily: c.font.sans },
+          '& p': { fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.7, mb: 1.5 },
+          '& ul, & ol': { pl: 2.5, mb: 1.5, '& li': { fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.7, mb: 0.5 } },
+          '& code': { fontFamily: c.font.mono, fontSize: '0.8125rem', bgcolor: 'rgba(0,0,0,0.04)', px: 0.5, py: 0.15, borderRadius: `${c.radius.xs}px` },
           '& pre': { bgcolor: c.bg.secondary, borderRadius: `${c.radius.sm}px`, p: 2, mb: 1.5, overflow: 'auto',
             '& code': { bgcolor: 'transparent', color: c.text.secondary, px: 0, py: 0 },
           },
@@ -329,7 +329,7 @@ const Skills: React.FC = () => {
       {icon ?? <DescriptionIcon sx={{ fontSize: 15, color: c.text.tertiary, flexShrink: 0 }} />}
       <Typography
         sx={{
-          fontSize: '0.82rem', color: selected ? c.text.primary : c.text.secondary,
+          fontSize: '0.8125rem', color: selected ? c.text.primary : c.text.secondary,
           fontWeight: selected ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
         }}
       >
@@ -348,7 +348,7 @@ const Skills: React.FC = () => {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 2, pt: 2, pb: 1 }}>
-          <Typography sx={{ fontSize: '0.92rem', fontWeight: 700, color: c.text.primary }}>Skills</Typography>
+          <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.text.primary }}>Skills</Typography>
           <Box sx={{ display: 'flex', gap: 0.25 }}>
             <Tooltip title="Import .swarm">
               <IconButton
@@ -392,7 +392,7 @@ const Skills: React.FC = () => {
             fullWidth
             sx={{
               textTransform: 'none',
-              fontSize: '0.86rem',
+              fontSize: '0.875rem',
               fontWeight: 500,
               color: c.accent.primary,
               justifyContent: 'center',
@@ -426,7 +426,7 @@ const Skills: React.FC = () => {
               }}
               sx={{
                 '& .MuiOutlinedInput-root': {
-                  bgcolor: c.bg.surface, borderRadius: `${c.radius.sm}px`, fontSize: '0.82rem',
+                  bgcolor: c.bg.surface, borderRadius: `${c.radius.sm}px`, fontSize: '0.8125rem',
                   '& fieldset': { borderColor: c.border.medium },
                 },
               }}
@@ -454,10 +454,10 @@ const Skills: React.FC = () => {
                 {collapsedCats['__local']
                   ? <KeyboardArrowRightIcon sx={{ fontSize: 16, color: c.text.ghost }} />
                   : <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost }} />}
-                <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                   My Skills
                 </Typography>
-                <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost, ml: 0.5 }}>({filteredLocal.length})</Typography>
+                <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, ml: 0.5 }}>({filteredLocal.length})</Typography>
               </Box>
               <Collapse in={!collapsedCats['__local']} timeout={0} unmountOnExit>
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25, mt: 0.25 }}>
@@ -500,10 +500,10 @@ const Skills: React.FC = () => {
                     {isCollapsed
                       ? <KeyboardArrowRightIcon sx={{ fontSize: 16, color: c.text.ghost }} />
                       : <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost }} />}
-                    <Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                    <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                       {cat}
                     </Typography>
-                    <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost, ml: 0.5 }}>({group.length})</Typography>
+                    <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, ml: 0.5 }}>({group.length})</Typography>
                   </Box>
                   <Collapse in={!isCollapsed} timeout={0} unmountOnExit>
                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25, mt: 0.25 }}>
@@ -532,7 +532,7 @@ const Skills: React.FC = () => {
           <Box sx={{ p: 4, pb: 3, maxWidth: 1100, display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5, flexShrink: 0 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                <Typography sx={{ fontSize: '1.4rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
+                <Typography sx={{ fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
                   {builderPreview.name || 'Untitled Skill'}
                 </Typography>
                 <Chip
@@ -542,7 +542,7 @@ const Skills: React.FC = () => {
                     bgcolor: `${c.accent.primary}15`,
                     color: c.accent.primary,
                     fontWeight: 600,
-                    fontSize: '0.68rem',
+                    fontSize: '0.6875rem',
                     height: 22,
                   }}
                 />
@@ -557,22 +557,22 @@ const Skills: React.FC = () => {
                   size="small"
                   sx={{
                     bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary,
-                    fontWeight: 500, fontSize: '0.78rem', height: 26,
+                    fontWeight: 500, fontSize: '0.75rem', height: 26,
                   }}
                 />
               </Box>
             )}
 
             <Box sx={{ mb: 1, flexShrink: 0 }}>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>
                 Generated by <strong style={{ color: c.accent.primary, fontWeight: 600 }}>Skill Builder</strong>
               </Typography>
             </Box>
 
             {builderPreview.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
-                <Typography sx={{ fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.6 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
+                <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {builderPreview.description}
                 </Typography>
               </Box>
@@ -583,7 +583,7 @@ const Skills: React.FC = () => {
         ) : !selection ? (
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', color: c.text.ghost, gap: 2 }}>
             <DescriptionIcon sx={{ fontSize: 48, opacity: 0.3 }} />
-            <Typography sx={{ fontSize: '0.9rem' }}>Select a skill to view its details</Typography>
+            <Typography sx={{ fontSize: '0.875rem' }}>Select a skill to view its details</Typography>
           </Box>
         ) : selection.type === 'registry' ? (
           regDetailLoading && !selectedReg ? (
@@ -593,7 +593,7 @@ const Skills: React.FC = () => {
           ) : selectedReg ? (
             <Box sx={{ p: 4, pb: 3, maxWidth: 1100, display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '1.4rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
+                <Typography sx={{ fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
                   {selectedReg.name}
                 </Typography>
                 <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
@@ -606,7 +606,7 @@ const Skills: React.FC = () => {
                     sx={{
                       bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed },
                       textTransform: 'none', borderRadius: `${c.radius.md}px`, px: 2, py: 0.5,
-                      fontSize: '0.8rem', fontWeight: 600, boxShadow: 'none',
+                      fontSize: '0.8125rem', fontWeight: 600, boxShadow: 'none',
                     }}
                   >
                     Install
@@ -620,7 +620,7 @@ const Skills: React.FC = () => {
                       borderColor: c.border.strong, color: c.text.secondary,
                       '&:hover': { borderColor: c.accent.primary, color: c.accent.primary, bgcolor: 'rgba(174,86,48,0.04)' },
                       textTransform: 'none', borderRadius: `${c.radius.md}px`, px: 2, py: 0.5,
-                      fontSize: '0.8rem', fontWeight: 600,
+                      fontSize: '0.8125rem', fontWeight: 600,
                     }}
                   >
                     Edit & Install
@@ -641,12 +641,12 @@ const Skills: React.FC = () => {
               </Box>
 
               <Box sx={{ mb: 1, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>Anthropic</strong></Typography>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>Anthropic</strong></Typography>
               </Box>
 
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
-                <Typography sx={{ fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.6 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
+                <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedReg.description}
                 </Typography>
               </Box>
@@ -658,7 +658,7 @@ const Skills: React.FC = () => {
           <Box sx={{ p: 4, pb: 3, maxWidth: 1100, display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5, flexShrink: 0 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <Typography sx={{ fontSize: '1.4rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
+                <Typography sx={{ fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, fontFamily: c.font.sans }}>
                   {selectedLocal.name}
                 </Typography>
                 {selectedLocal.built_in && (
@@ -669,7 +669,7 @@ const Skills: React.FC = () => {
                       bgcolor: 'rgba(174,86,48,0.12)',
                       color: c.accent.primary,
                       fontWeight: 600,
-                      fontSize: '0.7rem',
+                      fontSize: '0.6875rem',
                       height: 20,
                     }}
                   />
@@ -678,7 +678,7 @@ const Skills: React.FC = () => {
                   <Chip
                     label="Update available"
                     size="small"
-                    sx={{ bgcolor: `${c.status.warning}22`, color: c.status.warning, fontWeight: 600, fontSize: '0.7rem', height: 20 }}
+                    sx={{ bgcolor: `${c.status.warning}22`, color: c.status.warning, fontWeight: 600, fontSize: '0.6875rem', height: 20 }}
                   />
                 )}
               </Box>
@@ -690,7 +690,7 @@ const Skills: React.FC = () => {
                     startIcon={<DownloadIcon sx={{ fontSize: 16 }} />}
                     disabled={updatingId === selectedLocal.id}
                     onClick={() => handleUpdate(selectedLocal)}
-                    sx={{ textTransform: 'none', fontSize: '0.78rem', py: 0.3, bgcolor: c.status.warning, '&:hover': { bgcolor: c.status.warning } }}
+                    sx={{ textTransform: 'none', fontSize: '0.75rem', py: 0.3, bgcolor: c.status.warning, '&:hover': { bgcolor: c.status.warning } }}
                   >
                     {updatingId === selectedLocal.id ? 'Updating...' : 'Update'}
                   </Button>
@@ -719,20 +719,20 @@ const Skills: React.FC = () => {
                   size="small"
                   sx={{
                     bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary,
-                    fontWeight: 500, fontSize: '0.78rem', height: 26,
+                    fontWeight: 500, fontSize: '0.75rem', height: 26,
                   }}
                 />
               </Box>
             )}
 
             <Box sx={{ mb: 1, flexShrink: 0 }}>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>You</strong></Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>Added by <strong style={{ color: c.text.secondary, fontWeight: 600 }}>You</strong></Typography>
             </Box>
 
             {selectedLocal.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
-                <Typography sx={{ fontSize: '0.88rem', color: c.text.secondary, lineHeight: 1.6 }}>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
+                <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedLocal.description}
                 </Typography>
               </Box>
@@ -791,7 +791,7 @@ const Skills: React.FC = () => {
             maxRows={24}
             sx={{
               '& .MuiOutlinedInput-root': {
-                bgcolor: c.bg.secondary, fontFamily: c.font.mono, fontSize: '0.85rem',
+                bgcolor: c.bg.secondary, fontFamily: c.font.mono, fontSize: '0.875rem',
               },
             }}
           />
diff --git a/frontend/src/app/pages/Tools/Tools.tsx b/frontend/src/app/pages/Tools/Tools.tsx
index ef2518b1..26e50281 100644
--- a/frontend/src/app/pages/Tools/Tools.tsx
+++ b/frontend/src/app/pages/Tools/Tools.tsx
@@ -108,7 +108,7 @@ const Tools: React.FC = () => {
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
         <Box>
           <Typography variant="h5" sx={{ color: c.text.primary, fontWeight: 700, mb: 0.5 }}>Tool Library</Typography>
-          <Typography sx={{ color: c.text.tertiary, fontSize: '0.9rem' }}>Define and manage custom tools for your Claude Code agents.</Typography>
+          <Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem' }}>Define and manage custom tools for your Claude Code agents.</Typography>
         </Box>
         <Box>
           <Button
@@ -126,11 +126,11 @@ const Tools: React.FC = () => {
             onClose={handleMenuClose}
             PaperProps={{ sx: { bgcolor: c.bg.surface, border: `1px solid ${c.border.subtle}`, borderRadius: 2, mt: 0.5, minWidth: 200 } }}
           >
-            <MenuItem onClick={a.openCreate} sx={{ color: c.text.primary, fontSize: '0.88rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
+            <MenuItem onClick={a.openCreate} sx={{ color: c.text.primary, fontSize: '0.875rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
               <BuildIcon sx={{ fontSize: 16, color: c.text.tertiary }} />
               Create Custom
             </MenuItem>
-            <MenuItem onClick={a.openRegistryBrowser} sx={{ color: c.text.primary, fontSize: '0.88rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
+            <MenuItem onClick={a.openRegistryBrowser} sx={{ color: c.text.primary, fontSize: '0.875rem', gap: 1.5, '&:hover': { bgcolor: c.bg.secondary } }}>
               <StorefrontIcon sx={{ fontSize: 16, color: c.text.tertiary }} />
               Browse MCP Registry
             </MenuItem>
@@ -145,8 +145,8 @@ const Tools: React.FC = () => {
         >
           {builtinSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
           <LockIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Built-in</Typography>
-          <Chip label={coreTools.length + deferredTools.length + browserTools.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Built-in</Typography>
+          <Chip label={coreTools.length + deferredTools.length + browserTools.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
         </Box>
         <Collapse in={builtinSectionOpen} timeout={0} unmountOnExit>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pl: 1 }}>
@@ -185,8 +185,8 @@ const Tools: React.FC = () => {
         <Box onClick={() => setCustomSectionOpen((v) => !v)} sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}>
           {customSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
           <BuildIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Connections</Typography>
-          <Chip label={tools.length + uninstalledIntegrations.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Connections</Typography>
+          <Chip label={tools.length + uninstalledIntegrations.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
         </Box>
         <Collapse in={customSectionOpen} timeout={0} unmountOnExit>
           {loading ? (
@@ -198,7 +198,7 @@ const Tools: React.FC = () => {
           ) : (tools.length === 0 && uninstalledIntegrations.length === 0) ? (
             <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', py: 6, color: c.text.ghost, gap: 1.5 }}>
               <BuildIcon sx={{ fontSize: 40, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.9rem' }}>No custom tools defined yet. Create one to get started.</Typography>
+              <Typography sx={{ fontSize: '0.875rem' }}>No custom tools defined yet. Create one to get started.</Typography>
             </Box>
           ) : (
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pl: 1 }}>
diff --git a/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx b/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx
index e727608f..e7ac8694 100644
--- a/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/AgentWorkflowsSection.tsx
@@ -34,8 +34,8 @@ const AgentWorkflowsSection: React.FC = () => {
       >
         {open ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
         <AccountTreeIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-        <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Workflows agents can run</Typography>
-        <Chip label={`${exposedCount}/${list.length}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+        <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Workflows agents can run</Typography>
+        <Chip label={`${exposedCount}/${list.length}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
       </Box>
       <Collapse in={open} timeout={0} unmountOnExit>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, pl: 1 }}>
@@ -45,9 +45,9 @@ const AgentWorkflowsSection: React.FC = () => {
           {list.map((w) => (
             <Box key={w.id} sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 0.5, px: 1, borderRadius: 1, border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface }}>
               <Box sx={{ flex: 1, minWidth: 0 }}>
-                <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.title || 'Untitled workflow'}</Typography>
+                <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.title || 'Untitled workflow'}</Typography>
                 {w.description && (
-                  <Typography sx={{ color: c.text.tertiary, fontSize: '0.72rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.description}</Typography>
+                  <Typography sx={{ color: c.text.tertiary, fontSize: '0.75rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{w.description}</Typography>
                 )}
               </Box>
               <Switch
diff --git a/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx b/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx
index 01308ef3..5e712b5c 100644
--- a/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx
+++ b/frontend/src/app/pages/Tools/cards/BrowserLoginConnect.tsx
@@ -79,7 +79,7 @@ const BrowserLoginConnect: React.FC<Props> = ({ ig, isDisabled }) => {
           label="Signed in"
           size="small"
           onClick={(e) => { e.stopPropagation(); check(); }}
-          sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.7rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, flexShrink: 0 }}
+          sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.6875rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, flexShrink: 0 }}
         />
       </Tooltip>
     );
@@ -94,7 +94,7 @@ const BrowserLoginConnect: React.FC<Props> = ({ ig, isDisabled }) => {
           size="small"
           variant="outlined"
           startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
-          sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+          sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
         >
           {ig.connectLabel || 'Sign in'}
         </Button>
diff --git a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
index 5fb2ce38..3e9c5c68 100644
--- a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
@@ -63,10 +63,10 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
               </Box>
               <Box sx={{ flex: 1, minWidth: 0, opacity: browserSectionEnabled ? 1 : 0.4, transition: 'opacity 0.2s' }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>Browser</Typography>
-                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
+                  <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>Browser</Typography>
+                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
                 </Box>
-                <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>Browser automation delegation and individual browser tools</Typography>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>Browser automation delegation and individual browser tools</Typography>
               </Box>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
                 <Switch
@@ -90,8 +90,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1.5, mb: 1 }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                   <SecurityIcon sx={{ fontSize: 14, color: c.text.muted }} />
-                  <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
-                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
+                  <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
+                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
                 </Box>
               </Box>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
@@ -109,8 +109,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                       >
                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                           <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-                          <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>Delegation</Typography>
-                          <Chip label={browserDelegationTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                          <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>Delegation</Typography>
+                          <Chip label={browserDelegationTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                         </Box>
                         <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                           <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinCategoryPermissionChange(browserDelegationTools.map((t) => t.name), 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: groupPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: groupPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
@@ -125,8 +125,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                             return (
                               <Box key={bt.name} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, '&:hover': { bgcolor: c.bg.secondary } }}>
                                 <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
-                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
+                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
+                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
                                 </Box>
                                 <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                                   <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinPermissionChange(bt.name, 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: toolPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: toolPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 14 }} /></IconButton></Tooltip>
@@ -156,8 +156,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                       >
                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                           <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-                          <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>Browser Tools</Typography>
-                          <Chip label={browserActionTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                          <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>Browser Tools</Typography>
+                          <Chip label={browserActionTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                         </Box>
                         <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                           <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinCategoryPermissionChange(browserActionTools.map((t) => t.name), 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: groupPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: groupPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
@@ -172,8 +172,8 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
                             return (
                               <Box key={bt.name} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, '&:hover': { bgcolor: c.bg.secondary } }}>
                                 <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
-                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
+                                  <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
+                                  {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{bt.description}</Typography>}
                                 </Box>
                                 <Box sx={{ display: 'flex', gap: 0.25 }} onClick={(e) => e.stopPropagation()}>
                                   <Tooltip title="Always allow"><IconButton size="small" onClick={() => handleBuiltinPermissionChange(bt.name, 'always_allow')} sx={{ p: 0.4, borderRadius: 1, bgcolor: toolPolicy === 'always_allow' ? `${c.status.success}20` : 'transparent', color: toolPolicy === 'always_allow' ? c.status.success : c.text.ghost, '&:hover': { bgcolor: `${c.status.success}15`, color: c.status.success } }}><CheckCircleIcon sx={{ fontSize: 14 }} /></IconButton></Tooltip>
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
index d6c7da39..ea28cb84 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
@@ -111,7 +111,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                         {ig && (
                           <Box sx={{
                             width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            bgcolor: `${ig.color}18`, fontSize: '1.1rem', fontWeight: 700, color: ig.color, flexShrink: 0,
+                            bgcolor: `${ig.color}18`, fontSize: '1.125rem', fontWeight: 700, color: ig.color, flexShrink: 0,
                             opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s',
                           }}>
                             {ig.icon}
@@ -119,23 +119,23 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                         )}
                         <Box sx={{ flex: 1, minWidth: 0, opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s' }}>
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
-                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>{tool.name}</Typography>
+                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{tool.name}</Typography>
                             {isMcp && <Chip icon={<ExtensionIcon sx={{ fontSize: 12 }} />} label={isStdio ? 'MCP · stdio' : 'MCP'} size="small" sx={{ bgcolor: `${c.status.warning}20`, color: c.status.warning, fontSize: '0.75rem', height: 24 }} />}
-                            {tool.command && <Chip icon={<TerminalIcon sx={{ fontSize: 12 }} />} label={`/${tool.command}`} size="small" sx={{ bgcolor: 'rgba(174,86,48,0.12)', color: c.accent.hover, fontSize: '0.72rem', height: 22 }} />}
+                            {tool.command && <Chip icon={<TerminalIcon sx={{ fontSize: 12 }} />} label={`/${tool.command}`} size="small" sx={{ bgcolor: 'rgba(174,86,48,0.12)', color: c.accent.hover, fontSize: '0.75rem', height: 22 }} />}
                             {tool.auth_status === 'connected' && !ig && (
-                              <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label={tool.connected_account_email ? `Connected · ${tool.connected_account_email}` : 'Connected'} size="small" sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.7rem', height: 20, '& .MuiChip-icon': { color: c.status.success } }} />
+                              <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label={tool.connected_account_email ? `Connected · ${tool.connected_account_email}` : 'Connected'} size="small" sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.6875rem', height: 20, '& .MuiChip-icon': { color: c.status.success } }} />
                             )}
                             {tool.auth_status === 'configured' && !ig?.credentialFields && (
-                              <Chip icon={<SettingsIcon sx={{ fontSize: 12 }} />} label="Configured" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.7rem', height: 20, '& .MuiChip-icon': { color: c.status.warning } }} />
+                              <Chip icon={<SettingsIcon sx={{ fontSize: 12 }} />} label="Configured" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.6875rem', height: 20, '& .MuiChip-icon': { color: c.status.warning } }} />
                             )}
                             {ig && totalToolCount > 0 && (
-                              <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: `${ig.color}15`, color: ig.color, fontSize: '0.7rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
+                              <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: `${ig.color}15`, color: ig.color, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
                             )}
                             {ig && (
-                              <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
+                              <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
                             )}
                           </Box>
-                          {tool.description && <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>{tool.description}</Typography>}
+                          {tool.description && <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{tool.description}</Typography>}
                         </Box>
                         <CustomToolConnect
                           tool={tool}
@@ -190,19 +190,19 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1.5, mb: 1 }}>
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                               <SecurityIcon sx={{ fontSize: 14, color: c.text.muted }} />
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
-                              {hasPerms && <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />}
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
+                              {hasPerms && <Chip label={`${totalToolCount} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />}
                             </Box>
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                               {hasPerms && (
                                 <>
                                   <Tooltip title="Allow all read-only tools">
-                                    <Button size="small" onClick={() => handleBulkReadOnly(tool.id)} sx={{ color: c.status.info, textTransform: 'none', fontSize: '0.7rem', minWidth: 'auto', px: 1, py: 0.25 }}>
+                                    <Button size="small" onClick={() => handleBulkReadOnly(tool.id)} sx={{ color: c.status.info, textTransform: 'none', fontSize: '0.6875rem', minWidth: 'auto', px: 1, py: 0.25 }}>
                                       Allow reads
                                     </Button>
                                   </Tooltip>
                                   <Tooltip title="Reset all to Ask">
-                                    <Button size="small" onClick={() => handleResetPermissions(tool.id)} sx={{ color: c.text.ghost, textTransform: 'none', fontSize: '0.7rem', minWidth: 'auto', px: 1, py: 0.25 }}>
+                                    <Button size="small" onClick={() => handleResetPermissions(tool.id)} sx={{ color: c.text.ghost, textTransform: 'none', fontSize: '0.6875rem', minWidth: 'auto', px: 1, py: 0.25 }}>
                                       Reset
                                     </Button>
                                   </Tooltip>
@@ -224,19 +224,19 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                           {!hasPerms ? (
                             <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 3, gap: 1.5 }}>
                               <ExtensionIcon sx={{ fontSize: 28, color: c.text.ghost, opacity: 0.4 }} />
-                              <Typography sx={{ color: c.text.ghost, fontSize: '0.82rem' }}>No tools discovered yet</Typography>
+                              <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem' }}>No tools discovered yet</Typography>
                               <Button
                                 size="small"
                                 variant="outlined"
                                 startIcon={discovering ? <CircularProgress size={12} /> : <SearchIcon sx={{ fontSize: 14 }} />}
                                 onClick={() => handleDiscover(tool.id)}
                                 disabled={discovering || !canDiscover}
-                                sx={{ borderColor: c.border.medium, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.accent.primary }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5 }}
+                                sx={{ borderColor: c.border.medium, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.accent.primary }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5 }}
                               >
                                 Discover Tools
                               </Button>
                               {!canDiscover && (
-                                <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Add an MCP configuration to enable tool discovery</Typography>
+                                <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Add an MCP configuration to enable tool discovery</Typography>
                               )}
                             </Box>
                           ) : (
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx b/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
index 9b26064e..29d13214 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolConnect.tsx
@@ -40,7 +40,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                             variant="outlined"
                             startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleOAuthConnect(tool.id); }}
-                            sx={{ borderColor: `${c.status.info}40`, color: c.status.info, '&:hover': { borderColor: c.status.info, bgcolor: `${c.status.info}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+                            sx={{ borderColor: `${c.status.info}40`, color: c.status.info, '&:hover': { borderColor: c.status.info, bgcolor: `${c.status.info}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
                           >
                             {ig?.id === 'discord' && tool.auth_status === 'connected' ? 'Add server' : `Connect ${tool.name}`}
                           </Button>
@@ -51,7 +51,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                             variant="outlined"
                             startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleDeviceCodeConnect(tool.id); }}
-                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
                           >
                             Connect Microsoft 365
                           </Button>
@@ -62,7 +62,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                             variant="outlined"
                             startIcon={<LinkIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); openCredentialsDialog(tool.id, ig); }}
-                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
+                            sx={{ borderColor: `${ig.color}40`, color: ig.color, '&:hover': { borderColor: ig.color, bgcolor: `${ig.color}10` }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5, flexShrink: 0 }}
                           >
                             {ig.connectLabel || 'Connect'}
                           </Button>
@@ -75,7 +75,7 @@ const CustomToolConnect: React.FC<CustomToolConnectProps> = ({
                               size="small"
                               onDelete={(ig.credentialFields || ig.authType === 'oauth2' || ig.authType === 'device_code') ? (e: React.SyntheticEvent) => { e.stopPropagation(); ig.authType === 'device_code' ? handleM365Disconnect(tool.id) : handleDisconnectIntegration(tool.id, ig); } : undefined}
                               onClick={(e) => e.stopPropagation()}
-                              sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.7rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, '& .MuiChip-deleteIcon': { color: c.status.success, '&:hover': { color: c.status.error } }, flexShrink: 0 }}
+                              sx={{ bgcolor: c.status.successBg, color: c.status.success, fontSize: '0.6875rem', height: 22, '& .MuiChip-icon': { color: c.status.success }, '& .MuiChip-deleteIcon': { color: c.status.success, '&:hover': { color: c.status.error } }, flexShrink: 0 }}
                             />
                           </Tooltip>
                         )}
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx b/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx
index 62424010..1f5f9fc9 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolDevInfo.tsx
@@ -9,11 +9,11 @@ const CustomToolDevInfo: React.FC<{ tool: ToolDefinition }> = ({ tool }) => {
   const c = useClaudeTokens();
   return (
                             <Box sx={{ mt: 2, pt: 1.5, borderTop: `1px solid ${c.border.subtle}`, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                                 Developer Info
                               </Typography>
                               <Box sx={{ bgcolor: c.bg.page, borderRadius: 1.5, border: `1px solid ${c.border.subtle}`, px: 1.5, py: 1 }}>
-                                <Typography sx={{ color: c.text.ghost, fontSize: '0.68rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>
+                                <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>
                                   MCP Config
                                 </Typography>
                                 <Typography component="pre" sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono, whiteSpace: 'pre-wrap', wordBreak: 'break-all', m: 0, lineHeight: 1.5 }}>
@@ -22,25 +22,25 @@ const CustomToolDevInfo: React.FC<{ tool: ToolDefinition }> = ({ tool }) => {
                               </Box>
                               <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5 }}>
                                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Auth type:</Typography>
-                                  <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontFamily: c.font.mono }}>{tool.auth_type || 'none'}</Typography>
+                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Auth type:</Typography>
+                                  <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{tool.auth_type || 'none'}</Typography>
                                 </Box>
                                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Status:</Typography>
-                                  <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontFamily: c.font.mono }}>{tool.auth_status || 'none'}</Typography>
+                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Status:</Typography>
+                                  <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{tool.auth_status || 'none'}</Typography>
                                 </Box>
                                 {tool.connected_account_email && (
                                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                    <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Account:</Typography>
-                                    <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontFamily: c.font.mono }}>{tool.connected_account_email}</Typography>
+                                    <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Account:</Typography>
+                                    <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{tool.connected_account_email}</Typography>
                                   </Box>
                                 )}
                               </Box>
                               {tool.credentials && Object.keys(tool.credentials).length > 0 && (
                                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
-                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>Credentials:</Typography>
+                                  <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>Credentials:</Typography>
                                   {Object.keys(tool.credentials).map((key) => (
-                                    <Chip key={key} label={`${key}: configured`} size="small" sx={{ bgcolor: `${c.status.success}12`, color: c.status.success, fontSize: '0.65rem', height: 18, fontFamily: c.font.mono, '& .MuiChip-label': { px: 0.6 } }} />
+                                    <Chip key={key} label={`${key}: configured`} size="small" sx={{ bgcolor: `${c.status.success}12`, color: c.status.success, fontSize: '0.625rem', height: 18, fontFamily: c.font.mono, '& .MuiChip-label': { px: 0.6 } }} />
                                   ))}
                                 </Box>
                               )}
diff --git a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
index 5b1bcbc1..0779ba92 100644
--- a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
@@ -27,16 +27,16 @@ const IntegrationGalleryCard: React.FC<IntegrationGalleryCardProps> = ({ integra
                       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                         <Box sx={{
                           width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          bgcolor: c.bg.secondary, fontSize: '1.1rem', fontWeight: 700, color: c.text.ghost,
+                          bgcolor: c.bg.secondary, fontSize: '1.125rem', fontWeight: 700, color: c.text.ghost,
                         }}>
                           {ig.icon}
                         </Box>
                         <Box sx={{ flex: 1, minWidth: 0 }}>
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>{ig.name}</Typography>
-                            <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
+                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{ig.name}</Typography>
+                            <Chip component="a" href={ig.website} clickable icon={<OpenInNewIcon sx={{ fontSize: 10 }} />} label="docs" size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, fontSize: 10 } }} />
                           </Box>
-                          <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>{ig.description}</Typography>
+                          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{ig.description}</Typography>
                         </Box>
                         <Box
                           data-onboarding={
diff --git a/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx b/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
index aa919af7..0de1d3e0 100644
--- a/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
+++ b/frontend/src/app/pages/Tools/cards/ServiceGroup.tsx
@@ -87,20 +87,20 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
       <Box key={name}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, cursor: devMode && schema ? 'pointer' : undefined, '&:hover': { bgcolor: c.bg.secondary } }} onClick={() => devMode && schema && setExpandedSchema((p) => p === schemaKey ? null : schemaKey)}>
           <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-            <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{toDisplayName(name, serviceName)}</Typography>
-            {descriptions[name] && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(descriptions[name])}</Typography>}
+            <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{toDisplayName(name, serviceName)}</Typography>
+            {descriptions[name] && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(descriptions[name])}</Typography>}
           </Box>
           <PermToggle value={perms[name] || 'ask'} onChange={(v) => handlePermissionChange(tool.id, name, v)} size={14} />
         </Box>
         {devMode && expandedSchema === schemaKey && schemaProps && (
           <Box sx={{ mx: 1.5, mb: 0.75, px: 1.5, py: 1, bgcolor: c.bg.page, borderRadius: 1, border: `1px solid ${c.border.subtle}` }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.65rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>Input Parameters</Typography>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.625rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.5 }}>Input Parameters</Typography>
             {Object.entries(schemaProps).map(([pName, pDef]: [string, any]) => (
               <Box key={pName} sx={{ display: 'flex', alignItems: 'baseline', gap: 0.75, py: 0.2 }}>
-                <Typography sx={{ color: c.accent.primary, fontSize: '0.72rem', fontFamily: c.font.mono, fontWeight: 600, flexShrink: 0 }}>{pName}</Typography>
-                <Typography sx={{ color: c.text.muted, fontSize: '0.68rem', fontFamily: c.font.mono }}>{pDef?.type || 'any'}</Typography>
-                {schemaRequired.includes(pName) && <Chip label="required" size="small" sx={{ bgcolor: `${c.status.error}12`, color: c.status.error, fontSize: '0.55rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />}
-                {pDef?.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.68rem', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pDef.description}</Typography>}
+                <Typography sx={{ color: c.accent.primary, fontSize: '0.75rem', fontFamily: c.font.mono, fontWeight: 600, flexShrink: 0 }}>{pName}</Typography>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontFamily: c.font.mono }}>{pDef?.type || 'any'}</Typography>
+                {schemaRequired.includes(pName) && <Chip label="required" size="small" sx={{ bgcolor: `${c.status.error}12`, color: c.status.error, fontSize: '0.625rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />}
+                {pDef?.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pDef.description}</Typography>}
               </Box>
             ))}
           </Box>
@@ -137,8 +137,8 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
         >
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-            <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>{serviceName}</Typography>
-            <Chip label={count} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+            <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>{serviceName}</Typography>
+            <Chip label={count} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
           </Box>
           <Box data-onboarding={showPermissionMarker ? 'actions-permission-toggle' : undefined}>
             <PermToggle value={svcPolicy === 'mixed' ? 'ask' : svcPolicy} onChange={(v) => handleGroupPermissionChange(tool.id, allNames, v)} />
@@ -151,8 +151,8 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 0.5, py: 0.25 }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                     <VisibilityIcon sx={{ fontSize: 12, color: c.status.info }} />
-                    <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontWeight: 600 }}>Read-only</Typography>
-                    <Chip label={data.read!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.6rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
+                    <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600 }}>Read-only</Typography>
+                    <Chip label={data.read!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.625rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
                   </Box>
                   <PermToggle value={getGroupPolicy(data.read!) === 'mixed' ? 'ask' : getGroupPolicy(data.read!)} onChange={(v) => handleGroupPermissionChange(tool.id, data.read!, v)} size={14} />
                 </Box>
@@ -164,8 +164,8 @@ const ServiceGroup: React.FC<ServiceGroupProps> = ({
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 0.5, py: 0.25 }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                     <EditIcon sx={{ fontSize: 12, color: c.status.warning }} />
-                    <Typography sx={{ color: c.text.muted, fontSize: '0.72rem', fontWeight: 600 }}>Write / delete</Typography>
-                    <Chip label={data.write!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.6rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
+                    <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600 }}>Write / delete</Typography>
+                    <Chip label={data.write!.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.ghost, fontSize: '0.625rem', height: 14, '& .MuiChip-label': { px: 0.4 } }} />
                   </Box>
                   <PermToggle value={getGroupPolicy(data.write!) === 'mixed' ? 'ask' : getGroupPolicy(data.write!)} onChange={(v) => handleGroupPermissionChange(tool.id, data.write!, v)} size={14} />
                 </Box>
diff --git a/frontend/src/app/pages/Tools/cards/ToolSection.tsx b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
index 68597e49..e42778f3 100644
--- a/frontend/src/app/pages/Tools/cards/ToolSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
@@ -109,13 +109,13 @@ const ToolSection: React.FC<ToolSectionProps> = ({
         </Box>
         <Box sx={{ flex: 1, minWidth: 0, opacity: enabled ? 1 : 0.4, transition: 'opacity 0.2s' }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}>{label}</Typography>
-            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
+            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{label}</Typography>
+            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
             {deferred && (
-              <Chip label="on-demand" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+              <Chip label="on-demand" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
             )}
           </Box>
-          <Typography sx={{ color: c.text.muted, fontSize: '0.84rem' }}>{sectionDescription}</Typography>
+          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{sectionDescription}</Typography>
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
           <Switch
@@ -139,8 +139,8 @@ const ToolSection: React.FC<ToolSectionProps> = ({
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1.5, mb: 1 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
             <SecurityIcon sx={{ fontSize: 14, color: c.text.muted }} />
-            <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
-            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.65rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
+            <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Tool Permissions</Typography>
+            <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.ghost, fontSize: '0.625rem', height: 18, ml: 0.5, '& .MuiChip-label': { px: 0.6 } }} />
           </Box>
         </Box>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
@@ -158,8 +158,8 @@ const ToolSection: React.FC<ToolSectionProps> = ({
                 >
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     <KeyboardArrowDownIcon sx={{ fontSize: 16, color: c.text.ghost, transition: 'transform 0.15s', transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }} />
-                    <Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 600 }}>{meta.label}</Typography>
-                    <Chip label={catTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                    <Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>{meta.label}</Typography>
+                    <Chip label={catTools.length} size="small" sx={{ bgcolor: c.bg.page, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                   </Box>
                   <PermToggle value={catPolicy === 'mixed' ? 'ask' : catPolicy} onChange={(v) => onCategoryPermissionChange(catTools.map((t) => t.name), v)} />
                 </Box>
@@ -170,8 +170,8 @@ const ToolSection: React.FC<ToolSectionProps> = ({
                       return (
                         <Box key={bt.name} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.4, px: 1.5, borderRadius: 1, '&:hover': { bgcolor: c.bg.secondary } }}>
                           <Box sx={{ minWidth: 0, flex: 1, mr: 1 }}>
-                            <Typography sx={{ color: c.text.primary, fontSize: '0.8rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
-                            {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(bt.description)}</Typography>}
+                            <Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 500 }}>{bt.display_name || bt.name}</Typography>
+                            {bt.description && <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{firstSentence(bt.description)}</Typography>}
                           </Box>
                           <PermToggle value={toolPolicy} onChange={(v) => onPermissionChange(bt.name, v)} size={14} />
                         </Box>
diff --git a/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx b/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx
index e353e8c7..7e0d7882 100644
--- a/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/McpConfigDialog.tsx
@@ -54,15 +54,15 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, p: 1.5, bgcolor: c.bg.page, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
               <Avatar
                 src={mcpConfigServer.iconUrl || undefined}
-                sx={{ width: 32, height: 32, bgcolor: c.bg.secondary, fontSize: '0.8rem', fontWeight: 700, color: c.text.muted }}
+                sx={{ width: 32, height: 32, bgcolor: c.bg.secondary, fontSize: '0.8125rem', fontWeight: 700, color: c.text.muted }}
               >
                 {mcpConfigServer.iconUrl ? null : (mcpConfigServer.title || cleanServerName(mcpConfigServer.name)).charAt(0).toUpperCase()}
               </Avatar>
               <Box>
-                <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9rem' }}>
+                <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.875rem' }}>
                   {mcpConfigServer.title || cleanServerName(mcpConfigServer.name)}
                 </Typography>
-                <Typography sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}>{mcpConfigServer.description}</Typography>
+                <Typography sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}>{mcpConfigServer.description}</Typography>
               </Box>
             </Box>
           )}
@@ -77,7 +77,7 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
             maxRows={8}
             error={!!mcpConfigError}
             helperText={mcpConfigError || 'Transport config passed to claude_agent_sdk (type, url, command, args, etc.)'}
-            sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.85rem' } }}
+            sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.875rem' } }}
           />
 
           <FormControl fullWidth size="small">
@@ -100,7 +100,7 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
 
           {mcpAuthType !== 'none' && (
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, p: 1.5, bgcolor: c.bg.page, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
-              <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+              <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                 Environment Variables
               </Typography>
               {Object.entries(mcpCredentials).map(([key, val]) => (
@@ -112,14 +112,14 @@ const McpConfigDialog: React.FC<McpConfigDialogProps> = ({
                   fullWidth
                   size="small"
                   type={key.toLowerCase().includes('secret') ? 'password' : 'text'}
-                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.elevated, fontFamily: c.font.mono, fontSize: '0.85rem' } }}
+                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.elevated, fontFamily: c.font.mono, fontSize: '0.875rem' } }}
                 />
               ))}
               {mcpAuthType === 'env_vars' && (
                 <Button
                   size="small"
                   onClick={() => setMcpCredentials({ ...mcpCredentials, [`VAR_${Object.keys(mcpCredentials).length + 1}`]: '' })}
-                  sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.78rem', alignSelf: 'flex-start' }}
+                  sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.75rem', alignSelf: 'flex-start' }}
                 >
                   + Add Variable
                 </Button>
diff --git a/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx b/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx
index 06c3ccd0..247e66d1 100644
--- a/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/RegistryBrowserDialog.tsx
@@ -97,10 +97,10 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
                       : `${regStats.total.toLocaleString()} servers`
                 }
                 size="small"
-                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 20, ml: 'auto' }}
+                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, ml: 'auto' }}
               />
               {devMode && regStats.lastUpdated > 0 && (
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.68rem', flexShrink: 0 }}>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', flexShrink: 0 }}>
                   Synced {Math.round((Date.now() / 1000 - regStats.lastUpdated) / 60)}m ago
                 </Typography>
               )}
@@ -139,7 +139,7 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
                 flexShrink: 0,
                 '& .MuiToggleButton-root': {
                   color: c.text.ghost, border: `1px solid ${c.border.medium}`, textTransform: 'none',
-                  fontSize: '0.72rem', py: 0.5, px: 1.2, lineHeight: 1.4,
+                  fontSize: '0.75rem', py: 0.5, px: 1.2, lineHeight: 1.4,
                   '&.Mui-selected': { bgcolor: c.bg.secondary, color: c.text.primary, borderColor: c.border.strong },
                   '&:hover': { bgcolor: c.bg.secondary },
                 },
@@ -180,7 +180,7 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
           ) : regServers.length === 0 ? (
             <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1, color: c.text.ghost, gap: 1.5 }}>
               <SearchIcon sx={{ fontSize: 40, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.9rem' }}>No servers found matching "{regQuery}"</Typography>
+              <Typography sx={{ fontSize: '0.875rem' }}>No servers found matching "{regQuery}"</Typography>
             </Box>
           ) : (
             <Box sx={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 0.5,
@@ -213,7 +213,7 @@ const RegistryBrowserDialog: React.FC<RegistryBrowserDialogProps> = ({
                   <Button
                     onClick={handleLoadMore}
                     disabled={regLoading}
-                    sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.85rem' }}
+                    sx={{ color: c.accent.primary, textTransform: 'none', fontSize: '0.875rem' }}
                   >
                     {regLoading ? <CircularProgress size={16} sx={{ color: c.accent.primary, mr: 1 }} /> : null}
                     Load More
diff --git a/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx b/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx
index a0955b26..ca94c700 100644
--- a/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/RegistryServerRow.tsx
@@ -55,39 +55,39 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                         src={srv.iconUrl || undefined}
                         sx={{
                           width: 24, height: 24, flexShrink: 0, bgcolor: c.bg.secondary,
-                          fontSize: '0.7rem', fontWeight: 700, color: c.text.muted,
+                          fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted,
                         }}
                       >
                         {srv.iconUrl ? null : (srv.title || cleanServerName(srv.name)).charAt(0).toUpperCase()}
                       </Avatar>
                       <Box sx={{ flex: 1, minWidth: 0 }}>
                         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                          <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.88rem', fontFamily: c.font.mono }}>
+                          <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.875rem', fontFamily: c.font.mono }}>
                             {srv.title || cleanServerName(srv.name)}
                           </Typography>
-                          {srv.version && <Chip label={`v${srv.version}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
-                          {srv.remoteType && <Chip label={srv.remoteType} size="small" sx={{ bgcolor: '#3b82f615', color: '#3b82f6', fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
+                          {srv.version && <Chip label={`v${srv.version}`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
+                          {srv.remoteType && <Chip label={srv.remoteType} size="small" sx={{ bgcolor: '#3b82f615', color: '#3b82f6', fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />}
                           {srv.source === 'google' ? (
-                            <Chip icon={<CloudIcon sx={{ fontSize: 12 }} />} label="Google" size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.info } }} />
+                            <Chip icon={<CloudIcon sx={{ fontSize: 12 }} />} label="Google" size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.info } }} />
                           ) : (
-                            <Chip icon={<PublicIcon sx={{ fontSize: 12 }} />} label="Community" size="small" sx={{ bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.accent.primary } }} />
+                            <Chip icon={<PublicIcon sx={{ fontSize: 12 }} />} label="Community" size="small" sx={{ bgcolor: 'rgba(174,86,48,0.08)', color: c.accent.primary, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.accent.primary } }} />
                           )}
                           {srv.stars != null && (
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, ml: 0.5 }}>
                               <StarIcon sx={{ fontSize: 13, color: '#c89c00' }} />
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, lineHeight: 1 }}>
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, lineHeight: 1 }}>
                                 {srv.stars >= 1000 ? `${(srv.stars / 1000).toFixed(1)}k` : srv.stars.toLocaleString()}
                               </Typography>
                             </Box>
                           )}
                           {devMode && !srv.remoteType && (
-                            <Chip label="stdio" size="small" sx={{ bgcolor: '#8b5cf615', color: '#8b5cf6', fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                            <Chip label="stdio" size="small" sx={{ bgcolor: '#8b5cf615', color: '#8b5cf6', fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                           )}
                           {isInstalled && (
-                            <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label="Installed" size="small" sx={{ bgcolor: `${c.status.success}15`, color: c.status.success, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.success } }} />
+                            <Chip icon={<CheckCircleIcon sx={{ fontSize: 12 }} />} label="Installed" size="small" sx={{ bgcolor: `${c.status.success}15`, color: c.status.success, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.4 }, '& .MuiChip-icon': { ml: 0.4, color: c.status.success } }} />
                           )}
                         </Box>
-                        <Typography sx={{ color: c.text.tertiary, fontSize: '0.78rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                        <Typography sx={{ color: c.text.tertiary, fontSize: '0.75rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           {srv.description}
                         </Typography>
                       </Box>
@@ -96,18 +96,18 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
 
                     <Collapse in={isExpanded} timeout={0} unmountOnExit>
                       <Box sx={{ ml: 4.5, mr: 1.5, mb: 1, px: 2, py: 1.5, bgcolor: c.bg.elevated, borderRadius: 1.5, borderLeft: '2px solid rgba(174,86,48,0.12)' }}>
-                        <Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', mb: 1.5, lineHeight: 1.5 }}>
+                        <Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', mb: 1.5, lineHeight: 1.5 }}>
                           {srv.description}
                         </Typography>
 
                         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 2 }}>
-                          <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem', fontFamily: c.font.mono }}>
+                          <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', fontFamily: c.font.mono }}>
                             {srv.name}
                           </Typography>
                           {srv.remoteUrl && (
                             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                              <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem', textTransform: 'uppercase' }}>Endpoint</Typography>
-                              <Typography sx={{ color: c.text.muted, fontSize: '0.78rem', fontFamily: c.font.mono }}>{srv.remoteUrl}</Typography>
+                              <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', textTransform: 'uppercase' }}>Endpoint</Typography>
+                              <Typography sx={{ color: c.text.muted, fontSize: '0.75rem', fontFamily: c.font.mono }}>{srv.remoteUrl}</Typography>
                             </Box>
                           )}
                           <Box sx={{ display: 'flex', gap: 1 }}>
@@ -119,7 +119,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                 icon={<OpenInNewIcon sx={{ fontSize: 12 }} />}
                                 label="Website"
                                 size="small"
-                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 22 }}
+                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 22 }}
                               />
                             )}
                             {srv.repositoryUrl && (
@@ -130,7 +130,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                 icon={<OpenInNewIcon sx={{ fontSize: 12 }} />}
                                 label="Repository"
                                 size="small"
-                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.7rem', height: 22 }}
+                                sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 22 }}
                               />
                             )}
                           </Box>
@@ -145,16 +145,16 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                 {(regDetail.keywords?.length > 0 || regDetail.license) && (
                                   <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center' }}>
                                     {regDetail.license && (
-                                      <Chip label={regDetail.license} size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                                      <Chip label={regDetail.license} size="small" sx={{ bgcolor: `${c.status.info}15`, color: c.status.info, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                                     )}
                                     {regDetail.keywords?.map((kw) => (
-                                      <Chip key={kw} label={kw} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.65rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
+                                      <Chip key={kw} label={kw} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
                                     ))}
                                   </Box>
                                 )}
                                 {regDetail.environmentVariables?.length > 0 && (
                                   <Box sx={{ bgcolor: c.bg.page, borderRadius: 1.5, border: `1px solid ${c.border.subtle}`, px: 1.5, py: 1 }}>
-                                    <Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.75 }}>
+                                    <Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.75 }}>
                                       Required Environment Variables
                                     </Typography>
                                     {regDetail.environmentVariables.map((ev) => (
@@ -163,7 +163,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                                           {ev.name}
                                         </Typography>
                                         {ev.description && (
-                                          <Typography sx={{ color: c.text.ghost, fontSize: '0.72rem' }}>
+                                          <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem' }}>
                                             {ev.description}
                                           </Typography>
                                         )}
@@ -182,7 +182,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                             variant="contained"
                             startIcon={<DownloadIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleInstall(srv); }}
-                            sx={{ bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5 }}
+                            sx={{ bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5 }}
                           >
                             Install
                           </Button>
@@ -191,7 +191,7 @@ const RegistryServerRow: React.FC<RegistryServerRowProps> = ({
                             variant="outlined"
                             startIcon={<EditIcon sx={{ fontSize: 14 }} />}
                             onClick={(e) => { e.stopPropagation(); handleEditInstall(srv); }}
-                            sx={{ borderColor: c.border.strong, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.text.primary }, textTransform: 'none', fontSize: '0.78rem', borderRadius: 1.5, py: 0.5 }}
+                            sx={{ borderColor: c.border.strong, color: c.text.secondary, '&:hover': { borderColor: c.accent.primary, color: c.text.primary }, textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, py: 0.5 }}
                           >
                             Edit & Install
                           </Button>
diff --git a/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx b/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
index b27b26da..ede75323 100644
--- a/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
+++ b/frontend/src/app/pages/Tools/dialogs/ToolDialogs.tsx
@@ -110,36 +110,36 @@ const ToolDialogs: React.FC<ToolDialogsProps> = ({
           {deviceCodeStatus === 'loading' && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 3, justifyContent: 'center' }}>
               <CircularProgress size={20} />
-              <Typography sx={{ color: c.text.muted, fontSize: '0.9rem' }}>Generating login code...</Typography>
+              <Typography sx={{ color: c.text.muted, fontSize: '0.875rem' }}>Generating login code...</Typography>
             </Box>
           )}
           {deviceCodeStatus === 'awaiting' && (
             <>
-              <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.6 }}>
+              <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.6 }}>
                 Open the link below and enter the code to sign in:
               </Typography>
               <Box sx={{ bgcolor: c.bg.page, border: `1px solid ${c.border.subtle}`, borderRadius: 2, p: 2, display: 'flex', flexDirection: 'column', gap: 1.5, alignItems: 'center' }}>
-                <Typography component="a" href={deviceCodeUrl} target="_blank" rel="noopener" sx={{ color: c.status.info, fontSize: '0.9rem', fontWeight: 500 }}>
+                <Typography component="a" href={deviceCodeUrl} target="_blank" rel="noopener" sx={{ color: c.status.info, fontSize: '0.875rem', fontWeight: 500 }}>
                   {deviceCodeUrl}
                 </Typography>
-                <Typography sx={{ fontFamily: c.font.mono, fontSize: '1.5rem', fontWeight: 700, color: c.text.primary, letterSpacing: 2 }}>
+                <Typography sx={{ fontFamily: c.font.mono, fontSize: '1.375rem', fontWeight: 700, color: c.text.primary, letterSpacing: 2 }}>
                   {deviceCode}
                 </Typography>
               </Box>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'center', py: 1 }}>
                 <CircularProgress size={14} />
-                <Typography sx={{ color: c.text.ghost, fontSize: '0.8rem' }}>Waiting for you to sign in...</Typography>
+                <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem' }}>Waiting for you to sign in...</Typography>
               </Box>
             </>
           )}
           {deviceCodeStatus === 'connected' && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 2, justifyContent: 'center' }}>
               <CheckCircleIcon sx={{ color: c.status.success, fontSize: 20 }} />
-              <Typography sx={{ color: c.status.success, fontSize: '0.9rem', fontWeight: 500 }}>Connected successfully!</Typography>
+              <Typography sx={{ color: c.status.success, fontSize: '0.875rem', fontWeight: 500 }}>Connected successfully!</Typography>
             </Box>
           )}
           {deviceCodeStatus === 'error' && (
-            <Typography sx={{ color: c.status.error, fontSize: '0.85rem', py: 2, textAlign: 'center' }}>
+            <Typography sx={{ color: c.status.error, fontSize: '0.875rem', py: 2, textAlign: 'center' }}>
               Login failed. Please try again.
             </Typography>
           )}
@@ -171,13 +171,13 @@ const ToolDialogs: React.FC<ToolDialogsProps> = ({
         </DialogTitle>
         <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '8px !important' }}>
           {credDialogIntegration?.id === 'slack' ? (
-            <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
+            <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
               Click <strong>Sign in with Slack</strong> below; a Slack window will open. Sign in normally and the window will close automatically once you reach your workspace.
             </Typography>
           ) : (
             <>
               {credDialogIntegration?.connectInstructions && (
-                <Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
+                <Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.5, bgcolor: c.bg.secondary, px: 2, py: 1.5, borderRadius: 2, border: `1px solid ${c.border.subtle}` }}>
                   {credDialogIntegration.connectInstructions}
                 </Typography>
               )}
@@ -191,7 +191,7 @@ const ToolDialogs: React.FC<ToolDialogsProps> = ({
                   fullWidth
                   size="small"
                   helperText={field.helpText}
-                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.85rem' } }}
+                  sx={{ '& .MuiOutlinedInput-root': { bgcolor: c.bg.page, fontFamily: c.font.mono, fontSize: '0.875rem' } }}
                 />
               ))}
             </>
diff --git a/frontend/src/app/pages/Views/AppCodePanel.tsx b/frontend/src/app/pages/Views/AppCodePanel.tsx
index a3b79e95..a0691244 100644
--- a/frontend/src/app/pages/Views/AppCodePanel.tsx
+++ b/frontend/src/app/pages/Views/AppCodePanel.tsx
@@ -101,7 +101,7 @@ const AppCodePanel: React.FC<Props> = ({ workspaceId, onFileSaved }) => {
           <FileTreeItem key={node.path} node={node} depth={0} activeFile={activeFile} onSelect={setActiveFile} c={c} />
         ))}
         {filePaths.length === 0 && (
-          <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, px: 1.5, py: 1 }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, px: 1.5, py: 1 }}>
             Loading files…
           </Typography>
         )}
@@ -109,7 +109,7 @@ const AppCodePanel: React.FC<Props> = ({ workspaceId, onFileSaved }) => {
       <Box sx={{ flex: 1, overflow: 'hidden' }}>
         {activeFile && oversizeFiles[activeFile] != null ? (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', px: 3 }}>
-            <Typography sx={{ color: c.text.muted, fontSize: '0.8rem', textAlign: 'center', maxWidth: 320, lineHeight: 1.5 }}>
+            <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem', textAlign: 'center', maxWidth: 320, lineHeight: 1.5 }}>
               This file is {(oversizeFiles[activeFile] / (1024 * 1024)).toFixed(1)} MB, too large to edit here.
             </Typography>
           </Box>
@@ -123,7 +123,7 @@ const AppCodePanel: React.FC<Props> = ({ workspaceId, onFileSaved }) => {
           />
         ) : (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-            <Typography sx={{ color: c.text.ghost, fontSize: '0.8rem' }}>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem' }}>
               Select a file to edit
             </Typography>
           </Box>
diff --git a/frontend/src/app/pages/Views/AppFileTree.tsx b/frontend/src/app/pages/Views/AppFileTree.tsx
index 84b80447..99975547 100644
--- a/frontend/src/app/pages/Views/AppFileTree.tsx
+++ b/frontend/src/app/pages/Views/AppFileTree.tsx
@@ -128,7 +128,7 @@ export const FileTreeItem: React.FC<FileTreeItemProps> = ({ node, depth, activeF
         >
           <ExpandMoreIcon sx={{ fontSize: 12, color: c.text.ghost, transform: open ? 'rotate(0deg)' : 'rotate(-90deg)', transition: '0.15s' }} />
           <FolderIcon sx={{ fontSize: 14, color: c.text.muted }} />
-          <Typography sx={{ fontSize: '0.74rem', color: c.text.secondary, fontFamily: c.font.mono }}>
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, fontFamily: c.font.mono }}>
             {node.name}
           </Typography>
         </Box>
@@ -167,7 +167,7 @@ export const FileTreeItem: React.FC<FileTreeItemProps> = ({ node, depth, activeF
       </Box>
       <Typography
         sx={{
-          fontSize: '0.74rem',
+          fontSize: '0.75rem',
           fontFamily: c.font.mono,
           color: isActive ? c.text.primary : c.text.secondary,
           fontWeight: isActive ? 500 : 400,
diff --git a/frontend/src/app/pages/Views/HistoryPanel.tsx b/frontend/src/app/pages/Views/HistoryPanel.tsx
index 50944728..4280046e 100644
--- a/frontend/src/app/pages/Views/HistoryPanel.tsx
+++ b/frontend/src/app/pages/Views/HistoryPanel.tsx
@@ -134,13 +134,13 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 1.5, py: 1.25, gap: 1 }}>
-        <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary }}>History</Typography>
+        <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>History</Typography>
         <Button
           size="small"
           startIcon={<BookmarkAddOutlinedIcon sx={{ fontSize: 16 }} />}
           onClick={handleSave}
           disabled={saving || isAgentActive}
-          sx={{ textTransform: 'none', fontSize: '0.78rem', color: c.accent.primary, '&:hover': { bgcolor: `${c.accent.primary}12` } }}
+          sx={{ textTransform: 'none', fontSize: '0.75rem', color: c.accent.primary, '&:hover': { bgcolor: `${c.accent.primary}12` } }}
         >
           {saving ? 'Saving' : 'Save this version'}
         </Button>
@@ -148,7 +148,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
 
       <Fade in={!!status} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
         <Box sx={{
-          mx: 1.5, mb: 1, px: 1.25, py: 0.75, borderRadius: 2, fontSize: '0.8rem',
+          mx: 1.5, mb: 1, px: 1.25, py: 0.75, borderRadius: 2, fontSize: '0.8125rem',
           color: status?.kind === 'err' ? c.status.error : c.text.secondary,
           bgcolor: status?.kind === 'err' ? `${c.status.error}14` : `${c.accent.primary}12`,
         }}>
@@ -164,7 +164,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
         ) : versions.length === 0 ? (
           <Box sx={{ textAlign: 'center', pt: 6, px: 2 }}>
             <HistoryIcon sx={{ fontSize: 34, color: c.text.tertiary, opacity: 0.5, mb: 1 }} />
-            <Typography sx={{ fontSize: '0.85rem', color: c.text.muted, lineHeight: 1.5 }}>
+            <Typography sx={{ fontSize: '0.875rem', color: c.text.muted, lineHeight: 1.5 }}>
               No history yet. Every time you change your app, we'll save a snapshot here so you can go back.
             </Typography>
           </Box>
@@ -172,7 +172,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
           <>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
               <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: c.accent.primary, flexShrink: 0 }} />
-              <Typography sx={{ fontSize: '0.82rem', fontWeight: 600, color: c.text.secondary }}>Now (current)</Typography>
+              <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary }}>Now (current)</Typography>
             </Box>
             {versions.map((v) => (
               <Box
@@ -192,10 +192,10 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
                     : <HistoryIcon sx={{ fontSize: 18, color: c.text.tertiary, opacity: 0.5 }} />}
                 </Box>
                 <Box sx={{ flex: 1, minWidth: 0 }}>
-                  <Typography sx={{ fontSize: '0.84rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {describe(v)}
                   </Typography>
-                  <Typography sx={{ fontSize: '0.74rem', color: c.text.muted }}>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>
                     {timeAgo(v.created_at)}{v.source === 'manual' ? ' · saved by you' : v.source === 'pre_restore' ? ' · auto-backup' : ''}
                   </Typography>
                 </Box>
@@ -205,7 +205,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
                     startIcon={busyId === v.id ? <CircularProgress size={13} /> : <RestoreIcon sx={{ fontSize: 15 }} />}
                     onClick={() => setConfirmId(v.id)}
                     disabled={!!busyId || isAgentActive}
-                    sx={{ textTransform: 'none', fontSize: '0.74rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
+                    sx={{ textTransform: 'none', fontSize: '0.75rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
                   >
                     Restore
                   </Button>
@@ -214,7 +214,7 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
                     startIcon={<ContentCopyIcon sx={{ fontSize: 14 }} />}
                     onClick={() => handleBranch(v.id)}
                     disabled={!!busyId}
-                    sx={{ textTransform: 'none', fontSize: '0.74rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
+                    sx={{ textTransform: 'none', fontSize: '0.75rem', color: c.text.secondary, minWidth: 0, '&:hover': { bgcolor: `${c.text.primary}08` } }}
                   >
                     Save as new app
                   </Button>
@@ -227,10 +227,10 @@ const HistoryPanel: React.FC<Props> = ({ outputId, isAgentActive, saveLabel, onB
 
       <Dialog open={!!confirmTarget} onClose={() => setConfirmId(null)} PaperProps={{ sx: { borderRadius: 3, bgcolor: c.bg.surface, p: 0.5, maxWidth: 380 } }}>
         <Box sx={{ p: 2.5 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
             Go back to this version?
           </Typography>
-          <Typography sx={{ fontSize: '0.84rem', color: c.text.muted, lineHeight: 1.5, mb: 2.5 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.muted, lineHeight: 1.5, mb: 2.5 }}>
             This brings your app back to how it was here. Your current version is saved first, so you can always come back.
           </Typography>
           <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
diff --git a/frontend/src/app/pages/Views/TerminalPanel.tsx b/frontend/src/app/pages/Views/TerminalPanel.tsx
index 6f699e3a..db6e3b97 100644
--- a/frontend/src/app/pages/Views/TerminalPanel.tsx
+++ b/frontend/src/app/pages/Views/TerminalPanel.tsx
@@ -76,14 +76,14 @@ const TerminalPanel: React.FC<Props> = ({ lines }) => {
           px: 1.5,
           py: 1,
           fontFamily: c.font.mono,
-          fontSize: '0.74rem',
+          fontSize: '0.75rem',
           lineHeight: 1.55,
           '&::-webkit-scrollbar': { width: 6, height: 6 },
           '&::-webkit-scrollbar-thumb': { background: '#21262d', borderRadius: 3 },
         }}
       >
         {lines.length === 0 ? (
-          <Typography sx={{ color: '#8b949e', fontFamily: c.font.mono, fontSize: '0.78rem', fontStyle: 'italic' }}>
+          <Typography sx={{ color: '#8b949e', fontFamily: c.font.mono, fontSize: '0.75rem', fontStyle: 'italic' }}>
             Waiting for output... backend stdout/stderr and the running app's console.log will show here.
           </Typography>
         ) : (
diff --git a/frontend/src/app/pages/Views/ViewPreview.tsx b/frontend/src/app/pages/Views/ViewPreview.tsx
index d5792678..f09aba78 100644
--- a/frontend/src/app/pages/Views/ViewPreview.tsx
+++ b/frontend/src/app/pages/Views/ViewPreview.tsx
@@ -418,7 +418,7 @@ const ViewPreview = forwardRef<ViewPreviewHandle, Props>(({
           alignItems: 'center',
           justifyContent: 'center',
           color: '#888',
-          fontSize: '0.85rem',
+          fontSize: '0.875rem',
           fontStyle: 'italic',
           ...style,
         }}
@@ -511,7 +511,7 @@ const ViewPreview = forwardRef<ViewPreviewHandle, Props>(({
           }}
         >
           <Skeleton variant="card" width={140} height={14} delayMs={0} />
-          <Typography sx={{ fontSize: '0.78rem', color: '#888', letterSpacing: '0.01em' }}>
+          <Typography sx={{ fontSize: '0.75rem', color: '#888', letterSpacing: '0.01em' }}>
             Restoring preview...
           </Typography>
         </Box>
diff --git a/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx b/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx
index 6c737ab6..98cb39c1 100644
--- a/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx
+++ b/frontend/src/app/pages/Workflows/ScheduleCalendar.tsx
@@ -250,7 +250,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
         }}>
           <Box sx={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end', pr: 1, pb: 0.5 }}>
             {!compact && (
-              <Typography sx={{ fontSize: '0.62rem', color: c.text.ghost, fontWeight: 500 }}>{TZ_LABEL}</Typography>
+              <Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>{TZ_LABEL}</Typography>
             )}
           </Box>
           {days.map((d) => {
@@ -346,7 +346,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
             reads cleanly in both light and dark themes. */}
         <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', flexShrink: 0, position: 'sticky', top: 0, bgcolor: c.bg.surface, zIndex: 2, borderBottom: `1px solid ${c.border.subtle}`, pt: 1.25, pb: 0.6 }}>
           {WEEKDAY_LABEL_SHORT.map((l, i) => (
-            <Typography key={`${l}-${i}`} sx={{ textAlign: 'center', fontSize: '0.74rem', color: c.text.muted, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{l}</Typography>
+            <Typography key={`${l}-${i}`} sx={{ textAlign: 'center', fontSize: '0.75rem', color: c.text.muted, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{l}</Typography>
           ))}
         </Box>
         <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gridTemplateRows: `repeat(5, minmax(${compact ? 70 : 96}px, 1fr))`, flex: 1, minHeight: 0, gap: 0, borderLeft: `1px solid ${c.border.subtle}` }}>
@@ -362,7 +362,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
                       Calendar shows them in a muted shade, not invisible).
                       Color tweak instead of opacity so dark themes stay
                       readable. */}
-                  <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxSizing: 'border-box', width: 22, height: 22, borderRadius: '50%', bgcolor: isToday ? accent : 'transparent', color: isToday ? '#fff' : inMonth ? c.text.primary : c.text.ghost, fontWeight: isToday ? 600 : 500, fontSize: '0.82rem', lineHeight: 1, boxShadow: isToday ? `0 0 0 1.5px ${c.bg.surface}, 0 0 0 3px ${accent}` : 'none' }}>{d.getDate()}</Box>
+                  <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxSizing: 'border-box', width: 22, height: 22, borderRadius: '50%', bgcolor: isToday ? accent : 'transparent', color: isToday ? '#fff' : inMonth ? c.text.primary : c.text.ghost, fontWeight: isToday ? 600 : 500, fontSize: '0.8125rem', lineHeight: 1, boxShadow: isToday ? `0 0 0 1.5px ${c.bg.surface}, 0 0 0 3px ${accent}` : 'none' }}>{d.getDate()}</Box>
                 </Box>
                 {evs.slice(0, compact ? 3 : 4).map((e, idx) => (
                   <Box
@@ -403,7 +403,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
       onScroll={windowing.onScroll}
       sx={{ display: 'flex', flexDirection: 'column', maxHeight: '100%', overflow: 'auto', overflowAnchor: 'auto', bgcolor: c.bg.surface }}>
       {rows.length === 0 && (
-        <Typography sx={{ fontSize: '0.85rem', color: c.text.muted, textAlign: 'center', py: 3 }}>No scheduled</Typography>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.muted, textAlign: 'center', py: 3 }}>No scheduled</Typography>
       )}
       {windowing.topSpacer > 0 && (
         <Box aria-hidden sx={{ height: windowing.topSpacer, flexShrink: 0, overflowAnchor: 'none' }} />
@@ -420,13 +420,13 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
                 px: 2, pt: rowIdx === 0 ? 1.5 : 2, pb: 0.5,
                 borderTop: rowIdx === 0 ? 'none' : `1px dashed ${c.border.subtle}`,
               }}>
-              <Typography sx={{ fontSize: '1.15rem', fontWeight: 700, color: row.isToday ? accent : c.text.primary, lineHeight: 1, letterSpacing: '-0.01em' }}>
+              <Typography sx={{ fontSize: '1.125rem', fontWeight: 700, color: row.isToday ? accent : c.text.primary, lineHeight: 1, letterSpacing: '-0.01em' }}>
                 {row.date.getDate()}
               </Typography>
-              <Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: row.isToday ? accent : c.text.secondary, lineHeight: 1 }}>
+              <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: row.isToday ? accent : c.text.secondary, lineHeight: 1 }}>
                 {WEEKDAY_FULL[row.date.getDay()]}
               </Typography>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1 }}>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1 }}>
                 {row.date.toLocaleString('en', { month: 'short' })}
               </Typography>
             </Box>
@@ -435,7 +435,7 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
         if (row.kind === 'empty') {
           return (
             <Box key={row.id} data-wl-id={row.id} sx={{ px: 2, pb: 1 }}>
-              <Typography sx={{ fontSize: '0.85rem', color: c.text.ghost }}>No events today</Typography>
+              <Typography sx={{ fontSize: '0.875rem', color: c.text.ghost }}>No events today</Typography>
             </Box>
           );
         }
@@ -454,8 +454,8 @@ export default function ScheduleCalendar({ view, density, onSelectWorkflow, refD
             }}>
             <Box sx={{ width: 3, alignSelf: 'stretch', minHeight: 22, bgcolor: accent, borderRadius: c.radius.sm, flexShrink: 0 }} />
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-              <Typography className="ev-title" sx={{ fontSize: '0.9rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.3 }}>{e.workflow.title}</Typography>
-              <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1.3 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
+              <Typography className="ev-title" sx={{ fontSize: '0.875rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.3 }}>{e.workflow.title}</Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1.3 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
             </Box>
           </Box>
         );
@@ -543,7 +543,7 @@ function EventStack({ events, paused, now, maxVisible, onSelectWorkflow, eventFo
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
         <Box sx={{ minWidth: 220, p: 1 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
             {rest.length} more at this hour
           </Typography>
           {rest.map((e, idx) => (
@@ -552,8 +552,8 @@ function EventStack({ events, paused, now, maxVisible, onSelectWorkflow, eventFo
               onClick={() => { setAnchor(null); onSelectWorkflow?.(e.workflow.id, e.date); }}
               sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 0.5, py: 0.5, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { bgcolor: c.bg.elevated } }}>
               <Box sx={{ width: 8, height: 8, borderRadius: '50%', boxSizing: 'border-box', bgcolor: accent, flexShrink: 0 }} />
-              <Typography sx={{ flex: 1, fontSize: '0.82rem', color: c.text.primary, fontWeight: 600 }}>{e.workflow.title}</Typography>
-              <Typography sx={{ fontSize: '0.74rem', color: c.text.muted }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
+              <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 600 }}>{e.workflow.title}</Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
             </Box>
           ))}
         </Box>
@@ -589,7 +589,7 @@ function MonthDayOverflow({ date, count, events, now, fontSize, onSelectWorkflow
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}>
         <Box sx={{ minWidth: 240, maxHeight: 360, overflowY: 'auto', p: 1 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
             {`${events.length} scheduled · ${date.toLocaleString('en', { weekday: 'short', month: 'short', day: 'numeric' })}`}
           </Typography>
           {events.map((e, idx) => (
@@ -598,8 +598,8 @@ function MonthDayOverflow({ date, count, events, now, fontSize, onSelectWorkflow
               onClick={() => { setAnchor(null); onSelectWorkflow?.(e.workflow.id, e.date); }}
               sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 0.5, py: 0.5, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { bgcolor: c.bg.elevated } }}>
               <Box sx={{ width: 6, height: 6, borderRadius: '50%', boxSizing: 'border-box', bgcolor: accent, flexShrink: 0 }} />
-              <Typography sx={{ flex: 1, fontSize: '0.82rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.workflow.title}</Typography>
-              <Typography sx={{ fontSize: '0.74rem', color: c.text.muted, flexShrink: 0 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
+              <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.workflow.title}</Typography>
+              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, flexShrink: 0 }}>{formatTime(e.date.getHours(), e.date.getMinutes())}</Typography>
             </Box>
           ))}
         </Box>
@@ -614,7 +614,7 @@ function EventTooltipBody({ event }: { event: { workflow: Workflow; date: Date }
   const cost = wf.cost_estimate?.last_run_usd;
   const monthly = wf.cost_estimate?.monthly_usd;
   return (
-    <Box sx={{ fontSize: '0.72rem', lineHeight: 1.5 }}>
+    <Box sx={{ fontSize: '0.75rem', lineHeight: 1.5 }}>
       <div style={{ fontWeight: 700 }}>{wf.title}</div>
       <div>{`Fires at ${formatTime(event.date.getHours(), event.date.getMinutes())}`}</div>
       {status && <div>{`Last run: ${status}`}</div>}
diff --git a/frontend/src/app/pages/Workflows/SchedulePopover.tsx b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
index 690cd96f..c0064f95 100644
--- a/frontend/src/app/pages/Workflows/SchedulePopover.tsx
+++ b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
@@ -130,7 +130,7 @@ export default function SchedulePopover({
         {!chatHistoryOnly && mode !== 'schedule' && (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, pt: 1, pb: 0.5, flexShrink: 0 }}>
             {([['search', 'Chat history'], ['runs', 'Scheduled tasks']] as const).map(([m, label]) => (
-              <Box key={m} onClick={() => onModeChange(m)} role="button" sx={{ fontSize: '0.85rem', fontWeight: mode === m ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: mode === m ? c.text.primary : c.text.muted, borderBottom: `2px solid ${mode === m ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{label}</Box>
+              <Box key={m} onClick={() => onModeChange(m)} role="button" sx={{ fontSize: '0.875rem', fontWeight: mode === m ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: mode === m ? c.text.primary : c.text.muted, borderBottom: `2px solid ${mode === m ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{label}</Box>
             ))}
           </Box>
         )}
@@ -151,10 +151,10 @@ export default function SchedulePopover({
                 value={historyQuery}
                 onChange={(e) => onHistoryQueryChange(e.target.value)}
                 placeholder="Search past chats..."
-                sx={{ flex: 1, fontSize: '0.85rem', color: c.text.primary, '& input::placeholder': { color: c.text.ghost, opacity: 1 } }}
+                sx={{ flex: 1, fontSize: '0.875rem', color: c.text.primary, '& input::placeholder': { color: c.text.ghost, opacity: 1 } }}
               />
               {!hideTopChrome && (
-                <Box onClick={onNewChat} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.45, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
+                <Box onClick={onNewChat} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.75rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.45, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
                   <AddIcon sx={{ fontSize: 12 }} />
                   New
                 </Box>
@@ -162,13 +162,13 @@ export default function SchedulePopover({
             </Box>
             <Box ref={historyScrollRef} onScroll={onHistoryScroll} sx={{ flex: 1, overflowY: 'auto', borderTop: `1px solid ${c.border.subtle}` }}>
               {historyResults.length === 0 && !historyLoading && (
-                <Typography sx={{ px: 1.5, py: 2.5, fontSize: '0.82rem', color: c.text.muted, textAlign: 'center' }}>{historyQuery ? 'No matching chats' : 'No chat history yet'}</Typography>
+                <Typography sx={{ px: 1.5, py: 2.5, fontSize: '0.8125rem', color: c.text.muted, textAlign: 'center' }}>{historyQuery ? 'No matching chats' : 'No chat history yet'}</Typography>
               )}
               {historyResults.map((entry) => {
                 const hasWorkflow = Boolean(workflowIconMap[entry.id]);
                 return (
                   <Box key={entry.id} onClick={() => onHistorySelect(entry.id)} sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 0.9, cursor: 'pointer', '&:hover': { bgcolor: c.bg.elevated } }}>
-                    <Typography sx={{ flex: 1, fontSize: '0.82rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</Typography>
+                    <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</Typography>
                     {/* Only annotate chats that became saved workflows.
                         A small workflow glyph reads as a tag, where the
                         old single-letter chip read as a random initial. */}
@@ -179,7 +179,7 @@ export default function SchedulePopover({
                         </Box>
                       </Tooltip>
                     )}
-                    <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, flexShrink: 0, whiteSpace: 'nowrap' }}>{relTime(entry.closed_at)}</Typography>
+                    <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0, whiteSpace: 'nowrap' }}>{relTime(entry.closed_at)}</Typography>
                   </Box>
                 );
               })}
@@ -191,7 +191,7 @@ export default function SchedulePopover({
           <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
             <Box sx={{ flex: 1, overflowY: 'auto', px: 1.5, py: 1, borderTop: `1px solid ${c.border.subtle}`, minHeight: 0 }}>
               {allRunsLoading && allRuns.length === 0 ? (
-                <Typography sx={{ px: 0.5, py: 2.5, fontSize: '0.82rem', color: c.text.muted, textAlign: 'center' }}>Loading runs...</Typography>
+                <Typography sx={{ px: 0.5, py: 2.5, fontSize: '0.8125rem', color: c.text.muted, textAlign: 'center' }}>Loading runs...</Typography>
               ) : (
                 <HistoryList runs={allRuns} onOpen={onRunOpen} showWorkflow workflowTitleFor={workflowTitleFor} />
               )}
@@ -203,10 +203,10 @@ export default function SchedulePopover({
           <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, pt: 1, pb: 0.5, flexShrink: 0 }}>
               {(['List', 'Week', 'Month'] as const).map((v) => (
-                <Box key={v} onClick={() => setCalendarView(v)} role="button" sx={{ fontSize: '0.85rem', fontWeight: calendarView === v ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: calendarView === v ? c.text.primary : c.text.muted, borderBottom: `2px solid ${calendarView === v ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{v}</Box>
+                <Box key={v} onClick={() => setCalendarView(v)} role="button" sx={{ fontSize: '0.875rem', fontWeight: calendarView === v ? 700 : 500, px: 0.75, pt: 0.4, pb: 0.55, color: calendarView === v ? c.text.primary : c.text.muted, borderBottom: `2px solid ${calendarView === v ? c.accent.primary : 'transparent'}`, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>{v}</Box>
               ))}
               <Box sx={{ flex: 1 }} />
-              <Box onClick={onExpand} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.78rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.35, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
+              <Box onClick={onExpand} role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.75rem', fontWeight: 500, color: c.text.secondary, px: 1, py: 0.35, border: `1px solid ${c.border.subtle}`, borderRadius: `${c.radius.md}px`, cursor: 'pointer', '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated } }}>
                 <OpenInFullIcon sx={{ fontSize: 12 }} />
                 Expand
               </Box>
@@ -219,14 +219,14 @@ export default function SchedulePopover({
                 onClick={() => setRefDate(new Date())}
                 role="button"
                 sx={{
-                  fontSize: '0.78rem', fontWeight: 600, color: c.text.secondary,
+                  fontSize: '0.75rem', fontWeight: 600, color: c.text.secondary,
                   border: `1px solid ${c.border.subtle}`, px: 0.95, py: 0.3,
                   borderRadius: `${c.radius.md}px`, cursor: 'pointer',
                   '&:hover': { color: c.text.primary, borderColor: c.border.medium },
                 }}>Today</Box>
               <IconButton size="small" onClick={onPrev} sx={{ p: 0.3, color: c.text.muted, '&:hover': { color: c.text.primary } }}><ChevronLeftIcon sx={{ fontSize: 17 }} /></IconButton>
               <IconButton size="small" onClick={onNext} sx={{ p: 0.3, color: c.text.muted, '&:hover': { color: c.text.primary } }}><ChevronRightIcon sx={{ fontSize: 17 }} /></IconButton>
-              <Typography sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.primary, ml: 0.25 }}>{periodLabel}</Typography>
+              <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.primary, ml: 0.25 }}>{periodLabel}</Typography>
             </Box>
             <Box sx={{ flex: 1, overflowY: 'auto', px: 1.5, pt: 0, pb: 1, borderTop: `1px solid ${c.border.subtle}`, minHeight: 0 }}>
               <ScheduleCalendar view={calendarView} density="compact" onSelectWorkflow={onWorkflowSelect} refDate={refDate} />
@@ -250,7 +250,7 @@ function ModeChip({ label, icon, active, onClick }: { label: string; icon: React
       role="button"
       sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.5,
-        fontSize: '0.82rem', fontWeight: active ? 700 : 500,
+        fontSize: '0.8125rem', fontWeight: active ? 700 : 500,
         px: 1.1, py: 0.45,
         cursor: 'pointer',
         color: active ? c.text.primary : c.text.muted,
diff --git a/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx b/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx
index a53f1012..a7921613 100644
--- a/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx
+++ b/frontend/src/app/pages/Workflows/ScheduleTestWarningDialog.tsx
@@ -21,7 +21,7 @@ export default function ScheduleTestWarningDialog({ open, onClose, onTestFirst,
     <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
       <DialogTitle sx={{ fontSize: '1rem', fontWeight: 700 }}>Test before scheduling?</DialogTitle>
       <DialogContent>
-        <Typography sx={{ fontSize: '0.86rem', color: c.text.secondary, lineHeight: 1.5 }}>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.5 }}>
           Scheduled runs can&apos;t pause to ask for permission. If this workflow uses tools that
           need your approval, it could fail when it runs on its own. A quick test run lets you
           approve those tools now.
@@ -31,13 +31,13 @@ export default function ScheduleTestWarningDialog({ open, onClose, onTestFirst,
         <Box
           role="button"
           onClick={onScheduleAnyway}
-          sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.secondary, cursor: 'pointer', px: 1, py: 0.5, '&:hover': { color: c.text.primary } }}>
+          sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary, cursor: 'pointer', px: 1, py: 0.5, '&:hover': { color: c.text.primary } }}>
           Schedule anyway
         </Box>
         <Box
           role="button"
           onClick={onTestFirst}
-          sx={{ fontSize: '0.84rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: 999, cursor: 'pointer', px: 1.5, py: 0.6, '&:hover': { filter: 'brightness(1.06)' } }}>
+          sx={{ fontSize: '0.8125rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: 999, cursor: 'pointer', px: 1.5, py: 0.6, '&:hover': { filter: 'brightness(1.06)' } }}>
           Test first
         </Box>
       </DialogActions>
diff --git a/frontend/src/app/pages/Workflows/StepList.tsx b/frontend/src/app/pages/Workflows/StepList.tsx
index 64581389..0433619b 100644
--- a/frontend/src/app/pages/Workflows/StepList.tsx
+++ b/frontend/src/app/pages/Workflows/StepList.tsx
@@ -150,7 +150,7 @@ export default function StepList(props: Props) {
                         resize: 'none',
                         boxSizing: 'border-box',
                         fontFamily: 'inherit',
-                        fontSize: '0.92rem',
+                        fontSize: '0.875rem',
                         color: c.text.primary,
                         border: framed ? `1px solid ${c.border.medium}` : '1px solid transparent',
                         borderRadius: `${c.radius.md}px`,
@@ -165,7 +165,7 @@ export default function StepList(props: Props) {
                   ) : (
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minHeight: CIRCLE_SIZE }}>
                       <Typography sx={{
-                        fontSize: '0.92rem',
+                        fontSize: '0.875rem',
                         fontWeight: isActive ? 600 : 500,
                         color: c.text.primary,
                         lineHeight: 1.45,
@@ -177,7 +177,7 @@ export default function StepList(props: Props) {
                         {label}
                       </Typography>
                       {isActive && activeStepDuration && (
-                        <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mr: hasExpandableBody ? 0 : 0.5, flexShrink: 0 }}>
+                        <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mr: hasExpandableBody ? 0 : 0.5, flexShrink: 0 }}>
                           {activeStepDuration}
                         </Typography>
                       )}
@@ -198,7 +198,7 @@ export default function StepList(props: Props) {
                       "what the agent is doing right now". */}
                   {isActive && activeStepSubtitle && (
                     <Typography sx={{
-                      fontSize: '0.82rem',
+                      fontSize: '0.8125rem',
                       color: c.text.secondary,
                       mt: 0.4,
                       display: 'flex', alignItems: 'center', gap: 0.5,
@@ -217,7 +217,7 @@ export default function StepList(props: Props) {
                       borderRadius: `${c.radius.md}px`,
                       bgcolor: c.bg.elevated,
                     }}>
-                      <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
+                      <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
                         {rawBody}
                       </Typography>
                     </Box>
@@ -232,7 +232,7 @@ export default function StepList(props: Props) {
       </Box>
       {hiddenCount > 0 && (
         <Typography sx={{
-          fontSize: '0.86rem',
+          fontSize: '0.875rem',
           color: c.text.secondary,
           mt: 0.6,
           ml: 0,
diff --git a/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx b/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx
index b1c6b465..0b131e16 100644
--- a/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx
+++ b/frontend/src/app/pages/Workflows/WorkflowCardLiveViews.tsx
@@ -101,7 +101,7 @@ function PillButton({ label, onClick, icon, tone, filled, disabled }: {
       role="button"
       sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.5,
-        fontSize: '0.86rem', fontWeight: 700,
+        fontSize: '0.875rem', fontWeight: 700,
         px: 1.4, py: 0.55, borderRadius: 999,
         cursor: disabled ? 'not-allowed' : 'pointer',
         color: fg, bgcolor: bg,
@@ -122,7 +122,7 @@ function GhostTextBtn({ label, onClick }: { label: string; onClick: () => void }
       onClick={onClick}
       role="button"
       sx={{
-        fontSize: '0.86rem', fontWeight: 500, color: c.text.secondary,
+        fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary,
         cursor: 'pointer', px: 0.75, py: 0.5,
         '&:hover': { color: c.text.primary },
       }}>
@@ -171,7 +171,7 @@ export function RunningView({ workflow, steps, runs, mode = 'card' }: {
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25, minHeight: '100%' }}>
       <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 700, color: c.status.success }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.status.success }}>
           {completeCount} of {total} complete
         </Typography>
       </Box>
@@ -275,7 +275,7 @@ export function CompletedView({ workflow, steps, runs, mode = 'card' }: {
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25, minHeight: '100%' }}>
       <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.6 }}>
         <Box component="span" sx={{ color: c.status.success, fontSize: 18, lineHeight: 1, mr: 0.25 }}>✓</Box>
-        <Typography sx={{ fontSize: '0.92rem', fontWeight: 700, color: c.status.success }}>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.status.success }}>
           {steps.length} of {steps.length} complete
         </Typography>
       </Box>
@@ -300,10 +300,10 @@ export function CompletedView({ workflow, steps, runs, mode = 'card' }: {
           <RocketLaunchRounded sx={{ fontSize: 16 }} />
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
             Workflow Success!
           </Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
             If you&apos;re curious, you can click the green button below to see exactly what the agent did.
           </Typography>
         </Box>
@@ -407,10 +407,10 @@ export function FailedView({ workflow, steps, runs, mode = 'card' }: {
           <BuildRounded sx={{ fontSize: 16 }} />
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
             Fix with an Agent
           </Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
             Have an agent modify, test, and iterate on the workflow until it works as expected.
           </Typography>
         </Box>
@@ -479,7 +479,7 @@ export function useHeaderActions(workflow: Workflow | null, view: string): Heade
         <Box
           onClick={() => dispatch(updateWorkflowCard({ workflowId: workflow.id, patch: { view: 'history' } }))}
           role="button"
-          sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.82rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
+          sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, fontSize: '0.8125rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
           <HistoryIcon sx={{ fontSize: 15 }} />
           History
         </Box>
@@ -488,7 +488,7 @@ export function useHeaderActions(workflow: Workflow | null, view: string): Heade
           role="button"
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.35,
-            fontSize: '0.82rem', fontWeight: 700,
+            fontSize: '0.8125rem', fontWeight: 700,
             px: 1.1, py: 0.4, borderRadius: 999,
             bgcolor: c.accent.primary, color: '#fff', cursor: 'pointer',
             '&:hover': { filter: 'brightness(1.05)' },
@@ -502,13 +502,13 @@ export function useHeaderActions(workflow: Workflow | null, view: string): Heade
       return {
         right: (
           <>
-            <Box role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.35, fontSize: '0.82rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
+            <Box role="button" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.35, fontSize: '0.8125rem', fontWeight: 600, px: 1, py: 0.4, color: c.text.secondary, cursor: 'pointer', '&:hover': { color: c.text.primary } }}>
               <StopRounded sx={{ fontSize: 15 }} />
               Stop
             </Box>
             <Box role="button" sx={{
               display: 'inline-flex', alignItems: 'center', gap: 0.35,
-              fontSize: '0.82rem', fontWeight: 700,
+              fontSize: '0.8125rem', fontWeight: 700,
               px: 1.1, py: 0.4, borderRadius: 999,
               bgcolor: c.accent.primary, color: '#fff', cursor: 'pointer',
               '&:hover': { filter: 'brightness(1.05)' },
diff --git a/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx b/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx
index e0296df5..0f2e1a50 100644
--- a/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx
+++ b/frontend/src/app/pages/Workflows/WorkflowCardSubviews.tsx
@@ -79,7 +79,7 @@ export function ActionBtn({ label, tone, disabled, onClick, icon }: { label: str
       sx={{
         // Compact pill matching target #58/#63. Smaller padding + smaller glyphs so the buttons stop overshadowing the step body.
         display: 'inline-flex', alignItems: 'center', gap: 0.4,
-        fontSize: '0.78rem', fontWeight: 600,
+        fontSize: '0.75rem', fontWeight: 600,
         px: 1, py: 0.35,
         borderRadius: c.radius.full,
         cursor: disabled ? 'not-allowed' : 'pointer',
@@ -226,10 +226,10 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           <CalendarMonthRounded sx={{ fontSize: 18 }} />
         </Box>
         <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+          <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
             Schedule this workflow?
           </Typography>
-          <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+          <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
             You can have workflows run on a recurring basis, automatically.
           </Typography>
         </Box>
@@ -239,7 +239,7 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           onClick={onIgnore}
           role="button"
           sx={{
-            fontSize: '0.86rem', fontWeight: 500, color: c.text.secondary,
+            fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary,
             cursor: busy ? 'wait' : 'pointer', px: 0.75, py: 0.5,
             opacity: busy ? 0.6 : 1,
             '&:hover': { color: c.text.primary },
@@ -252,7 +252,7 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           title={canSave ? undefined : 'Add at least one step before saving'}
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.5,
-            fontSize: '0.88rem', fontWeight: 700,
+            fontSize: '0.875rem', fontWeight: 700,
             px: 1.75, py: 0.6, borderRadius: c.radius.full,
             color: '#fff', bgcolor: c.accent.primary,
             cursor: busy ? 'wait' : canSave ? 'pointer' : 'not-allowed',
@@ -265,7 +265,7 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
       <Dialog open={savePromptOpen} onClose={() => setSavePromptOpen(false)} maxWidth="xs" fullWidth>
         <DialogTitle sx={{ fontSize: '1rem', fontWeight: 700 }}>Save workflow?</DialogTitle>
         <DialogContent>
-          <Typography sx={{ fontSize: '0.86rem', color: c.text.secondary }}>
+          <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>
             Save this workflow under Unscheduled. It will not run until you choose a schedule.
           </Typography>
         </DialogContent>
@@ -273,20 +273,20 @@ export function PreviewView({ workflowId, steps, sourceSessionId, initialDraft,
           <Box
             role="button"
             onClick={onDontSave}
-            sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.status.error, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
+            sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.status.error, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
             Don't Save
           </Box>
           <Box
             role="button"
             onClick={() => setSavePromptOpen(false)}
-            sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.secondary, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
+            sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary, cursor: busy ? 'wait' : 'pointer', px: 1, py: 0.5, opacity: busy ? 0.6 : 1 }}>
             Cancel
           </Box>
           <Box
             role="button"
             onClick={canSave ? onSaveDraft : undefined}
             title={canSave ? undefined : 'Add at least one step before saving'}
-            sx={{ fontSize: '0.84rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: c.radius.full, cursor: busy ? 'wait' : canSave ? 'pointer' : 'not-allowed', px: 1.5, py: 0.6, opacity: busy || !canSave ? 0.6 : 1, '&:hover': { filter: 'brightness(1.06)' } }}>
+            sx={{ fontSize: '0.8125rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary, borderRadius: c.radius.full, cursor: busy ? 'wait' : canSave ? 'pointer' : 'not-allowed', px: 1.5, py: 0.6, opacity: busy || !canSave ? 0.6 : 1, '&:hover': { filter: 'brightness(1.06)' } }}>
             Save
           </Box>
         </DialogActions>
@@ -426,10 +426,10 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
             <CalendarMonthRounded sx={{ fontSize: 18 }} />
           </Box>
           <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Typography sx={{ fontSize: '0.95rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, lineHeight: 1.3 }}>
               Schedule this workflow?
             </Typography>
-            <Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
+            <Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, mt: 0.25, lineHeight: 1.45 }}>
               You can have workflows run on a recurring basis, automatically.
             </Typography>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 1.5, mt: 1.25 }}>
@@ -437,7 +437,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
                 onClick={onNotNow}
                 role="button"
                 sx={{
-                  fontSize: '0.86rem', fontWeight: 500, color: c.text.secondary,
+                  fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary,
                   cursor: 'pointer', px: 0.75, py: 0.5,
                   '&:hover': { color: c.text.primary },
                 }}>
@@ -448,7 +448,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
                 role="button"
                 sx={{
                   display: 'inline-flex', alignItems: 'center', gap: 0.5,
-                  fontSize: '0.88rem', fontWeight: 700,
+                  fontSize: '0.875rem', fontWeight: 700,
                   px: 1.75, py: 0.6, borderRadius: c.radius.full,
                   color: '#fff', bgcolor: c.accent.primary,
                   cursor: 'pointer',
@@ -467,7 +467,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
           role={scheduleClickable ? 'button' : undefined}
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.6,
-            color: c.text.secondary, fontSize: '0.86rem', minWidth: 0,
+            color: c.text.secondary, fontSize: '0.875rem', minWidth: 0,
             cursor: scheduleClickable ? 'pointer' : 'default',
             '&:hover': scheduleClickable ? { color: c.text.primary } : {},
           }}>
@@ -480,7 +480,7 @@ export function SavedView({ workflow, steps, runs, activeRunId }: { workflow: Wo
           role="button"
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.45,
-            fontSize: '0.82rem', fontWeight: 600,
+            fontSize: '0.8125rem', fontWeight: 600,
             px: 1.25, py: 0.5,
             borderRadius: c.radius.full,
             cursor: 'pointer',
@@ -568,7 +568,7 @@ function AuditTraceLink({ workflowId }: { workflowId: string }) {
       <Tooltip title="Recent edits to this workflow">
         <Box onClick={open} role="button" sx={{
           display: 'inline-flex', alignItems: 'center', gap: 0.3,
-          fontSize: '0.7rem', color: c.text.muted, cursor: 'pointer',
+          fontSize: '0.6875rem', color: c.text.muted, cursor: 'pointer',
           px: 0.5, py: 0.25, borderRadius: c.radius.sm,
           '&:hover': { color: c.accent.primary, bgcolor: c.bg.elevated },
         }}>
@@ -583,12 +583,12 @@ function AuditTraceLink({ workflowId }: { workflowId: string }) {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
         <Box sx={{ minWidth: 280, maxWidth: 360, p: 1 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mb: 0.5 }}>
             RECENT EDITS
           </Typography>
-          {loading && <Typography sx={{ fontSize: '0.78rem', color: c.text.muted }}>Loading…</Typography>}
+          {loading && <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>Loading…</Typography>}
           {!loading && (entries === null || entries.length === 0) && (
-            <Typography sx={{ fontSize: '0.78rem', color: c.text.muted }}>No edits yet.</Typography>
+            <Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>No edits yet.</Typography>
           )}
           {!loading && entries && entries.map((e, idx) => {
             const fields = Object.keys(e.diff || {}).filter((k) => k !== 'updated_at');
@@ -596,10 +596,10 @@ function AuditTraceLink({ workflowId }: { workflowId: string }) {
             return (
               <Box key={idx} sx={{ display: 'flex', flexDirection: 'column', py: 0.5, borderTop: idx === 0 ? 'none' : `1px solid ${c.border.subtle}` }}>
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  <Typography sx={{ fontSize: '0.78rem', color: c.text.primary, fontWeight: 600 }}>{e.who || 'user'}</Typography>
-                  <Typography sx={{ fontSize: '0.7rem', color: c.text.ghost }}>{relTimeShort(e.ts)}</Typography>
+                  <Typography sx={{ fontSize: '0.75rem', color: c.text.primary, fontWeight: 600 }}>{e.who || 'user'}</Typography>
+                  <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost }}>{relTimeShort(e.ts)}</Typography>
                 </Box>
-                <Typography sx={{ fontSize: '0.74rem', color: c.text.secondary }}>{summary}</Typography>
+                <Typography sx={{ fontSize: '0.75rem', color: c.text.secondary }}>{summary}</Typography>
               </Box>
             );
           })}
@@ -666,20 +666,20 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
     return out;
   }, [filtered]);
   if (!runs || runs.length === 0) {
-    return <Typography sx={{ fontSize: '0.88rem', color: c.text.muted, py: 1.5, textAlign: 'center' }}>No runs yet</Typography>;
+    return <Typography sx={{ fontSize: '0.875rem', color: c.text.muted, py: 1.5, textAlign: 'center' }}>No runs yet</Typography>;
   }
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.75 }}>
         {groups.length > 0 && (
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
             {groups[0].key.toUpperCase()}
           </Typography>
         )}
         <Box sx={{ flex: 1 }} />
         {(['all', 'success', 'failure', 'skipped'] as const).map((k) => (
           <Box key={k} onClick={() => setFilter(k)} role="button" sx={{
-            fontSize: '0.72rem', fontWeight: 600,
+            fontSize: '0.75rem', fontWeight: 600,
             color: filter === k ? c.accent.primary : c.text.muted,
             bgcolor: filter === k ? c.accent.primary + '14' : 'transparent',
             border: `1px solid ${filter === k ? c.accent.primary + '40' : c.border.subtle}`,
@@ -693,7 +693,7 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
       {groups.map(({ key, runs: gRuns }, gi) => (
         <Box key={key} sx={{ display: 'flex', flexDirection: 'column' }}>
           {gi > 0 && (
-            <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mt: 0.5, mb: 0.25 }}>
+            <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em', mt: 0.5, mb: 0.25 }}>
               {key.toUpperCase()}
             </Typography>
           )}
@@ -705,35 +705,35 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
                 <Box
                   onClick={() => setExpandedId(expanded ? null : r.id)}
                   sx={{ display: 'flex', alignItems: 'center', gap: 1.25, py: 0.6, px: 0.5, cursor: 'pointer', borderRadius: c.radius.sm, '&:hover': { bgcolor: c.bg.elevated } }}>
-                  <Box sx={{ fontSize: '0.72rem', fontWeight: 700, color: statusColor(r.status, c), bgcolor: statusBg(r.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm, minWidth: 64, textAlign: 'center' }}>
+                  <Box sx={{ fontSize: '0.75rem', fontWeight: 700, color: statusColor(r.status, c), bgcolor: statusBg(r.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm, minWidth: 64, textAlign: 'center' }}>
                     {labelForStatus(r.status)}
                   </Box>
                   {showWorkflow && workflowTitleFor ? (
                     <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography sx={{ fontSize: '0.84rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{workflowTitleFor(r.workflow_id)}</Typography>
-                      <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost }}>{formatRunDate(r.started_at)}</Typography>
+                      <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{workflowTitleFor(r.workflow_id)}</Typography>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>{formatRunDate(r.started_at)}</Typography>
                     </Box>
                   ) : (
-                    <Typography sx={{ fontSize: '0.88rem', color: c.text.primary, flex: 1 }}>{formatRunDate(r.started_at)}</Typography>
+                    <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, flex: 1 }}>{formatRunDate(r.started_at)}</Typography>
                   )}
-                  {dur && <Typography sx={{ fontSize: '0.74rem', color: c.text.ghost }}>{dur}</Typography>}
-                  {r.cost_usd > 0 && <Typography sx={{ fontSize: '0.74rem', color: c.text.ghost }}>${r.cost_usd.toFixed(4)}</Typography>}
+                  {dur && <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>{dur}</Typography>}
+                  {r.cost_usd > 0 && <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>${r.cost_usd.toFixed(4)}</Typography>}
                   {/* Chevron makes the row read as expandable instead of
                       static text. Rotates 180° while open so the affordance
                       stays visible after click. */}
-                  <Box sx={{ fontSize: '0.7rem', color: c.text.ghost, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s ease' }}>▾</Box>
+                  <Box sx={{ fontSize: '0.6875rem', color: c.text.ghost, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s ease' }}>▾</Box>
                 </Box>
                 {expanded && (
                   <Box sx={{ ml: 8, mt: 0.25, mb: 0.75, px: 1, py: 0.75, bgcolor: c.bg.elevated, borderRadius: c.radius.sm, border: `1px solid ${c.border.subtle}`, display: 'flex', alignItems: 'center' }}>
 
                     {r.error ? (
-                      <Typography sx={{ fontSize: '0.78rem', color: c.status.error, lineHeight: 1.4 }}>{r.error}</Typography>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.status.error, lineHeight: 1.4 }}>{r.error}</Typography>
                     ) : r.session_id ? (
-                      <Box onClick={(e) => { e.stopPropagation(); onOpen(r); }} role="button" sx={{ fontSize: '0.78rem', fontWeight: 600, color: c.accent.primary, cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}>
+                      <Box onClick={(e) => { e.stopPropagation(); onOpen(r); }} role="button" sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.accent.primary, cursor: 'pointer', '&:hover': { textDecoration: 'underline' } }}>
                         Click to see the full conversation →
                       </Box>
                     ) : (
-                      <Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1.4 }}>No session was recorded for this run.</Typography>
+                      <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1.4 }}>No session was recorded for this run.</Typography>
                     )}
                   </Box>
                 )}
@@ -748,20 +748,20 @@ export function HistoryList({ runs, onOpen, showWorkflow = false, workflowTitleF
 
 export function HistoryDetail({ run, onBack }: { run: WorkflowRun | null; onBack: () => void }) {
   const c = useClaudeTokens();
-  if (!run) return <Typography sx={{ fontSize: '0.88rem', color: c.text.muted }}>Run not found</Typography>;
+  if (!run) return <Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>Run not found</Typography>;
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <Box onClick={onBack} role="button" sx={{ fontSize: '0.82rem', color: c.text.muted, cursor: 'pointer', '&:hover': { color: c.accent.primary } }}>← back</Box>
-        <Box sx={{ fontSize: '0.72rem', fontWeight: 700, color: statusColor(run.status, c), bgcolor: statusBg(run.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm }}>{labelForStatus(run.status)}</Box>
-        <Typography sx={{ fontSize: '0.88rem', color: c.text.primary, fontWeight: 600 }}>{formatRunDate(run.started_at)}</Typography>
+        <Box onClick={onBack} role="button" sx={{ fontSize: '0.8125rem', color: c.text.muted, cursor: 'pointer', '&:hover': { color: c.accent.primary } }}>← back</Box>
+        <Box sx={{ fontSize: '0.75rem', fontWeight: 700, color: statusColor(run.status, c), bgcolor: statusBg(run.status, c), px: 0.8, py: 0.3, borderRadius: c.radius.sm }}>{labelForStatus(run.status)}</Box>
+        <Typography sx={{ fontSize: '0.875rem', color: c.text.primary, fontWeight: 600 }}>{formatRunDate(run.started_at)}</Typography>
       </Box>
       {run.error && (
-        <Typography sx={{ fontSize: '0.85rem', color: c.status.error, bgcolor: c.status.errorBg, p: 1, borderRadius: c.radius.sm }}>{run.error}</Typography>
+        <Typography sx={{ fontSize: '0.875rem', color: c.status.error, bgcolor: c.status.errorBg, p: 1, borderRadius: c.radius.sm }}>{run.error}</Typography>
       )}
-      <Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, lineHeight: 1.5 }}>Started {formatRunDate(run.started_at)}, finished {run.finished_at ? formatRunDate(run.finished_at) : 'in progress'}.</Typography>
+      <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.5 }}>Started {formatRunDate(run.started_at)}, finished {run.finished_at ? formatRunDate(run.finished_at) : 'in progress'}.</Typography>
       {run.session_id && (
-        <Box sx={{ fontSize: '0.82rem', color: c.accent.primary, mt: 0.5 }}>Session: {run.session_id.slice(0, 8)}</Box>
+        <Box sx={{ fontSize: '0.8125rem', color: c.accent.primary, mt: 0.5 }}>Session: {run.session_id.slice(0, 8)}</Box>
       )}
     </Box>
   );
diff --git a/frontend/src/app/pages/Workflows/workflowVisuals.tsx b/frontend/src/app/pages/Workflows/workflowVisuals.tsx
index 7b503fb1..acbd67bd 100644
--- a/frontend/src/app/pages/Workflows/workflowVisuals.tsx
+++ b/frontend/src/app/pages/Workflows/workflowVisuals.tsx
@@ -73,7 +73,7 @@ export function StatusDot({ status }: { status: LastRunStatus | null | undefined
         flexShrink: 0,
       }}>
         <Box sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: dotColor, boxShadow: status === 'failure' ? `0 0 4px ${c.status.error}` : 'none' }} />
-        <Typography sx={{ fontSize: '0.66rem', fontWeight: 700, color: dotColor, letterSpacing: '0.02em' }}>
+        <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: dotColor, letterSpacing: '0.02em' }}>
           {word}
         </Typography>
       </Box>
@@ -115,7 +115,7 @@ export function WeekdayDots({ on_days }: { on_days: number[] }) {
           <Box key={`${lbl}-${idx}`} sx={{
             width: 12, height: 12, borderRadius: '50%',
             display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-            fontSize: '0.6rem', fontWeight: 700,
+            fontSize: '0.625rem', fontWeight: 700,
             color: active ? '#fff' : c.text.ghost,
             bgcolor: active ? c.accent.primary : 'transparent',
             border: `1px solid ${active ? c.accent.primary : c.border.subtle}`,
@@ -149,7 +149,7 @@ export function PermissionChip({ workflow }: { workflow: Workflow }) {
     <Tooltip title={label}>
       <Box sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.35,
-        fontSize: '0.74rem', fontWeight: 500,
+        fontSize: '0.75rem', fontWeight: 500,
         color: c.text.secondary,
         bgcolor: c.bg.elevated,
         border: `1px solid ${c.border.subtle}`,
@@ -158,7 +158,7 @@ export function PermissionChip({ workflow }: { workflow: Workflow }) {
         {tiers.map((t, i) => (
           <React.Fragment key={i}>
             {permIcon(t.kind)}
-            {i < tiers.length - 1 && <Box sx={{ fontSize: '0.7rem', color: c.text.ghost, mx: 0.1 }}>→</Box>}
+            {i < tiers.length - 1 && <Box sx={{ fontSize: '0.6875rem', color: c.text.ghost, mx: 0.1 }}>→</Box>}
           </React.Fragment>
         ))}
       </Box>
@@ -189,7 +189,7 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
           role={enabled ? 'button' : undefined}
           sx={{
             display: 'inline-flex', alignItems: 'center', gap: 0.4,
-            fontSize: '0.74rem', fontWeight: 600,
+            fontSize: '0.75rem', fontWeight: 600,
             color: enabled ? c.accent.primary : c.text.muted,
             bgcolor: enabled ? c.accent.primary + '14' : c.bg.elevated,
             border: `1px solid ${enabled ? c.accent.primary + '40' : c.border.subtle}`,
@@ -211,7 +211,7 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}>
         <Box sx={{ p: 1, display: 'flex', flexDirection: 'column', gap: 0.5, minWidth: 220 }}>
-          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
+          <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.muted, letterSpacing: '0.06em' }}>
             QUICK TIME EDIT
           </Typography>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
@@ -223,17 +223,17 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
                 const isPm = sched.hour >= 12;
                 patchSched({ hour: (h12 % 12) + (isPm ? 12 : 0) });
               }}
-              sx={{ fontSize: '0.78rem', '& .MuiSelect-select': { py: 0.4 } }}>
+              sx={{ fontSize: '0.75rem', '& .MuiSelect-select': { py: 0.4 } }}>
               {Array.from({ length: 12 }, (_, i) => i + 1).map((h) => (
                 <MenuItem key={h} value={h}>{h}</MenuItem>
               ))}
             </Select>
-            <Typography sx={{ fontSize: '0.85rem' }}>:</Typography>
+            <Typography sx={{ fontSize: '0.875rem' }}>:</Typography>
             <Select
               size="small"
               value={sched.minute}
               onChange={(e) => patchSched({ minute: Number(e.target.value) })}
-              sx={{ fontSize: '0.78rem', '& .MuiSelect-select': { py: 0.4 } }}>
+              sx={{ fontSize: '0.75rem', '& .MuiSelect-select': { py: 0.4 } }}>
               {[0, 15, 30, 45].map((m) => (
                 <MenuItem key={m} value={m}>{String(m).padStart(2, '0')}</MenuItem>
               ))}
@@ -247,12 +247,12 @@ export function ScheduleChip({ workflow }: { workflow: Workflow }) {
                 if (wasPm === willBePm) return;
                 patchSched({ hour: willBePm ? sched.hour + 12 : sched.hour - 12 });
               }}
-              sx={{ fontSize: '0.78rem', '& .MuiSelect-select': { py: 0.4 } }}>
+              sx={{ fontSize: '0.75rem', '& .MuiSelect-select': { py: 0.4 } }}>
               <MenuItem value="AM">AM</MenuItem>
               <MenuItem value="PM">PM</MenuItem>
             </Select>
           </Box>
-          <Typography sx={{ fontSize: '0.68rem', color: c.text.ghost, mt: 0.25 }}>
+          <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, mt: 0.25 }}>
             Saved as you change.
           </Typography>
         </Box>
@@ -330,7 +330,7 @@ export function CostChip({ workflow, connectionMode }: { workflow: Workflow; con
 function chipSx(c: ReturnType<typeof useClaudeTokens>) {
   return {
     display: 'inline-flex', alignItems: 'center', gap: 0.3,
-    fontSize: '0.74rem', fontWeight: 600,
+    fontSize: '0.75rem', fontWeight: 600,
     color: c.text.secondary,
     bgcolor: c.bg.elevated,
     border: `1px solid ${c.border.subtle}`,
@@ -345,7 +345,7 @@ export function LastFiredHint({ workflow }: { workflow: Workflow }) {
   const ms = Date.now() - new Date(workflow.last_run_at).getTime();
   const ago = relTime(ms);
   return (
-    <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost }}>Last ran {ago}</Typography>
+    <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost }}>Last ran {ago}</Typography>
   );
 }
 
@@ -408,7 +408,7 @@ export function StreakBadge({ runs }: { runs: WorkflowRun[] | undefined }) {
     <Tooltip title={`${n} successful runs in a row.`}>
       <Box sx={{
         display: 'inline-flex', alignItems: 'center', gap: 0.3,
-        fontSize: '0.72rem', fontWeight: 700,
+        fontSize: '0.75rem', fontWeight: 700,
         color: c.status.success,
         bgcolor: c.status.successBg,
         border: `1px solid ${c.status.success + '60'}`,
diff --git a/frontend/src/shared/styles/claudeTokens.ts b/frontend/src/shared/styles/claudeTokens.ts
index 5efc825a..3e1c7bba 100644
--- a/frontend/src/shared/styles/claudeTokens.ts
+++ b/frontend/src/shared/styles/claudeTokens.ts
@@ -2,6 +2,8 @@
 // reads as noise; snap to these 7 steps so type feels intentional and consistent. px comments assume a
 // 16px root. Use c.font.size.* instead of a raw rem string in anything you touch.
 export interface FontSizeScale {
+  micro: string;   // 10px, densest chrome (badges, kbd hints)
+  xxs: string;     // 11px, tiny meta / timestamps
   xs: string;      // 12px, captions, meta, micro labels
   sm: string;      // 13px, secondary / small body
   base: string;    // 14px, default body + most UI text
@@ -12,6 +14,8 @@ export interface FontSizeScale {
 }
 
 export const fontSize: FontSizeScale = {
+  micro: '0.625rem',
+  xxs: '0.6875rem',
   xs: '0.75rem',
   sm: '0.8125rem',
   base: '0.875rem',
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index 422eae87..d03e510a 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -124,7 +124,7 @@ const VoiceOverlay: React.FC = () => {
         WebkitBackdropFilter: 'blur(20px) saturate(160%)',
         boxShadow: '0 8px 28px rgba(0,0,0,0.4)',
         color: 'rgba(255,255,255,0.92)',
-        fontSize: '0.82rem',
+        fontSize: '0.8125rem',
         fontWeight: 500,
         '@keyframes vin': { from: { opacity: 0, transform: 'translate(-50%, 6px)' }, to: { opacity: 1, transform: 'translate(-50%, 0)' } },
         animation: 'vin 0.16s ease-out',

From 6952d3d05e69694e19c40119b61fa0d0b9c23d81 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 11:57:08 -0700
Subject: [PATCH 167/248] [eric] chat: visible fullscreen exit chip, Dictate in
 the composer menu, dedupe browser status rows, calmer live tool border

---
 .../AgentChat/ChatInput/toolbar/ToolbarActions.tsx   | 12 ++++++++++++
 .../pages/AgentChat/shell/BrowserAgentInlineFeed.tsx |  7 ++++++-
 .../AgentChat/tool-bubbles/DefaultToolBubble.tsx     |  4 +++-
 .../src/app/pages/Dashboard/cards/WindowControls.tsx | 10 ++++++----
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index 7138ae55..fc8be109 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -7,6 +7,8 @@ import StopIcon from '@mui/icons-material/Stop';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import AdsClickIcon from '@mui/icons-material/AdsClick';
 import LanguageIcon from '@mui/icons-material/Language';
+import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
+import { useVoice } from '@/shared/voice/VoiceDictationContext';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 import { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { ComposerPlusMenu, ActiveTogglePills, PlusMenuItem } from './ComposerPlusMenu';
@@ -49,6 +51,7 @@ export const ToolbarActions: React.FC<Props> = ({
       elementSelection.setSelectMode(true);
     }
   };
+  const { state: voiceState, toggle: voiceToggle } = useVoice();
   const plusItems: PlusMenuItem[] = [];
   plusItems.push({
     key: 'attach',
@@ -56,6 +59,15 @@ export const ToolbarActions: React.FC<Props> = ({
     icon: <AttachFileIcon sx={{ fontSize: 17 }} />,
     onSelect: () => generalFileInputRef.current?.click(),
   });
+  // A menu click can't be held, so this entry always toggles regardless of the hold-to-talk setting.
+  plusItems.push({
+    key: 'dictate',
+    label: voiceState === 'recording' ? 'Stop dictation' : 'Dictate',
+    icon: <MicNoneOutlinedIcon sx={{ fontSize: 17 }} />,
+    toggle: true,
+    active: voiceState === 'recording',
+    onSelect: voiceToggle,
+  });
   if (onToggleWebSearch) {
     plusItems.push({
       key: 'web',
diff --git a/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx b/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
index 86d50750..afa393b0 100644
--- a/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
@@ -219,7 +219,12 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
       const entries: FeedEntry[] = [];
       for (const msg of session.messages) {
         const entry = formatMessage(msg);
-        if (entry) entries.push(entry);
+        if (!entry) continue;
+        // Retries emit the same status line back-to-back ("Picking up what I learned..." x4); one
+        // row carries the information, the repeats were pure noise in the transcript.
+        const prev = entries[entries.length - 1];
+        if (prev && prev.type === entry.type && prev.text === entry.text) continue;
+        entries.push(entry);
       }
       return { session, entries };
     });
diff --git a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
index 0d5574e3..74918d16 100644
--- a/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
@@ -80,7 +80,9 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
           bgcolor: mcpCompact ? 'transparent' : c.bg.elevated,
           border: mcpCompact ? 'none' : `1px solid ${
             isPending || isStreaming
-              ? c.accent.primary
+              // Half-strength accent: still clearly "working", but a saturated user accent (greens
+              // especially) at full strength read as a loud alarm ring around a routine tool call.
+              ? c.accent.primary + '66'
               : isDenied
                 ? c.status.error + '60'
                 : c.border.subtle
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index b1caf31e..634e381e 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -76,10 +76,12 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
           onPointerDown={stop}
           sx={{
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            width: 22, height: 22, p: 0, border: 'none', borderRadius: '6px',
-            background: 'transparent', color: 'inherit', opacity: 0.65, cursor: 'pointer',
-            transition: 'opacity 120ms, background 120ms',
-            '&:hover': { opacity: 1, background: 'rgba(136,136,136,0.18)' },
+            width: 24, height: 24, p: 0, border: 'none', borderRadius: '7px',
+            // Neutral chip at rest so it reads on ANY ground (the fullscreen chat wash is dark, the
+            // browser chrome is light); hover goes explicit white-on-dark so it can never disappear.
+            background: 'rgba(128,128,128,0.28)', color: 'inherit', opacity: 0.9, cursor: 'pointer',
+            transition: 'opacity 120ms, background 120ms, color 120ms',
+            '&:hover': { opacity: 1, background: 'rgba(0,0,0,0.5)', color: '#fff' },
           }}
         >
           <FullscreenExitRoundedIcon sx={{ fontSize: 16 }} />

From 8c0340c36044852b51855c83648cf9bcf3660c89 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 12:01:58 -0700
Subject: [PATCH 168/248] [eric] nudges: schedule offer is an agent
 interjection with cadence choices, not a rigid Monday toast

---
 .../components/nudges/ScheduleOfferToast.tsx  | 122 ++++++++++++------
 1 file changed, 80 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/components/nudges/ScheduleOfferToast.tsx b/frontend/src/app/components/nudges/ScheduleOfferToast.tsx
index 0ba759ac..6b1b7cb8 100644
--- a/frontend/src/app/components/nudges/ScheduleOfferToast.tsx
+++ b/frontend/src/app/components/nudges/ScheduleOfferToast.tsx
@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { createWorkflow } from '@/shared/state/workflowsSlice';
@@ -14,12 +15,22 @@ function offerAlreadyResolved(): boolean {
   try { return localStorage.getItem(OFFER_DONE_KEY) !== null; } catch { return false; }
 }
 
-// The dependency beat: the first personalized starter that COMPLETES earns one offer to become a standing weekly job. One-shot per install; accept creates a real scheduled workflow (Mondays 9am), dismiss never asks again.
+// The user picks the rhythm, we never dictate it: each chip is one click to a real schedule.
+const CADENCES: Array<{ key: string; label: string; confirm: string; repeat_unit: 'day' | 'week'; on_days: number[] }> = [
+  { key: 'daily', label: 'Every morning', confirm: 'every morning at 9', repeat_unit: 'day', on_days: [] },
+  { key: 'weekdays', label: 'Weekdays', confirm: 'weekdays at 9', repeat_unit: 'week', on_days: [1, 2, 3, 4, 5] },
+  { key: 'weekly', label: 'Mondays', confirm: 'Mondays at 9', repeat_unit: 'week', on_days: [1] },
+];
+
+// The dependency beat: the first personalized starter that COMPLETES earns ONE offer to become a
+// standing job. Reads as the agent proactively chiming in: bottom-center over the composer, dark
+// chrome, spring entrance. The user picks the cadence (chips), never a preset shoved at them; the X
+// or any chip resolves it forever (one-shot per install).
 const ScheduleOfferToast: React.FC<{ dashboardId: string }> = ({ dashboardId }) => {
   const c = useClaudeTokens();
   const dispatch = useAppDispatch();
   const [resolved, setResolved] = useState(offerAlreadyResolved);
-  const [scheduled, setScheduled] = useState(false);
+  const [confirmText, setConfirmText] = useState<string | null>(null);
   const starters = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
   const sessions = useAppSelector((s) => s.agents.sessions);
   const model = useAppSelector((s) => s.settings.data.default_model);
@@ -42,59 +53,86 @@ const ScheduleOfferToast: React.FC<{ dashboardId: string }> = ({ dashboardId })
     setResolved(true);
   }, []);
 
-  const accept = useCallback(async () => {
+  const accept = useCallback(async (cadence: typeof CADENCES[number]) => {
     if (!offer) return;
     try {
       await dispatch(createWorkflow({
         title: offer.title,
         description: 'Created from your first run during onboarding.',
         steps: [{ id: `step-${Date.now().toString(36)}`, text: offer.prompt, enabled: true }],
-        schedule: { enabled: true, repeat_every: 1, repeat_unit: 'week', on_days: [1], hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 },
+        schedule: { enabled: true, repeat_every: 1, repeat_unit: cadence.repeat_unit, on_days: cadence.on_days, hour: 9, minute: 0, timezone: 'local', ends_at: null, max_runs: null, runs_count: 0 },
         dashboard_id: dashboardId,
         model,
       })).unwrap();
-      setScheduled(true);
+      setConfirmText(`Done. It runs ${cadence.confirm}, tweak anything under Workflows.`);
       window.setTimeout(finishOffer, 5000);
     } catch {
       finishOffer();
     }
   }, [offer, dispatch, dashboardId, model, finishOffer]);
 
+  const open = !resolved && (!!offer || !!confirmText);
+
   return (
-    <Snackbar
-      open={!resolved && (!!offer || scheduled)}
-      autoHideDuration={null}
-      // Clickaway would kill the offer before it is read; only the X or a button resolves it.
-      onClose={(event, reason) => { if (reason !== 'clickaway') finishOffer(); }}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-    >
-      <Alert
-        icon={false}
-        severity="success"
-        sx={{
-          bgcolor: c.bg.surface,
-          color: c.text.primary,
-          border: `1px solid ${c.border.medium}`,
-          '& .MuiAlert-action': { alignItems: 'center', pt: 0 },
-        }}
-        action={
-          scheduled ? undefined : (
-            <>
-              <Button size="small" onClick={() => { void accept(); }} sx={{ color: c.accent.primary, fontWeight: 700 }}>
-                Every Monday
-              </Button>
-              <IconButton size="small" onClick={finishOffer} sx={{ color: c.text.tertiary }}>
-                <CloseIcon fontSize="small" />
-              </IconButton>
-            </>
-          )
-        }
-      >
-        {scheduled
-          ? 'Scheduled for Mondays at 9am. Manage it under Workflows.'
-          : `Nice, that worked. Want me to run "${offer?.title ?? ''}" every Monday at 9am?`}
-      </Alert>
-    </Snackbar>
+    <AnimatePresence>
+      {open && (
+        <Box sx={{ position: 'fixed', bottom: 74, left: '50%', transform: 'translateX(-50%)', zIndex: 1400, pointerEvents: 'none' }}>
+          <motion.div
+            initial={{ opacity: 0, y: 18, scale: 0.96 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.98 }}
+            transition={{ type: 'spring', stiffness: 380, damping: 28 }}
+            style={{
+              pointerEvents: 'auto',
+              display: 'flex', alignItems: 'center', gap: 10,
+              maxWidth: 'min(640px, 90vw)',
+              padding: '10px 12px 10px 16px',
+              borderRadius: 14,
+              background: 'rgba(22,12,34,0.92)',
+              backdropFilter: 'blur(20px) saturate(160%)',
+              WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+              boxShadow: '0 12px 36px rgba(0,0,0,0.4)',
+              color: 'rgba(255,255,255,0.92)',
+            }}
+          >
+            {confirmText ? (
+              <>
+                <CheckRoundedIcon sx={{ fontSize: 17, color: '#4fdf9f', flexShrink: 0 }} />
+                <Box sx={{ fontSize: '0.8125rem' }}>{confirmText}</Box>
+              </>
+            ) : (
+              <>
+                <AutoAwesomeRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />
+                <Box sx={{ fontSize: '0.8125rem', minWidth: 0 }}>
+                  That worked. Want me to run "{offer?.title ?? ''}" on a schedule?
+                </Box>
+                <Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
+                  {CADENCES.map((cad) => (
+                    <Box
+                      key={cad.key}
+                      component="button"
+                      onClick={() => { void accept(cad); }}
+                      sx={{
+                        border: '1px solid rgba(255,255,255,0.22)', background: 'rgba(255,255,255,0.07)',
+                        color: 'rgba(255,255,255,0.92)', borderRadius: '999px', px: 1.25, py: 0.4,
+                        fontSize: '0.75rem', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+                        whiteSpace: 'nowrap', transition: 'background 120ms, border-color 120ms',
+                        '&:hover': { background: `${c.accent.primary}30`, borderColor: c.accent.primary },
+                      }}
+                    >
+                      {cad.label}
+                    </Box>
+                  ))}
+                </Box>
+                <IconButton size="small" onClick={finishOffer} sx={{ color: 'rgba(255,255,255,0.55)', p: 0.4, '&:hover': { color: '#fff' } }}>
+                  <CloseIcon sx={{ fontSize: 15 }} />
+                </IconButton>
+              </>
+            )}
+          </motion.div>
+        </Box>
+      )}
+    </AnimatePresence>
   );
 };
 

From f62bfbf71c42987206ebf68385f29122bfcae7bb Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 12:27:23 -0700
Subject: [PATCH 169/248] [eric] composer: Claude-style two-level plus menu
 (Skills attach pills, Tools & connectors flyout)

---
 .../ChatInput/toolbar/ChatInputToolbar.tsx    |   2 +
 .../ChatInput/toolbar/ComposerPlusMenu.tsx    | 107 ++++++++++++------
 .../ChatInput/toolbar/ToolbarActions.tsx      |  55 ++++++++-
 .../ChatInput/view/ChatInputView.tsx          |   1 +
 4 files changed, 128 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
index a48dc8ed..6b492b5d 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
@@ -52,6 +52,7 @@ interface Props {
   handleSend: () => void;
   webSearchOn?: boolean;
   onToggleWebSearch?: () => void;
+  onAttachSkill?: (skillId: string) => void;
 }
 
 export const ChatInputToolbar: React.FC<Props> = (p) => {
@@ -176,6 +177,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
         handleSend={handleSend}
         webSearchOn={webSearchOn}
         onToggleWebSearch={onToggleWebSearch}
+        onAttachSkill={p.onAttachSkill}
       />
     </Box>
   );
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
index 5e013f04..a3804218 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
@@ -7,6 +7,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { ClaudeTokens } from '@/shared/styles/claudeTokens';
 
@@ -17,6 +18,10 @@ export interface PlusMenuItem {
   // A toggle shows a check when active and stays open-able; an action fires and closes.
   toggle?: boolean;
   active?: boolean;
+  // Quiet right-aligned text: a shortcut hint or a status ("2 active").
+  hint?: string;
+  // Claude-style flyout: a row with children opens a nested menu instead of firing onSelect.
+  children?: PlusMenuItem[];
   onSelect: () => void;
 }
 
@@ -25,7 +30,55 @@ export interface PlusMenuItem {
 // ActiveTogglePills) so their state is visible with the menu closed.
 export const ComposerPlusMenu: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[] }> = ({ c, items }) => {
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  // One flyout at a time (Claude's grammar): hovering/clicking a parent row opens its submenu
+  // anchored to the row; moving to a sibling row closes it.
+  const [subFor, setSubFor] = useState<{ key: string; el: HTMLElement } | null>(null);
+  const closeAll = (): void => { setSubFor(null); setAnchor(null); };
   if (items.length === 0) return null;
+
+  const paperSx = {
+    bgcolor: c.bg.surface,
+    border: `1px solid ${c.border.subtle}`,
+    borderRadius: '12px',
+    minWidth: 208,
+    boxShadow: c.shadow.lg,
+    overflow: 'hidden',
+  };
+
+  const row = (it: PlusMenuItem, inSub: boolean): React.ReactElement => (
+    <MenuItem
+      key={it.key}
+      onClick={(e) => {
+        if (it.children) { setSubFor((prev) => (prev?.key === it.key ? null : { key: it.key, el: e.currentTarget as HTMLElement })); return; }
+        it.onSelect();
+        if (!it.toggle) closeAll();
+      }}
+      onMouseEnter={(e) => {
+        if (it.children) setSubFor({ key: it.key, el: e.currentTarget as HTMLElement });
+        else if (!inSub) setSubFor(null);
+      }}
+      sx={{
+        py: 0.9,
+        px: 1.5,
+        gap: 1.25,
+        display: 'flex',
+        alignItems: 'center',
+        color: it.active ? c.accent.primary : c.text.secondary,
+        '&:hover': { bgcolor: c.bg.secondary },
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', color: 'inherit', flexShrink: 0 }}>{it.icon}</Box>
+      <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
+      {it.hint && (
+        <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0 }}>{it.hint}</Typography>
+      )}
+      {it.toggle && it.active && <CheckRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
+      {it.children && <ChevronRightRoundedIcon sx={{ fontSize: 16, color: c.text.ghost, flexShrink: 0 }} />}
+    </MenuItem>
+  );
+
+  const openSub = subFor ? items.find((it) => it.key === subFor.key) : null;
+
   return (
     <>
       <Tooltip title="Add">
@@ -48,45 +101,27 @@ export const ComposerPlusMenu: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[]
       <Menu
         anchorEl={anchor}
         open={!!anchor}
-        onClose={() => setAnchor(null)}
+        onClose={closeAll}
         anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
         transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        slotProps={{
-          paper: {
-            sx: {
-              bgcolor: c.bg.surface,
-              border: `1px solid ${c.border.subtle}`,
-              borderRadius: '12px',
-              minWidth: 208,
-              mb: 0.5,
-              boxShadow: c.shadow.lg,
-              overflow: 'hidden',
-            },
-          },
-        }}
+        slotProps={{ paper: { sx: { ...paperSx, mb: 0.5 } } }}
       >
-        {items.map((it) => (
-          <MenuItem
-            key={it.key}
-            onClick={() => {
-              it.onSelect();
-              if (!it.toggle) setAnchor(null);
-            }}
-            sx={{
-              py: 0.9,
-              px: 1.5,
-              gap: 1.25,
-              display: 'flex',
-              alignItems: 'center',
-              color: it.active ? c.accent.primary : c.text.secondary,
-              '&:hover': { bgcolor: c.bg.secondary },
-            }}
-          >
-            <Box sx={{ display: 'flex', alignItems: 'center', color: 'inherit', flexShrink: 0 }}>{it.icon}</Box>
-            <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
-            {it.toggle && it.active && <CheckRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
-          </MenuItem>
-        ))}
+        {items.map((it) => row(it, false))}
+      </Menu>
+      <Menu
+        anchorEl={subFor?.el ?? null}
+        open={!!subFor && !!openSub?.children?.length}
+        onClose={() => setSubFor(null)}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        // The parent Menu already owns focus; a modal submenu would steal it and flicker.
+        disableAutoFocus
+        disableEnforceFocus
+        hideBackdrop
+        sx={{ pointerEvents: 'none' }}
+        slotProps={{ paper: { sx: { ...paperSx, ml: 0.5, pointerEvents: 'auto', maxHeight: 320, overflowY: 'auto' } } }}
+      >
+        {(openSub?.children ?? []).map((child) => row(child, true))}
       </Menu>
     </>
   );
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index fc8be109..e34aef8a 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -8,6 +8,13 @@ import AttachFileIcon from '@mui/icons-material/AttachFile';
 import AdsClickIcon from '@mui/icons-material/AdsClick';
 import LanguageIcon from '@mui/icons-material/Language';
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
+import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
+import ExtensionOutlinedIcon from '@mui/icons-material/ExtensionOutlined';
+import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { fetchSkills } from '@/shared/state/skillsSlice';
+import { openSettingsModal } from '@/shared/state/settingsSlice';
 import { useVoice } from '@/shared/voice/VoiceDictationContext';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 import { ClaudeTokens } from '@/shared/styles/claudeTokens';
@@ -29,13 +36,20 @@ interface Props {
   handleSend: () => void;
   webSearchOn?: boolean;
   onToggleWebSearch?: () => void;
+  onAttachSkill?: (skillId: string) => void;
 }
 
 export const ToolbarActions: React.FC<Props> = ({
   c, elementSelection, autoRunMode, ownerId, sessionId, generalFileInputRef,
   addImageFiles, uploadAndAttachFiles, hasContent, disabled, isRunning, onStop, handleSend,
-  webSearchOn, onToggleWebSearch,
+  webSearchOn, onToggleWebSearch, onAttachSkill,
 }) => {
+  const dispatch = useAppDispatch();
+  // Lazy-load the skills list the first time the menu could need it; cheap and cached in the slice.
+  const skills = useAppSelector((s) => s.skills.items);
+  const skillsLoaded = useAppSelector((s) => s.skills.loaded);
+  const activeMcps = useAppSelector((s) => (sessionId ? s.agents.sessions[sessionId]?.active_mcps : undefined) ?? []);
+  React.useEffect(() => { if (!skillsLoaded) dispatch(fetchSkills()); }, [skillsLoaded, dispatch]);
   // Every composer action collapses into one "+" so the bar reads empty at rest; active toggles
   // (web search, selecting) still surface as a pill so their state stays visible. New capabilities
   // (skills, MCP tools, voice, image) just push another entry onto this list, no new bar icon.
@@ -88,6 +102,45 @@ export const ToolbarActions: React.FC<Props> = ({
       onSelect: toggleSelect,
     });
   }
+  // Claude-style flyouts: Skills attaches a real pill (same path as typing /skill); Tools shows the
+  // session's active connectors and jumps to Settings > Tools for management.
+  const skillList = Object.values(skills);
+  if (onAttachSkill && skillList.length > 0) {
+    plusItems.push({
+      key: 'skills',
+      label: 'Skills',
+      icon: <AutoAwesomeOutlinedIcon sx={{ fontSize: 17 }} />,
+      onSelect: () => {},
+      children: skillList.slice(0, 12).map((sk) => ({
+        key: `skill-${sk.id}`,
+        label: sk.name,
+        icon: <DescriptionOutlinedIcon sx={{ fontSize: 15 }} />,
+        onSelect: () => onAttachSkill(sk.id),
+      })),
+    });
+  }
+  plusItems.push({
+    key: 'tools',
+    label: 'Tools & connectors',
+    icon: <ExtensionOutlinedIcon sx={{ fontSize: 17 }} />,
+    hint: activeMcps.length > 0 ? `${activeMcps.length} active` : undefined,
+    onSelect: () => {},
+    children: [
+      ...activeMcps.map((name) => ({
+        key: `mcp-${name}`,
+        label: name,
+        icon: <ExtensionOutlinedIcon sx={{ fontSize: 15 }} />,
+        hint: 'active',
+        onSelect: () => dispatch(openSettingsModal('tools')),
+      })),
+      {
+        key: 'manage-tools',
+        label: 'Manage tools',
+        icon: <TuneRoundedIcon sx={{ fontSize: 15 }} />,
+        onSelect: () => dispatch(openSettingsModal('tools')),
+      },
+    ],
+  });
 
   return (
     <>
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
index 76048505..44c026d5 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
@@ -285,6 +285,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
         handleSend={p.handleSend}
         webSearchOn={p.webSearchOn}
         onToggleWebSearch={p.onToggleWebSearch}
+        onAttachSkill={(skillId) => p.handlePickerSelect({ id: skillId, type: 'skill', category: '', name: '', description: '', command: '', icon: null })}
       />
 
       <ChatInputOverlays

From 1441c52b3a1b0c7a82eb4013162a3dfc8468f114 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 12:49:07 -0700
Subject: [PATCH 170/248] [eric] voice: hotkey press-to-start/stop via main
 input relay (mac hides key releases; buttons keep true hold), drop status
 bubbles, hide built-in skills from flyout

---
 electron/main.js                              | 27 ++++++++-
 electron/preload.js                           |  8 +++
 .../ChatInput/toolbar/ToolbarActions.tsx      |  6 +-
 .../sections/general/GeneralInterface.tsx     |  2 +-
 .../shared/voice/VoiceDictationContext.tsx    | 55 +++++--------------
 frontend/src/shared/voice/VoiceOverlay.tsx    | 17 ++----
 .../src/shared/voice/useVoiceDictation.ts     |  7 +--
 7 files changed, 59 insertions(+), 63 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 5bcd41ed..847035a6 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1789,8 +1789,10 @@ app.whenReady().then(async () => {
   installMacMouseClamp();
 
   // Voice dictation hotkey. globalShortcut can't see key-up, so hold-to-talk is impossible through it;
-  // instead the shortcut is only registered while OUR window is unfocused (background toggle), and when
-  // the app is focused the renderer sees the real keydown/keyup and owns hold-vs-toggle itself.
+  // the shortcut is only registered while OUR window is unfocused (background toggle). When the app is
+  // focused, MAIN watches before-input-event (sees every keyDown/keyUp incl. modifiers, regardless of
+  // which element or webview has focus, and immune to macOS's letter-keyup-under-Cmd suppression at the
+  // DOM layer) and relays voice:hold-down / voice:hold-up; the renderer maps those to hold-vs-toggle.
   const VOICE_COMBO = 'CommandOrControl+Shift+D';
   const registerVoiceShortcut = () => {
     try {
@@ -1805,6 +1807,27 @@ app.whenReady().then(async () => {
   app.on('browser-window-focus', () => { try { globalShortcut.unregister(VOICE_COMBO); } catch (_) {} });
   app.on('browser-window-blur', registerVoiceShortcut);
 
+  // Every discrete combo press relays (autorepeat filtered); the renderer toggles record state.
+  // No held/release tracking: macOS delivers neither the letter keyup nor modifier releases to ANY
+  // Chromium layer while Cmd is down (verified empirically), so keyboard hold-release is undetectable
+  // without a native event tap. Keyboard = press to start/stop; the mic buttons own true hold-to-talk.
+  const installVoiceHoldRelay = (contents) => {
+    contents.on('before-input-event', (event, input) => {
+      const isD = (input.code === 'KeyD' || (input.key || '').toLowerCase() === 'd');
+      if (input.type === 'keyDown' && isD && (input.meta || input.control) && input.shift && !input.isAutoRepeat) {
+        if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:hold-down');
+        event.preventDefault();
+      }
+    });
+  };
+  // Installed via web-contents-created (not directly on mainWindow): createWindow() runs LATER in this
+  // whenReady sequence, so mainWindow is still undefined here. The hook catches the main window when it
+  // is born, and every webview guest too (guests swallow keys when a page has focus).
+  app.on('web-contents-created', (event, contents) => {
+    const t = contents.getType();
+    if (t === 'window' || t === 'webview') installVoiceHoldRelay(contents);
+  });
+
   // PASSKEY SPIKE (macOS only): turn on the Secure-Enclave/Touch ID WebAuthn authenticator that Electron 42 added. Without this, isUserVerifyingPlatformAuthenticatorAvailable() is hardwired false (why the old reject-shim existed). keychainAccessGroup MUST match the keychain-access-groups entitlement (Y26NUZH4NG.<bundle>.webauthn) or this throws. Windows has no equivalent, so the reject-shim still runs there.
   if (process.platform === 'darwin' && typeof app.configureWebAuthn === 'function') {
     try {
diff --git a/electron/preload.js b/electron/preload.js
index 53cb6f3b..4c1e5916 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -73,6 +73,14 @@ contextBridge.exposeInMainWorld('openswarm', {
     ipcRenderer.on('voice:toggle', listener);
     return () => ipcRenderer.removeListener('voice:toggle', listener);
   },
+  // Main-process hold relay (before-input-event): fires down/up for the combo regardless of DOM focus.
+  onVoiceHold: (onDown, onUp) => {
+    const down = () => onDown();
+    const up = () => onUp();
+    ipcRenderer.on('voice:hold-down', down);
+    ipcRenderer.on('voice:hold-up', up);
+    return () => { ipcRenderer.removeListener('voice:hold-down', down); ipcRenderer.removeListener('voice:hold-up', up); };
+  },
   // Hands a vetted social platform's partition cookies to its session-backed MCP shim (allowlisted domains only, gated again in the main process).
   getPartitionCookies: (domain) => ipcRenderer.invoke('get-partition-cookies', domain),
   // Silently reads the user's own chatgpt.com/claude.ai history offscreen (no card) for onboarding personalization; main owns the injected script + gates the provider.
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index e34aef8a..cca72991 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -103,8 +103,10 @@ export const ToolbarActions: React.FC<Props> = ({
     });
   }
   // Claude-style flyouts: Skills attaches a real pill (same path as typing /skill); Tools shows the
-  // session's active connectors and jumps to Settings > Tools for management.
-  const skillList = Object.values(skills);
+  // session's active connectors and jumps to Settings > Tools for management. Platform built-ins
+  // (swarm-debug Logger etc.) stay out: they're dev plumbing the agent discovers on its own, and
+  // their jargon reads hostile to a non-dev picking a skill.
+  const skillList = Object.values(skills).filter((sk) => !sk.built_in);
   if (onAttachSkill && skillList.length > 0) {
     plusItems.push({
       key: 'skills',
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index fe817599..379d9a1a 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -104,7 +104,7 @@ const GeneralInterface: React.FC<{
       <Box sx={inlineRowSx} {...settingSelectAttrs('voice_hold_to_talk', 'Dictation', 'Interface', 'Hold to talk, or tap to start and stop.')}>
         <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Dictation</Typography>
-          <Typography sx={descSx}>Hold the mic or Cmd+Shift+D to talk, or tap to start and stop.</Typography>
+          <Typography sx={descSx}>How the mic button works. Cmd+Shift+D always starts and stops.</Typography>
         </Box>
         <ToggleButtonGroup
           value={form.voice_hold_to_talk ?? true}
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
index 6fd0df21..5ea37ce6 100644
--- a/frontend/src/shared/voice/VoiceDictationContext.tsx
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -47,49 +47,20 @@ export function VoiceDictationProvider({ children }: { children: React.ReactNode
     }
   }, [holdMode, stop]);
 
-  // In-app hold-to-talk on the same combo as the global hotkey (Cmd/Ctrl+Shift+D). Main unregisters
-  // the global shortcut while our window is focused, so these real keydown/keyup events reach us;
-  // when the app is in the background the global shortcut still fires as a toggle (the OS gives us
-  // no key-up out there without a native event tap).
+  // The hotkey (Cmd/Ctrl+Shift+D) is press-to-start / press-to-stop, NOT hold: macOS delivers
+  // NEITHER the letter keyup nor the modifier releases to any Chromium layer while Cmd is held
+  // (proven empirically: DOM saw zero events, main's before-input-event saw only the first keyDown),
+  // so a keyboard hold-release is undetectable without a native event tap (uiohook class, the real
+  // fix, needs a packaged native module). Hold-to-talk lives on the mic buttons, which DO see
+  // pointerup. In-app presses arrive via main's before-input relay (works with webview focus and
+  // swallows the 'd' so it never types into a field); background presses via the global shortcut.
   useEffect(() => {
-    const isCombo = (e: KeyboardEvent): boolean => (e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'd' || e.key === 'D');
-    let watchdog = 0;
-    const release = (): void => {
-      if (!heldRef.current) return;
-      heldRef.current = false;
-      window.clearTimeout(watchdog);
-      if (stateRef.current === 'recording') void stop();
-    };
-    const down = (e: KeyboardEvent): void => {
-      if (!isCombo(e)) return;
-      e.preventDefault();
-      if (!holdMode) { if (!e.repeat) toggle(); return; }
-      if (!e.repeat && stateRef.current === 'idle') { heldRef.current = true; void start(); }
-      // Belt-and-braces release detection: macOS suppresses letter keyups while Cmd is held, so once
-      // the OS autorepeat stream starts, its going quiet means the key was let go. Arms only after the
-      // first repeat, so keyboards with repeat disabled still rely on the plain keyup below.
-      if (e.repeat && heldRef.current) {
-        window.clearTimeout(watchdog);
-        watchdog = window.setTimeout(release, 900);
-      }
-    };
-    const up = (e: KeyboardEvent): void => {
-      if (!holdMode || !heldRef.current) return;
-      // Any piece of the combo lifting ends the hold; key-order on release varies by hand.
-      if (e.key === 'd' || e.key === 'D' || e.key === 'Meta' || e.key === 'Control' || e.key === 'Shift') release();
-    };
-    // Switching windows mid-hold must never leave the mic hot.
-    const onBlur = (): void => release();
-    window.addEventListener('keydown', down, true);
-    window.addEventListener('keyup', up, true);
-    window.addEventListener('blur', onBlur);
-    return () => {
-      window.clearTimeout(watchdog);
-      window.removeEventListener('keydown', down, true);
-      window.removeEventListener('keyup', up, true);
-      window.removeEventListener('blur', onBlur);
-    };
-  }, [holdMode, start, stop, toggle]);
+    const off = (window as unknown as { openswarm?: { onVoiceHold?: (d: () => void, u: () => void) => () => void } }).openswarm?.onVoiceHold?.(
+      () => toggle(),
+      () => {},
+    );
+    return () => { off?.(); };
+  }, [toggle]);
 
   return (
     <VoiceContext.Provider value={{ state, lastText, error, pct, feedback, toggle, pressStart, pressEnd, holdMode, volumeRef }}>
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index d03e510a..433162cd 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -71,19 +71,10 @@ const VoiceOverlay: React.FC = () => {
   if (!visible) return null;
   const aurora = state === 'recording' ? <VoiceAurora volumeRef={volumeRef} /> : null;
 
-  let content: React.ReactElement;
+  let content: React.ReactElement | null;
   if (state === 'recording') {
-    content = (
-      <>
-        <MicIcon sx={{ fontSize: 16, color: '#ff8a8a' }} />
-        <span>Listening</span>
-        <Box component="span" sx={{
-          width: 6, height: 6, borderRadius: '50%', background: '#ff8a8a', ml: 0.25,
-          '@keyframes vpulse': { '0%,100%': { opacity: 0.3 }, '50%': { opacity: 1 } },
-          animation: 'vpulse 1s ease-in-out infinite',
-        }} />
-      </>
-    );
+    // The aurora IS the listening indicator; a pill on top of it read as clutter.
+    content = null;
   } else if (state === 'transcribing') {
     content = (<><CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} /><span>Transcribing</span></>);
   } else if (state === 'preparing') {
@@ -104,6 +95,7 @@ const VoiceOverlay: React.FC = () => {
   return (
     <>
     {aurora}
+    {content && (
     <Box
       sx={{
         position: 'fixed',
@@ -132,6 +124,7 @@ const VoiceOverlay: React.FC = () => {
     >
       {content}
     </Box>
+    )}
     </>
   );
 };
diff --git a/frontend/src/shared/voice/useVoiceDictation.ts b/frontend/src/shared/voice/useVoiceDictation.ts
index 9a59bd1e..306a9596 100644
--- a/frontend/src/shared/voice/useVoiceDictation.ts
+++ b/frontend/src/shared/voice/useVoiceDictation.ts
@@ -145,16 +145,15 @@ export function useVoiceDictation() {
         setLastText(text);
         // Land the text where the user's cursor is: focused field, then focused browser page, then
         // the OS paste fallback (other apps). The floating bubble is just confirmation, not the output.
+        // Success is silent-visual: the text landing at the cursor IS the feedback (plus the done blip).
+        // Only the clipboard fallback still speaks, because the user has to act (paste) to get the text.
         const target = injectAtFocus(text);
         if (target) {
           playDone();
-          setFeedback({ tone: 'ok', icon: 'check', text, at: Date.now() });
         } else {
           const inj = await window.openswarm?.voiceInject?.(text);
           if (inj?.pasted) playDone();
-          setFeedback(inj?.pasted
-            ? { tone: 'ok', icon: 'check', text, at: Date.now() }
-            : { tone: 'ok', icon: 'clipboard', text: `${text}  (copied, press Cmd+V)`, at: Date.now() });
+          else setFeedback({ tone: 'ok', icon: 'clipboard', text: `${text}  (copied, press Cmd+V)`, at: Date.now() });
         }
         setState('idle');
       } else if (res?.ok && !res.text) {

From 5c87b8aafcb2519c119626a549ef0d1a664159a4 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 12:53:53 -0700
Subject: [PATCH 171/248] [eric] help: real Help panel off the pill (ask starts
 a chat, bug/feature open prefilled GitHub issues, docs link)

---
 .../app/pages/Dashboard/desktop/HelpPanel.tsx | 182 ++++++++++++++++++
 .../app/pages/Dashboard/desktop/HelpPill.tsx  | 101 +++++-----
 2 files changed, 239 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx

diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
new file mode 100644
index 00000000..d4b88608
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
@@ -0,0 +1,182 @@
+import React, { useCallback, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { AnimatePresence, motion } from 'framer-motion';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+import BugReportOutlinedIcon from '@mui/icons-material/BugReportOutlined';
+import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
+import MenuBookOutlinedIcon from '@mui/icons-material/MenuBookOutlined';
+import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from '@/shared/state/agentsSlice';
+import { getLastDashboardId } from '@/shared/lastDashboardId';
+
+const REPO_ISSUES_URL = 'https://github.com/openswarm-ai/openswarm/issues/new';
+const DOCS_URL = 'https://docs.openswarm.com';
+
+function openExternal(url: string): void {
+  const api = (window as unknown as { openswarm?: { openExternal?: (u: string) => void } }).openswarm;
+  if (api?.openExternal) api.openExternal(url);
+  else window.open(url, '_blank');
+}
+
+type Pane = 'root' | 'bug' | 'idea';
+
+// The Help panel: Linear/Raycast-style popover off the Help pill. Ask leads (starts a real chat with
+// the question), then report-a-bug / request-a-feature (open a PREFILLED GitHub issue: version + OS
+// attached in the body, no secret and no backend needed, and the user can watch the thread for team
+// replies), then docs. Closes on outside click or Esc via the parent.
+const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+  const dispatch = useAppDispatch();
+  const model = useAppSelector((s) => s.settings.data.default_model);
+  const appVersion = useAppSelector((s) => s.update.appVersion);
+  const [pane, setPane] = useState<Pane>('root');
+  const [ask, setAsk] = useState('');
+  const [reportText, setReportText] = useState('');
+
+  const startChat = useCallback((prompt: string): void => {
+    const p = prompt.trim();
+    if (!p) return;
+    const dashboardId = getLastDashboardId() ?? undefined;
+    const config: AgentConfig = { name: 'Help', model, mode: 'agent', dashboard_id: dashboardId };
+    const draftId = dispatch(createDraftSession({ mode: 'agent', model, dashboardId: dashboardId ?? '', setActive: true })).payload.draftId;
+    void dispatch(launchAndSendFirstMessage({ draftId, config, prompt: p, mode: 'agent', model, expand: true }));
+    onClose();
+  }, [dispatch, model, onClose]);
+
+  const fileOnGitHub = useCallback((kind: 'bug' | 'idea'): void => {
+    const body = [
+      reportText.trim(),
+      '',
+      '---',
+      `App version: ${appVersion ?? 'dev'}`,
+      `Platform: ${navigator.platform}`,
+    ].join('\n');
+    const params = new URLSearchParams({
+      title: reportText.trim().split('\n')[0].slice(0, 80) || (kind === 'bug' ? 'Bug report' : 'Feature request'),
+      labels: kind === 'bug' ? 'bug' : 'enhancement',
+      body,
+    });
+    openExternal(`${REPO_ISSUES_URL}?${params.toString()}`);
+    onClose();
+  }, [reportText, appVersion, onClose]);
+
+  const rowSx = {
+    display: 'flex', alignItems: 'center', gap: 1.25, width: '100%',
+    px: 1.25, py: 1, borderRadius: '9px', border: 'none', background: 'transparent',
+    color: 'rgba(255,255,255,0.9)', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' as const,
+    '&:hover': { background: 'rgba(255,255,255,0.07)' },
+  };
+  const iconSx = { fontSize: 17, color: 'rgba(255,255,255,0.65)', flexShrink: 0 };
+  const fieldSx = {
+    width: '100%', boxSizing: 'border-box' as const, resize: 'none' as const,
+    background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '10px',
+    color: 'rgba(255,255,255,0.92)', fontFamily: 'inherit', fontSize: '0.8125rem', lineHeight: 1.5,
+    padding: '9px 11px', outline: 'none',
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -8, scale: 0.97 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        exit={{ opacity: 0, y: -6, scale: 0.98 }}
+        transition={{ type: 'spring', stiffness: 420, damping: 30 }}
+        style={{
+          position: 'absolute', top: 'calc(100% + 8px)', right: 0, width: 316, zIndex: 1500,
+          background: 'rgba(22,17,26,0.94)',
+          backdropFilter: 'blur(24px) saturate(150%)', WebkitBackdropFilter: 'blur(24px) saturate(150%)',
+          border: '1px solid rgba(255,255,255,0.1)', borderRadius: '14px',
+          boxShadow: '0 22px 60px -18px rgba(0,0,0,0.6)', overflow: 'hidden',
+          cursor: 'default',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {pane === 'root' ? (
+          <Box sx={{ p: 1 }}>
+            <Box sx={{ px: 1.25, pt: 0.75, pb: 0.5 }}>
+              <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: 'rgba(255,255,255,0.95)' }}>How can we help?</Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mx: 1, my: 0.75, px: 1.25, py: 0.75, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '10px' }}>
+              <AutoAwesomeRoundedIcon sx={{ fontSize: 15, color: 'rgba(255,255,255,0.5)' }} />
+              <Box
+                component="input"
+                value={ask}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAsk(e.target.value)}
+                onKeyDown={(e: React.KeyboardEvent) => { if (e.key === 'Enter') startChat(ask); e.stopPropagation(); }}
+                placeholder="Ask OpenSwarm anything..."
+                sx={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', color: 'rgba(255,255,255,0.92)', fontFamily: 'inherit', fontSize: '0.8125rem', '&::placeholder': { color: 'rgba(255,255,255,0.4)' } }}
+              />
+              {ask.trim() && (
+                <Box component="button" onClick={() => startChat(ask)} sx={{ display: 'flex', border: 'none', background: 'transparent', color: 'rgba(255,255,255,0.8)', cursor: 'pointer', p: 0 }}>
+                  <ArrowUpwardRoundedIcon sx={{ fontSize: 16 }} />
+                </Box>
+              )}
+            </Box>
+            <Box component="button" onClick={() => { setReportText(''); setPane('bug'); }} sx={rowSx}>
+              <BugReportOutlinedIcon sx={iconSx} />
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500 }}>Report a bug</Typography>
+                <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)' }}>Version attached automatically</Typography>
+              </Box>
+              <ChevronRightRoundedIcon sx={{ fontSize: 16, color: 'rgba(255,255,255,0.4)' }} />
+            </Box>
+            <Box component="button" onClick={() => { setReportText(''); setPane('idea'); }} sx={rowSx}>
+              <LightbulbOutlinedIcon sx={iconSx} />
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500 }}>Request a feature</Typography>
+                <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)' }}>Tell us what's missing</Typography>
+              </Box>
+              <ChevronRightRoundedIcon sx={{ fontSize: 16, color: 'rgba(255,255,255,0.4)' }} />
+            </Box>
+            <Box component="button" onClick={() => { openExternal(DOCS_URL); onClose(); }} sx={rowSx}>
+              <MenuBookOutlinedIcon sx={iconSx} />
+              <Typography sx={{ flex: 1, fontSize: '0.8125rem', fontWeight: 500 }}>Docs &amp; shortcuts</Typography>
+              <ArrowOutwardRoundedIcon sx={{ fontSize: 14, color: 'rgba(255,255,255,0.4)' }} />
+            </Box>
+          </Box>
+        ) : (
+          <Box sx={{ p: 1.5 }}>
+            <Box component="button" onClick={() => setPane('root')} sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, border: 'none', background: 'transparent', color: 'rgba(255,255,255,0.55)', fontSize: '0.75rem', cursor: 'pointer', fontFamily: 'inherit', p: 0, mb: 1 }}>
+              <ArrowBackRoundedIcon sx={{ fontSize: 14 }} /> {pane === 'bug' ? 'Report a bug' : 'Request a feature'}
+            </Box>
+            <Box
+              component="textarea"
+              autoFocus
+              rows={4}
+              value={reportText}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setReportText(e.target.value)}
+              onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}
+              placeholder={pane === 'bug' ? 'What went wrong?' : "What's missing?"}
+              sx={fieldSx}
+            />
+            <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)', mt: 0.75 }}>
+              Opens a prefilled GitHub issue; watch it for replies from the team.
+            </Typography>
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1.25 }}>
+              <Box component="button" onClick={onClose} sx={{ border: 'none', background: 'transparent', color: 'rgba(255,255,255,0.55)', fontSize: '0.8125rem', cursor: 'pointer', fontFamily: 'inherit', px: 1, py: 0.5 }}>Cancel</Box>
+              <Box
+                component="button"
+                onClick={() => fileOnGitHub(pane === 'bug' ? 'bug' : 'idea')}
+                disabled={!reportText.trim()}
+                sx={{
+                  border: 'none', borderRadius: '9px', px: 1.5, py: 0.6, fontFamily: 'inherit',
+                  fontSize: '0.8125rem', fontWeight: 600, cursor: reportText.trim() ? 'pointer' : 'default',
+                  background: reportText.trim() ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.15)',
+                  color: reportText.trim() ? '#1c1b19' : 'rgba(255,255,255,0.4)',
+                }}
+              >
+                Continue on GitHub
+              </Box>
+            </Box>
+          </Box>
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default HelpPanel;
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index d50be64b..6d6cbd07 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -1,63 +1,76 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
 import CircularProgress from '@mui/material/CircularProgress';
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
 import MicIcon from '@mui/icons-material/Mic';
-import { useAppDispatch } from '@/shared/hooks';
-import { addBrowserCard } from '@/shared/state/dashboardLayoutSlice';
 import { useVoice } from '@/shared/voice/VoiceDictationContext';
+import HelpPanel from './HelpPanel';
 
-const HELP_URL = 'https://openswarm.com';
-
-/** Top-right desktop pill: Help opens the docs; the mic dictates (local whisper) into the focused field. */
+/** Top-right desktop pill: Help opens the help panel (ask, report a bug, docs); the mic dictates (local whisper) into the focused field. */
 function HelpPill(): React.ReactElement {
-  const dispatch = useAppDispatch();
   const { state, pct, pressStart, pressEnd } = useVoice();
+  const [helpOpen, setHelpOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
   const recording = state === 'recording';
   const transcribing = state === 'transcribing';
   const preparing = state === 'preparing';
   const busy = transcribing || preparing;
 
+  // Outside click / Esc closes the panel; listeners only live while it's open.
+  useEffect(() => {
+    if (!helpOpen) return undefined;
+    const onDown = (e: MouseEvent): void => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setHelpOpen(false);
+    };
+    const onKey = (e: KeyboardEvent): void => { if (e.key === 'Escape') setHelpOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); };
+  }, [helpOpen]);
+
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.75,
-        height: 30,
-        pl: 1.5,
-        pr: 1,
-        borderRadius: 999,
-        background: recording ? 'rgba(150,30,40,0.72)' : 'rgba(22,12,34,0.66)',
-        backdropFilter: 'blur(20px) saturate(160%)',
-        WebkitBackdropFilter: 'blur(20px) saturate(160%)',
-        boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
-        cursor: 'pointer',
-        userSelect: 'none',
-        transition: 'background 0.2s ease',
-      }}
-      onClick={() => dispatch(addBrowserCard({ url: HELP_URL }))}
-    >
-      <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
-        {recording ? 'Listening' : transcribing ? 'Transcribing' : preparing ? `Preparing ${pct}%` : 'Help'}
-      </Typography>
-      <Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
-        <Box
-          sx={{ display: 'flex', alignItems: 'center', color: recording ? '#fff' : 'rgba(255,255,255,0.55)' }}
-          onPointerDown={(e) => { e.stopPropagation(); if (!busy) pressStart(); }}
-          onPointerUp={(e) => { e.stopPropagation(); pressEnd(); }}
-          onPointerLeave={() => pressEnd()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {busy
-            ? <CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} />
-            : recording
-              ? <MicIcon sx={{ fontSize: 16 }} />
-              : <MicNoneOutlinedIcon sx={{ fontSize: 15 }} />}
-        </Box>
-      </Tooltip>
+    <Box ref={rootRef} sx={{ position: 'relative' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.75,
+          height: 30,
+          pl: 1.5,
+          pr: 1,
+          borderRadius: 999,
+          background: recording ? 'rgba(150,30,40,0.72)' : 'rgba(22,12,34,0.66)',
+          backdropFilter: 'blur(20px) saturate(160%)',
+          WebkitBackdropFilter: 'blur(20px) saturate(160%)',
+          boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+          cursor: 'pointer',
+          userSelect: 'none',
+          transition: 'background 0.2s ease',
+        }}
+        onClick={() => setHelpOpen((v) => !v)}
+      >
+        <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
+          {recording ? 'Listening' : transcribing ? 'Transcribing' : preparing ? `Preparing ${pct}%` : 'Help'}
+        </Typography>
+        <Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (F5)'} placement="bottom" arrow>
+          <Box
+            sx={{ display: 'flex', alignItems: 'center', color: recording ? '#fff' : 'rgba(255,255,255,0.55)' }}
+            onPointerDown={(e) => { e.stopPropagation(); if (!busy) pressStart(); }}
+            onPointerUp={(e) => { e.stopPropagation(); pressEnd(); }}
+            onPointerLeave={() => pressEnd()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {busy
+              ? <CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} />
+              : recording
+                ? <MicIcon sx={{ fontSize: 16 }} />
+                : <MicNoneOutlinedIcon sx={{ fontSize: 15 }} />}
+          </Box>
+        </Tooltip>
+      </Box>
+      {helpOpen && <HelpPanel onClose={() => setHelpOpen(false)} />}
     </Box>
   );
 }

From e7084cc08555f2939ec432333a7cdd74206e99ba Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 12:53:53 -0700
Subject: [PATCH 172/248] [eric] voice: F5 mic key as the simple hotkey, remove
 the activation sounds

---
 electron/main.js                              | 26 ++++++++------
 .../Dashboard/desktop/DesktopSpawnPill.tsx    |  2 +-
 .../sections/general/GeneralInterface.tsx     |  2 +-
 .../src/shared/voice/useVoiceDictation.ts     | 14 +++-----
 frontend/src/shared/voice/voiceSounds.ts      | 35 -------------------
 5 files changed, 22 insertions(+), 57 deletions(-)
 delete mode 100644 frontend/src/shared/voice/voiceSounds.ts

diff --git a/electron/main.js b/electron/main.js
index 847035a6..fab4460c 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1793,18 +1793,22 @@ app.whenReady().then(async () => {
   // focused, MAIN watches before-input-event (sees every keyDown/keyUp incl. modifiers, regardless of
   // which element or webview has focus, and immune to macOS's letter-keyup-under-Cmd suppression at the
   // DOM layer) and relays voice:hold-down / voice:hold-up; the renderer maps those to hold-vs-toggle.
-  const VOICE_COMBO = 'CommandOrControl+Shift+D';
+  // F5 is the mic/dictation key printed on Mac keyboards (the fn/globe key itself is invisible to
+  // Electron without a native event tap), so it's the simple primary; the old combo stays as backup.
+  const VOICE_COMBOS = ['F5', 'CommandOrControl+Shift+D'];
   const registerVoiceShortcut = () => {
-    try {
-      if (!globalShortcut.isRegistered(VOICE_COMBO)) {
-        globalShortcut.register(VOICE_COMBO, () => {
-          if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:toggle');
-        });
-      }
-    } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+    for (const combo of VOICE_COMBOS) {
+      try {
+        if (!globalShortcut.isRegistered(combo)) {
+          globalShortcut.register(combo, () => {
+            if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:toggle');
+          });
+        }
+      } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+    }
   };
   registerVoiceShortcut();
-  app.on('browser-window-focus', () => { try { globalShortcut.unregister(VOICE_COMBO); } catch (_) {} });
+  app.on('browser-window-focus', () => { for (const combo of VOICE_COMBOS) { try { globalShortcut.unregister(combo); } catch (_) {} } });
   app.on('browser-window-blur', registerVoiceShortcut);
 
   // Every discrete combo press relays (autorepeat filtered); the renderer toggles record state.
@@ -1813,8 +1817,10 @@ app.whenReady().then(async () => {
   // without a native event tap. Keyboard = press to start/stop; the mic buttons own true hold-to-talk.
   const installVoiceHoldRelay = (contents) => {
     contents.on('before-input-event', (event, input) => {
+      if (input.type !== 'keyDown' || input.isAutoRepeat) return;
       const isD = (input.code === 'KeyD' || (input.key || '').toLowerCase() === 'd');
-      if (input.type === 'keyDown' && isD && (input.meta || input.control) && input.shift && !input.isAutoRepeat) {
+      const combo = (isD && (input.meta || input.control) && input.shift) || input.code === 'F5';
+      if (combo) {
         if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:hold-down');
         event.preventDefault();
       }
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index 664bfb4b..f6afb222 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -160,7 +160,7 @@ function DesktopSpawnPill({
         >
           <AddRounded sx={{ fontSize: 18 }} />
         </Box>
-        <Tooltip title={recording ? 'Stop dictation' : preparing ? `Downloading voice model ${voicePct}%` : 'Dictate (Cmd+Shift+D)'} placement="top" arrow>
+        <Tooltip title={recording ? 'Stop dictation' : preparing ? `Downloading voice model ${voicePct}%` : 'Dictate (F5)'} placement="top" arrow>
           <Box
             role="button"
             aria-label="Voice dictation"
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 379d9a1a..7b6569fe 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -104,7 +104,7 @@ const GeneralInterface: React.FC<{
       <Box sx={inlineRowSx} {...settingSelectAttrs('voice_hold_to_talk', 'Dictation', 'Interface', 'Hold to talk, or tap to start and stop.')}>
         <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Dictation</Typography>
-          <Typography sx={descSx}>How the mic button works. Cmd+Shift+D always starts and stops.</Typography>
+          <Typography sx={descSx}>How the mic button works. The mic key (F5) starts and stops.</Typography>
         </Box>
         <ToggleButtonGroup
           value={form.voice_hold_to_talk ?? true}
diff --git a/frontend/src/shared/voice/useVoiceDictation.ts b/frontend/src/shared/voice/useVoiceDictation.ts
index 306a9596..6888a79a 100644
--- a/frontend/src/shared/voice/useVoiceDictation.ts
+++ b/frontend/src/shared/voice/useVoiceDictation.ts
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { API_BASE } from '@/shared/config';
 import { encodeWav, VOICE_SAMPLE_RATE } from './encodeWav';
 import { injectAtFocus } from './injectAtFocus';
-import { playCancel, playDone, playStart } from './voiceSounds';
 
 export type VoiceState = 'idle' | 'recording' | 'transcribing' | 'preparing';
 
@@ -118,7 +117,6 @@ export function useVoiceDictation() {
       node.connect(ctx.destination);
       recRef.current = { ctx, stream, node, source, chunks };
       setState('recording');
-      playStart();
       // Warm the model the moment recording begins so transcription is instant on stop.
       void window.openswarm?.voiceWarmup?.();
     } catch (err) {
@@ -145,19 +143,15 @@ export function useVoiceDictation() {
         setLastText(text);
         // Land the text where the user's cursor is: focused field, then focused browser page, then
         // the OS paste fallback (other apps). The floating bubble is just confirmation, not the output.
-        // Success is silent-visual: the text landing at the cursor IS the feedback (plus the done blip).
-        // Only the clipboard fallback still speaks, because the user has to act (paste) to get the text.
+        // Success is silent: the text landing at the cursor IS the feedback. Only the clipboard
+        // fallback still speaks, because the user has to act (paste) to get the text.
         const target = injectAtFocus(text);
-        if (target) {
-          playDone();
-        } else {
+        if (!target) {
           const inj = await window.openswarm?.voiceInject?.(text);
-          if (inj?.pasted) playDone();
-          else setFeedback({ tone: 'ok', icon: 'clipboard', text: `${text}  (copied, press Cmd+V)`, at: Date.now() });
+          if (!inj?.pasted) setFeedback({ tone: 'ok', icon: 'clipboard', text: `${text}  (copied, press Cmd+V)`, at: Date.now() });
         }
         setState('idle');
       } else if (res?.ok && !res.text) {
-        playCancel();
         setFeedback({ tone: 'warn', icon: 'info', text: "Didn't catch that. Try again.", at: Date.now() });
         setState('idle');
       } else if (res?.error === 'model-downloading' || res?.error === 'no-model') {
diff --git a/frontend/src/shared/voice/voiceSounds.ts b/frontend/src/shared/voice/voiceSounds.ts
deleted file mode 100644
index 1bf79ab6..00000000
--- a/frontend/src/shared/voice/voiceSounds.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// Tiny WebAudio cues for dictation, generated in code (no bundled assets): a soft rising two-note on
-// start, falling on cancel, and a quiet tick when text lands. Volumes stay whisper-level on purpose.
-let ctx: AudioContext | null = null;
-
-function audio(): AudioContext | null {
-  try {
-    if (!ctx) ctx = new AudioContext();
-    if (ctx.state === 'suspended') void ctx.resume();
-    return ctx;
-  } catch {
-    return null;
-  }
-}
-
-function blip(freqs: Array<[number, number, number]>): void {
-  const ac = audio();
-  if (!ac) return;
-  const t0 = ac.currentTime;
-  for (const [freq, at, dur] of freqs) {
-    const osc = ac.createOscillator();
-    const gain = ac.createGain();
-    osc.type = 'sine';
-    osc.frequency.value = freq;
-    gain.gain.setValueAtTime(0, t0 + at);
-    gain.gain.linearRampToValueAtTime(0.055, t0 + at + 0.02);
-    gain.gain.exponentialRampToValueAtTime(0.0001, t0 + at + dur);
-    osc.connect(gain).connect(ac.destination);
-    osc.start(t0 + at);
-    osc.stop(t0 + at + dur + 0.05);
-  }
-}
-
-export function playStart(): void { blip([[523, 0, 0.12], [784, 0.09, 0.16]]); }
-export function playCancel(): void { blip([[784, 0, 0.1], [523, 0.08, 0.14]]); }
-export function playDone(): void { blip([[1047, 0, 0.09]]); }

From c1edad623c0bf4dbdbe442c668370b3d33b7c449 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 13:04:16 -0700
Subject: [PATCH 173/248] [eric] help: full panel (Discord, what's new,
 attachments) + local diagnostics bundle revealed for the GitHub issue

---
 backend/apps/help/bundle.py                   | 162 ++++++++++++++++++
 backend/main.py                               |   3 +-
 electron/main.js                              |  13 ++
 electron/preload.js                           |   2 +
 .../app/pages/Dashboard/desktop/HelpPanel.tsx | 151 ++++++++++++----
 5 files changed, 299 insertions(+), 32 deletions(-)
 create mode 100644 backend/apps/help/bundle.py

diff --git a/backend/apps/help/bundle.py b/backend/apps/help/bundle.py
new file mode 100644
index 00000000..4c3d4747
--- /dev/null
+++ b/backend/apps/help/bundle.py
@@ -0,0 +1,162 @@
+"""Diagnostic bundle for bug reports: one folder a user can drag into a GitHub issue.
+
+Everything is assembled LOCALLY and only revealed in the file manager; nothing uploads
+anywhere by itself. Contents are deliberately allowlisted (identity, versions, feature
+booleans, provider KINDS, counts, log tail) so no secret or API key can ever ride along.
+"""
+
+import base64
+import json
+import os
+import platform
+import re
+import sys
+import time
+from contextlib import asynccontextmanager
+from typing import AsyncIterator, List, Optional
+
+from pydantic import BaseModel, ConfigDict, Field
+from typeguard import typechecked
+
+from backend.config.Apps import SubApp
+from backend.config.paths import DATA_ROOT, SESSIONS_DIR
+
+
+@asynccontextmanager
+async def help_lifespan() -> AsyncIterator[None]:
+    yield
+
+
+help_app = SubApp("help", help_lifespan)
+
+DIAG_DIR = os.path.join(DATA_ROOT, "diagnostics")
+LOG_TAIL_LINES = 200
+MAX_ATTACHMENTS = 6
+MAX_ATTACHMENT_BYTES = 8 * 1024 * 1024
+# Key-shaped strings never belong in a shareable report, even from free-text log lines.
+P_SECRET_RE = re.compile(r"(sk-[A-Za-z0-9\-]{8,}|Bearer\s+\S+|api[_-]?key[\"']?\s*[:=]\s*\S+)", re.IGNORECASE)
+
+
+class BundleAttachment(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+
+    name: str
+    data_b64: str
+
+
+class BundleRequest(BaseModel):
+    model_config = ConfigDict(validate_assignment=True)
+
+    kind: str = "bug"
+    description: str = ""
+    attachments: List[BundleAttachment] = Field(default_factory=list)
+
+
+@typechecked
+def p_safe_name(name: str) -> str:
+    base = os.path.basename(name or "attachment")
+    return re.sub(r"[^A-Za-z0-9._-]", "_", base)[:80] or "attachment"
+
+
+@typechecked
+def p_scrub(text: str) -> str:
+    return P_SECRET_RE.sub("[redacted]", text)
+
+
+@typechecked
+def p_log_tail() -> str:
+    """Last lines of the backend log when packaged (Electron writes backend.log next to the data
+    root); dev runs log to the terminal, so a missing file just yields an honest note."""
+    candidates = [
+        os.path.join(os.path.dirname(DATA_ROOT), "backend.log"),
+        os.path.join(DATA_ROOT, "backend.log"),
+    ]
+    for p in candidates:
+        try:
+            if os.path.isfile(p):
+                with open(p, "r", errors="replace") as fh:
+                    lines = fh.readlines()[-LOG_TAIL_LINES:]
+                return p_scrub("".join(lines))
+        except Exception:
+            continue
+    return "(no backend.log found; dev runs log to the terminal)"
+
+
+@typechecked
+def p_count_dir(path: str) -> int:
+    try:
+        return len(os.listdir(path))
+    except Exception:
+        return 0
+
+
+@typechecked
+def p_build_report(req: BundleRequest) -> str:
+    from backend.apps.settings.store import load_settings
+
+    s = load_settings()
+    provider_kinds: List[str] = []
+    if getattr(s, "anthropic_api_key", None):
+        provider_kinds.append("anthropic-key")
+    if getattr(s, "openai_api_key", None):
+        provider_kinds.append("openai-key")
+    if getattr(s, "free_trial_token", None):
+        provider_kinds.append("free-trial")
+    facts = {
+        "kind": req.kind,
+        "created_at": time.strftime("%Y-%m-%d %H:%M:%S"),
+        "app_version": os.environ.get("OPENSWARM_APP_VERSION", "dev"),
+        "platform": f"{platform.system()} {platform.release()} ({platform.machine()})",
+        "python": sys.version.split()[0],
+        "packaged": os.environ.get("OPENSWARM_PACKAGED") == "1",
+        "installation_id": getattr(s, "installation_id", None),
+        "user_email": getattr(s, "user_email", None),
+        "signin_method": getattr(s, "signin_method", None),
+        "default_model": getattr(s, "default_model", None),
+        "connection_mode": getattr(s, "connection_mode", None),
+        "provider_kinds": provider_kinds,
+        "session_count": p_count_dir(SESSIONS_DIR),
+        "theme": getattr(s, "theme", None),
+    }
+    lines = [
+        f"# OpenSwarm {('bug report' if req.kind == 'bug' else 'feature request')}",
+        "",
+        "## What the user reported",
+        req.description.strip() or "(no description)",
+        "",
+        "## Environment",
+        "```json",
+        json.dumps(facts, indent=2, default=str),
+        "```",
+        "",
+        "## Recent backend log",
+        "```",
+        p_log_tail(),
+        "```",
+        "",
+    ]
+    return "\n".join(lines)
+
+
+@help_app.router.post("/bundle")
+@typechecked
+async def build_bundle(body: BundleRequest) -> dict:
+    stamp = time.strftime("%Y%m%d-%H%M%S")
+    folder = os.path.join(DIAG_DIR, f"report-{stamp}")
+    os.makedirs(folder, exist_ok=True)
+    report_path = os.path.join(folder, "diagnostic-report.md")
+    with open(report_path, "w") as fh:
+        fh.write(p_build_report(body))
+    saved: List[str] = []
+    for att in body.attachments[:MAX_ATTACHMENTS]:
+        try:
+            raw = base64.b64decode(att.data_b64)
+            if len(raw) > MAX_ATTACHMENT_BYTES:
+                continue
+            dest = os.path.join(folder, p_safe_name(att.name))
+            with open(dest, "wb") as fh:
+                fh.write(raw)
+            saved.append(os.path.basename(dest))
+        except Exception:
+            continue
+    return {"folder": folder, "report": report_path, "attachments": saved}
diff --git a/backend/main.py b/backend/main.py
index e278b203..97367cd1 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -44,6 +44,7 @@ from backend.apps.auth.router import auth
 from backend.apps.web.web import web
 from backend.apps.onboarding.onboarding import onboarding
 from backend.apps.voice.polish import voice
+from backend.apps.help.bundle import help_app
 from backend.apps.agents.proxy.anthropic_proxy import anthropic_proxy
 from backend.apps.agents.core.openai_passthrough import openai_passthrough
 from backend.apps.workflows.workflows import workflows
@@ -51,7 +52,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi import WebSocket, WebSocketDisconnect
 import json
 
-main_app = MainApp([health, agents, skills, tools_lib, modes, settings, mcp_registry, skill_registry, outputs, output_versions, dashboards, swarm, service, subscription, auth, web, onboarding, voice, anthropic_proxy, workflows, openai_passthrough])
+main_app = MainApp([health, agents, skills, tools_lib, modes, settings, mcp_registry, skill_registry, outputs, output_versions, dashboards, swarm, service, subscription, auth, web, onboarding, voice, help_app, anthropic_proxy, workflows, openai_passthrough])
 app = main_app.app
 
 # Generate per-install auth token BEFORE we bind the HTTP port. By the time any request lands, the token file exists. See backend/auth.py.
diff --git a/electron/main.js b/electron/main.js
index fab4460c..79e809ad 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -2974,6 +2974,19 @@ ipcMain.handle('get-webview-preload-path', () => {
   return `file://${path.join(__dirname, 'webview-preload.js')}`;
 });
 
+// Reveal a diagnostics bundle in the file manager so the user can drag it into a GitHub issue.
+// Scoped HARD to the backend's diagnostics dir: this must never become an arbitrary-path opener.
+ipcMain.handle('help:reveal-bundle', (event, folderPath) => {
+  try {
+    const p = path.resolve(String(folderPath || ''));
+    if (!p.includes(`${path.sep}diagnostics${path.sep}`) || !fs.existsSync(p)) return { ok: false };
+    shell.showItemInFolder(p);
+    return { ok: true };
+  } catch (_) {
+    return { ok: false };
+  }
+});
+
 // Wipe ONLY the browser-card partition (cookies/cache/localStorage/IndexedDB), never the app's defaultSession. Surfaced as Settings -> Data & Privacy -> Clear browsing data.
 ipcMain.handle('browser:clear-data', async () => {
   const ses = session.fromPartition(BROWSER_PARTITION);
diff --git a/electron/preload.js b/electron/preload.js
index 4c1e5916..91a36f7a 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -73,6 +73,8 @@ contextBridge.exposeInMainWorld('openswarm', {
     ipcRenderer.on('voice:toggle', listener);
     return () => ipcRenderer.removeListener('voice:toggle', listener);
   },
+  // Reveal a diagnostics folder in Finder/Explorer (path validated in main; diagnostics dir only).
+  revealBundle: (folderPath) => ipcRenderer.invoke('help:reveal-bundle', folderPath),
   // Main-process hold relay (before-input-event): fires down/up for the combo regardless of DOM focus.
   onVoiceHold: (onDown, onUp) => {
     const down = () => onDown();
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
index d4b88608..5b2bc3a7 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
@@ -1,11 +1,14 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
 import { AnimatePresence, motion } from 'framer-motion';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import BugReportOutlinedIcon from '@mui/icons-material/BugReportOutlined';
 import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
 import MenuBookOutlinedIcon from '@mui/icons-material/MenuBookOutlined';
+import ForumOutlinedIcon from '@mui/icons-material/ForumOutlined';
+import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
 import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
@@ -13,9 +16,17 @@ import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from '@/shared/state/agentsSlice';
 import { getLastDashboardId } from '@/shared/lastDashboardId';
+import { API_BASE } from '@/shared/config';
 
 const REPO_ISSUES_URL = 'https://github.com/openswarm-ai/openswarm/issues/new';
 const DOCS_URL = 'https://docs.openswarm.com';
+const DISCORD_URL = 'https://discord.com/channels/1486442924391796896/1486442927554170892';
+
+const WHATS_NEW: Array<{ text: string }> = [
+  { text: 'Dictation lands where your cursor is, with AI cleanup' },
+  { text: 'Sign in keeps your setup tied to your account' },
+  { text: 'Text size setting + a cleaner canvas composer' },
+];
 
 function openExternal(url: string): void {
   const api = (window as unknown as { openswarm?: { openExternal?: (u: string) => void } }).openswarm;
@@ -23,12 +34,21 @@ function openExternal(url: string): void {
   else window.open(url, '_blank');
 }
 
+async function fileToB64(f: File): Promise<string> {
+  const buf = await f.arrayBuffer();
+  let bin = '';
+  const bytes = new Uint8Array(buf);
+  for (let i = 0; i < bytes.length; i += 0x8000) bin += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+  return btoa(bin);
+}
+
 type Pane = 'root' | 'bug' | 'idea';
 
-// The Help panel: Linear/Raycast-style popover off the Help pill. Ask leads (starts a real chat with
-// the question), then report-a-bug / request-a-feature (open a PREFILLED GitHub issue: version + OS
-// attached in the body, no secret and no backend needed, and the user can watch the thread for team
-// replies), then docs. Closes on outside click or Esc via the parent.
+// The Help panel: Linear/Raycast-style popover off the Help pill. Ask leads (starts a real chat),
+// then report-a-bug / request-a-feature: the local backend assembles a diagnostics bundle (redacted
+// env facts + log tail + the user's screenshots) into one folder, we reveal it in the file manager,
+// and open a PREFILLED GitHub issue for them to drag the folder's files into. Nothing uploads by
+// itself and no secret can ride along (the bundle is allowlisted server-side). Then community + docs.
 const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   const dispatch = useAppDispatch();
   const model = useAppSelector((s) => s.settings.data.default_model);
@@ -36,6 +56,9 @@ const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   const [pane, setPane] = useState<Pane>('root');
   const [ask, setAsk] = useState('');
   const [reportText, setReportText] = useState('');
+  const [files, setFiles] = useState<File[]>([]);
+  const [sending, setSending] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const startChat = useCallback((prompt: string): void => {
     const p = prompt.trim();
@@ -47,22 +70,46 @@ const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
     onClose();
   }, [dispatch, model, onClose]);
 
-  const fileOnGitHub = useCallback((kind: 'bug' | 'idea'): void => {
-    const body = [
-      reportText.trim(),
-      '',
-      '---',
-      `App version: ${appVersion ?? 'dev'}`,
-      `Platform: ${navigator.platform}`,
-    ].join('\n');
-    const params = new URLSearchParams({
-      title: reportText.trim().split('\n')[0].slice(0, 80) || (kind === 'bug' ? 'Bug report' : 'Feature request'),
-      labels: kind === 'bug' ? 'bug' : 'enhancement',
-      body,
-    });
-    openExternal(`${REPO_ISSUES_URL}?${params.toString()}`);
-    onClose();
-  }, [reportText, appVersion, onClose]);
+  const submitReport = useCallback(async (kind: 'bug' | 'idea'): Promise<void> => {
+    if (sending) return;
+    setSending(true);
+    try {
+      // 1. Local diagnostics bundle (report.md + the user's files), revealed for drag-into-the-issue.
+      const attachments = await Promise.all(files.slice(0, 6).map(async (f) => ({ name: f.name, data_b64: await fileToB64(f) })));
+      const res = await fetch(`${API_BASE}/help/bundle`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ kind, description: reportText, attachments }),
+      });
+      let folder: string | null = null;
+      if (res.ok) {
+        const data = (await res.json()) as { folder?: string };
+        folder = data.folder ?? null;
+      }
+      // 2. Prefilled GitHub issue; the body points at the revealed bundle so nothing gets lost.
+      const bodyLines = [
+        reportText.trim(),
+        '',
+        '---',
+        `App version: ${appVersion ?? 'dev'}`,
+        `Platform: ${navigator.platform}`,
+        folder ? 'Diagnostics: drag the files from the folder OpenSwarm just revealed into this issue.' : '',
+      ].filter(Boolean);
+      const params = new URLSearchParams({
+        title: reportText.trim().split('\n')[0].slice(0, 80) || (kind === 'bug' ? 'Bug report' : 'Feature request'),
+        labels: kind === 'bug' ? 'bug' : 'enhancement',
+        body: bodyLines.join('\n'),
+      });
+      openExternal(`${REPO_ISSUES_URL}?${params.toString()}`);
+      if (folder) {
+        const api = (window as unknown as { openswarm?: { revealBundle?: (p: string) => Promise<unknown> } }).openswarm;
+        void api?.revealBundle?.(folder);
+      }
+      onClose();
+    } finally {
+      setSending(false);
+    }
+  }, [sending, files, reportText, appVersion, onClose]);
 
   const rowSx = {
     display: 'flex', alignItems: 'center', gap: 1.25, width: '100%',
@@ -86,7 +133,7 @@ const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         exit={{ opacity: 0, y: -6, scale: 0.98 }}
         transition={{ type: 'spring', stiffness: 420, damping: 30 }}
         style={{
-          position: 'absolute', top: 'calc(100% + 8px)', right: 0, width: 316, zIndex: 1500,
+          position: 'absolute', top: 'calc(100% + 8px)', right: 0, width: 324, zIndex: 1500,
           background: 'rgba(22,17,26,0.94)',
           backdropFilter: 'blur(24px) saturate(150%)', WebkitBackdropFilter: 'blur(24px) saturate(150%)',
           border: '1px solid rgba(255,255,255,0.1)', borderRadius: '14px',
@@ -116,15 +163,15 @@ const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
                 </Box>
               )}
             </Box>
-            <Box component="button" onClick={() => { setReportText(''); setPane('bug'); }} sx={rowSx}>
+            <Box component="button" onClick={() => { setReportText(''); setFiles([]); setPane('bug'); }} sx={rowSx}>
               <BugReportOutlinedIcon sx={iconSx} />
               <Box sx={{ flex: 1, minWidth: 0 }}>
                 <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500 }}>Report a bug</Typography>
-                <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)' }}>Version attached automatically</Typography>
+                <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)' }}>Diagnostics packaged automatically</Typography>
               </Box>
               <ChevronRightRoundedIcon sx={{ fontSize: 16, color: 'rgba(255,255,255,0.4)' }} />
             </Box>
-            <Box component="button" onClick={() => { setReportText(''); setPane('idea'); }} sx={rowSx}>
+            <Box component="button" onClick={() => { setReportText(''); setFiles([]); setPane('idea'); }} sx={rowSx}>
               <LightbulbOutlinedIcon sx={iconSx} />
               <Box sx={{ flex: 1, minWidth: 0 }}>
                 <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500 }}>Request a feature</Typography>
@@ -132,11 +179,31 @@ const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
               </Box>
               <ChevronRightRoundedIcon sx={{ fontSize: 16, color: 'rgba(255,255,255,0.4)' }} />
             </Box>
+            <Box component="button" onClick={() => { openExternal(DISCORD_URL); onClose(); }} sx={rowSx}>
+              <ForumOutlinedIcon sx={iconSx} />
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500 }}>Talk to the team</Typography>
+                <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)' }}>Join the Discord</Typography>
+              </Box>
+              <ArrowOutwardRoundedIcon sx={{ fontSize: 14, color: 'rgba(255,255,255,0.4)' }} />
+            </Box>
             <Box component="button" onClick={() => { openExternal(DOCS_URL); onClose(); }} sx={rowSx}>
               <MenuBookOutlinedIcon sx={iconSx} />
               <Typography sx={{ flex: 1, fontSize: '0.8125rem', fontWeight: 500 }}>Docs &amp; shortcuts</Typography>
               <ArrowOutwardRoundedIcon sx={{ fontSize: 14, color: 'rgba(255,255,255,0.4)' }} />
             </Box>
+            <Box sx={{ height: '1px', background: 'rgba(255,255,255,0.09)', mx: 1.25, my: 0.75 }} />
+            <Box sx={{ px: 1.25, pb: 0.75 }}>
+              <Typography sx={{ fontSize: '0.625rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', mb: 0.5 }}>
+                What's new{appVersion ? ` · v${appVersion}` : ''}
+              </Typography>
+              {WHATS_NEW.map((n) => (
+                <Box key={n.text} sx={{ display: 'flex', gap: 0.9, alignItems: 'flex-start', my: 0.4 }}>
+                  <Box sx={{ width: 5, height: 5, borderRadius: '50%', background: '#4fdf9f', mt: '6px', flexShrink: 0 }} />
+                  <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.65)', lineHeight: 1.45 }}>{n.text}</Typography>
+                </Box>
+              ))}
+            </Box>
           </Box>
         ) : (
           <Box sx={{ p: 1.5 }}>
@@ -153,22 +220,44 @@ const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
               placeholder={pane === 'bug' ? 'What went wrong?' : "What's missing?"}
               sx={fieldSx}
             />
-            <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)', mt: 0.75 }}>
-              Opens a prefilled GitHub issue; watch it for replies from the team.
-            </Typography>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept="image/*,.txt,.log,.json,.md,.pdf"
+              hidden
+              onChange={(e) => { if (e.target.files) setFiles((prev) => [...prev, ...Array.from(e.target.files!)].slice(0, 6)); e.target.value = ''; }}
+            />
+            <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.5, mt: 0.75 }}>
+              <Box component="button" onClick={() => fileInputRef.current?.click()} sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, border: '1px dashed rgba(255,255,255,0.25)', background: 'transparent', color: 'rgba(255,255,255,0.65)', borderRadius: '8px', px: 1, py: 0.4, fontSize: '0.6875rem', cursor: 'pointer', fontFamily: 'inherit' }}>
+                <AttachFileRoundedIcon sx={{ fontSize: 12 }} /> Add screenshots or files
+              </Box>
+              {files.map((f, i) => (
+                <Box key={`${f.name}-${i}`} component="button" onClick={() => setFiles((prev) => prev.filter((_, j) => j !== i))} title="Remove" sx={{ border: '1px solid rgba(255,255,255,0.16)', background: 'rgba(255,255,255,0.07)', color: 'rgba(255,255,255,0.75)', borderRadius: '8px', px: 0.9, py: 0.4, fontSize: '0.6875rem', cursor: 'pointer', fontFamily: 'inherit', maxWidth: 130, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {f.name}
+                </Box>
+              ))}
+            </Box>
+            {pane === 'bug' && (
+              <Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)', mt: 0.75, lineHeight: 1.45 }}>
+                We'll package a diagnostic report (your email, app version, recent activity, no keys or secrets) with your files, reveal it in Finder, and open a prefilled GitHub issue to drop it into.
+              </Typography>
+            )}
             <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1.25 }}>
               <Box component="button" onClick={onClose} sx={{ border: 'none', background: 'transparent', color: 'rgba(255,255,255,0.55)', fontSize: '0.8125rem', cursor: 'pointer', fontFamily: 'inherit', px: 1, py: 0.5 }}>Cancel</Box>
               <Box
                 component="button"
-                onClick={() => fileOnGitHub(pane === 'bug' ? 'bug' : 'idea')}
-                disabled={!reportText.trim()}
+                onClick={() => { void submitReport(pane === 'bug' ? 'bug' : 'idea'); }}
+                disabled={!reportText.trim() || sending}
                 sx={{
+                  display: 'inline-flex', alignItems: 'center', gap: 0.75,
                   border: 'none', borderRadius: '9px', px: 1.5, py: 0.6, fontFamily: 'inherit',
-                  fontSize: '0.8125rem', fontWeight: 600, cursor: reportText.trim() ? 'pointer' : 'default',
+                  fontSize: '0.8125rem', fontWeight: 600, cursor: reportText.trim() && !sending ? 'pointer' : 'default',
                   background: reportText.trim() ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.15)',
                   color: reportText.trim() ? '#1c1b19' : 'rgba(255,255,255,0.4)',
                 }}
               >
+                {sending && <CircularProgress size={12} thickness={6} sx={{ color: '#1c1b19' }} />}
                 Continue on GitHub
               </Box>
             </Box>

From 79b9d3b4c29fa2c6c7c91acd883f9b8aa57097c5 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 13:14:38 -0700
Subject: [PATCH 174/248] [eric] chat: live browser + app embeds inside the
 transcript, one click pops them onto the canvas

---
 .../src/app/pages/AgentChat/AgentChat.tsx     |   4 +
 .../AgentChat/shell/InlineSurfaceEmbeds.tsx   | 172 ++++++++++++++++++
 .../src/shared/state/dashboardLayoutSlice.ts  |  11 ++
 3 files changed, 187 insertions(+)
 create mode 100644 frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 59f3e593..2fff1fca 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -50,6 +50,7 @@ import { fetchModes } from '@/shared/state/modesSlice';
 import { createSessionWs, acquireSessionWs, releaseSessionWs, seedSessionSeq } from '@/shared/ws/WebSocketManager';
 import StreamingBubble from './bubbles/StreamingBubble';
 import WelcomeQuickReplies from './WelcomeQuickReplies';
+import InlineSurfaceEmbeds from './shell/InlineSurfaceEmbeds';
 import { useWelcomeGreeting } from './useWelcomeGreeting';
 import { THINKING_LABELS } from './thinkingLabels';
 import MessageBubble from './bubbles/MessageBubble';
@@ -1916,6 +1917,9 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                 </Box>
               </Box>
             )}
+            {/* The surfaces this agent is driving, live inside the chat: browser snapshots + built
+                apps, each one click from popping out onto the canvas. */}
+            {!isDraft && id && <InlineSurfaceEmbeds c={c} sessionId={id} fullscreen={fullscreenChat} />}
             {/* First-run welcome chips: sit UNDER the streamed greeting, appear once it finishes,
                 vanish the moment the user answers. The greeting itself is a real assistant bubble. */}
             {session.is_welcome_draft && isDraft && welcomeGreetingDone && !session.messages.some((m) => m.role === 'user') && (
diff --git a/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx b/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
new file mode 100644
index 00000000..dcc307ac
--- /dev/null
+++ b/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
@@ -0,0 +1,172 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { motion } from 'framer-motion';
+import LanguageIcon from '@mui/icons-material/Language';
+import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
+import OpenInFullRoundedIcon from '@mui/icons-material/OpenInFullRounded';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { clearTiledCard, focusBrowserCard, focusViewCard } from '@/shared/state/dashboardLayoutSlice';
+import { getWebview } from '@/shared/browserRegistry';
+import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
+
+// The desktop-redesign frame: the surfaces an agent is driving live INSIDE its chat. Each linked
+// browser card renders as a live snapshot embed (same visual grammar as the tool cards: rounded,
+// bordered, quiet chrome header) that repaints while the agent works; each built app renders as an
+// open row. Clicking pops the real card out on the canvas (exiting full size view first if needed),
+// which IS the "drag it out" gesture without inventing a second windowing system inside the chat.
+const SNAPSHOT_MS = 2500;
+
+function useBrowserSnapshot(browserId: string, live: boolean): string | null {
+  const [shot, setShot] = useState<string | null>(null);
+  useEffect(() => {
+    let dead = false;
+    let timer = 0;
+    const grab = async (): Promise<void> => {
+      try {
+        const wv = getWebview(browserId) as unknown as { capturePage?: () => Promise<{ toDataURL(): string }> } | undefined;
+        if (wv?.capturePage) {
+          // capturePage can hang on off-screen guests (Electron 42); race a timeout so the poll never wedges.
+          const img = await Promise.race([
+            wv.capturePage(),
+            new Promise<null>((res) => window.setTimeout(() => res(null), 1200)),
+          ]);
+          if (!dead && img) setShot(img.toDataURL());
+        }
+      } catch { /* snapshot is best-effort */ }
+      // Live sessions repaint forever; idle ones retry a few times so a webview that mounts late
+      // (fullscreen hiding the canvas, load races) still yields one real frame instead of a blank.
+      tries += 1;
+      if (!dead && (live || (tries < 6))) timer = window.setTimeout(() => { void grab(); }, SNAPSHOT_MS);
+    };
+    let tries = 0;
+    void grab();
+    return () => { dead = true; window.clearTimeout(timer); };
+  }, [browserId, live]);
+  return shot;
+}
+
+const BrowserEmbed: React.FC<{ c: ClaudeTokens; browserId: string; title: string; url: string; live: boolean; onOpen: () => void }> = ({ c, browserId, title, url, live, onOpen }) => {
+  const shot = useBrowserSnapshot(browserId, live);
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25 }}
+      style={{ width: '100%' }}
+    >
+      <Box
+        onClick={onOpen}
+        sx={{
+          border: `1px solid ${c.border.subtle}`, borderRadius: 2, overflow: 'hidden', cursor: 'pointer',
+          bgcolor: c.bg.elevated, transition: 'border-color 150ms, box-shadow 150ms',
+          '&:hover': { borderColor: c.border.strong, boxShadow: c.shadow.md },
+          '&:hover .osw-embed-open': { opacity: 1 },
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.25, py: 0.75, borderBottom: `1px solid ${c.border.subtle}` }}>
+          <LanguageIcon sx={{ fontSize: 14, color: c.text.muted, flexShrink: 0 }} />
+          <Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {title || 'Browser'}
+          </Typography>
+          <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>
+            {url}
+          </Typography>
+          {live && (
+            <Box sx={{ width: 6, height: 6, borderRadius: '50%', background: c.status.success, flexShrink: 0 }} />
+          )}
+          <Box className="osw-embed-open" sx={{ display: 'flex', alignItems: 'center', gap: 0.4, opacity: 0, transition: 'opacity 120ms', color: c.text.muted, flexShrink: 0 }}>
+            <OpenInFullRoundedIcon sx={{ fontSize: 12 }} />
+            <Typography sx={{ fontSize: '0.625rem', fontWeight: 600 }}>Open on canvas</Typography>
+          </Box>
+        </Box>
+        {shot ? (
+          <Box component="img" src={shot} alt="" sx={{ display: 'block', width: '100%', maxHeight: 260, objectFit: 'cover', objectPosition: 'top' }} />
+        ) : (
+          <Box sx={{ height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', color: c.text.ghost, fontSize: '0.75rem' }}>
+            {live ? 'Loading page view...' : 'Page view unavailable'}
+          </Box>
+        )}
+      </Box>
+    </motion.div>
+  );
+};
+
+const InlineSurfaceEmbeds: React.FC<{ c: ClaudeTokens; sessionId: string; fullscreen?: boolean }> = ({ c, sessionId, fullscreen }) => {
+  const dispatch = useAppDispatch();
+  const browserCards = useAppSelector((s) => s.dashboardLayout.browserCards);
+  const outputs = useAppSelector((s) => s.outputs.items);
+  const sessions = useAppSelector((s) => s.agents.sessions);
+  const sessionStatus = sessions[sessionId]?.status;
+  const live = sessionStatus === 'running' || sessionStatus === 'waiting_approval';
+
+  const linkedBrowsers = useMemo(() => {
+    // A chat's browsers arrive two ways: cards this session spawned directly (spawned_by), and cards
+    // driven by its browser sub-agents (child session's browser_id). Union both, keyed by card id.
+    const childBrowserIds = new Set(
+      Object.values(sessions)
+        .filter((s) => s.parent_session_id === sessionId && s.browser_id)
+        .map((s) => s.browser_id as string),
+    );
+    return Object.values(browserCards).filter(
+      (bc) => bc.spawned_by === sessionId || childBrowserIds.has(bc.browser_id),
+    );
+  }, [browserCards, sessions, sessionId]);
+  const linkedApps = useMemo(
+    () => Object.values(outputs).filter((o) => o.session_id === sessionId),
+    [outputs, sessionId],
+  );
+
+  if (linkedBrowsers.length === 0 && linkedApps.length === 0) return null;
+
+  const popOut = (fire: () => void): void => {
+    // Full size view hides the canvas; step out first so "open on canvas" lands somewhere visible.
+    if (fullscreen) dispatch(clearTiledCard(sessionId));
+    fire();
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, my: 1 }}>
+      {linkedBrowsers.map((bc) => {
+        const tab = bc.tabs.find((t) => t.id === bc.activeTabId) ?? bc.tabs[0];
+        return (
+          <BrowserEmbed
+            key={bc.browser_id}
+            c={c}
+            browserId={bc.browser_id}
+            title={tab?.title ?? ''}
+            url={tab?.url ?? ''}
+            live={live}
+            onOpen={() => popOut(() => dispatch(focusBrowserCard(bc.browser_id)))}
+          />
+        );
+      })}
+      {linkedApps.map((o) => (
+        <Box
+          key={o.id}
+          onClick={() => popOut(() => dispatch(focusViewCard(o.id)))}
+          sx={{
+            display: 'flex', alignItems: 'center', gap: 1.25, px: 1.25, py: 1,
+            border: `1px solid ${c.border.subtle}`, borderRadius: 2, cursor: 'pointer',
+            bgcolor: c.bg.elevated, transition: 'border-color 150ms',
+            '&:hover': { borderColor: c.border.strong },
+          }}
+        >
+          <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: c.text.primary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {o.name || 'App'}
+            </Typography>
+            <Typography sx={{ fontSize: '0.6875rem', color: c.text.muted }}>Built in this chat</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, color: c.text.muted }}>
+            <OpenInFullRoundedIcon sx={{ fontSize: 12 }} />
+            <Typography sx={{ fontSize: '0.625rem', fontWeight: 600 }}>Open</Typography>
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default InlineSurfaceEmbeds;
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index fc0b992c..713c4dfc 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -918,6 +918,15 @@ const dashboardLayoutSlice = createSlice({
       state.pendingFocusBrowserId = null;
     },
 
+    // Camera-focus an EXISTING card (the inline chat embeds' "show on canvas"); the lifecycle
+    // pendingFocus effects own the fit + highlight + clear, same as a fresh add.
+    focusBrowserCard(state, action: PayloadAction<string>) {
+      if (state.browserCards[action.payload]) state.pendingFocusBrowserId = action.payload;
+    },
+    focusViewCard(state, action: PayloadAction<string>) {
+      if (state.viewCards[action.payload]) state.pendingFocusViewCardId = action.payload;
+    },
+
     addBrowserCardFromBackend(state, action: PayloadAction<BrowserCardPosition>) {
       const card = action.payload;
       if (state.browserCards[card.browser_id]) return;
@@ -1833,6 +1842,8 @@ export const {
   clearAllTiles,
   clearCardWindowState,
   clearPendingFocusBrowserId,
+  focusBrowserCard,
+  focusViewCard,
   activateViewCardPreview,
   clearPendingFocusViewCardId,
   addWorkflowCard,

From a80642d58ffe8a212243de106c52234a2bd34df8 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 13:17:25 -0700
Subject: [PATCH 175/248] [eric] sidebar: docked panel gets the pill corners;
 peek closes over webviews and on app blur

---
 .../src/app/components/Layout/AppShell.tsx    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index e5ed4a72..b83e1aef 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -501,8 +501,18 @@ const AppShell: React.FC = () => {
       if (e.clientX > 10 + sidebarWidth + 130) schedulePeekClose();
       else cancelPeekClose();
     };
+    // A cursor gliding over a webview GUEST sends the host zero mousemoves, so the move-based close
+    // above never fires and the peek looks stuck. Guest interactions bubble up as these app events;
+    // any of them means the cursor left the panel. Window blur (app switch) likewise must not park it.
+    const closeNow = (): void => setSidePeek(false);
     window.addEventListener('mousemove', onMove);
-    return () => window.removeEventListener('mousemove', onMove);
+    window.addEventListener('openswarm:browser-guest-select', closeNow);
+    window.addEventListener('blur', closeNow);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('openswarm:browser-guest-select', closeNow);
+      window.removeEventListener('blur', closeNow);
+    };
   }, [sidePeek, sidebarWidth, schedulePeekClose, cancelPeekClose]);
   // Fullscreen still hides the top-center island anchor + banners; the sidebar floats in on peek.
   const fsHideChrome = fsActive;
@@ -926,7 +936,13 @@ const AppShell: React.FC = () => {
             transform: sidePeek ? 'translateX(0)' : 'translateX(-118%)',
             transition: 'transform 240ms cubic-bezier(0.22,1,0.36,1)',
             pointerEvents: sidePeek ? 'auto' : 'none',
-          } : {}),
+          } : {
+            // Docked mode reads as a pill too: the dashboard-facing right corners curve; the window
+            // edge keeps the left ones square (the OS rounds them with the window itself).
+            borderRadius: '0 14px 14px 0',
+            overflow: 'hidden',
+            borderRight: `1px solid ${c.border.subtle}`,
+          }),
         }}
       >
         {/* Sidebar header = the app's chrome home (Arc/Zen): window-light clearance, back/forward, collapse, then the search command bar. */}

From 39eb725c804f4c3ea4aa7683017bbfca10728160 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 13:32:19 -0700
Subject: [PATCH 176/248] [eric] canvas: dot grid is a cached SVG tile, not a
 per-zoom-rasterized gradient (kills the white-patch dropouts)

---
 frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index ac3da88a..db1feba6 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -355,14 +355,16 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
           />
         )}
 
-        {/* Dot grid background; gestures move it imperatively via gridRef (phase + scale), commits re-render it here (dot radius included) */}
+        {/* Dot grid background; gestures move it imperatively via gridRef (phase + scale), commits re-render it here (dot radius included). The tile is an SVG IMAGE, not a procedural gradient: Chromium caches a decoded image as a GPU texture, while a radial-gradient re-rasterizes the whole layer every backgroundSize change, and under GPU memory pressure (many webviews, external monitors) those rasters get dropped and paint as a giant blank rectangle, the 1.5.9 white-patch bug. Same backgroundSize/Position write contract, so the per-frame camera writer is untouched. */}
         <Box
           ref={canvas.gridRef}
           sx={{
             position: 'absolute',
             inset: 0,
             pointerEvents: 'none',
-            backgroundImage: `radial-gradient(circle, ${c.border.medium} ${dotSize}px, transparent ${dotSize}px)`,
+            backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(
+              `<svg xmlns='http://www.w3.org/2000/svg' width='${dotSpacing}' height='${dotSpacing}'><circle cx='${dotSpacing / 2}' cy='${dotSpacing / 2}' r='${dotSize}' fill='${c.border.medium}'/></svg>`,
+            )}")`,
             backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
             backgroundPosition: `${canvas.panX % dotSpacing}px ${canvas.panY % dotSpacing}px`,
           }}

From d7890cc28868726ff160e96ae78a511166665d82 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 13:36:50 -0700
Subject: [PATCH 177/248] [eric] hero: name-aware headline + typed agentic
 ghost text; sidebar pill corners scoped to fullscreen-pinned

---
 .../src/app/components/Layout/AppShell.tsx    |  8 ++--
 .../Dashboard/canvas/DashboardEmptyState.tsx  | 42 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index b83e1aef..adf3ff9f 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -936,13 +936,13 @@ const AppShell: React.FC = () => {
             transform: sidePeek ? 'translateX(0)' : 'translateX(-118%)',
             transition: 'transform 240ms cubic-bezier(0.22,1,0.36,1)',
             pointerEvents: sidePeek ? 'auto' : 'none',
-          } : {
-            // Docked mode reads as a pill too: the dashboard-facing right corners curve; the window
-            // edge keeps the left ones square (the OS rounds them with the window itself).
+          } : fsActive ? {
+            // Fullscreen with the sidebar pinned: the panel sits beside a full-bleed surface, so its
+            // dashboard-facing right corners curve like a pill; normal docked mode stays square.
             borderRadius: '0 14px 14px 0',
             overflow: 'hidden',
             borderRight: `1px solid ${c.border.subtle}`,
-          }),
+          } : {}),
         }}
       >
         {/* Sidebar header = the app's chrome home (Arc/Zen): window-light clearance, back/forward, collapse, then the search command bar. */}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
index 608f43ca..7a73d3c6 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
@@ -32,6 +32,36 @@ function iconForStarter(text: string): LucideIcon {
   return Sparkles;
 }
 
+// The placeholder cycles agentic invitations with a typewriter feel (only while the field is empty),
+// so the hero reads like an agent offering to go DO things, not a search box waiting for keywords.
+const GHOST_DEFAULTS = [
+  'Send an agent to find me something great...',
+  'Build me a tool I can use right now...',
+  'Research something and report back...',
+  'Watch a site and tell me when it changes...',
+];
+
+function useTypedGhost(lines: string[], active: boolean): string {
+  const [out, setOut] = React.useState('');
+  React.useEffect(() => {
+    if (!active || lines.length === 0) return undefined;
+    let li = 0; let ci = 0; let deleting = false;
+    const id = window.setInterval(() => {
+      const line = lines[li % lines.length];
+      if (!deleting) {
+        ci += 1;
+        if (ci >= line.length + 24) deleting = true; // linger fully typed ~1s
+      } else {
+        ci -= 3;
+        if (ci <= 0) { deleting = false; ci = 0; li += 1; }
+      }
+      setOut(line.slice(0, Math.min(ci, line.length)));
+    }, 45);
+    return () => window.clearInterval(id);
+  }, [lines, active]);
+  return out;
+}
+
 const DashboardEmptyState: React.FC<{
   c: ClaudeTokens;
   onLaunch?: (prompt: string, mode: string, model: string) => void;
@@ -41,8 +71,16 @@ const DashboardEmptyState: React.FC<{
   const mode = useAppSelector((s) => s.settings.data.default_mode);
   const canRun = useAppSelector((s) => hasFreeTrialActive(s) || hasModelConnected(s));
   const personalized = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
+  const userName = useAppSelector((s) => s.settings.data.user_name ?? null);
   const [text, setText] = React.useState('');
   const [launching, setLaunching] = React.useState(false);
+  const firstName = (userName ?? '').trim().split(/\s+/)[0] || null;
+  const headline = firstName ? `What should we get done, ${firstName}?` : 'What do you want done?';
+  const ghostLines = React.useMemo(
+    () => (personalized.length > 0 ? [...personalized.slice(0, 3).map((s) => `${s.title}...`), ...GHOST_DEFAULTS.slice(0, 2)] : GHOST_DEFAULTS),
+    [personalized],
+  );
+  const ghost = useTypedGhost(ghostLines, text.length === 0 && canRun);
 
   const launch = (prompt: string) => {
     const p = prompt.trim();
@@ -71,7 +109,7 @@ const DashboardEmptyState: React.FC<{
         sx={{ width: '100%', maxWidth: 620, pointerEvents: 'auto', display: 'flex', flexDirection: 'column' }}
       >
         <Typography sx={{ color: c.text.primary, fontSize: c.font.size.display, fontWeight: 600, textAlign: 'center', letterSpacing: '-0.01em', mb: 3 }}>
-          What do you want done?
+          {headline}
         </Typography>
 
         {canRun && !!onLaunch ? (
@@ -98,7 +136,7 @@ const DashboardEmptyState: React.FC<{
                 onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); launch(text); setText(''); }
                 }}
-                placeholder="Ask me anything..."
+                placeholder={ghost || "Ask me anything..."}
                 disabled={launching}
                 sx={{
                   flex: 1, border: 'none', outline: 'none', bgcolor: 'transparent',

From 8039f6caac2837a12318a42462e2e1845540bd94 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 13:45:07 -0700
Subject: [PATCH 178/248] [eric] canvas: zoom sensitivity recentered, the old
 max feel is the new default 50

---
 .../pages/Dashboard/hooks/interaction/useCanvasControls.ts  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
index 47861b8c..b41d3f8a 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useCanvasControls.ts
@@ -24,9 +24,11 @@ const WHEEL_ZOOM_DELTA_CAP = 24;
 const WHEEL_STREAM_GAP_MS = 150;
 const MOUSE_NOTCH_MIN_DELTA = 40;
 
-// Maps the 1 to 100 user setting to an internal multiplier (50 default = 0.004).
+// Maps the 1 to 100 user setting to an internal multiplier. Recentered 2026-07-24 (Eric): the old
+// max (100 = 0.008) is the feel people actually wanted, so that is the new DEFAULT 50; the scale
+// still doubles up to 100 for wheel users who want faster.
 function sensitivityToMultiplier(setting: number): number {
-  return 0.00008 * setting;
+  return 0.00016 * setting;
 }
 
 interface CanvasState {

From 882a961b084812080d73101f9dcc599a4c3ab618 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 15:34:04 -0700
Subject: [PATCH 179/248] [eric] perf: dev-only long-task logger so
 responsiveness regressions get caught by numbers

---
 frontend/src/index.tsx                        |  2 +
 .../src/shared/perf/startLongTaskLogger.ts    | 45 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 frontend/src/shared/perf/startLongTaskLogger.ts

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 4549bca8..865b4540 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -4,9 +4,11 @@ import Main from './app/Main';
 import ErrorBoundary from './app/components/feedback/ErrorBoundary';
 import { ensureAuthToken } from './shared/config';
 import { runStartupMigrations } from './shared/migrations';
+import { startLongTaskLogger } from './shared/perf/startLongTaskLogger';
 
 // Must run before ensureAuthToken reads localStorage; v1.0.31 migration force-clears auth+onboarding so the stale token doesn't survive.
 runStartupMigrations();
+startLongTaskLogger();
 
 // 3s timeout so a missing Electron bridge (plain-browser dev) doesn't hang; 401 in that case is intentional.
 async function bootstrap() {
diff --git a/frontend/src/shared/perf/startLongTaskLogger.ts b/frontend/src/shared/perf/startLongTaskLogger.ts
new file mode 100644
index 00000000..36664394
--- /dev/null
+++ b/frontend/src/shared/perf/startLongTaskLogger.ts
@@ -0,0 +1,45 @@
+// Dev-only responsiveness watchdog: regressions show up as numbers in the console, not vibes.
+interface LongTaskStats {
+  count: number;
+  totalMs: number;
+  worstMs: number;
+  reset: () => void;
+}
+
+declare global {
+  interface Window {
+    OSW_PERF?: LongTaskStats;
+  }
+}
+
+const NOISY_TASK_MS = 150;
+
+export function startLongTaskLogger(): void {
+  if (process.env.NODE_ENV === 'production') return;
+  if (typeof PerformanceObserver === 'undefined') return;
+  if (!PerformanceObserver.supportedEntryTypes?.includes('longtask')) return;
+
+  const stats: LongTaskStats = {
+    count: 0,
+    totalMs: 0,
+    worstMs: 0,
+    reset: () => {
+      stats.count = 0;
+      stats.totalMs = 0;
+      stats.worstMs = 0;
+    },
+  };
+  window.OSW_PERF = stats;
+
+  const observer = new PerformanceObserver((list: PerformanceObserverEntryList) => {
+    for (const entry of list.getEntries()) {
+      stats.count += 1;
+      stats.totalMs += entry.duration;
+      if (entry.duration > stats.worstMs) stats.worstMs = entry.duration;
+      if (entry.duration >= NOISY_TASK_MS) {
+        console.debug(`[perf] long task ${Math.round(entry.duration)}ms (total ${stats.count} tasks, ${Math.round(stats.totalMs)}ms)`);
+      }
+    }
+  });
+  observer.observe({ entryTypes: ['longtask'] });
+}

From 2d73cfd00c38dae6b302736440f9823dab84272c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 24 Jul 2026 15:41:28 -0700
Subject: [PATCH 180/248] [eric] perf: import-digest canvas hides at idle,
 frees its 19MB full-window GPU layer

---
 frontend/src/app/components/share/ImportDigest.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/app/components/share/ImportDigest.tsx b/frontend/src/app/components/share/ImportDigest.tsx
index f06ee282..14974822 100644
--- a/frontend/src/app/components/share/ImportDigest.tsx
+++ b/frontend/src/app/components/share/ImportDigest.tsx
@@ -20,6 +20,7 @@ const ImportDigest = forwardRef<DigestHandle, { color?: string }>(({ color = '#c
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const busyRef = useRef(false);
   const rafRef = useRef(0);
+  const hideTimerRef = useRef(0);
 
   useImperativeHandle(ref, () => ({
     play(x: number, y: number): boolean {
@@ -29,11 +30,19 @@ const ImportDigest = forwardRef<DigestHandle, { color?: string }>(({ color = '#c
 
       const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
       busyRef.current = true;
+      window.clearTimeout(hideTimerRef.current);
+      canvas.style.display = 'block';
       canvas.style.opacity = '1';
 
       const finish = () => {
         busyRef.current = false;
         canvas.style.opacity = '0';
+        // Idle display:none + a zeroed backing store return the ~19MB full-window GPU layer this pinned 24/7.
+        hideTimerRef.current = window.setTimeout(() => {
+          canvas.style.display = 'none';
+          canvas.width = 0;
+          canvas.height = 0;
+        }, 240);
       };
       if (reduce) {
         // Honor reduced-motion: no flashing pixels, just a brief, calm beat.
@@ -114,6 +123,7 @@ const ImportDigest = forwardRef<DigestHandle, { color?: string }>(({ color = '#c
         pointerEvents: 'none',
         zIndex: 2100,
         opacity: 0,
+        display: 'none',
         transition: 'opacity 200ms ease',
       }}
     />

From 85828f58542ebc85e65051e4bc5b56f673bb777c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 26 Jul 2026 21:11:07 -0700
Subject: [PATCH 181/248] [eric] voice: native uiohook key tap gives keyboard
 true hold-to-talk on mac and windows, toggle fallback preserved

---
 electron/main.js                              |  50 +-------
 electron/package-lock.json                    |  28 ++++-
 electron/package.json                         |   3 +-
 electron/preload.js                           |   6 +-
 electron/voiceHotkey.js                       | 116 ++++++++++++++++++
 .../sections/general/GeneralInterface.tsx     |  10 +-
 .../shared/voice/VoiceDictationContext.tsx    |  24 ++--
 frontend/src/types/electron.d.ts              |   2 +
 8 files changed, 176 insertions(+), 63 deletions(-)
 create mode 100644 electron/voiceHotkey.js

diff --git a/electron/main.js b/electron/main.js
index 79e809ad..f8921af0 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -57,6 +57,7 @@ const os = require('os');
 const fs = require('fs');
 const hiddenBrowser = require('./hiddenBrowser');
 const usageHarvest = require('./usageHarvest');
+const { installVoiceHotkey } = require('./voiceHotkey');
 const getPort = require('get-port');
 const http = require('http');
 const affiliateTracking = require('./affiliateTracking');
@@ -1788,51 +1789,10 @@ app.whenReady().then(async () => {
   // Off-window mouse-release crash dodge (macOS). Safe to call before windows exist.
   installMacMouseClamp();
 
-  // Voice dictation hotkey. globalShortcut can't see key-up, so hold-to-talk is impossible through it;
-  // the shortcut is only registered while OUR window is unfocused (background toggle). When the app is
-  // focused, MAIN watches before-input-event (sees every keyDown/keyUp incl. modifiers, regardless of
-  // which element or webview has focus, and immune to macOS's letter-keyup-under-Cmd suppression at the
-  // DOM layer) and relays voice:hold-down / voice:hold-up; the renderer maps those to hold-vs-toggle.
-  // F5 is the mic/dictation key printed on Mac keyboards (the fn/globe key itself is invisible to
-  // Electron without a native event tap), so it's the simple primary; the old combo stays as backup.
-  const VOICE_COMBOS = ['F5', 'CommandOrControl+Shift+D'];
-  const registerVoiceShortcut = () => {
-    for (const combo of VOICE_COMBOS) {
-      try {
-        if (!globalShortcut.isRegistered(combo)) {
-          globalShortcut.register(combo, () => {
-            if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:toggle');
-          });
-        }
-      } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
-    }
-  };
-  registerVoiceShortcut();
-  app.on('browser-window-focus', () => { for (const combo of VOICE_COMBOS) { try { globalShortcut.unregister(combo); } catch (_) {} } });
-  app.on('browser-window-blur', registerVoiceShortcut);
-
-  // Every discrete combo press relays (autorepeat filtered); the renderer toggles record state.
-  // No held/release tracking: macOS delivers neither the letter keyup nor modifier releases to ANY
-  // Chromium layer while Cmd is down (verified empirically), so keyboard hold-release is undetectable
-  // without a native event tap. Keyboard = press to start/stop; the mic buttons own true hold-to-talk.
-  const installVoiceHoldRelay = (contents) => {
-    contents.on('before-input-event', (event, input) => {
-      if (input.type !== 'keyDown' || input.isAutoRepeat) return;
-      const isD = (input.code === 'KeyD' || (input.key || '').toLowerCase() === 'd');
-      const combo = (isD && (input.meta || input.control) && input.shift) || input.code === 'F5';
-      if (combo) {
-        if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('voice:hold-down');
-        event.preventDefault();
-      }
-    });
-  };
-  // Installed via web-contents-created (not directly on mainWindow): createWindow() runs LATER in this
-  // whenReady sequence, so mainWindow is still undefined here. The hook catches the main window when it
-  // is born, and every webview guest too (guests swallow keys when a page has focus).
-  app.on('web-contents-created', (event, contents) => {
-    const t = contents.getType();
-    if (t === 'window' || t === 'webview') installVoiceHoldRelay(contents);
-  });
+  // Voice dictation hotkey (F5 / Cmd-Ctrl+Shift+D). Native uiohook key tap = true keyboard
+  // hold-to-talk on every platform; falls back to the old press-to-toggle when the tap can't run
+  // (module missing, or macOS without the Accessibility grant). Tiers live in voiceHotkey.js.
+  installVoiceHotkey(() => mainWindow);
 
   // PASSKEY SPIKE (macOS only): turn on the Secure-Enclave/Touch ID WebAuthn authenticator that Electron 42 added. Without this, isUserVerifyingPlatformAuthenticatorAvailable() is hardwired false (why the old reject-shim existed). keychainAccessGroup MUST match the keychain-access-groups entitlement (Y26NUZH4NG.<bundle>.webauthn) or this throws. Windows has no equivalent, so the reject-shim still runs there.
   if (process.platform === 'darwin' && typeof app.configureWebAuthn === 'function') {
diff --git a/electron/package-lock.json b/electron/package-lock.json
index 1781b23d..e6071cd5 100644
--- a/electron/package-lock.json
+++ b/electron/package-lock.json
@@ -8,9 +8,11 @@
       "name": "openswarm",
       "version": "1.5.8",
       "hasInstallScript": true,
+      "license": "AGPL-3.0-only",
       "dependencies": {
         "electron-updater": "6.8.3",
-        "get-port": "5.1.1"
+        "get-port": "5.1.1",
+        "uiohook-napi": "^1.5.5"
       },
       "devDependencies": {
         "@electron/notarize": "3.1.1",
@@ -2724,6 +2726,17 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-gyp/node_modules/isexe": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
@@ -3470,6 +3483,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/uiohook-napi": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/uiohook-napi/-/uiohook-napi-1.5.5.tgz",
+      "integrity": "sha512-oSlTdnECw2GBfsJPTbBQBeE4v/EXP0EZmX6BJq5nzH/JgFaBE8JpFwEA/kLhiEP7HxQw28FViWiYgdIZzWuuJQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-gyp-build": "^4.8.4"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/undici": {
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/undici/-/undici-7.26.0.tgz",
diff --git a/electron/package.json b/electron/package.json
index a54422d9..8f9408db 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -20,7 +20,8 @@
   },
   "dependencies": {
     "electron-updater": "6.8.3",
-    "get-port": "5.1.1"
+    "get-port": "5.1.1",
+    "uiohook-napi": "^1.5.5"
   },
   "devDependencies": {
     "@electron/notarize": "3.1.1",
diff --git a/electron/preload.js b/electron/preload.js
index 91a36f7a..2ed05e8e 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -75,7 +75,11 @@ contextBridge.exposeInMainWorld('openswarm', {
   },
   // Reveal a diagnostics folder in Finder/Explorer (path validated in main; diagnostics dir only).
   revealBundle: (folderPath) => ipcRenderer.invoke('help:reveal-bundle', folderPath),
-  // Main-process hold relay (before-input-event): fires down/up for the combo regardless of DOM focus.
+  // True keyboard hold-to-talk needs the native key tap; renderers ask so Settings copy stays honest,
+  // and request triggers the macOS Accessibility prompt when the tap is blocked on permission.
+  voiceHoldCapable: () => ipcRenderer.invoke('voice:hold-capable'),
+  voiceRequestHoldPermission: () => ipcRenderer.invoke('voice:request-hold-permission'),
+  // Native-tap hold relay: real global key-down/key-up for the voice combo, focus-independent.
   onVoiceHold: (onDown, onUp) => {
     const down = () => onDown();
     const up = () => onUp();
diff --git a/electron/voiceHotkey.js b/electron/voiceHotkey.js
new file mode 100644
index 00000000..6d2542b4
--- /dev/null
+++ b/electron/voiceHotkey.js
@@ -0,0 +1,116 @@
+const { app, globalShortcut, ipcMain, systemPreferences } = require('electron');
+
+// Voice dictation hotkey (F5 primary, Cmd/Ctrl+Shift+D backup), two tiers:
+//
+//   NATIVE (uiohook-napi event tap): sees real key-down AND key-up globally, in or out of focus,
+//   immune to macOS's letter-keyup-under-Cmd suppression, so the keyboard gets TRUE hold-to-talk
+//   exactly like the mic buttons. Listen-only (never swallows keys from other apps). macOS needs
+//   the Accessibility grant; Windows needs nothing.
+//
+//   FALLBACK (no native tap: module missing, load failure, or no macOS permission): the pre-tap
+//   behavior verbatim. globalShortcut toggles while our window is unfocused; a before-input relay
+//   toggles while focused (key-ups are undetectable there, proven empirically, so press-to-toggle).
+//
+// The before-input relay installs in BOTH tiers: with the tap active it only swallows the combo so
+// pages/webviews never see F5 or the 'd', with the tap inactive it also sends the toggle.
+
+const VOICE_COMBOS = ['F5', 'CommandOrControl+Shift+D'];
+
+function installVoiceHotkey(getMainWindow) {
+  const send = (channel) => {
+    const win = getMainWindow();
+    if (win && !win.isDestroyed()) win.webContents.send(channel);
+  };
+
+  let nativeTapActive = false;
+
+  const tryStartNativeTap = () => {
+    try {
+      if (process.platform === 'darwin' && !systemPreferences.isTrustedAccessibilityClient(false)) {
+        console.log('[voice] no Accessibility grant, keyboard stays press-to-toggle');
+        return false;
+      }
+      const { uIOhook, UiohookKey } = require('uiohook-napi');
+      const MOD_KEYS = new Set([
+        UiohookKey.Ctrl, UiohookKey.CtrlRight, UiohookKey.Shift, UiohookKey.ShiftRight,
+        UiohookKey.Meta, UiohookKey.MetaRight,
+      ]);
+      // 'f5' | 'combo' | null; one hold at a time, repeats and the other combo ignored while held.
+      let heldBy = null;
+
+      uIOhook.on('keydown', (e) => {
+        if (heldBy) return;
+        if (e.keycode === UiohookKey.F5) {
+          heldBy = 'f5';
+          send('voice:hold-down');
+        } else if (e.keycode === UiohookKey.D && e.shiftKey && (e.metaKey || e.ctrlKey)) {
+          heldBy = 'combo';
+          send('voice:hold-down');
+        }
+      });
+      uIOhook.on('keyup', (e) => {
+        if (!heldBy) return;
+        const releases =
+          (heldBy === 'f5' && e.keycode === UiohookKey.F5) ||
+          (heldBy === 'combo' && (e.keycode === UiohookKey.D || MOD_KEYS.has(e.keycode)));
+        if (releases) {
+          heldBy = null;
+          send('voice:hold-up');
+        }
+      });
+
+      uIOhook.start();
+      app.on('will-quit', () => { try { uIOhook.stop(); } catch (_) {} });
+      console.log('[voice] native key tap active, keyboard hold-to-talk enabled');
+      return true;
+    } catch (e) {
+      console.log('[voice] native key tap unavailable (continuing with toggle):', e && e.message);
+      return false;
+    }
+  };
+  nativeTapActive = tryStartNativeTap();
+
+  if (!nativeTapActive) {
+    const registerVoiceShortcut = () => {
+      for (const combo of VOICE_COMBOS) {
+        try {
+          if (!globalShortcut.isRegistered(combo)) {
+            globalShortcut.register(combo, () => send('voice:toggle'));
+          }
+        } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+      }
+    };
+    registerVoiceShortcut();
+    app.on('browser-window-focus', () => { for (const combo of VOICE_COMBOS) { try { globalShortcut.unregister(combo); } catch (_) {} } });
+    app.on('browser-window-blur', registerVoiceShortcut);
+  }
+
+  const installVoiceHoldRelay = (contents) => {
+    contents.on('before-input-event', (event, input) => {
+      if (input.type !== 'keyDown' || input.isAutoRepeat) return;
+      const isD = (input.code === 'KeyD' || (input.key || '').toLowerCase() === 'd');
+      const combo = (isD && (input.meta || input.control) && input.shift) || input.code === 'F5';
+      if (combo) {
+        if (!nativeTapActive) send('voice:toggle');
+        event.preventDefault();
+      }
+    });
+  };
+  // Installed via web-contents-created: the main window is born later in the whenReady sequence, and
+  // webview guests swallow keys when a page has focus, so every window/guest gets the relay.
+  app.on('web-contents-created', (event, contents) => {
+    const t = contents.getType();
+    if (t === 'window' || t === 'webview') installVoiceHoldRelay(contents);
+  });
+
+  ipcMain.handle('voice:hold-capable', () => nativeTapActive);
+  // Settings' "Hold to talk" can trigger the real macOS Accessibility prompt; a restart picks it up.
+  ipcMain.handle('voice:request-hold-permission', () => {
+    if (process.platform === 'darwin' && !nativeTapActive) {
+      try { systemPreferences.isTrustedAccessibilityClient(true); } catch (_) {}
+    }
+    return nativeTapActive;
+  });
+}
+
+module.exports = { installVoiceHotkey };
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 7b6569fe..52132607 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -104,12 +104,18 @@ const GeneralInterface: React.FC<{
       <Box sx={inlineRowSx} {...settingSelectAttrs('voice_hold_to_talk', 'Dictation', 'Interface', 'Hold to talk, or tap to start and stop.')}>
         <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Dictation</Typography>
-          <Typography sx={descSx}>How the mic button works. The mic key (F5) starts and stops.</Typography>
+          <Typography sx={descSx}>How the mic button and the mic key (F5) work.</Typography>
         </Box>
         <ToggleButtonGroup
           value={form.voice_hold_to_talk ?? true}
           exclusive
-          onChange={(_, v) => { if (v !== null) setForm({ ...form, voice_hold_to_talk: v }); }}
+          onChange={(_, v) => {
+            if (v === null) return;
+            setForm({ ...form, voice_hold_to_talk: v });
+            // Keyboard hold needs the native key tap; picking Hold on a Mac without the Accessibility
+            // grant fires the system prompt so the choice can actually take effect after a relaunch.
+            if (v) void window.openswarm?.voiceRequestHoldPermission?.();
+          }}
           size="small"
           sx={{
             '& .MuiToggleButton-root': {
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
index 5ea37ce6..14d2dd89 100644
--- a/frontend/src/shared/voice/VoiceDictationContext.tsx
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -47,20 +47,18 @@ export function VoiceDictationProvider({ children }: { children: React.ReactNode
     }
   }, [holdMode, stop]);
 
-  // The hotkey (Cmd/Ctrl+Shift+D) is press-to-start / press-to-stop, NOT hold: macOS delivers
-  // NEITHER the letter keyup nor the modifier releases to any Chromium layer while Cmd is held
-  // (proven empirically: DOM saw zero events, main's before-input-event saw only the first keyDown),
-  // so a keyboard hold-release is undetectable without a native event tap (uiohook class, the real
-  // fix, needs a packaged native module). Hold-to-talk lives on the mic buttons, which DO see
-  // pointerup. In-app presses arrive via main's before-input relay (works with webview focus and
-  // swallows the 'd' so it never types into a field); background presses via the global shortcut.
+  // Keyboard hotkey channels, matched to what the source can actually see:
+  // voice:hold-down/up come ONLY from main's native uiohook tap (real global key-up, so the keyboard
+  // gets the same hold-vs-toggle press semantics as the mic buttons); voice:toggle comes from the
+  // fallback tier (globalShortcut / before-input relay), where key-ups are undetectable, so each
+  // press toggles. Whichever tier main activated, the renderer just honors the channel it hears.
   useEffect(() => {
-    const off = (window as unknown as { openswarm?: { onVoiceHold?: (d: () => void, u: () => void) => () => void } }).openswarm?.onVoiceHold?.(
-      () => toggle(),
-      () => {},
-    );
-    return () => { off?.(); };
-  }, [toggle]);
+    const bridge = window as unknown as {
+      openswarm?: { onVoiceHold?: (d: () => void, u: () => void) => () => void };
+    };
+    const offHold = bridge.openswarm?.onVoiceHold?.(pressStart, pressEnd);
+    return () => { offHold?.(); };
+  }, [pressStart, pressEnd]);
 
   return (
     <VoiceContext.Provider value={{ state, lastText, error, pct, feedback, toggle, pressStart, pressEnd, holdMode, volumeRef }}>
diff --git a/frontend/src/types/electron.d.ts b/frontend/src/types/electron.d.ts
index a48f26c3..55b62ef6 100644
--- a/frontend/src/types/electron.d.ts
+++ b/frontend/src/types/electron.d.ts
@@ -59,6 +59,8 @@ declare global {
     voiceTranscribe?: (wav: ArrayBuffer) => Promise<{ ok: boolean; text?: string; error?: string }>;
     voiceInject?: (text: string) => Promise<{ ok: boolean; pasted?: boolean; error?: string }>;
     onVoiceToggle?: (cb: () => void) => () => void;
+    voiceHoldCapable?: () => Promise<boolean>;
+    voiceRequestHoldPermission?: () => Promise<boolean>;
     onAuthUrl?: (cb: (url: string) => void) => () => void;
     onOauthClaim?: (cb: (url: string) => void) => () => void;
   }

From 95fba8ea0ad8e19efb3646c3277e978af096ea03 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 26 Jul 2026 21:13:55 -0700
Subject: [PATCH 182/248] [eric] ci: dispatch-only verify-windows job installs
 and boots the signed squirrel artifact in the same run

---
 .github/workflows/release-windows.yml | 65 +++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/.github/workflows/release-windows.yml b/.github/workflows/release-windows.yml
index c6d328e9..733efd86 100644
--- a/.github/workflows/release-windows.yml
+++ b/.github/workflows/release-windows.yml
@@ -241,3 +241,68 @@ jobs:
             electron/dist/squirrel-windows/latest.yml
           if-no-files-found: error
           retention-days: 14
+
+  # Dispatch-only live smoke of the exact signed artifact this run just built (Squirrel layout: the
+  # root OpenSwarm.exe is a stub, the real app lives in app-<version>\; python.exe appearing is the
+  # install-done signal). Publish runs skip this: tags ship through the draft flow.
+  verify-windows:
+    if: github.event_name == 'workflow_dispatch' && github.event.inputs.publish != 'true'
+    needs: build-windows
+    runs-on: windows-latest
+    timeout-minutes: 30
+    steps:
+      - name: Download the signed installer built by this run
+        uses: actions/download-artifact@v4
+        with:
+          name: openswarm-windows-x64
+          path: installer
+
+      - name: silent install (Squirrel)
+        shell: pwsh
+        run: |
+          Start-Process -FilePath "installer\OpenSwarm-Setup-x64.exe" -ArgumentList "--silent"
+          $deadline = (Get-Date).AddMinutes(10)
+          do {
+            Start-Sleep -Seconds 5
+            $py = Get-ChildItem "$env:LOCALAPPDATA\openswarm\app-*\resources\python-env\python.exe" -ErrorAction SilentlyContinue | Select-Object -First 1
+          } until ($py -or (Get-Date) -gt $deadline)
+          if (-not $py) { Get-ChildItem "$env:LOCALAPPDATA\openswarm" -Recurse -Depth 2 -ErrorAction SilentlyContinue | Select-Object FullName -First 40; throw "installed python-env not found" }
+          $appDir = $py.FullName -replace '\\resources\\python-env\\python\.exe$', ''
+          echo "APP_EXE=$appDir\OpenSwarm.exe" >> $env:GITHUB_ENV
+          echo "APP_DIR=$appDir" >> $env:GITHUB_ENV
+          echo "installed at $appDir"
+
+      - name: native uiohook binary shipped outside the asar
+        shell: pwsh
+        run: |
+          $node = Get-ChildItem $env:APP_DIR -Recurse -Filter "uiohook-napi.node" -ErrorAction SilentlyContinue | Where-Object { $_.FullName -match "win32-x64" } | Select-Object -First 1
+          if (-not $node) { throw "uiohook-napi win32-x64 prebuild not found on disk (asar swallowed it => keyboard hold-to-talk silently dead)" }
+          echo "uiohook prebuild: $($node.FullName)"
+
+      - name: bundled python + claude CLI run on real Windows x64
+        shell: pwsh
+        run: |
+          $py = Join-Path $env:APP_DIR "resources\python-env\python.exe"
+          & $py --version
+          if ($LASTEXITCODE -ne 0) { throw "python --version failed" }
+          & $py -c "import fastapi, anthropic, pydantic, httpx, jsonschema, claude_agent_sdk; print('deps ok')"
+          if ($LASTEXITCODE -ne 0) { throw "import smoke failed" }
+          $cli = Get-ChildItem (Join-Path $env:APP_DIR "resources\python-env") -Recurse -Filter "claude*" -ErrorAction SilentlyContinue | Where-Object { $_.Directory.Name -eq "_bundled" } | Select-Object -First 1
+          if (-not $cli) { throw "bundled claude CLI not found" }
+          & $cli.FullName --version
+          if ($LASTEXITCODE -ne 0) { throw "claude --version failed" }
+
+      - name: boot the installed app, poll backend health
+        shell: pwsh
+        run: |
+          $env:OPENSWARM_E2E = "1"
+          Start-Process -FilePath $env:APP_EXE
+          $code = 0
+          foreach ($i in 1..60) {
+            Start-Sleep -Seconds 3
+            try { $code = (Invoke-WebRequest -Uri "http://127.0.0.1:8324/api/health/check" -UseBasicParsing -TimeoutSec 2).StatusCode } catch { $code = 0 }
+            if ($code -eq 200) { break }
+          }
+          echo "health=$code"
+          Stop-Process -Name "OpenSwarm" -Force -ErrorAction SilentlyContinue
+          if ($code -ne 200) { throw "backend never became healthy" }

From b8122d5649548999811165e8018485ce7d3686ed Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 26 Jul 2026 21:36:48 -0700
Subject: [PATCH 183/248] [eric] build: uv presence check requires a universal
 binary, a thin dev uv no longer kills the dual-arch cut mid-build

---
 scripts/build-app.sh | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/scripts/build-app.sh b/scripts/build-app.sh
index 87f73ce9..2cce1dc5 100755
--- a/scripts/build-app.sh
+++ b/scripts/build-app.sh
@@ -102,6 +102,17 @@ mkdir -p "$UV_BIN_DIR"
 NEED_UV=false
 [[ ! -f "$UV_BIN_DIR/uv"  ]] && NEED_UV=true
 [[ ! -f "$UV_BIN_DIR/uvx" ]] && NEED_UV=true
+# A dev flow can leave a THIN host-arch uv here and the per-arch slice then dies 20 minutes in;
+# present is not enough, it must be universal.
+if ! $NEED_UV && [[ "$(uname)" == "Darwin" ]]; then
+    for B in uv uvx; do
+        ARCHS=$(lipo -archs "$UV_BIN_DIR/$B" 2>/dev/null || echo "")
+        if [[ "$ARCHS" != *arm64* || "$ARCHS" != *x86_64* ]]; then
+            echo "[0] $B is not universal (archs: ${ARCHS:-unreadable}), re-downloading."
+            NEED_UV=true
+        fi
+    done
+fi
 if $NEED_UV; then
     # Pinned uv version. "latest" used to mean a fresh uv could appear in any
     # build with zero warning, breaking reproducibility (pillar 3). Override

From 596a85e87d96ba0eae235e1dd899b9e81e9668d9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 26 Jul 2026 22:48:32 -0700
Subject: [PATCH 184/248] [eric] voice+models: tap must prove itself before
 fallback disarms (packaged deaf-tap bug); opus-5 cc+api, gpt-5.6
 sol/terra/luna api, gemini 3.6-flash + 3.5-flash-lite api

---
 backend/apps/agents/providers/registry.py | 46 +++++++++---
 electron/voiceHotkey.js                   | 87 +++++++++++++++--------
 2 files changed, 96 insertions(+), 37 deletions(-)

diff --git a/backend/apps/agents/providers/registry.py b/backend/apps/agents/providers/registry.py
index a2d0e1ff..15bc9b15 100644
--- a/backend/apps/agents/providers/registry.py
+++ b/backend/apps/agents/providers/registry.py
@@ -36,7 +36,10 @@ NINEROUTER_MODEL_PREFIXES = ("cc/", "cx/", "gc/", "ag/", "gemini/", "openrouter/
 # Entry fields: value, label, context_window, model_id, router_model_id, api, subscription_only, reasoning, route ("cc"|"api"|"openrouter"|None). 9Router prefixes: cc/ Claude sub (dashes), cx/ Codex sub (dots), gc/ Gemini CLI.
 BUILTIN_MODELS: dict[str, list[dict[str, Any]]] = {
     "Anthropic": [
-        # Opus 4.8 (released 2026-05-28): Anthropic's flagship, recommended for the most complex work. Adaptive thinking (not extended), effort param defaults to high. 1M ctx, 128k max output, $5/$25. Verified live on the cc sub route (this app runs on it) and the API.
+        # Opus 5 (added 2026-07-26): drop-in Opus 4.8 successor, same $5/$25, 1M ctx, 128k out. Thinking is ON by default; explicit thinking:disabled is only valid at effort<=high, which is all this app ever sends (run_options_helpers caps at "high"), so the off toggle stays safe.
+        {"value": "opus-5", "label": "Claude Opus 5", "context_window": 1_000_000,
+         "model_id": "claude-opus-5", "router_model_id": "cc/claude-opus-5", "api": "anthropic", "reasoning": True},
+        # Opus 4.8 (released 2026-05-28): previous Opus flagship. Adaptive thinking (not extended), effort param defaults to high. 1M ctx, 128k max output, $5/$25. Verified live on the cc sub route (this app runs on it) and the API.
         {"value": "opus-4-8", "label": "Claude Opus 4.8", "context_window": 1_000_000,
          "model_id": "claude-opus-4-8", "router_model_id": "cc/claude-opus-4-8", "api": "anthropic", "reasoning": True},
         # Opus 4.7: SDK currently strips plaintext thinking deltas (encrypted only) so the live "Thought for Ns" pill loses mid-turn text. Final answer + tokens fine.
@@ -52,6 +55,8 @@ BUILTIN_MODELS: dict[str, list[dict[str, Any]]] = {
         {"value": "haiku", "label": "Claude Haiku 4.5", "context_window": 200_000,
          "model_id": "claude-haiku-4-5", "router_model_id": "cc/claude-haiku-4-5-20251001", "api": "anthropic", "reasoning": True},
         # cc/ pins the user's Claude sub regardless of connection_mode.
+        {"value": "opus-5-cc", "label": "Claude Opus 5", "context_window": 1_000_000,
+         "model_id": "claude-opus-5", "router_model_id": "cc/claude-opus-5", "api": "anthropic", "reasoning": True, "route": "cc"},
         {"value": "opus-4-8-cc", "label": "Claude Opus 4.8", "context_window": 1_000_000,
          "model_id": "claude-opus-4-8", "router_model_id": "cc/claude-opus-4-8", "api": "anthropic", "reasoning": True, "route": "cc"},
         {"value": "opus-4-7-cc", "label": "Claude Opus 4.7", "context_window": 1_000_000,
@@ -70,6 +75,8 @@ BUILTIN_MODELS: dict[str, list[dict[str, Any]]] = {
          "model_id": "claude-fable-5", "router_model_id": "cc/claude-fable-5", "api": "anthropic", "reasoning": True, "route": "cc"},
         {"value": "fable-5-api", "label": "Claude Fable 5 (API key)", "context_window": 1_000_000,
          "model_id": "claude-fable-5", "router_model_id": "claude-fable-5", "api": "anthropic", "reasoning": True, "route": "api"},
+        {"value": "opus-5-api", "label": "Claude Opus 5 (API key)", "context_window": 1_000_000,
+         "model_id": "claude-opus-5", "router_model_id": "claude-opus-5", "api": "anthropic", "reasoning": True, "route": "api"},
         {"value": "opus-4-8-api", "label": "Claude Opus 4.8 (API key)", "context_window": 1_000_000,
          "model_id": "claude-opus-4-8", "router_model_id": "claude-opus-4-8", "api": "anthropic", "reasoning": True, "route": "api"},
         {"value": "opus-4-7-api", "label": "Claude Opus 4.7 (API key)", "context_window": 1_000_000,
@@ -93,13 +100,22 @@ BUILTIN_MODELS: dict[str, list[dict[str, Any]]] = {
          "context_window": 400_000, "router_model_id": "cx/gpt-5.4-mini",
          "api": "codex", "subscription_only": True, "reasoning": True},
         # gpt-5.3-codex (+ high/xhigh) removed: superseded by GPT-5.5 as OpenAI's recommended Codex model, and high/xhigh were never separate models (just reasoning-effort variants), so they were redundant clutter. API-key entries: route through 9Router's `cp-openai` provider-node (registered by sync_openai_api_key) so 9Router's translator dispatches to our local openai-passthrough proxy. The passthrough renames `max_tokens` → `max_completion_tokens` before forwarding to api.openai.com, fixing OpenAI's GPT-5 family 400. The bare router_model_id (e.g. "gpt-5.5") still appears in the request body; only the routing prefix changes.
-        # GPT-5.6 (Sol / Terra / Luna, 2026-07) is HELD, not offered: it is Responses-API-only
-        # (api model ids gpt-5.6-sol [alias gpt-5.6], gpt-5.6-terra, gpt-5.6-luna; per-1M in/out
-        # $5/$30, $2.50/$15, $1/$6). Our lane goes user -> 9Router 0.3.60 -> cp-openai passthrough,
-        # and 0.3.60 only speaks /chat/completions, so a gpt-5.6 request hits the wrong endpoint and
-        # OpenAI rejects it (plus it is a trusted-partner limited preview, so most keys 404 anyway).
-        # No working lane = not offered (same rule as gpt-5.5's cx entry). Enable all three tiers
-        # once 9Router can translate to /v1/responses AND the model is generally available.
+        # GPT-5.6 (Sol / Terra / Luna) hit GA 2026-07-09 on ChatGPT, Codex, AND /chat/completions,
+        # so the old Responses-only HOLD is lifted for the API-key lane: the ids ride the proven
+        # cp-openai passthrough, whose scrubs prefix-match "gpt-5" (max_tokens rename, sampling strip,
+        # and the reasoning_effort-with-tools drop that 5.6 still requires on /chat/completions).
+        # 1M+ ctx, 128k out; $5/$30 Sol, $2.50/$15 Terra, $1/$6 Luna per 1M. The cx SUBSCRIPTION
+        # entries stay pulled: 0.3.60's cx registry predates 5.6 (same 404 class as gpt-5.5's pulled
+        # cx row); restore them with the 9router bump.
+        {"value": "gpt-5.6-api", "label": "GPT-5.6 Sol (API key)",
+         "context_window": 1_000_000, "router_model_id": "cp-openai/gpt-5.6-sol", "model_id": "gpt-5.6-sol",
+         "api": "openai", "reasoning": True, "route": "api"},
+        {"value": "gpt-5.6-terra-api", "label": "GPT-5.6 Terra (API key)",
+         "context_window": 1_000_000, "router_model_id": "cp-openai/gpt-5.6-terra", "model_id": "gpt-5.6-terra",
+         "api": "openai", "reasoning": True, "route": "api"},
+        {"value": "gpt-5.6-luna-api", "label": "GPT-5.6 Luna (API key)",
+         "context_window": 1_000_000, "router_model_id": "cp-openai/gpt-5.6-luna", "model_id": "gpt-5.6-luna",
+         "api": "openai", "reasoning": True, "route": "api"},
         {"value": "gpt-5.5-api", "label": "GPT-5.5 (API key)",
          "context_window": 1_000_000, "router_model_id": "cp-openai/gpt-5.5", "model_id": "gpt-5.5",
          "api": "openai", "reasoning": True, "route": "api"},
@@ -118,6 +134,15 @@ BUILTIN_MODELS: dict[str, list[dict[str, Any]]] = {
          "api": "gemini-cli", "subscription_only": True, "reasoning": True},
         # gemini-3-pro removed 2026-03-09 and gemini-3-flash removed 2026-07-03: gemini-3-flash-preview aged out upstream (API-key route hangs with no fail-fast; only an Antigravity sub still masked it). 3.5-flash / 3.1-flash-lite cover the slots.
         # API-key entries: bypass 9Router, call generativelanguage.googleapis.com.
+        # Gemini 3.6 Flash + 3.5 Flash-Lite (both GA 2026-07-21, changelog-verified ids) are API-key
+        # only for the same reason as 3.5 Flash: the pinned 0.3.60 gc/ registry predates them. No 3.5
+        # Pro exists yet (delayed upstream), don't invent a row for it.
+        {"value": "gemini-3.6-flash-api", "label": "Gemini 3.6 Flash (API key)",
+         "context_window": 1_000_000, "router_model_id": "gemini-3.6-flash", "model_id": "gemini-3.6-flash",
+         "api": "gemini", "reasoning": True, "route": "api"},
+        {"value": "gemini-3.5-flash-lite-api", "label": "Gemini 3.5 Flash Lite (API key)",
+         "context_window": 1_000_000, "router_model_id": "gemini-3.5-flash-lite", "model_id": "gemini-3.5-flash-lite",
+         "api": "gemini", "reasoning": True, "route": "api"},
         {"value": "gemini-3.5-flash-api", "label": "Gemini 3.5 Flash (API key)",
          "context_window": 1_000_000, "router_model_id": "gemini-3.5-flash", "model_id": "gemini-3.5-flash",
          "api": "gemini", "reasoning": True, "route": "api"},
@@ -372,8 +397,13 @@ COST_PER_1M_TOKENS: dict[tuple[str, str], tuple[float, float]] = {
     ("Anthropic", "opus"): (5.0, 25.0),
     ("Anthropic", "opus-4-7"): (5.0, 25.0),
     ("Anthropic", "opus-4-8"): (5.0, 25.0),
+    ("Anthropic", "opus-5"): (5.0, 25.0),
     ("Anthropic", "fable-5-api"): (10.0, 50.0),
     ("Anthropic", "haiku"): (1.0, 5.0),
+    # OpenAI API-key rates (GPT-5.6 tiers, GA 2026-07-09)
+    ("OpenAI", "gpt-5.6-api"): (5.0, 30.0),
+    ("OpenAI", "gpt-5.6-terra-api"): (2.5, 15.0),
+    ("OpenAI", "gpt-5.6-luna-api"): (1.0, 6.0),
     # OpenAI; Codex subscription path, user pays nothing per token
     ("OpenAI", "gpt-5.5"): (0.0, 0.0),
     ("OpenAI", "gpt-5.4"): (0.0, 0.0),
diff --git a/electron/voiceHotkey.js b/electron/voiceHotkey.js
index 6d2542b4..5b9d77a2 100644
--- a/electron/voiceHotkey.js
+++ b/electron/voiceHotkey.js
@@ -4,17 +4,21 @@ const { app, globalShortcut, ipcMain, systemPreferences } = require('electron');
 //
 //   NATIVE (uiohook-napi event tap): sees real key-down AND key-up globally, in or out of focus,
 //   immune to macOS's letter-keyup-under-Cmd suppression, so the keyboard gets TRUE hold-to-talk
-//   exactly like the mic buttons. Listen-only (never swallows keys from other apps). macOS needs
-//   the Accessibility grant; Windows needs nothing.
+//   exactly like the mic buttons. Listen-only (never swallows keys from other apps).
 //
-//   FALLBACK (no native tap: module missing, load failure, or no macOS permission): the pre-tap
-//   behavior verbatim. globalShortcut toggles while our window is unfocused; a before-input relay
-//   toggles while focused (key-ups are undetectable there, proven empirically, so press-to-toggle).
+//   FALLBACK (globalShortcut while unfocused + before-input relay while focused): press-to-toggle,
+//   key-ups undetectable there.
 //
-// The before-input relay installs in BOTH tiers: with the tap active it only swallows the combo so
-// pages/webviews never see F5 or the 'd', with the tap inactive it also sends the toggle.
+// THE TRAP THIS FILE IS SHAPED AROUND: on macOS a listen-only keyboard tap needs the Input
+// Monitoring grant, which is SEPARATE from Accessibility, and a tap without it starts cleanly and
+// then delivers nothing (caught live on the packaged build). So "tap started" proves nothing; the
+// fallback stays armed until the tap delivers its first real key event. To keep the two paths from
+// double-firing on one press, fallback sends are deferred 90ms and skipped when the tap just
+// handled a key; a deaf tap never updates that timestamp, so the fallback always fires.
 
 const VOICE_COMBOS = ['F5', 'CommandOrControl+Shift+D'];
+const TAP_FRESH_MS = 200;
+const FALLBACK_DEFER_MS = 90;
 
 function installVoiceHotkey(getMainWindow) {
   const send = (channel) => {
@@ -22,7 +26,20 @@ function installVoiceHotkey(getMainWindow) {
     if (win && !win.isDestroyed()) win.webContents.send(channel);
   };
 
-  let nativeTapActive = false;
+  let tapProven = false;
+  let lastTapKeyMs = 0;
+
+  const unregisterFallbackShortcuts = () => {
+    for (const combo of VOICE_COMBOS) { try { globalShortcut.unregister(combo); } catch (_) {} }
+  };
+
+  // Fallback toggle, deferred so a live tap's hold-down wins the same press.
+  const sendFallbackToggle = () => {
+    setTimeout(() => {
+      if (Date.now() - lastTapKeyMs < TAP_FRESH_MS) return;
+      send('voice:toggle');
+    }, FALLBACK_DEFER_MS);
+  };
 
   const tryStartNativeTap = () => {
     try {
@@ -38,7 +55,17 @@ function installVoiceHotkey(getMainWindow) {
       // 'f5' | 'combo' | null; one hold at a time, repeats and the other combo ignored while held.
       let heldBy = null;
 
+      const markAlive = () => {
+        lastTapKeyMs = Date.now();
+        if (!tapProven) {
+          tapProven = true;
+          unregisterFallbackShortcuts();
+          console.log('[voice] native key tap PROVEN (events flowing), hold-to-talk enabled');
+        }
+      };
+
       uIOhook.on('keydown', (e) => {
+        markAlive();
         if (heldBy) return;
         if (e.keycode === UiohookKey.F5) {
           heldBy = 'f5';
@@ -49,6 +76,7 @@ function installVoiceHotkey(getMainWindow) {
         }
       });
       uIOhook.on('keyup', (e) => {
+        markAlive();
         if (!heldBy) return;
         const releases =
           (heldBy === 'f5' && e.keycode === UiohookKey.F5) ||
@@ -61,29 +89,29 @@ function installVoiceHotkey(getMainWindow) {
 
       uIOhook.start();
       app.on('will-quit', () => { try { uIOhook.stop(); } catch (_) {} });
-      console.log('[voice] native key tap active, keyboard hold-to-talk enabled');
+      console.log('[voice] native key tap armed (awaiting first event to prove Input Monitoring)');
       return true;
     } catch (e) {
       console.log('[voice] native key tap unavailable (continuing with toggle):', e && e.message);
       return false;
     }
   };
-  nativeTapActive = tryStartNativeTap();
+  tryStartNativeTap();
 
-  if (!nativeTapActive) {
-    const registerVoiceShortcut = () => {
-      for (const combo of VOICE_COMBOS) {
-        try {
-          if (!globalShortcut.isRegistered(combo)) {
-            globalShortcut.register(combo, () => send('voice:toggle'));
-          }
-        } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
-      }
-    };
-    registerVoiceShortcut();
-    app.on('browser-window-focus', () => { for (const combo of VOICE_COMBOS) { try { globalShortcut.unregister(combo); } catch (_) {} } });
-    app.on('browser-window-blur', registerVoiceShortcut);
-  }
+  // Fallback shortcuts stay registered while unfocused until the tap proves alive.
+  const registerVoiceShortcut = () => {
+    if (tapProven) return;
+    for (const combo of VOICE_COMBOS) {
+      try {
+        if (!globalShortcut.isRegistered(combo)) {
+          globalShortcut.register(combo, sendFallbackToggle);
+        }
+      } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+    }
+  };
+  registerVoiceShortcut();
+  app.on('browser-window-focus', unregisterFallbackShortcuts);
+  app.on('browser-window-blur', registerVoiceShortcut);
 
   const installVoiceHoldRelay = (contents) => {
     contents.on('before-input-event', (event, input) => {
@@ -91,7 +119,7 @@ function installVoiceHotkey(getMainWindow) {
       const isD = (input.code === 'KeyD' || (input.key || '').toLowerCase() === 'd');
       const combo = (isD && (input.meta || input.control) && input.shift) || input.code === 'F5';
       if (combo) {
-        if (!nativeTapActive) send('voice:toggle');
+        if (!tapProven) sendFallbackToggle();
         event.preventDefault();
       }
     });
@@ -103,13 +131,14 @@ function installVoiceHotkey(getMainWindow) {
     if (t === 'window' || t === 'webview') installVoiceHoldRelay(contents);
   });
 
-  ipcMain.handle('voice:hold-capable', () => nativeTapActive);
-  // Settings' "Hold to talk" can trigger the real macOS Accessibility prompt; a restart picks it up.
+  ipcMain.handle('voice:hold-capable', () => tapProven);
+  // Settings' "Hold to talk" fires the Accessibility prompt; Input Monitoring has no Electron API,
+  // but a running tap makes macOS list the app in that pane for the user to flip.
   ipcMain.handle('voice:request-hold-permission', () => {
-    if (process.platform === 'darwin' && !nativeTapActive) {
+    if (process.platform === 'darwin' && !tapProven) {
       try { systemPreferences.isTrustedAccessibilityClient(true); } catch (_) {}
     }
-    return nativeTapActive;
+    return tapProven;
   });
 }
 

From 67997653eb7c3c31bc63b64ada3d5ac115000183 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Sun, 26 Jul 2026 22:59:44 -0700
Subject: [PATCH 185/248] [eric] models: gpt-5.6 sol/terra/luna + restored
 gpt-5.5 codex sub lanes, all live-probed on the 0.3.60 pin

---
 backend/apps/agents/providers/registry.py | 23 +++++++++++++++++++----
 backend/tests/test_v2_invariants.py       | 16 +++++++---------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/backend/apps/agents/providers/registry.py b/backend/apps/agents/providers/registry.py
index 15bc9b15..6c8881be 100644
--- a/backend/apps/agents/providers/registry.py
+++ b/backend/apps/agents/providers/registry.py
@@ -92,7 +92,21 @@ BUILTIN_MODELS: dict[str, list[dict[str, Any]]] = {
     ],
 
     "OpenAI": [
-        # GPT-5.5 subscription entry PULLED: cx/gpt-5.5 404s on 9Router 0.3.60 (our pin), so a Codex user who picked it (the newest, top OpenAI option) 404'd every turn = "codex is broken". Same treatment as gemini-3.1-pro (no working lane = not offered). The API-key route (gpt-5.5-api below) works; restore a cx entry only after the pin moves and cx/gpt-5.5 resolves.
+        # Codex sub lanes re-probed 2026-07-26: cx/gpt-5.6-{sol,terra,luna} AND the previously pulled
+        # cx/gpt-5.5 all return real completions on the pinned 0.3.60 (the old 404 healed upstream;
+        # the cx translator forwards to the ChatGPT Responses backend, which now serves them).
+        {"value": "gpt-5.6", "label": "GPT-5.6 Sol",
+         "context_window": 1_000_000, "router_model_id": "cx/gpt-5.6-sol",
+         "api": "codex", "subscription_only": True, "reasoning": True},
+        {"value": "gpt-5.6-terra", "label": "GPT-5.6 Terra",
+         "context_window": 1_000_000, "router_model_id": "cx/gpt-5.6-terra",
+         "api": "codex", "subscription_only": True, "reasoning": True},
+        {"value": "gpt-5.6-luna", "label": "GPT-5.6 Luna",
+         "context_window": 1_000_000, "router_model_id": "cx/gpt-5.6-luna",
+         "api": "codex", "subscription_only": True, "reasoning": True},
+        {"value": "gpt-5.5", "label": "GPT-5.5",
+         "context_window": 1_000_000, "router_model_id": "cx/gpt-5.5",
+         "api": "codex", "subscription_only": True, "reasoning": True},
         {"value": "gpt-5.4", "label": "GPT-5.4",
          "context_window": 1_000_000, "router_model_id": "cx/gpt-5.4",
          "api": "codex", "subscription_only": True, "reasoning": True},
@@ -104,9 +118,7 @@ BUILTIN_MODELS: dict[str, list[dict[str, Any]]] = {
         # so the old Responses-only HOLD is lifted for the API-key lane: the ids ride the proven
         # cp-openai passthrough, whose scrubs prefix-match "gpt-5" (max_tokens rename, sampling strip,
         # and the reasoning_effort-with-tools drop that 5.6 still requires on /chat/completions).
-        # 1M+ ctx, 128k out; $5/$30 Sol, $2.50/$15 Terra, $1/$6 Luna per 1M. The cx SUBSCRIPTION
-        # entries stay pulled: 0.3.60's cx registry predates 5.6 (same 404 class as gpt-5.5's pulled
-        # cx row); restore them with the 9router bump.
+        # 1M+ ctx, 128k out; $5/$30 Sol, $2.50/$15 Terra, $1/$6 Luna per 1M.
         {"value": "gpt-5.6-api", "label": "GPT-5.6 Sol (API key)",
          "context_window": 1_000_000, "router_model_id": "cp-openai/gpt-5.6-sol", "model_id": "gpt-5.6-sol",
          "api": "openai", "reasoning": True, "route": "api"},
@@ -405,6 +417,9 @@ COST_PER_1M_TOKENS: dict[tuple[str, str], tuple[float, float]] = {
     ("OpenAI", "gpt-5.6-terra-api"): (2.5, 15.0),
     ("OpenAI", "gpt-5.6-luna-api"): (1.0, 6.0),
     # OpenAI; Codex subscription path, user pays nothing per token
+    ("OpenAI", "gpt-5.6"): (0.0, 0.0),
+    ("OpenAI", "gpt-5.6-terra"): (0.0, 0.0),
+    ("OpenAI", "gpt-5.6-luna"): (0.0, 0.0),
     ("OpenAI", "gpt-5.5"): (0.0, 0.0),
     ("OpenAI", "gpt-5.4"): (0.0, 0.0),
     ("OpenAI", "gpt-5.4-mini"): (0.0, 0.0),
diff --git a/backend/tests/test_v2_invariants.py b/backend/tests/test_v2_invariants.py
index f1292386..065f07e3 100644
--- a/backend/tests/test_v2_invariants.py
+++ b/backend/tests/test_v2_invariants.py
@@ -665,18 +665,16 @@ def test_dashboard_get_strips_only_orphan_session_cards():
 def test_banned_models_not_offered():
     """Models with no working lane stay pulled from the picker. Guard so a
     refactor can't silently re-list a model that can't run. Gemini 3.1 Pro: AG
-    can't serve it, AI Studio key 429s pro-preview. gpt-5.5 (subscription):
-    cx/gpt-5.5 404s on the pinned 9Router 0.3.60, so picking it broke codex
-    entirely; gpt-5.5-api stays (that lane works). (Fable 5 was re-listed
-    2026-07-02 after its ban lifted, so it left this list.)"""
+    can't serve it, AI Studio key 429s pro-preview. (gpt-5.5's cx entry left
+    this list 2026-07-26: the pinned 0.3.60's old 404 healed upstream and a
+    live probe returned a real completion, so both its lanes work. Fable 5
+    left 2026-07-02 after its ban lifted.)"""
     from backend.apps.agents.providers.registry import BUILTIN_MODELS
     all_values = {m["value"] for models in BUILTIN_MODELS.values() for m in models}
-    for dead in ("gemini-3.1-pro", "gemini-3.1-pro-api", "gpt-5.5"):
+    for dead in ("gemini-3.1-pro", "gemini-3.1-pro-api"):
         assert dead not in all_values, f"{dead} is back in the picker"
-    assert "gpt-5.5-api" in all_values  # the working API-key lane must survive the pull
-    # No dead cx/gpt-5.5 router id survives either (a renamed entry would dodge the value check).
-    all_router_ids = {m.get("router_model_id") for models in BUILTIN_MODELS.values() for m in models}
-    assert "cx/gpt-5.5" not in all_router_ids
+    assert "gpt-5.5-api" in all_values
+    assert "gpt-5.5" in all_values  # cx lane restored 2026-07-26 (live-probed)
     # No '3.1 pro' label survives in any provider group either.
     all_labels = " | ".join(m["label"].lower() for models in BUILTIN_MODELS.values() for m in models)
     assert "3.1 pro" not in all_labels

From ea63a7a38813af3abfbeabdd18672d338b018088 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 12:08:30 -0700
Subject: [PATCH 186/248] [eric] cards: traffic-light chrome inert until card
 hover + tile menu lazy-mounts

---
 .../pages/Dashboard/cards/WindowControls.tsx  | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 634e381e..515b4d1b 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -59,8 +59,15 @@ export const ARC_CHIP_SX: Record<string, unknown> = {
 
 function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTileMenu }: WindowControlsProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
+  // Menu DOM (12 tiles + labels, ~30 nodes) mounts on first green-dot hover, not per card at boot.
+  const [menuHot, setMenuHot] = useState(false);
   const closeTimer = useRef<number | null>(null);
-  const openMenu = (): void => { if (noTileMenu) return; if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
+  const openMenu = (): void => {
+    if (noTileMenu) return;
+    if (closeTimer.current) window.clearTimeout(closeTimer.current);
+    if (!menuHot) { setMenuHot(true); requestAnimationFrame(() => setMenuOpen(true)); return; }
+    setMenuOpen(true);
+  };
   const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
   const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
 
@@ -99,7 +106,12 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
 
   return (
     <Box className="osw-window-lights" onPointerDown={stop}
-      sx={{ display: 'flex', gap: '8px', alignItems: 'center', flex: 'none', '&:hover span': { opacity: 1 } }}>
+      sx={{
+        display: 'flex', gap: '8px', alignItems: 'center', flex: 'none', '&:hover span': { opacity: 1 },
+        // Inert until the card is hovered: crossing a card can't hit-test or fire React enter/leave
+        // through the dots, and you can't aim at a dot without hovering its card first anyway.
+        pointerEvents: 'none', '.osw-card:hover &': { pointerEvents: 'auto' },
+      }}>
       {btn(RED, '×', onClose, 'Close')}
       {btn(YELLOW, '–', onMinimize, 'Minimize')}
       <Box sx={{ position: 'relative', display: 'flex', alignItems: 'center' }}
@@ -109,7 +121,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
           onPointerDown={stop} sx={dotSx(GREEN)}>
           <span>{tiled ? '–' : '+'}</span>
         </Box>
-        <Box className="osw-tilemenu" onPointerDown={stop} onClick={stop}
+        {menuHot && <Box className="osw-tilemenu" onPointerDown={stop} onClick={stop}
           onMouseEnter={openMenu} onMouseLeave={scheduleClose}
           sx={{
             position: 'absolute', top: 19, left: -8, width: 216, background: '#FFFFFF',
@@ -135,7 +147,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
               </Box>
             </Box>
           ))}
-        </Box>
+        </Box>}
       </Box>
     </Box>
   );

From 56ec809ca51214275046ddf91023fe9e359c951c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 12:08:30 -0700
Subject: [PATCH 187/248] [eric] onboarding: Get started shows busy state +
 finish double-fire guard

---
 .../src/app/components/OnboardingV3/beats/BeatCard.tsx     | 7 +++++--
 .../app/components/OnboardingV3/useOnboardingV3Pipeline.ts | 4 ++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index 9e33a00d..efe80ff9 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -52,6 +52,8 @@ const BeatCard: React.FC<{
 }> = ({ c, identity, onFinish, onBack }) => {
   const { accent, gradient } = useThemeAccent();
   const [name, setName] = useState(() => nameFromIdentity(identity));
+  // finish() can legitimately wait up to PREP_WAIT_CAP_MS on prep; the button must say so, once.
+  const [submitting, setSubmitting] = useState(false);
   const seed = useMemo(() => Math.floor(Math.random() * EPITHETS.length), []);
   const [roll, setRoll] = useState(0);
   const epithet = EPITHETS[(seed + roll) % EPITHETS.length];
@@ -184,8 +186,9 @@ const BeatCard: React.FC<{
       c={c}
       title={name ? `Welcome to OpenSwarm, ${name}` : 'Welcome to OpenSwarm'}
       body={"Here's your Swarm Card. Show it off to the world or keep it to yourself.\n\nAnd with that, you're ready to run your new OS."}
-      nextLabel="Get started"
-      onNext={() => onFinish(name.trim() || null)}
+      nextLabel={submitting ? 'Setting up...' : 'Get started'}
+      nextDisabled={submitting}
+      onNext={() => { if (submitting) return; setSubmitting(true); onFinish(name.trim() || null); }}
       onBack={onBack}
       stageDark
     >
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index bfdea934..0536ccc4 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -29,6 +29,7 @@ export function useOnboardingV3Pipeline() {
   // greeting/starters the instant they're ready (the common case, prep finishes during the beats) without
   // awaiting, so the curtain never blocks behind a spinner.
   const prepReadyRef = useRef<PrepResponse | null>(null);
+  const finishingRef = useRef(false);
   const scanResultRef = useRef<ScanResult | null>(null);
   const usageSummaryRef = useRef<string>('');
   const usageReadRef = useRef<Promise<void> | null>(null);
@@ -72,6 +73,9 @@ export function useOnboardingV3Pipeline() {
   }, []);
 
   const finish = useCallback(async (outcome: 'done' | 'skipped') => {
+    // Double-fire guard: repeated Get-started clicks during the prep wait must not stage twice.
+    if (finishingRef.current) return;
+    finishingRef.current = true;
     if (outcome === 'skipped') {
       dispatch(setFlowActive(false));
       dispatch(updateSettingsPatch({ onboarding_v3: 'skipped', accent_color: accent, accent_gradient: gradient, theme: mode }));

From 4f1e895a2e11f4c44a5e19366d8a41337c6dc737 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 12:08:30 -0700
Subject: [PATCH 188/248] [eric] chat: closeSession skips the server call for
 client-only draft sessions

---
 frontend/src/shared/state/agentsSlice.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/shared/state/agentsSlice.ts b/frontend/src/shared/state/agentsSlice.ts
index 3c5da6cd..59b4dab6 100644
--- a/frontend/src/shared/state/agentsSlice.ts
+++ b/frontend/src/shared/state/agentsSlice.ts
@@ -504,7 +504,10 @@ export const handleApproval = createAsyncThunk(
 export const closeSession = createAsyncThunk(
   'agents/closeSession',
   async ({ sessionId }: { sessionId: string }) => {
-    await fetch(`${AGENTS_API}/sessions/${sessionId}/close`, { method: 'POST' });
+    // Drafts are client-only; the server has no such session and would 404.
+    if (!sessionId.startsWith('draft-')) {
+      await fetch(`${AGENTS_API}/sessions/${sessionId}/close`, { method: 'POST' });
+    }
     return sessionId;
   }
 );

From b21aec25f3ab46f6e9c3e0b97c0f93d26922437c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 12:08:30 -0700
Subject: [PATCH 189/248] [eric] chat: memoize personalized-starters selector
 in WelcomeQuickReplies

---
 frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
index ce01992f..a3f9cd3a 100644
--- a/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+++ b/frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
@@ -39,7 +39,8 @@ const WelcomeQuickReplies: React.FC<{
 }> = ({ c, onPick, onPickBuilder }) => {
   const [expanded, setExpanded] = React.useState<string | null>(null);
   // Onboarding v3's prep wrote starters about THIS user's machine and apps; they lead, generic categories demote to "More ideas". Show the top 3 tailored + the always-present anchor = 4 options (prep returns 4, so we keep the strongest three and let the anchor be the fourth).
-  const personalized = useAppSelector((s) => (s.settings.data.personalized_starters ?? []).slice(0, 3));
+  const starters = useAppSelector((s) => s.settings.data.personalized_starters);
+  const personalized = React.useMemo(() => (starters ?? []).slice(0, 3), [starters]);
   const [showCategories, setShowCategories] = React.useState(personalized.length === 0);
   const currentCategory = STARTER_CATEGORIES.find((cat) => cat.id === expanded);
   const isAppBuilder = currentCategory?.target === 'app-builder';

From ba25d4048d1a82da3aba268712bcc7496c672b61 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 12:08:30 -0700
Subject: [PATCH 190/248] [eric] electron: drop preload UA diag log

---
 electron/preload.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/electron/preload.js b/electron/preload.js
index 2ed05e8e..3613fadb 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -1,7 +1,5 @@
 const { contextBridge, ipcRenderer } = require('electron');
 
-// eslint-disable-next-line no-console
-console.log('[diag][preload] start, ua=', navigator.userAgent);
 
 // E2E gate: set the renderer flag BEFORE any page script parses so the
 // production-build store-on-window expose fires deterministically when

From cb0388bc05b6daed0d2ab3abbefefa4b129e3668 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 17:55:44 -0700
Subject: [PATCH 191/248] [eric] onboarding: free trial no longer deadlocks
 Connect beat provider rows (gate per-row)

---
 .../src/app/components/OnboardingV3/beats/BeatConnect.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
index edac464a..c6d11a16 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
@@ -90,14 +90,14 @@ const BeatConnect: React.FC<{
           return (
             <motion.button
               key={p.id}
-              onClick={() => !connected && handleConnect(p.id)}
+              onClick={() => !isConnected && handleConnect(p.id)}
               initial={{ opacity: 0, y: 14 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ type: 'spring', stiffness: 320, damping: 26, delay: 0.1 + i * 0.08 }}
               style={{
                 display: 'flex', alignItems: 'center', gap: 14, padding: '0 0 0 18px', textAlign: 'left', overflow: 'hidden',
                 borderRadius: 14, border: 'none', boxShadow: isConnected ? '0 0 0 2px #1a9e6a, 0 10px 26px rgba(20,16,80,0.22)' : '0 10px 26px rgba(20,16,80,0.22)',
-                background: '#ffffff', cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit', minHeight: 64,
+                background: '#ffffff', cursor: isConnected ? 'default' : 'pointer', fontFamily: 'inherit', minHeight: 64,
               }}
             >
               <span style={{
@@ -109,7 +109,7 @@ const BeatConnect: React.FC<{
               <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
                 <span style={{ fontSize: '1rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
                 {/* The green ring + filled radio already signal connected, so no redundant "Connected" text. */}
-                {!isConnected && isThis && !connected
+                {!isConnected && isThis
                   ? <span style={{ fontSize: '0.75rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
                   : null}
               </span>
@@ -123,7 +123,7 @@ const BeatConnect: React.FC<{
             </motion.button>
           );
         })}
-        {userCode && !connected && (
+        {userCode && (
           <div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.875rem', color: 'rgba(255,255,255,0.92)' }}>
             Your code: <strong style={{ fontFamily: c.font.mono, letterSpacing: '0.08em' }}>{userCode}</strong>
           </div>

From 06efea1bb3e0281b1fee50e9246efd475d9a6a27 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 18:21:55 -0700
Subject: [PATCH 192/248] [eric] theme: single-color wash paints the canvas +
 ui_font_scale applies live

---
 .../src/app/pages/Dashboard/canvas/DashboardCanvas.tsx   | 8 +++++---
 frontend/src/app/pages/Settings/Settings.tsx             | 9 +++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index db1feba6..e6765ad8 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -164,8 +164,10 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   onTidy,
   onSearchPaletteClose,
 }) => {
-  const { gradient } = useThemeAccent();
+  const { accent, gradient } = useThemeAccent();
   const { washOpacity, grain } = useThemeWash();
+  // A single picked color stores gradient=null, so fall back to the accent (mirrors BeatShell).
+  const washStops = gradient ?? (accent ? [accent] : null);
   const dotSize = Math.max(1, 1.5 * canvas.zoom);
   const dotSpacing = 24 * canvas.zoom;
 
@@ -333,13 +335,13 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         }}
       >
         {/* Gradient wash: the user's theme-pad stops tint the canvas, Arc-window style; intensity + grain come from the theme device; sits under the dot grid. */}
-        {gradient && gradient.length > 1 && (
+        {washStops && washStops.length > 0 && (
           <Box
             sx={{
               position: 'absolute',
               inset: 0,
               pointerEvents: 'none',
-              background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}${Math.round(washOpacity * 255).toString(16).padStart(2, '0')} ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`,
+              background: `linear-gradient(115deg, ${washStops.map((hex, i) => `${hex}${Math.round(washOpacity * 255).toString(16).padStart(2, '0')} ${washStops.length > 1 ? (i / (washStops.length - 1)) * 100 : 100}%`).join(', ')})`,
             }}
           />
         )}
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index 1516fe7e..36ac5827 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -178,6 +178,15 @@ const Settings: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form.accent_color, form.accent_gradient]);
 
+  // Text size applies live too; AppShell re-applies the persisted value on every boot.
+  useEffect(() => {
+    if (open && loaded) {
+      const scale = Math.min(1.4, Math.max(0.8, form.ui_font_scale ?? 1));
+      document.documentElement.style.fontSize = `${scale * 100}%`;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form.ui_font_scale]);
+
   useEffect(() => {
     if (!open || !loaded) return;
     if (!buildSubmit()) return;

From 10a36dc90c2117a457fd41f17adc651760a57cdf Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 18:22:03 -0700
Subject: [PATCH 193/248] [eric] hero: two-level menu, 4 general categories
 drilling into 4 personalized starters each

---
 backend/apps/onboarding/menu.py               | 153 ++++++++++++++++++
 backend/apps/onboarding/models.py             |   4 +-
 backend/apps/onboarding/parse_helpers.py      |  75 +++++++++
 backend/apps/onboarding/prep.py               | 115 ++++---------
 backend/apps/settings/models.py               |  11 ++
 backend/tests/test_onboarding.py              |  57 +++++++
 .../OnboardingV3/onboardingV3Api.ts           |   3 +-
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |   1 +
 .../Dashboard/canvas/DashboardEmptyState.tsx  | 128 ++++++++++-----
 .../app/pages/Dashboard/canvas/heroMenu.ts    |  80 +++++++++
 frontend/src/shared/state/settingsSlice.ts    |   9 ++
 11 files changed, 510 insertions(+), 126 deletions(-)
 create mode 100644 backend/apps/onboarding/menu.py
 create mode 100644 backend/apps/onboarding/parse_helpers.py
 create mode 100644 frontend/src/app/pages/Dashboard/canvas/heroMenu.ts

diff --git a/backend/apps/onboarding/menu.py b/backend/apps/onboarding/menu.py
new file mode 100644
index 00000000..7892c70f
--- /dev/null
+++ b/backend/apps/onboarding/menu.py
@@ -0,0 +1,153 @@
+"""Build the hero's two-level menu: 4 general categories x 4 starters tailored to this user.
+
+Runs as its own cheap aux call BESIDE the main prep call, so a failure here can never cost
+the reveal, and every failure path fills from scan-grounded + static rows, so the menu the
+dashboard hero drills into is always complete.
+"""
+
+import json
+from typing import List, Optional
+
+from typeguard import typechecked
+
+from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
+from backend.apps.onboarding.models import ScanResult
+from backend.apps.onboarding.parse_helpers import build_starters, load_json_object, normalize_json_text
+from backend.apps.settings.models import AppSettings, PersonalizedMenu, PersonalizedStarter
+
+MENU_CATEGORIES = ("computer", "research", "web", "build")
+MENU_SIZE = 4
+
+P_MENU_SYSTEM = (
+    "You write starter tasks for OpenSwarm, a desktop AI agent platform that can organize local files, "
+    "browse the web in a real browser, build small apps, and run agents in parallel. Given facts about the "
+    "user (their machine scan, picked apps, and usage_summary, a profile distilled from their real AI "
+    "conversations, the STRONGEST signal), respond with STRICT JSON only: "
+    '{"computer": [{"title": string, "prompt": string}], "research": [{"title": string, "prompt": string}], '
+    '"web": [{"title": string, "prompt": string}], "build": [{"title": string, "prompt": string}]}. '
+    "EXACTLY 4 items per category, 16 total, every one tailored to THIS person. "
+    "computer: tasks on THIS machine's real files and folders (use their actual folder names and file kinds "
+    "from the scan); each READS real files and writes ONE new artifact, and must NEVER modify or delete an "
+    "existing file. "
+    "research: live web research on topics THIS user actually cares about (from usage_summary); each demands "
+    "current information with dated sources and produces an actual answer or comparison, never a plan. "
+    "web: the agent OPENS a named real public website and does a genuinely multi-step task there (navigate, "
+    "search, click through, compare, report); read-only public browsing, never log in, buy, post, or act on "
+    "the user's behalf. "
+    "build: small working tools for this person's real needs; each prompt starts with 'Build me', is fully "
+    "client-side and self-contained with deterministic logic only (math, parsing, formatting, charts), and "
+    "must NEVER call an AI model or any network API. "
+    "Span the person's DISTINCT life threads: within each category at most ONE item may touch their work or "
+    "company; the rest come from their other real threads (sport, food, hobbies, curiosities, practical "
+    "needs) actually present in the input. "
+    "Titles are 2-5 plain words saying what the task does, never clever or punny. Prompts are concrete, "
+    "immediately runnable instructions; never invent facts not in the input. "
+    "Never use em-dashes or en-dashes. No markdown, no commentary, JSON only."
+)
+
+P_STATIC_MENU: dict[str, List[PersonalizedStarter]] = {
+    "computer": [
+        PersonalizedStarter(title="Clean up Downloads", prompt="Sort my Downloads folder into tidy subfolders. Show me the plan before moving anything."),
+        PersonalizedStarter(title="Find my biggest files", prompt="Scan my home folder for the largest files and folders and write me a reviewable page listing them with sizes. Do not delete anything."),
+        PersonalizedStarter(title="Index my documents", prompt="Look through my Documents folder and build one searchable index page listing files by name and date so I can find things fast. Write only the new page."),
+        PersonalizedStarter(title="Find duplicate files", prompt="Look for duplicate files across my Downloads and Desktop and write a report listing them side by side. Never delete anything without my review."),
+    ],
+    "research": [
+        PersonalizedStarter(title="Compare before I buy", prompt="Ask me what I'm shopping for, then research current options and give me a tight comparison table with dated sources."),
+        PersonalizedStarter(title="What's new in AI", prompt="Search the web for the most useful AI tools and model releases from the past month and summarize the ones worth my time, with dated sources."),
+        PersonalizedStarter(title="Settle a question", prompt="Ask me one question I've been meaning to look into, then research it properly and give me a current, sourced answer."),
+        PersonalizedStarter(title="Plan a weekend trip", prompt="Ask me where I'd like to go, then research a realistic 3-day itinerary with current prices and opening hours, and turn it into a printable page."),
+    ],
+    "web": [
+        PersonalizedStarter(title="Find a table tonight", prompt="Open OpenTable and find three well-reviewed restaurants near me with availability tonight, compare them, and report back."),
+        PersonalizedStarter(title="Watch a flight price", prompt="Ask me for a route, then open Google Flights, search it, compare dates and airlines across a few pages, and report the best current options."),
+        PersonalizedStarter(title="Best rated near me", prompt="Open Google Maps, search for the best-rated coffee shops nearby, read through reviews on a few of them, and tell me which one to try and why."),
+        PersonalizedStarter(title="Catch me up on tech", prompt="Open Hacker News, read through today's top discussions, and give me the three most interesting threads with what people are actually saying."),
+    ],
+    "build": [
+        PersonalizedStarter(title="Habit tracker", prompt="Build me a simple habit tracker app I can use right now."),
+        PersonalizedStarter(title="Bill splitter", prompt="Build me a tool where I enter a bill total, tip, and the people involved, and it computes exactly who owes what."),
+        PersonalizedStarter(title="CSV instant charts", prompt="Build me a tool where I paste CSV data and it instantly renders clean charts I can screenshot."),
+        PersonalizedStarter(title="Countdown to a date", prompt="Build me a countdown page for a date that matters to me; ask me the date and label, then make it look great."),
+    ],
+}
+
+
+@typechecked
+def p_scan_grounded_rows(category: str, scan: Optional[ScanResult]) -> List[PersonalizedStarter]:
+    """No-LLM personalization: ground a couple of rows per category in the real scan."""
+    if scan is None:
+        return []
+    out: List[PersonalizedStarter] = []
+    if category == "computer":
+        shots = next((f for f in scan.folders if f.screenshot_count > 2), None)
+        if shots:
+            out.append(PersonalizedStarter(
+                title="Frame my screenshots",
+                prompt=f"Find the screenshot images in my {shots.name} folder and build one browsable gallery web page showing them as a neat scrollable grid. Write only the new page; never move or delete the originals.",
+            ))
+        if scan.git_repo_count > 0:
+            out.append(PersonalizedStarter(
+                title="Recap my projects",
+                prompt="Look at the code projects on my computer, read each one's README and recent activity, and write me one short page summarizing what each project is and where it stands. Write only the summary; change nothing.",
+            ))
+    if category == "research" and scan.signal_apps:
+        out.append(PersonalizedStarter(
+            title=f"{scan.signal_apps[0]} tips",
+            prompt=f"Search the web right now for the most useful current tips, shortcuts, and workflows for {scan.signal_apps[0]}, and give me a tight summary with dated sources.",
+        ))
+    return out
+
+
+@typechecked
+def fill_menu(parsed: Optional[PersonalizedMenu], scan: Optional[ScanResult]) -> PersonalizedMenu:
+    """Guarantee 4 rows per category: LLM rows first, then scan-grounded, then static."""
+    menu = PersonalizedMenu()
+    for category in MENU_CATEGORIES:
+        rows: List[PersonalizedStarter] = list(getattr(parsed, category)) if parsed is not None else []
+        for extra in [*p_scan_grounded_rows(category, scan), *P_STATIC_MENU[category]]:
+            if len(rows) >= MENU_SIZE:
+                break
+            if all(extra.title != existing.title for existing in rows):
+                rows.append(extra)
+        setattr(menu, category, rows[:MENU_SIZE])
+    return menu
+
+
+@typechecked
+def parse_menu(text: str) -> Optional[PersonalizedMenu]:
+    data = load_json_object(normalize_json_text(text))
+    if not data:
+        return None
+    menu = PersonalizedMenu()
+    got_any = False
+    for category in MENU_CATEGORIES:
+        rows = data.get(category)
+        starters = build_starters(rows) if isinstance(rows, list) else []
+        if starters:
+            got_any = True
+        setattr(menu, category, starters[:MENU_SIZE])
+    return menu if got_any else None
+
+
+@typechecked
+async def build_menu(settings: AppSettings, facts: dict, scan: Optional[ScanResult]) -> PersonalizedMenu:
+    """One cheap aux call -> 16 tailored starters; any failure fills from scan + static rows."""
+    parsed: Optional[PersonalizedMenu] = None
+    try:
+        from backend.apps.agents.providers.registry import resolve_aux_model
+        from backend.apps.settings.credentials import get_anthropic_client_for_model
+
+        aux_model, _ = await resolve_aux_model(settings, preferred_tier="haiku")
+        client = get_anthropic_client_for_model(settings, aux_model)
+        resp = await client.messages.create(
+            model=aux_model,
+            max_tokens=aux_max_tokens_for(aux_model, base=1800),
+            system=P_MENU_SYSTEM,
+            messages=[{"role": "user", "content": json.dumps(facts)}],
+            timeout=45.0,
+        )
+        parsed = parse_menu(safe_resp_text(resp))
+    except Exception:
+        parsed = None
+    return fill_menu(parsed, scan)
diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 7336f1bc..68f1268d 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -4,7 +4,7 @@ from typing import List, Optional
 
 from pydantic import BaseModel, ConfigDict, Field
 
-from backend.apps.settings.models import PersonalizedAutomation, PersonalizedStarter
+from backend.apps.settings.models import PersonalizedAutomation, PersonalizedMenu, PersonalizedStarter
 
 
 class ProviderIdentity(BaseModel):
@@ -73,3 +73,5 @@ class PrepResponse(BaseModel):
     browser_prompt: str = ""
     browser_reason: str = ""
     automations: List[PersonalizedAutomation] = Field(default_factory=list)
+    # The hero's two-level menu (4 categories x 4 tailored starters); None only if prep never ran.
+    menu: Optional[PersonalizedMenu] = None
diff --git a/backend/apps/onboarding/parse_helpers.py b/backend/apps/onboarding/parse_helpers.py
new file mode 100644
index 00000000..123880cb
--- /dev/null
+++ b/backend/apps/onboarding/parse_helpers.py
@@ -0,0 +1,75 @@
+"""Shared JSON/text salvage helpers for the onboarding aux-call parsers (prep + menu)."""
+
+import json
+import re
+from typing import Dict, List
+
+from typeguard import typechecked
+
+from backend.apps.settings.models import PersonalizedStarter
+
+P_CURLY_QUOTES: Dict[str, str] = {"“": '"', "”": '"', "‘": "'", "’": "'"}
+
+
+@typechecked
+def normalize_json_text(text: str) -> str:
+    for bad, good in P_CURLY_QUOTES.items():
+        text = text.replace(bad, good)
+    return text
+
+
+@typechecked
+def strip_trailing_commas(s: str) -> str:
+    return re.sub(r",(\s*[}\]])", r"\1", s)
+
+
+@typechecked
+def strip_dashes(s: str) -> str:
+    """The house style bans em/en dashes and the model slips them into the greeting anyway, so
+    guarantee it in code: turn a dash-clause into a comma-clause, then tidy any doubled punctuation."""
+    s = s.replace(" — ", ", ").replace("—", ", ").replace(" – ", ", ").replace("–", ", ")
+    s = re.sub(r"\s+([,.;:])", r"\1", s)
+    s = re.sub(r",\s*,", ", ", s)
+    s = re.sub(r"\s{2,}", " ", s)
+    return s.strip()
+
+
+@typechecked
+def load_json_object(text: str) -> dict:
+    """Best-effort load of the outermost JSON object: strict first, then a
+    trailing-comma repair. Returns {} if neither parses (salvage handles the rest)."""
+    match = re.search(r"\{.*\}", text, re.DOTALL)
+    if not match:
+        return {}
+    for candidate in (match.group(0), strip_trailing_commas(match.group(0))):
+        try:
+            parsed = json.loads(candidate)
+            if isinstance(parsed, dict):
+                return parsed
+        except Exception:
+            continue
+    return {}
+
+
+@typechecked
+def salvage_flat_objects(text: str) -> List[dict]:
+    """Pull every complete flat {..} object out of a truncated/malformed blob so a
+    cut-off response still yields the starters it did finish (partial > generic)."""
+    out: List[dict] = []
+    for m in re.finditer(r"\{[^{}]*\}", text):
+        try:
+            obj = json.loads(strip_trailing_commas(m.group(0)))
+        except Exception:
+            continue
+        if isinstance(obj, dict):
+            out.append(obj)
+    return out
+
+
+@typechecked
+def build_starters(rows: List[dict]) -> List[PersonalizedStarter]:
+    return [
+        PersonalizedStarter(title=strip_dashes(str(s.get("title", ""))), prompt=strip_dashes(str(s.get("prompt", ""))), reason=strip_dashes(str(s.get("reason", ""))))
+        for s in rows
+        if isinstance(s, dict) and str(s.get("title", "")).strip() and str(s.get("prompt", "")).strip() and "cadence" not in s
+    ]
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index 4ab3ffdb..92ad21a9 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -4,6 +4,7 @@ One cheap aux call on whatever lane the user just connected; every failure path
 returns the static fallback so the reveal can never be an error card.
 """
 
+import asyncio
 import json
 import re
 from typing import List, Optional
@@ -11,7 +12,9 @@ from typing import List, Optional
 from typeguard import typechecked
 
 from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
+from backend.apps.onboarding.menu import build_menu
 from backend.apps.onboarding.models import PrepRequest, PrepResponse, ScanResult
+from backend.apps.onboarding.parse_helpers import build_starters, load_json_object, normalize_json_text, salvage_flat_objects, strip_dashes
 from backend.apps.settings.models import AppSettings, PersonalizedAutomation, PersonalizedStarter
 
 VALID_CADENCE = {"daily", "weekday", "weekly"}
@@ -134,73 +137,6 @@ P_SYSTEM = (
 )
 
 
-P_CURLY_QUOTES = {"“": '"', "”": '"', "‘": "'", "’": "'"}
-
-
-@typechecked
-def p_normalize_json_text(text: str) -> str:
-    for bad, good in P_CURLY_QUOTES.items():
-        text = text.replace(bad, good)
-    return text
-
-
-@typechecked
-def p_strip_trailing_commas(s: str) -> str:
-    return re.sub(r",(\s*[}\]])", r"\1", s)
-
-
-@typechecked
-def p_strip_dashes(s: str) -> str:
-    """The house style bans em/en dashes and the model slips them into the greeting anyway, so
-    guarantee it in code: turn a dash-clause into a comma-clause, then tidy any doubled punctuation."""
-    s = s.replace(" — ", ", ").replace("—", ", ").replace(" – ", ", ").replace("–", ", ")
-    s = re.sub(r"\s+([,.;:])", r"\1", s)
-    s = re.sub(r",\s*,", ", ", s)
-    s = re.sub(r"\s{2,}", " ", s)
-    return s.strip()
-
-
-@typechecked
-def p_load_object(text: str) -> dict:
-    """Best-effort load of the outermost JSON object: strict first, then a
-    trailing-comma repair. Returns {} if neither parses (salvage handles the rest)."""
-    match = re.search(r"\{.*\}", text, re.DOTALL)
-    if not match:
-        return {}
-    for candidate in (match.group(0), p_strip_trailing_commas(match.group(0))):
-        try:
-            parsed = json.loads(candidate)
-            if isinstance(parsed, dict):
-                return parsed
-        except Exception:
-            continue
-    return {}
-
-
-@typechecked
-def p_salvage_flat_objects(text: str) -> List[dict]:
-    """Pull every complete flat {..} object out of a truncated/malformed blob so a
-    cut-off response still yields the starters it did finish (partial > generic)."""
-    out: List[dict] = []
-    for m in re.finditer(r"\{[^{}]*\}", text):
-        try:
-            obj = json.loads(p_strip_trailing_commas(m.group(0)))
-        except Exception:
-            continue
-        if isinstance(obj, dict):
-            out.append(obj)
-    return out
-
-
-@typechecked
-def p_build_starters(rows: List[dict]) -> List[PersonalizedStarter]:
-    return [
-        PersonalizedStarter(title=p_strip_dashes(str(s.get("title", ""))), prompt=p_strip_dashes(str(s.get("prompt", ""))), reason=p_strip_dashes(str(s.get("reason", ""))))
-        for s in rows
-        if isinstance(s, dict) and str(s.get("title", "")).strip() and str(s.get("prompt", "")).strip() and "cadence" not in s
-    ]
-
-
 @typechecked
 def p_extract_string_field(text: str, name: str) -> str:
     """Pull a top-level "name": "value" string straight out of the raw blob, for the fields that
@@ -213,8 +149,8 @@ def p_extract_string_field(text: str, name: str) -> str:
 def p_build_automations(rows: List[dict]) -> List[PersonalizedAutomation]:
     return [
         PersonalizedAutomation(
-            title=p_strip_dashes(str(a.get("title", ""))),
-            prompt=p_strip_dashes(str(a.get("prompt", ""))),
+            title=strip_dashes(str(a.get("title", ""))),
+            prompt=strip_dashes(str(a.get("prompt", ""))),
             cadence=(str(a.get("cadence", "weekly")).strip().lower() if str(a.get("cadence", "")).strip().lower() in VALID_CADENCE else "weekly"),
         )
         for a in rows
@@ -224,9 +160,9 @@ def p_build_automations(rows: List[dict]) -> List[PersonalizedAutomation]:
 
 @typechecked
 def parse_prep(text: str) -> Optional[PrepResponse]:
-    text = p_normalize_json_text(text)
-    data = p_load_object(text)
-    starters = p_build_starters(data.get("starters") if isinstance(data.get("starters"), list) else [])
+    text = normalize_json_text(text)
+    data = load_json_object(text)
+    starters = build_starters(data.get("starters") if isinstance(data.get("starters"), list) else [])
     automations = p_build_automations(data.get("automations") if isinstance(data.get("automations"), list) else [])
     headline = str(data.get("headline", "")).strip()
     greeting = str(data.get("greeting", "")).strip()
@@ -243,9 +179,9 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
     # Truncation / trailing comma / smart quotes broke the strict load: salvage the complete pieces
     # rather than throwing the whole personalized reveal away for one bad character.
     if not starters or not automations:
-        objs = p_salvage_flat_objects(text)
+        objs = salvage_flat_objects(text)
         if not starters:
-            starters = p_build_starters([o for o in objs if "cadence" not in o])
+            starters = build_starters([o for o in objs if "cadence" not in o])
         if not automations:
             automations = p_build_automations([o for o in objs if "cadence" in o])
     # Top-level string fields don't live in the flat objects above, so recover them by name when the
@@ -276,18 +212,18 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
     if not starters:
         return None
     return PrepResponse(
-        headline=p_strip_dashes(headline),
-        greeting=p_strip_dashes(greeting),
+        headline=strip_dashes(headline),
+        greeting=strip_dashes(greeting),
         starters=starters[:4],
-        app_title=p_strip_dashes(app_title),
-        app_prompt=p_strip_dashes(app_prompt),
-        app_reason=p_strip_dashes(app_reason),
-        research_title=p_strip_dashes(research_title),
-        research_prompt=p_strip_dashes(research_prompt),
-        research_reason=p_strip_dashes(research_reason),
-        browser_title=p_strip_dashes(browser_title),
-        browser_prompt=p_strip_dashes(browser_prompt),
-        browser_reason=p_strip_dashes(browser_reason),
+        app_title=strip_dashes(app_title),
+        app_prompt=strip_dashes(app_prompt),
+        app_reason=strip_dashes(app_reason),
+        research_title=strip_dashes(research_title),
+        research_prompt=strip_dashes(research_prompt),
+        research_reason=strip_dashes(research_reason),
+        browser_title=strip_dashes(browser_title),
+        browser_prompt=strip_dashes(browser_prompt),
+        browser_reason=strip_dashes(browser_reason),
         automations=automations[:3],
     )
 
@@ -411,7 +347,7 @@ async def p_distill_profile(settings: AppSettings, usage_text: str) -> str:
             messages=[{"role": "user", "content": usage_text[:P_PROFILE_INPUT_CAP]}],
             timeout=45.0,
         )
-        return p_strip_dashes(safe_resp_text(resp).strip())
+        return strip_dashes(safe_resp_text(resp).strip())
     except Exception:
         return ""
 
@@ -432,6 +368,8 @@ async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepRespons
         profile = await p_distill_profile(settings, usage)
         if profile:
             facts["usage_summary"] = profile
+    # The hero's 4x4 drill-in menu rides its own parallel aux call; build_menu never raises.
+    menu_task = asyncio.create_task(build_menu(settings, facts, request.scan))
     try:
         from backend.apps.agents.providers.registry import resolve_aux_model
         from backend.apps.settings.credentials import get_anthropic_client_for_model
@@ -451,9 +389,12 @@ async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepRespons
         )
         parsed = parse_prep(safe_resp_text(resp))
         if parsed is not None:
+            parsed.menu = await menu_task
             return parsed
     except Exception:
         pass
     # Aux unusable (empty gemini/codex response on 0.3.60, provider down, no anthropic lane): still
     # ground the reveal in the real scan rather than shipping generic stubs.
-    return p_scan_grounded_fallback(request)
+    fallback = p_scan_grounded_fallback(request)
+    fallback.menu = await menu_task
+    return fallback
diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index 0b3cf6dc..97023155 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -39,6 +39,8 @@ class AppSettings(BaseModel):
     default_max_turns: Optional[int] = None
     default_thinking_level: Literal["off", "low", "medium", "high", "auto"] = "auto"
     zoom_sensitivity: float = 50.0
+    # Root font-size multiplier (0.9/1/1.1/1.2 from Settings > Interface); the whole rem type scale rides it.
+    ui_font_scale: float = 1.0
     theme: str = "light"
     # Shared across App Builder workspaces (each runs its own vite port / localStorage origin); null = follow system.
     app_template_theme_override: Optional[Literal["light", "dark"]] = None
@@ -72,6 +74,8 @@ class AppSettings(BaseModel):
     personalized_headline: Optional[str] = None
     personalized_starters: list["PersonalizedStarter"] = Field(default_factory=list)
     personalized_automations: list["PersonalizedAutomation"] = Field(default_factory=list)
+    # The hero's two-level menu: 4 general categories, each holding 4 starters tailored to this user.
+    personalized_menu: Optional["PersonalizedMenu"] = None
     # Distilled from the user's provider chat history the first time they open ChatGPT/Claude in-app; re-feeds prep to sharpen suggestions.
     personalized_usage_summary: Optional[str] = None
     # Suppresses preflight suggestion modal entries the user dismissed; keyed by ToolDefinition.name, value ISO timestamp.
@@ -124,3 +128,10 @@ class PersonalizedAutomation(BaseModel):
     prompt: str
     # 'daily' | 'weekday' | 'weekly'; the frontend maps this to a workflow schedule.
     cadence: str = "weekly"
+
+
+class PersonalizedMenu(BaseModel):
+    computer: list[PersonalizedStarter] = Field(default_factory=list)
+    research: list[PersonalizedStarter] = Field(default_factory=list)
+    web: list[PersonalizedStarter] = Field(default_factory=list)
+    build: list[PersonalizedStarter] = Field(default_factory=list)
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index 1a9ee6b8..8efec570 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -270,3 +270,60 @@ async def test_build_prep_fails_open_without_provider(monkeypatch):
     result = await build_prep(AppSettings(), PrepRequest(scan=ScanResult(), picked_apps=["notion"]))
     assert result.greeting == ""
     assert result.starters == FALLBACK_STARTERS
+
+
+# --------------------------------------------------------------------------- hero menu ---------------------------------------------------------------------------
+
+def test_parse_menu_strict_and_partial():
+    from backend.apps.onboarding.menu import parse_menu
+
+    full = json.dumps({
+        "computer": [{"title": "Frame shots", "prompt": "do it"}],
+        "research": [{"title": "Vector DBs", "prompt": "compare"}],
+        "web": [],
+        "build": [{"title": "Jump log", "prompt": "Build me a jump log"}],
+    })
+    menu = parse_menu(full)
+    assert menu is not None
+    assert menu.computer[0].title == "Frame shots"
+    assert menu.web == []
+    assert parse_menu("not json at all") is None
+    assert parse_menu(json.dumps({"computer": [], "research": [], "web": [], "build": []})) is None
+
+
+def test_fill_menu_always_serves_four_per_category():
+    from backend.apps.onboarding.menu import MENU_CATEGORIES, fill_menu, parse_menu
+
+    partial = parse_menu(json.dumps({
+        "computer": [{"title": "Frame shots", "prompt": "do it"}],
+        "research": [], "web": [], "build": [],
+    }))
+    scan = ScanResult(signal_apps=["Figma"], folders=[], git_repo_count=2)
+    menu = fill_menu(partial, scan)
+    for category in MENU_CATEGORIES:
+        rows = getattr(menu, category)
+        assert len(rows) == 4, category
+        assert len({r.title for r in rows}) == 4, category
+    # LLM rows lead, scan-grounded rows fill before statics.
+    assert menu.computer[0].title == "Frame shots"
+    assert any(r.title == "Recap my projects" for r in menu.computer)
+    assert menu.research[0].title == "Figma tips"
+    # No scan at all still fills from statics.
+    empty = fill_menu(None, None)
+    for category in MENU_CATEGORIES:
+        assert len(getattr(empty, category)) == 4
+
+
+@pytest.mark.asyncio
+async def test_build_prep_attaches_menu_even_on_fallback(monkeypatch):
+    from backend.apps.onboarding import prep as prep_mod
+
+    async def boom(*a, **k):
+        raise RuntimeError("no aux")
+
+    monkeypatch.setattr("backend.apps.agents.providers.registry.resolve_aux_model", boom)
+    out = await build_prep(AppSettings(), PrepRequest(scan=ScanResult()))
+    assert out.menu is not None
+    from backend.apps.onboarding.menu import MENU_CATEGORIES
+    for category in MENU_CATEGORIES:
+        assert len(getattr(out.menu, category)) == 4
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index dd4fbbc7..188444d0 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -1,5 +1,5 @@
 import { API_BASE } from '@/shared/config';
-import type { PersonalizedStarter, PersonalizedAutomation } from '@/shared/state/settingsSlice';
+import type { PersonalizedStarter, PersonalizedAutomation, PersonalizedMenu } from '@/shared/state/settingsSlice';
 
 export interface ProviderIdentity {
   provider: string;
@@ -37,6 +37,7 @@ export interface PrepResponse {
   browser_prompt: string;
   browser_reason: string;
   automations: PersonalizedAutomation[];
+  menu?: PersonalizedMenu | null;
 }
 
 export async function fetchIdentity(): Promise<ProviderIdentity[]> {
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index 0536ccc4..a5319492 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -98,6 +98,7 @@ export function useOnboardingV3Pipeline() {
       personalized_greeting: prep?.greeting?.trim() || null,
       personalized_headline: prep?.headline?.trim() || null,
       personalized_starters: prep?.starters ?? [],
+      personalized_menu: prep?.menu ?? null,
       personalized_automations: prep?.automations ?? [],
     }));
     dispatch(stageReveal({
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
index 7a73d3c6..93bf2374 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { motion } from 'framer-motion';
-import { Search, Hammer, Globe, CalendarClock, FolderGit2, Sparkles, ArrowUp, Image as ImageIcon } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Search, Hammer, Globe, CalendarClock, FolderGit2, Sparkles, ArrowUp, ArrowLeft, ChevronRight, Image as ImageIcon } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useAppSelector } from '@/shared/hooks';
@@ -10,15 +10,11 @@ import {
   hasModelConnected,
   hasFreeTrialActive,
 } from '@/app/components/Onboarding/steps/skipPredicates';
+import { HERO_CATEGORIES, heroMenuFor, type HeroCategoryId } from './heroMenu';
 
-// Empty canvas, styled after ChatGPT / Claude / Manus: a short question, a centered composer as the HERO, then a few TAILORED, icon-led suggestions (the onboarding scan wrote them), never abstract category buttons. Font sizes come from the shared type scale so it reads clean.
-type Suggestion = { title: string; prompt: string };
-
-const FALLBACK_SUGGESTIONS: Suggestion[] = [
-  { title: 'Research something and give me a clear comparison', prompt: 'Research a topic I care about and give me a tight, current comparison with dated sources. Ask me the topic first if you need to.' },
-  { title: 'Build me a small app I can use right now', prompt: 'Build me a simple, useful app I can use right now, and drop it on my canvas.' },
-  { title: 'Send an agent to find something on the web', prompt: 'Open a real website and do a multi-step task for me, then report what you found.' },
-];
+// Empty canvas, styled after ChatGPT / Claude / Manus: a short question, a centered composer as the
+// HERO, then a two-level menu: 4 GENERAL things OpenSwarm can do, each drilling into 4 SPECIFIC
+// starters tailored to this user (onboarding prep wrote them). Font sizes ride the shared type scale.
 
 // Give each suggestion a leading icon inferred from what it does, so the list reads like real actions (the way ChatGPT tags suggestions with app icons) instead of a wall of identical rows.
 function iconForStarter(text: string): LucideIcon {
@@ -71,9 +67,12 @@ const DashboardEmptyState: React.FC<{
   const mode = useAppSelector((s) => s.settings.data.default_mode);
   const canRun = useAppSelector((s) => hasFreeTrialActive(s) || hasModelConnected(s));
   const personalized = useAppSelector((s) => s.settings.data.personalized_starters ?? []);
+  const personalizedMenu = useAppSelector((s) => s.settings.data.personalized_menu ?? null);
   const userName = useAppSelector((s) => s.settings.data.user_name ?? null);
   const [text, setText] = React.useState('');
   const [launching, setLaunching] = React.useState(false);
+  const [openCat, setOpenCat] = React.useState<HeroCategoryId | null>(null);
+  const menu = React.useMemo(() => heroMenuFor(personalizedMenu, personalized), [personalizedMenu, personalized]);
   const firstName = (userName ?? '').trim().split(/\s+/)[0] || null;
   const headline = firstName ? `What should we get done, ${firstName}?` : 'What do you want done?';
   const ghostLines = React.useMemo(
@@ -89,9 +88,7 @@ const DashboardEmptyState: React.FC<{
     if (onStarter) onStarter(p);
   };
 
-  const suggestions: Suggestion[] = personalized.length > 0
-    ? personalized.slice(0, 4).map((s) => ({ title: s.title, prompt: s.prompt }))
-    : FALLBACK_SUGGESTIONS;
+  const openCategory = openCat ? HERO_CATEGORIES.find((cat) => cat.id === openCat) ?? null : null;
 
   return (
     <Box
@@ -162,35 +159,92 @@ const DashboardEmptyState: React.FC<{
               </Box>
             </Box>
 
-            {/* Tailored, icon-led suggestions. */}
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-              {suggestions.map((s, i) => {
-                const Ic = iconForStarter(`${s.title} ${s.prompt}`);
-                return (
+            {/* Two levels: 4 general things it can do, each opening 4 starters tailored to this user. */}
+            <AnimatePresence mode="wait" initial={false}>
+              {openCategory === null ? (
+                <motion.div
+                  key="categories"
+                  initial={{ opacity: 0, x: -12 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: -12 }}
+                  transition={{ duration: 0.16 }}
+                  style={{ display: 'flex', flexDirection: 'column', gap: 4 }}
+                >
+                  {HERO_CATEGORIES.map((cat, i) => (
+                    <Box
+                      key={cat.id}
+                      component={motion.button}
+                      onClick={() => setOpenCat(cat.id)}
+                      disabled={launching}
+                      initial={{ opacity: 0, y: 4 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.25, delay: 0.05 + i * 0.05 }}
+                      sx={{
+                        display: 'flex', alignItems: 'center', gap: 1.5, textAlign: 'left', width: '100%',
+                        px: 1.75, py: 1.25, borderRadius: '12px',
+                        border: `1px solid transparent`, background: 'transparent',
+                        color: c.text.secondary, fontFamily: 'inherit', fontSize: c.font.size.base,
+                        cursor: launching ? 'default' : 'pointer',
+                        transition: 'background 150ms, border-color 150ms',
+                        '&:hover': launching ? {} : { background: c.bg.surface, borderColor: c.border.subtle, '& .osw-hero-chev': { opacity: 1, transform: 'none' } },
+                      }}
+                    >
+                      <cat.Icon size={17} style={{ color: c.text.muted, flexShrink: 0 }} />
+                      <span style={{ flex: 1 }}>{cat.label}</span>
+                      <ChevronRight className="osw-hero-chev" size={15} style={{ color: c.text.ghost, flexShrink: 0, opacity: 0, transform: 'translateX(-4px)', transition: 'opacity 150ms, transform 150ms' }} />
+                    </Box>
+                  ))}
+                </motion.div>
+              ) : (
+                <motion.div
+                  key={openCategory.id}
+                  initial={{ opacity: 0, x: 12 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: 12 }}
+                  transition={{ duration: 0.16 }}
+                  style={{ display: 'flex', flexDirection: 'column', gap: 4 }}
+                >
                   <Box
-                    key={s.title}
-                    component={motion.button}
-                    onClick={() => launch(s.prompt)}
-                    disabled={launching}
-                    initial={{ opacity: 0, y: 4 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.25, delay: 0.05 + i * 0.05 }}
+                    component="button"
+                    onClick={() => setOpenCat(null)}
                     sx={{
-                      display: 'flex', alignItems: 'center', gap: 1.5, textAlign: 'left', width: '100%',
-                      px: 1.75, py: 1.25, borderRadius: '12px',
-                      border: `1px solid transparent`, background: 'transparent',
-                      color: c.text.secondary, fontFamily: 'inherit', fontSize: c.font.size.base,
-                      cursor: launching ? 'default' : 'pointer',
-                      transition: 'background 150ms, border-color 150ms',
-                      '&:hover': launching ? {} : { background: c.bg.surface, borderColor: c.border.subtle },
+                      display: 'inline-flex', alignItems: 'center', gap: 0.75, alignSelf: 'flex-start',
+                      px: 1.75, py: 0.5, border: 'none', background: 'transparent',
+                      color: c.text.ghost, fontFamily: 'inherit', fontSize: c.font.size.sm,
+                      cursor: 'pointer', '&:hover': { color: c.text.secondary },
                     }}
                   >
-                    <Ic size={17} style={{ color: c.text.muted, flexShrink: 0 }} />
-                    {s.title}
+                    <ArrowLeft size={14} /> {openCategory.label}
                   </Box>
-                );
-              })}
-            </Box>
+                  {menu[openCategory.id].map((s, i) => {
+                    const Ic = iconForStarter(`${s.title} ${s.prompt}`);
+                    return (
+                      <Box
+                        key={s.title}
+                        component={motion.button}
+                        onClick={() => launch(s.prompt)}
+                        disabled={launching}
+                        initial={{ opacity: 0, y: 4 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.22, delay: 0.03 + i * 0.045 }}
+                        sx={{
+                          display: 'flex', alignItems: 'center', gap: 1.5, textAlign: 'left', width: '100%',
+                          px: 1.75, py: 1.25, borderRadius: '12px',
+                          border: `1px solid transparent`, background: 'transparent',
+                          color: c.text.secondary, fontFamily: 'inherit', fontSize: c.font.size.base,
+                          cursor: launching ? 'default' : 'pointer',
+                          transition: 'background 150ms, border-color 150ms',
+                          '&:hover': launching ? {} : { background: c.bg.surface, borderColor: c.border.subtle },
+                        }}
+                      >
+                        <Ic size={17} style={{ color: c.text.muted, flexShrink: 0 }} />
+                        {s.title}
+                      </Box>
+                    );
+                  })}
+                </motion.div>
+              )}
+            </AnimatePresence>
           </>
         ) : (
           <Typography sx={{ color: c.text.ghost, fontSize: c.font.size.base, textAlign: 'center' }}>
diff --git a/frontend/src/app/pages/Dashboard/canvas/heroMenu.ts b/frontend/src/app/pages/Dashboard/canvas/heroMenu.ts
new file mode 100644
index 00000000..e30bb939
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/canvas/heroMenu.ts
@@ -0,0 +1,80 @@
+import { Search, Hammer, Globe, Laptop } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import type { PersonalizedMenu, PersonalizedStarter } from '@/shared/state/settingsSlice';
+
+// The hero's two levels: 4 GENERAL categories (what OpenSwarm can do), each opening 4 SPECIFIC
+// starters tailored to this user by onboarding prep. When prep never wrote a menu (older installs,
+// prep failure), we bucket whatever personalized starters exist and fill the rest from statics,
+// so the drill-in is always complete.
+
+export type HeroCategoryId = 'computer' | 'research' | 'web' | 'build';
+
+export interface HeroCategory {
+  id: HeroCategoryId;
+  label: string;
+  Icon: LucideIcon;
+}
+
+export const HERO_CATEGORIES: HeroCategory[] = [
+  { id: 'computer', label: 'Do something on my computer', Icon: Laptop },
+  { id: 'research', label: 'Research something for me', Icon: Search },
+  { id: 'web', label: 'Send an agent to the web', Icon: Globe },
+  { id: 'build', label: 'Build me a tiny app', Icon: Hammer },
+];
+
+const MENU_SIZE = 4;
+
+const FALLBACK_MENU: PersonalizedMenu = {
+  computer: [
+    { title: 'Clean up Downloads', prompt: 'Sort my Downloads folder into tidy subfolders. Show me the plan before moving anything.' },
+    { title: 'Find my biggest files', prompt: 'Scan my home folder for the largest files and folders and write me a reviewable page listing them with sizes. Do not delete anything.' },
+    { title: 'Index my documents', prompt: 'Look through my Documents folder and build one searchable index page listing files by name and date so I can find things fast. Write only the new page.' },
+    { title: 'Find duplicate files', prompt: 'Look for duplicate files across my Downloads and Desktop and write a report listing them side by side. Never delete anything without my review.' },
+  ],
+  research: [
+    { title: 'Compare before I buy', prompt: "Ask me what I'm shopping for, then research current options and give me a tight comparison table with dated sources." },
+    { title: "What's new in AI", prompt: 'Search the web for the most useful AI tools and model releases from the past month and summarize the ones worth my time, with dated sources.' },
+    { title: 'Settle a question', prompt: "Ask me one question I've been meaning to look into, then research it properly and give me a current, sourced answer." },
+    { title: 'Plan a weekend trip', prompt: "Ask me where I'd like to go, then research a realistic 3-day itinerary with current prices and opening hours, and turn it into a printable page." },
+  ],
+  web: [
+    { title: 'Find a table tonight', prompt: 'Open OpenTable and find three well-reviewed restaurants near me with availability tonight, compare them, and report back.' },
+    { title: 'Watch a flight price', prompt: 'Ask me for a route, then open Google Flights, search it, compare dates and airlines across a few pages, and report the best current options.' },
+    { title: 'Best rated near me', prompt: 'Open Google Maps, search for the best-rated coffee shops nearby, read through reviews on a few of them, and tell me which one to try and why.' },
+    { title: 'Catch me up on tech', prompt: "Open Hacker News, read through today's top discussions, and give me the three most interesting threads with what people are actually saying." },
+  ],
+  build: [
+    { title: 'Habit tracker', prompt: 'Build me a simple habit tracker app I can use right now.' },
+    { title: 'Bill splitter', prompt: 'Build me a tool where I enter a bill total, tip, and the people involved, and it computes exactly who owes what.' },
+    { title: 'CSV instant charts', prompt: 'Build me a tool where I paste CSV data and it instantly renders clean charts I can screenshot.' },
+    { title: 'Countdown to a date', prompt: 'Build me a countdown page for a date that matters to me; ask me the date and label, then make it look great.' },
+  ],
+};
+
+function classifyStarter(s: PersonalizedStarter): HeroCategoryId {
+  const t = `${s.title} ${s.prompt}`.toLowerCase();
+  if (/build me|small app|tiny app|tool that|tracker/.test(t)) return 'build';
+  if (/open [a-z]|browse|website|browser|opentable|maps|flights/.test(t)) return 'web';
+  if (/folder|files|downloads|desktop|documents|screenshot|my mac|my computer|repo/.test(t)) return 'computer';
+  return 'research';
+}
+
+export function heroMenuFor(menu: PersonalizedMenu | null | undefined, starters: PersonalizedStarter[]): PersonalizedMenu {
+  const out: PersonalizedMenu = { computer: [], research: [], web: [], build: [] };
+  if (menu) {
+    for (const cat of HERO_CATEGORIES) out[cat.id] = [...(menu[cat.id] ?? [])];
+  } else {
+    for (const s of starters) {
+      const cat = classifyStarter(s);
+      if (out[cat].length < MENU_SIZE) out[cat].push(s);
+    }
+  }
+  for (const cat of HERO_CATEGORIES) {
+    for (const extra of FALLBACK_MENU[cat.id]) {
+      if (out[cat.id].length >= MENU_SIZE) break;
+      if (out[cat.id].every((row) => row.title !== extra.title)) out[cat.id].push(extra);
+    }
+    out[cat.id] = out[cat.id].slice(0, MENU_SIZE);
+  }
+  return out;
+}
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index a971475b..88c0114d 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -91,6 +91,8 @@ export interface AppSettings {
   personalized_headline?: string | null;
   personalized_starters?: PersonalizedStarter[];
   personalized_automations?: PersonalizedAutomation[];
+  /** The hero's two-level menu: 4 general categories, each with 4 starters tailored to this user. */
+  personalized_menu?: PersonalizedMenu | null;
   personalized_usage_summary?: string | null;
 }
 
@@ -106,6 +108,13 @@ export interface PersonalizedAutomation {
   cadence: 'daily' | 'weekday' | 'weekly';
 }
 
+export interface PersonalizedMenu {
+  computer: PersonalizedStarter[];
+  research: PersonalizedStarter[];
+  web: PersonalizedStarter[];
+  build: PersonalizedStarter[];
+}
+
 export interface ActivateSubscriptionPayload {
   token: string;
   plan?: string | null;

From ff38bed50e7a16dd44daf0ed494a785dcca4bd78 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 18:29:10 -0700
Subject: [PATCH 194/248] [eric] models: default is opus-5 via one
 DEFAULT_MODEL constant; per-provider picks upgraded to gpt-5.6 + latest
 gemini

---
 backend/apps/settings/models.py                       |  6 +++++-
 backend/apps/subscription/free_trial.py               |  3 ++-
 backend/apps/swarm/entities/SessionExportable.py      |  3 ++-
 backend/apps/workflows/executor.py                    |  3 ++-
 backend/apps/workflows/models.py                      |  3 ++-
 backend/apps/workflows/workflows.py                   | 11 ++++++-----
 backend/main.py                                       |  3 ++-
 backend/tests/test_free_trial.py                      |  4 ++--
 backend/tests/test_settings_migration.py              |  2 +-
 frontend/package-lock.json                            |  1 +
 frontend/src/app/Main.tsx                             |  6 +++---
 frontend/src/app/pages/AgentChat/AgentChat.tsx        |  2 +-
 .../AgentChat/ChatInput/hooks/useChatInputModel.ts    |  1 +
 frontend/src/app/pages/Dashboard/DashboardToolbar.tsx |  6 +++---
 frontend/src/app/pages/Settings/Settings.tsx          |  1 +
 frontend/src/shared/state/settingsSlice.ts            |  2 +-
 16 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index 97023155..29170683 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -31,10 +31,14 @@ DEFAULT_SYSTEM_PROMPT = (
 )
 
 
+# Fresh-install / unset-fallback model. "opus-5" is the plain row: cc/ sub lane for subscription users, API key otherwise.
+DEFAULT_MODEL = "opus-5"
+
+
 class AppSettings(BaseModel):
     default_system_prompt: Optional[str] = DEFAULT_SYSTEM_PROMPT
     default_folder: Optional[str] = None
-    default_model: str = "sonnet"
+    default_model: str = DEFAULT_MODEL
     default_mode: str = "agent"
     default_max_turns: Optional[int] = None
     default_thinking_level: Literal["off", "low", "medium", "high", "auto"] = "auto"
diff --git a/backend/apps/subscription/free_trial.py b/backend/apps/subscription/free_trial.py
index 889f2215..d6a02272 100644
--- a/backend/apps/subscription/free_trial.py
+++ b/backend/apps/subscription/free_trial.py
@@ -136,7 +136,8 @@ async def clear_free_trial(settings_obj) -> None:
         if getattr(settings_obj, "default_model", None) == "haiku" and (
             has_own_model(settings_obj) or await p_has_connected_subscription()
         ):
-            settings_obj.default_model = "sonnet"
+            from backend.apps.settings.models import DEFAULT_MODEL
+            settings_obj.default_model = DEFAULT_MODEL
     settings_obj.free_trial_token = None
     await save_settings_async(settings_obj)
     await p_sync_routing(settings_obj)
diff --git a/backend/apps/swarm/entities/SessionExportable.py b/backend/apps/swarm/entities/SessionExportable.py
index b735dbf8..cf1d1140 100644
--- a/backend/apps/swarm/entities/SessionExportable.py
+++ b/backend/apps/swarm/entities/SessionExportable.py
@@ -14,6 +14,7 @@ from uuid import uuid4
 
 from backend.apps.swarm.exportable import DepRef, ExportContext, RemapTable
 from backend.apps.swarm.models import EntityType, Requirement, RequirementKind
+from backend.apps.settings.models import DEFAULT_MODEL
 
 P_BUILTIN_MODES = {"agent", "ask", "plan", "view-builder", "skill-builder"}
 # Transcript fields ride along so the shared agent keeps its history; ids inside (message ids, branch ids, their parent/fork refs) are self-consistent within the one session file, so they carry verbatim with no remap.
@@ -95,7 +96,7 @@ class SessionExportable:
             "name": payload.get("name") or "Agent",
             "status": "completed",
             "provider": payload.get("provider") or "anthropic",
-            "model": payload.get("model") or "sonnet",
+            "model": payload.get("model") or DEFAULT_MODEL,
             "mode": payload.get("mode") or "agent",
             "system_prompt": payload.get("system_prompt"),
             "allowed_tools": payload.get("allowed_tools") or [],
diff --git a/backend/apps/workflows/executor.py b/backend/apps/workflows/executor.py
index 1e54b734..35cbb5f9 100644
--- a/backend/apps/workflows/executor.py
+++ b/backend/apps/workflows/executor.py
@@ -14,6 +14,7 @@ from typing import Optional
 from backend.apps.agents.core.models import AgentConfig
 from backend.apps.workflows.models import Workflow, WorkflowRun
 from backend.apps.workflows import storage
+from backend.apps.settings.models import DEFAULT_MODEL
 
 logger = logging.getLogger(__name__)
 
@@ -268,7 +269,7 @@ async def execute(
         resolved_allowed_tools = _resolve_allowed_tools(wf)
         config = AgentConfig(
             name=wf.title or "Workflow",
-            model=wf.model or "sonnet",
+            model=wf.model or DEFAULT_MODEL,
             mode=wf.mode or "agent",
             provider=wf.provider or "anthropic",
             system_prompt=_resolve_system_prompt(wf),
diff --git a/backend/apps/workflows/models.py b/backend/apps/workflows/models.py
index 84c176e0..0e56bd4c 100644
--- a/backend/apps/workflows/models.py
+++ b/backend/apps/workflows/models.py
@@ -2,6 +2,7 @@ from pydantic import BaseModel, ConfigDict, Field, field_validator, model_valida
 from typing import Optional, Literal, Any
 from datetime import datetime
 from uuid import uuid4
+from backend.apps.settings.models import DEFAULT_MODEL
 
 
 # Each "tier" in the permission chain: notify in app, fall through to text after N minutes if no response, then to call after a further N minutes/hours. Matches images 17 to 19 (Schedule edit). Order in the list = escalation order.
@@ -97,7 +98,7 @@ class Workflow(BaseModel):
     # Tool names observed in the source chat when this workflow was generated. This preserves conversion context without pretending those calls map to generated workflow step ids. Explicit approval decisions still live in remembered_approvals and are the only values reused as permissions.
     source_tools: list[str] = Field(default_factory=list)
     dashboard_id: Optional[str] = None
-    model: str = "sonnet"
+    model: str = DEFAULT_MODEL
     mode: str = "agent"
     provider: str = "anthropic"
     created_at: datetime = Field(default_factory=datetime.now)
diff --git a/backend/apps/workflows/workflows.py b/backend/apps/workflows/workflows.py
index fe930c1a..ffd4b9a8 100644
--- a/backend/apps/workflows/workflows.py
+++ b/backend/apps/workflows/workflows.py
@@ -20,6 +20,7 @@ from backend.apps.workflows.models import (
     GenerateMetadataResponse,
 )
 from backend.apps.workflows import storage, scheduler, executor, audit, escalation
+from backend.apps.settings.models import DEFAULT_MODEL
 
 logger = logging.getLogger(__name__)
 
@@ -265,7 +266,7 @@ async def create_workflow(body: WorkflowCreate):
         permissions=body.permissions or [],
         source_session_id=body.source_session_id,
         dashboard_id=body.dashboard_id,
-        model=body.model or "sonnet",
+        model=body.model or DEFAULT_MODEL,
         mode=body.mode or "agent",
         provider=body.provider or "anthropic",
         cost_cap_usd_monthly=body.cost_cap_usd_monthly,
@@ -313,7 +314,7 @@ async def create_workflow(body: WorkflowCreate):
 @workflows.router.post("/generate-metadata")
 async def generate_workflow_metadata(body: GenerateMetadataRequest) -> GenerateMetadataResponse:
     # Preview-time naming for the convert-to-workflow draft. Generates without persisting so the card can show a real title before the user saves.
-    wf = Workflow(steps=body.steps, model=body.model or "sonnet")
+    wf = Workflow(steps=body.steps, model=body.model or DEFAULT_MODEL)
     title, description, labels = await _generate_workflow_metadata(wf)
     return GenerateMetadataResponse(title=title, description=description, step_labels=labels)
 
@@ -1017,7 +1018,7 @@ async def edit_agent_session(workflow_id: str):
     edit_dashboard_id = p_wsm.active_dashboard_id or executor.resolve_workflow_dashboard_id(wf)
     config = AgentConfig(
         name=f"Edit Agent: {wf.title}",
-        model=wf.model or "sonnet",
+        model=wf.model or DEFAULT_MODEL,
         mode=wf.mode or "agent",
         provider=wf.provider or "anthropic",
         system_prompt=system_prompt,
@@ -1256,7 +1257,7 @@ async def test_run_workflow(workflow_id: str, body: dict):
     resolved_allowed_tools = executor._resolve_allowed_tools(wf)
     config = AgentConfig(
         name=f"{wf.title or 'Workflow'} (test)",
-        model=wf.model or "sonnet",
+        model=wf.model or DEFAULT_MODEL,
         mode=wf.mode or "agent",
         provider=wf.provider or "anthropic",
         system_prompt=executor._resolve_system_prompt(wf),
@@ -1395,7 +1396,7 @@ async def schedule_agent_session(workflow_id: str):
     )
     config = AgentConfig(
         name=f"Scheduling: {wf.title}",
-        model=wf.model or "sonnet",
+        model=wf.model or DEFAULT_MODEL,
         mode=wf.mode or "agent",
         provider=wf.provider or "anthropic",
         system_prompt=system_prompt,
diff --git a/backend/main.py b/backend/main.py
index 97367cd1..0366a312 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -503,7 +503,8 @@ async def browser_agent_run(request: Request):
 
     body = await request.json()
     tasks = body.get("tasks", [])
-    model = body.get("model", "sonnet")
+    from backend.apps.settings.models import DEFAULT_MODEL
+    model = body.get("model", DEFAULT_MODEL)
     dashboard_id = body.get("dashboard_id", "")
     pre_selected_browser_ids = body.get("pre_selected_browser_ids", [])
     parent_session_id = body.get("parent_session_id", "")
diff --git a/backend/tests/test_free_trial.py b/backend/tests/test_free_trial.py
index 4f42b8c5..5e67d092 100644
--- a/backend/tests/test_free_trial.py
+++ b/backend/tests/test_free_trial.py
@@ -168,13 +168,13 @@ async def test_clear_keeps_haiku_as_trial_face_unless_a_real_model_is_connected(
     s2 = AppSettings(connection_mode="free-trial", free_trial_token="ftk",
                      default_model="haiku", anthropic_api_key="sk-ant-real")
     await clear_free_trial(s2)
-    assert s2.default_model == "sonnet"
+    assert s2.default_model == "opus-5"
 
     # A connected 9Router subscription (invisible in settings) also frees haiku -> sonnet.
     monkeypatch.setattr(ft, "p_has_connected_subscription", _true)
     s3 = AppSettings(connection_mode="free-trial", free_trial_token="ftk", default_model="haiku")
     await clear_free_trial(s3)
-    assert s3.default_model == "sonnet"
+    assert s3.default_model == "opus-5"
 
     # A user who deliberately picked haiku OUTSIDE free-trial mode is left alone.
     s4 = AppSettings(connection_mode="own_key", default_model="haiku")
diff --git a/backend/tests/test_settings_migration.py b/backend/tests/test_settings_migration.py
index 53d2e36b..b16dce49 100644
--- a/backend/tests/test_settings_migration.py
+++ b/backend/tests/test_settings_migration.py
@@ -63,7 +63,7 @@ def test_minimal_old_file_fills_missing_with_defaults(settings_file):
     p_write(settings_file, {"theme": "light"})
     s = store.load_settings()
     assert s.theme == "light"
-    assert s.default_model == "sonnet"  # filled from default
+    assert s.default_model == "opus-5"  # filled from default
     assert s.auto_reveal_sub_agents is True
 
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e4608790..f5f40034 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "open-swarm",
       "version": "1.0.0",
+      "license": "AGPL-3.0-only",
       "dependencies": {
         "@codemirror/lang-html": "^6.4.11",
         "@codemirror/lang-json": "^6.0.2",
diff --git a/frontend/src/app/Main.tsx b/frontend/src/app/Main.tsx
index 33109c71..a9209932 100644
--- a/frontend/src/app/Main.tsx
+++ b/frontend/src/app/Main.tsx
@@ -289,9 +289,9 @@ const DEFAULT_MODEL_PRIORITY: string[] = [
 ];
 
 const DEFAULT_MODEL_PICKS: Record<string, string[]> = {
-  Anthropic: ['sonnet-cc', 'sonnet'],
-  OpenAI: ['gpt-5.4-mini', 'gpt-5.4'],
-  Google: ['gemini-2.5-flash', 'gemini-3-flash', 'gemini-2.5-pro'],
+  Anthropic: ['opus-5-cc', 'opus-5', 'opus-5-api', 'sonnet-5-cc', 'sonnet-5'],
+  OpenAI: ['gpt-5.6', 'gpt-5.6-api', 'gpt-5.5', 'gpt-5.5-api'],
+  Google: ['gemini-3.6-flash-api', 'gemini-3.5-flash-api', 'gemini-3.1-flash-lite'],
   'OpenSwarm Pro': ['sonnet', 'opus'],
   OpenSwarm: ['gpt-5-mini', 'claude-haiku-4.5', 'gpt-4.1'],
 };
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 2fff1fca..92c828cc 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -337,7 +337,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   // Holds the last non-empty suggestions so the docked banner's exit fade renders them instead of going blank the instant the array is cleared.
   const mcpSnapshotRef = useRef<Array<{ id: string; title: string; description: string; reason?: string }>>([]);
   const [mode, setMode] = useState('agent');
-  const [model, setModel] = useState('sonnet');
+  const [model, setModel] = useState('opus-5');
   // Workflow build chat only: brief "this model now runs the workflow" notice when the user switches models, so the run-model change isn't silent.
   const [workflowModelNotice, setWorkflowModelNotice] = useState<string | null>(null);
   const workflowModelNoticeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
diff --git a/frontend/src/app/pages/AgentChat/ChatInput/hooks/useChatInputModel.ts b/frontend/src/app/pages/AgentChat/ChatInput/hooks/useChatInputModel.ts
index f08b3afd..796a9845 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/hooks/useChatInputModel.ts
+++ b/frontend/src/app/pages/AgentChat/ChatInput/hooks/useChatInputModel.ts
@@ -3,6 +3,7 @@ import { useAppSelector } from '@/shared/hooks';
 import { sortModelsForPicker } from '../model-picker/modelPicker';
 
 const FALLBACK_MODELS = [
+  { value: 'opus-5', label: 'Claude Opus 5', context_window: 1_000_000, reasoning: true },
   { value: 'sonnet', label: 'Claude Sonnet 4.6', context_window: 1_000_000, reasoning: true },
   { value: 'opus', label: 'Claude Opus 4.6', context_window: 1_000_000, reasoning: true },
   { value: 'haiku', label: 'Claude Haiku 4.5', context_window: 200_000, reasoning: true },
diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 71b80e15..32d16edd 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -84,14 +84,14 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
     const defaultThinkingLevel = useAppSelector((s) => s.settings.data.default_thinking_level);
     const settingsLoaded = useAppSelector((s) => s.settings.loaded);
     const [mode, setMode] = useState(defaultMode || 'agent');
-    const [model, setModel] = useState(defaultModel || 'sonnet');
+    const [model, setModel] = useState(defaultModel || 'opus-5');
     const [thinkingLevel, setThinkingLevel] = useState<'off' | 'low' | 'medium' | 'high' | 'auto'>(defaultThinkingLevel || 'auto');
     // Snap to the persisted Settings defaults as soon as they arrive from the backend. Without the settingsLoaded guard, the effect fires against the Redux initialState ('sonnet') before the real default has loaded, and the settingsApplied flag then locks out the real default for the rest of the session, so new chats spawn under the stale value.
     const settingsApplied = useRef(false);
     useEffect(() => {
       if (settingsLoaded && !settingsApplied.current) {
         setMode(defaultMode || 'agent');
-        setModel(defaultModel || 'sonnet');
+        setModel(defaultModel || 'opus-5');
         setThinkingLevel(defaultThinkingLevel || 'auto');
         settingsApplied.current = true;
       }
@@ -126,7 +126,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
     useEffect(() => {
       if (settingsLoaded && inputOpen && !prevInputOpen.current) {
         setMode(defaultMode || 'agent');
-        setModel(defaultModel || 'sonnet');
+        setModel(defaultModel || 'opus-5');
         setThinkingLevel(defaultThinkingLevel || 'auto');
       }
       prevInputOpen.current = inputOpen;
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index 36ac5827..d675c15c 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -44,6 +44,7 @@ let lastOpenTab: string | null = null;
 
 // Shown only in the brief window before the live model list loads from the backend. Keep the flagship current so the default-model dropdown isn't stale.
 const DEFAULT_MODEL_FALLBACK = [
+  { value: 'opus-5', label: 'Claude Opus 5' },
   { value: 'opus-4-8', label: 'Claude Opus 4.8' },
   { value: 'sonnet', label: 'Claude Sonnet 4.6' },
   { value: 'opus', label: 'Claude Opus 4.6' },
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index 88c0114d..40d5dae0 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -156,7 +156,7 @@ interface SettingsState {
 export const DEFAULT_SETTINGS: AppSettings = {
   default_system_prompt: DEFAULT_SYSTEM_PROMPT,
   default_folder: null,
-  default_model: 'sonnet',
+  default_model: 'opus-5',
   default_mode: 'agent',
   default_max_turns: null,
   default_thinking_level: 'auto',

From dd8ca444f2da14716d7b14c95ec473b3d29cc871 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 18:36:22 -0700
Subject: [PATCH 195/248] [eric] settings: left-rail nav with focused panes
 (ChatGPT style), General scroll split into
 Account/General/Appearance/Privacy/Advanced

---
 frontend/src/app/pages/Settings/Settings.tsx  |  75 +++++++++----
 .../Settings/sections/SettingsHeader.tsx      |  66 ------------
 .../pages/Settings/sections/SettingsRail.tsx  | 102 ++++++++++++++++++
 .../sections/general/DataPrivacySection.tsx   |   1 -
 .../sections/general/GeneralAdvanced.tsx      |   1 -
 .../sections/general/GeneralAgentDefaults.tsx |   1 -
 .../sections/general/GeneralInterface.tsx     |   1 -
 .../Settings/sections/general/GeneralTab.tsx  |  52 ---------
 8 files changed, 156 insertions(+), 143 deletions(-)
 delete mode 100644 frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
 create mode 100644 frontend/src/app/pages/Settings/sections/SettingsRail.tsx
 delete mode 100644 frontend/src/app/pages/Settings/sections/general/GeneralTab.tsx

diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index d675c15c..cd6f3951 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -11,12 +11,19 @@ import { onboardingBus } from '@/app/components/Onboarding/eventBus';
 import { fetchModels } from '@/shared/state/modelsSlice';
 import { fetchModes } from '@/shared/state/modesSlice';
 import { useThemeMode, useThemeAccent, useClaudeTokens } from '@/shared/styles/ThemeContext';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { X } from 'lucide-react';
 import DirectoryBrowser from '@/app/components/editor/DirectoryBrowser';
 import { CommandsContent } from '@/app/pages/Commands/Commands';
-import GeneralTab from './sections/general/GeneralTab';
+import AccountCard from './sections/subscription/AccountCard';
+import GeneralAgentDefaults from './sections/general/GeneralAgentDefaults';
+import GeneralInterface from './sections/general/GeneralInterface';
+import GeneralAdvanced from './sections/general/GeneralAdvanced';
+import DataPrivacySection from './sections/general/DataPrivacySection';
 import ModelsTab from './sections/models/ModelsTab';
 import UsageStats from './sections/usage/UsageStats';
-import SettingsHeader from './sections/SettingsHeader';
+import SettingsRail, { railLabelFor } from './sections/SettingsRail';
 import { makeSettingsStyles } from './sections/settingsStyles';
 
 // Skills/Tools moved here from the old sidebar Customization section; lazy since both pull heavy deps and Settings opens nearly every session.
@@ -92,7 +99,7 @@ const Settings: React.FC = () => {
   }, [modelsByProvider, modelsLoaded, settings.connection_mode, settings.default_model]);
 
   const initialTab = useAppSelector((s) => s.settings.initialTab);
-  const TAB_VALUES = ['general', 'models', 'skills', 'tools', 'commands', 'usage'] as const;
+  const TAB_VALUES = ['account', 'general', 'appearance', 'privacy', 'advanced', 'models', 'skills', 'tools', 'commands', 'usage'] as const;
   type SettingsTab = typeof TAB_VALUES[number];
   const isValidTab = (t: string | null | undefined): t is SettingsTab =>
     !!t && (TAB_VALUES as readonly string[]).includes(t);
@@ -242,23 +249,30 @@ const Settings: React.FC = () => {
       maxWidth={false}
       PaperProps={{
         sx: {
-          width: 780,
+          width: 880,
           height: '85vh',
           display: 'flex',
-          flexDirection: 'column',
+          flexDirection: 'row',
           bgcolor: c.bg.page,
           borderRadius: 2,
           border: `1px solid ${c.border.subtle}`,
           boxShadow: c.shadow.md,
           transition: 'none',
+          overflow: 'hidden',
         },
       }}
     >
-      <SettingsHeader
-        activeTab={activeTab}
-        onTabChange={(v) => setActiveTab(v)}
-        onClose={handleRequestClose}
-      />
+      <SettingsRail activeTab={activeTab} onTabChange={(v) => setActiveTab(v as SettingsTab)} />
+
+      <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 1.75, pb: 0.75, flexShrink: 0 }}>
+        <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>
+          {railLabelFor(activeTab)}
+        </Typography>
+        <IconButton onClick={handleRequestClose} size="small" data-onboarding="settings-close-button" sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}>
+          <X size={18} />
+        </IconButton>
+      </Box>
 
       <DialogContent sx={{
         px: 3,
@@ -271,17 +285,35 @@ const Settings: React.FC = () => {
         scrollbarWidth: 'thin',
         scrollbarColor: `${c.border.medium} transparent`,
       }}>
-      {activeTab === 'general' ? (
-        <GeneralTab
-          form={form}
-          setForm={setForm}
-          styles={styles}
-          setBrowseOpen={setBrowseOpen}
-          modelOptions={modelOptions}
-          modesList={modesList}
-          providerColors={PROVIDER_COLORS}
-          openswarmGradient={OPENSWARM_GRADIENT}
-        />
+      {activeTab === 'account' ? (
+        <Box sx={{ pt: 1.5, pb: 2, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
+          <AccountCard />
+        </Box>
+      ) : activeTab === 'general' ? (
+        <Box sx={{ pt: 0.5, pb: 2, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
+          <GeneralAgentDefaults
+            form={form}
+            setForm={setForm}
+            styles={styles}
+            setBrowseOpen={setBrowseOpen}
+            modelOptions={modelOptions}
+            modesList={modesList}
+            providerColors={PROVIDER_COLORS}
+            openswarmGradient={OPENSWARM_GRADIENT}
+          />
+        </Box>
+      ) : activeTab === 'appearance' ? (
+        <Box sx={{ pt: 0.5, pb: 2, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
+          <GeneralInterface form={form} setForm={setForm} styles={styles} />
+        </Box>
+      ) : activeTab === 'privacy' ? (
+        <Box sx={{ pt: 0.5, pb: 2, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
+          <DataPrivacySection styles={styles} />
+        </Box>
+      ) : activeTab === 'advanced' ? (
+        <Box sx={{ pt: 0.5, pb: 2, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
+          <GeneralAdvanced form={form} setForm={setForm} styles={styles} />
+        </Box>
       ) : activeTab === 'models' ? (
         <ModelsTab
           form={form}
@@ -312,6 +344,7 @@ const Settings: React.FC = () => {
       </Box>
       )}
       </DialogContent>
+      </Box>
 
       <DirectoryBrowser
         open={browseOpen}
diff --git a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx b/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
deleted file mode 100644
index e2515b97..00000000
--- a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import DialogTitle from '@mui/material/DialogTitle';
-import { X } from 'lucide-react';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-
-const SettingsHeader: React.FC<{
-  activeTab: string;
-  onTabChange: (v: any) => void;
-  onClose: () => void;
-}> = ({ activeTab, onTabChange, onClose }) => {
-  const c = useClaudeTokens();
-  return (
-    <DialogTitle
-      sx={{
-        px: 3,
-        py: 0,
-      }}
-    >
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pt: 1.5, pb: 0.5 }}>
-        <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>
-          Settings
-        </Typography>
-        <IconButton onClick={onClose} size="small" data-onboarding="settings-close-button" sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}>
-          <X size={18} />
-        </IconButton>
-      </Box>
-      <Tabs
-        value={activeTab}
-        onChange={(_, v) => onTabChange(v)}
-        sx={{
-          minHeight: 34,
-          pb: 1,
-          // Pill segmented control: filled active pill, no underline indicator.
-          '& .MuiTabs-indicator': { display: 'none' },
-          '& .MuiTab-root': {
-            minHeight: 30,
-            textTransform: 'none',
-            fontSize: '0.875rem',
-            fontWeight: 500,
-            color: c.text.muted,
-            px: 1.75,
-            mr: 0.5,
-            borderRadius: '999px',
-            transition: 'background-color 0.12s, color 0.12s',
-            '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}0A` },
-            '&.Mui-selected': { color: c.text.primary, fontWeight: 600, bgcolor: `${c.accent.primary}26` },
-          },
-        }}
-      >
-        <Tab label="General" value="general" disableRipple />
-        <Tab label="Models" value="models" disableRipple data-onboarding="settings-models-tab" />
-        <Tab label="Skills" value="skills" disableRipple />
-        <Tab label="Tools" value="tools" disableRipple />
-        <Tab label="Commands" value="commands" disableRipple />
-        <Tab label="Usage" value="usage" disableRipple />
-      </Tabs>
-    </DialogTitle>
-  );
-};
-
-export default SettingsHeader;
diff --git a/frontend/src/app/pages/Settings/sections/SettingsRail.tsx b/frontend/src/app/pages/Settings/sections/SettingsRail.tsx
new file mode 100644
index 00000000..e494e33d
--- /dev/null
+++ b/frontend/src/app/pages/Settings/sections/SettingsRail.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { User, Settings2, Palette, ShieldCheck, Wrench, Boxes, Sparkles, Hammer, SquareSlash, BarChart3 } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+// ChatGPT/Apple-style settings nav: a left rail of short, focused sections instead of one giant
+// General scroll. Grouped so the eye lands (account, then app-wide, then capabilities).
+export interface RailSection {
+  value: string;
+  label: string;
+  Icon: LucideIcon;
+}
+
+interface RailGroup {
+  header: string | null;
+  sections: RailSection[];
+}
+
+export const RAIL_GROUPS: RailGroup[] = [
+  { header: null, sections: [
+    { value: 'account', label: 'Account', Icon: User },
+  ] },
+  { header: 'App', sections: [
+    { value: 'general', label: 'General', Icon: Settings2 },
+    { value: 'appearance', label: 'Appearance', Icon: Palette },
+    { value: 'privacy', label: 'Privacy', Icon: ShieldCheck },
+    { value: 'advanced', label: 'Advanced', Icon: Wrench },
+  ] },
+  { header: 'Capabilities', sections: [
+    { value: 'models', label: 'Models', Icon: Boxes },
+    { value: 'skills', label: 'Skills', Icon: Sparkles },
+    { value: 'tools', label: 'Tools', Icon: Hammer },
+    { value: 'commands', label: 'Commands', Icon: SquareSlash },
+    { value: 'usage', label: 'Usage', Icon: BarChart3 },
+  ] },
+];
+
+export function railLabelFor(value: string): string {
+  for (const g of RAIL_GROUPS) {
+    const hit = g.sections.find((s) => s.value === value);
+    if (hit) return hit.label;
+  }
+  return 'Settings';
+}
+
+const SettingsRail: React.FC<{
+  activeTab: string;
+  onTabChange: (v: string) => void;
+}> = ({ activeTab, onTabChange }) => {
+  const c = useClaudeTokens();
+  return (
+    <Box sx={{
+      width: 192, flexShrink: 0, display: 'flex', flexDirection: 'column',
+      borderRight: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface,
+      px: 1.25, py: 1.75, overflowY: 'auto',
+    }}>
+      <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: c.font.size.md, px: 1, pb: 1 }}>
+        Settings
+      </Typography>
+      {RAIL_GROUPS.map((group) => (
+        <Box key={group.header ?? 'top'} sx={{ mb: 0.5 }}>
+          {group.header && (
+            <Typography sx={{
+              color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 700,
+              letterSpacing: '0.07em', textTransform: 'uppercase', px: 1, pt: 1.5, pb: 0.5,
+            }}>
+              {group.header}
+            </Typography>
+          )}
+          {group.sections.map((s) => {
+            const selected = activeTab === s.value;
+            return (
+              <Box
+                key={s.value}
+                component="button"
+                onClick={() => onTabChange(s.value)}
+                data-onboarding={s.value === 'models' ? 'settings-models-tab' : undefined}
+                sx={{
+                  display: 'flex', alignItems: 'center', gap: 1.25, width: '100%',
+                  px: 1, py: 0.75, mb: '2px', border: 'none', borderRadius: '8px',
+                  bgcolor: selected ? `${c.accent.primary}1F` : 'transparent',
+                  color: selected ? c.text.primary : c.text.secondary,
+                  fontFamily: 'inherit', fontSize: c.font.size.base, fontWeight: selected ? 600 : 500,
+                  cursor: 'pointer', textAlign: 'left',
+                  transition: 'background-color 0.12s, color 0.12s',
+                  '&:hover': selected ? {} : { bgcolor: `${c.text.tertiary}0F`, color: c.text.primary },
+                }}
+              >
+                <s.Icon size={15} style={{ flexShrink: 0, opacity: selected ? 1 : 0.75 }} />
+                {s.label}
+              </Box>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default SettingsRail;
diff --git a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
index 70a742ef..ea416943 100644
--- a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
@@ -112,7 +112,6 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
 
   return (
     <Box>
-      <Typography sx={{ ...sectionSx, mt: 3 }}>Data &amp; Privacy</Typography>
 
       <Box sx={{ ...rowSx, borderBottom: `1px solid ${c.border.subtle}` }}>
         <Box>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
index b731ce06..104b3fa1 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
@@ -35,7 +35,6 @@ const GeneralAdvanced: React.FC<{
 
   return (
     <>
-      <Typography sx={{ ...sectionSx, mt: 3 }}>Advanced</Typography>
 
       <Box sx={inlineRowSx} {...settingSelectAttrs('dev_mode', 'Developer mode', 'Advanced', 'Show transport details, env vars, and technical metadata throughout the app.')}>
         <Box sx={{ mr: 3 }}>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
index 9e8b0ef7..8ad13b64 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
@@ -33,7 +33,6 @@ const GeneralAgentDefaults: React.FC<{
 
   return (
     <>
-      <Typography sx={sectionSx}>Agent Defaults</Typography>
 
       <Box sx={rowSx} {...settingSelectAttrs('default_system_prompt', 'System prompt', 'Agent Defaults', 'Prepended to every agent session before mode-specific instructions.')}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 52132607..564984a0 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -28,7 +28,6 @@ const GeneralInterface: React.FC<{
 
   return (
     <>
-      <Typography sx={{ ...sectionSx, mt: 3 }}>Interface</Typography>
 
       <Box sx={inlineRowSx} {...settingSelectAttrs('theme', 'Theme', 'Interface', 'Application color scheme.')}>
         <Box sx={{ mr: 3 }}>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralTab.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralTab.tsx
deleted file mode 100644
index 4640c64e..00000000
--- a/frontend/src/app/pages/Settings/sections/general/GeneralTab.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import { AppSettings } from '@/shared/state/settingsSlice';
-import AccountCard from '../subscription/AccountCard';
-import GeneralAgentDefaults from './GeneralAgentDefaults';
-import GeneralInterface from './GeneralInterface';
-import GeneralAdvanced from './GeneralAdvanced';
-import DataPrivacySection from './DataPrivacySection';
-import type { SettingsStyles } from '../settingsStyles';
-
-type ModelOption = { value: string; label: string };
-
-const GeneralTab: React.FC<{
-  form: AppSettings;
-  setForm: React.Dispatch<React.SetStateAction<AppSettings>>;
-  styles: SettingsStyles;
-  setBrowseOpen: (v: boolean) => void;
-  modelOptions: { grouped: Record<string, ModelOption[]>; flat: Array<ModelOption & { provider: string }> };
-  modesList: Array<{ id: string; name: string }>;
-  providerColors: Record<string, string>;
-  openswarmGradient: string;
-}> = ({ form, setForm, styles, setBrowseOpen, modelOptions, modesList, providerColors, openswarmGradient }) => {
-  const { sectionSx } = styles;
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', pt: 2.5, pb: 1, animation: 'fadeIn 0.2s ease', '@keyframes fadeIn': { from: { opacity: 0 }, to: { opacity: 1 } } }}>
-
-      <Typography sx={sectionSx}>Account</Typography>
-      <AccountCard />
-
-      <GeneralAgentDefaults
-        form={form}
-        setForm={setForm}
-        styles={styles}
-        setBrowseOpen={setBrowseOpen}
-        modelOptions={modelOptions}
-        modesList={modesList}
-        providerColors={providerColors}
-        openswarmGradient={openswarmGradient}
-      />
-
-      <GeneralInterface form={form} setForm={setForm} styles={styles} />
-
-      <GeneralAdvanced form={form} setForm={setForm} styles={styles} />
-
-      <DataPrivacySection styles={styles} />
-
-    </Box>
-  );
-};
-
-export default GeneralTab;

From a2c3cc22ab19b06fdadfc52cffa2e021f1e57cb7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 18:51:59 -0700
Subject: [PATCH 196/248] [eric] onboarding: sidebar can't cover the flow,
 managed pro lane isn't a user connection, aux-less prep re-runs on real
 connect; tools pane header slimmed

---
 backend/apps/onboarding/models.py                |  2 ++
 backend/apps/onboarding/prep.py                  |  1 +
 frontend/src/app/components/Layout/AppShell.tsx  |  8 +++++---
 .../components/OnboardingV3/OnboardingV3Root.tsx |  2 +-
 .../components/OnboardingV3/onboardingV3Api.ts   |  1 +
 .../OnboardingV3/useOnboardingV3Pipeline.ts      | 12 ++++++++++--
 frontend/src/app/pages/Tools/Tools.tsx           | 16 +++++++---------
 frontend/src/shared/state/subscriptionsSlice.ts  |  6 ++++--
 8 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 68f1268d..5366ca55 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -75,3 +75,5 @@ class PrepResponse(BaseModel):
     automations: List[PersonalizedAutomation] = Field(default_factory=list)
     # The hero's two-level menu (4 categories x 4 tailored starters); None only if prep never ran.
     menu: Optional[PersonalizedMenu] = None
+    # False = scan-grounded fallback (no aux lane at call time); lets the pipeline re-run prep once a real connect lands.
+    used_llm: bool = False
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index 92ad21a9..a3cc32b6 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -390,6 +390,7 @@ async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepRespons
         parsed = parse_prep(safe_resp_text(resp))
         if parsed is not None:
             parsed.menu = await menu_task
+            parsed.used_llm = True
             return parsed
     except Exception:
         pass
diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index adf3ff9f..7e01bb2f 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -146,6 +146,8 @@ const AppShell: React.FC = () => {
   const modelsLoaded = useAppSelector((s) => s.models.loaded);
   // "Connected" = the user's OWN model (key/sub/pro/custom), NOT a non-empty /models list: the free-trial Haiku is always in that list now, so a byProvider-length check would falsely read as connected and hide the out-of-runs banner.
   const hasModelConnected = useAppSelector(selectHasModelConnected);
+  // While onboarding owns the window, the floating sidebar (and its hover-peek strip) must not exist; both out-z the overlay.
+  const v3FlowActive = useAppSelector((st) => st.onboardingV3.flowActive);
   // During an active free trial the user CAN run things, so a red "no model connected" warning is misleading and discouraging (it sits right above the working starter chips). The trial flips connection_mode back to own_key the moment it's spent, so this banner returns then, landing the connect-a-model nudge after the win, not before it.
   const freeTrialActive = useAppSelector((s) => {
     const d = s.settings.data as any;
@@ -701,7 +703,7 @@ const AppShell: React.FC = () => {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary }}>
-      {sidebarAway && !sidePeek && (
+      {sidebarAway && !sidePeek && !v3FlowActive && (
         <Box onMouseEnter={() => { cancelPeekClose(); setSidePeek(true); }} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
       )}
       {/* Top bar dropped (Arc/Zen): a zero-height anchor left only to float the agent-activity island at top-center; the island renders nothing when idle. */}
@@ -933,9 +935,9 @@ const AppShell: React.FC = () => {
             position: 'fixed', top: 0, left: 0, bottom: 0, zIndex: 1000002,
             borderRadius: '0 14px 14px 0', overflow: 'hidden',
             boxShadow: '8px 0 32px rgba(0,0,0,0.28)', borderRight: `1px solid ${c.border.medium}`,
-            transform: sidePeek ? 'translateX(0)' : 'translateX(-118%)',
+            transform: sidePeek && !v3FlowActive ? 'translateX(0)' : 'translateX(-118%)',
             transition: 'transform 240ms cubic-bezier(0.22,1,0.36,1)',
-            pointerEvents: sidePeek ? 'auto' : 'none',
+            pointerEvents: sidePeek && !v3FlowActive ? 'auto' : 'none',
           } : fsActive ? {
             // Fullscreen with the sidebar pinned: the panel sits beside a full-bleed surface, so its
             // dashboard-facing right corners curve like a pill; normal docked mode stays square.
diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index 5c8df322..ae43cf39 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -130,7 +130,7 @@ const OnboardingV3Root: React.FC = () => {
     kickIdentity();
     kickScan(true);
     if (connectedProvider) kickUsageRead(connectedProvider, true);
-    kickPrep(picks);
+    kickPrep(picks, true);
   }, [kickIdentity, kickScan, kickUsageRead, kickPrep, connectedProvider, picks]);
 
   // Backstop: onConnected fires prep for subscription/api-key connects; this covers any path where it
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 188444d0..3df7bdcf 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -38,6 +38,7 @@ export interface PrepResponse {
   browser_reason: string;
   automations: PersonalizedAutomation[];
   menu?: PersonalizedMenu | null;
+  used_llm?: boolean;
 }
 
 export async function fetchIdentity(): Promise<ProviderIdentity[]> {
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index a5319492..c6feec93 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -61,8 +61,16 @@ export function useOnboardingV3Pipeline() {
       : Promise.resolve(null);
   }, []);
 
-  const kickPrep = useCallback((pickedApps: string[]) => {
-    if (prepRef.current) return;
+  const kickPrep = useCallback((pickedApps: string[], rerunIfGrounded = false) => {
+    // A real connect landing AFTER an aux-less prep re-runs it once, so a slow OAuth never locks the
+    // reveal to the scan-grounded template (the prep raced the connect and had no model to call).
+    if (prepRef.current) {
+      if (!rerunIfGrounded) return;
+      const prev = prepReadyRef.current;
+      if (prev === null || prev.used_llm) return;
+      prepRef.current = null;
+      prepReadyRef.current = null;
+    }
     const scanPromise = scanRef.current ?? Promise.resolve(null);
     const usagePromise = usageReadRef.current ?? Promise.resolve();
     prepRef.current = Promise.all([scanPromise, usagePromise])
diff --git a/frontend/src/app/pages/Tools/Tools.tsx b/frontend/src/app/pages/Tools/Tools.tsx
index 26e50281..8ed19c1a 100644
--- a/frontend/src/app/pages/Tools/Tools.tsx
+++ b/frontend/src/app/pages/Tools/Tools.tsx
@@ -104,19 +104,17 @@ const Tools: React.FC = () => {
   }, [regServersRaw, a.regSource, CURATED_MCP_NAMES]);
 
   return (
-    <Box sx={{ p: 3, height: '100%', overflow: 'auto' }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
-        <Box>
-          <Typography variant="h5" sx={{ color: c.text.primary, fontWeight: 700, mb: 0.5 }}>Tool Library</Typography>
-          <Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem' }}>Define and manage custom tools for your Claude Code agents.</Typography>
-        </Box>
+    <Box sx={{ px: 3, pt: 1, pb: 3, height: '100%', overflow: 'auto' }}>
+      {/* The pane header already says "Tools"; a slim action row beats a second page title. */}
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', mb: 1.5 }}>
         <Box>
           <Button
+            size="small"
             variant="contained"
-            startIcon={<AddIcon />}
-            endIcon={<KeyboardArrowDownIcon sx={{ fontSize: 18 }} />}
+            startIcon={<AddIcon sx={{ fontSize: 16 }} />}
+            endIcon={<KeyboardArrowDownIcon sx={{ fontSize: 16 }} />}
             onClick={handleMenuOpen}
-            sx={{ bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed }, textTransform: 'none', borderRadius: 2 }}
+            sx={{ bgcolor: c.accent.primary, '&:hover': { bgcolor: c.accent.pressed }, textTransform: 'none', borderRadius: 2, fontSize: '0.8125rem' }}
           >
             New Tool
           </Button>
diff --git a/frontend/src/shared/state/subscriptionsSlice.ts b/frontend/src/shared/state/subscriptionsSlice.ts
index 388566ca..25fc5a58 100644
--- a/frontend/src/shared/state/subscriptionsSlice.ts
+++ b/frontend/src/shared/state/subscriptionsSlice.ts
@@ -117,8 +117,10 @@ export function selectSubscriptionConnections(
 ): SubscriptionConnection[] {
   const providers = state.subscriptions.status?.providers;
   if (!providers) return EMPTY_CONNECTIONS;
-  if (Array.isArray(providers)) return providers;
-  return providers.connections ?? EMPTY_CONNECTIONS;
+  const rows = Array.isArray(providers) ? providers : (providers.connections ?? EMPTY_CONNECTIONS);
+  // The free-trial/Pro lane is an OpenSwarm-managed router row, not a connection the USER made; counting it made a fresh trial look "connected" (dead Connect-beat rows, premature onConnected, phantom green rings).
+  const filtered = rows.filter((p) => !/\(OpenSwarm-managed\)/.test(p.name ?? ''));
+  return filtered.length === rows.length ? rows : filtered;
 }
 
 export function hasAnyActiveSubscription(state: WithSubscriptions): boolean {

From ffa91b8488698a14f2cfd48457dd3d7632f3cf39 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 19:02:27 -0700
Subject: [PATCH 197/248] [eric] desktop: Arc/Zen fullscreen grammar, shared
 themed ground + borderless pinned sidebar + floating rounded content, dot
 grid canvas-only

---
 .../src/app/components/Layout/AppShell.tsx    | 21 ++++++++++++-------
 .../Dashboard/canvas/DashboardCanvas.tsx      |  2 ++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 7e01bb2f..3939ebd3 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -56,7 +56,7 @@ import { removeViewCardCleanly } from '@/shared/viewTeardown';
 import { setInstalling } from '@/shared/state/updateSlice';
 import { findBrowserByWebContentsId } from '@/shared/browserRegistry';
 import { byPreviewRecency } from '@/shared/previewOrder';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import { useClaudeTokens, useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
 
 const SIDEBAR_MIN = 160;
@@ -148,6 +148,11 @@ const AppShell: React.FC = () => {
   const hasModelConnected = useAppSelector(selectHasModelConnected);
   // While onboarding owns the window, the floating sidebar (and its hover-peek strip) must not exist; both out-z the overlay.
   const v3FlowActive = useAppSelector((st) => st.onboardingV3.flowActive);
+  // Arc/Zen fullscreen ground: ONE themed wash across the whole window (sidebar sits on it borderless,
+  // the content floats as a rounded card). Mirrors the DashboardCanvas wash formula.
+  const { accent: themeAccent, gradient: themeGradient } = useThemeAccent();
+  const { washOpacity: themeWashOpacity } = useThemeWash();
+  const fsWashStops = themeGradient ?? (themeAccent ? [themeAccent] : null);
   // During an active free trial the user CAN run things, so a red "no model connected" warning is misleading and discouraging (it sits right above the working starter chips). The trial flips connection_mode back to own_key the moment it's spent, so this banner returns then, landing the connect-a-model nudge after the win, not before it.
   const freeTrialActive = useAppSelector((s) => {
     const d = s.settings.data as any;
@@ -702,7 +707,10 @@ const AppShell: React.FC = () => {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary }}>
+    <Box sx={{
+      display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary,
+      ...(fsActive && fsWashStops ? { backgroundImage: `linear-gradient(115deg, ${fsWashStops.map((hex, i) => `${hex}${Math.round(themeWashOpacity * 255).toString(16).padStart(2, '0')} ${fsWashStops.length > 1 ? (i / (fsWashStops.length - 1)) * 100 : 100}%`).join(', ')})` } : {}),
+    }}>
       {sidebarAway && !sidePeek && !v3FlowActive && (
         <Box onMouseEnter={() => { cancelPeekClose(); setSidePeek(true); }} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
       )}
@@ -939,11 +947,10 @@ const AppShell: React.FC = () => {
             transition: 'transform 240ms cubic-bezier(0.22,1,0.36,1)',
             pointerEvents: sidePeek && !v3FlowActive ? 'auto' : 'none',
           } : fsActive ? {
-            // Fullscreen with the sidebar pinned: the panel sits beside a full-bleed surface, so its
-            // dashboard-facing right corners curve like a pill; normal docked mode stays square.
-            borderRadius: '0 14px 14px 0',
-            overflow: 'hidden',
-            borderRight: `1px solid ${c.border.subtle}`,
+            // Fullscreen with the sidebar pinned = Arc: no slab, no seam line, the sidebar sits
+            // directly on the shared window wash and the content floats beside it as a rounded card.
+            bgcolor: 'transparent',
+            border: 'none',
           } : {}),
         }}
       >
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index e6765ad8..53fc4ca2 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -364,6 +364,8 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
             position: 'absolute',
             inset: 0,
             pointerEvents: 'none',
+            // Arc fullscreen: the float sits on a clean themed ground, the dot texture is canvas-only.
+            display: anyFullscreen ? 'none' : undefined,
             backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(
               `<svg xmlns='http://www.w3.org/2000/svg' width='${dotSpacing}' height='${dotSpacing}'><circle cx='${dotSpacing / 2}' cy='${dotSpacing / 2}' r='${dotSize}' fill='${c.border.medium}'/></svg>`,
             )}")`,

From d42fd08d8dbb83a1c14e81613d5ed27bd2307c71 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 19:25:26 -0700
Subject: [PATCH 198/248] [eric] desktop: sidebar retired for a macOS Spaces
 top strip; chat header pops above the card, model + elapsed dropped

---
 .../src/app/components/Layout/AppShell.tsx    |  11 +-
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  98 +++++++----------
 .../pages/Dashboard/desktop/SpacesStrip.tsx   | 102 ++++++++++++++++++
 3 files changed, 145 insertions(+), 66 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 3939ebd3..d03e45c5 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -57,6 +57,7 @@ import { setInstalling } from '@/shared/state/updateSlice';
 import { findBrowserByWebContentsId } from '@/shared/browserRegistry';
 import { byPreviewRecency } from '@/shared/previewOrder';
 import { useClaudeTokens, useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
+import SpacesStrip from '@/app/pages/Dashboard/desktop/SpacesStrip';
 import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
 
 const SIDEBAR_MIN = 160;
@@ -711,9 +712,10 @@ const AppShell: React.FC = () => {
       display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary,
       ...(fsActive && fsWashStops ? { backgroundImage: `linear-gradient(115deg, ${fsWashStops.map((hex, i) => `${hex}${Math.round(themeWashOpacity * 255).toString(16).padStart(2, '0')} ${fsWashStops.length > 1 ? (i / (fsWashStops.length - 1)) * 100 : 100}%`).join(', ')})` } : {}),
     }}>
-      {sidebarAway && !sidePeek && !v3FlowActive && (
-        <Box onMouseEnter={() => { cancelPeekClose(); setSidePeek(true); }} sx={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 14, zIndex: 2147483000, pointerEvents: 'auto' }} />
-      )}
+      {/* Sidebar retired: dashboards switch via the macOS-Spaces top strip; a slim band below the
+          spaces hot zone keeps the frameless window draggable (the sidebar's drag strip is gone). */}
+      {isDashboardViewActive && !v3FlowActive && <SpacesStrip />}
+      <Box sx={{ position: 'fixed', top: 3, left: 260, right: 0, height: 22, zIndex: 5, WebkitAppRegion: 'drag' }} />
       {/* Top bar dropped (Arc/Zen): a zero-height anchor left only to float the agent-activity island at top-center; the island renders nothing when idle. */}
       <Box
         sx={{
@@ -931,7 +933,8 @@ const AppShell: React.FC = () => {
           width: sidebarWidth,
           flexShrink: 0,
           bgcolor: c.bg.secondary,
-          display: 'flex',
+          // RETIRED: the Spaces strip owns dashboard switching now; excising the full sidebar tree is a follow-up.
+          display: 'none',
           flexDirection: 'column',
           // Zen/Arc compact mode: a detached, rounded panel that SLIDES in and out from the left edge
           // (sidePeek drives the transform both ways; it stays mounted so leaving glides it away, not vanish).
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 96433575..e66e8383 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -52,7 +52,6 @@ import { useStreamingMessage } from '@/shared/state/streamingSlice';
 import { isCanvasInteractionActive, onCanvasInteractionEnd } from '@/shared/canvasInteractionState';
 import { setCardSidecar } from '@/shared/state/workflowsSlice';
 import { openWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
-import { getAgentWorkTime, fmtSeconds } from '@/shared/agentWorkTime';
 import { friendlyStatusLabel } from '@/shared/statusLabel';
 
 /** Extract up to 3 substantive user-prompt steps to seed a workflow. */
@@ -178,20 +177,6 @@ const GoogleServiceIcon: React.FC<{ service: string; size?: number }> = ({ servi
   return null;
 };
 
-/** Self-ticking elapsed-time leaf; owns its 1Hz interval so AgentCard doesn't re-render every second. */
-const ElapsedTimer: React.FC<{
-  messages: Array<{ role: string; timestamp: string; elapsed_ms?: number; hidden?: boolean }>;
-  status: string;
-}> = React.memo(({ messages, status }) => {
-  const [, setTick] = React.useState(0);
-  React.useEffect(() => {
-    if (status !== 'running' && status !== 'waiting_approval') return;
-    const id = setInterval(() => setTick((t) => (t + 1) & 0xffff), 1000);
-    return () => clearInterval(id);
-  }, [status]);
-  return <>{fmtSeconds(getAgentWorkTime(messages, status).last)}</>;
-});
-
 function summarizeToolInput(toolName: string, toolInput: Record<string, any>): string {
   const mcp = parseMcpToolName(toolName);
   if (mcp.isMcp) {
@@ -321,7 +306,6 @@ const AgentCard: React.FC<Props> = ({
   const dispatch = useAppDispatch();
   const isDashboardActive = useDashboardActive();
   const hasApiKey = !!useAppSelector((s) => s.settings.data.anthropic_api_key);
-  const modelsByProvider = useAppSelector((s) => s.models.byProvider);
   const expandedSessionIds = useAppSelector((s) => s.agents.expandedSessionIds);
   const workflowSuggestion = useMemo(() => findWorkflowSuggestion(session), [session]);
   // Suppress the convert-suggestion glow when this chat is already entangled with a workflow. Two cases: (a) The session is one of a workflow's runner sessions, OR (b) The session is the source the workflow was originally derived from. Either way a fresh convert would just clone the workflow, which is confusing identity collapse.
@@ -363,20 +347,6 @@ const AgentCard: React.FC<Props> = ({
     hasUserPrompt &&
     (messageCount >= 2 || isConvertBlockedByTurn || !!workflowSuggestion);
   const canConvertToWorkflow = showConvertToWorkflow && !isConvertBlockedByTurn;
-  // Curated picker label with a tidy fallback for unknowns.
-  const friendlyModelLabel = useMemo(() => {
-    const value = session.model;
-    if (!value) return '';
-    for (const models of Object.values(modelsByProvider)) {
-      for (const m of models as any[]) {
-        if (m.value === value) return m.label;
-      }
-    }
-    let s = String(value);
-    if (s.startsWith('or:')) s = s.slice(3);
-    if (s.includes('/')) s = s.split('/').pop() || s;
-    return s;
-  }, [session.model, modelsByProvider]);
   const scrollOverlayRef = useOverlayScrollPassthrough(isSelected && !expanded);
 
   const suggestionPulseRef = useRef('');
@@ -687,8 +657,6 @@ const AgentCard: React.FC<Props> = ({
   };
 
 
-  // ElapsedTimer owns its own 1Hz tick so AgentCard doesn't re-render every second.
-
   const lastMessage = session.messages[session.messages.length - 1];
   // Subscribe to this card's own streaming entry so per-character mutations don't churn other cards.
   const streamingMessage = useStreamingMessage(session.id);
@@ -1026,24 +994,42 @@ const AgentCard: React.FC<Props> = ({
         onPointerUp={handleDragPointerUp}
         sx={{
           ...(expanded
-            ? {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                zIndex: 17,
-                px: 2,
-                pt: 1.5,
-                pb: 2,
-                opacity: 0,
-                transition: 'opacity 0.15s ease',
-                '&:hover': { opacity: 1 },
-                background: 'linear-gradient(to bottom, rgba(20,12,28,0.92) 0%, rgba(20,12,28,0.65) 60%, rgba(20,12,28,0) 100%)',
-                borderRadius: '20px 20px 0 0',
-                // Header text must read over the dark scrim regardless of app theme.
-                '& .MuiTypography-root': { color: 'rgba(255,255,255,0.92)' },
-                '& input': { color: 'rgba(255,255,255,0.92)' },
-              }
+            ? tiledStyle
+              ? {
+                  // Fullscreen/tiled: no room above the card, keep the inside hover scrim.
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  zIndex: 17,
+                  px: 2,
+                  pt: 1.5,
+                  pb: 2,
+                  opacity: 0,
+                  transition: 'opacity 0.15s ease',
+                  '&:hover': { opacity: 1 },
+                  background: 'linear-gradient(to bottom, rgba(20,12,28,0.92) 0%, rgba(20,12,28,0.65) 60%, rgba(20,12,28,0) 100%)',
+                  borderRadius: '12px 12px 0 0',
+                  // Header text must read over the dark scrim regardless of app theme.
+                  '& .MuiTypography-root': { color: 'rgba(255,255,255,0.92)' },
+                  '& input': { color: 'rgba(255,255,255,0.92)' },
+                }
+              : {
+                  // On the canvas the title + lights pop up ABOVE the card, same as the minimized pill.
+                  position: 'absolute',
+                  bottom: '100%',
+                  top: 'auto',
+                  left: 0,
+                  right: 0,
+                  zIndex: 17,
+                  px: 0.25,
+                  pb: 0.75,
+                  opacity: 0,
+                  pointerEvents: 'none',
+                  transition: 'opacity 0.15s ease, transform 0.15s ease',
+                  transform: 'translateY(4px)',
+                  '.osw-card:hover &': { opacity: 1, pointerEvents: 'auto', transform: 'none' },
+                }
             : {
                 position: 'relative',
                 zIndex: 16,
@@ -1110,12 +1096,6 @@ const AgentCard: React.FC<Props> = ({
                 </Typography>
               </Box>
             )}
-            {/* Welcome chat has no status to show, so name the model instead, otherwise the header reads bare. */}
-            {session.is_welcome_draft && friendlyModelLabel && (
-              <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.text.tertiary, whiteSpace: 'nowrap', flexShrink: 0 }}>
-                {friendlyModelLabel}
-              </Typography>
-            )}
             {/* Calm, zero-click signal: the agent recalled or built up memory of
                 this site, so the user feels it getting smarter on its own. */}
             <Fade in={session.memory_recalled || session.memory_learned} timeout={{ enter: 200, exit: 220 }} unmountOnExit>
@@ -1154,12 +1134,6 @@ const AgentCard: React.FC<Props> = ({
           }}
         >
           <Box sx={{ display: 'flex', gap: 1.5, minWidth: 0, overflow: 'hidden' }}>
-            <Typography variant="caption" sx={{ color: c.text.tertiary, whiteSpace: 'nowrap' }}>
-              {friendlyModelLabel}
-            </Typography>
-            <Typography variant="caption" sx={{ color: c.text.tertiary, whiteSpace: 'nowrap' }}>
-              <ElapsedTimer messages={session.messages} status={session.status} />
-            </Typography>
             {session.cost_usd > 0 && hasApiKey && (
               <Typography variant="caption" sx={{ color: c.accent.primary, whiteSpace: 'nowrap' }}>
                 ${session.cost_usd.toFixed(4)}
diff --git a/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx b/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
new file mode 100644
index 00000000..89f4203c
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { Plus } from 'lucide-react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '@/shared/hooks';
+import { createDashboard } from '@/shared/state/dashboardsSlice';
+
+// macOS Spaces, one for one: rest the cursor on the very top edge and a translucent bar of
+// dashboard "spaces" slides down (Mission Control's spaces row), click switches, + adds one.
+// This replaces the sidebar as the dashboard switcher; tools live in the dock, search on Cmd+K.
+const HOT_ZONE_PX = 3;
+const CLOSE_DELAY_MS = 280;
+
+const SpacesStrip: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const dashboards = useAppSelector((s) => s.dashboards.items);
+  const [open, setOpen] = React.useState(false);
+  const closeTimer = React.useRef<number | null>(null);
+
+  const activeId = React.useMemo(() => {
+    const m = location.pathname.match(/\/dashboard\/([^/]+)/);
+    return m ? m[1] : null;
+  }, [location.pathname]);
+
+  const list = React.useMemo(
+    () => Object.values(dashboards).sort((a, b) => (a.created_at < b.created_at ? -1 : 1)),
+    [dashboards],
+  );
+
+  const hold = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); };
+  const reveal = (): void => { hold(); setOpen(true); };
+  const scheduleClose = (): void => { hold(); closeTimer.current = window.setTimeout(() => setOpen(false), CLOSE_DELAY_MS); };
+
+  const addSpace = (): void => {
+    void dispatch(createDashboard('Untitled Dashboard')).then((result) => {
+      if (createDashboard.fulfilled.match(result)) navigate(`/dashboard/${(result.payload as { id: string }).id}`);
+    });
+  };
+
+  return (
+    <>
+      <Box onMouseEnter={reveal} sx={{ position: 'fixed', top: 0, left: 0, right: 0, height: HOT_ZONE_PX, zIndex: 99998 }} />
+      <Box
+        onMouseEnter={reveal}
+        onMouseLeave={scheduleClose}
+        sx={{
+          position: 'fixed', top: 0, left: 0, right: 0, zIndex: 99999,
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1,
+          px: 2, py: 1.25,
+          background: 'rgba(24,22,28,0.42)',
+          backdropFilter: 'blur(26px) saturate(150%)',
+          WebkitBackdropFilter: 'blur(26px) saturate(150%)',
+          borderBottom: '1px solid rgba(255,255,255,0.08)',
+          transform: open ? 'translateY(0)' : 'translateY(-110%)',
+          transition: 'transform 220ms cubic-bezier(0.22,1,0.36,1)',
+          pointerEvents: open ? 'auto' : 'none',
+        }}
+      >
+        {list.map((d) => {
+          const active = d.id === activeId;
+          return (
+            <Box
+              key={d.id}
+              component="button"
+              onClick={() => { navigate(`/dashboard/${d.id}`); setOpen(false); }}
+              sx={{
+                px: 2, py: 0.8, borderRadius: '9px', cursor: 'pointer',
+                border: active ? '2px solid rgba(255,255,255,0.85)' : '1px solid rgba(255,255,255,0.18)',
+                background: active ? 'rgba(255,255,255,0.16)' : 'rgba(255,255,255,0.07)',
+                color: 'rgba(255,255,255,0.92)', fontFamily: 'inherit', fontSize: '0.8125rem', fontWeight: active ? 600 : 500,
+                whiteSpace: 'nowrap', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis',
+                transition: 'background 130ms, border-color 130ms',
+                '&:hover': { background: 'rgba(255,255,255,0.18)' },
+              }}
+            >
+              {d.name || 'Untitled'}
+            </Box>
+          );
+        })}
+        <Box
+          component="button"
+          aria-label="New dashboard"
+          onClick={addSpace}
+          sx={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            width: 34, height: 34, borderRadius: '9px', cursor: 'pointer',
+            border: '1px dashed rgba(255,255,255,0.35)', background: 'transparent',
+            color: 'rgba(255,255,255,0.85)',
+            transition: 'background 130ms',
+            '&:hover': { background: 'rgba(255,255,255,0.14)' },
+          }}
+        >
+          <Plus size={16} />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default SpacesStrip;

From cf37c7633158998a14b0bf3fcee9442ece6b3fe9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 19:40:45 -0700
Subject: [PATCH 199/248] [eric] desktop: Spaces strip goes Mission Control
 scale w/ thumbnails, hover header unclipped, fullscreen keeps all 3 lights,
 card epithets personalized by prep

---
 backend/apps/onboarding/models.py             |  2 +
 backend/apps/onboarding/prep.py               |  5 +-
 .../OnboardingV3/OnboardingV3Root.tsx         |  2 +-
 .../OnboardingV3/beats/BeatCard.tsx           | 14 ++-
 .../OnboardingV3/onboardingV3Api.ts           |  1 +
 .../OnboardingV3/useOnboardingV3Pipeline.ts   |  5 +-
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  4 +-
 .../app/pages/Dashboard/cards/BrowserCard.tsx |  1 -
 .../Dashboard/cards/DashboardViewCard.tsx     |  2 +-
 .../app/pages/Dashboard/cards/NoteCard.tsx    |  2 +-
 .../pages/Dashboard/cards/WindowControls.tsx  | 32 +------
 .../pages/Dashboard/desktop/SpacesStrip.tsx   | 95 ++++++++++++-------
 .../Workflows/app/WorkflowsAppContent.tsx     |  1 -
 13 files changed, 91 insertions(+), 75 deletions(-)

diff --git a/backend/apps/onboarding/models.py b/backend/apps/onboarding/models.py
index 5366ca55..d480bcf3 100644
--- a/backend/apps/onboarding/models.py
+++ b/backend/apps/onboarding/models.py
@@ -57,6 +57,8 @@ class PrepResponse(BaseModel):
     # A punchy <=10-word identity hook, read at a glance in the reveal's focal beat (the greeting is the
     # longer warm read for the chat; the headline is the scannable one-liner most people actually read).
     headline: str = ""
+    # 2-4 word identity titles tailored to this user; the Swarm Card leads with these over the static list.
+    epithets: List[str] = Field(default_factory=list)
     greeting: str = ""
     starters: List[PersonalizedStarter] = Field(default_factory=list)
     app_title: str = ""
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
index a3cc32b6..64deb69b 100644
--- a/backend/apps/onboarding/prep.py
+++ b/backend/apps/onboarding/prep.py
@@ -30,7 +30,7 @@ P_SYSTEM = (
     "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
-    '{"headline": string, "greeting": string, "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "research_title": string, "research_prompt": string, "research_reason": string, "browser_title": string, "browser_prompt": string, "browser_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
+    '{"headline": string, "greeting": string, "epithets": [string, string, string], "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "research_title": string, "research_prompt": string, "research_reason": string, "browser_title": string, "browser_prompt": string, "browser_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
     "First, silently infer a short, confident profile of this user: who they are and what they are working on. "
     "If usage_summary is present it is the STRONGEST signal (a distilled profile of who this person is and what "
     "they actually work on, read from their real AI conversations); weight it above everything else. Do NOT let a "
@@ -126,6 +126,7 @@ P_SYSTEM = (
     "defining trait, no filler, no full sentence, no period. It is read at a glance in big type, so it must NOT be "
     "a paragraph. Example shapes only (never copy, tailor to THEM): 'OpenSwarm founder who measures everything, "
     "vertical jump to agent latency' or 'Ships iOS apps, obsessed with the last 5% of polish'. Sharp, not wordy. "
+    "epithets: exactly 3 short identity titles for this person, 2-4 plain words each (like 'QUIET POWER USER' but THEIRS, drawn from their real work and interests in the profile), confident and warm, never punny, never generic. "
     "The greeting is one or two warm, punchy sentences that make this person feel INSTANTLY understood, the "
     "'wait, it actually gets me' hook. Lead with the single most specific true thing about them from the profile "
     "(their actual project BY NAME, their real craft, the obsession they keep returning to), then add ONE more "
@@ -165,6 +166,7 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
     starters = build_starters(data.get("starters") if isinstance(data.get("starters"), list) else [])
     automations = p_build_automations(data.get("automations") if isinstance(data.get("automations"), list) else [])
     headline = str(data.get("headline", "")).strip()
+    epithets = [strip_dashes(str(x)).strip() for x in (data.get("epithets") or []) if str(x).strip()][:3]
     greeting = str(data.get("greeting", "")).strip()
     app_title = str(data.get("app_title", "")).strip()
     app_prompt = str(data.get("app_prompt", "")).strip()
@@ -213,6 +215,7 @@ def parse_prep(text: str) -> Optional[PrepResponse]:
         return None
     return PrepResponse(
         headline=strip_dashes(headline),
+        epithets=epithets,
         greeting=strip_dashes(greeting),
         starters=starters[:4],
         app_title=strip_dashes(app_title),
diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
index ae43cf39..c0cbc153 100644
--- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
@@ -208,7 +208,7 @@ const OnboardingV3Root: React.FC = () => {
               )}
               {beat === 'apps' && <BeatApps c={c} picks={picks} setPicks={setPicks} onNext={leaveApps} onBack={() => setBeat('connect')} />}
               {beat === 'theme' && <BeatTheme c={c} onNext={() => setBeat('card')} onBack={() => setBeat('apps')} />}
-              {beat === 'card' && <BeatCard c={c} identity={pipeline.identity} onFinish={(name) => { void leaveCard(name); }} onBack={() => setBeat('theme')} />}
+              {beat === 'card' && <BeatCard c={c} identity={pipeline.identity} personalizedEpithets={pipeline.getPrepEpithets()} onFinish={(name) => { void leaveCard(name); }} onBack={() => setBeat('theme')} />}
             </motion.div>
           </AnimatePresence>
         </motion.div>
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
index efe80ff9..2711ebc3 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
@@ -47,16 +47,24 @@ function readableInk(base: string, c: ClaudeTokens): string {
 const BeatCard: React.FC<{
   c: ClaudeTokens;
   identity: ProviderIdentity[];
+  // Prep-written identity titles for THIS user; the dice leads with these, statics are the floor.
+  personalizedEpithets?: string[];
   onFinish: (name: string | null) => void;
   onBack: () => void;
-}> = ({ c, identity, onFinish, onBack }) => {
+}> = ({ c, identity, personalizedEpithets, onFinish, onBack }) => {
   const { accent, gradient } = useThemeAccent();
   const [name, setName] = useState(() => nameFromIdentity(identity));
   // finish() can legitimately wait up to PREP_WAIT_CAP_MS on prep; the button must say so, once.
   const [submitting, setSubmitting] = useState(false);
-  const seed = useMemo(() => Math.floor(Math.random() * EPITHETS.length), []);
+  const pool = useMemo(() => {
+    const personal = (personalizedEpithets ?? []).map((e) => e.toUpperCase()).filter(Boolean);
+    return personal.length > 0 ? [...personal, ...EPITHETS] : EPITHETS;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // Personalized titles lead; only a pure-static pool starts on a random one.
+  const seed = useMemo(() => ((personalizedEpithets ?? []).length > 0 ? 0 : Math.floor(Math.random() * pool.length)), [pool]);
   const [roll, setRoll] = useState(0);
-  const epithet = EPITHETS[(seed + roll) % EPITHETS.length];
+  const epithet = pool[(seed + roll) % pool.length];
   const today = useMemo(() => new Date().toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }), []);
   const [tilt, setTilt] = useState<{ rx: number; ry: number; mx: number; my: number } | null>(null);
   const [copied, setCopied] = useState(false);
diff --git a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
index 3df7bdcf..174b30bb 100644
--- a/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
+++ b/frontend/src/app/components/OnboardingV3/onboardingV3Api.ts
@@ -25,6 +25,7 @@ export interface ScanResult {
 
 export interface PrepResponse {
   headline: string;
+  epithets?: string[];
   greeting: string;
   starters: PersonalizedStarter[];
   app_title: string;
diff --git a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
index c6feec93..df7da7aa 100644
--- a/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
+++ b/frontend/src/app/components/OnboardingV3/useOnboardingV3Pipeline.ts
@@ -118,5 +118,8 @@ export function useOnboardingV3Pipeline() {
     dispatch(setFlowActive(false));
   }, [dispatch, accent, gradient, mode]);
 
-  return { identity, kickIdentity, kickScan, kickUsageRead, kickPrep, finish };
+  // Read synchronously at card-beat time: prep has usually resolved by the last beat.
+  const getPrepEpithets = useCallback((): string[] => prepReadyRef.current?.epithets ?? [], []);
+
+  return { identity, kickIdentity, kickScan, kickUsageRead, kickPrep, finish, getPrepEpithets };
 }
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index e66e8383..2fc57fe7 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -906,6 +906,8 @@ const AgentCard: React.FC<Props> = ({
           border: isFullscreen ? 'none' : isSelected ? '2px solid #3b82f6' : '1px solid rgba(255,255,255,0.08)',
           borderRadius: tiledStyle ? '12px' : '20px',
           boxShadow: '0 18px 48px rgba(0,0,0,0.4)',
+          // The hover header floats ABOVE the card; the root must not clip it (the chat body clips itself).
+          ...(tiledStyle ? {} : { overflow: 'visible' }),
         }),
       }}
     >
@@ -1059,7 +1061,7 @@ const AgentCard: React.FC<Props> = ({
             onPointerDown={(e) => e.stopPropagation()}
             sx={{ display: 'flex', alignItems: 'center', mr: 0.75, flexShrink: 0 }}
           >
-            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={isFullscreen} />
+            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
           </Box>
           <Box
             sx={{
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index f76b1e67..05a92189 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1002,7 +1002,6 @@ const BrowserCard: React.FC<Props> = ({
             onMinimize={handleMinimize}
             onTile={onTile}
             tiled={!!tileZone}
-            fullscreen={tileZone === 'fullscreen'}
           />
         </Box>
         <Box
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 32dbb972..a38de864 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -636,7 +636,7 @@ const DashboardViewCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
         </Box>
         {!isMinimized && <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
         <Typography
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 9f0827a8..ded8a137 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -342,7 +342,7 @@ const NoteCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
         </Box>
         {isMinimized && (
           <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 515b4d1b..59fad7d8 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react';
 import Box from '@mui/material/Box';
-import FullscreenExitRoundedIcon from '@mui/icons-material/FullscreenExitRounded';
 import { TILE_ZONES } from './tileZones';
 
 interface WindowControlsProps {
@@ -8,9 +7,6 @@ interface WindowControlsProps {
   onMinimize: () => void;
   onTile: (zone: string) => void; // a TILE_ZONES key, or 'restore'
   tiled?: boolean;
-  // Full size view: the native macOS lights sit right above this corner, so a second dot cluster
-  // reads as double chrome; collapse to ONE exit control and let the natives own window ops.
-  fullscreen?: boolean;
   // Green = direct fullscreen toggle, no Fill/Halves/Quarters submenu (for surfaces that only
   // support fullscreen, like the Workflows window, where half-tiling has nowhere to land).
   noTileMenu?: boolean;
@@ -57,7 +53,7 @@ export const ARC_CHIP_SX: Record<string, unknown> = {
   '.osw-pill-host:hover & .osw-window-lights > :nth-of-type(3)': { transform: 'translate(calc(-50% + 11px), calc(-50% + 5px)) scale(1)', opacity: 1, transitionDelay: '80ms' },
 };
 
-function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTileMenu }: WindowControlsProps): React.ReactElement {
+function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: WindowControlsProps): React.ReactElement {
   const [menuOpen, setMenuOpen] = useState(false);
   // Menu DOM (12 tiles + labels, ~30 nodes) mounts on first green-dot hover, not per card at boot.
   const [menuHot, setMenuHot] = useState(false);
@@ -71,32 +67,6 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
   const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
   const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
 
-  if (fullscreen) {
-    return (
-      <Box className="osw-window-lights" onPointerDown={stop} sx={{ display: 'flex', alignItems: 'center', flex: 'none' }}>
-        <Box
-          component="button"
-          type="button"
-          aria-label="Exit full screen"
-          title="Exit full screen (Esc)"
-          onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile('restore'); }}
-          onPointerDown={stop}
-          sx={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            width: 24, height: 24, p: 0, border: 'none', borderRadius: '7px',
-            // Neutral chip at rest so it reads on ANY ground (the fullscreen chat wash is dark, the
-            // browser chrome is light); hover goes explicit white-on-dark so it can never disappear.
-            background: 'rgba(128,128,128,0.28)', color: 'inherit', opacity: 0.9, cursor: 'pointer',
-            transition: 'opacity 120ms, background 120ms, color 120ms',
-            '&:hover': { opacity: 1, background: 'rgba(0,0,0,0.5)', color: '#fff' },
-          }}
-        >
-          <FullscreenExitRoundedIcon sx={{ fontSize: 16 }} />
-        </Box>
-      </Box>
-    );
-  }
-
   const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
     <Box component="button" type="button" aria-label={label}
       onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick(); }} onPointerDown={stop} sx={dotSx(color)}>
diff --git a/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx b/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
index 89f4203c..1e0f743c 100644
--- a/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { Plus } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { createDashboard } from '@/shared/state/dashboardsSlice';
 
-// macOS Spaces, one for one: rest the cursor on the very top edge and a translucent bar of
-// dashboard "spaces" slides down (Mission Control's spaces row), click switches, + adds one.
-// This replaces the sidebar as the dashboard switcher; tools live in the dock, search on Cmd+K.
+// macOS Spaces, one for one: rest the cursor on the top edge and the spaces bar slides down,
+// full-size thumbnail tiles with the name beneath, + at the right end to add a space. It stays
+// up while the cursor is anywhere near the bar and only leaves once you move well below it
+// (mouseleave flicker is exactly what Mission Control does not do). Replaces the sidebar.
 const HOT_ZONE_PX = 3;
-const CLOSE_DELAY_MS = 280;
+const TILE_W = 176;
+const TILE_H = 104;
+const DISMISS_BELOW_PX = 72;
 
 const SpacesStrip: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -17,7 +21,7 @@ const SpacesStrip: React.FC = () => {
   const location = useLocation();
   const dashboards = useAppSelector((s) => s.dashboards.items);
   const [open, setOpen] = React.useState(false);
-  const closeTimer = React.useRef<number | null>(null);
+  const barRef = React.useRef<HTMLDivElement | null>(null);
 
   const activeId = React.useMemo(() => {
     const m = location.pathname.match(/\/dashboard\/([^/]+)/);
@@ -29,32 +33,42 @@ const SpacesStrip: React.FC = () => {
     [dashboards],
   );
 
-  const hold = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); };
-  const reveal = (): void => { hold(); setOpen(true); };
-  const scheduleClose = (): void => { hold(); closeTimer.current = window.setTimeout(() => setOpen(false), CLOSE_DELAY_MS); };
+  // Mission Control dismissal: while open, watch the cursor globally and close only once it has
+  // moved a comfortable distance BELOW the bar; hovering within or near the bar never flickers.
+  React.useEffect(() => {
+    if (!open) return undefined;
+    const onMove = (e: MouseEvent): void => {
+      const barBottom = barRef.current?.getBoundingClientRect().bottom ?? 0;
+      if (e.clientY > barBottom + DISMISS_BELOW_PX) setOpen(false);
+    };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, [open]);
 
   const addSpace = (): void => {
     void dispatch(createDashboard('Untitled Dashboard')).then((result) => {
-      if (createDashboard.fulfilled.match(result)) navigate(`/dashboard/${(result.payload as { id: string }).id}`);
+      if (createDashboard.fulfilled.match(result)) {
+        navigate(`/dashboard/${(result.payload as { id: string }).id}`);
+        setOpen(false);
+      }
     });
   };
 
   return (
     <>
-      <Box onMouseEnter={reveal} sx={{ position: 'fixed', top: 0, left: 0, right: 0, height: HOT_ZONE_PX, zIndex: 99998 }} />
+      <Box onMouseEnter={() => setOpen(true)} sx={{ position: 'fixed', top: 0, left: 0, right: 0, height: HOT_ZONE_PX, zIndex: 99998 }} />
       <Box
-        onMouseEnter={reveal}
-        onMouseLeave={scheduleClose}
+        ref={barRef}
         sx={{
           position: 'fixed', top: 0, left: 0, right: 0, zIndex: 99999,
-          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1,
-          px: 2, py: 1.25,
-          background: 'rgba(24,22,28,0.42)',
-          backdropFilter: 'blur(26px) saturate(150%)',
-          WebkitBackdropFilter: 'blur(26px) saturate(150%)',
-          borderBottom: '1px solid rgba(255,255,255,0.08)',
+          display: 'flex', alignItems: 'flex-start', justifyContent: 'center', gap: 2.25,
+          px: 3, pt: 2, pb: 1.75,
+          background: 'rgba(22,20,26,0.45)',
+          backdropFilter: 'blur(30px) saturate(150%)',
+          WebkitBackdropFilter: 'blur(30px) saturate(150%)',
+          borderBottom: '1px solid rgba(255,255,255,0.07)',
           transform: open ? 'translateY(0)' : 'translateY(-110%)',
-          transition: 'transform 220ms cubic-bezier(0.22,1,0.36,1)',
+          transition: 'transform 260ms cubic-bezier(0.22,1,0.36,1)',
           pointerEvents: open ? 'auto' : 'none',
         }}
       >
@@ -66,16 +80,31 @@ const SpacesStrip: React.FC = () => {
               component="button"
               onClick={() => { navigate(`/dashboard/${d.id}`); setOpen(false); }}
               sx={{
-                px: 2, py: 0.8, borderRadius: '9px', cursor: 'pointer',
-                border: active ? '2px solid rgba(255,255,255,0.85)' : '1px solid rgba(255,255,255,0.18)',
-                background: active ? 'rgba(255,255,255,0.16)' : 'rgba(255,255,255,0.07)',
-                color: 'rgba(255,255,255,0.92)', fontFamily: 'inherit', fontSize: '0.8125rem', fontWeight: active ? 600 : 500,
-                whiteSpace: 'nowrap', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis',
-                transition: 'background 130ms, border-color 130ms',
-                '&:hover': { background: 'rgba(255,255,255,0.18)' },
+                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75,
+                p: 0, border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
+                '&:hover .osw-space-tile': { boxShadow: '0 0 0 3px rgba(255,255,255,0.65), 0 10px 26px rgba(0,0,0,0.4)' },
               }}
             >
-              {d.name || 'Untitled'}
+              <Box
+                className="osw-space-tile"
+                sx={{
+                  width: TILE_W, height: TILE_H, borderRadius: '10px', overflow: 'hidden',
+                  background: 'rgba(255,255,255,0.08)',
+                  boxShadow: active
+                    ? '0 0 0 3px rgba(255,255,255,0.9), 0 10px 26px rgba(0,0,0,0.4)'
+                    : '0 0 0 1px rgba(255,255,255,0.14), 0 8px 20px rgba(0,0,0,0.35)',
+                  transition: 'box-shadow 140ms',
+                }}
+              >
+                {d.thumbnail ? (
+                  <Box component="img" src={d.thumbnail} alt="" sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+                ) : (
+                  <Box sx={{ width: '100%', height: '100%', background: 'linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05))' }} />
+                )}
+              </Box>
+              <Typography sx={{ color: 'rgba(255,255,255,0.92)', fontSize: '0.8125rem', fontWeight: active ? 600 : 500, maxWidth: TILE_W, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {d.name || 'Untitled'}
+              </Typography>
             </Box>
           );
         })}
@@ -85,14 +114,14 @@ const SpacesStrip: React.FC = () => {
           onClick={addSpace}
           sx={{
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            width: 34, height: 34, borderRadius: '9px', cursor: 'pointer',
-            border: '1px dashed rgba(255,255,255,0.35)', background: 'transparent',
-            color: 'rgba(255,255,255,0.85)',
-            transition: 'background 130ms',
-            '&:hover': { background: 'rgba(255,255,255,0.14)' },
+            width: 64, height: TILE_H, borderRadius: '10px', cursor: 'pointer',
+            border: '1.5px dashed rgba(255,255,255,0.35)', background: 'rgba(255,255,255,0.05)',
+            color: 'rgba(255,255,255,0.85)', flexShrink: 0,
+            transition: 'background 140ms, border-color 140ms',
+            '&:hover': { background: 'rgba(255,255,255,0.14)', borderColor: 'rgba(255,255,255,0.6)' },
           }}
         >
-          <Plus size={16} />
+          <Plus size={22} />
         </Box>
       </Box>
     </>
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
index e2790773..d23a8ae4 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
@@ -85,7 +85,6 @@ const WorkflowsAppContent: React.FC<{ header: CardHeader }> = ({ header }) => {
             onMinimize={() => dispatch(closeWorkflowsApp())}
             onTile={() => dispatch(toggleWorkflowsHubFullscreen())}
             tiled={isFullscreen}
-            fullscreen={isFullscreen}
             noTileMenu
           />
         </span>

From e2af99ea9155a45cd6bf178a20806372377a70f1 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 20:18:39 -0700
Subject: [PATCH 200/248] [eric] desktop: orphaned fullscreen tile sealed, all
 chrome hides while fullscreen, native lights defer to card lights, wash is a
 GPU-cached texture, tile menu clamps at edges, chat embed exclusive to full
 view, workflows one-click zones

---
 frontend/src/app/components/Layout/AppShell.tsx    |  3 ++-
 .../pages/AgentChat/shell/InlineSurfaceEmbeds.tsx  |  4 ++++
 .../app/pages/Dashboard/canvas/DashboardCanvas.tsx | 12 ++++++++----
 .../pages/Dashboard/canvas/DashboardOverlays.tsx   | 10 +++++++++-
 .../src/app/pages/Dashboard/cards/AgentCard.tsx    |  2 +-
 .../src/app/pages/Dashboard/cards/BrowserCard.tsx  |  1 +
 .../pages/Dashboard/cards/DashboardViewCard.tsx    |  2 +-
 .../src/app/pages/Dashboard/cards/NoteCard.tsx     |  2 +-
 .../app/pages/Dashboard/cards/WindowControls.tsx   | 12 +++++++++---
 .../app/pages/Workflows/app/WorkflowsAppCard.tsx   | 11 ++++++++++-
 .../pages/Workflows/app/WorkflowsAppContent.tsx    | 10 +++++++---
 frontend/src/shared/state/dashboardLayoutSlice.ts  | 12 ++++++++++--
 frontend/src/shared/state/subscriptionsSlice.ts    | 10 ++++++++--
 frontend/src/shared/styles/washBackground.ts       | 14 ++++++++++++++
 14 files changed, 85 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/shared/styles/washBackground.ts

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index d03e45c5..1af4b52e 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -58,6 +58,7 @@ import { findBrowserByWebContentsId } from '@/shared/browserRegistry';
 import { byPreviewRecency } from '@/shared/previewOrder';
 import { useClaudeTokens, useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import SpacesStrip from '@/app/pages/Dashboard/desktop/SpacesStrip';
+import { washBackgroundUrl } from '@/shared/styles/washBackground';
 import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
 
 const SIDEBAR_MIN = 160;
@@ -710,7 +711,7 @@ const AppShell: React.FC = () => {
   return (
     <Box sx={{
       display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary,
-      ...(fsActive && fsWashStops ? { backgroundImage: `linear-gradient(115deg, ${fsWashStops.map((hex, i) => `${hex}${Math.round(themeWashOpacity * 255).toString(16).padStart(2, '0')} ${fsWashStops.length > 1 ? (i / (fsWashStops.length - 1)) * 100 : 100}%`).join(', ')})` } : {}),
+      ...(fsActive && fsWashStops ? { backgroundImage: washBackgroundUrl(fsWashStops, themeWashOpacity), backgroundSize: '100% 100%' } : {}),
     }}>
       {/* Sidebar retired: dashboards switch via the macOS-Spaces top strip; a slim band below the
           spaces hot zone keeps the frameless window draggable (the sidebar's drag strip is gone). */}
diff --git a/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx b/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
index dcc307ac..ac4547c2 100644
--- a/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
@@ -117,6 +117,10 @@ const InlineSurfaceEmbeds: React.FC<{ c: ClaudeTokens; sessionId: string; fullsc
     [outputs, sessionId],
   );
 
+  // ONE surface at a time: on the canvas the REAL card (beside the chat) is the browser; the chat
+  // mirror only takes over in full size view, where the canvas is hidden. Both at once read as two
+  // browsers (they aren't; the embed is a live snapshot of the same webview).
+  if (!fullscreen) return null;
   if (linkedBrowsers.length === 0 && linkedApps.length === 0) return null;
 
   const popOut = (fire: () => void): void => {
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 53fc4ca2..0fb54e64 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -14,6 +14,7 @@ import ApplicationsWindow from '../desktop/ApplicationsWindow';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
+import { washBackgroundUrl } from '@/shared/styles/washBackground';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -204,8 +205,9 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   // Arc-style chrome: the mac traffic lights ride the top-edge hover, in fullscreen too (Arc/Zen both
   // keep the native buttons reachable in compact/fullscreen; Zen even exempts them from hover-leave).
   useEffect(() => {
-    window.openswarm?.setWindowButtonsVisible?.(headerRevealed || chromeDocked);
-  }, [headerRevealed, chromeDocked]);
+    // While a card is fullscreen its OWN lights are the window controls; showing the natives too reads as double chrome.
+    window.openswarm?.setWindowButtonsVisible?.(!anyFullscreen && (headerRevealed || chromeDocked));
+  }, [headerRevealed, chromeDocked, anyFullscreen]);
 
   // Reveal on any pointer graze of the top edge. The old 22px strip Box was dead in practice: the
   // hidden header overlay's pointer-events:auto children sat above it and ate the mouseenter.
@@ -269,7 +271,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         </Box>
       </Box>
 
-      {!fullscreenCardId && (
+      {!anyFullscreen && (
         <MinimizedStack
           browserCards={browserCards}
           onRestore={(cardId, rect) => {
@@ -341,7 +343,8 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
               position: 'absolute',
               inset: 0,
               pointerEvents: 'none',
-              background: `linear-gradient(115deg, ${washStops.map((hex, i) => `${hex}${Math.round(washOpacity * 255).toString(16).padStart(2, '0')} ${washStops.length > 1 ? (i / (washStops.length - 1)) * 100 : 100}%`).join(', ')})`,
+              backgroundImage: washBackgroundUrl(washStops, washOpacity),
+              backgroundSize: '100% 100%',
             }}
           />
         )}
@@ -430,6 +433,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
       {/* display:contents when visible so the overlays' absolute children keep positioning against the canvas root; display:none (not unmount) so the toolbar composer draft survives fullscreen. */}
       <Box sx={{ display: fullscreenCardId ? 'none' : 'contents' }}>
       <DashboardOverlays
+        anyFullscreen={anyFullscreen}
         canvas={canvas}
         dashboardId={dashboardId}
         sessions={sessions}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index f25351df..b1651a42 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -25,6 +25,7 @@ type Direction = 'left' | 'right' | 'up' | 'down';
 type NeighborDirections = { left: boolean; right: boolean; up: boolean; down: boolean };
 
 interface DashboardOverlaysProps {
+  anyFullscreen: boolean;
   canvas: Canvas;
   dashboardId: string;
   sessions: Record<string, AgentSession>;
@@ -59,6 +60,7 @@ interface DashboardOverlaysProps {
 }
 
 const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
+  anyFullscreen,
   canvas,
   dashboardId,
   sessions,
@@ -93,7 +95,8 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
 }) => {
   return (
     <>
-      {/* Floating bottom toolbar */}
+      {/* Floating bottom toolbar (all floating chrome steps aside while anything is fullscreen) */}
+      {!anyFullscreen && (
       <Box sx={{ position: 'absolute', bottom: 16, left: '50%', transform: 'translateX(-50%)', zIndex: 10 }}>
         <DashboardToolbar
           ref={toolbarRef}
@@ -113,11 +116,14 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
           prefillMode={toolbarPrefillMode}
         />
       </Box>
+      )}
 
       {/* Desktop help pill */}
+      {!anyFullscreen && (
       <Box sx={{ position: 'absolute', top: 14, right: 16, zIndex: 10 }}>
         <HelpPill />
       </Box>
+      )}
 
       {/* Arrow navigation hints when zoomed in on a card */}
       {focusedCardId && canvas.zoom >= 0.4 && (
@@ -131,6 +137,7 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
       )}
 
       {/* Floating zoom controls + minimap */}
+      {!anyFullscreen && (
       <Box sx={{ position: 'absolute', bottom: 16, right: 16, zIndex: 10 }}>
         <CanvasControls
           zoom={canvas.zoom}
@@ -153,6 +160,7 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
           onMinimapPan={(px, py) => canvas.actions.setState({ panX: px, panY: py, zoom: canvas.zoom })}
         />
       </Box>
+      )}
 
       {/* Card search palette (Cmd+F) */}
       <CardSearchPalette
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 2fc57fe7..fa9ba598 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -1061,7 +1061,7 @@ const AgentCard: React.FC<Props> = ({
             onPointerDown={(e) => e.stopPropagation()}
             sx={{ display: 'flex', alignItems: 'center', mr: 0.75, flexShrink: 0 }}
           >
-            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+            <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} noTileMenu={tileZone === 'fullscreen'} />
           </Box>
           <Box
             sx={{
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 05a92189..8e1f3fed 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1002,6 +1002,7 @@ const BrowserCard: React.FC<Props> = ({
             onMinimize={handleMinimize}
             onTile={onTile}
             tiled={!!tileZone}
+            noTileMenu={tileZone === 'fullscreen'}
           />
         </Box>
         <Box
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index a38de864..b2068313 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -636,7 +636,7 @@ const DashboardViewCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} noTileMenu={tileZone === 'fullscreen'} />
         </Box>
         {!isMinimized && <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
         <Typography
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index ded8a137..6949edce 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -342,7 +342,7 @@ const NoteCard: React.FC<Props> = ({
         }}
       >
         <Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
-          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
+          <WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} noTileMenu={tileZone === 'fullscreen'} />
         </Box>
         {isMinimized && (
           <Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 59fad7d8..6fc16437 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -57,10 +57,15 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
   const [menuOpen, setMenuOpen] = useState(false);
   // Menu DOM (12 tiles + labels, ~30 nodes) mounts on first green-dot hover, not per card at boot.
   const [menuHot, setMenuHot] = useState(false);
+  // Right-edge hosts (the minimized stack) open the menu leftward so it never clips off-window.
+  const [alignRight, setAlignRight] = useState(false);
+  const greenRef = useRef<HTMLDivElement | null>(null);
   const closeTimer = useRef<number | null>(null);
   const openMenu = (): void => {
     if (noTileMenu) return;
     if (closeTimer.current) window.clearTimeout(closeTimer.current);
+    const rect = greenRef.current?.getBoundingClientRect();
+    if (rect) setAlignRight(rect.left + 224 > window.innerWidth);
     if (!menuHot) { setMenuHot(true); requestAnimationFrame(() => setMenuOpen(true)); return; }
     setMenuOpen(true);
   };
@@ -84,7 +89,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
       }}>
       {btn(RED, '×', onClose, 'Close')}
       {btn(YELLOW, '–', onMinimize, 'Minimize')}
-      <Box sx={{ position: 'relative', display: 'flex', alignItems: 'center' }}
+      <Box ref={greenRef} sx={{ position: 'relative', display: 'flex', alignItems: 'center' }}
         onMouseEnter={openMenu} onMouseLeave={scheduleClose}>
         <Box component="button" type="button" aria-label={tiled ? 'Exit Full Screen' : 'Full Screen'}
           onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile(tiled ? 'restore' : 'fullscreen'); }}
@@ -94,9 +99,10 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
         {menuHot && <Box className="osw-tilemenu" onPointerDown={stop} onClick={stop}
           onMouseEnter={openMenu} onMouseLeave={scheduleClose}
           sx={{
-            position: 'absolute', top: 19, left: -8, width: 216, background: '#FFFFFF',
+            position: 'absolute', top: 19, width: 216, background: '#FFFFFF',
+            ...(alignRight ? { right: -8 } : { left: -8 }),
             border: '1px solid rgba(0,0,0,0.06)', borderRadius: '12px', boxShadow: '0 .5rem 2rem rgba(0,0,0,.14)',
-            p: 1.25, zIndex: 1200, transformOrigin: 'top left',
+            p: 1.25, zIndex: 1200, transformOrigin: alignRight ? 'top right' : 'top left',
             opacity: menuOpen ? 1 : 0, transform: menuOpen ? 'none' : 'translateY(-6px) scale(0.96)',
             pointerEvents: menuOpen ? 'auto' : 'none', transition: 'opacity .16s, transform .18s cubic-bezier(.3,.9,.3,1)',
           }}>
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
index 9570afde..ae8c01be 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { setWorkflowsHubPosition, setWorkflowsHubSize } from '@/shared/state/dashboardLayoutSlice';
-import { useTiledStyle } from '@/app/pages/Dashboard/cards/tileZones';
+import { TILE_ZONES, useTiledStyle } from '@/app/pages/Dashboard/cards/tileZones';
 import { useWC } from './uiKit';
 import WorkflowsAppContent from './WorkflowsAppContent';
 
@@ -235,6 +235,15 @@ const WorkflowsAppCard: React.FC<Props> = ({
           onPointerUp: onHeaderPointerUp,
           dragging: isDragging,
         }}
+        onTileZone={(zone) => {
+          const z = TILE_ZONES[zone];
+          const vp = document.querySelector('[data-canvas-viewport]')?.getBoundingClientRect();
+          if (!z || !vp) return;
+          const cam = getCanvasState();
+          const GAP = 8;
+          dispatch(setWorkflowsHubPosition({ x: (z.x * vp.width + GAP - cam.panX) / cam.zoom, y: (z.y * vp.height + GAP - cam.panY) / cam.zoom }));
+          dispatch(setWorkflowsHubSize({ width: (z.w * vp.width - GAP * 2) / cam.zoom, height: (z.h * vp.height - GAP * 2) / cam.zoom }));
+        }}
       />
 
       {!isFullscreen && HANDLE_DEFS.map(({ dir, css }) => (
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
index d23a8ae4..8f228a8f 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
@@ -18,7 +18,7 @@ import ComposeView from './ComposeView';
 import TrashView from './TrashView';
 
 // The three-pane Workflows body plus its title bar. The card wraps this with drag/resize geometry and passes the drag handlers in; the title bar lives here because Share needs to know which workflow is open.
-const WorkflowsAppContent: React.FC<{ header: CardHeader }> = ({ header }) => {
+const WorkflowsAppContent: React.FC<{ header: CardHeader; onTileZone?: (zone: string) => void }> = ({ header, onTileZone }) => {
   const WC = useWC();
   const dispatch = useAppDispatch();
   const target = useAppSelector((s) => s.dashboardLayout.workflowsAppTarget);
@@ -83,9 +83,13 @@ const WorkflowsAppContent: React.FC<{ header: CardHeader }> = ({ header }) => {
           <WindowControls
             onClose={() => dispatch(closeWorkflowsApp())}
             onMinimize={() => dispatch(closeWorkflowsApp())}
-            onTile={() => dispatch(toggleWorkflowsHubFullscreen())}
+            onTile={(zone) => {
+              if (zone === 'fullscreen' || zone === 'restore') { dispatch(toggleWorkflowsHubFullscreen()); return; }
+              if (isFullscreen) dispatch(toggleWorkflowsHubFullscreen());
+              onTileZone?.(zone);
+            }}
             tiled={isFullscreen}
-            noTileMenu
+            noTileMenu={isFullscreen}
           />
         </span>
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index 713c4dfc..dd0b8d6e 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -714,6 +714,9 @@ const dashboardLayoutSlice = createSlice({
         if (!liveIds.has(id)) {
           state.closedCardPositions[id] = { ...state.cards[id] };
           delete state.cards[id];
+          // A dead card must never keep owning a tile: an orphaned 'fullscreen' entry hides ALL chrome until reload.
+          delete state.tiledCards[id];
+          delete state.minimizedCards[id];
         }
       }
 
@@ -1900,8 +1903,13 @@ export const reopenLastClosed = createAsyncThunk(
 );
 
 export const selectFullscreenCardId = (state: { dashboardLayout: DashboardLayoutState }): string | null => {
-  const entry = Object.entries(state.dashboardLayout.tiledCards).find(([, zone]) => zone === 'fullscreen');
-  return entry ? entry[0] : null;
+  const s = state.dashboardLayout;
+  const entry = Object.entries(s.tiledCards).find(([, zone]) => zone === 'fullscreen');
+  if (!entry) return null;
+  const id = entry[0];
+  // Belt over the reducer hygiene: an entry whose card is gone (any removal path) must not hold the app in fullscreen.
+  const exists = id in s.cards || id in s.viewCards || id in s.browserCards || id in s.notes || id in s.workflowCards;
+  return exists ? id : null;
 };
 
 export default dashboardLayoutSlice.reducer;
diff --git a/frontend/src/shared/state/subscriptionsSlice.ts b/frontend/src/shared/state/subscriptionsSlice.ts
index 25fc5a58..320a1229 100644
--- a/frontend/src/shared/state/subscriptionsSlice.ts
+++ b/frontend/src/shared/state/subscriptionsSlice.ts
@@ -112,15 +112,21 @@ export const { setSubscriptionStatus, markSubscriptionConnected, hideProviderHea
 const EMPTY_CONNECTIONS: SubscriptionConnection[] = [];
 
 /** Unwraps the polymorphic `providers` shape (modern object vs legacy array). */
+let p_lastRows: SubscriptionConnection[] | null = null;
+let p_lastFiltered: SubscriptionConnection[] | null = null;
+
 export function selectSubscriptionConnections(
   state: WithSubscriptions,
 ): SubscriptionConnection[] {
   const providers = state.subscriptions.status?.providers;
   if (!providers) return EMPTY_CONNECTIONS;
   const rows = Array.isArray(providers) ? providers : (providers.connections ?? EMPTY_CONNECTIONS);
-  // The free-trial/Pro lane is an OpenSwarm-managed router row, not a connection the USER made; counting it made a fresh trial look "connected" (dead Connect-beat rows, premature onConnected, phantom green rings).
+  // The free-trial/Pro lane is an OpenSwarm-managed router row, not a connection the USER made; counting it made a fresh trial look "connected" (dead Connect-beat rows, premature onConnected, phantom green rings). Memoized per rows identity so useSelector consumers don't churn.
+  if (rows === p_lastRows && p_lastFiltered) return p_lastFiltered;
   const filtered = rows.filter((p) => !/\(OpenSwarm-managed\)/.test(p.name ?? ''));
-  return filtered.length === rows.length ? rows : filtered;
+  p_lastRows = rows;
+  p_lastFiltered = filtered.length === rows.length ? rows : filtered;
+  return p_lastFiltered;
 }
 
 export function hasAnyActiveSubscription(state: WithSubscriptions): boolean {
diff --git a/frontend/src/shared/styles/washBackground.ts b/frontend/src/shared/styles/washBackground.ts
new file mode 100644
index 00000000..1fd76341
--- /dev/null
+++ b/frontend/src/shared/styles/washBackground.ts
@@ -0,0 +1,14 @@
+// Theme wash as an SVG IMAGE, not a CSS linear-gradient: Chromium caches a decoded image as a GPU
+// texture, while a window-sized procedural gradient re-rasterizes on resize and, under GPU memory
+// pressure (webviews, external monitors), those rasters get DROPPED and paint as a half/blank
+// rectangle (the same class as the 1.5.9 dot-grid white-patch bug; see DashboardCanvas's grid note).
+export function washBackgroundUrl(stops: string[], washOpacity: number): string {
+  const alpha = Math.max(0, Math.min(1, washOpacity));
+  const stopEls = stops.map((hex, i) => {
+    const offset = stops.length > 1 ? (i / (stops.length - 1)) * 100 : 100;
+    return `<stop offset='${offset}%' stop-color='${hex}' stop-opacity='${alpha}'/>`;
+  }).join('');
+  // x2/y2 approximate the CSS 115deg direction (25 degrees below horizontal).
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'><defs><linearGradient id='w' x1='0%' y1='0%' x2='90%' y2='42%'>${stopEls}</linearGradient></defs><rect width='100' height='100' fill='url(%23w)'/></svg>`;
+  return `url("data:image/svg+xml,${svg.replace(/#/g, '%23').replace(/'/g, '%27')}")`;
+}

From c5d4b5f71a412a468f2b325f7feb8a8b9c124b62 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 20:20:10 -0700
Subject: [PATCH 201/248] [eric] settings: rows become Apple-style contained
 cards via the shared style tokens

---
 .../pages/Settings/sections/settingsStyles.ts | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/pages/Settings/sections/settingsStyles.ts b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
index be207670..b57775ab 100644
--- a/frontend/src/app/pages/Settings/sections/settingsStyles.ts
+++ b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
@@ -8,21 +8,28 @@ export function makeSettingsStyles(c: any) {
 
   const sectionSx = {
     fontSize: '0.6875rem',
-    fontWeight: 600,
-    letterSpacing: '0.06em',
+    fontWeight: 700,
+    letterSpacing: '0.07em',
     textTransform: 'uppercase' as const,
-    color: c.text.tertiary,
-    mb: 0.5,
-    mt: 0.5,
+    color: c.text.muted,
+    mb: 1,
+    mt: 2.5,
+    px: 0.5,
   };
 
+  // Apple/ChatGPT settings grammar: each row is its own soft contained chip, not a hairline in a
+  // long scroll; the pane reads as a stack of quiet cards.
   const rowSx = {
-    py: 2,
-    borderBottom: `1px solid ${c.border.subtle}`,
+    px: 2,
+    py: 1.5,
+    mb: 1,
+    bgcolor: c.bg.surface,
+    border: `1px solid ${c.border.subtle}`,
+    borderRadius: '10px',
   };
 
   const rowLastSx = {
-    py: 2,
+    ...rowSx,
   };
 
   const inlineRowSx = {

From 1b9a852ca897276d018aa94a00c6b0b2c28760ae Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 20:33:56 -0700
Subject: [PATCH 202/248] [eric] settings: capability pane chrome quieted to
 the shared grammar (Tools group headers, Commands section header)

---
 frontend/src/app/pages/Commands/Commands.tsx | 33 ++++++--------------
 frontend/src/app/pages/Tools/Tools.tsx       | 22 +++++++------
 2 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/pages/Commands/Commands.tsx b/frontend/src/app/pages/Commands/Commands.tsx
index 445c40a0..141130d4 100644
--- a/frontend/src/app/pages/Commands/Commands.tsx
+++ b/frontend/src/app/pages/Commands/Commands.tsx
@@ -41,30 +41,17 @@ const SectionHeader: React.FC<{
   subtitle: string;
   count?: number;
   c: any;
-}> = ({ icon, title, subtitle, count, c }) => (
-  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 2 }}>
-    <Box sx={{ color: c.accent.primary, display: 'flex', alignItems: 'center' }}>{icon}</Box>
-    <Box sx={{ flex: 1 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>
-          {title}
-        </Typography>
-        {count !== undefined && (
-          <Chip
-            label={count}
-            size="small"
-            sx={{
-              height: 20,
-              fontSize: '0.6875rem',
-              fontWeight: 600,
-              bgcolor: `${c.accent.primary}15`,
-              color: c.accent.primary,
-            }}
-          />
-        )}
-      </Box>
-      <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>{subtitle}</Typography>
+}> = ({ title, subtitle, count, c }) => (
+  <Box sx={{ mb: 1.25, px: 0.5 }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+      <Typography sx={{ color: c.text.muted, fontWeight: 700, fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.07em' }}>
+        {title}
+      </Typography>
+      {count !== undefined && (
+        <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 600 }}>{count}</Typography>
+      )}
     </Box>
+    <Typography sx={{ color: c.text.tertiary, fontSize: '0.75rem', mt: 0.25 }}>{subtitle}</Typography>
   </Box>
 );
 
diff --git a/frontend/src/app/pages/Tools/Tools.tsx b/frontend/src/app/pages/Tools/Tools.tsx
index 8ed19c1a..3d8fdd95 100644
--- a/frontend/src/app/pages/Tools/Tools.tsx
+++ b/frontend/src/app/pages/Tools/Tools.tsx
@@ -139,12 +139,13 @@ const Tools: React.FC = () => {
       <Box sx={{ mb: 3 }}>
         <Box
           onClick={() => setBuiltinSectionOpen((v) => !v)}
-          sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}
+          sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1, px: 0.5, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}
         >
-          {builtinSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
-          <LockIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Built-in</Typography>
-          <Chip label={coreTools.length + deferredTools.length + browserTools.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+          <Typography sx={{ color: c.text.muted, fontWeight: 700, fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.07em' }}>
+            Built-in
+          </Typography>
+          <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 600 }}>{coreTools.length + deferredTools.length + browserTools.length}</Typography>
+          {builtinSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} />}
         </Box>
         <Collapse in={builtinSectionOpen} timeout={0} unmountOnExit>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pl: 1 }}>
@@ -180,11 +181,12 @@ const Tools: React.FC = () => {
       <AgentWorkflowsSection />
 
       <Box sx={{ mb: 2 }}>
-        <Box onClick={() => setCustomSectionOpen((v) => !v)} sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}>
-          {customSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 18, color: c.text.tertiary, transition: 'color 0.15s' }} />}
-          <BuildIcon sx={{ fontSize: 14, color: c.text.tertiary }} />
-          <Typography sx={{ color: c.text.muted, fontWeight: 600, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Connections</Typography>
-          <Chip label={tools.length + uninstalledIntegrations.length} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 18, minWidth: 24, '& .MuiChip-label': { px: 0.8 } }} />
+        <Box onClick={() => setCustomSectionOpen((v) => !v)} sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1, px: 0.5, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}>
+          <Typography sx={{ color: c.text.muted, fontWeight: 700, fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.07em' }}>
+            Connections
+          </Typography>
+          <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 600 }}>{tools.length + uninstalledIntegrations.length}</Typography>
+          {customSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} />}
         </Box>
         <Collapse in={customSectionOpen} timeout={0} unmountOnExit>
           {loading ? (

From 998c452523fc02afff60abdc6d3b4aec9b743550 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 20:44:08 -0700
Subject: [PATCH 203/248] [eric] help: Ask is a dedicated help chat with an
 app-aware support prompt; what's-new refreshed

---
 .../app/pages/Dashboard/desktop/HelpPanel.tsx | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
index 5b2bc3a7..f0bcfc3b 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPanel.tsx
@@ -18,14 +18,33 @@ import { createDraftSession, launchAndSendFirstMessage, type AgentConfig } from
 import { getLastDashboardId } from '@/shared/lastDashboardId';
 import { API_BASE } from '@/shared/config';
 
+// The Ask chat is a DEDICATED help chat, not a general agent: it knows the app's surfaces and stays
+// in support mode instead of launching into open-ended work.
+const HELP_SYSTEM_PROMPT = [
+  "You are OpenSwarm's help assistant, a dedicated support chat inside the app.",
+  'Answer questions about using OpenSwarm clearly and briefly, with the exact clicks or keys.',
+  'What you know about the app:',
+  '- Dashboards work like macOS Spaces: resting the cursor on the very top edge of the window reveals the spaces bar to switch dashboards or add one with +.',
+  '- The canvas holds cards: agent chats, browsers, notes, built apps, and workflows. Cards have mac-style traffic lights; the green dot goes full screen, hovering it offers halves, quarters, and thirds.',
+  '- The dark dock on the left creates chats, browsers, workflows, and notes, and opens History, Settings, and Apps.',
+  '- Cmd+K searches everything. Dictation: hold the mic in the Help pill (or the mic key) to talk; the words land where the cursor is.',
+  '- Settings (gear in the dock): Account, General (agent defaults), Appearance (theme, accent colors, text size), Privacy, Advanced, plus Models (connect Claude, ChatGPT, or Gemini subscriptions or API keys), Skills, Tools, Commands, and Usage.',
+  '- Workflows run agents on a schedule; open them from the dock calendar icon.',
+  'Behavior rules:',
+  '- Stay a help chat. Never start unrelated agent work or long tasks from here.',
+  '- You may read settings with the settings tools to answer questions about their setup; ask before changing anything.',
+  '- If something sounds like a bug, point them to Help then Report a bug, which packages diagnostics automatically.',
+  '- If they want real work done, tell them to start a regular chat from the dock or by typing on the canvas.',
+].join('\n');
+
 const REPO_ISSUES_URL = 'https://github.com/openswarm-ai/openswarm/issues/new';
 const DOCS_URL = 'https://docs.openswarm.com';
 const DISCORD_URL = 'https://discord.com/channels/1486442924391796896/1486442927554170892';
 
 const WHATS_NEW: Array<{ text: string }> = [
-  { text: 'Dictation lands where your cursor is, with AI cleanup' },
-  { text: 'Sign in keeps your setup tied to your account' },
-  { text: 'Text size setting + a cleaner canvas composer' },
+  { text: 'Dashboards are Spaces: hover the top edge to switch' },
+  { text: 'Arc-style full screen with one set of window lights' },
+  { text: 'Starters tailored to you, in every category' },
 ];
 
 function openExternal(url: string): void {
@@ -64,7 +83,7 @@ const HelpPanel: React.FC<{ onClose: () => void }> = ({ onClose }) => {
     const p = prompt.trim();
     if (!p) return;
     const dashboardId = getLastDashboardId() ?? undefined;
-    const config: AgentConfig = { name: 'Help', model, mode: 'agent', dashboard_id: dashboardId };
+    const config: AgentConfig = { name: 'Help', model, mode: 'agent', dashboard_id: dashboardId, system_prompt: HELP_SYSTEM_PROMPT };
     const draftId = dispatch(createDraftSession({ mode: 'agent', model, dashboardId: dashboardId ?? '', setActive: true })).payload.draftId;
     void dispatch(launchAndSendFirstMessage({ draftId, config, prompt: p, mode: 'agent', model, expand: true }));
     onClose();

From 276ca5a04a8f1c52cb1f05c14b6e80a96528acae Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 20:46:42 -0700
Subject: [PATCH 204/248] [eric] theme: knob turns relative with seam-safe
 delta + stuck-drag sealed; minimize parks in 250ms

---
 .../src/app/components/theme/WashDials.tsx    | 50 ++++++++++++-------
 .../app/pages/Dashboard/cards/BrowserCard.tsx |  3 +-
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/theme/WashDials.tsx b/frontend/src/app/components/theme/WashDials.tsx
index be05fdf6..0e74f1cb 100644
--- a/frontend/src/app/components/theme/WashDials.tsx
+++ b/frontend/src/app/components/theme/WashDials.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useRef } from 'react';
 
 export const SquiggleSlider: React.FC<{ value: number; onChange: (v: number) => void; width?: number }> = ({ value, onChange, width = 170 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
-  const dragging = useRef(false);
+  const [dragging, setDragging] = React.useState(false);
   const apply = useCallback((clientX: number) => {
     const el = ref.current;
     if (!el) return;
@@ -22,12 +22,14 @@ export const SquiggleSlider: React.FC<{ value: number; onChange: (v: number) =>
     <div
       ref={ref}
       title="Grain"
-      onPointerDown={(e) => { dragging.current = true; (e.target as HTMLElement).setPointerCapture?.(e.pointerId); apply(e.clientX); }}
-      onPointerMove={(e) => { if (dragging.current) apply(e.clientX); }}
-      onPointerUp={() => { dragging.current = false; }}
-      style={{ position: 'relative', width, height: H, cursor: 'pointer', touchAction: 'none', flexShrink: 0 }}
+      onPointerDown={(e) => { setDragging(true); e.currentTarget.setPointerCapture?.(e.pointerId); apply(e.clientX); }}
+      onPointerMove={(e) => { if (dragging) apply(e.clientX); }}
+      onPointerUp={() => setDragging(false)}
+      onPointerCancel={() => setDragging(false)}
+      onLostPointerCapture={() => setDragging(false)}
+      style={{ position: 'relative', width, height: H, cursor: dragging ? 'grabbing' : 'grab', touchAction: 'none', flexShrink: 0 }}
     >
-      <svg width={width} height={H} style={{ display: 'block' }}>
+      <svg width={width} height={H} style={{ display: 'block', pointerEvents: 'none' }}>
         <path d={wavePath} stroke="currentColor" strokeOpacity={0.5} strokeWidth={2} fill="none" strokeLinecap="round" />
       </svg>
       <div style={{
@@ -42,29 +44,43 @@ export const SquiggleSlider: React.FC<{ value: number; onChange: (v: number) =>
 export const Knob: React.FC<{ value: number; onChange: (v: number) => void; size?: number }> = ({ value, onChange, size = 34 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const [grabbing, setGrabbing] = React.useState(false);
+  // A real knob turns RELATIVE to where you grabbed it; jumping to the grab angle feels broken.
+  const start = useRef<{ deg: number; value: number } | null>(null);
   const angle = -135 + value * 270;
-  // Turn like a physical knob: the indicator chases the pointer's angle around the center.
-  const applyAngle = useCallback((clientX: number, clientY: number) => {
+  const pointerDeg = useCallback((clientX: number, clientY: number): number => {
     const el = ref.current;
-    if (!el) return;
+    if (!el) return 0;
     const r = el.getBoundingClientRect();
-    const deg = Math.atan2(clientX - (r.left + r.width / 2), (r.top + r.height / 2) - clientY) * (180 / Math.PI);
-    onChange(Math.min(1, Math.max(0, (Math.max(-135, Math.min(135, deg)) + 135) / 270)));
-  }, [onChange]);
+    return Math.atan2(clientX - (r.left + r.width / 2), (r.top + r.height / 2) - clientY) * (180 / Math.PI);
+  }, []);
+  const end = (): void => { setGrabbing(false); start.current = null; };
   return (
     <div
       ref={ref}
       title="Intensity"
-      onPointerDown={(e) => { setGrabbing(true); (e.target as HTMLElement).setPointerCapture?.(e.pointerId); applyAngle(e.clientX, e.clientY); }}
-      onPointerMove={(e) => { if (grabbing) applyAngle(e.clientX, e.clientY); }}
-      onPointerUp={() => setGrabbing(false)}
+      onPointerDown={(e) => {
+        setGrabbing(true);
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        start.current = { deg: pointerDeg(e.clientX, e.clientY), value };
+      }}
+      onPointerMove={(e) => {
+        if (!grabbing || !start.current) return;
+        let delta = pointerDeg(e.clientX, e.clientY) - start.current.deg;
+        // Crossing the +-180 seam must not spin the knob a full turn.
+        if (delta > 180) delta -= 360;
+        if (delta < -180) delta += 360;
+        onChange(Math.min(1, Math.max(0, start.current.value + delta / 270)));
+      }}
+      onPointerUp={end}
+      onPointerCancel={end}
+      onLostPointerCapture={end}
       style={{
         position: 'relative', width: size + 10, height: size + 10, display: 'flex', alignItems: 'center',
         justifyContent: 'center', cursor: grabbing ? 'grabbing' : 'grab', touchAction: 'none', flexShrink: 0,
       }}
     >
-      <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: '2px dotted currentColor', opacity: 0.4 }} />
-      <div style={{ width: size - 8, height: size - 8, borderRadius: 999, background: '#3a3835', transform: `rotate(${angle}deg)`, display: 'flex', justifyContent: 'center' }}>
+      <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: '2px dotted currentColor', opacity: 0.4, pointerEvents: 'none' }} />
+      <div style={{ width: size - 8, height: size - 8, borderRadius: 999, background: '#3a3835', transform: `rotate(${angle}deg)`, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
         <div style={{ width: 3, height: 9, borderRadius: 2, background: '#fff', marginTop: 2 }} />
       </div>
     </div>
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 8e1f3fed..ac25bd0b 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -559,7 +559,8 @@ const BrowserCard: React.FC<Props> = ({
     const park = (): void => { if (parked) return; parked = true; dispatch(toggleMinimizeCard({ cardId: browserId })); };
     if (capture && typeof (capture as Promise<unknown>).then === 'function') {
       // capturePage can hang forever on off-screen guests (Electron 42); the timer guarantees the park.
-      window.setTimeout(park, 800);
+      // 250ms: captures land in ~100-200ms when visible, and a snappy minimize beats a perfect thumbnail.
+      window.setTimeout(park, 250);
       (capture as Promise<{ toDataURL(): string }>)
         .then((img) => { saveMinimizedShot(browserId, img.toDataURL()); })
         .catch(() => undefined)

From 544df0609d55a733f6a76fe4ff29e328614a318e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 20:57:48 -0700
Subject: [PATCH 205/248] [eric] spaces: right-click tile menu (rename inline,
 duplicate, delete) + sidebar render tree excised (507 lines)

---
 .../src/app/components/Layout/AppShell.tsx    | 508 +-----------------
 .../pages/Dashboard/desktop/SpacesStrip.tsx   | 120 ++++-
 2 files changed, 113 insertions(+), 515 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 1af4b52e..28086e4e 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -924,513 +924,7 @@ const AppShell: React.FC = () => {
       )}
 
       <Box sx={{ display: 'flex', flex: 1, minHeight: 0 }}>
-      {((!sidebarCollapsed && (!fsHideChrome || fsSidebarPinned)) || sideOverlay) && (
-      <>
-      <Box
-        onMouseEnter={() => { if (sideOverlay) cancelPeekClose(); }}
-        onMouseLeave={() => { if (sideOverlay) schedulePeekClose(); }}
-        onWheel={handleSidebarSwipe}
-        sx={{
-          width: sidebarWidth,
-          flexShrink: 0,
-          bgcolor: c.bg.secondary,
-          // RETIRED: the Spaces strip owns dashboard switching now; excising the full sidebar tree is a follow-up.
-          display: 'none',
-          flexDirection: 'column',
-          // Zen/Arc compact mode: a detached, rounded panel that SLIDES in and out from the left edge
-          // (sidePeek drives the transform both ways; it stays mounted so leaving glides it away, not vanish).
-          ...(sideOverlay ? {
-            // Hug the window's top/left/bottom edges (same footprint as the docked sidebar) so the
-            // dashboard's corner tint can't peek in the margins; only the dashboard-facing right corners
-            // stay rounded. The OS clips the square outer corners to the window's own rounding, so the
-            // window edge (the "last border") stays intact.
-            position: 'fixed', top: 0, left: 0, bottom: 0, zIndex: 1000002,
-            borderRadius: '0 14px 14px 0', overflow: 'hidden',
-            boxShadow: '8px 0 32px rgba(0,0,0,0.28)', borderRight: `1px solid ${c.border.medium}`,
-            transform: sidePeek && !v3FlowActive ? 'translateX(0)' : 'translateX(-118%)',
-            transition: 'transform 240ms cubic-bezier(0.22,1,0.36,1)',
-            pointerEvents: sidePeek && !v3FlowActive ? 'auto' : 'none',
-          } : fsActive ? {
-            // Fullscreen with the sidebar pinned = Arc: no slab, no seam line, the sidebar sits
-            // directly on the shared window wash and the content floats beside it as a rounded card.
-            bgcolor: 'transparent',
-            border: 'none',
-          } : {}),
-        }}
-      >
-        {/* Sidebar header = the app's chrome home (Arc/Zen): window-light clearance, back/forward, collapse, then the search command bar. */}
-        <Box sx={{ pt: '30px', px: 1, pb: 0.75, display: 'flex', flexDirection: 'column', gap: 0.75, WebkitAppRegion: 'drag', flexShrink: 0 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, WebkitAppRegion: 'no-drag' }}>
-            <Tooltip title="Back">
-              <span>
-                <IconButton size="small" onClick={() => navigate(-1)} disabled={!canGoBack}
-                  sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '& svg': { transition: 'transform 0.2s cubic-bezier(0.34,1.56,0.64,1)' }, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` }, '&:hover svg': { transform: 'translateX(-2px)' } }}>
-                  <ArrowLeft size={17} />
-                </IconButton>
-              </span>
-            </Tooltip>
-            <Tooltip title="Forward">
-              <span>
-                <IconButton size="small" onClick={() => navigate(1)} disabled={!canGoForward}
-                  sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '& svg': { transition: 'transform 0.2s cubic-bezier(0.34,1.56,0.64,1)' }, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` }, '&:hover svg': { transform: 'translateX(2px)' } }}>
-                  <ArrowRight size={17} />
-                </IconButton>
-              </span>
-            </Tooltip>
-            <Box sx={{ flex: 1 }} />
-            <Tooltip title={sideOverlay ? 'Dock sidebar' : 'Hide sidebar'}>
-              {/* Arc-style pin: from the floating peek this DOCKS the sidebar permanently (pushes the
-                  canvas), from docked it collapses back to peek. Toggle, not one-way collapse. */}
-              <IconButton size="small" onClick={() => {
-                  if (fsActive) {
-                    setFsSidebarPinned((v) => {
-                      if (!v) setSidebarCollapsed(false);
-                      return !v;
-                    });
-                    return;
-                  }
-                  setSidebarCollapsed((v) => !v);
-                }}
-                data-onboarding="sidebar-toggle" aria-expanded={!sidebarCollapsed}
-                sx={{ color: c.text.tertiary, p: 0.5, borderRadius: 1, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` } }}>
-                <AnimatedPanelLeft size={17} />
-              </IconButton>
-            </Tooltip>
-          </Box>
-          <ButtonBase
-            onClick={() => window.dispatchEvent(new CustomEvent('openswarm:open-search'))}
-            sx={{
-              WebkitAppRegion: 'no-drag',
-              display: 'flex', alignItems: 'center', gap: 1, width: '100%', justifyContent: 'flex-start',
-              px: 1.25, py: 0.9, borderRadius: 2, border: `1px solid ${c.border.medium}`, bgcolor: c.bg.surface,
-              color: c.text.tertiary, transition: 'border-color 0.15s, background 0.15s',
-              '&:hover': { borderColor: c.border.strong, bgcolor: c.bg.page },
-            }}
-          >
-            <SearchGlyph size={15} />
-            <Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.875rem', color: c.text.muted }}>Search</Typography>
-            <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
-          </ButtonBase>
-        </Box>
-        <Box sx={{
-          flex: 1,
-          overflow: 'auto',
-          pt: 0.5,
-          '&::-webkit-scrollbar': { width: 0 },
-          // Tactile hover: the leading section icon springs once on row-hover, then settles. Interaction-only, never ambient. Scoped to ListItemIcon so the +/chevron stay put.
-          '& .MuiListItemIcon-root svg': {
-            transition: 'transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
-          },
-          // Per-glyph hover choreography: each section icon reacts in its own way, springy then settles. Interaction-only, never ambient.
-          '& [data-onboarding="sidebar-dashboards"]:hover .MuiListItemIcon-root svg': {
-            transform: 'scale(1.14)',
-          },
-          '& [data-onboarding="sidebar-apps"]:hover .MuiListItemIcon-root svg': {
-            transform: 'rotate(8deg) scale(1.08)',
-          },
-        }}>
-          <Box sx={{ px: 1, mb: 0.25 }}>
-            <ListItemButton
-              onClick={handleDashboardsClick}
-              data-onboarding="sidebar-dashboards"
-              // Onboarding reads expanded so it skips the click step (re-click would collapse).
-              data-expanded={dashboardsExpanded ? 'true' : 'false'}
-              aria-expanded={dashboardsExpanded}
-              sx={{
-                borderRadius: 1.5,
-                py: 0.6,
-                px: 1.25,
-                bgcolor: isDashboardRoute ? `${c.accent.primary}12` : 'transparent',
-                '&:hover': { bgcolor: isDashboardRoute ? `${c.accent.primary}18` : `${c.text.tertiary}0A` },
-                transition: 'background-color 0.15s',
-              }}
-            >
-              <ListItemIcon sx={{ color: isDashboardRoute ? c.accent.primary : c.text.tertiary, minWidth: 28 }}>
-                <LayoutDashboard size={18} />
-              </ListItemIcon>
-              <ListItemText
-                primary="Dashboards"
-                sx={{
-                  '& .MuiListItemText-primary': {
-                    color: isDashboardRoute ? c.text.primary : c.text.muted,
-                    fontSize: '0.875rem',
-                    fontWeight: isDashboardRoute ? 600 : 400,
-                  },
-                }}
-              />
-              <Tooltip title="New dashboard" placement="right">
-                <IconButton
-                  size="small"
-                  onClick={handleCreateDashboard}
-                  sx={{
-                    color: c.text.ghost,
-                    p: 0.25,
-                    mr: 0.25,
-                    borderRadius: 1,
-                    '&:hover': { color: c.accent.primary, bgcolor: `${c.accent.primary}14` },
-                  }}
-                >
-                  <Plus size={15} />
-                </IconButton>
-              </Tooltip>
-              {dashboardList.length > 0 && (
-                <ExpandMoreIcon
-                  sx={{
-                    color: c.text.ghost,
-                    fontSize: 16,
-                    transition: 'transform 0.2s',
-                    transform: dashboardsExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                  }}
-                />
-              )}
-            </ListItemButton>
-
-            <Collapse in={dashboardsExpanded && dashboardList.length > 0} timeout={200}>
-              <Box
-                sx={{
-                  ml: 2,
-                  mt: 0.25,
-                  mb: 0.5,
-                  maxHeight: 240,
-                  overflow: 'auto',
-                  '&::-webkit-scrollbar': { width: 3 },
-                  '&::-webkit-scrollbar-track': { background: 'transparent' },
-                  '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 4 },
-                  scrollbarWidth: 'thin',
-                  scrollbarColor: `${c.border.medium} transparent`,
-                }}
-              >
-                {dashboardList.map((entry, idx) => {
-                  const isActive = activeDashboardId === entry.id;
-                  const isRenaming = renamingDashboardId === entry.id;
-                  return (
-                    <Box
-                      key={entry.id}
-                      // First row gets generic "first" alias so onboarding can teach "click into a dashboard" without a specific id.
-                      data-onboarding={
-                        idx === 0 ? 'dashboard-row-first' : `dashboard-row-${entry.id}`
-                      }
-                      onClick={() => handleDashboardItemClick(entry.id)}
-                      onContextMenu={(e) => openRowMenu(e, 'dashboard', entry.id, entry.name)}
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 0.75,
-                        pl: 1.25,
-                        pr: 1,
-                        py: isRenaming ? 0.25 : 0.5,
-                        mx: 0.5,
-                        cursor: isRenaming ? 'default' : 'pointer',
-                        // Finder-style selection: the rounded fill is the one active cue, no rail marker.
-                        borderRadius: `${c.radius.md}px`,
-                        bgcolor: isActive ? `${c.accent.primary}40` : 'transparent',
-                        '&:hover': { bgcolor: isActive ? `${c.accent.primary}55` : `${c.text.tertiary}0A` },
-                        transition: 'background-color 0.12s',
-                      }}
-                    >
-                      {isRenaming ? (
-                        <InputBase
-                          autoFocus
-                          value={renameValue}
-                          onChange={(e) => setRenameValue(e.target.value)}
-                          onBlur={() => handleDashboardRenameSubmit(entry.id)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') handleDashboardRenameSubmit(entry.id);
-                            if (e.key === 'Escape') setRenamingDashboardId(null);
-                          }}
-                          onClick={(e) => e.stopPropagation()}
-                          onFocus={(e) => e.target.select()}
-                          sx={{
-                            flex: 1,
-                            minWidth: 0,
-                            fontSize: '0.875rem',
-                            fontWeight: isActive ? 500 : 400,
-                            color: isActive ? c.text.secondary : c.text.ghost,
-                            py: 0,
-                            px: 0.5,
-                            borderRadius: 0.75,
-                            border: `1px solid ${c.accent.primary}80`,
-                            bgcolor: `${c.bg.page}`,
-                            '& input': {
-                              padding: '1px 0',
-                            },
-                          }}
-                        />
-                      ) : (
-                        <Typography
-                          onDoubleClick={(e) => {
-                            e.stopPropagation();
-                            handleStartDashboardRename(entry.id, entry.name);
-                          }}
-                          sx={{
-                            color: isActive ? c.text.secondary : c.text.ghost,
-                            fontSize: '0.875rem',
-                            fontWeight: isActive ? 500 : 400,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            flex: 1,
-                            minWidth: 0,
-                          }}
-                        >
-                          {entry.name}
-                        </Typography>
-                      )}
-                    </Box>
-                  );
-                })}
-              </Box>
-            </Collapse>
-          </Box>
-
-          {/* Sections separate with air, not lines. */}
-          <Box sx={{ my: 0.75 }} />
-
-          <Box sx={{ px: 1, mb: 0.25 }}>
-            <ListItemButton
-              onClick={handleAppsClick}
-              onMouseEnter={() => {
-                const fn = (window as any).__openswarmPrefetchRoute;
-                if (typeof fn === 'function') fn('/apps');
-              }}
-              data-onboarding="sidebar-apps"
-              sx={{
-                borderRadius: 1.5,
-                py: 0.6,
-                px: 1.25,
-                bgcolor: isAppsRoute ? `${c.accent.primary}12` : 'transparent',
-                '&:hover': { bgcolor: isAppsRoute ? `${c.accent.primary}18` : `${c.text.tertiary}0A` },
-                transition: 'background-color 0.15s',
-              }}
-            >
-              <ListItemIcon sx={{ color: isAppsRoute ? c.accent.primary : c.text.tertiary, minWidth: 28 }}>
-                <LayoutGrid size={18} />
-              </ListItemIcon>
-              <ListItemText
-                primary="Apps"
-                sx={{
-                  '& .MuiListItemText-primary': {
-                    color: isAppsRoute ? c.text.primary : c.text.muted,
-                    fontSize: '0.875rem',
-                    fontWeight: isAppsRoute ? 600 : 400,
-                  },
-                }}
-              />
-              {appsList.length > 0 && (
-                <ExpandMoreIcon
-                  sx={{
-                    color: c.text.ghost,
-                    fontSize: 16,
-                    transition: 'transform 0.2s',
-                    transform: appsExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                  }}
-                />
-              )}
-            </ListItemButton>
-
-            <Collapse in={appsExpanded && appsList.length > 0} timeout={200}>
-              <Box
-                sx={{
-                  ml: 2,
-                  mt: 0.25,
-                  mb: 0.5,
-                  maxHeight: 240,
-                  overflow: 'auto',
-                  '&::-webkit-scrollbar': { width: 3 },
-                  '&::-webkit-scrollbar-track': { background: 'transparent' },
-                  '&::-webkit-scrollbar-thumb': { background: c.border.medium, borderRadius: 4 },
-                  scrollbarWidth: 'thin',
-                  scrollbarColor: `${c.border.medium} transparent`,
-                }}
-              >
-                {appsList.map((app) => {
-                  if (pendingDelete?.id === app.id) return null;  // hidden while its Undo toast is up
-                  const isActive = openViewCardOutputIds.has(app.id);
-                  const isRenamingApp = renamingAppId === app.id;
-                  const appName = app.name || 'Untitled App';
-                  return (
-                    <Box
-                      key={app.id}
-                      onClick={() => { if (!isRenamingApp) navigateToApp(app.id); }}
-                      onContextMenu={(e) => openRowMenu(e, 'app', app.id, appName)}
-                      onMouseEnter={(e) => {
-                        if (isRenamingApp) return;
-                        const top = e.currentTarget.getBoundingClientRect().top;
-                        if (peekTimerRef.current) clearTimeout(peekTimerRef.current);
-                        peekTimerRef.current = setTimeout(() => setPeek({ name: appName, description: app.description || '', thumbnail: app.thumbnail || null, top }), 350);
-                      }}
-                      onMouseLeave={() => {
-                        if (peekTimerRef.current) { clearTimeout(peekTimerRef.current); peekTimerRef.current = null; }
-                        setPeek(null);
-                      }}
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 0.75,
-                        pl: 1.25,
-                        pr: 0.5,
-                        py: isRenamingApp ? 0.25 : 0.5,
-                        mx: 0.5,
-                        cursor: isRenamingApp ? 'default' : 'pointer',
-                        borderRadius: `${c.radius.md}px`,
-                        bgcolor: isActive ? `${c.accent.primary}40` : 'transparent',
-                        '&:hover': { bgcolor: isActive ? `${c.accent.primary}55` : `${c.text.tertiary}0A` },
-                        '& .app-del-btn': { opacity: 0, transition: 'opacity 0.12s' },
-                        '&:hover .app-del-btn': { opacity: 1 },
-                        transition: 'background-color 0.12s',
-                      }}
-                    >
-                      {isRenamingApp ? (
-                        <InputBase
-                          autoFocus
-                          value={renameValue}
-                          onChange={(e) => setRenameValue(e.target.value)}
-                          onBlur={() => handleAppRenameSubmit(app.id)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') handleAppRenameSubmit(app.id);
-                            if (e.key === 'Escape') setRenamingAppId(null);
-                          }}
-                          onClick={(e) => e.stopPropagation()}
-                          onFocus={(e) => e.target.select()}
-                          sx={{
-                            flex: 1,
-                            minWidth: 0,
-                            fontSize: '0.875rem',
-                            fontWeight: isActive ? 500 : 400,
-                            color: isActive ? c.text.secondary : c.text.ghost,
-                            py: 0,
-                            px: 0.5,
-                            borderRadius: 0.75,
-                            border: `1px solid ${c.accent.primary}80`,
-                            bgcolor: `${c.bg.page}`,
-                            '& input': { padding: '1px 0' },
-                          }}
-                        />
-                      ) : (
-                        <>
-                          <Typewriter value={appName} enabled={!!app.name && app.name !== 'Untitled App'}>
-                            {(t) => (
-                              <Typography
-                                onDoubleClick={(e) => { e.stopPropagation(); handleStartAppRename(app.id, appName); }}
-                                sx={{
-                                  color: isActive ? c.text.secondary : c.text.ghost,
-                                  fontSize: '0.875rem',
-                                  fontWeight: isActive ? 500 : 400,
-                                  overflow: 'hidden',
-                                  textOverflow: 'ellipsis',
-                                  whiteSpace: 'nowrap',
-                                  flex: 1,
-                                  minWidth: 0,
-                                }}
-                              >
-                                {t}
-                              </Typography>
-                            )}
-                          </Typewriter>
-                          <IconButton
-                            className="app-del-btn"
-                            size="small"
-                            aria-label={`Delete ${appName}`}
-                            onClick={(e) => handleDeleteApp(e, app.id, appName)}
-                            sx={{ p: 0.25, flexShrink: 0, color: c.text.ghost, '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}18` } }}
-                          >
-                            <CloseGlyph size={13} />
-                          </IconButton>
-                        </>
-                      )}
-                    </Box>
-                  );
-                })}
-              </Box>
-            </Collapse>
-          </Box>
-
-        </Box>
-
-        <Box
-          sx={{
-            px: 1,
-            py: 1.25,
-          }}
-        >
-          <ListItemButton
-            onClick={() => dispatch(openSettingsModal())}
-            data-onboarding="sidebar-settings-button"
-            sx={{
-              borderRadius: 1.5,
-              py: 0.6,
-              px: 1.25,
-              '& .MuiListItemIcon-root svg': { transition: 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)' },
-              '&:hover': { bgcolor: `${c.text.tertiary}0A` },
-              '&:hover .MuiListItemIcon-root svg': { transform: 'rotate(90deg)' },
-              transition: 'background-color 0.15s',
-            }}
-          >
-            <ListItemIcon sx={{ color: c.text.tertiary, minWidth: 28, position: 'relative' }}>
-              <LucideSettings size={18} />
-              {showUpdateDot && (
-                <Box
-                  sx={{
-                    position: 'absolute',
-                    top: 2,
-                    right: 10,
-                    width: 7,
-                    height: 7,
-                    borderRadius: '50%',
-                    bgcolor: c.accent.primary,
-                    border: `1.5px solid ${c.bg.secondary}`,
-                  }}
-                />
-              )}
-            </ListItemIcon>
-            <ListItemText
-              primary="Settings"
-              sx={{
-                '& .MuiListItemText-primary': {
-                  color: c.text.muted,
-                  fontSize: '0.875rem',
-                  fontWeight: 400,
-                },
-              }}
-            />
-          </ListItemButton>
-        </Box>
-      </Box>
-      <Box
-        onMouseDown={handleResizeStart}
-        onDoubleClick={handleResizeDoubleClick}
-        sx={{
-          // Hide the resize seam when the sidebar is a floating overlay (nothing to resize against).
-          display: sideOverlay ? 'none' : 'block',
-          // 6px hit-target at -3px margin overlaps the seam so the drag region doesn't read as a visible empty strip.
-          width: 6,
-          marginLeft: '-3px',
-          marginRight: '-3px',
-          flexShrink: 0,
-          cursor: 'col-resize',
-          position: 'relative',
-          zIndex: 10,
-          '&::after': {
-            content: '""',
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            width: 2,
-            bgcolor: 'transparent',
-            transition: 'background-color 0.2s',
-          },
-          '&:hover::after': {
-            bgcolor: c.border.strong,
-          },
-          '&:active::after': {
-            bgcolor: `${c.accent.primary}40`,
-          },
-        }}
-      />
-      </>
-      )}
+      {/* Sidebar excised: dashboards live in the Spaces strip (hover the top edge; right-click a tile for rename/duplicate/delete). */}
 
       <Box sx={{
         flex: 1,
diff --git a/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx b/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
index 1e0f743c..8c4c9c69 100644
--- a/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/SpacesStrip.tsx
@@ -4,23 +4,34 @@ import Typography from '@mui/material/Typography';
 import { Plus } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { createDashboard } from '@/shared/state/dashboardsSlice';
+import { createDashboard, deleteDashboard, duplicateDashboard, renameDashboard } from '@/shared/state/dashboardsSlice';
 
 // macOS Spaces, one for one: rest the cursor on the top edge and the spaces bar slides down,
 // full-size thumbnail tiles with the name beneath, + at the right end to add a space. It stays
 // up while the cursor is anywhere near the bar and only leaves once you move well below it
-// (mouseleave flicker is exactly what Mission Control does not do). Replaces the sidebar.
+// (mouseleave flicker is exactly what Mission Control does not do). Right-click a tile for
+// Rename / Duplicate / Delete; rename edits the name inline under the tile.
 const HOT_ZONE_PX = 3;
 const TILE_W = 176;
 const TILE_H = 104;
 const DISMISS_BELOW_PX = 72;
 
+interface TileMenu {
+  id: string;
+  name: string;
+  x: number;
+  y: number;
+}
+
 const SpacesStrip: React.FC = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const location = useLocation();
   const dashboards = useAppSelector((s) => s.dashboards.items);
   const [open, setOpen] = React.useState(false);
+  const [menu, setMenu] = React.useState<TileMenu | null>(null);
+  const [renamingId, setRenamingId] = React.useState<string | null>(null);
+  const [renameValue, setRenameValue] = React.useState('');
   const barRef = React.useRef<HTMLDivElement | null>(null);
 
   const activeId = React.useMemo(() => {
@@ -35,15 +46,26 @@ const SpacesStrip: React.FC = () => {
 
   // Mission Control dismissal: while open, watch the cursor globally and close only once it has
   // moved a comfortable distance BELOW the bar; hovering within or near the bar never flickers.
+  // The watcher pauses while a context menu or rename is live, so those can extend below the bar.
   React.useEffect(() => {
-    if (!open) return undefined;
+    if (!open || menu || renamingId) return undefined;
     const onMove = (e: MouseEvent): void => {
       const barBottom = barRef.current?.getBoundingClientRect().bottom ?? 0;
       if (e.clientY > barBottom + DISMISS_BELOW_PX) setOpen(false);
     };
     window.addEventListener('mousemove', onMove);
     return () => window.removeEventListener('mousemove', onMove);
-  }, [open]);
+  }, [open, menu, renamingId]);
+
+  // The context menu closes on any outside press or Esc, like a native menu.
+  React.useEffect(() => {
+    if (!menu) return undefined;
+    const onDown = (): void => setMenu(null);
+    const onKey = (e: KeyboardEvent): void => { if (e.key === 'Escape') setMenu(null); };
+    window.addEventListener('mousedown', onDown);
+    window.addEventListener('keydown', onKey);
+    return () => { window.removeEventListener('mousedown', onDown); window.removeEventListener('keydown', onKey); };
+  }, [menu]);
 
   const addSpace = (): void => {
     void dispatch(createDashboard('Untitled Dashboard')).then((result) => {
@@ -54,6 +76,37 @@ const SpacesStrip: React.FC = () => {
     });
   };
 
+  const commitRename = (id: string): void => {
+    const trimmed = renameValue.trim();
+    const previousName = dashboards[id]?.name;
+    if (trimmed && trimmed !== previousName) {
+      void dispatch(renameDashboard({ id, name: trimmed, previousName }));
+    }
+    setRenamingId(null);
+  };
+
+  const duplicateSpace = (id: string): void => {
+    void dispatch(duplicateDashboard(id)).then((result) => {
+      if (duplicateDashboard.fulfilled.match(result)) navigate(`/dashboard/${(result.payload as { id: string }).id}`);
+    });
+  };
+
+  const deleteSpace = (id: string): void => {
+    void dispatch(deleteDashboard(id));
+    if (id === activeId) {
+      const next = list.find((d) => d.id !== id);
+      if (next) navigate(`/dashboard/${next.id}`);
+    }
+  };
+
+  const menuItemSx = {
+    display: 'flex', alignItems: 'center', width: '100%', px: 1.5, py: 0.75,
+    border: 'none', background: 'transparent', borderRadius: '7px',
+    color: 'rgba(255,255,255,0.9)', fontFamily: 'inherit', fontSize: '0.8125rem',
+    cursor: 'pointer', textAlign: 'left' as const,
+    '&:hover': { background: 'rgba(255,255,255,0.1)' },
+  };
+
   return (
     <>
       <Box onMouseEnter={() => setOpen(true)} sx={{ position: 'fixed', top: 0, left: 0, right: 0, height: HOT_ZONE_PX, zIndex: 99998 }} />
@@ -74,11 +127,13 @@ const SpacesStrip: React.FC = () => {
       >
         {list.map((d) => {
           const active = d.id === activeId;
+          const renaming = renamingId === d.id;
           return (
             <Box
               key={d.id}
               component="button"
-              onClick={() => { navigate(`/dashboard/${d.id}`); setOpen(false); }}
+              onClick={() => { if (!renaming) { navigate(`/dashboard/${d.id}`); setOpen(false); } }}
+              onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); setMenu({ id: d.id, name: d.name || 'Untitled', x: e.clientX, y: e.clientY }); }}
               sx={{
                 display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75,
                 p: 0, border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
@@ -102,9 +157,30 @@ const SpacesStrip: React.FC = () => {
                   <Box sx={{ width: '100%', height: '100%', background: 'linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05))' }} />
                 )}
               </Box>
-              <Typography sx={{ color: 'rgba(255,255,255,0.92)', fontSize: '0.8125rem', fontWeight: active ? 600 : 500, maxWidth: TILE_W, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                {d.name || 'Untitled'}
-              </Typography>
+              {renaming ? (
+                <Box
+                  component="input"
+                  autoFocus
+                  value={renameValue}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRenameValue(e.target.value)}
+                  onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                  onKeyDown={(e: React.KeyboardEvent) => {
+                    e.stopPropagation();
+                    if (e.key === 'Enter') commitRename(d.id);
+                    if (e.key === 'Escape') setRenamingId(null);
+                  }}
+                  onBlur={() => commitRename(d.id)}
+                  sx={{
+                    width: TILE_W - 24, textAlign: 'center', border: '1px solid rgba(255,255,255,0.35)',
+                    borderRadius: '6px', background: 'rgba(0,0,0,0.35)', outline: 'none',
+                    color: 'rgba(255,255,255,0.95)', fontFamily: 'inherit', fontSize: '0.8125rem', py: 0.2,
+                  }}
+                />
+              ) : (
+                <Typography sx={{ color: 'rgba(255,255,255,0.92)', fontSize: '0.8125rem', fontWeight: active ? 600 : 500, maxWidth: TILE_W, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {d.name || 'Untitled'}
+                </Typography>
+              )}
             </Box>
           );
         })}
@@ -124,6 +200,34 @@ const SpacesStrip: React.FC = () => {
           <Plus size={22} />
         </Box>
       </Box>
+      {menu && (
+        <Box
+          onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
+          sx={{
+            position: 'fixed', top: menu.y + 4, left: Math.min(menu.x, window.innerWidth - 180), zIndex: 100001,
+            width: 168, p: 0.5, borderRadius: '10px',
+            background: 'rgba(28,25,33,0.96)',
+            backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
+            border: '1px solid rgba(255,255,255,0.12)',
+            boxShadow: '0 18px 44px rgba(0,0,0,0.5)',
+          }}
+        >
+          <Box component="button" sx={menuItemSx} onClick={() => { setRenameValue(menu.name); setRenamingId(menu.id); setMenu(null); }}>
+            Rename
+          </Box>
+          <Box component="button" sx={menuItemSx} onClick={() => { duplicateSpace(menu.id); setMenu(null); }}>
+            Duplicate
+          </Box>
+          <Box
+            component="button"
+            disabled={list.length <= 1}
+            sx={{ ...menuItemSx, color: list.length <= 1 ? 'rgba(255,255,255,0.3)' : '#ff7b72', cursor: list.length <= 1 ? 'default' : 'pointer', '&:hover': list.length <= 1 ? {} : { background: 'rgba(255,123,114,0.12)' } }}
+            onClick={() => { if (list.length > 1) { deleteSpace(menu.id); setMenu(null); } }}
+          >
+            Delete
+          </Box>
+        </Box>
+      )}
     </>
   );
 };

From 23b9d6a0390c38b7291417bc5f4e831f0274d544 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:41 -0700
Subject: [PATCH 206/248] [eric] lint: peer-folder + ctypes exceptions,
 vendored toolui lintignore, wire-field vulture whitelist

---
 frontend/src/toolui/.lintignore    |  1 +
 linter/config/config.json          | 37 ++++++++++++++++++++++++------
 linter/config/vulture_whitelist.py |  8 +++++++
 3 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/toolui/.lintignore

diff --git a/frontend/src/toolui/.lintignore b/frontend/src/toolui/.lintignore
new file mode 100644
index 00000000..05a6f010
--- /dev/null
+++ b/frontend/src/toolui/.lintignore
@@ -0,0 +1 @@
+# Vendored tool-ui component library (pierre). Do not hand-edit; upstream drift lands wholesale.
diff --git a/linter/config/config.json b/linter/config/config.json
index f3d7a864..7e7ff818 100644
--- a/linter/config/config.json
+++ b/linter/config/config.json
@@ -19,22 +19,33 @@
     "eslint-knip": "Node tooling deferred to a later pass.",
     "classes": "Placeholder check, not wired up. endpoints: orphaned-endpoint triage deferred.",
     "max-file-lines-exceptions": "Grandfather list of pre-existing >300-line files (existing debt, not new). Paths updated after the folder-tree restructure moved several of them. The two manager/prompt/* entries are from the agent_manager decomposition: prompt_context.py aggregates the system-prompt context builders and attachments.py is one cohesive 230-line attachment resolver; both are single-responsibility and a few lines over, not splittable without an artificial seam.",
-    "max-folder-items-exceptions": "Exact-path allow for folders intentionally over the cap. The rule trips at >7 (7 items is fine, the 8th tips it), so only genuinely 8+ folders are listed. backend/ and backend/apps are FastAPI feature-package registries (each child is an app mounted in main.py); agents/ aggregates agent subsystems; agents/manager/ is the agent_manager god-object decomposition (cohesive AgentManager mixins + standalone run helpers + the streaming/permissions/prompt/session subtrees), conventionally flat like agents/ and core/ since its standalone helpers are heterogeneous and don't group cleanly; agents/manager/streaming and agents/manager/session are flat peer collections of one-module-per-concern handlers; core/, tools_lib/, tests/ are conventionally flat. Frontend: app/pages is the page registry, AgentChat/ChatInput/Settings-sections/Onboarding are organizational parents, and shared/state (Redux slices) plus hooks/steps/mcp-cards/Views are flat peer collections. scripts/, electron/, linter/checks/ are flat tool dirs. These replaced blanket .lintignore-max-folder-items sentinels (backend, frontend, scripts, electron, linter/checks) so the rule still catches NEW unplanned bloat everywhere else. Kept as whole-subtree sentinels on purpose: debugger/ (self-contained injected sub-tool with its own Vite GUI), webapp_template (Vite scaffold payload), and vendored mcp-bundles.",
+    "max-folder-items-exceptions": "Exact-path allow for folders intentionally over the cap. The rule trips at >7 (7 items is fine, the 8th tips it), so only genuinely 8+ folders are listed. backend/ and backend/apps are FastAPI feature-package registries (each child is an app mounted in main.py); agents/ aggregates agent subsystems; agents/manager/ is the agent_manager god-object decomposition (cohesive AgentManager mixins + standalone run helpers + the streaming/permissions/prompt/session subtrees), conventionally flat like agents/ and core/ since its standalone helpers are heterogeneous and don't group cleanly; agents/manager/streaming and agents/manager/session are flat peer collections of one-module-per-concern handlers; core/, tools_lib/, tests/ are conventionally flat. Frontend: app/pages is the page registry, AgentChat/ChatInput/Settings-sections/Onboarding are organizational parents, and shared/state (Redux slices) plus hooks/steps/mcp-cards/Views are flat peer collections. scripts/, electron/, linter/checks/ are flat tool dirs. These replaced blanket .lintignore-max-folder-items sentinels (backend, frontend, scripts, electron, linter/checks) so the rule still catches NEW unplanned bloat everywhere else. Kept as whole-subtree sentinels on purpose: debugger/ (self-contained injected sub-tool with its own Vite GUI), webapp_template (Vite scaffold payload), and vendored mcp-bundles. 2026-07 desktop-shell additions: Dashboard canvas/cards/desktop + hooks/interaction + hooks/lifecycle, AgentChat bubbles/tool-ui, and shared/styles are flat peer collections (one component or hook per concern) that crossed 7 as the redesign surface grew. frontend/src/toolui carries a whole-subtree .lintignore: vendored tool-ui component library (pierre), same treatment as mcp-bundles.",
     "import-cycles": "Flags RUNTIME circular imports only (SCC>1). Skips type-only imports (import type / export type) and dynamic import() since neither runs at module init, which is why the idiomatic Redux store<->hooks type cycle is not flagged. Frontend alias resolution comes from import-cycle-aliases. Zero cycles today; the check keeps it that way.",
-    "ruff + pyright": "Ported from Haik's linter (haik/feat/ingest). ruff is narrowed to F401/F811/F841 (unused imports/redefs/locals) and intentionally DROPS Haik's ARG001/ARG002 (unused args): our SDK-callback signatures require unused params (can_use_tool/pre_tool_hook take a `context` they don't use) and we ban the `_unused` prefix, so ARG is noise here. pyright runs Haik's existence-only config (typeCheckingMode off) with reportAttributeAccessIssue ENABLED: the AgentManager behavior classes now inherit a typing-only AgentManagerProtocol base (manager/AgentManagerProtocol.py) that declares the composed __init__ state + cross-class methods, so the checker sees self.sessions etc. from inside a mixin. pyright caught real bugs: a dangling `_conns` ref + TWO broken lazy imports (`_load_all`/`_load` from outputs.py, renamed to load_all/load in workspace_io but the import sites weren't updated — App Builder workspace seeding/name-sync was silently failing in a try/except). The one grandfathered SURFACE file (handle_assistant_message) is the SDK-optional try/except-import boundary (TextBlock=object fallback defeats isinstance narrowing). Both grandfather pre-existing debt by file; the refactor surface is clean. Requires `ruff` + `pyright` on PATH (added to requirements-dev.txt); pyright's config expects the venv at backend/.venv.",
-    "no-underscore-names + p-private": "Convention checks ported verbatim from Haik's linter (haik/feat/ingest): no-underscore-names bans leading-underscore names (a dead-code-tooling blind spot; use p_ for private), p-private enforces that p_-prefixed names are accessed only inside their owning file/class (cross-file/class use means the name should be public). Backend Python only. The exception lists grandfather pre-existing debt that landed with the workflows/analytics forward-ports (eric's 'don't mass-migrate untouched files' rule); the agent_manager refactor surface is clean. NOTE: Haik's full linter (his branch also adds pyright + ruff and runs a different enabled set) should eventually supersede this; these two were lifted to enforce the p_ conventions on eric/dev now."
+    "ruff + pyright": "Ported from Haik's linter (haik/feat/ingest). ruff is narrowed to F401/F811/F841 (unused imports/redefs/locals) and intentionally DROPS Haik's ARG001/ARG002 (unused args): our SDK-callback signatures require unused params (can_use_tool/pre_tool_hook take a `context` they don't use) and we ban the `_unused` prefix, so ARG is noise here. pyright runs Haik's existence-only config (typeCheckingMode off) with reportAttributeAccessIssue ENABLED: the AgentManager behavior classes now inherit a typing-only AgentManagerProtocol base (manager/AgentManagerProtocol.py) that declares the composed __init__ state + cross-class methods, so the checker sees self.sessions etc. from inside a mixin. pyright caught real bugs: a dangling `_conns` ref + TWO broken lazy imports (`_load_all`/`_load` from outputs.py, renamed to load_all/load in workspace_io but the import sites weren't updated \u2014 App Builder workspace seeding/name-sync was silently failing in a try/except). The one grandfathered SURFACE file (handle_assistant_message) is the SDK-optional try/except-import boundary (TextBlock=object fallback defeats isinstance narrowing). Both grandfather pre-existing debt by file; the refactor surface is clean. Requires `ruff` + `pyright` on PATH (added to requirements-dev.txt); pyright's config expects the venv at backend/.venv.",
+    "no-underscore-names + p-private": "Convention checks ported verbatim from Haik's linter (haik/feat/ingest): no-underscore-names bans leading-underscore names (a dead-code-tooling blind spot; use p_ for private), p-private enforces that p_-prefixed names are accessed only inside their owning file/class (cross-file/class use means the name should be public). Backend Python only. The exception lists grandfather pre-existing debt that landed with the workflows/analytics forward-ports (eric's 'don't mass-migrate untouched files' rule); the agent_manager refactor surface is clean. NOTE: Haik's full linter (his branch also adds pyright + ruff and runs a different enabled set) should eventually supersede this; these two were lifted to enforce the p_ conventions on eric/dev now. browser_cookies.py is excepted for `_fields_` only: a ctypes.Structure protocol name required by the ctypes metaclass, not our naming."
   },
   "rules": {
     "max-file-lines": 300,
     "max-folder-items": 7,
-    "import-cycle-aliases": { "@/": "frontend/src/" },
+    "import-cycle-aliases": {
+      "@/": "frontend/src/"
+    },
     "vulture-min-confidence": 1,
     "vulture-error-threshold": 1,
     "no-nested-imports": true,
-    "endpoint-ignore-routes": ["*/callback", "*/callback/*"],
+    "endpoint-ignore-routes": [
+      "*/callback",
+      "*/callback/*"
+    ],
     "ruff-select": "F401,F811,F841"
   },
-  "include_extensions": [".py", ".ts", ".tsx", ".js", ".jsx"],
+  "include_extensions": [
+    ".py",
+    ".ts",
+    ".tsx",
+    ".js",
+    ".jsx"
+  ],
   "exclude": [
     "node_modules",
     ".venv",
@@ -62,6 +73,7 @@
   ],
   "exceptions": {
     "max-file-lines": [
+      "backend/apps/agents/show_ui_mcp_server.py",
       "backend/apps/agents/agents.py",
       "backend/apps/agents/proxy/anthropic_proxy.py",
       "backend/apps/agents/proxy/anthropic_to_openai.py",
@@ -164,6 +176,14 @@
       "frontend/src/app/pages/AgentChat/ChatInput",
       "frontend/src/app/pages/AgentChat/ChatInput/hooks",
       "frontend/src/app/pages/AgentChat/mcp-cards",
+      "frontend/src/app/pages/AgentChat/bubbles",
+      "frontend/src/app/pages/AgentChat/tool-ui",
+      "frontend/src/app/pages/Dashboard/canvas",
+      "frontend/src/app/pages/Dashboard/cards",
+      "frontend/src/app/pages/Dashboard/desktop",
+      "frontend/src/app/pages/Dashboard/hooks/interaction",
+      "frontend/src/app/pages/Dashboard/hooks/lifecycle",
+      "frontend/src/shared/styles",
       "frontend/src/app/pages/Settings/sections",
       "frontend/src/app/pages/Views",
       "frontend/src/app/components/Onboarding",
@@ -174,10 +194,13 @@
     ],
     "no-nested-imports": [],
     "import-cycles": [],
-    "vulture": ["backend/tests/*"],
+    "vulture": [
+      "backend/tests/*"
+    ],
     "endpoints": [],
     "classes": [],
     "no-underscore-names": [
+      "backend/apps/onboarding/usage/browser_cookies.py",
       "backend/apps/agents/schedule_mcp_server.py",
       "backend/apps/workflows/audit.py",
       "backend/apps/workflows/escalation.py",
diff --git a/linter/config/vulture_whitelist.py b/linter/config/vulture_whitelist.py
index 6465ef7d..91ddb509 100644
--- a/linter/config/vulture_whitelist.py
+++ b/linter/config/vulture_whitelist.py
@@ -64,3 +64,11 @@ preview_updated_at
 # cross-module call. resolve_attached_skills next to it isn't flagged only
 # because tests also call it directly.
 resolve_forced_tools
+
+# Wire fields (same class as preview_updated_at): assigned in Python, read only
+# through model_dump()/JSON by the frontend, so vulture can't see the read.
+# used_llm: prep tells the onboarding pipeline whether the reveal is aux-grounded.
+# usage_summary: harvest summary handed to prep. last_run_at: workflow row badge.
+used_llm
+usage_summary
+last_run_at

From c57af2e6e123b65e623fd49113487ee684605939 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:41 -0700
Subject: [PATCH 207/248] [eric] onboarding: prep split into a package under
 the caps; cookie helpers de-prefixed + win32-guarded

---
 backend/apps/onboarding/onboarding.py         |   2 +-
 backend/apps/onboarding/prep.py               | 404 ------------------
 backend/apps/onboarding/prep/__init__.py      |   0
 backend/apps/onboarding/prep/build_prep.py    |  95 ++++
 backend/apps/onboarding/{ => prep}/menu.py    |   2 +-
 .../onboarding/{ => prep}/parse_helpers.py    |   0
 backend/apps/onboarding/prep/parse_prep.py    | 105 +++++
 backend/apps/onboarding/prep/prompts.py       | 126 ++++++
 backend/apps/onboarding/prep/scan_fallback.py |  97 +++++
 .../apps/onboarding/usage/browser_cookies.py  |  25 +-
 backend/tests/test_onboarding.py              | 159 +------
 backend/tests/test_onboarding_harvest.py      | 153 +++++++
 12 files changed, 592 insertions(+), 576 deletions(-)
 delete mode 100644 backend/apps/onboarding/prep.py
 create mode 100644 backend/apps/onboarding/prep/__init__.py
 create mode 100644 backend/apps/onboarding/prep/build_prep.py
 rename backend/apps/onboarding/{ => prep}/menu.py (98%)
 rename backend/apps/onboarding/{ => prep}/parse_helpers.py (100%)
 create mode 100644 backend/apps/onboarding/prep/parse_prep.py
 create mode 100644 backend/apps/onboarding/prep/prompts.py
 create mode 100644 backend/apps/onboarding/prep/scan_fallback.py
 create mode 100644 backend/tests/test_onboarding_harvest.py

diff --git a/backend/apps/onboarding/onboarding.py b/backend/apps/onboarding/onboarding.py
index a0147b6e..bf8223f6 100644
--- a/backend/apps/onboarding/onboarding.py
+++ b/backend/apps/onboarding/onboarding.py
@@ -27,7 +27,7 @@ async def p_budgeted(coro: Awaitable[str]) -> str:
 from backend.apps.onboarding.identity import build_identity
 from backend.apps.onboarding.local_scan import run_local_scan
 from backend.apps.onboarding.models import PrepRequest
-from backend.apps.onboarding.prep import build_prep
+from backend.apps.onboarding.prep.build_prep import build_prep
 from backend.config.Apps import SubApp
 
 
diff --git a/backend/apps/onboarding/prep.py b/backend/apps/onboarding/prep.py
deleted file mode 100644
index 64deb69b..00000000
--- a/backend/apps/onboarding/prep.py
+++ /dev/null
@@ -1,404 +0,0 @@
-"""Turn the local scan + app picks into a personalized greeting and starters.
-
-One cheap aux call on whatever lane the user just connected; every failure path
-returns the static fallback so the reveal can never be an error card.
-"""
-
-import asyncio
-import json
-import re
-from typing import List, Optional
-
-from typeguard import typechecked
-
-from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
-from backend.apps.onboarding.menu import build_menu
-from backend.apps.onboarding.models import PrepRequest, PrepResponse, ScanResult
-from backend.apps.onboarding.parse_helpers import build_starters, load_json_object, normalize_json_text, salvage_flat_objects, strip_dashes
-from backend.apps.settings.models import AppSettings, PersonalizedAutomation, PersonalizedStarter
-
-VALID_CADENCE = {"daily", "weekday", "weekly"}
-
-FALLBACK_STARTERS: List[PersonalizedStarter] = [
-    PersonalizedStarter(title="Clean up Downloads", prompt="Sort my Downloads folder into tidy subfolders. Show me the plan before moving anything."),
-    PersonalizedStarter(title="Research something", prompt="Research the best noise-cancelling headphones under $300 and give me a comparison table."),
-    PersonalizedStarter(title="Build a tiny app", prompt="Build me a simple habit tracker app I can use right now."),
-    PersonalizedStarter(title="Plan a trip", prompt="Plan a 3-day weekend trip itinerary and turn it into a printable page."),
-]
-
-P_SYSTEM = (
-    "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
-    "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
-    "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
-    '{"headline": string, "greeting": string, "epithets": [string, string, string], "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "research_title": string, "research_prompt": string, "research_reason": string, "browser_title": string, "browser_prompt": string, "browser_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
-    "First, silently infer a short, confident profile of this user: who they are and what they are working on. "
-    "If usage_summary is present it is the STRONGEST signal (a distilled profile of who this person is and what "
-    "they actually work on, read from their real AI conversations); weight it above everything else. Do NOT let a "
-    "single installed app override it: signal_apps (an IDE, a design app, a DAW) is only a WEAK hint about their "
-    "craft (having Xcode installed does not make someone an iOS developer), used only to color what the profile "
-    "already says, then folders, plan tier, email domain. Tune every task and the personal app to that profile; "
-    "do not output the profile. "
-    "THE BAR every single item must clear: it is either (a) SPECIFICALLY useful to THIS person's real work in a way "
-    "they could not quickly get elsewhere (it uses their ACTUAL files, projects, or data to produce a real finished "
-    "thing worth keeping), OR (b) a genuine 'oh, it can do THAT?' that makes them see a hundred uses (a surprising "
-    "capability shown on their real stuff). A generic chore FAILS the bar and must be replaced: a file-cleanup report, "
-    "a folder audit, a read-only summary or mirror dashboard of their data, a research overview they could google, an "
-    "empty log file, or any 'set up / organize / plan' task is BANNED. "
-    "SPAN THE WHOLE PERSON. First, silently list this person's DISTINCT life threads from the profile (for example: "
-    "their main work or product, their sport or fitness, their food or local life, their tech or tooling curiosity, "
-    "their games or hobbies, a recurring practical need). Then assign the four starters to FOUR DIFFERENT threads, "
-    "one each. HARD RULE: treat EVERYTHING about their company, product, startup, pitch, competitive landscape, "
-    "positioning, pricing, fundraising, growth, or the thing they are building as ONE single 'work' bucket. EXACTLY "
-    "ONE of the four starters may come from that work bucket, no more, count them before you answer. The other THREE "
-    "must each come from a clearly DIFFERENT NON-work thread you actually see in the profile (their sport or fitness, "
-    "their food or local life, their games or hobbies, a personal curiosity or practical need). Anything work-adjacent, "
-    "even a browser tool 'for the product' or research 'for the pitch', is WORK and does NOT count as a non-work "
-    "thread. Before you finalize, verify that THREE of the four starters have nothing to do with their work; if they "
-    "do, replace them. The app and the research should also lean to NON-work threads, not pile onto the work one. The "
-    "ONLY exception: if the profile genuinely shows they talk about almost nothing but that one thing, follow the real "
-    "data instead of forcing variety. Every item still clears the bar on its own. "
-    "Exactly 4 starters. Each title is 2-5 words that PLAINLY say what the task does (like 'Frame my screenshots' or "
-    "'Compare headphones'), never clever, punny, or brand-style. Each prompt is a concrete, safe, immediately runnable "
-    "task referencing the user's real folders, files, or picked apps; never invent facts. The FIRST starter is the one "
-    "that RUNS automatically, so it must be safe unattended AND clear the bar: a real, specific DELIVERABLE built from "
-    "the user's ACTUAL files that they'd want and could not quickly make themselves (a designer with many screenshots: "
-    "a browsable gallery page of their app screenshots; someone with many notebooks or PDFs of one kind: an indexed, "
-    "searchable library page of them). It READS their real files and writes ONE new artifact (a page or a file); it "
-    "must NEVER modify or delete an existing file. It must NOT be a cleanup report, a folder audit, or a 'plan'. Every "
-    "starter must produce a tangible result the user can see and want; never propose setup, documentation of "
-    "preferences, or planning-only tasks. "
-    "Each starter's 'reason' is ONE short standalone clause (max 12 words, no leading 'because') naming the SPECIFIC "
-    "real thing you observed (a folder, a file count, a picked app, a usage fact) that makes this task useful for THIS "
-    "user; it must be grounded in the input facts, never invented, and read like a person pointing at what they saw. "
-    "Design ONE small but genuinely useful WORKING TOOL for this person's craft and make it the CENTERPIECE, this is "
-    "the 'oh, it can build me THAT?' moment. It must DO something: take their input and produce useful output, or "
-    "automate a fiddly micro-task they repeat in their ACTUAL work (inferred from usage_summary + signal_apps). It is "
-    "a real interactive tool they would reopen and USE, NOT a read-only dashboard, NOT a mirror of their data, NOT a "
-    "summary, NOT a feed. Examples of the SHAPE only (never copy, always tailor to THEM, and never "
-    "default to an iOS, app, or coding tool just because it is a familiar example): for a writer, a tool that "
-    "rewrites a pasted paragraph across tones; for a data person, a tool that pastes a CSV and instantly charts it; "
-    "for a musician, a tool that transposes a chord progression; for a language learner, a drill built from words "
-    "they paste. Match the shape to THIS person's actual craft from the profile. app_title 2-4 words that plainly name what it DOES "
-    "(like 'Icon Previewer' or 'Screenshot Framer'), never punny. app_prompt starts with 'Build me' and specifies the "
-    "tool's INPUT, what it PRODUCES, and the interaction; fully client-side and self-contained. It MUST run "
-    "on the user's input with DETERMINISTIC logic only (math, parsing, formatting, layout, charts, filtering, "
-    "transforms). It must NEVER call an AI model, an LLM, a chat completion, or any network/remote API, those "
-    "only work inside a published app and will fail in the reveal with 'make sure you're on a published app'. "
-    "If the idea would need AI generation to work, pick a DIFFERENT tool that doesn't (no accounts, no API keys, "
-    "no backend, no fetch, everything computed in the browser). app_reason follows the same one-clause grounded-"
-    "observation rule as a starter reason and says why THIS tool fits their real work. "
-    "Also pick the SINGLE topic this user most repeatedly asks their AI about (from usage_summary; if it is thin, use "
-    "their strongest work signal from signal_apps or folders) and turn it into a live web-research task. research_title "
-    "is 2-4 words plainly naming the topic (like 'App Store Fees' or 'Best Vector DBs'), never clever or punny. "
-    "research_prompt is one instruction telling the agent to search the web RIGHT NOW and produce a tight, useful, "
-    "current answer or comparison of THAT topic for this user (an actual answer, never a plan); it must demand "
-    "THIS-YEAR information with publication dates on sources, so the answer cannot quietly be stale training data. "
-    "research_reason follows the one-clause grounded-observation rule and names the specific recurring question you saw. "
-    "Also design ONE browser task that shows the agent DRIVING a real website live (so the user watches it control a "
-    "browser, not just fetch text). browser_title is 2-4 words plainly naming it (like 'Nearby Michelin' or 'Jump "
-    "Threads'). browser_prompt tells the agent to OPEN a specific real, PUBLIC website by name and do a genuinely "
-    "MULTI-STEP task there: navigate, search, click through, read across a few pages, compare, then report what it "
-    "found. It must be safe read-only browsing on public pages only, NEVER log in, buy, post, submit, or act on the "
-    "user's behalf. Pick a topic from a DIFFERENT thread than the app and the research, ideally a fun or personal "
-    "interest (food, sport, travel, a hobby), not their work. browser_reason follows the one-clause grounded rule. "
-    "THE FOUR THINGS THAT ACTUALLY RUN are the app, the research, the browser task, and the first automation. This "
-    "rule OVERRIDES every 'pick their craft / their top topic' hint above: assign each of these four to a DIFFERENT "
-    "thread of this person's life, and AT MOST ONE of the four may touch their work/company/product/pitch/competitors, "
-    "count them before you answer. FIXED ASSIGNMENT: the APP must be built for a NON-work thread (a hobby, sport, "
-    "food, or personal need), it is a delightful surprise precisely because it is NOT about their job (a jump-log "
-    "tool, a restaurant picker, a practice-drill tool, never a pitch/competitor/metrics dashboard). The BROWSER task "
-    "must also take a clearly personal or fun NON-work thread. Only the RESEARCH may be about their work, and only if "
-    "that is genuinely their burning question; if you use work for the research, then the first automation must be "
-    "NON-work too, so no more than ONE of the four is ever about work. Make all four GENUINELY MULTI-STEP (several "
-    "real actions, never a one-liner). "
-    "Also propose 1-2 automations: recurring routines that genuinely help THIS user and clear the bar (NEVER a folder "
-    "cleanup, NEVER an empty log, NEVER 'keep a dashboard updated'). A good one delivers something the user actually "
-    "wants on a cadence, e.g. a daily digest of what is new in their SPECIFIC niche (named from usage_summary and "
-    "signal_apps) written to a dated file they will read, or a weekly pull of new items relevant to a project they are "
-    "shipping. Each automation title is 2-4 words that plainly name it (like 'iOS Design Digest'), cadence is exactly "
-    "'daily', 'weekday', or 'weekly'. The prompt is the COMPLETE instruction an agent executes alone on each scheduled "
-    "run with NO human present: produce its result in one pass, never ask questions, never wait for input, never set up "
-    "schedules or reminders (the schedule already exists), and write the result to a concrete file (like "
-    "Documents/<name>_<date>.md). 'Search X and write the result to Y' is right; 'remind me' or 'set up a log' is wrong. "
-    "Safe to run unattended (never delete without review). "
-    "The HEADLINE is the single most important line: a punchy, specific, SCANNABLE identity hook of AT MOST 10 "
-    "words that this person reads in one second and thinks 'yes, that's me'. Name their actual work and their one "
-    "defining trait, no filler, no full sentence, no period. It is read at a glance in big type, so it must NOT be "
-    "a paragraph. Example shapes only (never copy, tailor to THEM): 'OpenSwarm founder who measures everything, "
-    "vertical jump to agent latency' or 'Ships iOS apps, obsessed with the last 5% of polish'. Sharp, not wordy. "
-    "epithets: exactly 3 short identity titles for this person, 2-4 plain words each (like 'QUIET POWER USER' but THEIRS, drawn from their real work and interests in the profile), confident and warm, never punny, never generic. "
-    "The greeting is one or two warm, punchy sentences that make this person feel INSTANTLY understood, the "
-    "'wait, it actually gets me' hook. Lead with the single most specific true thing about them from the profile "
-    "(their actual project BY NAME, their real craft, the obsession they keep returning to), then add ONE more "
-    "concrete detail that proves you get them. Ground it in the profile above all; nod to a folder or tool only if "
-    "it sharpens the picture, never lead with a generic installed app, and never name boring system apps. It should "
-    "read like a sharp friend who knows exactly what you're about, not a system reciting what it scanned. Do not be "
-    "creepy: name their work and interests, not private personal numbers. Never use em-dashes or en-dashes anywhere. "
-    "No markdown, no commentary, JSON only."
-)
-
-
-@typechecked
-def p_extract_string_field(text: str, name: str) -> str:
-    """Pull a top-level "name": "value" string straight out of the raw blob, for the fields that
-    aren't objects (greeting, app_*) so they survive when the strict JSON load failed and we salvage."""
-    m = re.search(rf'"{name}"\s*:\s*"((?:[^"\\]|\\.)*)"', text)
-    return m.group(1).strip() if m else ""
-
-
-@typechecked
-def p_build_automations(rows: List[dict]) -> List[PersonalizedAutomation]:
-    return [
-        PersonalizedAutomation(
-            title=strip_dashes(str(a.get("title", ""))),
-            prompt=strip_dashes(str(a.get("prompt", ""))),
-            cadence=(str(a.get("cadence", "weekly")).strip().lower() if str(a.get("cadence", "")).strip().lower() in VALID_CADENCE else "weekly"),
-        )
-        for a in rows
-        if isinstance(a, dict) and str(a.get("title", "")).strip() and str(a.get("prompt", "")).strip()
-    ]
-
-
-@typechecked
-def parse_prep(text: str) -> Optional[PrepResponse]:
-    text = normalize_json_text(text)
-    data = load_json_object(text)
-    starters = build_starters(data.get("starters") if isinstance(data.get("starters"), list) else [])
-    automations = p_build_automations(data.get("automations") if isinstance(data.get("automations"), list) else [])
-    headline = str(data.get("headline", "")).strip()
-    epithets = [strip_dashes(str(x)).strip() for x in (data.get("epithets") or []) if str(x).strip()][:3]
-    greeting = str(data.get("greeting", "")).strip()
-    app_title = str(data.get("app_title", "")).strip()
-    app_prompt = str(data.get("app_prompt", "")).strip()
-    app_reason = str(data.get("app_reason", "")).strip()
-    research_title = str(data.get("research_title", "")).strip()
-    research_prompt = str(data.get("research_prompt", "")).strip()
-    research_reason = str(data.get("research_reason", "")).strip()
-    browser_title = str(data.get("browser_title", "")).strip()
-    browser_prompt = str(data.get("browser_prompt", "")).strip()
-    browser_reason = str(data.get("browser_reason", "")).strip()
-
-    # Truncation / trailing comma / smart quotes broke the strict load: salvage the complete pieces
-    # rather than throwing the whole personalized reveal away for one bad character.
-    if not starters or not automations:
-        objs = salvage_flat_objects(text)
-        if not starters:
-            starters = build_starters([o for o in objs if "cadence" not in o])
-        if not automations:
-            automations = p_build_automations([o for o in objs if "cadence" in o])
-    # Top-level string fields don't live in the flat objects above, so recover them by name when the
-    # strict load dropped them (a malformed response was still yielding starters but a blank app).
-    if not headline:
-        headline = p_extract_string_field(text, "headline")
-    if not greeting:
-        greeting = p_extract_string_field(text, "greeting")
-    if not app_title:
-        app_title = p_extract_string_field(text, "app_title")
-    if not app_prompt:
-        app_prompt = p_extract_string_field(text, "app_prompt")
-    if not app_reason:
-        app_reason = p_extract_string_field(text, "app_reason")
-    if not research_title:
-        research_title = p_extract_string_field(text, "research_title")
-    if not research_prompt:
-        research_prompt = p_extract_string_field(text, "research_prompt")
-    if not research_reason:
-        research_reason = p_extract_string_field(text, "research_reason")
-    if not browser_title:
-        browser_title = p_extract_string_field(text, "browser_title")
-    if not browser_prompt:
-        browser_prompt = p_extract_string_field(text, "browser_prompt")
-    if not browser_reason:
-        browser_reason = p_extract_string_field(text, "browser_reason")
-
-    if not starters:
-        return None
-    return PrepResponse(
-        headline=strip_dashes(headline),
-        epithets=epithets,
-        greeting=strip_dashes(greeting),
-        starters=starters[:4],
-        app_title=strip_dashes(app_title),
-        app_prompt=strip_dashes(app_prompt),
-        app_reason=strip_dashes(app_reason),
-        research_title=strip_dashes(research_title),
-        research_prompt=strip_dashes(research_prompt),
-        research_reason=strip_dashes(research_reason),
-        browser_title=strip_dashes(browser_title),
-        browser_prompt=strip_dashes(browser_prompt),
-        browser_reason=strip_dashes(browser_reason),
-        automations=automations[:3],
-    )
-
-
-@typechecked
-def p_scan_grounded_starters(scan: ScanResult) -> List[PersonalizedStarter]:
-    """Build starters from the REAL scan (no LLM): each references something concrete on this machine, a
-    screenshot pile, a content-heavy folder, the app they lean on, their code projects. Every one produces
-    a keepable artifact and never modifies an existing file, so even the no-LLM path is genuinely tailored."""
-    out: List[PersonalizedStarter] = []
-    apps = scan.signal_apps[:3]
-    # Screenshots -> a browsable gallery page (real deliverable from their real files).
-    shots = next((f for f in scan.folders if f.screenshot_count > 2), None)
-    if shots:
-        out.append(PersonalizedStarter(
-            title="Frame my screenshots",
-            prompt=f"Find the screenshot images in my {shots.name} folder and build one browsable gallery web page showing them as a neat scrollable grid. Write only the new page; never move or delete the originals.",
-            reason=f"{shots.screenshot_count} screenshots sitting in {shots.name}.",
-        ))
-    # A content-heavy folder -> a searchable index page of what's in it.
-    docs = next((f for f in scan.folders if f.name in ("Documents", "Downloads", "Desktop") and f.entry_count > 5 and f.top_extensions), None)
-    if docs:
-        ext = docs.top_extensions[0].lstrip(".") or "file"
-        out.append(PersonalizedStarter(
-            title=f"Index my {ext} files",
-            prompt=f"Look through my {docs.name} folder and build one searchable index page listing my {ext} files with their names and dates so I can find things fast. Write only the new page; do not move or delete anything.",
-            reason=f"{docs.entry_count} files in {docs.name}, lots of .{ext}.",
-        ))
-    # Top signal app -> live web research for current tips (a real answer, not a plan).
-    if apps:
-        out.append(PersonalizedStarter(
-            title=f"{apps[0]} tips",
-            prompt=f"Search the web right now for the most useful current tips, shortcuts, and workflows for {apps[0]}, and give me a tight summary with dated sources.",
-            reason=f"You lean on {apps[0]} a lot.",
-        ))
-    # Code projects -> a plain-English recap of where each stands.
-    if scan.git_repo_count > 0:
-        out.append(PersonalizedStarter(
-            title="Recap my projects",
-            prompt="Look at the code projects on my computer, read each one's README and recent activity, and write me one short page summarizing what each project is and where it stands. Write only the summary; change nothing.",
-            reason=f"{scan.git_repo_count} code projects on your machine.",
-        ))
-    return out
-
-
-@typechecked
-def p_scan_grounded_fallback(request: PrepRequest) -> PrepResponse:
-    """When the aux call can't be made (a sole gemini/codex lane returns empty on 0.3.60, provider
-    down, no anthropic-reachable model), still ground the reveal in the REAL scan via a template so a
-    cross-provider user gets their-Mac-specific starters, not generic stubs. No LLM, so it never fails."""
-    scan = request.scan
-    if scan is None:
-        return PrepResponse(greeting="", starters=list(FALLBACK_STARTERS))
-    apps = scan.signal_apps[:3]
-    starters = p_scan_grounded_starters(scan)
-    # Backfill from the generic list ONLY to reach four, and only when the machine was too sparse to
-    # ground three real ones. On a normal Mac all four come from the scan, so 3-of-4 stays tailored.
-    for s in FALLBACK_STARTERS:
-        if len(starters) >= 4:
-            break
-        if all(s.title != existing.title for existing in starters):
-            starters.append(s)
-    downloads = next((f for f in scan.folders if f.name == "Downloads" and f.entry_count > 0), None)
-    bits: List[str] = []
-    if downloads:
-        bits.append(f"{downloads.entry_count} files in Downloads")
-    if apps:
-        bits.append(", ".join(apps))
-    greeting = f"I took a look around your Mac: {'; '.join(bits)}. Here is where I would start." if bits else ""
-    # Ground the research card on their top tool so the "looked into this" card still appears cross-provider.
-    research_title = ""
-    research_prompt = ""
-    research_reason = ""
-    if apps:
-        research_title = f"{apps[0]} Tips"
-        research_prompt = f"Search the web right now for the most useful current tips, shortcuts, and workflows for {apps[0]}, and give me a tight summary with sources."
-        research_reason = f"You have {apps[0]} installed and use it a lot."
-    return PrepResponse(
-        greeting=greeting,
-        starters=starters[:4],
-        research_title=research_title,
-        research_prompt=research_prompt,
-        research_reason=research_reason,
-    )
-
-
-# The clustering pass: one cheap read that turns the raw chat dump into a tight character read, so the
-# reveal reasons over "who is this person" instead of skimming fragments and latching onto a stray word.
-P_PROFILE_SYSTEM = (
-    "You are reading a person's OWN recent AI chat conversations (their messages and the AI's replies, "
-    "most recent first). Write a SHORT, confident, specific profile of who this person actually is and "
-    "what they genuinely work on and care about, grounded ONLY in what you see. 3 to 5 sentences, plain "
-    "prose, no lists, no hedging, no preamble, no 'based on'. Name concrete specifics: the projects they "
-    "are building, the tools and languages they use, the topics they return to again and again, their "
-    "interests and side-obsessions, how they think. Separate a real recurring throughline from a one-off "
-    "tangent, weight what they keep coming back to. If one thing is clearly their main focus right now, "
-    "say so plainly; if their attention is split across a few real threads, name them. Never invent "
-    "anything not present. No markdown. Never use em-dashes or en-dashes."
-)
-
-# Below this the usage text is just titles/memories (thin); above it there is real conversation content
-# worth a distill pass. Keep the distill input bounded so the cheap call stays a couple cents.
-P_PROFILE_DISTILL_THRESHOLD = 1500
-P_PROFILE_INPUT_CAP = 140000
-
-
-@typechecked
-async def p_distill_profile(settings: AppSettings, usage_text: str) -> str:
-    """One cheap aux call: raw chat content -> a tight 'who is this person' profile. "" on any failure,
-    so build_prep just falls back to feeding the raw usage text (today's behavior)."""
-    try:
-        from backend.apps.agents.providers.registry import resolve_aux_model
-        from backend.apps.settings.credentials import get_anthropic_client_for_model
-
-        aux_model, _ = await resolve_aux_model(settings, preferred_tier="haiku")
-        client = get_anthropic_client_for_model(settings, aux_model)
-        resp = await client.messages.create(
-            model=aux_model,
-            max_tokens=aux_max_tokens_for(aux_model, base=600),
-            system=P_PROFILE_SYSTEM,
-            messages=[{"role": "user", "content": usage_text[:P_PROFILE_INPUT_CAP]}],
-            timeout=45.0,
-        )
-        return strip_dashes(safe_resp_text(resp).strip())
-    except Exception:
-        return ""
-
-
-@typechecked
-async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepResponse:
-    from datetime import date
-
-    facts = request.model_dump()
-    # The aux otherwise assumes its training-cutoff year and writes stale ranges like "2024-2025"
-    # into research prompts; telling it today's date keeps "current" meaning current.
-    facts["today"] = date.today().isoformat()
-    # If the usage text carries real conversation content, distill it to a tight profile FIRST so the
-    # reveal call reasons over who this person is, not raw logs (and stays in budget). Fail-open: a blank
-    # profile just leaves the raw text in place, which is today's behavior.
-    usage = str(facts.get("usage_summary", ""))
-    if len(usage) > P_PROFILE_DISTILL_THRESHOLD:
-        profile = await p_distill_profile(settings, usage)
-        if profile:
-            facts["usage_summary"] = profile
-    # The hero's 4x4 drill-in menu rides its own parallel aux call; build_menu never raises.
-    menu_task = asyncio.create_task(build_menu(settings, facts, request.scan))
-    try:
-        from backend.apps.agents.providers.registry import resolve_aux_model
-        from backend.apps.settings.credentials import get_anthropic_client_for_model
-
-        aux_model, _ = await resolve_aux_model(settings, preferred_tier="haiku")
-        client = get_anthropic_client_for_model(settings, aux_model)
-        resp = await client.messages.create(
-            model=aux_model,
-            # The full shape (greeting + 4 starters w/ prompts + app + 3 automations) runs ~1.5-2K
-            # tokens for a rich user; 1100 truncated the JSON mid-object so parse silently fell back.
-            max_tokens=aux_max_tokens_for(aux_model, base=2200),
-            system=P_SYSTEM,
-            messages=[{"role": "user", "content": json.dumps(facts)}],
-            # Bound the wait: the SDK default is ~10min, so a wedged router/provider would hang the
-            # auto-launch (which awaits this) instead of degrading to the static starters.
-            timeout=45.0,
-        )
-        parsed = parse_prep(safe_resp_text(resp))
-        if parsed is not None:
-            parsed.menu = await menu_task
-            parsed.used_llm = True
-            return parsed
-    except Exception:
-        pass
-    # Aux unusable (empty gemini/codex response on 0.3.60, provider down, no anthropic lane): still
-    # ground the reveal in the real scan rather than shipping generic stubs.
-    fallback = p_scan_grounded_fallback(request)
-    fallback.menu = await menu_task
-    return fallback
diff --git a/backend/apps/onboarding/prep/__init__.py b/backend/apps/onboarding/prep/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/backend/apps/onboarding/prep/build_prep.py b/backend/apps/onboarding/prep/build_prep.py
new file mode 100644
index 00000000..847ba665
--- /dev/null
+++ b/backend/apps/onboarding/prep/build_prep.py
@@ -0,0 +1,95 @@
+"""Turn the local scan + app picks into a personalized greeting and starters.
+
+One cheap aux call on whatever lane the user just connected; every failure path
+returns the static fallback so the reveal can never be an error card.
+"""
+
+import asyncio
+import json
+
+from typeguard import typechecked
+
+from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
+from backend.apps.onboarding.models import PrepRequest, PrepResponse
+from backend.apps.onboarding.prep.menu import build_menu
+from backend.apps.onboarding.prep.parse_helpers import strip_dashes
+from backend.apps.onboarding.prep.parse_prep import parse_prep
+from backend.apps.onboarding.prep.prompts import PROFILE_SYSTEM, PREP_SYSTEM
+from backend.apps.onboarding.prep.scan_fallback import scan_grounded_fallback
+from backend.apps.settings.models import AppSettings
+
+# Below this the usage text is just titles/memories (thin); above it there is real conversation content
+# worth a distill pass. Keep the distill input bounded so the cheap call stays a couple cents.
+P_PROFILE_DISTILL_THRESHOLD = 1500
+P_PROFILE_INPUT_CAP = 140000
+
+
+@typechecked
+async def p_distill_profile(settings: AppSettings, usage_text: str) -> str:
+    """One cheap aux call: raw chat content -> a tight 'who is this person' profile. "" on any failure,
+    so build_prep just falls back to feeding the raw usage text (today's behavior)."""
+    try:
+        from backend.apps.agents.providers.registry import resolve_aux_model
+        from backend.apps.settings.credentials import get_anthropic_client_for_model
+
+        aux_model, _ = await resolve_aux_model(settings, preferred_tier="haiku")
+        client = get_anthropic_client_for_model(settings, aux_model)
+        resp = await client.messages.create(
+            model=aux_model,
+            max_tokens=aux_max_tokens_for(aux_model, base=600),
+            system=PROFILE_SYSTEM,
+            messages=[{"role": "user", "content": usage_text[:P_PROFILE_INPUT_CAP]}],
+            timeout=45.0,
+        )
+        return strip_dashes(safe_resp_text(resp).strip())
+    except Exception:
+        return ""
+
+
+@typechecked
+async def build_prep(settings: AppSettings, request: PrepRequest) -> PrepResponse:
+    from datetime import date
+
+    facts = request.model_dump()
+    # The aux otherwise assumes its training-cutoff year and writes stale ranges like "2024-2025"
+    # into research prompts; telling it today's date keeps "current" meaning current.
+    facts["today"] = date.today().isoformat()
+    # If the usage text carries real conversation content, distill it to a tight profile FIRST so the
+    # reveal call reasons over who this person is, not raw logs (and stays in budget). Fail-open: a blank
+    # profile just leaves the raw text in place, which is today's behavior.
+    usage = str(facts.get("usage_summary", ""))
+    if len(usage) > P_PROFILE_DISTILL_THRESHOLD:
+        profile = await p_distill_profile(settings, usage)
+        if profile:
+            facts["usage_summary"] = profile
+    # The hero's 4x4 drill-in menu rides its own parallel aux call; build_menu never raises.
+    menu_task = asyncio.create_task(build_menu(settings, facts, request.scan))
+    try:
+        from backend.apps.agents.providers.registry import resolve_aux_model
+        from backend.apps.settings.credentials import get_anthropic_client_for_model
+
+        aux_model, _ = await resolve_aux_model(settings, preferred_tier="haiku")
+        client = get_anthropic_client_for_model(settings, aux_model)
+        resp = await client.messages.create(
+            model=aux_model,
+            # The full shape (greeting + 4 starters w/ prompts + app + 3 automations) runs ~1.5-2K
+            # tokens for a rich user; 1100 truncated the JSON mid-object so parse silently fell back.
+            max_tokens=aux_max_tokens_for(aux_model, base=2200),
+            system=PREP_SYSTEM,
+            messages=[{"role": "user", "content": json.dumps(facts)}],
+            # Bound the wait: the SDK default is ~10min, so a wedged router/provider would hang the
+            # auto-launch (which awaits this) instead of degrading to the static starters.
+            timeout=45.0,
+        )
+        parsed = parse_prep(safe_resp_text(resp))
+        if parsed is not None:
+            parsed.menu = await menu_task
+            parsed.used_llm = True
+            return parsed
+    except Exception:
+        pass
+    # Aux unusable (empty gemini/codex response on 0.3.60, provider down, no anthropic lane): still
+    # ground the reveal in the real scan rather than shipping generic stubs.
+    fallback = scan_grounded_fallback(request)
+    fallback.menu = await menu_task
+    return fallback
diff --git a/backend/apps/onboarding/menu.py b/backend/apps/onboarding/prep/menu.py
similarity index 98%
rename from backend/apps/onboarding/menu.py
rename to backend/apps/onboarding/prep/menu.py
index 7892c70f..b417cf9b 100644
--- a/backend/apps/onboarding/menu.py
+++ b/backend/apps/onboarding/prep/menu.py
@@ -12,7 +12,7 @@ from typeguard import typechecked
 
 from backend.apps.agents.core.aux_llm import aux_max_tokens_for, safe_resp_text
 from backend.apps.onboarding.models import ScanResult
-from backend.apps.onboarding.parse_helpers import build_starters, load_json_object, normalize_json_text
+from backend.apps.onboarding.prep.parse_helpers import build_starters, load_json_object, normalize_json_text
 from backend.apps.settings.models import AppSettings, PersonalizedMenu, PersonalizedStarter
 
 MENU_CATEGORIES = ("computer", "research", "web", "build")
diff --git a/backend/apps/onboarding/parse_helpers.py b/backend/apps/onboarding/prep/parse_helpers.py
similarity index 100%
rename from backend/apps/onboarding/parse_helpers.py
rename to backend/apps/onboarding/prep/parse_helpers.py
diff --git a/backend/apps/onboarding/prep/parse_prep.py b/backend/apps/onboarding/prep/parse_prep.py
new file mode 100644
index 00000000..07d4dc1f
--- /dev/null
+++ b/backend/apps/onboarding/prep/parse_prep.py
@@ -0,0 +1,105 @@
+"""Parse the prep aux response into a PrepResponse, salvaging what it can from malformed JSON."""
+
+import re
+from typing import List, Optional
+
+from typeguard import typechecked
+
+from backend.apps.onboarding.models import PrepResponse
+from backend.apps.onboarding.prep.parse_helpers import build_starters, load_json_object, normalize_json_text, salvage_flat_objects, strip_dashes
+from backend.apps.settings.models import PersonalizedAutomation
+
+VALID_CADENCE = {"daily", "weekday", "weekly"}
+
+
+@typechecked
+def p_extract_string_field(text: str, name: str) -> str:
+    """Pull a top-level "name": "value" string straight out of the raw blob, for the fields that
+    aren't objects (greeting, app_*) so they survive when the strict JSON load failed and we salvage."""
+    m = re.search(rf'"{name}"\s*:\s*"((?:[^"\\]|\\.)*)"', text)
+    return m.group(1).strip() if m else ""
+
+
+@typechecked
+def p_build_automations(rows: List[dict]) -> List[PersonalizedAutomation]:
+    return [
+        PersonalizedAutomation(
+            title=strip_dashes(str(a.get("title", ""))),
+            prompt=strip_dashes(str(a.get("prompt", ""))),
+            cadence=(str(a.get("cadence", "weekly")).strip().lower() if str(a.get("cadence", "")).strip().lower() in VALID_CADENCE else "weekly"),
+        )
+        for a in rows
+        if isinstance(a, dict) and str(a.get("title", "")).strip() and str(a.get("prompt", "")).strip()
+    ]
+
+
+@typechecked
+def parse_prep(text: str) -> Optional[PrepResponse]:
+    text = normalize_json_text(text)
+    data = load_json_object(text)
+    starters = build_starters(data.get("starters") if isinstance(data.get("starters"), list) else [])
+    automations = p_build_automations(data.get("automations") if isinstance(data.get("automations"), list) else [])
+    headline = str(data.get("headline", "")).strip()
+    epithets = [strip_dashes(str(x)).strip() for x in (data.get("epithets") or []) if str(x).strip()][:3]
+    greeting = str(data.get("greeting", "")).strip()
+    app_title = str(data.get("app_title", "")).strip()
+    app_prompt = str(data.get("app_prompt", "")).strip()
+    app_reason = str(data.get("app_reason", "")).strip()
+    research_title = str(data.get("research_title", "")).strip()
+    research_prompt = str(data.get("research_prompt", "")).strip()
+    research_reason = str(data.get("research_reason", "")).strip()
+    browser_title = str(data.get("browser_title", "")).strip()
+    browser_prompt = str(data.get("browser_prompt", "")).strip()
+    browser_reason = str(data.get("browser_reason", "")).strip()
+
+    # Truncation / trailing comma / smart quotes broke the strict load: salvage the complete pieces
+    # rather than throwing the whole personalized reveal away for one bad character.
+    if not starters or not automations:
+        objs = salvage_flat_objects(text)
+        if not starters:
+            starters = build_starters([o for o in objs if "cadence" not in o])
+        if not automations:
+            automations = p_build_automations([o for o in objs if "cadence" in o])
+    # Top-level string fields don't live in the flat objects above, so recover them by name when the
+    # strict load dropped them (a malformed response was still yielding starters but a blank app).
+    if not headline:
+        headline = p_extract_string_field(text, "headline")
+    if not greeting:
+        greeting = p_extract_string_field(text, "greeting")
+    if not app_title:
+        app_title = p_extract_string_field(text, "app_title")
+    if not app_prompt:
+        app_prompt = p_extract_string_field(text, "app_prompt")
+    if not app_reason:
+        app_reason = p_extract_string_field(text, "app_reason")
+    if not research_title:
+        research_title = p_extract_string_field(text, "research_title")
+    if not research_prompt:
+        research_prompt = p_extract_string_field(text, "research_prompt")
+    if not research_reason:
+        research_reason = p_extract_string_field(text, "research_reason")
+    if not browser_title:
+        browser_title = p_extract_string_field(text, "browser_title")
+    if not browser_prompt:
+        browser_prompt = p_extract_string_field(text, "browser_prompt")
+    if not browser_reason:
+        browser_reason = p_extract_string_field(text, "browser_reason")
+
+    if not starters:
+        return None
+    return PrepResponse(
+        headline=strip_dashes(headline),
+        epithets=epithets,
+        greeting=strip_dashes(greeting),
+        starters=starters[:4],
+        app_title=strip_dashes(app_title),
+        app_prompt=strip_dashes(app_prompt),
+        app_reason=strip_dashes(app_reason),
+        research_title=strip_dashes(research_title),
+        research_prompt=strip_dashes(research_prompt),
+        research_reason=strip_dashes(research_reason),
+        browser_title=strip_dashes(browser_title),
+        browser_prompt=strip_dashes(browser_prompt),
+        browser_reason=strip_dashes(browser_reason),
+        automations=automations[:3],
+    )
diff --git a/backend/apps/onboarding/prep/prompts.py b/backend/apps/onboarding/prep/prompts.py
new file mode 100644
index 00000000..700c9629
--- /dev/null
+++ b/backend/apps/onboarding/prep/prompts.py
@@ -0,0 +1,126 @@
+"""The two aux prompts behind the personalized reveal: the profile distill and the full prep shape."""
+
+PREP_SYSTEM = (
+    "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
+    "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
+    "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
+    '{"headline": string, "greeting": string, "epithets": [string, string, string], "starters": [{"title": string, "prompt": string, "reason": string}], "app_title": string, "app_prompt": string, "app_reason": string, "research_title": string, "research_prompt": string, "research_reason": string, "browser_title": string, "browser_prompt": string, "browser_reason": string, "automations": [{"title": string, "prompt": string, "cadence": "daily"|"weekday"|"weekly"}]}. '
+    "First, silently infer a short, confident profile of this user: who they are and what they are working on. "
+    "If usage_summary is present it is the STRONGEST signal (a distilled profile of who this person is and what "
+    "they actually work on, read from their real AI conversations); weight it above everything else. Do NOT let a "
+    "single installed app override it: signal_apps (an IDE, a design app, a DAW) is only a WEAK hint about their "
+    "craft (having Xcode installed does not make someone an iOS developer), used only to color what the profile "
+    "already says, then folders, plan tier, email domain. Tune every task and the personal app to that profile; "
+    "do not output the profile. "
+    "THE BAR every single item must clear: it is either (a) SPECIFICALLY useful to THIS person's real work in a way "
+    "they could not quickly get elsewhere (it uses their ACTUAL files, projects, or data to produce a real finished "
+    "thing worth keeping), OR (b) a genuine 'oh, it can do THAT?' that makes them see a hundred uses (a surprising "
+    "capability shown on their real stuff). A generic chore FAILS the bar and must be replaced: a file-cleanup report, "
+    "a folder audit, a read-only summary or mirror dashboard of their data, a research overview they could google, an "
+    "empty log file, or any 'set up / organize / plan' task is BANNED. "
+    "SPAN THE WHOLE PERSON. First, silently list this person's DISTINCT life threads from the profile (for example: "
+    "their main work or product, their sport or fitness, their food or local life, their tech or tooling curiosity, "
+    "their games or hobbies, a recurring practical need). Then assign the four starters to FOUR DIFFERENT threads, "
+    "one each. HARD RULE: treat EVERYTHING about their company, product, startup, pitch, competitive landscape, "
+    "positioning, pricing, fundraising, growth, or the thing they are building as ONE single 'work' bucket. EXACTLY "
+    "ONE of the four starters may come from that work bucket, no more, count them before you answer. The other THREE "
+    "must each come from a clearly DIFFERENT NON-work thread you actually see in the profile (their sport or fitness, "
+    "their food or local life, their games or hobbies, a personal curiosity or practical need). Anything work-adjacent, "
+    "even a browser tool 'for the product' or research 'for the pitch', is WORK and does NOT count as a non-work "
+    "thread. Before you finalize, verify that THREE of the four starters have nothing to do with their work; if they "
+    "do, replace them. The app and the research should also lean to NON-work threads, not pile onto the work one. The "
+    "ONLY exception: if the profile genuinely shows they talk about almost nothing but that one thing, follow the real "
+    "data instead of forcing variety. Every item still clears the bar on its own. "
+    "Exactly 4 starters. Each title is 2-5 words that PLAINLY say what the task does (like 'Frame my screenshots' or "
+    "'Compare headphones'), never clever, punny, or brand-style. Each prompt is a concrete, safe, immediately runnable "
+    "task referencing the user's real folders, files, or picked apps; never invent facts. The FIRST starter is the one "
+    "that RUNS automatically, so it must be safe unattended AND clear the bar: a real, specific DELIVERABLE built from "
+    "the user's ACTUAL files that they'd want and could not quickly make themselves (a designer with many screenshots: "
+    "a browsable gallery page of their app screenshots; someone with many notebooks or PDFs of one kind: an indexed, "
+    "searchable library page of them). It READS their real files and writes ONE new artifact (a page or a file); it "
+    "must NEVER modify or delete an existing file. It must NOT be a cleanup report, a folder audit, or a 'plan'. Every "
+    "starter must produce a tangible result the user can see and want; never propose setup, documentation of "
+    "preferences, or planning-only tasks. "
+    "Each starter's 'reason' is ONE short standalone clause (max 12 words, no leading 'because') naming the SPECIFIC "
+    "real thing you observed (a folder, a file count, a picked app, a usage fact) that makes this task useful for THIS "
+    "user; it must be grounded in the input facts, never invented, and read like a person pointing at what they saw. "
+    "Design ONE small but genuinely useful WORKING TOOL for this person's craft and make it the CENTERPIECE, this is "
+    "the 'oh, it can build me THAT?' moment. It must DO something: take their input and produce useful output, or "
+    "automate a fiddly micro-task they repeat in their ACTUAL work (inferred from usage_summary + signal_apps). It is "
+    "a real interactive tool they would reopen and USE, NOT a read-only dashboard, NOT a mirror of their data, NOT a "
+    "summary, NOT a feed. Examples of the SHAPE only (never copy, always tailor to THEM, and never "
+    "default to an iOS, app, or coding tool just because it is a familiar example): for a writer, a tool that "
+    "rewrites a pasted paragraph across tones; for a data person, a tool that pastes a CSV and instantly charts it; "
+    "for a musician, a tool that transposes a chord progression; for a language learner, a drill built from words "
+    "they paste. Match the shape to THIS person's actual craft from the profile. app_title 2-4 words that plainly name what it DOES "
+    "(like 'Icon Previewer' or 'Screenshot Framer'), never punny. app_prompt starts with 'Build me' and specifies the "
+    "tool's INPUT, what it PRODUCES, and the interaction; fully client-side and self-contained. It MUST run "
+    "on the user's input with DETERMINISTIC logic only (math, parsing, formatting, layout, charts, filtering, "
+    "transforms). It must NEVER call an AI model, an LLM, a chat completion, or any network/remote API, those "
+    "only work inside a published app and will fail in the reveal with 'make sure you're on a published app'. "
+    "If the idea would need AI generation to work, pick a DIFFERENT tool that doesn't (no accounts, no API keys, "
+    "no backend, no fetch, everything computed in the browser). app_reason follows the same one-clause grounded-"
+    "observation rule as a starter reason and says why THIS tool fits their real work. "
+    "Also pick the SINGLE topic this user most repeatedly asks their AI about (from usage_summary; if it is thin, use "
+    "their strongest work signal from signal_apps or folders) and turn it into a live web-research task. research_title "
+    "is 2-4 words plainly naming the topic (like 'App Store Fees' or 'Best Vector DBs'), never clever or punny. "
+    "research_prompt is one instruction telling the agent to search the web RIGHT NOW and produce a tight, useful, "
+    "current answer or comparison of THAT topic for this user (an actual answer, never a plan); it must demand "
+    "THIS-YEAR information with publication dates on sources, so the answer cannot quietly be stale training data. "
+    "research_reason follows the one-clause grounded-observation rule and names the specific recurring question you saw. "
+    "Also design ONE browser task that shows the agent DRIVING a real website live (so the user watches it control a "
+    "browser, not just fetch text). browser_title is 2-4 words plainly naming it (like 'Nearby Michelin' or 'Jump "
+    "Threads'). browser_prompt tells the agent to OPEN a specific real, PUBLIC website by name and do a genuinely "
+    "MULTI-STEP task there: navigate, search, click through, read across a few pages, compare, then report what it "
+    "found. It must be safe read-only browsing on public pages only, NEVER log in, buy, post, submit, or act on the "
+    "user's behalf. Pick a topic from a DIFFERENT thread than the app and the research, ideally a fun or personal "
+    "interest (food, sport, travel, a hobby), not their work. browser_reason follows the one-clause grounded rule. "
+    "THE FOUR THINGS THAT ACTUALLY RUN are the app, the research, the browser task, and the first automation. This "
+    "rule OVERRIDES every 'pick their craft / their top topic' hint above: assign each of these four to a DIFFERENT "
+    "thread of this person's life, and AT MOST ONE of the four may touch their work/company/product/pitch/competitors, "
+    "count them before you answer. FIXED ASSIGNMENT: the APP must be built for a NON-work thread (a hobby, sport, "
+    "food, or personal need), it is a delightful surprise precisely because it is NOT about their job (a jump-log "
+    "tool, a restaurant picker, a practice-drill tool, never a pitch/competitor/metrics dashboard). The BROWSER task "
+    "must also take a clearly personal or fun NON-work thread. Only the RESEARCH may be about their work, and only if "
+    "that is genuinely their burning question; if you use work for the research, then the first automation must be "
+    "NON-work too, so no more than ONE of the four is ever about work. Make all four GENUINELY MULTI-STEP (several "
+    "real actions, never a one-liner). "
+    "Also propose 1-2 automations: recurring routines that genuinely help THIS user and clear the bar (NEVER a folder "
+    "cleanup, NEVER an empty log, NEVER 'keep a dashboard updated'). A good one delivers something the user actually "
+    "wants on a cadence, e.g. a daily digest of what is new in their SPECIFIC niche (named from usage_summary and "
+    "signal_apps) written to a dated file they will read, or a weekly pull of new items relevant to a project they are "
+    "shipping. Each automation title is 2-4 words that plainly name it (like 'iOS Design Digest'), cadence is exactly "
+    "'daily', 'weekday', or 'weekly'. The prompt is the COMPLETE instruction an agent executes alone on each scheduled "
+    "run with NO human present: produce its result in one pass, never ask questions, never wait for input, never set up "
+    "schedules or reminders (the schedule already exists), and write the result to a concrete file (like "
+    "Documents/<name>_<date>.md). 'Search X and write the result to Y' is right; 'remind me' or 'set up a log' is wrong. "
+    "Safe to run unattended (never delete without review). "
+    "The HEADLINE is the single most important line: a punchy, specific, SCANNABLE identity hook of AT MOST 10 "
+    "words that this person reads in one second and thinks 'yes, that's me'. Name their actual work and their one "
+    "defining trait, no filler, no full sentence, no period. It is read at a glance in big type, so it must NOT be "
+    "a paragraph. Example shapes only (never copy, tailor to THEM): 'OpenSwarm founder who measures everything, "
+    "vertical jump to agent latency' or 'Ships iOS apps, obsessed with the last 5% of polish'. Sharp, not wordy. "
+    "epithets: exactly 3 short identity titles for this person, 2-4 plain words each (like 'QUIET POWER USER' but THEIRS, drawn from their real work and interests in the profile), confident and warm, never punny, never generic. "
+    "The greeting is one or two warm, punchy sentences that make this person feel INSTANTLY understood, the "
+    "'wait, it actually gets me' hook. Lead with the single most specific true thing about them from the profile "
+    "(their actual project BY NAME, their real craft, the obsession they keep returning to), then add ONE more "
+    "concrete detail that proves you get them. Ground it in the profile above all; nod to a folder or tool only if "
+    "it sharpens the picture, never lead with a generic installed app, and never name boring system apps. It should "
+    "read like a sharp friend who knows exactly what you're about, not a system reciting what it scanned. Do not be "
+    "creepy: name their work and interests, not private personal numbers. Never use em-dashes or en-dashes anywhere. "
+    "No markdown, no commentary, JSON only."
+)
+
+# The clustering pass: one cheap read that turns the raw chat dump into a tight character read, so the
+# reveal reasons over "who is this person" instead of skimming fragments and latching onto a stray word.
+PROFILE_SYSTEM = (
+    "You are reading a person's OWN recent AI chat conversations (their messages and the AI's replies, "
+    "most recent first). Write a SHORT, confident, specific profile of who this person actually is and "
+    "what they genuinely work on and care about, grounded ONLY in what you see. 3 to 5 sentences, plain "
+    "prose, no lists, no hedging, no preamble, no 'based on'. Name concrete specifics: the projects they "
+    "are building, the tools and languages they use, the topics they return to again and again, their "
+    "interests and side-obsessions, how they think. Separate a real recurring throughline from a one-off "
+    "tangent, weight what they keep coming back to. If one thing is clearly their main focus right now, "
+    "say so plainly; if their attention is split across a few real threads, name them. Never invent "
+    "anything not present. No markdown. Never use em-dashes or en-dashes."
+)
diff --git a/backend/apps/onboarding/prep/scan_fallback.py b/backend/apps/onboarding/prep/scan_fallback.py
new file mode 100644
index 00000000..31674ad7
--- /dev/null
+++ b/backend/apps/onboarding/prep/scan_fallback.py
@@ -0,0 +1,97 @@
+"""The no-LLM reveal: starters grounded in the real local scan when the aux call can't run."""
+
+from typing import List
+
+from typeguard import typechecked
+
+from backend.apps.onboarding.models import PrepRequest, PrepResponse, ScanResult
+from backend.apps.settings.models import PersonalizedStarter
+
+FALLBACK_STARTERS: List[PersonalizedStarter] = [
+    PersonalizedStarter(title="Clean up Downloads", prompt="Sort my Downloads folder into tidy subfolders. Show me the plan before moving anything."),
+    PersonalizedStarter(title="Research something", prompt="Research the best noise-cancelling headphones under $300 and give me a comparison table."),
+    PersonalizedStarter(title="Build a tiny app", prompt="Build me a simple habit tracker app I can use right now."),
+    PersonalizedStarter(title="Plan a trip", prompt="Plan a 3-day weekend trip itinerary and turn it into a printable page."),
+]
+
+
+@typechecked
+def p_scan_grounded_starters(scan: ScanResult) -> List[PersonalizedStarter]:
+    """Build starters from the REAL scan (no LLM): each references something concrete on this machine, a
+    screenshot pile, a content-heavy folder, the app they lean on, their code projects. Every one produces
+    a keepable artifact and never modifies an existing file, so even the no-LLM path is genuinely tailored."""
+    out: List[PersonalizedStarter] = []
+    apps = scan.signal_apps[:3]
+    # Screenshots -> a browsable gallery page (real deliverable from their real files).
+    shots = next((f for f in scan.folders if f.screenshot_count > 2), None)
+    if shots:
+        out.append(PersonalizedStarter(
+            title="Frame my screenshots",
+            prompt=f"Find the screenshot images in my {shots.name} folder and build one browsable gallery web page showing them as a neat scrollable grid. Write only the new page; never move or delete the originals.",
+            reason=f"{shots.screenshot_count} screenshots sitting in {shots.name}.",
+        ))
+    # A content-heavy folder -> a searchable index page of what's in it.
+    docs = next((f for f in scan.folders if f.name in ("Documents", "Downloads", "Desktop") and f.entry_count > 5 and f.top_extensions), None)
+    if docs:
+        ext = docs.top_extensions[0].lstrip(".") or "file"
+        out.append(PersonalizedStarter(
+            title=f"Index my {ext} files",
+            prompt=f"Look through my {docs.name} folder and build one searchable index page listing my {ext} files with their names and dates so I can find things fast. Write only the new page; do not move or delete anything.",
+            reason=f"{docs.entry_count} files in {docs.name}, lots of .{ext}.",
+        ))
+    # Top signal app -> live web research for current tips (a real answer, not a plan).
+    if apps:
+        out.append(PersonalizedStarter(
+            title=f"{apps[0]} tips",
+            prompt=f"Search the web right now for the most useful current tips, shortcuts, and workflows for {apps[0]}, and give me a tight summary with dated sources.",
+            reason=f"You lean on {apps[0]} a lot.",
+        ))
+    # Code projects -> a plain-English recap of where each stands.
+    if scan.git_repo_count > 0:
+        out.append(PersonalizedStarter(
+            title="Recap my projects",
+            prompt="Look at the code projects on my computer, read each one's README and recent activity, and write me one short page summarizing what each project is and where it stands. Write only the summary; change nothing.",
+            reason=f"{scan.git_repo_count} code projects on your machine.",
+        ))
+    return out
+
+
+@typechecked
+def scan_grounded_fallback(request: PrepRequest) -> PrepResponse:
+    """When the aux call can't be made (a sole gemini/codex lane returns empty on 0.3.60, provider
+    down, no anthropic-reachable model), still ground the reveal in the REAL scan via a template so a
+    cross-provider user gets their-Mac-specific starters, not generic stubs. No LLM, so it never fails."""
+    scan = request.scan
+    if scan is None:
+        return PrepResponse(greeting="", starters=list(FALLBACK_STARTERS))
+    apps = scan.signal_apps[:3]
+    starters = p_scan_grounded_starters(scan)
+    # Backfill from the generic list ONLY to reach four, and only when the machine was too sparse to
+    # ground three real ones. On a normal Mac all four come from the scan, so 3-of-4 stays tailored.
+    for s in FALLBACK_STARTERS:
+        if len(starters) >= 4:
+            break
+        if all(s.title != existing.title for existing in starters):
+            starters.append(s)
+    downloads = next((f for f in scan.folders if f.name == "Downloads" and f.entry_count > 0), None)
+    bits: List[str] = []
+    if downloads:
+        bits.append(f"{downloads.entry_count} files in Downloads")
+    if apps:
+        bits.append(", ".join(apps))
+    greeting = f"I took a look around your Mac: {'; '.join(bits)}. Here is where I would start." if bits else ""
+    # Ground the research card on their top tool so the "looked into this" card still appears cross-provider.
+    research_title = ""
+    research_prompt = ""
+    research_reason = ""
+    if apps:
+        research_title = f"{apps[0]} Tips"
+        research_prompt = f"Search the web right now for the most useful current tips, shortcuts, and workflows for {apps[0]}, and give me a tight summary with sources."
+        research_reason = f"You have {apps[0]} installed and use it a lot."
+    return PrepResponse(
+        greeting=greeting,
+        starters=starters[:4],
+        research_title=research_title,
+        research_prompt=research_prompt,
+        research_reason=research_reason,
+    )
diff --git a/backend/apps/onboarding/usage/browser_cookies.py b/backend/apps/onboarding/usage/browser_cookies.py
index 0d69b28b..7aca0489 100644
--- a/backend/apps/onboarding/usage/browser_cookies.py
+++ b/backend/apps/onboarding/usage/browser_cookies.py
@@ -66,13 +66,14 @@ p_key_cache: Dict[str, Optional[bytes]] = {}
 @typechecked
 def p_win_dpapi_unprotect(data: bytes) -> Optional[bytes]:
     """CryptUnprotectData via crypt32.dll (no pywin32 dependency). None on any failure."""
+    if sys.platform != "win32":
+        return None
     try:
         import ctypes
         from ctypes import wintypes
 
         class DATA_BLOB(ctypes.Structure):
-            p_fields = [("cbData", wintypes.DWORD), ("pbData", ctypes.POINTER(ctypes.c_char))]
-            _fields_ = p_fields
+            _fields_ = [("cbData", wintypes.DWORD), ("pbData", ctypes.POINTER(ctypes.c_char))]
 
         buf = ctypes.create_string_buffer(data, len(data))
         blob_in = DATA_BLOB(len(data), ctypes.cast(buf, ctypes.POINTER(ctypes.c_char)))
@@ -92,7 +93,7 @@ def p_win_dpapi_unprotect(data: bytes) -> Optional[bytes]:
 
 
 @typechecked
-def p_win_storage_key(browser: str) -> Optional[bytes]:
+def win_storage_key(browser: str) -> Optional[bytes]:
     """The AES key from a Chromium install's Local State: base64 -> strip 'DPAPI' -> CryptUnprotectData."""
     base = CHROMIUM_ROOTS.get(browser)
     if not base:
@@ -128,7 +129,7 @@ def p_mac_storage_key(browser: str) -> Optional[bytes]:
 def p_safe_storage_key(browser: str) -> Optional[bytes]:
     if browser in p_key_cache:
         return p_key_cache[browser]
-    key = p_win_storage_key(browser) if IS_WIN else p_mac_storage_key(browser)
+    key = win_storage_key(browser) if IS_WIN else p_mac_storage_key(browser)
     p_key_cache[browser] = key
     return key
 
@@ -175,7 +176,7 @@ def p_best_store(domain: str) -> Optional[Tuple[str, str]]:
 
 
 @typechecked
-def p_decrypt(enc: bytes, key: bytes) -> Optional[str]:
+def decrypt_cookie_value(enc: bytes, key: bytes) -> Optional[str]:
     if enc[:3] not in (b"v10", b"v11"):
         return None  # v20 = app-bound encryption, out of reach without the browser
     try:
@@ -222,7 +223,7 @@ def read_provider_cookies(domain: str) -> Dict[str, str]:
         for name, enc in cur.fetchall():
             if not enc:
                 continue
-            val = p_decrypt(bytes(enc), key)
+            val = decrypt_cookie_value(bytes(enc), key)
             if val:
                 jar[str(name)] = val
         con.close()
@@ -259,7 +260,7 @@ def read_provider_cookie_records(domain: str) -> List[Dict[str, Any]]:
         for name, enc, host_key, path, is_secure, is_httponly in cur.fetchall():
             if not enc:
                 continue
-            val = p_decrypt(bytes(enc), key)
+            val = decrypt_cookie_value(bytes(enc), key)
             if val is None:
                 continue
             records.append({
@@ -296,13 +297,3 @@ def read_google_session_records() -> List[Dict[str, Any]]:
 @typechecked
 def cookie_header(jar: Dict[str, str]) -> str:
     return "; ".join(f"{k}={v}" for k, v in jar.items())
-
-
-@typechecked
-def logged_in_providers() -> List[str]:
-    """Which providers have a readable session, WITHOUT decrypting or touching the keychain: safe for a UI presence check."""
-    out: List[str] = []
-    for provider, domain in (("codex", "chatgpt.com"), ("claude", "claude.ai"), ("gemini", "gemini.google.com")):
-        if p_best_store(domain) is not None:
-            out.append(provider)
-    return out
diff --git a/backend/tests/test_onboarding.py b/backend/tests/test_onboarding.py
index 8efec570..1f5485a9 100644
--- a/backend/tests/test_onboarding.py
+++ b/backend/tests/test_onboarding.py
@@ -9,7 +9,9 @@ import pytest
 from backend.apps.onboarding.identity import build_identity, decode_jwt_payload
 from backend.apps.onboarding.local_scan import detect_signal_apps, run_local_scan
 from backend.apps.onboarding.models import PrepRequest, ScanResult
-from backend.apps.onboarding.prep import FALLBACK_STARTERS, build_prep, parse_prep
+from backend.apps.onboarding.prep.build_prep import build_prep
+from backend.apps.onboarding.prep.parse_prep import parse_prep
+from backend.apps.onboarding.prep.scan_fallback import FALLBACK_STARTERS
 from backend.apps.settings.models import AppSettings
 
 
@@ -113,154 +115,6 @@ def test_parse_prep_carries_reasons():
     assert parsed.app_reason == "you plan lifts with ChatGPT daily"
 
 
-def test_summarize_chatgpt_usage_leads_with_memory_and_caps():
-    from backend.apps.onboarding.usage.chatgpt_usage import TOTAL_CONVO_CHARS, summarize_chatgpt_usage
-
-    s = summarize_chatgpt_usage(
-        812,
-        ["Has an Akita", "Squats 495"],
-        ["Swift concurrency", "Deadlift form"],
-        ["User: fix my squat form?\nAssistant: brace harder."],
-    )
-    assert "812 past AI conversations" in s
-    assert "Has an Akita; Squats 495" in s
-    assert "Swift concurrency; Deadlift form" in s
-    assert "fix my squat form?" in s
-    big = summarize_chatgpt_usage(
-        1000,
-        [],
-        [f"t{i}x" for i in range(1000)],
-        ["c" * 60000 for _ in range(10)],
-    )
-    assert "t149x" in big and "t150x" not in big
-    convo_block = big.split("real asks + the exchange")[1]
-    assert len(convo_block) <= TOTAL_CONVO_CHARS + 10000
-
-
-@pytest.mark.asyncio
-async def test_harvest_chatgpt_usage_fails_open_without_codex(monkeypatch):
-    from backend.apps.onboarding.usage import chatgpt_usage
-
-    monkeypatch.setattr(chatgpt_usage, "read_persisted_connections", lambda: [])
-    assert await chatgpt_usage.harvest_chatgpt_usage() == ""
-
-
-def test_read_provider_cookies_fails_open_without_a_store(monkeypatch):
-    from backend.apps.onboarding.usage import browser_cookies
-
-    # No browser store has the domain -> empty jar/records, and the keychain is never touched.
-    monkeypatch.setattr(browser_cookies, "p_best_store", lambda domain: None)
-    assert browser_cookies.read_provider_cookies("claude.ai") == {}
-    assert browser_cookies.read_provider_cookie_records("claude.ai") == []
-
-
-def test_win_storage_key_parses_local_state_and_unwraps(monkeypatch, tmp_path):
-    from backend.apps.onboarding.usage import browser_cookies
-
-    # Local State carries a base64 "DPAPI"-prefixed key; the Windows path strips the prefix and
-    # hands the rest to CryptUnprotectData. Prove the parse + prefix-strip without needing Windows.
-    raw_key = b"DPAPI" + b"wrapped-key-bytes"
-    local_state_dir = tmp_path / "UserData"
-    local_state_dir.mkdir()
-    (local_state_dir / "Local State").write_text(
-        json.dumps({"os_crypt": {"encrypted_key": base64.b64encode(raw_key).decode()}})
-    )
-    monkeypatch.setattr(browser_cookies, "CHROMIUM_ROOTS", {"Chrome": str(local_state_dir)})
-    seen = {}
-
-    def fake_unprotect(data: bytes):
-        seen["passed"] = data
-        return b"unwrapped-aes-key"
-
-    monkeypatch.setattr(browser_cookies, "p_win_dpapi_unprotect", fake_unprotect)
-    key = browser_cookies.p_win_storage_key("Chrome")
-    assert key == b"unwrapped-aes-key"
-    assert seen["passed"] == b"wrapped-key-bytes"  # the 5-byte "DPAPI" prefix was stripped
-
-
-def test_win_storage_key_fails_open(monkeypatch, tmp_path):
-    from backend.apps.onboarding.usage import browser_cookies
-
-    # Missing Local State, malformed JSON, and DPAPI failure all fail open to None (-> scan fallback).
-    monkeypatch.setattr(browser_cookies, "CHROMIUM_ROOTS", {"Chrome": str(tmp_path)})
-    assert browser_cookies.p_win_storage_key("Chrome") is None  # no Local State file
-    assert browser_cookies.p_win_storage_key("Nonexistent") is None
-
-
-def test_decrypt_rejects_app_bound_v20():
-    from backend.apps.onboarding.usage import browser_cookies
-
-    # v20 = app-bound encryption (modern Chrome), out of reach on both OSes -> None, never a crash.
-    assert browser_cookies.p_decrypt(b"v20" + b"anything", b"\x00" * 32) is None
-    assert browser_cookies.p_decrypt(b"", b"\x00" * 32) is None
-
-
-def test_dump_cookies_only_serves_allowlisted_domains(monkeypatch, capsys):
-    from backend.apps.onboarding.usage import dump_cookies
-
-    # Patch the names in dump_cookies' own namespace, so a real read (+ keychain) never fires.
-    monkeypatch.setattr(dump_cookies, "read_provider_cookie_records", lambda domain: [{"name": "x", "value": "y"}])
-    monkeypatch.setattr(dump_cookies, "read_google_session_records", lambda: [{"name": "SID", "value": "g"}])
-    # An off-list domain must never trigger a read, prints [].
-    monkeypatch.setattr("sys.argv", ["dump_cookies", "evil.example.com"])
-    dump_cookies.main()
-    assert capsys.readouterr().out == "[]"
-    # An allowlisted domain passes through to the reader.
-    monkeypatch.setattr("sys.argv", ["dump_cookies", "claude.ai"])
-    dump_cookies.main()
-    assert '"name": "x"' in capsys.readouterr().out
-    # Gemini routes to the SCOPED google reader, not a raw gemini.google.com read.
-    monkeypatch.setattr("sys.argv", ["dump_cookies", "gemini.google.com"])
-    dump_cookies.main()
-    assert '"name": "SID"' in capsys.readouterr().out
-
-
-def test_read_google_session_records_scopes_to_named_auth_cookies(monkeypatch):
-    from backend.apps.onboarding.usage import browser_cookies
-
-    seen_domain = {}
-
-    def fake_records(domain: str):
-        seen_domain["d"] = domain
-        return [
-            {"name": "SID", "value": "a"},
-            {"name": "__Secure-1PSID", "value": "b"},
-            {"name": "SEARCH_SAMESITE", "value": "c"},  # non-auth google cookie
-            {"name": "OTZ", "value": "d"},  # non-auth google cookie
-        ]
-
-    monkeypatch.setattr(browser_cookies, "read_provider_cookie_records", fake_records)
-    recs = browser_cookies.read_google_session_records()
-    # Reads the parent SSO domain, then keeps ONLY the named auth cookies (never a full sweep).
-    assert seen_domain["d"] == ".google.com"
-    assert {r["name"] for r in recs} == {"SID", "__Secure-1PSID"}
-
-
-def test_summarize_claude_usage_counts_and_caps():
-    from backend.apps.onboarding.usage.claude_usage import TOTAL_CONVO_CHARS, summarize_claude_usage
-
-    s = summarize_claude_usage(
-        490,
-        ["Yuji Itadori and Buddhism", "B2B SaaS Startup Ideas"],
-        ["User: pitch me a startup\nAssistant: sure."],
-    )
-    assert "490 past Claude conversations" in s
-    assert "Yuji Itadori and Buddhism; B2B SaaS Startup Ideas" in s
-    assert "pitch me a startup" in s
-    big = summarize_claude_usage(1000, [f"t{i}x" for i in range(1000)], ["c" * 60000 for _ in range(10)])
-    assert "t149x" in big and "t150x" not in big
-    convo_block = big.split("real asks + the exchange")[1]
-    assert len(convo_block) <= TOTAL_CONVO_CHARS + 10000
-
-
-@pytest.mark.asyncio
-async def test_harvest_claude_usage_fails_open_without_cookies(monkeypatch):
-    from backend.apps.onboarding.usage import claude_usage
-
-    monkeypatch.setattr(claude_usage, "read_provider_cookies", lambda domain: {})
-    assert await claude_usage.harvest_claude_usage() == ""
-
-
 @pytest.mark.asyncio
 async def test_build_prep_fails_open_without_provider(monkeypatch):
     async def boom(*args, **kwargs):
@@ -275,7 +129,7 @@ async def test_build_prep_fails_open_without_provider(monkeypatch):
 # --------------------------------------------------------------------------- hero menu ---------------------------------------------------------------------------
 
 def test_parse_menu_strict_and_partial():
-    from backend.apps.onboarding.menu import parse_menu
+    from backend.apps.onboarding.prep.menu import parse_menu
 
     full = json.dumps({
         "computer": [{"title": "Frame shots", "prompt": "do it"}],
@@ -292,7 +146,7 @@ def test_parse_menu_strict_and_partial():
 
 
 def test_fill_menu_always_serves_four_per_category():
-    from backend.apps.onboarding.menu import MENU_CATEGORIES, fill_menu, parse_menu
+    from backend.apps.onboarding.prep.menu import MENU_CATEGORIES, fill_menu, parse_menu
 
     partial = parse_menu(json.dumps({
         "computer": [{"title": "Frame shots", "prompt": "do it"}],
@@ -316,7 +170,6 @@ def test_fill_menu_always_serves_four_per_category():
 
 @pytest.mark.asyncio
 async def test_build_prep_attaches_menu_even_on_fallback(monkeypatch):
-    from backend.apps.onboarding import prep as prep_mod
 
     async def boom(*a, **k):
         raise RuntimeError("no aux")
@@ -324,6 +177,6 @@ async def test_build_prep_attaches_menu_even_on_fallback(monkeypatch):
     monkeypatch.setattr("backend.apps.agents.providers.registry.resolve_aux_model", boom)
     out = await build_prep(AppSettings(), PrepRequest(scan=ScanResult()))
     assert out.menu is not None
-    from backend.apps.onboarding.menu import MENU_CATEGORIES
+    from backend.apps.onboarding.prep.menu import MENU_CATEGORIES
     for category in MENU_CATEGORIES:
         assert len(getattr(out.menu, category)) == 4
diff --git a/backend/tests/test_onboarding_harvest.py b/backend/tests/test_onboarding_harvest.py
new file mode 100644
index 00000000..a8226ec5
--- /dev/null
+++ b/backend/tests/test_onboarding_harvest.py
@@ -0,0 +1,153 @@
+"""Usage-harvest tests: chatgpt/claude summaries + the browser-cookie read path (all fail-open)."""
+
+import base64
+import json
+
+import pytest
+
+def test_summarize_chatgpt_usage_leads_with_memory_and_caps():
+    from backend.apps.onboarding.usage.chatgpt_usage import TOTAL_CONVO_CHARS, summarize_chatgpt_usage
+
+    s = summarize_chatgpt_usage(
+        812,
+        ["Has an Akita", "Squats 495"],
+        ["Swift concurrency", "Deadlift form"],
+        ["User: fix my squat form?\nAssistant: brace harder."],
+    )
+    assert "812 past AI conversations" in s
+    assert "Has an Akita; Squats 495" in s
+    assert "Swift concurrency; Deadlift form" in s
+    assert "fix my squat form?" in s
+    big = summarize_chatgpt_usage(
+        1000,
+        [],
+        [f"t{i}x" for i in range(1000)],
+        ["c" * 60000 for _ in range(10)],
+    )
+    assert "t149x" in big and "t150x" not in big
+    convo_block = big.split("real asks + the exchange")[1]
+    assert len(convo_block) <= TOTAL_CONVO_CHARS + 10000
+
+
+@pytest.mark.asyncio
+async def test_harvest_chatgpt_usage_fails_open_without_codex(monkeypatch):
+    from backend.apps.onboarding.usage import chatgpt_usage
+
+    monkeypatch.setattr(chatgpt_usage, "read_persisted_connections", lambda: [])
+    assert await chatgpt_usage.harvest_chatgpt_usage() == ""
+
+
+def test_read_provider_cookies_fails_open_without_a_store(monkeypatch):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # No browser store has the domain -> empty jar/records, and the keychain is never touched.
+    monkeypatch.setattr(browser_cookies, "p_best_store", lambda domain: None)
+    assert browser_cookies.read_provider_cookies("claude.ai") == {}
+    assert browser_cookies.read_provider_cookie_records("claude.ai") == []
+
+
+def test_win_storage_key_parses_local_state_and_unwraps(monkeypatch, tmp_path):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # Local State carries a base64 "DPAPI"-prefixed key; the Windows path strips the prefix and
+    # hands the rest to CryptUnprotectData. Prove the parse + prefix-strip without needing Windows.
+    raw_key = b"DPAPI" + b"wrapped-key-bytes"
+    local_state_dir = tmp_path / "UserData"
+    local_state_dir.mkdir()
+    (local_state_dir / "Local State").write_text(
+        json.dumps({"os_crypt": {"encrypted_key": base64.b64encode(raw_key).decode()}})
+    )
+    monkeypatch.setattr(browser_cookies, "CHROMIUM_ROOTS", {"Chrome": str(local_state_dir)})
+    seen = {}
+
+    def fake_unprotect(data: bytes):
+        seen["passed"] = data
+        return b"unwrapped-aes-key"
+
+    monkeypatch.setattr(browser_cookies, "p_win_dpapi_unprotect", fake_unprotect)
+    key = browser_cookies.win_storage_key("Chrome")
+    assert key == b"unwrapped-aes-key"
+    assert seen["passed"] == b"wrapped-key-bytes"  # the 5-byte "DPAPI" prefix was stripped
+
+
+def test_win_storage_key_fails_open(monkeypatch, tmp_path):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # Missing Local State, malformed JSON, and DPAPI failure all fail open to None (-> scan fallback).
+    monkeypatch.setattr(browser_cookies, "CHROMIUM_ROOTS", {"Chrome": str(tmp_path)})
+    assert browser_cookies.win_storage_key("Chrome") is None  # no Local State file
+    assert browser_cookies.win_storage_key("Nonexistent") is None
+
+
+def test_decrypt_rejects_app_bound_v20():
+    from backend.apps.onboarding.usage import browser_cookies
+
+    # v20 = app-bound encryption (modern Chrome), out of reach on both OSes -> None, never a crash.
+    assert browser_cookies.decrypt_cookie_value(b"v20" + b"anything", b"\x00" * 32) is None
+    assert browser_cookies.decrypt_cookie_value(b"", b"\x00" * 32) is None
+
+
+def test_dump_cookies_only_serves_allowlisted_domains(monkeypatch, capsys):
+    from backend.apps.onboarding.usage import dump_cookies
+
+    # Patch the names in dump_cookies' own namespace, so a real read (+ keychain) never fires.
+    monkeypatch.setattr(dump_cookies, "read_provider_cookie_records", lambda domain: [{"name": "x", "value": "y"}])
+    monkeypatch.setattr(dump_cookies, "read_google_session_records", lambda: [{"name": "SID", "value": "g"}])
+    # An off-list domain must never trigger a read, prints [].
+    monkeypatch.setattr("sys.argv", ["dump_cookies", "evil.example.com"])
+    dump_cookies.main()
+    assert capsys.readouterr().out == "[]"
+    # An allowlisted domain passes through to the reader.
+    monkeypatch.setattr("sys.argv", ["dump_cookies", "claude.ai"])
+    dump_cookies.main()
+    assert '"name": "x"' in capsys.readouterr().out
+    # Gemini routes to the SCOPED google reader, not a raw gemini.google.com read.
+    monkeypatch.setattr("sys.argv", ["dump_cookies", "gemini.google.com"])
+    dump_cookies.main()
+    assert '"name": "SID"' in capsys.readouterr().out
+
+
+def test_read_google_session_records_scopes_to_named_auth_cookies(monkeypatch):
+    from backend.apps.onboarding.usage import browser_cookies
+
+    seen_domain = {}
+
+    def fake_records(domain: str):
+        seen_domain["d"] = domain
+        return [
+            {"name": "SID", "value": "a"},
+            {"name": "__Secure-1PSID", "value": "b"},
+            {"name": "SEARCH_SAMESITE", "value": "c"},  # non-auth google cookie
+            {"name": "OTZ", "value": "d"},  # non-auth google cookie
+        ]
+
+    monkeypatch.setattr(browser_cookies, "read_provider_cookie_records", fake_records)
+    recs = browser_cookies.read_google_session_records()
+    # Reads the parent SSO domain, then keeps ONLY the named auth cookies (never a full sweep).
+    assert seen_domain["d"] == ".google.com"
+    assert {r["name"] for r in recs} == {"SID", "__Secure-1PSID"}
+
+
+def test_summarize_claude_usage_counts_and_caps():
+    from backend.apps.onboarding.usage.claude_usage import TOTAL_CONVO_CHARS, summarize_claude_usage
+
+    s = summarize_claude_usage(
+        490,
+        ["Yuji Itadori and Buddhism", "B2B SaaS Startup Ideas"],
+        ["User: pitch me a startup\nAssistant: sure."],
+    )
+    assert "490 past Claude conversations" in s
+    assert "Yuji Itadori and Buddhism; B2B SaaS Startup Ideas" in s
+    assert "pitch me a startup" in s
+    big = summarize_claude_usage(1000, [f"t{i}x" for i in range(1000)], ["c" * 60000 for _ in range(10)])
+    assert "t149x" in big and "t150x" not in big
+    convo_block = big.split("real asks + the exchange")[1]
+    assert len(convo_block) <= TOTAL_CONVO_CHARS + 10000
+
+
+@pytest.mark.asyncio
+async def test_harvest_claude_usage_fails_open_without_cookies(monkeypatch):
+    from backend.apps.onboarding.usage import claude_usage
+
+    monkeypatch.setattr(claude_usage, "read_provider_cookies", lambda domain: {})
+    assert await claude_usage.harvest_claude_usage() == ""

From 4228cf5d0013025705e90fa59839147e0ee5b1d7 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:41 -0700
Subject: [PATCH 208/248] [eric] backend: unused imports and dead helpers swept

---
 backend/apps/agents/manager/predict_prompts.py  | 2 +-
 backend/apps/agents/ui_request_bridge.py        | 5 -----
 backend/apps/help/bundle.py                     | 2 +-
 backend/tests/test_app_export_no_stale_files.py | 1 -
 backend/tests/test_router_watchdog.py           | 2 --
 backend/tests/test_spawn_agent.py               | 2 +-
 backend/tests/test_subscription_health.py       | 2 +-
 backend/tests/test_tool_manifest.py             | 1 -
 backend/tests/test_ws_efficiency.py             | 1 -
 9 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/backend/apps/agents/manager/predict_prompts.py b/backend/apps/agents/manager/predict_prompts.py
index 5eb73da6..dc478ceb 100644
--- a/backend/apps/agents/manager/predict_prompts.py
+++ b/backend/apps/agents/manager/predict_prompts.py
@@ -34,7 +34,7 @@ def p_recent_topics(limit: int = MAX_TOPICS) -> List[str]:
     )
     topics: List[str] = []
     seen = set()
-    for _sid, d in data:
+    for _, d in data:
         name = (d.get("name") or "").strip()
         low = name.lower()
         if low in P_SKIP_NAMES or low in seen:
diff --git a/backend/apps/agents/ui_request_bridge.py b/backend/apps/agents/ui_request_bridge.py
index 4f14722c..faa78b08 100644
--- a/backend/apps/agents/ui_request_bridge.py
+++ b/backend/apps/agents/ui_request_bridge.py
@@ -49,8 +49,3 @@ def respond_to_ui_request(session_id: str, component_id: str, response: Dict[str
     pending.response = response
     pending.event.set()
     return True
-
-
-@typechecked
-def has_pending_ui_request(session_id: str, component_id: str) -> bool:
-    return (session_id, component_id) in p_pending
diff --git a/backend/apps/help/bundle.py b/backend/apps/help/bundle.py
index 4c3d4747..f4f4ee99 100644
--- a/backend/apps/help/bundle.py
+++ b/backend/apps/help/bundle.py
@@ -13,7 +13,7 @@ import re
 import sys
 import time
 from contextlib import asynccontextmanager
-from typing import AsyncIterator, List, Optional
+from typing import AsyncIterator, List
 
 from pydantic import BaseModel, ConfigDict, Field
 from typeguard import typechecked
diff --git a/backend/tests/test_app_export_no_stale_files.py b/backend/tests/test_app_export_no_stale_files.py
index 221b5841..00aeb247 100644
--- a/backend/tests/test_app_export_no_stale_files.py
+++ b/backend/tests/test_app_export_no_stale_files.py
@@ -4,7 +4,6 @@ exists. output.files is frozen at creation (v1); the agent edits land on disk
 imported app reverted every edited file (new files survived since they were never
 in the snapshot). With a workspace, disk is the single source of truth; only true
 flat apps (no workspace) still carry the inline copy."""
-import os
 import uuid
 
 import pytest
diff --git a/backend/tests/test_router_watchdog.py b/backend/tests/test_router_watchdog.py
index 68ce21eb..4bbb4964 100644
--- a/backend/tests/test_router_watchdog.py
+++ b/backend/tests/test_router_watchdog.py
@@ -4,10 +4,8 @@ evidence so a zero-config user never boots a router with nothing to route."""
 
 import asyncio
 import json
-import os
 from unittest.mock import patch
 
-import pytest
 
 import backend.apps.nine_router.process as proc
 from backend.apps.settings.models import AppSettings
diff --git a/backend/tests/test_spawn_agent.py b/backend/tests/test_spawn_agent.py
index 54550eed..61aa5f14 100644
--- a/backend/tests/test_spawn_agent.py
+++ b/backend/tests/test_spawn_agent.py
@@ -6,7 +6,7 @@ import asyncio
 import json
 import subprocess
 import sys
-from typing import Dict, List, Optional
+from typing import Dict, List
 
 from pytest import MonkeyPatch, raises
 
diff --git a/backend/tests/test_subscription_health.py b/backend/tests/test_subscription_health.py
index 806fcefc..2a3126bd 100644
--- a/backend/tests/test_subscription_health.py
+++ b/backend/tests/test_subscription_health.py
@@ -4,7 +4,7 @@ subscription lanes, and results are cached so a double boot-fetch can't double-s
 
 import asyncio
 import json
-from typing import Dict, List, Optional
+from typing import Dict, List
 
 import backend.apps.nine_router.subscription_health as sh
 
diff --git a/backend/tests/test_tool_manifest.py b/backend/tests/test_tool_manifest.py
index 67c0ce39..75e08dfc 100644
--- a/backend/tests/test_tool_manifest.py
+++ b/backend/tests/test_tool_manifest.py
@@ -3,7 +3,6 @@ FULL_TOOLS list that prunes dead preset built-ins WITHOUT dropping anything Open
 manifest MUST keep every built-in in effective_allowed's source set + ToolSearch (so deferred MCP
 loading survives); MCP tools ride mcp_servers, not this list."""
 
-import os
 
 from backend.apps.agents.manager.prompt.tool_catalog import (
     FULL_TOOLS,
diff --git a/backend/tests/test_ws_efficiency.py b/backend/tests/test_ws_efficiency.py
index 2e1b749f..8f0b239c 100644
--- a/backend/tests/test_ws_efficiency.py
+++ b/backend/tests/test_ws_efficiency.py
@@ -6,7 +6,6 @@ clients backwards, and an open session in the history map had its terminal frame
 
 import asyncio
 
-import pytest
 from fastapi.testclient import TestClient
 
 from backend.apps.agents.core.ws_manager import ws_manager, slim_status_data

From e49848440989d56be5933a7b24e41f0c5cd93e4c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:53 -0700
Subject: [PATCH 209/248] [eric] agents: pool state typed end to end (protocol
 attrs + SdkClientLike casts), pyright clean

---
 backend/apps/agents/agent_manager.py              |  6 ++++--
 .../apps/agents/manager/AgentManagerProtocol.py   |  7 ++++++-
 backend/apps/agents/manager/run/TurnRunner.py     |  8 +++++---
 backend/apps/agents/manager/run/client_pool.py    | 15 ++++++++++++---
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/backend/apps/agents/agent_manager.py b/backend/apps/agents/agent_manager.py
index 0195e04a..48910c26 100644
--- a/backend/apps/agents/agent_manager.py
+++ b/backend/apps/agents/agent_manager.py
@@ -29,6 +29,8 @@ from backend.apps.agents.manager.MockAgent import MockAgent
 from backend.apps.agents.manager.RunSupport import RunSupport
 from backend.apps.agents.manager.run.handle_run_error import handle_run_error
 from backend.apps.agents.manager.run.TurnRunner import TurnRunner
+from backend.apps.agents.manager.run.client_pool import ClientHandle
+from backend.apps.agents.manager.streaming.HookContext import HookContext
 from backend.apps.agents.manager.run.RunOptions import RunOptions
 
 logger = logging.getLogger(__name__)
@@ -49,9 +51,9 @@ class AgentManager(SessionLifecycle, SessionPersistence, Messaging, SessionContr
         # Per-session cancel signal: the loop stashes its asyncio.Event here so a stop/close can set it. Lives on the manager, not the AgentSession model, so it stays out of serialization (an Event can't be model_dump'd).
         self.cancel_events: Dict[str, asyncio.Event] = {}
         # Persistent-client pool (lever A, flag-gated): one live CLI per session, reused across turns.
-        self.client_pool: Dict[str, object] = {}
+        self.client_pool: Dict[str, ClientHandle] = {}
         # Per-SESSION hook context + stderr buffer, updated in place each turn: a persistent client's hooks/stderr callback were bound at connect, so they must read stable objects, not per-turn rebuilds.
-        self.hook_ctxs: Dict[str, object] = {}
+        self.hook_ctxs: Dict[str, HookContext] = {}
         self.stderr_buffers: Dict[str, List[str]] = {}
         # Admission gate: one shared semaphore caps concurrent ROOT turns (children bypass). (Re)created per running loop by get_turn_admission so it never binds to a dead loop across a uvicorn reload or a test's asyncio.run.
         self.p_turn_admission_sema: Optional[asyncio.Semaphore] = None
diff --git a/backend/apps/agents/manager/AgentManagerProtocol.py b/backend/apps/agents/manager/AgentManagerProtocol.py
index c2498883..da6987b5 100644
--- a/backend/apps/agents/manager/AgentManagerProtocol.py
+++ b/backend/apps/agents/manager/AgentManagerProtocol.py
@@ -13,10 +13,12 @@ just sits once in the MRO. Re-enables the linter's pyright reportAttributeAccess
 from __future__ import annotations
 
 import asyncio
-from typing import TYPE_CHECKING, Any, Dict
+from typing import TYPE_CHECKING, Any, Dict, List
 
 if TYPE_CHECKING:
     from backend.apps.agents.core.models import AgentSession
+    from backend.apps.agents.manager.run.client_pool import ClientHandle
+    from backend.apps.agents.manager.streaming.HookContext import HookContext
     from backend.apps.agents.manager.streaming.PartialReply import PartialReply
 
 
@@ -26,6 +28,9 @@ class AgentManagerProtocol:
     tasks: Dict[str, asyncio.Task]
     live_partial: Dict[str, PartialReply]
     cancel_events: Dict[str, asyncio.Event]
+    client_pool: Dict[str, ClientHandle]
+    hook_ctxs: Dict[str, HookContext]
+    stderr_buffers: Dict[str, List[str]]
 
     if TYPE_CHECKING:
         # Methods implemented on sibling mixins / AgentManager itself and called cross-mixin. Loose signatures on purpose: typeCheckingMode is off, so this only has to assert the names exist, not pin their call shapes.
diff --git a/backend/apps/agents/manager/run/TurnRunner.py b/backend/apps/agents/manager/run/TurnRunner.py
index 1167f547..b749a32a 100644
--- a/backend/apps/agents/manager/run/TurnRunner.py
+++ b/backend/apps/agents/manager/run/TurnRunner.py
@@ -6,7 +6,7 @@ except-handlers can still read them after a mid-stream failure."""
 import asyncio
 import logging
 import time
-from typing import Dict, List, Union
+from typing import Dict, List, Union, cast
 from typeguard import typechecked
 
 from backend.apps.agents.core.models import AgentSession
@@ -17,6 +17,7 @@ from backend.apps.agents.manager.streaming.handle_stream_event import handle_str
 from backend.apps.agents.manager.streaming.handle_assistant_message import handle_assistant_message
 from backend.apps.agents.manager.streaming.handle_result_message import handle_result_message
 from backend.apps.agents.manager.run.client_pool import (
+    SdkClientLike,
     acquire_client,
     boot_fingerprint,
     dispose_client,
@@ -132,8 +133,9 @@ class TurnRunner(AgentManagerProtocol):
             async with handle.lock:
                 handle.turns_served += 1
                 try:
-                    await handle.client.query(prompt_stream())
-                    await p_run_streaming_turn(p_stream=handle.client.receive_response())
+                    sdk = cast(SdkClientLike, handle.client)
+                    await sdk.query(prompt_stream())
+                    await p_run_streaming_turn(p_stream=sdk.receive_response())
                     # LRU by turn-END so a session mid-long-turn isn't first cap-evicted the instant it finishes.
                     handle.last_used = time.monotonic()
                 except BaseException:
diff --git a/backend/apps/agents/manager/run/client_pool.py b/backend/apps/agents/manager/run/client_pool.py
index 368a94d5..722cb30a 100644
--- a/backend/apps/agents/manager/run/client_pool.py
+++ b/backend/apps/agents/manager/run/client_pool.py
@@ -14,7 +14,7 @@ import json
 import logging
 import os
 import time
-from typing import Awaitable, Callable, Dict, List, Optional
+from typing import Any, AsyncIterator, Awaitable, Callable, Dict, Optional, Protocol, cast
 
 from pydantic import BaseModel, ConfigDict, InstanceOf
 from typeguard import typechecked
@@ -58,6 +58,15 @@ def boot_fingerprint(options_kwargs: Dict, session: AgentSession) -> str:
     return hashlib.sha256(blob.encode()).hexdigest()
 
 
+class SdkClientLike(Protocol):
+    """The slice of claude_agent_sdk.ClaudeSDKClient the pool touches. The real class can't be
+    module-imported here (mock-mode must import the manager without the SDK), so callers cast."""
+
+    async def query(self, prompt: Any) -> None: ...
+    def receive_response(self) -> AsyncIterator[Any]: ...
+    async def disconnect(self) -> None: ...
+
+
 class ClientHandle(BaseModel):
     model_config = ConfigDict(validate_assignment=True)
 
@@ -150,7 +159,7 @@ async def dispose_client(pool: Dict[str, ClientHandle], session_id: str) -> None
     if handle is None:
         return
     try:
-        await handle.client.disconnect()
+        await cast(SdkClientLike, handle.client).disconnect()
     except Exception:
         logger.exception(f"[client-pool] {session_id}: disconnect failed (subprocess may already be dead)")
 
@@ -164,7 +173,7 @@ def dispose_client_soon(pool: Dict[str, ClientHandle], session_id: str) -> None:
 
     async def p_bg() -> None:
         try:
-            await handle.client.disconnect()
+            await cast(SdkClientLike, handle.client).disconnect()
         except Exception:
             logger.exception(f"[client-pool] {session_id}: background disconnect failed")
 

From 2a9f1e4bf35149746cf2e85b388f568c6592da81 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:53 -0700
Subject: [PATCH 210/248] [eric] voice: context extracted to its own module,
 provider/overlay runtime import cycle broken

---
 .../ChatInput/toolbar/ToolbarActions.tsx      |  2 +-
 .../Dashboard/desktop/DesktopSpawnPill.tsx    |  2 +-
 .../app/pages/Dashboard/desktop/HelpPill.tsx  |  2 +-
 .../shared/voice/VoiceDictationContext.tsx    | 29 ++----------------
 frontend/src/shared/voice/VoiceOverlay.tsx    |  2 +-
 frontend/src/shared/voice/voiceContext.ts     | 30 +++++++++++++++++++
 6 files changed, 37 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/shared/voice/voiceContext.ts

diff --git a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
index cca72991..b50f3cc2 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput/toolbar/ToolbarActions.tsx
@@ -15,7 +15,7 @@ import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { fetchSkills } from '@/shared/state/skillsSlice';
 import { openSettingsModal } from '@/shared/state/settingsSlice';
-import { useVoice } from '@/shared/voice/VoiceDictationContext';
+import { useVoice } from '@/shared/voice/voiceContext';
 import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
 import { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { ComposerPlusMenu, ActiveTogglePills, PlusMenuItem } from './ComposerPlusMenu';
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index f6afb222..cac473c4 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -6,7 +6,7 @@ import AddRounded from '@mui/icons-material/AddRounded';
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
 import MicIcon from '@mui/icons-material/Mic';
 import CircularProgress from '@mui/material/CircularProgress';
-import { useVoice } from '@/shared/voice/VoiceDictationContext';
+import { useVoice } from '@/shared/voice/voiceContext';
 import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
 import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
 import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index 6d6cbd07..73bacef2 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -5,7 +5,7 @@ import Tooltip from '@mui/material/Tooltip';
 import CircularProgress from '@mui/material/CircularProgress';
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
 import MicIcon from '@mui/icons-material/Mic';
-import { useVoice } from '@/shared/voice/VoiceDictationContext';
+import { useVoice } from '@/shared/voice/voiceContext';
 import HelpPanel from './HelpPanel';
 
 /** Top-right desktop pill: Help opens the help panel (ask, report a bug, docs); the mic dictates (local whisper) into the focused field. */
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
index 14d2dd89..95acdc84 100644
--- a/frontend/src/shared/voice/VoiceDictationContext.tsx
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -1,29 +1,12 @@
-import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useAppSelector } from '@/shared/hooks';
-import { useVoiceDictation, VoiceState, VoiceFeedback } from './useVoiceDictation';
+import { useVoiceDictation } from './useVoiceDictation';
+import { VoiceContext } from './voiceContext';
 import VoiceOverlay from './VoiceOverlay';
 
 // One recorder for the whole app. Both mics (the Help pill and the spawn composer) plus the global
 // hotkey drive the SAME dictation session, so two mics can't fight over the microphone or show
 // out-of-sync state. Mounted once near the app root.
-interface VoiceContextValue {
-  state: VoiceState;
-  lastText: string;
-  error: string | null;
-  pct: number;
-  feedback: VoiceFeedback | null;
-  toggle: () => void;
-  // Mic-button press semantics that respect the hold/toggle setting: press starts (or toggles),
-  // release stops only in hold mode. Buttons wire onPointerDown/Up to these and stay mode-agnostic.
-  pressStart: () => void;
-  pressEnd: () => void;
-  holdMode: boolean;
-  volumeRef: React.MutableRefObject<number>;
-}
-
-const NOOP_REF = { current: 0 };
-const NOOP: VoiceContextValue = { state: 'idle', lastText: '', error: null, pct: 0, feedback: null, toggle: () => {}, pressStart: () => {}, pressEnd: () => {}, holdMode: true, volumeRef: NOOP_REF };
-const VoiceContext = createContext<VoiceContextValue>(NOOP);
 
 export function VoiceDictationProvider({ children }: { children: React.ReactNode }): React.ReactElement {
   const { state, lastText, error, pct, feedback, toggle, start, stop, volumeRef } = useVoiceDictation();
@@ -67,9 +50,3 @@ export function VoiceDictationProvider({ children }: { children: React.ReactNode
     </VoiceContext.Provider>
   );
 }
-
-// A component rendered outside the provider (or a web build with no Electron bridge) gets the no-op,
-// so mics still render and just do nothing rather than crashing.
-export function useVoice(): VoiceContextValue {
-  return useContext(VoiceContext);
-}
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index 433162cd..2fef3f29 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -6,7 +6,7 @@ import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import ContentPasteRoundedIcon from '@mui/icons-material/ContentPasteRounded';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { useThemeAccent } from '@/shared/styles/ThemeContext';
-import { useVoice } from './VoiceDictationContext';
+import { useVoice } from './voiceContext';
 
 // WhisperFlow-style presence: while the mic is hot, an accent-tinted aurora breathes up from the
 // bottom edge, its height and glow riding the live mic level. Imperative rAF writes only (opacity +
diff --git a/frontend/src/shared/voice/voiceContext.ts b/frontend/src/shared/voice/voiceContext.ts
new file mode 100644
index 00000000..47cc6458
--- /dev/null
+++ b/frontend/src/shared/voice/voiceContext.ts
@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react';
+import { VoiceState, VoiceFeedback } from './useVoiceDictation';
+
+// The context lives below both the provider and the overlay so neither imports the other
+// (VoiceDictationContext renders VoiceOverlay; both reach down here instead of sideways).
+export interface VoiceContextValue {
+  state: VoiceState;
+  lastText: string;
+  error: string | null;
+  pct: number;
+  feedback: VoiceFeedback | null;
+  toggle: () => void;
+  // Mic-button press semantics that respect the hold/toggle setting: press starts (or toggles),
+  // release stops only in hold mode. Buttons wire onPointerDown/Up to these and stay mode-agnostic.
+  pressStart: () => void;
+  pressEnd: () => void;
+  holdMode: boolean;
+  volumeRef: React.MutableRefObject<number>;
+}
+
+const NOOP_REF = { current: 0 };
+const NOOP: VoiceContextValue = { state: 'idle', lastText: '', error: null, pct: 0, feedback: null, toggle: () => {}, pressStart: () => {}, pressEnd: () => {}, holdMode: true, volumeRef: NOOP_REF };
+
+export const VoiceContext = createContext<VoiceContextValue>(NOOP);
+
+// A component rendered outside the provider (or a web build with no Electron bridge) gets the no-op,
+// so mics still render and just do nothing rather than crashing.
+export function useVoice(): VoiceContextValue {
+  return useContext(VoiceContext);
+}

From 8d2ef9b62a4ee10dfacbf0ab045d681becdb8950 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:54 -0700
Subject: [PATCH 211/248] [eric] settings: shared toggle/switch styles replace
 third-copy dupes; styles typed off any

---
 .../sections/general/GeneralAdvanced.tsx      | 12 +---
 .../sections/general/GeneralInterface.tsx     | 69 ++-----------------
 .../pages/Settings/sections/settingsStyles.ts | 29 +++++++-
 3 files changed, 37 insertions(+), 73 deletions(-)

diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
index 104b3fa1..268aafe7 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
@@ -22,7 +22,7 @@ const GeneralAdvanced: React.FC<{
   const c = useClaudeTokens();
   const dispatch = useAppDispatch();
   const appVersion = useAppSelector((s) => s.update.appVersion);
-  const { sectionSx, rowSx, inlineRowSx, inlineRowLastSx, labelSx, descSx } = styles;
+  const { sectionSx, rowSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, switchSx } = styles;
 
   // Provenance: the exact commit this build was cut from. Surfaced so a support screenshot of Settings is enough to identify the shipped code. Empty in dev / web (no Electron bridge or unknown sha), in which case we hide the row.
   const [buildLabel, setBuildLabel] = React.useState<string | null>(null);
@@ -44,10 +44,7 @@ const GeneralAdvanced: React.FC<{
         <Switch
           checked={form.dev_mode}
           onChange={(e) => setForm({ ...form, dev_mode: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
@@ -59,10 +56,7 @@ const GeneralAdvanced: React.FC<{
         <Switch
           checked={form.allow_experimental_updates}
           onChange={(e) => setForm({ ...form, allow_experimental_updates: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 564984a0..47757b29 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -24,7 +24,7 @@ const GeneralInterface: React.FC<{
   const c = useClaudeTokens();
   const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
   const [recordingShortcut, setRecordingShortcut] = useState(false);
-  const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx } = styles;
+  const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx } = styles;
 
   return (
     <>
@@ -39,23 +39,7 @@ const GeneralInterface: React.FC<{
           exclusive
           onChange={(_, v) => { if (v) setForm({ ...form, theme: v }); }}
           size="small"
-          sx={{
-            '& .MuiToggleButton-root': {
-              color: c.text.muted,
-              borderColor: c.border.medium,
-              textTransform: 'none',
-              px: 2,
-              py: 0.5,
-              gap: 0.5,
-              fontSize: '0.8125rem',
-              '&.Mui-selected': {
-                bgcolor: `${c.accent.primary}15`,
-                color: c.accent.primary,
-                borderColor: c.accent.primary,
-                '&:hover': { bgcolor: `${c.accent.primary}20` },
-              },
-            },
-          }}
+          sx={toggleGroupSx}
         >
           <ToggleButton value="light">
             <LightModeIcon sx={{ fontSize: 16 }} /> Light
@@ -76,22 +60,7 @@ const GeneralInterface: React.FC<{
           exclusive
           onChange={(_, v) => { if (v) setForm({ ...form, ui_font_scale: v }); }}
           size="small"
-          sx={{
-            '& .MuiToggleButton-root': {
-              color: c.text.muted,
-              borderColor: c.border.medium,
-              textTransform: 'none',
-              px: 1.75,
-              py: 0.5,
-              fontSize: '0.8125rem',
-              '&.Mui-selected': {
-                bgcolor: `${c.accent.primary}15`,
-                color: c.accent.primary,
-                borderColor: c.accent.primary,
-                '&:hover': { bgcolor: `${c.accent.primary}20` },
-              },
-            },
-          }}
+          sx={toggleGroupSx}
         >
           <ToggleButton value={0.9}>Small</ToggleButton>
           <ToggleButton value={1}>Default</ToggleButton>
@@ -116,22 +85,7 @@ const GeneralInterface: React.FC<{
             if (v) void window.openswarm?.voiceRequestHoldPermission?.();
           }}
           size="small"
-          sx={{
-            '& .MuiToggleButton-root': {
-              color: c.text.muted,
-              borderColor: c.border.medium,
-              textTransform: 'none',
-              px: 1.75,
-              py: 0.5,
-              fontSize: '0.8125rem',
-              '&.Mui-selected': {
-                bgcolor: `${c.accent.primary}15`,
-                color: c.accent.primary,
-                borderColor: c.accent.primary,
-                '&:hover': { bgcolor: `${c.accent.primary}20` },
-              },
-            },
-          }}
+          sx={toggleGroupSx}
         >
           <ToggleButton value={true}>Hold to talk</ToggleButton>
           <ToggleButton value={false}>Tap to toggle</ToggleButton>
@@ -245,10 +199,7 @@ const GeneralInterface: React.FC<{
         <Switch
           checked={form.auto_select_mode_on_new_agent}
           onChange={(e) => setForm({ ...form, auto_select_mode_on_new_agent: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
@@ -260,10 +211,7 @@ const GeneralInterface: React.FC<{
         <Switch
           checked={form.expand_new_chats_in_dashboard}
           onChange={(e) => setForm({ ...form, expand_new_chats_in_dashboard: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
@@ -275,10 +223,7 @@ const GeneralInterface: React.FC<{
         <Switch
           checked={form.auto_reveal_sub_agents}
           onChange={(e) => setForm({ ...form, auto_reveal_sub_agents: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
diff --git a/frontend/src/app/pages/Settings/sections/settingsStyles.ts b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
index b57775ab..4eb6c5fd 100644
--- a/frontend/src/app/pages/Settings/sections/settingsStyles.ts
+++ b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
@@ -1,5 +1,7 @@
+import { ClaudeTokens } from '@/shared/styles/claudeTokens';
+
 // Theme-dependent style objects shared across Settings tabs; built from the resolved Claude tokens.
-export function makeSettingsStyles(c: any) {
+export function makeSettingsStyles(c: ClaudeTokens) {
   const fieldSx = {
     '& .MuiOutlinedInput-root': {
       fontSize: '0.875rem',
@@ -59,7 +61,30 @@ export function makeSettingsStyles(c: any) {
     lineHeight: 1.4,
   };
 
-  return { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx };
+  const toggleGroupSx = {
+    '& .MuiToggleButton-root': {
+      color: c.text.muted,
+      borderColor: c.border.medium,
+      textTransform: 'none' as const,
+      px: 1.75,
+      py: 0.5,
+      gap: 0.5,
+      fontSize: '0.8125rem',
+      '&.Mui-selected': {
+        bgcolor: `${c.accent.primary}15`,
+        color: c.accent.primary,
+        borderColor: c.accent.primary,
+        '&:hover': { bgcolor: `${c.accent.primary}20` },
+      },
+    },
+  };
+
+  const switchSx = {
+    '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
+    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
+  };
+
+  return { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx };
 }
 
 export type SettingsStyles = ReturnType<typeof makeSettingsStyles>;

From e2952155874bbbece59f0d1a83dc7864775e303a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:54 -0700
Subject: [PATCH 212/248] [eric] dock: entries builder extracted, utility tiles
 folded into one map (408 to 277 lines)

---
 .../pages/Dashboard/desktop/DesktopDock.tsx   | 196 +++---------------
 .../pages/Dashboard/desktop/dockEntries.tsx   | 128 ++++++++++++
 2 files changed, 160 insertions(+), 164 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx

diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index ab7c1a13..b458a117 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -7,17 +7,13 @@ import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
 import EventRepeatIcon from '@mui/icons-material/EventRepeat';
 import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
 import HistoryIcon from '@mui/icons-material/History';
-import { pickIcon } from '../canvas/DashboardGlyph';
-import { MessageCircle } from 'lucide-react';
 import { openWorkflowsApp } from '@/shared/state/dashboardLayoutSlice';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
-import EditNoteIcon from '@mui/icons-material/EditNote';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import { useAppDispatch } from '@/shared/hooks';
 import { openSettingsModal } from '@/shared/state/settingsSlice';
 import { getWebview } from '@/shared/browserRegistry';
-import { displayChatTitle } from '@/shared/state/sessionDisplay';
+import { buildDockEntries, CardRect, DockEntry } from './dockEntries';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -28,25 +24,6 @@ import type {
 } from '@/shared/state/dashboardLayoutSlice';
 import type { Output } from '@/shared/state/outputsSlice';
 
-interface CardRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-interface DockEntry {
-  id: string;
-  label: string;
-  rect: CardRect;
-  tileBg: string;
-  icon: React.ReactNode;
-  faviconUrl?: string;
-  thumbnail?: string | null;
-  browserId?: string;
-  snippet?: string;
-}
-
 interface DesktopDockProps {
   sessions: Record<string, AgentSession>;
   cards: Record<string, CardPosition>;
@@ -66,21 +43,6 @@ interface DesktopDockProps {
 const TILE = 30;
 const PREVIEW_W = 190;
 
-// Frames show a colorful per-card dock, not uniform tiles; hues rotate by name so two agents rarely match.
-const AGENT_TILE_HUES = [
-  'linear-gradient(135deg, #4a7dd6, #2b4fa8)',
-  'linear-gradient(135deg, #8a5bd6, #5b34a8)',
-  'linear-gradient(135deg, #3aa88f, #1f7a64)',
-  'linear-gradient(135deg, #d6754a, #a8492b)',
-  'linear-gradient(135deg, #c94a7d, #96305c)',
-];
-
-function hueFor(name: string): string {
-  let h = 0;
-  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) | 0;
-  return AGENT_TILE_HUES[Math.abs(h) % AGENT_TILE_HUES.length];
-}
-
 /** Left-edge desktop dock: one tile per open card, hover previews, click focuses the window. */
 function DesktopDock({
   sessions,
@@ -133,72 +95,10 @@ function DesktopDock({
   const [liveShot, setLiveShot] = useState<{ id: string; dataUrl: string } | null>(null);
   const hoverTimer = useRef<number | null>(null);
 
-  const entries = useMemo<DockEntry[]>(() => {
-    const list: DockEntry[] = [];
-    for (const card of Object.values(cards)) {
-      const session = sessions[card.session_id];
-      if (!session) continue;
-      const title = displayChatTitle(session);
-      const ChatIcon = pickIcon(title) || MessageCircle;
-      list.push({
-        id: card.session_id,
-        label: title,
-        rect: card,
-        tileBg: hueFor(title),
-        icon: <ChatIcon size={16} strokeWidth={1.75} color="#fff" />,
-        snippet: session.turn_label?.label || undefined,
-      });
-    }
-    for (const bc of Object.values(browserCards)) {
-      const activeTab = bc.tabs.find((t) => t.id === bc.activeTabId) || bc.tabs[0];
-      list.push({
-        id: bc.browser_id,
-        label: activeTab?.title || 'Browser',
-        rect: bc,
-        tileBg: 'linear-gradient(135deg, #4f9fe8, #2f6ed4)',
-        icon: <LanguageIcon sx={{ fontSize: 17, color: '#fff' }} />,
-        faviconUrl: activeTab?.favicon,
-        browserId: bc.browser_id,
-      });
-    }
-    for (const [cardKey, vc] of Object.entries(viewCards)) {
-      const output = outputs[vc.output_id];
-      const appName = output?.name || 'App';
-      list.push({
-        id: cardKey,
-        label: appName,
-        rect: vc,
-        tileBg: 'linear-gradient(135deg, #ef9552, #d96a2b)',
-        icon: (
-          <Typography sx={{ fontSize: 14, fontWeight: 700, color: '#fff', lineHeight: 1 }}>
-            {appName.charAt(0).toUpperCase()}
-          </Typography>
-        ),
-        thumbnail: output?.thumbnail,
-      });
-    }
-    for (const note of Object.values(notes)) {
-      const firstLine = (note.content || '').split('\n')[0].trim();
-      list.push({
-        id: note.note_id,
-        label: firstLine || 'Note',
-        rect: note,
-        tileBg: 'linear-gradient(135deg, #f2d270, #e0b23e)',
-        icon: <EditNoteIcon sx={{ fontSize: 18, color: '#7a5d10' }} />,
-        snippet: (note.content || '').slice(0, 140),
-      });
-    }
-    for (const [cardKey, wf] of Object.entries(workflowCards)) {
-      list.push({
-        id: cardKey,
-        label: 'Workflow',
-        rect: wf,
-        tileBg: 'linear-gradient(135deg, #ef7a70, #d94f45)',
-        icon: <CalendarMonthIcon sx={{ fontSize: 16, color: '#fff' }} />,
-      });
-    }
-    return list;
-  }, [sessions, cards, viewCards, browserCards, notes, workflowCards, outputs]);
+  const entries = useMemo<DockEntry[]>(
+    () => buildDockEntries({ sessions, cards, viewCards, browserCards, notes, workflowCards, outputs }),
+    [sessions, cards, viewCards, browserCards, notes, workflowCards, outputs],
+  );
 
   const beginHover = useCallback(
     (entry: DockEntry, target: HTMLElement) => {
@@ -304,72 +204,40 @@ function DesktopDock({
       {entries.length > 0 && (
         <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
       )}
-      {/* The og toolbar's actions, dock-resident: chat, browser, workflow, note, history. */}
+      {/* The og toolbar's actions, dock-resident: chat, browser, workflow, note, history, then settings + apps below their own divider. */}
       {([
         { label: 'New chat', icon: <ChatBubbleOutlineIcon sx={{ fontSize: 16, color: '#e8e8ee' }} />, act: onNewAgent },
         { label: 'New browser', icon: <LanguageIcon sx={{ fontSize: 17, color: '#e8e8ee' }} />, act: onAddBrowser },
         { label: 'Workflows', icon: <EventRepeatIcon sx={{ fontSize: 16, color: '#e8e8ee' }} />, act: () => dispatch(openWorkflowsApp()) },
         { label: 'New note', icon: <StickyNote2OutlinedIcon sx={{ fontSize: 16, color: '#e8e8ee' }} />, act: onAddNote },
         { label: 'History', icon: <HistoryIcon sx={{ fontSize: 17, color: '#e8e8ee' }} />, act: () => window.dispatchEvent(new CustomEvent('openswarm:open-history')) },
-      ] as const).map((a) => (
-        <Tooltip key={a.label} title={a.label} placement="right">
-          <Box
-            className="osw-dock-tile"
-            onClick={a.act}
-            onMouseEnter={endHover}
-            sx={{
-              width: TILE,
-              height: TILE,
-              borderRadius: '12px',
-              background: 'linear-gradient(135deg, #5a5a62, #34343c)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              cursor: 'pointer',
-              flexShrink: 0,
-            }}
-          >
-            {a.icon}
-          </Box>
-        </Tooltip>
+        { label: 'Settings', icon: <SettingsIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />, act: () => dispatch(openSettingsModal(undefined)), divider: true },
+        { label: 'Applications', icon: <AppsRoundedIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />, act: onApplications, bg: 'linear-gradient(135deg, #3d3d46, #232329)' },
+      ] as { label: string; icon: React.ReactNode; act: () => void; divider?: boolean; bg?: string }[]).map((a) => (
+        <React.Fragment key={a.label}>
+          {a.divider && <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />}
+          <Tooltip title={a.label} placement="right">
+            <Box
+              className="osw-dock-tile"
+              onClick={a.act}
+              onMouseEnter={endHover}
+              sx={{
+                width: TILE,
+                height: TILE,
+                borderRadius: '12px',
+                background: a.bg ?? 'linear-gradient(135deg, #5a5a62, #34343c)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                flexShrink: 0,
+              }}
+            >
+              {a.icon}
+            </Box>
+          </Tooltip>
+        </React.Fragment>
       ))}
-      <Box sx={{ width: TILE - 8, height: '1px', background: 'rgba(255,255,255,0.14)' }} />
-      <Box
-        className="osw-dock-tile"
-        onClick={() => dispatch(openSettingsModal(undefined))}
-        onMouseEnter={endHover}
-        sx={{
-          width: TILE,
-          height: TILE,
-          borderRadius: '12px',
-          background: 'linear-gradient(135deg, #5a5a62, #34343c)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: 'pointer',
-          flexShrink: 0,
-        }}
-      >
-        <SettingsIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
-      </Box>
-      <Box
-        className="osw-dock-tile"
-        onClick={onApplications}
-        onMouseEnter={endHover}
-        sx={{
-          width: TILE,
-          height: TILE,
-          borderRadius: '12px',
-          background: 'linear-gradient(135deg, #3d3d46, #232329)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: 'pointer',
-          flexShrink: 0,
-        }}
-      >
-        <AppsRoundedIcon sx={{ fontSize: 18, color: '#e8e8ee' }} />
-      </Box>
 
       {hoveredEntry && (
         <Box
diff --git a/frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx b/frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx
new file mode 100644
index 00000000..e0823568
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import LanguageIcon from '@mui/icons-material/Language';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import { MessageCircle } from 'lucide-react';
+import { pickIcon } from '../canvas/DashboardGlyph';
+import { displayChatTitle } from '@/shared/state/sessionDisplay';
+import type { AgentSession } from '@/shared/state/agentsSlice';
+import type {
+  CardPosition,
+  ViewCardPosition,
+  BrowserCardPosition,
+  NotePosition,
+  WorkflowCardPosition,
+} from '@/shared/state/dashboardLayoutSlice';
+import type { Output } from '@/shared/state/outputsSlice';
+
+export interface CardRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface DockEntry {
+  id: string;
+  label: string;
+  rect: CardRect;
+  tileBg: string;
+  icon: React.ReactNode;
+  faviconUrl?: string;
+  thumbnail?: string | null;
+  browserId?: string;
+  snippet?: string;
+}
+
+export interface DockSlices {
+  sessions: Record<string, AgentSession>;
+  cards: Record<string, CardPosition>;
+  viewCards: Record<string, ViewCardPosition>;
+  browserCards: Record<string, BrowserCardPosition>;
+  notes: Record<string, NotePosition>;
+  workflowCards: Record<string, WorkflowCardPosition>;
+  outputs: Record<string, Output>;
+}
+
+// Frames show a colorful per-card dock, not uniform tiles; hues rotate by name so two agents rarely match.
+const AGENT_TILE_HUES = [
+  'linear-gradient(135deg, #4a7dd6, #2b4fa8)',
+  'linear-gradient(135deg, #8a5bd6, #5b34a8)',
+  'linear-gradient(135deg, #3aa88f, #1f7a64)',
+  'linear-gradient(135deg, #d6754a, #a8492b)',
+  'linear-gradient(135deg, #c94a7d, #96305c)',
+];
+
+function hueFor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) | 0;
+  return AGENT_TILE_HUES[Math.abs(h) % AGENT_TILE_HUES.length];
+}
+
+export function buildDockEntries({ sessions, cards, viewCards, browserCards, notes, workflowCards, outputs }: DockSlices): DockEntry[] {
+  const list: DockEntry[] = [];
+  for (const card of Object.values(cards)) {
+    const session = sessions[card.session_id];
+    if (!session) continue;
+    const title = displayChatTitle(session);
+    const ChatIcon = pickIcon(title) || MessageCircle;
+    list.push({
+      id: card.session_id,
+      label: title,
+      rect: card,
+      tileBg: hueFor(title),
+      icon: <ChatIcon size={16} strokeWidth={1.75} color="#fff" />,
+      snippet: session.turn_label?.label || undefined,
+    });
+  }
+  for (const bc of Object.values(browserCards)) {
+    const activeTab = bc.tabs.find((t) => t.id === bc.activeTabId) || bc.tabs[0];
+    list.push({
+      id: bc.browser_id,
+      label: activeTab?.title || 'Browser',
+      rect: bc,
+      tileBg: 'linear-gradient(135deg, #4f9fe8, #2f6ed4)',
+      icon: <LanguageIcon sx={{ fontSize: 17, color: '#fff' }} />,
+      faviconUrl: activeTab?.favicon,
+      browserId: bc.browser_id,
+    });
+  }
+  for (const [cardKey, vc] of Object.entries(viewCards)) {
+    const output = outputs[vc.output_id];
+    const appName = output?.name || 'App';
+    list.push({
+      id: cardKey,
+      label: appName,
+      rect: vc,
+      tileBg: 'linear-gradient(135deg, #ef9552, #d96a2b)',
+      icon: (
+        <Typography sx={{ fontSize: 14, fontWeight: 700, color: '#fff', lineHeight: 1 }}>
+          {appName.charAt(0).toUpperCase()}
+        </Typography>
+      ),
+      thumbnail: output?.thumbnail,
+    });
+  }
+  for (const note of Object.values(notes)) {
+    const firstLine = (note.content || '').split('\n')[0].trim();
+    list.push({
+      id: note.note_id,
+      label: firstLine || 'Note',
+      rect: note,
+      tileBg: 'linear-gradient(135deg, #f2d270, #e0b23e)',
+      icon: <EditNoteIcon sx={{ fontSize: 18, color: '#7a5d10' }} />,
+      snippet: (note.content || '').slice(0, 140),
+    });
+  }
+  for (const [cardKey, wf] of Object.entries(workflowCards)) {
+    list.push({
+      id: cardKey,
+      label: 'Workflow',
+      rect: wf,
+      tileBg: 'linear-gradient(135deg, #ef7a70, #d94f45)',
+      icon: <CalendarMonthIcon sx={{ fontSize: 16, color: '#fff' }} />,
+    });
+  }
+  return list;
+}

From 05656a7491c16aed0b0822dc07f284fef37a4940 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:06:54 -0700
Subject: [PATCH 213/248] [eric] shell: dead sidebar-era imports and consts
 swept; extractors typed unknown; minus glyphs

---
 .../src/app/components/Layout/AppShell.tsx    | 373 +-----------------
 .../pages/AgentChat/tool-ui/showUiPayload.ts  |   8 +-
 .../pages/Dashboard/cards/WindowControls.tsx  |   6 +-
 .../app/pages/Dashboard/desktop/agentTodos.ts |  15 +-
 4 files changed, 20 insertions(+), 382 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 28086e4e..e71277b5 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -1,40 +1,22 @@
-import React, { useState, useEffect, useRef, useCallback, startTransition, useMemo } from 'react';
-import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom';
+import React, { useState, useEffect, useCallback, startTransition, useMemo } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import { openSettingsModal } from '@/shared/state/settingsSlice';
 import { getLastInteractedBrowser, getKeepAliveBrowserIds, setLastInteractedBrowser, clearLastInteractedBrowser } from '@/shared/browserFocus';
 import { getWebview } from '@/shared/browserRegistry';
 import { applyBrowserZoom } from '@/shared/browserZoom';
 import Box from '@mui/material/Box';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import { VoiceDictationProvider } from '@/shared/voice/VoiceDictationContext';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import Collapse from '@mui/material/Collapse';
 import Button from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
-import InputBase from '@mui/material/InputBase';
-// One outlined icon language for the sidebar: thin monoline glyphs (not the filled Material clip-art) so the rail reads as designed, not assembled.
-import { LayoutDashboard } from 'lucide-react';
-import { LayoutGrid } from 'lucide-react';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { Settings as LucideSettings } from 'lucide-react';
-import { ArrowLeft, ArrowRight, Plus, Clock, Search as SearchGlyph, X as CloseGlyph } from 'lucide-react';
-import ButtonBase from '@mui/material/ButtonBase';
-import { AnimatedPanelLeft } from './animatedIcons';
+import { Clock } from 'lucide-react';
 
-const SEARCH_HOTKEY_LABEL = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? '⌘K' : 'Ctrl+K';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
 import CloseIcon from '@mui/icons-material/Close';
-import EditIcon from '@mui/icons-material/Edit';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import LinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
 // Settings modal lazy-loaded so its 2.3K LOC + Stripe/OAuth helpers don't ship on first paint.
@@ -46,13 +28,11 @@ import { useLastDashboardId } from '@/shared/hooks/useLastDashboardId';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { hasModelConnected as selectHasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
 import { shallowEqual } from 'react-redux';
-import { fetchDashboards, createDashboard, renameDashboard, deleteDashboard, duplicateDashboard } from '@/shared/state/dashboardsSlice';
-import { Typewriter } from '@/app/components/feedback/Animated';
+import { fetchDashboards, createDashboard } from '@/shared/state/dashboardsSlice';
 import { setPendingFocusAgentId } from '@/shared/state/tempStateSlice';
 import { addBrowserCard, addBrowserTab, cycleBrowserTab, reopenLastClosed, addViewCard, selectFullscreenCardId, setTiledCard, clearTiledCard } from '@/shared/state/dashboardLayoutSlice';
 import { setPendingBrowserUrl } from '@/shared/state/tempStateSlice';
-import { fetchOutputs, deleteOutput, updateOutput } from '@/shared/state/outputsSlice';
-import { removeViewCardCleanly } from '@/shared/viewTeardown';
+import { fetchOutputs } from '@/shared/state/outputsSlice';
 import { setInstalling } from '@/shared/state/updateSlice';
 import { findBrowserByWebContentsId } from '@/shared/browserRegistry';
 import { byPreviewRecency } from '@/shared/previewOrder';
@@ -61,11 +41,6 @@ import SpacesStrip from '@/app/pages/Dashboard/desktop/SpacesStrip';
 import { washBackgroundUrl } from '@/shared/styles/washBackground';
 import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
 
-const SIDEBAR_MIN = 160;
-const SIDEBAR_MAX = 400;
-// 260 matches Claude.ai's nav-sidebar width: roomy enough that names don't truncate.
-const SIDEBAR_DEFAULT = 260;
-const SIDEBAR_WIDTH_KEY = 'openswarm-sidebar-width';
 const UPDATE_DISMISS_KEY = 'openswarm-update-dismissed';
 
 const AppShell: React.FC = () => {
@@ -83,42 +58,9 @@ const AppShell: React.FC = () => {
   }, [navigateRaw]);
   const location = useLocation();
   // React Router (HashRouter) stores a monotonic index in history state. location re-renders on every nav, by which point window.history.state.idx is updated.
-  const historyIdx = (window.history.state?.idx as number | undefined) ?? 0;
-  const maxHistoryIdx = useRef(0);
-  maxHistoryIdx.current = Math.max(maxHistoryIdx.current, historyIdx);
-  const canGoBack = historyIdx > 0;
-  const canGoForward = historyIdx < maxHistoryIdx.current;
-  const [dashboardsExpanded, setDashboardsExpanded] = useState(true);
-  const [appsExpanded, setAppsExpanded] = useState(true);
   // Desktop shell: the wallpaper canvas IS the home surface, so the sidebar starts docked away
   // (left-edge hover peeks it; the pin toggle brings it back full-time).
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
-  const [renamingDashboardId, setRenamingDashboardId] = useState<string | null>(null);
-  const [renamingAppId, setRenamingAppId] = useState<string | null>(null);
-  const [renameValue, setRenameValue] = useState('');
-  // Arc-style delete: the row vanishes at once but the real delete waits behind an Undo toast.
-  const [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null);
-  const [rowMenu, setRowMenu] = useState<{ top: number; left: number; kind: 'dashboard' | 'app'; id: string; name: string } | null>(null);
-  const pendingDeleteRef = useRef<{ id: string; name: string } | null>(null);
-  const deleteTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Arc-style peek: hovering an app row (with intent, not a fly-by) floats a preview beside the sidebar.
-  const [peek, setPeek] = useState<{ name: string; description: string; thumbnail: string | null; top: number } | null>(null);
-  const peekTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Arc-style Space switching: a horizontal two-finger swipe over the sidebar flips dashboards. Kept OFF
-  // the canvas (which owns horizontal pan) so the two never fight. accum + cooldown = one flip per swipe.
-  const swipeAccumRef = useRef(0);
-  const swipeCooldownRef = useRef(false);
-  const [sidebarWidth, setSidebarWidth] = useState(() => {
-    try {
-      const stored = localStorage.getItem(SIDEBAR_WIDTH_KEY);
-      if (stored) {
-        const w = Number(stored);
-        if (w >= SIDEBAR_MIN && w <= SIDEBAR_MAX) return w;
-      }
-    } catch {}
-    return SIDEBAR_DEFAULT;
-  });
-  const isResizing = useRef(false);
 
   const updateStatus = useAppSelector((state) => state.update.status);
   const availableVersion = useAppSelector((state) => state.update.availableVersion);
@@ -246,15 +188,6 @@ const AppShell: React.FC = () => {
     [dashboardItems],
   );
 
-  const outputItems = useAppSelector(
-    (state) => state.outputs.items,
-    shallowEqual,
-  );
-  const appsList = React.useMemo(
-    () => Object.values(outputItems).sort(byPreviewRecency),
-    [outputItems],
-  );
-
   useEffect(() => {
     dispatch(fetchDashboards());
     dispatch(fetchOutputs());
@@ -408,10 +341,6 @@ const AppShell: React.FC = () => {
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [dispatch]);
 
-  useEffect(() => {
-    try { localStorage.setItem(SIDEBAR_WIDTH_KEY, String(sidebarWidth)); } catch {}
-  }, [sidebarWidth]);
-
   useEffect(() => {
     const handler = (e: Event) => {
       const detail = (e as CustomEvent).detail || {};
@@ -426,33 +355,6 @@ const AppShell: React.FC = () => {
     return () => window.removeEventListener('openswarm:notification-click', handler as EventListener);
   }, [navigate, dispatch]);
 
-  const handleResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    isResizing.current = true;
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-
-    const onMouseMove = (ev: MouseEvent) => {
-      if (!isResizing.current) return;
-      setSidebarWidth(Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, ev.clientX)));
-    };
-
-    const onMouseUp = () => {
-      isResizing.current = false;
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  }, []);
-
-  const handleResizeDoubleClick = useCallback(() => {
-    setSidebarWidth(SIDEBAR_DEFAULT);
-  }, []);
-
   const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard/');
   const isDashboardViewActive = location.pathname.startsWith('/dashboard/');
   // macOS full screen: a fullscreen-tiled card owns the window, so every shell chrome piece hides. Gated on the dashboard view so navigating away restores the chrome even mid-fullscreen.
@@ -464,8 +366,6 @@ const AppShell: React.FC = () => {
   // unpinned fullscreen keeps the hover-peek overlay.
   const [fsSidebarPinned, setFsSidebarPinned] = useState(false);
   const sidebarAway = (sidebarCollapsed || (fsActive && !fsSidebarPinned)) && isDashboardViewActive;
-  const [sidePeek, setSidePeek] = useState(false);
-  useEffect(() => { if (!sidebarAway) setSidePeek(false); }, [sidebarAway]);
   // When the sidebar docks away, the canvas runs flush to the window's left edge, so the floating
   // dashboard header would sit right under the macOS traffic lights. Publish an inset the header reads
   // (only on macOS, where the lights exist) so it clears them; the sidebar carries its own clearance.
@@ -491,42 +391,8 @@ const AppShell: React.FC = () => {
   useEffect(() => {
     window.dispatchEvent(new CustomEvent('openswarm:chrome-docked', { detail: { docked: !sidebarAway } }));
   }, [sidebarAway]);
-  // Close-on-leave with a grace delay (cancelled on re-enter): a bare mouseLeave closed the peek the
-  // instant the cursor dipped past the panel edge while reaching for an item, so clicks never landed.
-  const peekCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const cancelPeekClose = useCallback(() => {
-    if (peekCloseTimerRef.current) { clearTimeout(peekCloseTimerRef.current); peekCloseTimerRef.current = null; }
-  }, []);
-  const schedulePeekClose = useCallback(() => {
-    cancelPeekClose();
-    peekCloseTimerRef.current = setTimeout(() => setSidePeek(false), 260);
-  }, [cancelPeekClose]);
-  // Reliable window-level close: the panel's own mouseLeave can get eaten (webview/overlay capture),
-  // leaving the peek stuck open. This fires on every move and closes ONLY when the cursor is clearly
-  // to the right of the floating panel (generous 130px buffer so reaching for an item never closes it).
-  useEffect(() => {
-    if (!sidePeek) return undefined;
-    const onMove = (e: MouseEvent): void => {
-      if (e.clientX > 10 + sidebarWidth + 130) schedulePeekClose();
-      else cancelPeekClose();
-    };
-    // A cursor gliding over a webview GUEST sends the host zero mousemoves, so the move-based close
-    // above never fires and the peek looks stuck. Guest interactions bubble up as these app events;
-    // any of them means the cursor left the panel. Window blur (app switch) likewise must not park it.
-    const closeNow = (): void => setSidePeek(false);
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('openswarm:browser-guest-select', closeNow);
-    window.addEventListener('blur', closeNow);
-    return () => {
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('openswarm:browser-guest-select', closeNow);
-      window.removeEventListener('blur', closeNow);
-    };
-  }, [sidePeek, sidebarWidth, schedulePeekClose, cancelPeekClose]);
   // Fullscreen still hides the top-center island anchor + banners; the sidebar floats in on peek.
   const fsHideChrome = fsActive;
-  // In overlay mode the panel stays MOUNTED (so it can slide out, not vanish); sidePeek only drives the slide.
-  const sideOverlay = sidebarAway;
   const isAppsRoute = false;  // /apps route removed; app cards live on the dashboard now.
   const activeDashboardId = location.pathname.startsWith('/dashboard/')
     ? location.pathname.split('/dashboard/')[1]
@@ -542,18 +408,6 @@ const AppShell: React.FC = () => {
     if (next !== idx) navigate(`/dashboard/${dashboardList[next].id}`);
   }, [dashboardList, activeDashboardId, navigate]);
 
-  const handleSidebarSwipe = useCallback((e: React.WheelEvent) => {
-    if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) { swipeAccumRef.current = 0; return; }  // vertical = list scroll
-    if (swipeCooldownRef.current) return;
-    swipeAccumRef.current += e.deltaX;
-    if (Math.abs(swipeAccumRef.current) >= 80) {
-      switchDashboard(swipeAccumRef.current > 0 ? 1 : -1);
-      swipeAccumRef.current = 0;
-      swipeCooldownRef.current = true;
-      setTimeout(() => { swipeCooldownRef.current = false; }, 450);
-    }
-  }, [switchDashboard]);
-
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (!(e.metaKey || e.ctrlKey) || !e.altKey || e.shiftKey) return;
@@ -577,136 +431,7 @@ const AppShell: React.FC = () => {
       navigate(`/dashboard/${lastDashboardId}`);
     }
   }, [dispatch, navigate, lastDashboardId, location.pathname, fullscreenCardId]);
-  // The real delete, run only once Undo has lapsed: tear the live view card down cleanly (never rip a
-  // webview GPU surface mid-composite), then delete the output for good.
-  const commitDeleteApp = useCallback((id: string) => {
-    void removeViewCardCleanly(id, dispatch);
-    dispatch(deleteOutput(id));
-  }, [dispatch]);
 
-  // Arc-style delete: the row hides immediately and an Undo toast holds for 6s. Undo restores it;
-  // silence commits it. A second delete flushes the first (only one pending at a time).
-  const handleDeleteApp = useCallback((e: React.MouseEvent, id: string, name: string) => {
-    e.stopPropagation();
-    if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current);
-    const prev = pendingDeleteRef.current;
-    if (prev && prev.id !== id) commitDeleteApp(prev.id);
-    const entry = { id, name };
-    pendingDeleteRef.current = entry;
-    setPendingDelete(entry);
-    deleteTimerRef.current = setTimeout(() => {
-      commitDeleteApp(id);
-      pendingDeleteRef.current = null;
-      setPendingDelete(null);
-      deleteTimerRef.current = null;
-    }, 6000);
-  }, [commitDeleteApp]);
-
-  const handleUndoDeleteApp = useCallback(() => {
-    if (deleteTimerRef.current) { clearTimeout(deleteTimerRef.current); deleteTimerRef.current = null; }
-    pendingDeleteRef.current = null;
-    setPendingDelete(null);
-  }, []);
-
-  // Leaving the app while a delete is still pending shouldn't strand a half-deleted ghost: commit it.
-  useEffect(() => () => {
-    if (deleteTimerRef.current) { clearTimeout(deleteTimerRef.current); }
-    if (pendingDeleteRef.current) commitDeleteApp(pendingDeleteRef.current.id);
-    if (peekTimerRef.current) clearTimeout(peekTimerRef.current);
-  }, [commitDeleteApp]);
-
-  const handleStartAppRename = (id: string, currentName: string) => {
-    setRenamingDashboardId(null);
-    setRenamingAppId(id);
-    setRenameValue(currentName);
-  };
-
-  const handleAppRenameSubmit = (id: string) => {
-    const trimmed = renameValue.trim();
-    const previousName = outputItems[id]?.name;
-    if (trimmed && trimmed !== previousName) {
-      dispatch(updateOutput({ id, name: trimmed }));
-    }
-    setRenamingAppId(null);
-  };
-  // With the /apps route gone, an app row is "active" when its card is open on the dashboard, not from the URL.
-  const openViewCardOutputIds = useAppSelector((s) =>
-    new Set(Object.values(s.dashboardLayout.viewCards).map((vc) => vc.output_id)),
-  );
-
-  const handleDashboardsClick = () => {
-    if (isDashboardRoute && location.pathname === '/') {
-      setDashboardsExpanded((prev) => !prev);
-    } else {
-      navigate('/');
-      setDashboardsExpanded(true);
-    }
-  };
-
-  const handleDashboardItemClick = (dashboardId: string) => {
-    if (renamingDashboardId === dashboardId) return;
-    // In fullscreen, clicking the dashboard you are already on means "show me the canvas": exit the
-    // pinned view. A different dashboard exits via the resetLayout tile clear on switch.
-    if (fullscreenCardId && activeDashboardId === dashboardId) {
-      dispatch(clearTiledCard(fullscreenCardId));
-      return;
-    }
-    navigate(`/dashboard/${dashboardId}`);
-  };
-
-  const handleStartDashboardRename = (id: string, currentName: string) => {
-    setRenamingAppId(null);
-    setRenamingDashboardId(id);
-    setRenameValue(currentName);
-  };
-
-  // Right-click a sidebar row for the same actions the Dashboards grid offers, Mac-style at the cursor.
-  const openRowMenu = (e: React.MouseEvent, kind: 'dashboard' | 'app', id: string, name: string): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    setRowMenu({ top: e.clientY, left: e.clientX, kind, id, name });
-  };
-  const closeRowMenu = (): void => setRowMenu(null);
-  const rowMenuRename = (): void => {
-    const m = rowMenu;
-    closeRowMenu();
-    if (!m) return;
-    // Defer so the menu's focus trap releases before the inline field autofocuses.
-    setTimeout(() => (m.kind === 'dashboard' ? handleStartDashboardRename(m.id, m.name) : handleStartAppRename(m.id, m.name)), 150);
-  };
-  const rowMenuDelete = (e: React.MouseEvent): void => {
-    const m = rowMenu;
-    closeRowMenu();
-    if (!m) return;
-    if (m.kind === 'dashboard') dispatch(deleteDashboard(m.id));
-    else handleDeleteApp(e, m.id, m.name);
-  };
-  const rowMenuDuplicate = (): void => {
-    const m = rowMenu;
-    closeRowMenu();
-    if (m?.kind === 'dashboard') dispatch(duplicateDashboard(m.id));
-  };
-
-  const handleDashboardRenameSubmit = (id: string) => {
-    const trimmed = renameValue.trim();
-    const previousName = dashboardItems[id]?.name;
-    if (trimmed && trimmed !== previousName) {
-      dispatch(renameDashboard({ id, name: trimmed, previousName }));
-    }
-    setRenamingDashboardId(null);
-  };
-
-  const handleCreateDashboard = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const result = await dispatch(createDashboard('Untitled Dashboard'));
-    if (createDashboard.fulfilled.match(result)) {
-      navigate(`/dashboard/${result.payload.id}`);
-    }
-  };
-
-  const handleAppsClick = () => {
-    setAppsExpanded((prev) => !prev);
-  };
 
   return (
     <Box sx={{
@@ -1040,95 +765,7 @@ const AppShell: React.FC = () => {
         </Alert>
       </Snackbar>
 
-      {/* Arc-style peek: a live-thumbnail preview beside the sidebar while hovering an app row. Non-interactive so it never steals the hover. */}
-      {peek && !sidebarCollapsed && (
-        <Box
-          sx={{
-            position: 'fixed',
-            left: sidebarWidth + 8,
-            top: Math.min(Math.max(peek.top - 8, 12), window.innerHeight - 232),
-            width: 264,
-            zIndex: 1400,
-            pointerEvents: 'none',
-            borderRadius: `${c.radius.lg}px`,
-            overflow: 'hidden',
-            bgcolor: c.bg.surface,
-            border: `1px solid ${c.border.medium}`,
-            boxShadow: c.shadow.lg,
-            '@keyframes peekIn': { from: { opacity: 0, transform: 'translateX(-6px)' }, to: { opacity: 1, transform: 'none' } },
-            animation: 'peekIn 0.14s ease-out',
-          }}
-        >
-          {peek.thumbnail ? (
-            <Box component="img" src={peek.thumbnail} alt="" sx={{ width: '100%', height: 150, objectFit: 'cover', objectPosition: 'top left', display: 'block' }} />
-          ) : (
-            <Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.75rem' }}>
-              No preview yet
-            </Box>
-          )}
-          <Box sx={{ p: 1.25 }}>
-            <Typography sx={{ fontWeight: 600, fontSize: '0.875rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
-            {peek.description && (
-              <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
-                {peek.description}
-              </Typography>
-            )}
-          </Box>
-        </Box>
-      )}
 
-      {/* Right-click a dashboard or app row: the same actions as the Dashboards grid, at the cursor. */}
-      <Menu
-        anchorReference="anchorPosition"
-        anchorPosition={rowMenu ? { top: rowMenu.top, left: rowMenu.left } : undefined}
-        open={!!rowMenu}
-        onClose={closeRowMenu}
-        slotProps={{ paper: { sx: { bgcolor: c.bg.surface, border: `1px solid ${c.border.subtle}`, boxShadow: c.shadow.lg, minWidth: 160 } } }}
-      >
-        <MenuItem onClick={rowMenuRename}>
-          <ListItemIcon><EditIcon sx={{ fontSize: 18 }} /></ListItemIcon>
-          <ListItemText>Rename</ListItemText>
-        </MenuItem>
-        {rowMenu?.kind === 'dashboard' && (
-          <MenuItem onClick={rowMenuDuplicate}>
-            <ListItemIcon><ContentCopyIcon sx={{ fontSize: 18 }} /></ListItemIcon>
-            <ListItemText>Duplicate</ListItemText>
-          </MenuItem>
-        )}
-        <MenuItem onClick={rowMenuDelete} sx={{ color: c.status.error }}>
-          <ListItemIcon><DeleteOutlineIcon sx={{ fontSize: 18, color: c.status.error }} /></ListItemIcon>
-          <ListItemText>Delete</ListItemText>
-        </MenuItem>
-      </Menu>
-
-      {/* Arc-style Undo for a just-deleted app. Open while the delete is pending; our own 6s timer commits it and closes this. */}
-      <Snackbar
-        open={!!pendingDelete}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      >
-        <Alert
-          severity="info"
-          icon={false}
-          action={
-            <Button
-              size="small"
-              onClick={handleUndoDeleteApp}
-              sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8125rem', minWidth: 'auto' }}
-            >
-              Undo
-            </Button>
-          }
-          sx={{
-            bgcolor: c.bg.surface,
-            color: c.text.primary,
-            border: `1px solid ${c.border.medium}`,
-            boxShadow: c.shadow.md,
-            '& .MuiAlert-action': { alignItems: 'center', pt: 0 },
-          }}
-        >
-          {`Deleted "${pendingDelete?.name ?? ''}"`}
-        </Alert>
-      </Snackbar>
     </Box>
   );
 };
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
index 42f4d832..fd26a4f0 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -76,13 +76,13 @@ export function isAskUiPair(pair: ToolPair): boolean {
 }
 
 /** Latest ShowUI payload anywhere in a transcript; the collapsed card pins this artifact under its pill. */
-export function extractLatestShowUi(messages: Array<{ role: string; content: any }>): ShowUiPayload | null {
+export function extractLatestShowUi(messages: Array<{ role: string; content: unknown }>): ShowUiPayload | null {
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i];
     if (msg.role !== 'tool_call') continue;
-    const tool = typeof msg.content === 'object' ? String(msg.content?.tool || '') : '';
-    if (!/(^|__)ShowUI$/.test(tool)) continue;
-    const parsed = parseShowUiInput(msg.content?.input);
+    const body = (typeof msg.content === 'object' && msg.content !== null ? msg.content : {}) as { tool?: unknown; input?: unknown };
+    if (!/(^|__)ShowUI$/.test(String(body.tool || ''))) continue;
+    const parsed = parseShowUiInput(body.input);
     if (parsed) return parsed;
   }
   return null;
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 6fc16437..a7de7074 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -14,7 +14,7 @@ interface WindowControlsProps {
 
 // macOS-style traffic lights on every card = the "AI OS" window feel. Grey at rest so a canvas
 // full of cards isn't a wall of color; they colorize when the parent .osw-card is hovered, and the
-// × – + symbols reveal on hovering the group. Hovering the GREEN dot opens the tiling menu (Fill,
+// close/minus/plus symbols reveal on hovering the group. Hovering the GREEN dot opens the tiling menu (Fill,
 // Halves, Quarters, Thirds), exactly like macOS; clicking green = Full Screen (or restore if tiled).
 const RED = '#ff5f57';
 const YELLOW = '#febc2e';
@@ -88,13 +88,13 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
         pointerEvents: 'none', '.osw-card:hover &': { pointerEvents: 'auto' },
       }}>
       {btn(RED, '×', onClose, 'Close')}
-      {btn(YELLOW, '–', onMinimize, 'Minimize')}
+      {btn(YELLOW, '−', onMinimize, 'Minimize')}
       <Box ref={greenRef} sx={{ position: 'relative', display: 'flex', alignItems: 'center' }}
         onMouseEnter={openMenu} onMouseLeave={scheduleClose}>
         <Box component="button" type="button" aria-label={tiled ? 'Exit Full Screen' : 'Full Screen'}
           onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile(tiled ? 'restore' : 'fullscreen'); }}
           onPointerDown={stop} sx={dotSx(GREEN)}>
-          <span>{tiled ? '–' : '+'}</span>
+          <span>{tiled ? '−' : '+'}</span>
         </Box>
         {menuHot && <Box className="osw-tilemenu" onPointerDown={stop} onClick={stop}
           onMouseEnter={openMenu} onMouseLeave={scheduleClose}
diff --git a/frontend/src/app/pages/Dashboard/desktop/agentTodos.ts b/frontend/src/app/pages/Dashboard/desktop/agentTodos.ts
index 34fff2f2..deadd287 100644
--- a/frontend/src/app/pages/Dashboard/desktop/agentTodos.ts
+++ b/frontend/src/app/pages/Dashboard/desktop/agentTodos.ts
@@ -8,19 +8,20 @@ function isTodoStatus(v: unknown): v is AgentTodoItem['status'] {
 }
 
 /** Latest TodoWrite payload in the transcript = the agent's live plan; null when it never wrote one. */
-export function extractLatestTodos(messages: Array<{ role: string; content: any }>): AgentTodoItem[] | null {
+export function extractLatestTodos(messages: Array<{ role: string; content: unknown }>): AgentTodoItem[] | null {
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i];
     if (msg.role !== 'tool_call') continue;
-    const tool = typeof msg.content === 'object' ? String(msg.content?.tool || '') : '';
-    if (!/todowrite$/i.test(tool)) continue;
-    const raw = msg.content?.input?.todos;
+    const body = (typeof msg.content === 'object' && msg.content !== null ? msg.content : {}) as { tool?: unknown; input?: unknown };
+    if (!/todowrite$/i.test(String(body.tool || ''))) continue;
+    const raw = (typeof body.input === 'object' && body.input !== null ? (body.input as { todos?: unknown }).todos : undefined);
     if (!Array.isArray(raw)) continue;
     const items: AgentTodoItem[] = [];
-    for (const t of raw) {
-      const content = typeof t?.content === 'string' ? t.content : (typeof t?.activeForm === 'string' ? t.activeForm : '');
+    for (const entry of raw) {
+      const t = (typeof entry === 'object' && entry !== null ? entry : {}) as { content?: unknown; activeForm?: unknown; status?: unknown };
+      const content = typeof t.content === 'string' ? t.content : (typeof t.activeForm === 'string' ? t.activeForm : '');
       if (!content) continue;
-      items.push({ content, status: isTodoStatus(t?.status) ? t.status : 'pending' });
+      items.push({ content, status: isTodoStatus(t.status) ? t.status : 'pending' });
     }
     if (items.length > 0) return items;
   }

From 9f930c649b3d45e3f697e9ae0848e00fe4009418 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:46:38 -0700
Subject: [PATCH 214/248] [eric] toolui: preflight layered under utilities
 (borders+buttons live again), sans font + pinned scale, answers lock on
 submit, pending AskUI pins under the pill

---
 .../pages/AgentChat/tool-ui/AskUiBubble.tsx   |  17 ++-
 .../pages/AgentChat/tool-ui/showUiPayload.ts  |  15 +++
 .../app/pages/Dashboard/cards/AgentCard.tsx   |   8 +-
 .../Dashboard/desktop/AgentNarratorPill.tsx   |  17 ++-
 frontend/src/toolui/toolui.css                | 118 ++++++++++++------
 5 files changed, 127 insertions(+), 48 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
index da649def..60ac8044 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
@@ -37,6 +37,9 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
   const [submitted, setSubmitted] = useState(false);
   const [orphaned, setOrphaned] = useState(false);
   const [freeText, setFreeText] = useState('');
+  // The choice captured at click time, so the component flips to its receipt the INSTANT the user
+  // answers instead of staying clickable until the agent's tool result lands seconds later.
+  const [localChoice, setLocalChoice] = useState<unknown>(undefined);
   const answered = parseResultResponse(pair);
   const freeTextAnswer =
     answered?.action === 'free_text' && answered.value && typeof answered.value === 'object'
@@ -49,6 +52,9 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
     (response: Record<string, unknown>) => {
       if (submitted) return;
       setSubmitted(true);
+      if (response.action !== 'free_text') {
+        setLocalChoice(response.choice ?? response.value ?? undefined);
+      }
       void fetch(`${API_BASE}/ui-requests/respond`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getAuthToken()}` },
@@ -58,10 +64,11 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
           if (!r.ok) {
             // Nothing parked server-side (agent gone or this is a replayed transcript): say so instead of silently swallowing the click.
             setSubmitted(false);
+            setLocalChoice(undefined);
             setOrphaned(true);
           }
         })
-        .catch(() => setSubmitted(false));
+        .catch(() => { setSubmitted(false); setLocalChoice(undefined); });
     },
     [submitted, sessionId, componentId],
   );
@@ -79,7 +86,7 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
             onConfirm: () => respond({ action: 'confirm', choice: 'approved' }),
             onCancel: () => respond({ action: 'cancel', choice: 'denied' }),
           }
-        : { choice: (answered?.choice as string) || undefined };
+        : { choice: (answered?.choice as string) ?? (localChoice as string | undefined) };
     }
     if (waiting) {
       return {
@@ -91,8 +98,10 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
     }
     // A free-text answer isn't an option id; passing it as `choice` would fail their contract.
     if (freeTextAnswer !== null) return {};
-    return answered && 'value' in answered ? { choice: answered.value } : {};
-  }, [payload, waiting, respond, answered, freeTextAnswer]);
+    if (answered && 'value' in answered) return { choice: answered.value };
+    // Result not landed yet but the user already clicked: the captured choice renders the receipt now.
+    return localChoice !== undefined ? { choice: localChoice } : {};
+  }, [payload, waiting, respond, answered, freeTextAnswer, localChoice]);
 
   const submitFreeText = useCallback(() => {
     const text = freeText.trim();
diff --git a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
index fd26a4f0..2814a668 100644
--- a/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
+++ b/frontend/src/app/pages/AgentChat/tool-ui/showUiPayload.ts
@@ -76,6 +76,21 @@ export function isAskUiPair(pair: ToolPair): boolean {
 }
 
 /** Latest ShowUI payload anywhere in a transcript; the collapsed card pins this artifact under its pill. */
+/** The newest UNANSWERED AskUI call, so a collapsed card can surface the live question under its
+    pill (a blocking question beats every other artifact; the agent is literally waiting on it). */
+export function extractPendingAskUi(messages: Array<{ id: string; role: string; content: unknown }>): ToolPair | null {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i];
+    if (msg.role !== 'tool_call') continue;
+    const body = (typeof msg.content === 'object' && msg.content !== null ? msg.content : {}) as { tool?: unknown };
+    if (!/(^|__)AskUI$/.test(String(body.tool || ''))) continue;
+    const next = messages[i + 1];
+    if (next && next.role === 'tool_result') return null;
+    return { type: 'tool_pair', id: msg.id, call: msg as ToolPair['call'], result: null };
+  }
+  return null;
+}
+
 export function extractLatestShowUi(messages: Array<{ role: string; content: unknown }>): ShowUiPayload | null {
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i];
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index fa9ba598..2b9bcf4a 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -39,7 +39,7 @@ import WindowControls, { ARC_CHIP_SX } from './WindowControls';
 import { useTiledStyle } from './tileZones';
 import AgentNarratorPill from '../desktop/AgentNarratorPill';
 import { extractLatestTodos } from '../desktop/agentTodos';
-import { extractLatestShowUi, freezeIfDone } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
+import { extractLatestShowUi, extractPendingAskUi, freezeIfDone } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
 import { getWebview } from '@/shared/browserRegistry';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { QuestionForm } from '@/app/pages/AgentChat/shell/ApprovalBar';
@@ -679,6 +679,10 @@ const AgentCard: React.FC<Props> = ({
     const artifact = extractLatestShowUi(session.messages || []);
     return artifact ? freezeIfDone(artifact, session.status === 'running') : null;
   }, [session.messages, session.status]);
+  const pillAskPair = useMemo(
+    () => (session.status === 'running' ? extractPendingAskUi(session.messages || []) : null),
+    [session.messages, session.status],
+  );
   const pillMode = !expanded && !hasPending && !isDraft && !tileZone;
   const pillLabel = session.turn_label?.label || displayChatTitle(session);
   const pillRunning = session.status === 'running';
@@ -980,6 +984,8 @@ const AgentCard: React.FC<Props> = ({
             running={pillRunning}
             todos={todos}
             artifact={pillArtifact}
+            askPair={pillAskPair}
+            sessionId={session.id}
             browserShot={browserShot}
             selected={isSelected}
             highlighted={isHighlighted}
diff --git a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
index 336b95d5..4b1fb9ae 100644
--- a/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
@@ -4,6 +4,8 @@ import Typography from '@mui/material/Typography';
 import CheckIcon from '@mui/icons-material/Check';
 import DashboardGlyph from '../canvas/DashboardGlyph';
 import ShowUiWidgetView from '@/app/pages/AgentChat/tool-ui/ShowUiWidgetView';
+import AskUiBubble from '@/app/pages/AgentChat/tool-ui/AskUiBubble';
+import type { ToolPair } from '@/app/pages/AgentChat/tool-bubbles/ToolCallBubble';
 import type { ShowUiPayload } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
 import type { AgentTodoItem } from './agentTodos';
 
@@ -12,6 +14,8 @@ interface AgentNarratorPillProps {
   running: boolean;
   todos: AgentTodoItem[] | null;
   artifact: ShowUiPayload | null;
+  askPair?: ToolPair | null;
+  sessionId?: string;
   browserShot: string | null;
   selected: boolean;
   highlighted: boolean;
@@ -21,13 +25,14 @@ const GLASS = 'rgba(24,14,32,0.8)';
 const GLASS_BLUR = 'blur(18px) saturate(150%)';
 const MAX_VISIBLE_TODOS = 4;
 
-/** Collapsed agent as the desktop narrator pill; below it, the best artifact wins: widget > browser shot > plan > Thinking. */
-function AgentNarratorPill({ label, running, todos, artifact, browserShot, selected, highlighted }: AgentNarratorPillProps): React.ReactElement {
+/** Collapsed agent as the desktop narrator pill; below it, the best artifact wins: live question > widget > browser shot > plan > Thinking. */
+function AgentNarratorPill({ label, running, todos, artifact, askPair, sessionId, browserShot, selected, highlighted }: AgentNarratorPillProps): React.ReactElement {
   const visibleTodos = (todos || []).slice(0, MAX_VISIBLE_TODOS);
   const hiddenCount = (todos?.length || 0) - visibleTodos.length;
   const ring = selected || highlighted ? { outline: '2px solid #3b82f6', outlineOffset: '2px' } : undefined;
+  const liveAsk = askPair && sessionId ? askPair : null;
   // One key per ladder state so a state CHANGE remounts the artifact and replays the one-shot entrance; nothing loops.
-  const artifactKey = artifact ? 'widget' : browserShot ? 'shot' : visibleTodos.length > 0 ? 'todos' : running ? 'thinking' : 'none';
+  const artifactKey = liveAsk ? `ask-${liveAsk.id}` : artifact ? 'widget' : browserShot ? 'shot' : visibleTodos.length > 0 ? 'todos' : running ? 'thinking' : 'none';
 
   return (
     <Box
@@ -71,7 +76,11 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
         </Typography>
       </Box>
 
-      {artifact ? (
+      {liveAsk ? (
+        <Box key={artifactKey} className="osw-artifact" sx={{ width: 340, maxWidth: '80vw' }}>
+          <AskUiBubble pair={liveAsk} sessionId={sessionId!} isPending suppressReveal />
+        </Box>
+      ) : artifact ? (
         <Box key={artifactKey} className="osw-artifact">
           <ShowUiWidgetView payload={artifact} ambient />
         </Box>
diff --git a/frontend/src/toolui/toolui.css b/frontend/src/toolui/toolui.css
index d4ffec5b..c4412f47 100644
--- a/frontend/src/toolui/toolui.css
+++ b/frontend/src/toolui/toolui.css
@@ -2,6 +2,10 @@
    styles are untouched) plus the shadcn theme variables scoped to .tool-ui-scope. */
 @custom-variant dark (&:is(.dark *));
 
+/* Layer order is load-bearing: the scoped mini-preflight lives in `base` so utilities always beat
+   it. Unlayered it silently nuked every utility border and button background inside the scope. */
+@layer theme, base, utilities;
+
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 @import "tw-animate-css";
@@ -39,49 +43,85 @@
   --color-chart-5: var(--chart-5);
 }
 
-/* Scoped mini-preflight: exactly the resets the vendored components rely on, never global. */
-.tool-ui-scope,
-.tool-ui-scope *,
-.tool-ui-scope *::before,
-.tool-ui-scope *::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: var(--border);
-}
-.tool-ui-scope button {
-  background-color: transparent;
-  background-image: none;
-  font: inherit;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-}
-.tool-ui-scope p,
-.tool-ui-scope h1,
-.tool-ui-scope h2,
-.tool-ui-scope h3,
-.tool-ui-scope h4,
-.tool-ui-scope ul,
-.tool-ui-scope ol,
-.tool-ui-scope figure {
-  margin: 0;
-}
-.tool-ui-scope ul,
-.tool-ui-scope ol {
-  list-style: none;
-  padding: 0;
-}
-.tool-ui-scope img,
-.tool-ui-scope video,
-.tool-ui-scope canvas {
-  max-width: 100%;
-  display: block;
+/* Scoped mini-preflight: exactly the resets the vendored components rely on, never global.
+   Kept in @layer base so every Tailwind utility (layer utilities, later) wins over it. */
+@layer base {
+  .tool-ui-scope,
+  .tool-ui-scope *,
+  .tool-ui-scope *::before,
+  .tool-ui-scope *::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--border);
+  }
+  .tool-ui-scope button {
+    background-color: transparent;
+    background-image: none;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+    cursor: pointer;
+  }
+  .tool-ui-scope p,
+  .tool-ui-scope h1,
+  .tool-ui-scope h2,
+  .tool-ui-scope h3,
+  .tool-ui-scope h4,
+  .tool-ui-scope ul,
+  .tool-ui-scope ol,
+  .tool-ui-scope figure {
+    margin: 0;
+  }
+  .tool-ui-scope ul,
+  .tool-ui-scope ol {
+    list-style: none;
+    padding: 0;
+  }
+  .tool-ui-scope img,
+  .tool-ui-scope video,
+  .tool-ui-scope canvas {
+    max-width: 100%;
+    display: block;
+  }
 }
 .tool-ui-scope {
   color: var(--foreground);
+  /* The app's chat voice is a serif at a 19.2px root; generated UI needs the crisp product-sans
+     look (tool-ui.com / ChatGPT widgets), so the scope carries its own stack and smoothing. */
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
   font-size: 14px;
   line-height: 1.5;
+  /* Rem rebase: the app scales the ROOT font-size (type scale + user text-size), which inflates
+     every rem-based Tailwind value 20%+ (text-base hit 19.2px, max-w-md hit 537px). Tailwind v4
+     utilities read these variables, so pinning them here gives the components a fixed optical
+     scale no matter what the app root does. */
+  --spacing: 4px;
+  --text-xs: 11px;
+  --text-xs--line-height: 1.45;
+  --text-sm: 13px;
+  --text-sm--line-height: 1.54;
+  --text-base: 14px;
+  --text-base--line-height: 1.57;
+  --text-lg: 16px;
+  --text-lg--line-height: 1.5;
+  --text-xl: 18px;
+  --text-xl--line-height: 1.44;
+  --text-2xl: 21px;
+  --text-2xl--line-height: 1.33;
+  --text-3xl: 26px;
+  --text-3xl--line-height: 1.25;
+  --container-3xs: 224px;
+  --container-2xs: 256px;
+  --container-xs: 320px;
+  --container-sm: 384px;
+  --container-md: 448px;
+  --container-lg: 512px;
+  --container-xl: 576px;
+  --container-2xl: 672px;
+  --container-3xl: 768px;
+  --container-4xl: 896px;
   /* The vendored components (data-table, etc.) switch layout on @container width. Without a
      containment context those queries never match, so a table is stuck in its narrow mobile
      accordion forever (columns hidden behind a chevron). This makes width-responsive actually work:
@@ -91,7 +131,7 @@
 
 .tool-ui-scope {
   color-scheme: light;
-  --radius: 0.625rem;
+  --radius: 10px;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);

From 43d385ff63929b5579a998782e5ac6e7e70d5a81 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 11:51:28 -0700
Subject: [PATCH 215/248] [eric] browser: lost drag releases can no longer glue
 a card to the camera (cancel/capture-loss/blur backstops + no suspend
 mid-drag)

---
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 38 ++++++++++++++++---
 .../hooks/interaction/useWebviewSuspend.ts    |  4 ++
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index ac25bd0b..3c536939 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -761,19 +761,19 @@ const BrowserCard: React.FC<Props> = ({
     recomputeDragPos();
   }, [recomputeDragPos]);
 
-  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+  const finalizeDrag = useCallback((clientX: number, clientY: number, shiftKey: boolean) => {
     if (!dragState.current) return;
     const cs = getCanvasState();
     const z = cs.zoom;
     const panDx = (cs.panX - dragState.current.startPanX) / z;
     const panDy = (cs.panY - dragState.current.startPanY) / z;
-    const dx = (e.clientX - dragState.current.startX) / z - panDx;
-    const dy = (e.clientY - dragState.current.startY) / z - panDy;
+    const dx = (clientX - dragState.current.startX) / z - panDx;
+    const dy = (clientY - dragState.current.startY) / z - panDy;
     if (didDrag.current) {
       let finalX = dragState.current.origX + dx;
       let finalY = dragState.current.origY + dy;
       // Snap to 24px grid (Shift bypasses).
-      if (!e.shiftKey) {
+      if (!shiftKey) {
         finalX = Math.round(finalX / 24) * 24;
         finalY = Math.round(finalY / 24) * 24;
       }
@@ -790,9 +790,35 @@ const BrowserCard: React.FC<Props> = ({
     didDrag.current = false;
     setLocalDragPos(null);
     setIsDragging(false);
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
   }, [dispatch, browserId, onDragEnd, getCanvasState]);
 
+  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+    if (!dragState.current) return;
+    finalizeDrag(e.clientX, e.clientY, e.shiftKey);
+    try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* capture already gone */ }
+  }, [finalizeDrag]);
+
+  // A release the header never hears (pointercancel, capture lost to a mid-drag remount, up eaten
+  // outside the window) used to leave dragState set forever; the pan-repin then glued the card to
+  // the CAMERA until reload. Any of these now commits the drag at the last known pointer.
+  const abortDrag = useCallback(() => {
+    if (!dragState.current) return;
+    finalizeDrag(lastPointerRef.current.clientX, lastPointerRef.current.clientY, true);
+  }, [finalizeDrag]);
+
+  useEffect(() => {
+    if (!isDragging) return undefined;
+    const onUp = (e: PointerEvent): void => { if (dragState.current) finalizeDrag(e.clientX, e.clientY, e.shiftKey); };
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', abortDrag);
+    window.addEventListener('blur', abortDrag);
+    return () => {
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', abortDrag);
+      window.removeEventListener('blur', abortDrag);
+    };
+  }, [isDragging, finalizeDrag, abortDrag]);
+
   const resizeRef = useRef<{
     dir: ResizeDir; startX: number; startY: number;
     origX: number; origY: number; origW: number; origH: number;
@@ -978,6 +1004,8 @@ const BrowserCard: React.FC<Props> = ({
         onPointerDown={handleDragPointerDown}
         onPointerMove={handleDragPointerMove}
         onPointerUp={handleDragPointerUp}
+        onPointerCancel={abortDrag}
+        onLostPointerCapture={abortDrag}
         sx={{
           position: 'relative',
           zIndex: 16,
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useWebviewSuspend.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useWebviewSuspend.ts
index 4b67c46b..753a81dc 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useWebviewSuspend.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useWebviewSuspend.ts
@@ -85,6 +85,10 @@ function cardIsAudible(browserId: string, card: BrowserCardPosition): boolean {
 
 // A card we must never snapshot-swap: an agent is driving it, it's in the keep-alive set (recently used), or it's playing audio. Suspending destroys the webContents (sessionStorage, playback), the things we're preserving.
 function mustStayLive(browserId: string, card: BrowserCardPosition): boolean {
+  // The shield class marks a live card/marquee drag: suspending a browser MID-DRAG unmounts the
+  // handle holding the pointer capture, its up event dies with it, and the stuck drag state then
+  // re-pins the card to the cursor on every pan (the card that "follows the camera" bug).
+  if (document.body.classList.contains('dashboard-marquee-active')) return true;
   return agentNeedsLive(browserId, card) || isKeepAliveBrowser(browserId) || cardIsAudible(browserId, card);
 }
 

From d97dd9891127d921febce4980a0805c578e55ee2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 12:06:15 -0700
Subject: [PATCH 216/248] [eric] browser: agent browsers live INSIDE the chat
 by default (geometric dock slot, webview never remounts); drag out to free
 it, drop on a chat to dock

---
 backend/apps/dashboards/models.py             |  2 +
 .../src/app/pages/AgentChat/AgentChat.tsx     | 19 ++++++
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 65 ++++++++++++++++---
 .../src/shared/state/dashboardLayoutSlice.ts  |  7 ++
 frontend/src/shared/ws/WebSocketManager.ts    |  5 +-
 5 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/backend/apps/dashboards/models.py b/backend/apps/dashboards/models.py
index 2027648f..9371f12f 100644
--- a/backend/apps/dashboards/models.py
+++ b/backend/apps/dashboards/models.py
@@ -44,6 +44,8 @@ class BrowserCardPosition(BaseModel):
     keep_open: bool = False
     # The dashboard this card calls home. Persisted so the home survives a save; without it the card reloads untagged and renders on EVERY dashboard (the cross-dashboard bleed).
     dashboard_id: Optional[str] = None
+    # Chat session this browser lives inside (renders over the chat's dock slot); None = free card.
+    docked_to: Optional[str] = None
 
 
 class NotePosition(BaseModel):
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 92c828cc..a4168b84 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -257,6 +257,8 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   };
   const { id: routeId } = useParams<{ id: string }>();
   const id = sessionIdProp || routeId;
+  // True while a spawned browser calls this chat home; gates the dock slot the real card overlays.
+  const hasDockedBrowser = useAppSelector((st) => Object.values(st.dashboardLayout.browserCards).some((bc) => bc.docked_to === (sessionIdProp || routeId)));
   // A card linked as a workflow sidecar (Test Agent, or a watched run) swaps its composer for a Force Stop button: continuing the chat is meaningless, but killing the run is the common need. Once a Test Agent finishes, the button flips to a green "close" (see workflow_test_state + ForceStopAgentBar).
   const linkedSidecar = useAppSelector((s) => {
     const found = Object.values(s.workflows.openCards).find(
@@ -2395,6 +2397,23 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   </Fade>
                 );
               })()}
+              {/* Dock slot: a browser this agent spawned lives HERE by default (the real card overlays
+                  this rect geometrically, so the webview never remounts). Pinned between transcript
+                  and composer, never inside the scroller, so it can't be clipped by chat scroll. */}
+              {hasDockedBrowser && !fullscreenChat && (
+                <Box
+                  data-browser-slot={id}
+                  sx={{
+                    flexShrink: 0,
+                    height: 320,
+                    mx: 1.5,
+                    mb: 1,
+                    borderRadius: '10px',
+                    border: `1px dashed ${c.border.medium}`,
+                    background: c.bg.secondary,
+                  }}
+                />
+              )}
               {readOnly ? null : isStoppableSidecar ? (
                 <ForceStopAgentBar onStop={handleStop} onSaveWorkflow={onTestSaveWorkflow} onContinueEditing={onTestContinueEditing} testState={testState} />
               ) : (
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 3c536939..35a7204f 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -40,6 +40,7 @@ import {
   toggleMinimizeCard,
   setTiledCard,
   clearTiledCard,
+  setBrowserDocked,
   type BrowserTab,
 } from '@/shared/state/dashboardLayoutSlice';
 import WindowControls from './WindowControls';
@@ -239,6 +240,36 @@ const BrowserCard: React.FC<Props> = ({
     else dispatch(setTiledCard({ cardId: browserId, zone }));
   }, [dispatch, browserId]);
 
+  // ---- In-chat dock: while docked to an expanded chat, the card overlays the chat's slot rect.
+  // Pure geometry in the shared canvas layer (same DOM node), so the webview never remounts.
+  const dockedTo = useAppSelector((state) => state.dashboardLayout.browserCards[browserId]?.docked_to ?? null);
+  const dockParentCard = useAppSelector((state) => (dockedTo ? state.dashboardLayout.cards[dockedTo] ?? null : null));
+  const dockParentExpanded = useAppSelector((state) => (dockedTo ? state.agents.expandedSessionIds.includes(dockedTo) : false));
+  const [dockRect, setDockRect] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
+  const rootElRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!dockedTo || !dockParentCard || !dockParentExpanded) { setDockRect(null); return undefined; }
+    const measure = (): void => {
+      const slot = document.querySelector(`[data-browser-slot="${dockedTo}"]`);
+      const layer = rootElRef.current?.parentElement;
+      if (!slot || !layer) { setDockRect(null); return; }
+      const z = getCanvasState().zoom || 1;
+      const lr = layer.getBoundingClientRect();
+      const sr = slot.getBoundingClientRect();
+      // Slot and card share the transformed layer, so layer-relative coords are camera-invariant.
+      setDockRect({ x: (sr.left - lr.left) / z, y: (sr.top - lr.top) / z, w: sr.width / z, h: sr.height / z });
+    };
+    measure();
+    const slot = document.querySelector(`[data-browser-slot="${dockedTo}"]`);
+    const ro = new ResizeObserver(measure);
+    if (slot) ro.observe(slot);
+    if (slot?.parentElement) ro.observe(slot.parentElement);
+    window.addEventListener('resize', measure);
+    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
+    // dockParentCard x/y/w/h are re-measure triggers: the slot's client rect moves with the chat card.
+  }, [dockedTo, dockParentExpanded, dockParentCard?.x, dockParentCard?.y, dockParentCard?.width, dockParentCard?.height, getCanvasState, dockParentCard]);
+  const dockParentZ = dockParentCard?.zOrder ?? 0;
+
   const suspendedSnap = useAppSelector((state) => state.dashboardLayout.suspendedBrowserCards[browserId]);
   const endingState = useAppSelector((state) => state.dashboardLayout.endingBrowserCards[browserId]);
 
@@ -717,13 +748,13 @@ const BrowserCard: React.FC<Props> = ({
     e.preventDefault();
     e.stopPropagation();
     const cs = getCanvasState();
-    dragState.current = { startX: e.clientX, startY: e.clientY, origX: cardX, origY: cardY, startPanX: cs.panX, startPanY: cs.panY };
+    dragState.current = { startX: e.clientX, startY: e.clientY, origX: dockRect?.x ?? cardX, origY: dockRect?.y ?? cardY, startPanX: cs.panX, startPanY: cs.panY };
     lastPointerRef.current = { clientX: e.clientX, clientY: e.clientY };
     didDrag.current = false;
     setIsDragging(true);
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    try { (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); } catch { /* pointer already gone */ }
     onDragStart?.(browserId, 'browser');
-  }, [cardX, cardY, onDragStart, browserId, getCanvasState, tileZone]);
+  }, [cardX, cardY, onDragStart, browserId, getCanvasState, tileZone, dockRect]);
 
   const recomputeDragPos = useCallback(() => {
     const ds = dragState.current;
@@ -777,6 +808,17 @@ const BrowserCard: React.FC<Props> = ({
         finalX = Math.round(finalX / 24) * 24;
         finalY = Math.round(finalY / 24) * 24;
       }
+      // Dropping over a chat docks the browser INTO it; anywhere else undocks to a free card.
+      const { clientX: hx, clientY: hy } = lastPointerRef.current;
+      const under = document.elementsFromPoint(hx, hy);
+      const slotHit = under.map((el) => (el as HTMLElement).closest?.('[data-browser-slot]') as HTMLElement | null).find(Boolean);
+      const chatHit = under.map((el) => (el as HTMLElement).closest?.('[data-select-type="agent-card"]') as HTMLElement | null).find(Boolean);
+      const dockTarget = slotHit?.getAttribute('data-browser-slot') || chatHit?.getAttribute('data-select-id') || null;
+      if (dockTarget) {
+        dispatch(setBrowserDocked({ browserId, dockedTo: dockTarget }));
+      } else if (dockedTo) {
+        dispatch(setBrowserDocked({ browserId, dockedTo: null }));
+      }
       dispatch(setBrowserCardPosition({
         browserId,
         x: finalX,
@@ -790,7 +832,7 @@ const BrowserCard: React.FC<Props> = ({
     didDrag.current = false;
     setLocalDragPos(null);
     setIsDragging(false);
-  }, [dispatch, browserId, onDragEnd, getCanvasState]);
+  }, [dispatch, browserId, onDragEnd, getCanvasState, dockedTo]);
 
   const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
     if (!dragState.current) return;
@@ -928,8 +970,11 @@ const BrowserCard: React.FC<Props> = ({
             ? `0 0 0 1px #3b82f6, ${c.shadow.md}`
             : c.shadow.md;
 
+  const dockActive = !!dockRect && !dragging && !localResize && !tiledStyle && !keepAliveHidden && !isMinimized;
+
   return (
     <Box
+      ref={rootElRef}
       className="osw-card"
       data-select-type="browser-card"
       data-select-id={browserId}
@@ -959,20 +1004,20 @@ const BrowserCard: React.FC<Props> = ({
         contain: 'layout style',
         // Own compositor layer so hover/paint invalidations stay contained to this card. See AgentCard for full rationale.
         willChange: 'transform',
-        left: keepAliveHidden || isMinimized ? -100000 : (tiledStyle ? tiledStyle.left : (dragging ? cardX : displayX)),
-        top: tiledStyle && !(keepAliveHidden || isMinimized) ? tiledStyle.top : (dragging ? cardY : displayY),
+        left: keepAliveHidden || isMinimized ? -100000 : (tiledStyle ? tiledStyle.left : dockActive ? dockRect!.x : (dragging ? cardX : displayX)),
+        top: tiledStyle && !(keepAliveHidden || isMinimized) ? tiledStyle.top : dockActive ? dockRect!.y : (dragging ? cardY : displayY),
         transform: tiledStyle ? tiledStyle.transform : (dragging ? `translate3d(${dragTx}px, ${dragTy}px, 0)` : undefined),
         transformOrigin: tiledStyle ? tiledStyle.transformOrigin : undefined,
-        width: tiledStyle ? tiledStyle.width : displayW,
-        height: tiledStyle ? tiledStyle.height : displayH,
-        borderRadius: tileZone === 'fullscreen' ? '12px' : `${c.radius.lg}px`,
+        width: tiledStyle ? tiledStyle.width : dockActive ? dockRect!.w : displayW,
+        height: tiledStyle ? tiledStyle.height : dockActive ? dockRect!.h : displayH,
+        borderRadius: tileZone === 'fullscreen' ? '12px' : dockActive ? '10px' : `${c.radius.lg}px`,
         border: agentBorder,
         bgcolor: c.bg.surface,
         boxShadow: agentShadow,
         overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
-        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : cardZOrder,
+        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : dockActive ? dockParentZ + 1 : cardZOrder,
         transition: noTransition ? 'none' : 'box-shadow 0.4s ease, border 0.3s ease',
         '&:hover .resize-handle': { opacity: 1 },
         ...(isHighlighted && {
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index dd0b8d6e..43ff5c8c 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -84,6 +84,8 @@ export interface BrowserCardPosition {
   keep_open?: boolean;
   /** Dashboard this card belongs to; cards render and persist only on their owning dashboard. */
   dashboard_id?: string;
+  /** Chat session this browser lives inside (renders over the chat's dock slot); null/absent = free card. */
+  docked_to?: string | null;
 }
 
 export interface WorkflowCardPosition {
@@ -930,6 +932,10 @@ const dashboardLayoutSlice = createSlice({
       if (state.viewCards[action.payload]) state.pendingFocusViewCardId = action.payload;
     },
 
+    setBrowserDocked(state, action: PayloadAction<{ browserId: string; dockedTo: string | null }>) {
+      const bc = state.browserCards[action.payload.browserId];
+      if (bc) bc.docked_to = action.payload.dockedTo;
+    },
     addBrowserCardFromBackend(state, action: PayloadAction<BrowserCardPosition>) {
       const card = action.payload;
       if (state.browserCards[card.browser_id]) return;
@@ -1812,6 +1818,7 @@ export const {
   setActiveViewCardId,
   addBrowserCard,
   addBrowserCardFromBackend,
+  setBrowserDocked,
   setBrowserCardPosition,
   setBrowserCardSize,
   removeBrowserCard,
diff --git a/frontend/src/shared/ws/WebSocketManager.ts b/frontend/src/shared/ws/WebSocketManager.ts
index 320262f0..05891864 100644
--- a/frontend/src/shared/ws/WebSocketManager.ts
+++ b/frontend/src/shared/ws/WebSocketManager.ts
@@ -28,7 +28,7 @@ import {
   clearTurnLabel,
 } from '../state/agentsSlice';
 import { streamStart, streamDelta, streamEnd, clearStreamingForSession } from '../state/streamingSlice';
-import { addBrowserCardFromBackend, markBrowserCardEnding, keepBrowserCardOpen, placeBesideCard, placeBelowCard, placeBrowserBesideChat, setBrowserCardPosition, setGlowingBrowserCards, fadeGlowingBrowserCards, clearGlowingBrowserCards, removeBrowserCard, GRID_GAP, WORKFLOW_CARD_GAP, openWorkflowsApp, openWorkflowMonitor } from '../state/dashboardLayoutSlice';
+import { addBrowserCardFromBackend, setBrowserDocked, markBrowserCardEnding, keepBrowserCardOpen, placeBesideCard, placeBelowCard, placeBrowserBesideChat, setBrowserCardPosition, setGlowingBrowserCards, fadeGlowingBrowserCards, clearGlowingBrowserCards, removeBrowserCard, GRID_GAP, WORKFLOW_CARD_GAP, openWorkflowsApp, openWorkflowMonitor } from '../state/dashboardLayoutSlice';
 import { upsertOutput } from '../state/outputsSlice';
 import { fetchSettings } from '../state/settingsSlice';
 import { displaySessionName } from '../state/sessionDisplay';
@@ -847,6 +847,9 @@ class WebSocketManager {
               let glowLabel = 'Use Browser';
               if (parentCard) {
                 pos = placeBrowserBesideChat(layoutState, parentCard, parentId, browserCard.width, browserCard.height, browserCard.browser_id);
+                // Default home is INSIDE the chat: the card overlays the chat's dock slot while the
+                // chat is expanded; the beside-chat spot stays the undock/collapse fallback.
+                store.dispatch(setBrowserDocked({ browserId: browserCard.browser_id, dockedTo: parentId }));
               } else if (sess?.workflow_run_id && layoutState.workflowsMonitorCard) {
                 pos = placeBesideCard(layoutState, layoutState.workflowsMonitorCard, browserCard.width, browserCard.height, undefined, exclude, WORKFLOW_CARD_GAP, true);
               } else if (sess?.workflow_edit_id && layoutState.workflowsHub) {

From 1a0a2c0b2c16ea0a84c507c512eb786dbd262f2a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 13:16:26 -0700
Subject: [PATCH 217/248] [eric] canvas: tiled cards restyle in the same task
 as every camera write (zoom jitter gone); chat header gets a hover runway so
 the pop-above handle is actually grabbable

---
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 15 ++++++-
 .../app/pages/Dashboard/cards/BrowserCard.tsx |  2 +-
 .../Dashboard/cards/DashboardViewCard.tsx     |  2 +-
 .../app/pages/Dashboard/cards/NoteCard.tsx    |  2 +-
 .../app/pages/Dashboard/cards/tileZones.ts    | 39 ++++++++++++++++++-
 .../pages/Workflows/app/WorkflowsAppCard.tsx  |  2 +-
 6 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 2b9bcf4a..1106af45 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -641,7 +641,7 @@ const AgentCard: React.FC<Props> = ({
   }, [tileZone]);
   void tileTick;
   const cam = getCanvasState();
-  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom, getCanvasState, session.id);
   // A collapsed chat can never stay tiled: collapsing while fullscreen left a white full-window shell
   // (the header collapse control still fires in full size view). Seal the state instead of the path.
   useEffect(() => {
@@ -792,6 +792,19 @@ const AgentCard: React.FC<Props> = ({
       }}
       sx={{
         position: 'relative',
+        // Hover runway for the pop-above header: the header is pointer-events:none until the CARD
+        // is hovered, but it floats ABOVE the card's box, so without this strip the pointer leaving
+        // the card to reach it dropped :hover and the header died mid-approach (chats ungrabbable).
+        ...(expanded && !tiledStyle && !pillMode && {
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: -40,
+            height: 40,
+          },
+        }),
         // contain: streaming chat updates inside don't reflow the dashboard. Skipping `paint` here because the highlighted/selected/glow boxShadows legitimately extend past the card border, `paint` containment would clip those visuals.
         contain: 'layout style',
         // Each card gets its own compositor layer; hover-cross used to cost 100-200ms PRESENTATION by re-painting the whole canvas.
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 35a7204f..1e741356 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -234,7 +234,7 @@ const BrowserCard: React.FC<Props> = ({
   }, [tileZone]);
   void tileTick;
   const cam = getCanvasState();
-  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom, getCanvasState, browserId);
   const onTile = useCallback((zone: string): void => {
     if (zone === 'restore') dispatch(clearTiledCard(browserId));
     else dispatch(setTiledCard({ cardId: browserId, zone }));
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index b2068313..a64caf35 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -164,7 +164,7 @@ const DashboardViewCard: React.FC<Props> = ({
   }, [tileZone]);
   void tileTick;
   const cam = getCanvasState();
-  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom, getCanvasState, cardKey);
   const isFullscreen = tileZone === 'fullscreen';
 
   // Keep the live preview mounted only when the user can actually see/use this app card. Always live
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 6949edce..148d72b5 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -270,7 +270,7 @@ const NoteCard: React.FC<Props> = ({
   }, [tileZone]);
   void tileTick;
   const cam = getCanvasState();
-  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+  const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom, getCanvasState, noteId);
   const isFullscreen = tileZone === 'fullscreen';
 
   const mdDx = (!isDragging && isSelected && multiDragDelta) ? multiDragDelta.dx : 0;
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index 63d389ae..31fdcbb3 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -78,7 +78,17 @@ export function computeTiledStyle(zone: string, panX: number, panY: number, zoom
 // Tiled geometry depends on live DOM measurements, so re-render when the workspace resizes:
 // the chrome collapsing on fullscreen-enter, a window resize, a banner appearing. The initial
 // ResizeObserver fire also re-measures right after the same-commit layout change that set the zone.
-export function useTiledStyle(zone: string | undefined, panX: number, panY: number, zoom: number): TiledStyle | null {
+export function useTiledStyle(
+  zone: string | undefined,
+  panX: number,
+  panY: number,
+  zoom: number,
+  // Live sync: with these, every camera write restyles the card element IN THE SAME TASK as the
+  // canvas transform. The React path alone lands a commit behind the compositor, so tiled cards
+  // visibly wobbled against the viewport on every zoom/pan frame.
+  getLive?: () => { panX: number; panY: number; zoom: number },
+  selectId?: string,
+): TiledStyle | null {
   const [, bump] = React.useReducer((n: number) => n + 1, 0);
   React.useEffect(() => {
     if (!zone) return undefined;
@@ -94,5 +104,32 @@ export function useTiledStyle(zone: string | undefined, panX: number, panY: numb
     const timers = [60, 250, 700].map((ms) => window.setTimeout(() => bump(), ms));
     return () => { ro.disconnect(); window.removeEventListener('resize', onResize); timers.forEach((t) => window.clearTimeout(t)); };
   }, [zone]);
+  React.useEffect(() => {
+    if (!zone || !getLive || !selectId) return undefined;
+    const el = document.querySelector(`[data-select-id="${CSS.escape(selectId)}"]`) as HTMLElement | null;
+    if (!el) return undefined;
+    const props = ['left', 'top', 'width', 'height', 'transform', 'transform-origin'];
+    const apply = (): void => {
+      // A parked card (kept alive off-screen / minimized) must keep its sx parking position.
+      if (el.getAttribute('data-keepalive-hidden') === '1') { props.forEach((pr) => el.style.removeProperty(pr)); return; }
+      const cam = getLive();
+      const s = computeTiledStyle(zone, cam.panX, cam.panY, cam.zoom);
+      if (!s) return;
+      el.style.left = `${s.left}px`;
+      el.style.top = `${s.top}px`;
+      el.style.width = `${s.width}px`;
+      el.style.height = `${s.height}px`;
+      el.style.transform = s.transform;
+      el.style.transformOrigin = s.transformOrigin;
+    };
+    apply();
+    window.addEventListener('openswarm:canvas-pan-changed', apply);
+    window.addEventListener('resize', apply);
+    return () => {
+      window.removeEventListener('openswarm:canvas-pan-changed', apply);
+      window.removeEventListener('resize', apply);
+      props.forEach((pr) => el.style.removeProperty(pr));
+    };
+  }, [zone, getLive, selectId]);
   return zone ? computeTiledStyle(zone, panX, panY, zoom) : null;
 }
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
index ae8c01be..1e138d7d 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
@@ -65,7 +65,7 @@ const WorkflowsAppCard: React.FC<Props> = ({
     return () => window.removeEventListener('openswarm:canvas-pan-changed', onPan);
   }, [isFullscreen]);
   const cam = getCanvasState();
-  const fsStyle = useTiledStyle(isFullscreen ? 'fullscreen' : undefined, cam.panX, cam.panY, cam.zoom);
+  const fsStyle = useTiledStyle(isFullscreen ? 'fullscreen' : undefined, cam.panX, cam.panY, cam.zoom, getCanvasState, 'workflows-hub');
 
 
   // ---- Drag (title bar is the handle) ----

From 8afb1bcc4d072e12c3d7859e51c428514ea7a180 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 13:29:59 -0700
Subject: [PATCH 218/248] [eric] canvas: lost-release drag seal on
 chat/note/app cards (shared backstops), click never collapses an expanded
 chat, top grab band, thirds tiling dropped, mode slash commands removed

---
 .../app/components/editor/CommandPicker.tsx   | 35 +----------------
 frontend/src/app/pages/Commands/Commands.tsx  |  9 +----
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 38 ++++++++++++++++---
 .../Dashboard/cards/DashboardViewCard.tsx     | 26 ++++++++++---
 .../app/pages/Dashboard/cards/NoteCard.tsx    | 27 +++++++++----
 .../pages/Dashboard/cards/WindowControls.tsx  |  1 -
 .../interaction/useDashboardInteractions.ts   | 16 +++-----
 .../hooks/interaction/useDragEndBackstops.ts  | 24 ++++++++++++
 8 files changed, 104 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/hooks/interaction/useDragEndBackstops.ts

diff --git a/frontend/src/app/components/editor/CommandPicker.tsx b/frontend/src/app/components/editor/CommandPicker.tsx
index ffcb1526..457e260e 100644
--- a/frontend/src/app/components/editor/CommandPicker.tsx
+++ b/frontend/src/app/components/editor/CommandPicker.tsx
@@ -3,11 +3,6 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import PsychologyIcon from '@mui/icons-material/Psychology';
-import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
-import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined';
-import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
-import CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';
-import TuneOutlinedIcon from '@mui/icons-material/TuneOutlined';
 import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
 import LanguageIcon from '@mui/icons-material/Language';
 import BuildOutlinedIcon from '@mui/icons-material/BuildOutlined';
@@ -66,14 +61,6 @@ interface Props {
   visible: boolean;
 }
 
-const MODE_ICON_MAP: Record<string, React.ComponentType<{ sx?: object }>> = {
-  smart_toy: SmartToyOutlinedIcon,
-  question_answer: QuestionAnswerOutlinedIcon,
-  map: MapOutlinedIcon,
-  category: CategoryOutlinedIcon,
-  tune: TuneOutlinedIcon,
-};
-
 function highlightMatch(text: string, query: string, color: string): React.ReactNode {
   if (!query) return text;
   const idx = text.toLowerCase().indexOf(query.toLowerCase());
@@ -91,7 +78,6 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
   const c = useClaudeTokens();
   const dispatch = useAppDispatch();
   const skills = useAppSelector((s) => s.skills.items);
-  const modesMap = useAppSelector((s) => s.modes.items);
   const builtinTools = useAppSelector((s) => s.tools.builtinTools);
   const customTools = useAppSelector((s) => s.tools.items);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -121,20 +107,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
         icon: <PsychologyIcon sx={{ fontSize: 15 }} />,
       }));
 
-      const modeItems: CommandPickerItem[] = Object.values(modesMap).map((m) => {
-        const IconComp = MODE_ICON_MAP[m.icon] || SmartToyOutlinedIcon;
-        return {
-          id: m.id,
-          type: 'mode' as const,
-          category: 'Modes',
-          name: m.name,
-          description: m.description || 'Switch to this mode',
-          command: m.name.toLowerCase().replace(/\s+/g, '-'),
-          icon: <IconComp sx={{ fontSize: 15 }} />,
-        };
-      });
-
-      all = [...skillItems, ...modeItems];
+      all = skillItems;
     } else {
       const atItems: CommandPickerItem[] = [
         {
@@ -259,7 +232,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
         item.command.toLowerCase().includes(lower) ||
         item.description.toLowerCase().includes(lower),
     );
-  }, [trigger, skills, modesMap, builtinTools, customTools, filter]);
+  }, [trigger, skills, builtinTools, customTools, filter]);
 
   const flatItems = useMemo(() => {
     const result: { item: CommandPickerItem; isGroupStart: boolean; category: string }[] = [];
@@ -274,10 +247,6 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
   const getIconColor = (item: CommandPickerItem): string => {
     switch (item.type) {
       case 'skill': return c.status.success;
-      case 'mode': {
-        const mode = modesMap[item.id];
-        return mode?.color || c.accent.primary;
-      }
       case 'context': return c.text.tertiary;
       default: return c.text.tertiary;
     }
diff --git a/frontend/src/app/pages/Commands/Commands.tsx b/frontend/src/app/pages/Commands/Commands.tsx
index 141130d4..6d789c0f 100644
--- a/frontend/src/app/pages/Commands/Commands.tsx
+++ b/frontend/src/app/pages/Commands/Commands.tsx
@@ -86,14 +86,7 @@ export const CommandsContent: React.FC = () => {
       description: s.description || 'Skill',
       command: s.command || s.id,
     })),
-    ...Object.values(modesMap).map((m) => ({
-      id: m.id,
-      type: 'mode' as const,
-      name: m.name,
-      description: m.description || 'Switch to this mode',
-      command: m.name.toLowerCase().replace(/\s+/g, '-'),
-    })),
-  ], [skills, modesMap]);
+  ], [skills]);
 
   const atCommands: AtCommand[] = useMemo(() => {
     const items: AtCommand[] = [
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 1106af45..a4b3ef28 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -40,6 +40,7 @@ import { useTiledStyle } from './tileZones';
 import AgentNarratorPill from '../desktop/AgentNarratorPill';
 import { extractLatestTodos } from '../desktop/agentTodos';
 import { extractLatestShowUi, extractPendingAskUi, freezeIfDone } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
+import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
 import { getWebview } from '@/shared/browserRegistry';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { QuestionForm } from '@/app/pages/AgentChat/shell/ApprovalBar';
@@ -453,7 +454,7 @@ const AgentCard: React.FC<Props> = ({
     lastPointerRef.current = { clientX: e.clientX, clientY: e.clientY };
     didDrag.current = false;
     setIsDragging(true);
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    try { (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); } catch { /* pointer already gone */ }
     onDragStart?.(session.id, 'agent');
   }, [cardX, cardY, onDragStart, session.id, getCanvasState, tileZone]);
 
@@ -493,14 +494,14 @@ const AgentCard: React.FC<Props> = ({
     recomputeDragPos();
   }, [recomputeDragPos]);
 
-  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+  const finalizeDrag = useCallback((clientX: number, clientY: number, shiftKey: boolean) => {
     if (!dragState.current) return;
     const cs = getCanvasState();
     const z = cs.zoom;
     const panDx = (cs.panX - dragState.current.startPanX) / z;
     const panDy = (cs.panY - dragState.current.startPanY) / z;
-    const dx = (e.clientX - dragState.current.startX) / z - panDx;
-    const dy = (e.clientY - dragState.current.startY) / z - panDy;
+    const dx = (clientX - dragState.current.startX) / z - panDx;
+    const dy = (clientY - dragState.current.startY) / z - panDy;
     if (didDrag.current) {
       let finalX = dragState.current.origX + dx;
       let finalY = dragState.current.origY + dy;
@@ -511,7 +512,7 @@ const AgentCard: React.FC<Props> = ({
       }
 
       // Snap to 24px grid (Shift bypasses).
-      if (!e.shiftKey) {
+      if (!shiftKey) {
         finalX = Math.round(finalX / 24) * 24;
         finalY = Math.round(finalY / 24) * 24;
       }
@@ -525,9 +526,20 @@ const AgentCard: React.FC<Props> = ({
     didDrag.current = false;
     setLocalDragPos(null);
     setIsDragging(false);
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
   }, [dispatch, session.id, onDragEnd, snapColumn, cardHeight, getCanvasState]);
 
+  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+    if (!dragState.current) return;
+    finalizeDrag(e.clientX, e.clientY, e.shiftKey);
+    try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* capture already gone */ }
+  }, [finalizeDrag]);
+
+  const abortDrag = useCallback(() => {
+    if (!dragState.current) return;
+    finalizeDrag(lastPointerRef.current.clientX, lastPointerRef.current.clientY, true);
+  }, [finalizeDrag]);
+  useDragEndBackstops(isDragging, finalizeDrag, abortDrag);
+
   const resizeRef = useRef<{
     dir: ResizeDir;
     startX: number;
@@ -967,6 +979,18 @@ const AgentCard: React.FC<Props> = ({
         />
       )}
 
+      {/* Grab band: the top sliver of an expanded card drags it, matching the "grab the window by
+          its top edge" instinct; the pop-above header remains the labeled handle. */}
+      {expanded && !tiledStyle && !pillMode && (
+        <Box
+          onPointerDown={handleDragPointerDown}
+          onPointerMove={handleDragPointerMove}
+          onPointerUp={handleDragPointerUp}
+          onPointerCancel={abortDrag}
+          onLostPointerCapture={abortDrag}
+          sx={{ position: 'absolute', top: 0, left: 12, right: 12, height: 14, zIndex: 18, cursor: isDragging ? 'grabbing' : 'grab', touchAction: 'none' }}
+        />
+      )}
       {pillMode && (
         <Box
           onPointerDown={handleDragPointerDown}
@@ -1013,6 +1037,8 @@ const AgentCard: React.FC<Props> = ({
         onPointerDown={handleDragPointerDown}
         onPointerMove={handleDragPointerMove}
         onPointerUp={handleDragPointerUp}
+        onPointerCancel={abortDrag}
+        onLostPointerCapture={abortDrag}
         sx={{
           ...(expanded
             ? tiledStyle
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index a64caf35..ac273bcf 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -18,6 +18,7 @@ import { Output, SERVE_BASE } from '@/shared/state/outputsSlice';
 import { setViewCardPosition, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard, activateViewCardPreview } from '@/shared/state/dashboardLayoutSlice';
 import { removeViewCardCleanly } from '@/shared/viewTeardown';
 import WindowControls from './WindowControls';
+import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
 import { useTiledStyle } from './tileZones';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE, getAuthToken } from '@/shared/config';
@@ -329,7 +330,7 @@ const DashboardViewCard: React.FC<Props> = ({
     lastPointerRef.current = { clientX: e.clientX, clientY: e.clientY };
     didDrag.current = false;
     setIsDragging(true);
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    try { (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); } catch { /* pointer already gone */ }
     onDragStart?.(cardKey, 'view');
   }, [cardX, cardY, onDragStart, cardKey, getCanvasState, tileZone]);
 
@@ -369,19 +370,19 @@ const DashboardViewCard: React.FC<Props> = ({
     recomputeDragPos();
   }, [recomputeDragPos]);
 
-  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+  const finalizeDrag = useCallback((clientX: number, clientY: number, shiftKey: boolean) => {
     if (!dragState.current) return;
     const cs = getCanvasState();
     const z = cs.zoom;
     const panDx = (cs.panX - dragState.current.startPanX) / z;
     const panDy = (cs.panY - dragState.current.startPanY) / z;
-    const dx = (e.clientX - dragState.current.startX) / z - panDx;
-    const dy = (e.clientY - dragState.current.startY) / z - panDy;
+    const dx = (clientX - dragState.current.startX) / z - panDx;
+    const dy = (clientY - dragState.current.startY) / z - panDy;
     if (didDrag.current) {
       let finalX = dragState.current.origX + dx;
       let finalY = dragState.current.origY + dy;
       // Snap to 24px grid; Shift bypasses.
-      if (!e.shiftKey) {
+      if (!shiftKey) {
         finalX = Math.round(finalX / 24) * 24;
         finalY = Math.round(finalY / 24) * 24;
       }
@@ -398,9 +399,20 @@ const DashboardViewCard: React.FC<Props> = ({
     didDrag.current = false;
     setLocalDragPos(null);
     setIsDragging(false);
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
   }, [dispatch, cardKey, onDragEnd, getCanvasState]);
 
+  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+    if (!dragState.current) return;
+    finalizeDrag(e.clientX, e.clientY, e.shiftKey);
+    try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* capture already gone */ }
+  }, [finalizeDrag]);
+
+  const abortDrag = useCallback(() => {
+    if (!dragState.current) return;
+    finalizeDrag(lastPointerRef.current.clientX, lastPointerRef.current.clientY, true);
+  }, [finalizeDrag]);
+  useDragEndBackstops(isDragging, finalizeDrag, abortDrag);
+
   const resizeRef = useRef<{
     dir: ResizeDir; startX: number; startY: number;
     origX: number; origY: number; origW: number; origH: number;
@@ -612,6 +624,8 @@ const DashboardViewCard: React.FC<Props> = ({
         onPointerDown={handleDragPointerDown}
         onPointerMove={handleDragPointerMove}
         onPointerUp={handleDragPointerUp}
+        onPointerCancel={abortDrag}
+        onLostPointerCapture={abortDrag}
         onPointerEnter={() => { if (headerCollapsed) setHeaderPeek(true); }}
         onPointerLeave={() => setHeaderPeek(false)}
         sx={{
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index 148d72b5..d8e907c9 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -19,6 +19,7 @@ import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import WindowControls from './WindowControls';
 import { useTiledStyle } from './tileZones';
+import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
 
 type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
 
@@ -120,7 +121,7 @@ const NoteCard: React.FC<Props> = ({
     lastPointerRef.current = { clientX: e.clientX, clientY: e.clientY };
     didDrag.current = false;
     setIsDragging(true);
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    try { (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); } catch { /* pointer already gone */ }
     onDragStart?.(noteId, 'note');
   }, [cardX, cardY, noteId, onDragStart, getCanvasState, tileZone]);
 
@@ -160,18 +161,18 @@ const NoteCard: React.FC<Props> = ({
     recomputeDragPos();
   }, [recomputeDragPos]);
 
-  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+  const finalizeDrag = useCallback((clientX: number, clientY: number, shiftKey: boolean) => {
     if (!dragState.current) return;
     const cs = getCanvasState();
     const z = cs.zoom;
     const panDx = (cs.panX - dragState.current.startPanX) / z;
     const panDy = (cs.panY - dragState.current.startPanY) / z;
-    const dx = (e.clientX - dragState.current.startX) / z - panDx;
-    const dy = (e.clientY - dragState.current.startY) / z - panDy;
+    const dx = (clientX - dragState.current.startX) / z - panDx;
+    const dy = (clientY - dragState.current.startY) / z - panDy;
     if (didDrag.current) {
       let finalX = dragState.current.origX + dx;
       let finalY = dragState.current.origY + dy;
-      if (!e.shiftKey) {
+      if (!shiftKey) {
         finalX = Math.round(finalX / 24) * 24;
         finalY = Math.round(finalY / 24) * 24;
       }
@@ -184,9 +185,20 @@ const NoteCard: React.FC<Props> = ({
     didDrag.current = false;
     setLocalDragPos(null);
     setIsDragging(false);
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
   }, [dispatch, noteId, onDragEnd, getCanvasState]);
 
+  const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
+    if (!dragState.current) return;
+    finalizeDrag(e.clientX, e.clientY, e.shiftKey);
+    try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* capture already gone */ }
+  }, [finalizeDrag]);
+
+  const abortDrag = useCallback(() => {
+    if (!dragState.current) return;
+    finalizeDrag(lastPointerRef.current.clientX, lastPointerRef.current.clientY, true);
+  }, [finalizeDrag]);
+  useDragEndBackstops(isDragging, finalizeDrag, abortDrag);
+
   const resizeRef = useRef<{
     dir: ResizeDir; startX: number; startY: number;
     origX: number; origY: number; origW: number; origH: number;
@@ -329,7 +341,8 @@ const NoteCard: React.FC<Props> = ({
         onPointerDown={handleDragPointerDown}
         onPointerMove={handleDragPointerMove}
         onPointerUp={handleDragPointerUp}
-        onPointerCancel={handleDragPointerUp}
+        onPointerCancel={abortDrag}
+        onLostPointerCapture={abortDrag}
         sx={{
           height: isMinimized ? '100%' : HEADER_H,
           flexShrink: 0,
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index a7de7074..27d846bc 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -23,7 +23,6 @@ const GREEN = '#28c840';
 const GROUPS: { label: string; zones: string[] }[] = [
   { label: 'Fill & Halves', zones: ['fill', 'left', 'right', 'top', 'bottom'] },
   { label: 'Quarters', zones: ['tl', 'tr', 'bl', 'br'] },
-  { label: 'Thirds', zones: ['t3l', 't3c', 't3r'] },
 ];
 
 const dotSx = (color: string): Record<string, unknown> => ({
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
index b4744152..d7d128f9 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, type Dispatch, type SetStateActi
 import { report } from '@/shared/serviceClient';
 import { useAppDispatch } from '@/shared/hooks';
 import { store } from '@/shared/state/store';
-import { collapseSession, expandSession } from '@/shared/state/agentsSlice';
+import { expandSession } from '@/shared/state/agentsSlice';
 import { bringToFront } from '@/shared/state/dashboardLayoutSlice';
 import { setScrollFocusedCard } from '@/shared/cardScrollFocus';
 import type { CardType, useDashboardSelection } from '../state/useDashboardSelection';
@@ -80,16 +80,10 @@ export function useDashboardInteractions({
     // it or glide the camera; it leaves the mode via its own controls (yellow, Esc, dock swap).
     if (store.getState().dashboardLayout.tiledCards[id]) return;
 
-    const alreadyExpanded = type === 'agent' && expandedSessionIds.includes(id);
-
-    if (alreadyExpanded) {
-      // Delay single-click collapse so double-click can override. Double-click handler (handleCardDoubleClick) clears clickTimerRef.
-      clickTimerRef.current = setTimeout(() => {
-        clickTimerRef.current = null;
-        dispatch(collapseSession(id));
-      }, 250);
-      return;
-    }
+    // Single-click on an already-expanded chat is focus, never collapse: the old delayed-collapse
+    // toggle made a click land, collapse the chat, and force a second click to reopen ("takes
+    // multiple clicks"). Collapse lives on the yellow light / Esc / canvas click instead.
+    if (type === 'agent' && expandedSessionIds.includes(id)) return;
 
     // Expand (if not already) + center + zoom + bring to front
     if (type === 'agent') {
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDragEndBackstops.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDragEndBackstops.ts
new file mode 100644
index 00000000..059813ac
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDragEndBackstops.ts
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+/** Window-level insurance for a card's local drag: a release the drag handle never hears
+    (pointercancel, capture lost to a mid-drag remount, mouseup outside the window, app blur)
+    still commits the drag. Without this the stuck drag state re-pins the card to the cursor on
+    every camera pan, the "card glued to the POV until reload" bug. */
+export function useDragEndBackstops(
+  active: boolean,
+  finalize: (clientX: number, clientY: number, shiftKey: boolean) => void,
+  abort: () => void,
+): void {
+  useEffect(() => {
+    if (!active) return undefined;
+    const onUp = (e: PointerEvent): void => finalize(e.clientX, e.clientY, e.shiftKey);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', abort);
+    window.addEventListener('blur', abort);
+    return () => {
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', abort);
+      window.removeEventListener('blur', abort);
+    };
+  }, [active, finalize, abort]);
+}

From a0de2f5e3efb125dbbe2bf30c1b4904e04161e9f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 13:33:03 -0700
Subject: [PATCH 219/248] [eric] workflows: window drag gets the same
 lost-release seal as the cards

---
 .../pages/Workflows/app/WorkflowsAppCard.tsx  | 26 +++++++++++++++----
 .../Workflows/app/WorkflowsAppContent.tsx     |  2 ++
 frontend/src/app/pages/Workflows/app/types.ts |  2 ++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
index 1e138d7d..a66b7eea 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { setWorkflowsHubPosition, setWorkflowsHubSize } from '@/shared/state/dashboardLayoutSlice';
 import { TILE_ZONES, useTiledStyle } from '@/app/pages/Dashboard/cards/tileZones';
+import { useDragEndBackstops } from '@/app/pages/Dashboard/hooks/interaction/useDragEndBackstops';
 import { useWC } from './uiKit';
 import WorkflowsAppContent from './WorkflowsAppContent';
 
@@ -70,6 +71,7 @@ const WorkflowsAppCard: React.FC<Props> = ({
 
   // ---- Drag (title bar is the handle) ----
   const dragState = useRef<{ startX: number; startY: number; origX: number; origY: number; startPanX: number; startPanY: number } | null>(null);
+  const lastPointerRef = useRef<{ clientX: number; clientY: number }>({ clientX: 0, clientY: 0 });
   const [isDragging, setIsDragging] = useState(false);
   const [localDragPos, setLocalDragPos] = useState<{ x: number; y: number } | null>(null);
   const didDrag = useRef(false);
@@ -99,6 +101,7 @@ const WorkflowsAppCard: React.FC<Props> = ({
     const rawDy = e.clientY - dragState.current.startY;
     if (!didDrag.current && Math.sqrt(rawDx * rawDx + rawDy * rawDy) < DRAG_THRESHOLD) return;
     didDrag.current = true;
+    lastPointerRef.current = { clientX: e.clientX, clientY: e.clientY };
     const cs = getCanvasState();
     const z = cs.zoom;
     const panDx = (cs.panX - dragState.current.startPanX) / z;
@@ -109,20 +112,20 @@ const WorkflowsAppCard: React.FC<Props> = ({
     onDragMove?.(dx, dy, e.clientX, e.clientY);
   }, [onDragMove, getCanvasState]);
 
-  const onHeaderPointerUp = useCallback((e: React.PointerEvent) => {
+  const finalizeDrag = useCallback((clientX: number, clientY: number, shiftKey: boolean) => {
     if (!dragState.current) return;
     const cs = getCanvasState();
     const z = cs.zoom;
     const panDx = (cs.panX - dragState.current.startPanX) / z;
     const panDy = (cs.panY - dragState.current.startPanY) / z;
-    const dx = (e.clientX - dragState.current.startX) / z - panDx;
-    const dy = (e.clientY - dragState.current.startY) / z - panDy;
+    const dx = (clientX - dragState.current.startX) / z - panDx;
+    const dy = (clientY - dragState.current.startY) / z - panDy;
     if (didDrag.current) {
       justDraggedRef.current = true;
       setTimeout(() => { justDraggedRef.current = false; }, 0);
       let finalX = dragState.current.origX + dx;
       let finalY = dragState.current.origY + dy;
-      if (!e.shiftKey) { finalX = Math.round(finalX / 24) * 24; finalY = Math.round(finalY / 24) * 24; }
+      if (!shiftKey) { finalX = Math.round(finalX / 24) * 24; finalY = Math.round(finalY / 24) * 24; }
       dispatch(setWorkflowsHubPosition({ x: finalX, y: finalY }));
     }
     onDragEnd?.(dx, dy, didDrag.current);
@@ -130,9 +133,20 @@ const WorkflowsAppCard: React.FC<Props> = ({
     didDrag.current = false;
     setLocalDragPos(null);
     setIsDragging(false);
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
   }, [dispatch, onDragEnd, getCanvasState]);
 
+  const onHeaderPointerUp = useCallback((e: React.PointerEvent) => {
+    if (!dragState.current) return;
+    finalizeDrag(e.clientX, e.clientY, e.shiftKey);
+    try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* capture already gone */ }
+  }, [finalizeDrag]);
+
+  const abortDrag = useCallback(() => {
+    if (!dragState.current) return;
+    finalizeDrag(lastPointerRef.current.clientX, lastPointerRef.current.clientY, true);
+  }, [finalizeDrag]);
+  useDragEndBackstops(isDragging, finalizeDrag, abortDrag);
+
   // ---- Resize ----
   const resizeRef = useRef<{ dir: ResizeDir; sx0: number; sy0: number; ox: number; oy: number; ow: number; oh: number } | null>(null);
   const [isResizing, setIsResizing] = useState(false);
@@ -233,6 +247,8 @@ const WorkflowsAppCard: React.FC<Props> = ({
           onPointerDown: onHeaderPointerDown,
           onPointerMove: onHeaderPointerMove,
           onPointerUp: onHeaderPointerUp,
+          onPointerCancel: abortDrag,
+          onLostPointerCapture: abortDrag,
           dragging: isDragging,
         }}
         onTileZone={(zone) => {
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
index 8f228a8f..63f1d91c 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx
@@ -70,6 +70,8 @@ const WorkflowsAppContent: React.FC<{ header: CardHeader; onTileZone?: (zone: st
         onPointerDown={header.onPointerDown}
         onPointerMove={header.onPointerMove}
         onPointerUp={header.onPointerUp}
+        onPointerCancel={header.onPointerCancel}
+        onLostPointerCapture={header.onLostPointerCapture}
         style={{ height: 42, flex: 'none', display: 'flex', alignItems: 'center', padding: '0 16px', borderBottom: `1px solid ${WC.line}`, background: WC.panel, gap: 14, cursor: header.dragging ? 'grabbing' : 'grab', touchAction: 'none', userSelect: 'none' }}
       >
         {/* macOS traffic lights: the whole window gets close / minimize / full size view like every card. */}
diff --git a/frontend/src/app/pages/Workflows/app/types.ts b/frontend/src/app/pages/Workflows/app/types.ts
index 6340614b..66dded24 100644
--- a/frontend/src/app/pages/Workflows/app/types.ts
+++ b/frontend/src/app/pages/Workflows/app/types.ts
@@ -8,6 +8,8 @@ export interface CardHeader {
   onPointerDown: (e: PointerEvent) => void;
   onPointerMove: (e: PointerEvent) => void;
   onPointerUp: (e: PointerEvent) => void;
+  onPointerCancel?: () => void;
+  onLostPointerCapture?: () => void;
   dragging: boolean;
 }
 

From 28844f2ab6265bed736251f74b3c8853b992e1e2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 13:52:56 -0700
Subject: [PATCH 220/248] [eric] canvas: right-click menus on every card,
 click-zoom retry beats the shield race, dbl-click zooms out in place, tile
 menu can't bait, bigger chat grab band, help pill sheds the mic

---
 .../Dashboard/canvas/DashboardOverlays.tsx    |   2 +
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  17 ++-
 .../app/pages/Dashboard/cards/BrowserCard.tsx |  12 ++
 .../Dashboard/cards/DashboardViewCard.tsx     |   8 +
 .../app/pages/Dashboard/cards/NoteCard.tsx    |   8 +
 .../pages/Dashboard/cards/WindowControls.tsx  |   4 +-
 .../Dashboard/desktop/CardContextMenu.tsx     | 139 ++++++++++++++++++
 .../app/pages/Dashboard/desktop/HelpPill.tsx  |  36 +----
 .../app/pages/Dashboard/desktop/desktop.css   |   8 +
 .../interaction/useDashboardInteractions.ts   |  33 ++++-
 10 files changed, 223 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/CardContextMenu.tsx

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
index b1651a42..d4978714 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx
@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import DashboardToolbar from '../DashboardToolbar';
 import CanvasControls from '../controls/CanvasControls';
 import HelpPill from '../desktop/HelpPill';
+import CardContextMenu from '../desktop/CardContextMenu';
 import CardSearchPalette from '../controls/CardSearchPalette';
 import DirectionHints from '../controls/DirectionHints';
 import WorkflowRunningToast from '@/app/pages/Workflows/WorkflowRunningToast';
@@ -122,6 +123,7 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
       {!anyFullscreen && (
       <Box sx={{ position: 'absolute', top: 14, right: 16, zIndex: 10 }}>
         <HelpPill />
+      <CardContextMenu />
       </Box>
       )}
 
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index a4b3ef28..755961f7 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -19,6 +19,7 @@ import {
   collapseSession,
   expandSession,
   closeSession,
+  deleteSession,
   fetchSession,
   renameSession,
 } from '@/shared/state/agentsSlice';
@@ -38,6 +39,7 @@ import {
 import WindowControls, { ARC_CHIP_SX } from './WindowControls';
 import { useTiledStyle } from './tileZones';
 import AgentNarratorPill from '../desktop/AgentNarratorPill';
+import { openCardContextMenu } from '../desktop/CardContextMenu';
 import { extractLatestTodos } from '../desktop/agentTodos';
 import { extractLatestShowUi, extractPendingAskUi, freezeIfDone } from '@/app/pages/AgentChat/tool-ui/showUiPayload';
 import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
@@ -802,6 +804,15 @@ const AgentCard: React.FC<Props> = ({
         e.stopPropagation();
         onDoubleClick?.(session.id, 'agent');
       }}
+      onContextMenu={(e: React.MouseEvent) => openCardContextMenu(e, {
+        rename: { value: displayChatTitle(session), onCommit: (name) => dispatch(renameSession({ sessionId: session.id, name })) },
+        items: [
+          { label: expanded ? 'Collapse' : 'Open', onClick: () => dispatch(expanded ? collapseSession(session.id) : expandSession(session.id)) },
+          { label: 'Full Screen', onClick: () => onTile('fullscreen') },
+          { label: 'Close', onClick: () => handleRemove() },
+          { label: 'Delete chat', danger: true, onClick: () => { void dispatch(deleteSession({ sessionId: session.id })); } },
+        ],
+      })}
       sx={{
         position: 'relative',
         // Hover runway for the pop-above header: the header is pointer-events:none until the CARD
@@ -813,8 +824,8 @@ const AgentCard: React.FC<Props> = ({
             position: 'absolute',
             left: 0,
             right: 0,
-            top: -40,
-            height: 40,
+            top: -48,
+            height: 48,
           },
         }),
         // contain: streaming chat updates inside don't reflow the dashboard. Skipping `paint` here because the highlighted/selected/glow boxShadows legitimately extend past the card border, `paint` containment would clip those visuals.
@@ -988,7 +999,7 @@ const AgentCard: React.FC<Props> = ({
           onPointerUp={handleDragPointerUp}
           onPointerCancel={abortDrag}
           onLostPointerCapture={abortDrag}
-          sx={{ position: 'absolute', top: 0, left: 12, right: 12, height: 14, zIndex: 18, cursor: isDragging ? 'grabbing' : 'grab', touchAction: 'none' }}
+          sx={{ position: 'absolute', top: 0, left: 8, right: 8, height: 26, zIndex: 18, cursor: isDragging ? 'grabbing' : 'grab', touchAction: 'none' }}
         />
       )}
       {pillMode && (
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 1e741356..6b670bea 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -58,10 +58,12 @@ import {
   registerPendingLoad,
   wakePendingLoad,
   type BrowserWebview,
+  getWebview,
 } from '@/shared/browserRegistry';
 import { setLastInteractedBrowser } from '@/shared/browserFocus';
 import { registerCapsuleForRestore } from '@/shared/browserStateCapsule';
 import BrowserFindBar from './BrowserFindBar';
+import { openCardContextMenu } from '../desktop/CardContextMenu';
 import { useBrowserActivity } from '@/shared/useBrowserActivity';
 import { getActionLabel } from '@/shared/browserCommandHandler';
 import { resolveInput, isGoogleSearch } from '@/shared/resolveUrl';
@@ -981,6 +983,16 @@ const BrowserCard: React.FC<Props> = ({
       data-select-meta={JSON.stringify({ name: activeTitle || 'Browser', url: activeUrl })}
       // Marks a kept-alive card parked off-screen (it belongs to another dashboard); fit-to-view must skip it or it pans the canvas to chase it and the card bleeds onto the dashboard you're viewing.
       data-keepalive-hidden={keepAliveHidden || isMinimized ? '1' : undefined}
+      onContextMenu={(e: React.MouseEvent) => openCardContextMenu(e, {
+        items: [
+          { label: 'New Tab', onClick: () => dispatch(addBrowserTab({ browserId, url: browserHomepage })) },
+          { label: 'Reload', onClick: () => { try { (getWebview(browserId) as { reload?: () => void } | undefined)?.reload?.(); } catch { /* webview gone */ } } },
+          { label: 'Copy URL', onClick: () => { void navigator.clipboard.writeText(activeUrl); } },
+          { label: 'Full Screen', onClick: () => onTile('fullscreen') },
+          { label: 'Minimize', onClick: handleMinimize },
+          { label: 'Close', danger: true, onClick: () => { dispatch(recordClosedCard({ kind: 'browser', id: browserId })); removeBrowserCardCleanly(browserId, dispatch); } },
+        ],
+      })}
       onPointerDownCapture={(e: React.PointerEvent) => {
         onBringToFront?.(browserId, 'browser');
         // Capture-phase so chrome clicks (tab strip, URL bar) the children swallow still select the card; clicks inside the guest page never reach the host at all. Shift keeps the bubbled toggle path. Pass the target so URL-bar/tab presses select without yanking the camera.
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index ac273bcf..55acf3ce 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -18,6 +18,7 @@ import { Output, SERVE_BASE } from '@/shared/state/outputsSlice';
 import { setViewCardPosition, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard, activateViewCardPreview } from '@/shared/state/dashboardLayoutSlice';
 import { removeViewCardCleanly } from '@/shared/viewTeardown';
 import WindowControls from './WindowControls';
+import { openCardContextMenu } from '../desktop/CardContextMenu';
 import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
 import { useTiledStyle } from './tileZones';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
@@ -537,6 +538,13 @@ const DashboardViewCard: React.FC<Props> = ({
     <Box
       data-select-type="view-card"
       data-select-id={cardKey}
+      onContextMenu={(e: React.MouseEvent) => openCardContextMenu(e, {
+        items: [
+          { label: 'Full Screen', onClick: () => onTile('fullscreen') },
+          { label: 'Minimize', onClick: onMinimize },
+          { label: 'Close', danger: true, onClick: () => handleRemove() },
+        ],
+      })}
       data-select-meta={JSON.stringify({ name: output.name, description: output.description, path: output.workspace_path })}
       className="osw-card"
       onPointerDownCapture={() => onBringToFront?.(cardKey, 'view')}
diff --git a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
index d8e907c9..f315027e 100644
--- a/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
@@ -18,6 +18,7 @@ import {
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import WindowControls from './WindowControls';
+import { openCardContextMenu } from '../desktop/CardContextMenu';
 import { useTiledStyle } from './tileZones';
 import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
 
@@ -297,6 +298,13 @@ const NoteCard: React.FC<Props> = ({
       className="osw-card"
       data-select-type="note-card"
       data-select-id={noteId}
+      onContextMenu={(e: React.MouseEvent) => openCardContextMenu(e, {
+        items: [
+          { label: 'Full Screen', onClick: () => onTile('fullscreen') },
+          { label: 'Minimize', onClick: onMinimize },
+          { label: 'Delete note', danger: true, onClick: () => handleRemove() },
+        ],
+      })}
       data-select-meta={JSON.stringify({ name: 'Note', content: content.slice(0, 60) })}
       onPointerDownCapture={(e: React.PointerEvent) => {
         onBringToFront?.(noteId, 'note');
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 27d846bc..943d9ee3 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -68,7 +68,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
     if (!menuHot) { setMenuHot(true); requestAnimationFrame(() => setMenuOpen(true)); return; }
     setMenuOpen(true);
   };
-  const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
+  const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 320); };
   const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
 
   const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
@@ -79,7 +79,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
   );
 
   return (
-    <Box className="osw-window-lights" onPointerDown={stop}
+    <Box className="osw-window-lights" data-tilemenu-open={menuOpen ? '1' : undefined} onPointerDown={stop}
       sx={{
         display: 'flex', gap: '8px', alignItems: 'center', flex: 'none', '&:hover span': { opacity: 1 },
         // Inert until the card is hovered: crossing a card can't hit-test or fire React enter/leave
diff --git a/frontend/src/app/pages/Dashboard/desktop/CardContextMenu.tsx b/frontend/src/app/pages/Dashboard/desktop/CardContextMenu.tsx
new file mode 100644
index 00000000..8cb970ea
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/CardContextMenu.tsx
@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+
+// One right-click menu for every canvas entity (chats, browsers, notes, apps, workflow cards,
+// minimized pills). Cards call openCardContextMenu with their items; this overlay renders the
+// native-feeling glass menu (SpacesStrip grammar) and closes on outside press / Esc / item click.
+export interface CardMenuItem {
+  label: string;
+  danger?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export interface CardMenuRequest {
+  x: number;
+  y: number;
+  items: CardMenuItem[];
+  /** Optional inline-rename affordance: shown as the first row with an editable input. */
+  rename?: { value: string; onCommit: (next: string) => void };
+}
+
+const EVENT = 'openswarm:card-context-menu';
+
+export function openCardContextMenu(e: { clientX: number; clientY: number; preventDefault: () => void; stopPropagation: () => void }, req: Omit<CardMenuRequest, 'x' | 'y'>): void {
+  e.preventDefault();
+  e.stopPropagation();
+  window.dispatchEvent(new CustomEvent(EVENT, { detail: { ...req, x: e.clientX, y: e.clientY } }));
+}
+
+const MENU_W = 208;
+
+function CardContextMenu(): React.ReactElement | null {
+  const [menu, setMenu] = useState<CardMenuRequest | null>(null);
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState('');
+
+  useEffect(() => {
+    const onOpen = (e: Event): void => {
+      const req = (e as CustomEvent).detail as CardMenuRequest;
+      setMenu(req);
+      setRenaming(false);
+      setRenameValue(req.rename?.value ?? '');
+    };
+    window.addEventListener(EVENT, onOpen);
+    return () => window.removeEventListener(EVENT, onOpen);
+  }, []);
+
+  useEffect(() => {
+    if (!menu) return undefined;
+    const onDown = (): void => setMenu(null);
+    const onKey = (e: KeyboardEvent): void => { if (e.key === 'Escape') setMenu(null); };
+    window.addEventListener('mousedown', onDown);
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('wheel', onDown, { passive: true });
+    return () => {
+      window.removeEventListener('mousedown', onDown);
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('wheel', onDown);
+    };
+  }, [menu]);
+
+  if (!menu) return null;
+
+  const itemSx = {
+    display: 'flex', alignItems: 'center', width: '100%', px: 1.5, py: 0.75,
+    border: 'none', background: 'transparent', borderRadius: '7px',
+    color: 'rgba(255,255,255,0.9)', fontFamily: 'inherit', fontSize: '0.8125rem',
+    cursor: 'pointer', textAlign: 'left' as const,
+    '&:hover': { background: 'rgba(255,255,255,0.1)' },
+    '&:disabled': { color: 'rgba(255,255,255,0.35)', cursor: 'default', '&:hover': { background: 'transparent' } },
+  };
+
+  const commitRename = (): void => {
+    const trimmed = renameValue.trim();
+    if (trimmed && menu.rename && trimmed !== menu.rename.value) menu.rename.onCommit(trimmed);
+    setMenu(null);
+  };
+
+  return (
+    <Box
+      onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
+      onContextMenu={(e: React.MouseEvent) => e.preventDefault()}
+      sx={{
+        position: 'fixed',
+        top: Math.min(menu.y + 2, window.innerHeight - 44 * (menu.items.length + 1) - 16),
+        left: Math.min(menu.x, window.innerWidth - MENU_W - 12),
+        zIndex: 100001,
+        width: MENU_W, p: 0.5, borderRadius: '10px',
+        background: 'rgba(28,25,33,0.96)',
+        backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
+        border: '1px solid rgba(255,255,255,0.12)',
+        boxShadow: '0 18px 44px rgba(0,0,0,0.5)',
+      }}
+    >
+      {menu.rename && (
+        renaming ? (
+          <Box
+            component="input"
+            autoFocus
+            value={renameValue}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setRenameValue(e.target.value)}
+            onKeyDown={(e: React.KeyboardEvent) => {
+              e.stopPropagation();
+              if (e.key === 'Enter') commitRename();
+              if (e.key === 'Escape') setMenu(null);
+            }}
+            onBlur={commitRename}
+            sx={{
+              width: '100%', boxSizing: 'border-box', mb: 0.25, px: 1.25, py: 0.6,
+              border: '1px solid rgba(255,255,255,0.35)', borderRadius: '7px',
+              background: 'rgba(0,0,0,0.35)', outline: 'none',
+              color: 'rgba(255,255,255,0.95)', fontFamily: 'inherit', fontSize: '0.8125rem',
+            }}
+          />
+        ) : (
+          <Box component="button" sx={itemSx} onClick={() => setRenaming(true)}>
+            Rename
+          </Box>
+        )
+      )}
+      {menu.items.map((item) => (
+        <Box
+          key={item.label}
+          component="button"
+          disabled={item.disabled}
+          sx={{
+            ...itemSx,
+            ...(item.danger && { color: '#ff7b72', '&:hover': { background: 'rgba(255,123,114,0.12)' } }),
+          }}
+          onClick={() => { setMenu(null); item.onClick(); }}
+        >
+          {item.label}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export default CardContextMenu;
diff --git a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
index 73bacef2..33185d60 100644
--- a/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
@@ -1,22 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
-import CircularProgress from '@mui/material/CircularProgress';
-import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined';
-import MicIcon from '@mui/icons-material/Mic';
-import { useVoice } from '@/shared/voice/voiceContext';
 import HelpPanel from './HelpPanel';
 
-/** Top-right desktop pill: Help opens the help panel (ask, report a bug, docs); the mic dictates (local whisper) into the focused field. */
+/** Top-right desktop pill: opens the help panel (ask, report a bug, docs). Dictation lives on the composer mics + F5, not here. */
 function HelpPill(): React.ReactElement {
-  const { state, pct, pressStart, pressEnd } = useVoice();
   const [helpOpen, setHelpOpen] = useState(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
-  const recording = state === 'recording';
-  const transcribing = state === 'transcribing';
-  const preparing = state === 'preparing';
-  const busy = transcribing || preparing;
 
   // Outside click / Esc closes the panel; listeners only live while it's open.
   useEffect(() => {
@@ -36,39 +26,23 @@ function HelpPill(): React.ReactElement {
         sx={{
           display: 'flex',
           alignItems: 'center',
-          gap: 0.75,
           height: 30,
-          pl: 1.5,
-          pr: 1,
+          px: 1.5,
           borderRadius: 999,
-          background: recording ? 'rgba(150,30,40,0.72)' : 'rgba(22,12,34,0.66)',
+          background: 'rgba(22,12,34,0.66)',
           backdropFilter: 'blur(20px) saturate(160%)',
           WebkitBackdropFilter: 'blur(20px) saturate(160%)',
           boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
           cursor: 'pointer',
           userSelect: 'none',
           transition: 'background 0.2s ease',
+          '&:hover': { background: 'rgba(22,12,34,0.8)' },
         }}
         onClick={() => setHelpOpen((v) => !v)}
       >
         <Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
-          {recording ? 'Listening' : transcribing ? 'Transcribing' : preparing ? `Preparing ${pct}%` : 'Help'}
+          Help
         </Typography>
-        <Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (F5)'} placement="bottom" arrow>
-          <Box
-            sx={{ display: 'flex', alignItems: 'center', color: recording ? '#fff' : 'rgba(255,255,255,0.55)' }}
-            onPointerDown={(e) => { e.stopPropagation(); if (!busy) pressStart(); }}
-            onPointerUp={(e) => { e.stopPropagation(); pressEnd(); }}
-            onPointerLeave={() => pressEnd()}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {busy
-              ? <CircularProgress size={13} thickness={5} sx={{ color: 'rgba(255,255,255,0.7)' }} />
-              : recording
-                ? <MicIcon sx={{ fontSize: 16 }} />
-                : <MicNoneOutlinedIcon sx={{ fontSize: 15 }} />}
-          </Box>
-        </Tooltip>
       </Box>
       {helpOpen && <HelpPanel onClose={() => setHelpOpen(false)} />}
     </Box>
diff --git a/frontend/src/app/pages/Dashboard/desktop/desktop.css b/frontend/src/app/pages/Dashboard/desktop/desktop.css
index 814e3a74..e4924f8c 100644
--- a/frontend/src/app/pages/Dashboard/desktop/desktop.css
+++ b/frontend/src/app/pages/Dashboard/desktop/desktop.css
@@ -4,3 +4,11 @@ body.dashboard-marquee-active * {
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
 }
+
+/* While a traffic-light tile menu is open, its lights cluster stays visible and interactive even
+   when the hover that revealed it has moved on (to the menu itself); otherwise the menu fades
+   mid-approach and the click lands on nothing. */
+.osw-pill-lights:has(.osw-window-lights[data-tilemenu-open="1"]) {
+  opacity: 1 !important;
+  pointer-events: auto !important;
+}
diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
index d7d128f9..7545b30f 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
@@ -73,8 +73,8 @@ export function useDashboardInteractions({
     // Clicking a control INSIDE a card (text field, button, browser URL bar/tabs, note textarea) selects + raises it but must NOT re-center the camera onto it: yanking focus to a card just to click into its input is hostile (same reasoning as the guest-page and Workflows carve-outs). Card frame/body clicks still auto-focus.
     if (pressLandedOnControl(originTarget)) return;
 
-    // The Workflows window is an app you click around inside, not a card you re-center every tap. Single-click only raises + selects it; double-click still zoom-to-fits (handleCardDoubleClick). Without this, clicking any button inside it yanked the canvas into a re-zoom.
-    if (type === 'workflows-hub' || type === 'workflows-monitor') return;
+    // The Workflows window fits like any card on frame/header presses; pressLandedOnControl above
+    // already keeps taps on its buttons, rows, and inputs from yanking the camera.
 
     // A tiled (fullscreen/snapped) card is pinned Arc-style: clicking inside it must not collapse
     // it or glide the camera; it leaves the mode via its own controls (yellow, Esc, dock swap).
@@ -90,9 +90,15 @@ export function useDashboardInteractions({
       dispatch(expandSession(id));
     }
     setFocusedCardId(id);
-    setTimeout(() => {
-      // The capture-phase select fires this on pointer DOWN; if the press became a drag (or marquee), re-framing the camera mid-gesture is the "canvas yanks as I start dragging" nudge. The webview shield class is up for exactly that window.
-      if (document.body.classList.contains('dashboard-marquee-active')) return;
+    // The capture-phase select fires on pointer DOWN; if the press became a drag (or marquee),
+    // re-framing mid-gesture is the "canvas yanks" nudge, so the shield class defers the fit. A slow
+    // CLICK with a few px of jitter also arms the shield briefly, which used to abort the fit
+    // entirely ("takes multiple clicks to zoom in"), so retry once the gesture settles.
+    const tryFit = (attempt: number): void => {
+      if (document.body.classList.contains('dashboard-marquee-active')) {
+        if (attempt < 3) setTimeout(() => tryFit(attempt + 1), 160);
+        return;
+      }
       const rect = getCardRect(id, type);
       if (rect) canvas.actions.fitToCards([rect], 1.15, true, type === 'browser' ? 0.8 : undefined);
       setTimeout(() => {
@@ -103,7 +109,8 @@ export function useDashboardInteractions({
         if (tag === 'INPUT' || tag === 'TEXTAREA' || active.isContentEditable) return;
         active.blur?.();
       }, 150);
-    }, 100);
+    };
+    setTimeout(() => tryFit(0), 100);
   }, [selection, getCardRect, canvas.actions, dispatch, expandedSessionIds]);
 
   const handleBringToFront = useCallback((id: string, type: CardType) => {
@@ -194,12 +201,22 @@ export function useDashboardInteractions({
     selection.handleCanvasMouseUp(e.nativeEvent);
   }, [canvas.handlers, selection]);
 
-  // Double-click empty canvas → fit all cards
+  // Double-click empty canvas → zoom OUT anchored at the cursor (Google Maps style). It must never
+  // travel: the old fit-all panned the camera to wherever the cards were, which reads as teleporting.
   const handleViewportDoubleClick = useCallback((e: React.MouseEvent) => {
     if (e.button !== 0) return;
     if (isCardTarget(e.target, e.currentTarget)) return;
     report('dashboard', 'canvas_double_clicked');
-    canvas.actions.fitToView();
+    const vp = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const cx = e.clientX - vp.left;
+    const cy = e.clientY - vp.top;
+    const cur = canvas.actions.getLiveState();
+    const nextZoom = Math.max(0.15, cur.zoom * 0.55);
+    canvas.actions.animateTo({
+      zoom: nextZoom,
+      panX: cx - ((cx - cur.panX) / cur.zoom) * nextZoom,
+      panY: cy - ((cy - cur.panY) / cur.zoom) * nextZoom,
+    });
   }, [canvas.actions]);
 
   // Double-click a card → always expand + center + zoom (cancels pending collapse from single-click)

From 1a094f8dea04858368c1443152d513ef98779c56 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 14:00:13 -0700
Subject: [PATCH 221/248] [eric] apps: built apps dock inside their chat like
 browsers (drag out/in); settings scrubbed of modes, skills pane deduped,
 commands copy fixed

---
 backend/apps/dashboards/models.py             |  2 +
 .../src/app/pages/AgentChat/AgentChat.tsx     |  6 ++-
 frontend/src/app/pages/Commands/Commands.tsx  |  4 +-
 .../Dashboard/cards/DashboardViewCard.tsx     | 48 +++++++++++++++++--
 .../sections/general/GeneralAgentDefaults.tsx | 23 +--------
 .../src/app/pages/Skills/SkillBuilderChat.tsx | 26 +---------
 frontend/src/app/pages/Skills/Skills.tsx      |  4 +-
 .../src/shared/state/dashboardLayoutSlice.ts  |  9 ++++
 8 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/backend/apps/dashboards/models.py b/backend/apps/dashboards/models.py
index 9371f12f..5577b983 100644
--- a/backend/apps/dashboards/models.py
+++ b/backend/apps/dashboards/models.py
@@ -20,6 +20,8 @@ class ViewCardPosition(BaseModel):
     y: float = 0
     width: float = 480
     height: float = 360
+    # Chat session this app preview lives inside (renders over the chat's dock slot); None = free card.
+    docked_to: Optional[str] = None
 
 
 class BrowserTab(BaseModel):
diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index a4168b84..b12c2d49 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -257,8 +257,10 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
   };
   const { id: routeId } = useParams<{ id: string }>();
   const id = sessionIdProp || routeId;
-  // True while a spawned browser calls this chat home; gates the dock slot the real card overlays.
-  const hasDockedBrowser = useAppSelector((st) => Object.values(st.dashboardLayout.browserCards).some((bc) => bc.docked_to === (sessionIdProp || routeId)));
+  // True while a spawned surface (browser or built app) calls this chat home; gates the dock slot the real card overlays.
+  const hasDockedBrowser = useAppSelector((st) =>
+    Object.values(st.dashboardLayout.browserCards).some((bc) => bc.docked_to === (sessionIdProp || routeId)) ||
+    Object.values(st.dashboardLayout.viewCards).some((vc) => vc.docked_to === (sessionIdProp || routeId)));
   // A card linked as a workflow sidecar (Test Agent, or a watched run) swaps its composer for a Force Stop button: continuing the chat is meaningless, but killing the run is the common need. Once a Test Agent finishes, the button flips to a green "close" (see workflow_test_state + ForceStopAgentBar).
   const linkedSidecar = useAppSelector((s) => {
     const found = Object.values(s.workflows.openCards).find(
diff --git a/frontend/src/app/pages/Commands/Commands.tsx b/frontend/src/app/pages/Commands/Commands.tsx
index 6d789c0f..aa697e56 100644
--- a/frontend/src/app/pages/Commands/Commands.tsx
+++ b/frontend/src/app/pages/Commands/Commands.tsx
@@ -193,7 +193,7 @@ export const CommandsContent: React.FC = () => {
           <SectionHeader
             icon={<TerminalIcon sx={{ fontSize: 22 }} />}
             title="Slash Commands"
-            subtitle="Type / in chat to invoke skills and modes"
+            subtitle="Type / in chat to invoke skills"
             count={slashCommands.length}
             c={c}
           />
@@ -211,7 +211,7 @@ export const CommandsContent: React.FC = () => {
             >
               <TerminalIcon sx={{ fontSize: 36, opacity: 0.3 }} />
               <Typography sx={{ fontSize: '0.875rem' }}>
-                No slash commands yet. Create skills or modes to see them here.
+                No slash commands yet. Create skills to see them here.
               </Typography>
             </Box>
           ) : (
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 55acf3ce..e00306f7 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -15,7 +15,7 @@ import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
 import AddIcon from '@mui/icons-material/Add';
 import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
 import { Output, SERVE_BASE } from '@/shared/state/outputsSlice';
-import { setViewCardPosition, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard, activateViewCardPreview } from '@/shared/state/dashboardLayoutSlice';
+import { setViewCardPosition, setViewDocked, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard, activateViewCardPreview } from '@/shared/state/dashboardLayoutSlice';
 import { removeViewCardCleanly } from '@/shared/viewTeardown';
 import WindowControls from './WindowControls';
 import { openCardContextMenu } from '../desktop/CardContextMenu';
@@ -169,6 +169,33 @@ const DashboardViewCard: React.FC<Props> = ({
   const tiledStyle = useTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom, getCanvasState, cardKey);
   const isFullscreen = tileZone === 'fullscreen';
 
+  // ---- In-chat dock (mirrors BrowserCard): while docked to an expanded chat, overlay its slot rect.
+  const dockedTo = useAppSelector((state) => state.dashboardLayout.viewCards[cardKey]?.docked_to ?? null);
+  const dockParentCard = useAppSelector((state) => (dockedTo ? state.dashboardLayout.cards[dockedTo] ?? null : null));
+  const dockParentExpanded = useAppSelector((state) => (dockedTo ? state.agents.expandedSessionIds.includes(dockedTo) : false));
+  const [dockRect, setDockRect] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
+  const dockRootRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!dockedTo || !dockParentCard || !dockParentExpanded) { setDockRect(null); return undefined; }
+    const measure = (): void => {
+      const slot = document.querySelector(`[data-browser-slot="${dockedTo}"]`);
+      const layer = dockRootRef.current?.parentElement;
+      if (!slot || !layer) { setDockRect(null); return; }
+      const z = getCanvasState().zoom || 1;
+      const lr = layer.getBoundingClientRect();
+      const sr = slot.getBoundingClientRect();
+      setDockRect({ x: (sr.left - lr.left) / z, y: (sr.top - lr.top) / z, w: sr.width / z, h: sr.height / z });
+    };
+    measure();
+    const slot = document.querySelector(`[data-browser-slot="${dockedTo}"]`);
+    const ro = new ResizeObserver(measure);
+    if (slot) ro.observe(slot);
+    if (slot?.parentElement) ro.observe(slot.parentElement);
+    window.addEventListener('resize', measure);
+    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
+  }, [dockedTo, dockParentExpanded, dockParentCard?.x, dockParentCard?.y, dockParentCard?.width, dockParentCard?.height, getCanvasState, dockParentCard]);
+  const dockParentZ = dockParentCard?.zOrder ?? 0;
+
   // Keep the live preview mounted only when the user can actually see/use this app card. Always live
   // when it's being interacted with, driven by an agent, tiled, or selected; otherwise gated on being
   // on-screen at a readable size. A suspended card shows its last frame (or a calm placeholder).
@@ -327,7 +354,7 @@ const DashboardViewCard: React.FC<Props> = ({
     e.preventDefault();
     e.stopPropagation();
     const cs = getCanvasState();
-    dragState.current = { startX: e.clientX, startY: e.clientY, origX: cardX, origY: cardY, startPanX: cs.panX, startPanY: cs.panY };
+    dragState.current = { startX: e.clientX, startY: e.clientY, origX: dockRect?.x ?? cardX, origY: dockRect?.y ?? cardY, startPanX: cs.panX, startPanY: cs.panY };
     lastPointerRef.current = { clientX: e.clientX, clientY: e.clientY };
     didDrag.current = false;
     setIsDragging(true);
@@ -387,6 +414,16 @@ const DashboardViewCard: React.FC<Props> = ({
         finalX = Math.round(finalX / 24) * 24;
         finalY = Math.round(finalY / 24) * 24;
       }
+      const { clientX: hx, clientY: hy } = lastPointerRef.current;
+      const under = document.elementsFromPoint(hx, hy);
+      const slotHit = under.map((el) => (el as HTMLElement).closest?.('[data-browser-slot]') as HTMLElement | null).find(Boolean);
+      const chatHit = under.map((el) => (el as HTMLElement).closest?.('[data-select-type="agent-card"]') as HTMLElement | null).find(Boolean);
+      const dockTarget = slotHit?.getAttribute('data-browser-slot') || chatHit?.getAttribute('data-select-id') || null;
+      if (dockTarget) {
+        dispatch(setViewDocked({ cardKey, dockedTo: dockTarget }));
+      } else if (dockedTo) {
+        dispatch(setViewDocked({ cardKey, dockedTo: null }));
+      }
       dispatch(setViewCardPosition({
         outputId: cardKey,
         x: finalX,
@@ -400,7 +437,7 @@ const DashboardViewCard: React.FC<Props> = ({
     didDrag.current = false;
     setLocalDragPos(null);
     setIsDragging(false);
-  }, [dispatch, cardKey, onDragEnd, getCanvasState]);
+  }, [dispatch, cardKey, onDragEnd, getCanvasState, dockedTo]);
 
   const handleDragPointerUp = useCallback((e: React.PointerEvent) => {
     if (!dragState.current) return;
@@ -534,8 +571,11 @@ const DashboardViewCard: React.FC<Props> = ({
   const dragTx = dragging ? displayX - cardX : 0;
   const dragTy = dragging ? displayY - cardY : 0;
 
+  const dockActive = !!dockRect && !dragging && !localResize && !tiledStyle && !isMinimized;
+
   return (
     <Box
+      ref={dockRootRef}
       data-select-type="view-card"
       data-select-id={cardKey}
       onContextMenu={(e: React.MouseEvent) => openCardContextMenu(e, {
@@ -561,7 +601,7 @@ const DashboardViewCard: React.FC<Props> = ({
         // contain + willChange: own compositor layer so paint stays scoped (see AgentCard for full rationale).
         contain: 'layout style',
         willChange: 'transform',
-        left: tiledStyle ? tiledStyle.left : (dragging ? cardX : displayX),
+        left: tiledStyle ? tiledStyle.left : dockActive ? dockRect!.x : (dragging ? cardX : displayX),
         top: tiledStyle ? tiledStyle.top : (dragging ? cardY : displayY),
         width: tiledStyle ? tiledStyle.width : (isMinimized ? 220 : displayW),
         height: tiledStyle ? tiledStyle.height : (isMinimized ? 44 : displayH),
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
index 8ad13b64..bf463040 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
@@ -58,7 +58,7 @@ const GeneralAgentDefaults: React.FC<{
           )}
         </Box>
         <Typography sx={{ ...descSx, mb: 1.5 }}>
-          Prepended to every agent session before mode-specific instructions. Modes can override with their own.
+          Prepended to every agent session.
         </Typography>
         <TextField
           value={form.default_system_prompt ?? DEFAULT_SYSTEM_PROMPT}
@@ -82,7 +82,7 @@ const GeneralAgentDefaults: React.FC<{
       <Box sx={rowSx} {...settingSelectAttrs('default_folder', 'Working directory', 'Agent Defaults', 'Default folder agents start in.')}>
         <Typography sx={labelSx}>Working directory</Typography>
         <Typography sx={{ ...descSx, mb: 1.5 }}>
-          Default folder agents start in. Modes can override per-mode.
+          Default folder agents start in.
         </Typography>
         <Box sx={{ display: 'flex', gap: 1 }}>
           <TextField
@@ -199,25 +199,6 @@ const GeneralAgentDefaults: React.FC<{
         </FormControl>
       </Box>
 
-      <Box sx={inlineRowSx} {...settingSelectAttrs('default_mode', 'Mode', 'Agent Defaults', 'Default interaction mode for new sessions.')}>
-        <Box sx={{ mr: 3 }}>
-          <Typography sx={labelSx}>Mode</Typography>
-          <Typography sx={descSx}>Default interaction mode for new sessions.</Typography>
-        </Box>
-        <FormControl size="small" sx={{ minWidth: 170 }}>
-          <Select
-            value={form.default_mode}
-            onChange={(e) => setForm({ ...form, default_mode: e.target.value })}
-            sx={{ fontSize: '0.875rem' }}
-            MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
-          >
-            {modesList.map((m) => (
-              <MenuItem key={m.id} value={m.id}>{m.name}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </Box>
-
       <Box sx={inlineRowSx} {...settingSelectAttrs('default_thinking_level', 'Thinking', 'Agent Defaults', 'Default thinking level for reasoning-capable models.')}>
         <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Thinking</Typography>
diff --git a/frontend/src/app/pages/Skills/SkillBuilderChat.tsx b/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
index ff5599c9..ffb702cb 100644
--- a/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
+++ b/frontend/src/app/pages/Skills/SkillBuilderChat.tsx
@@ -4,7 +4,6 @@ import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
-import Fab from '@mui/material/Fab';
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
 import CloseIcon from '@mui/icons-material/Close';
 import MinimizeIcon from '@mui/icons-material/Remove';
@@ -255,30 +254,7 @@ const SkillBuilderChat: React.FC<SkillBuilderChatProps> = ({ onSkillPreview, onS
     draftCreated.current = true;
   };
 
-  if (!expanded) {
-    return (
-      <Tooltip title="Build skill with AI" placement="left">
-        <Fab
-          onClick={() => setExpanded(true)}
-          data-onboarding="skill-builder-fab"
-          sx={{
-            position: 'absolute',
-            bottom: 24,
-            right: 24,
-            bgcolor: c.accent.primary,
-            color: '#fff',
-            '&:hover': { bgcolor: c.accent.pressed },
-            zIndex: 10,
-            width: 52,
-            height: 52,
-            boxShadow: c.shadow.lg,
-          }}
-        >
-          <AutoFixHighIcon />
-        </Fab>
-      </Tooltip>
-    );
-  }
+  if (!expanded) return null;
 
   return (
     <Box
diff --git a/frontend/src/app/pages/Skills/Skills.tsx b/frontend/src/app/pages/Skills/Skills.tsx
index 15758616..7523f880 100644
--- a/frontend/src/app/pages/Skills/Skills.tsx
+++ b/frontend/src/app/pages/Skills/Skills.tsx
@@ -347,8 +347,8 @@ const Skills: React.FC = () => {
           bgcolor: c.bg.secondary,
         }}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 2, pt: 2, pb: 1 }}>
-          <Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.text.primary }}>Skills</Typography>
+        {/* The Settings pane header already says Skills; this row is just the action strip. */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', px: 2, pt: 1.5, pb: 0.5 }}>
           <Box sx={{ display: 'flex', gap: 0.25 }}>
             <Tooltip title="Import .swarm">
               <IconButton
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index 43ff5c8c..fb852136 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -52,6 +52,8 @@ export interface ViewCardPosition {
   height: number;
   zOrder: number;
   parent_session_id?: string | null;
+  /** Chat session this app preview lives inside (renders over the chat's dock slot); null/absent = free card. */
+  docked_to?: string | null;
   // Reveal-born apps start as a light "built for you, click to open" card so the onboarding curtain
   // lifts INSTANTLY instead of booting a live Vite preview in-frame. Cleared on first click -> boots.
   preview_deferred?: boolean;
@@ -849,6 +851,8 @@ const dashboardLayoutSlice = createSlice({
         height: h,
         zOrder: state.nextZOrder++,
         parent_session_id: parentSessionId || null,
+        // An agent-built app defaults to living INSIDE its chat, same as spawned browsers.
+        docked_to: parentSessionId || null,
         preview_deferred: previewDeferred || undefined,
       };
       state.pendingFocusViewCardId = cardKey;
@@ -932,6 +936,10 @@ const dashboardLayoutSlice = createSlice({
       if (state.viewCards[action.payload]) state.pendingFocusViewCardId = action.payload;
     },
 
+    setViewDocked(state, action: PayloadAction<{ cardKey: string; dockedTo: string | null }>) {
+      const vc = state.viewCards[action.payload.cardKey];
+      if (vc) vc.docked_to = action.payload.dockedTo;
+    },
     setBrowserDocked(state, action: PayloadAction<{ browserId: string; dockedTo: string | null }>) {
       const bc = state.browserCards[action.payload.browserId];
       if (bc) bc.docked_to = action.payload.dockedTo;
@@ -1819,6 +1827,7 @@ export const {
   addBrowserCard,
   addBrowserCardFromBackend,
   setBrowserDocked,
+  setViewDocked,
   setBrowserCardPosition,
   setBrowserCardSize,
   removeBrowserCard,

From ed9085eae18066741e6bea7d441e08f8d7523b18 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 14:12:26 -0700
Subject: [PATCH 222/248] [eric] dock: one surface per chat (new dock releases
 old), collapse parks the docked browser behind the pill, slot scales with the
 chat, dead tether gone, dock tiles never letters, dictation copy points at
 the combo macOS can't steal

---
 .../src/app/pages/AgentChat/AgentChat.tsx     |  2 +-
 .../app/pages/Dashboard/cards/AgentCard.tsx   |  4 ++--
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 11 +++++----
 .../pages/Dashboard/desktop/dockEntries.tsx   |  9 +++----
 .../Dashboard/geometry/dashboardTethers.ts    |  2 ++
 .../sections/general/GeneralInterface.tsx     |  2 +-
 .../src/shared/state/dashboardLayoutSlice.ts  | 24 ++++++++++++++++---
 7 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index b12c2d49..a600a792 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -2407,7 +2407,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                   data-browser-slot={id}
                   sx={{
                     flexShrink: 0,
-                    height: 320,
+                    height: 'clamp(240px, 42%, 560px)',
                     mx: 1.5,
                     mb: 1,
                     borderRadius: '10px',
diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 755961f7..467b92fe 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -710,10 +710,10 @@ const AgentCard: React.FC<Props> = ({
     if ((session.messages || []).length === 0) dispatch(fetchSession(session.id));
   }, [pillMode, session.messages, session.id, dispatch]);
 
-  // f7's collapsed state: a session that spawned a browser shows that window under the pill.
+  // f7's collapsed state: a session's browser (spawned by it or docked into it) shows under the pill.
   const spawnedBrowserId = useAppSelector((s) => {
     for (const bc of Object.values(s.dashboardLayout.browserCards)) {
-      if (bc.spawned_by === session.id) return bc.browser_id;
+      if (bc.spawned_by === session.id || bc.docked_to === session.id) return bc.browser_id;
     }
     return null;
   });
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 6b670bea..6155b559 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -973,6 +973,9 @@ const BrowserCard: React.FC<Props> = ({
             : c.shadow.md;
 
   const dockActive = !!dockRect && !dragging && !localResize && !tiledStyle && !keepAliveHidden && !isMinimized;
+  // Chat collapsed: its docked browser parks off-screen and lives on as the pill's live shot,
+  // instead of teleporting back to wherever it sat before docking.
+  const dockParked = !!dockedTo && !!dockParentCard && !dockParentExpanded && !dragging && !tiledStyle && !isMinimized && !keepAliveHidden;
 
   return (
     <Box
@@ -982,7 +985,7 @@ const BrowserCard: React.FC<Props> = ({
       data-select-id={browserId}
       data-select-meta={JSON.stringify({ name: activeTitle || 'Browser', url: activeUrl })}
       // Marks a kept-alive card parked off-screen (it belongs to another dashboard); fit-to-view must skip it or it pans the canvas to chase it and the card bleeds onto the dashboard you're viewing.
-      data-keepalive-hidden={keepAliveHidden || isMinimized ? '1' : undefined}
+      data-keepalive-hidden={keepAliveHidden || isMinimized || dockParked ? '1' : undefined}
       onContextMenu={(e: React.MouseEvent) => openCardContextMenu(e, {
         items: [
           { label: 'New Tab', onClick: () => dispatch(addBrowserTab({ browserId, url: browserHomepage })) },
@@ -1011,13 +1014,13 @@ const BrowserCard: React.FC<Props> = ({
       sx={{
         position: 'absolute',
         // Kept-alive card from another dashboard: parked far off-screen so its webview surface can't bleed onto the dashboard you're viewing; click-through, webContents stays mounted.
-        pointerEvents: keepAliveHidden || isMinimized ? 'none' : undefined,
+        pointerEvents: keepAliveHidden || isMinimized || dockParked ? 'none' : undefined,
         // contain: webview repaints don't shake neighbor cards.
         contain: 'layout style',
         // Own compositor layer so hover/paint invalidations stay contained to this card. See AgentCard for full rationale.
         willChange: 'transform',
-        left: keepAliveHidden || isMinimized ? -100000 : (tiledStyle ? tiledStyle.left : dockActive ? dockRect!.x : (dragging ? cardX : displayX)),
-        top: tiledStyle && !(keepAliveHidden || isMinimized) ? tiledStyle.top : dockActive ? dockRect!.y : (dragging ? cardY : displayY),
+        left: keepAliveHidden || isMinimized || dockParked ? -100000 : (tiledStyle ? tiledStyle.left : dockActive ? dockRect!.x : (dragging ? cardX : displayX)),
+        top: tiledStyle && !(keepAliveHidden || isMinimized || dockParked) ? tiledStyle.top : dockActive ? dockRect!.y : (dragging ? cardY : displayY),
         transform: tiledStyle ? tiledStyle.transform : (dragging ? `translate3d(${dragTx}px, ${dragTy}px, 0)` : undefined),
         transformOrigin: tiledStyle ? tiledStyle.transformOrigin : undefined,
         width: tiledStyle ? tiledStyle.width : dockActive ? dockRect!.w : displayW,
diff --git a/frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx b/frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx
index e0823568..5a923eb1 100644
--- a/frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/dockEntries.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Typography from '@mui/material/Typography';
 import LanguageIcon from '@mui/icons-material/Language';
+import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import { MessageCircle } from 'lucide-react';
@@ -96,11 +96,8 @@ export function buildDockEntries({ sessions, cards, viewCards, browserCards, not
       label: appName,
       rect: vc,
       tileBg: 'linear-gradient(135deg, #ef9552, #d96a2b)',
-      icon: (
-        <Typography sx={{ fontSize: 14, fontWeight: 700, color: '#fff', lineHeight: 1 }}>
-          {appName.charAt(0).toUpperCase()}
-        </Typography>
-      ),
+      // Never letters in the dock: a real symbol reads as an app, a glyph initial reads as a bug.
+      icon: <GridViewRoundedIcon sx={{ fontSize: 16, color: '#fff' }} />,
       thumbnail: output?.thumbnail,
     });
   }
diff --git a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
index ef8f6640..b9a9bc31 100644
--- a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
+++ b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
@@ -261,6 +261,8 @@ export function useTethers({
     // An "app:<output_id>" glow key targets a VIEW card (AppAgent driving an app); everything else is a browser card.
     const glowTarget = (id: string) => (id.startsWith('app:') ? viewCards[id.slice(4)] : browserCards[id]);
     for (const [browserId, { sourceId, fading, label }] of Object.entries(glowingBrowserCards)) {
+      // A docked browser renders INSIDE its chat; an arrow from the chat to it points at nothing.
+      if (browserCards[browserId]?.docked_to) continue;
       const t = cardTether(
         glowTarget(browserId),
         browserId,
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 47757b29..b0d9cb22 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -72,7 +72,7 @@ const GeneralInterface: React.FC<{
       <Box sx={inlineRowSx} {...settingSelectAttrs('voice_hold_to_talk', 'Dictation', 'Interface', 'Hold to talk, or tap to start and stop.')}>
         <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Dictation</Typography>
-          <Typography sx={descSx}>How the mic button and the mic key (F5) work.</Typography>
+          <Typography sx={descSx}>{`How the mic button and the dictation shortcut (${/Mac/.test(navigator.platform) ? '\u2318\u21e7D' : 'Ctrl+Shift+D'}) work.`}</Typography>
         </Box>
         <ToggleButtonGroup
           value={form.voice_hold_to_talk ?? true}
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index fb852136..1320a97f 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -571,6 +571,17 @@ function addMissingCards<T extends { x: number; y: number; width: number; height
   }
 }
 
+// One docked surface per chat: the slot is a single rect, so docking a new browser/app releases
+// whatever was previously docked there (it falls back to its stored free position).
+function clearOtherDocks(state: { browserCards: Record<string, BrowserCardPosition>; viewCards: Record<string, ViewCardPosition> }, sessionId: string): void {
+  for (const bc of Object.values(state.browserCards)) {
+    if (bc.docked_to === sessionId) bc.docked_to = null;
+  }
+  for (const vc of Object.values(state.viewCards)) {
+    if (vc.docked_to === sessionId) vc.docked_to = null;
+  }
+}
+
 const dashboardLayoutSlice = createSlice({
   name: 'dashboardLayout',
   initialState,
@@ -852,7 +863,7 @@ const dashboardLayoutSlice = createSlice({
         zOrder: state.nextZOrder++,
         parent_session_id: parentSessionId || null,
         // An agent-built app defaults to living INSIDE its chat, same as spawned browsers.
-        docked_to: parentSessionId || null,
+        docked_to: (parentSessionId && (clearOtherDocks(state, parentSessionId), parentSessionId)) || null,
         preview_deferred: previewDeferred || undefined,
       };
       state.pendingFocusViewCardId = cardKey;
@@ -938,11 +949,15 @@ const dashboardLayoutSlice = createSlice({
 
     setViewDocked(state, action: PayloadAction<{ cardKey: string; dockedTo: string | null }>) {
       const vc = state.viewCards[action.payload.cardKey];
-      if (vc) vc.docked_to = action.payload.dockedTo;
+      if (!vc) return;
+      if (action.payload.dockedTo) clearOtherDocks(state, action.payload.dockedTo);
+      vc.docked_to = action.payload.dockedTo;
     },
     setBrowserDocked(state, action: PayloadAction<{ browserId: string; dockedTo: string | null }>) {
       const bc = state.browserCards[action.payload.browserId];
-      if (bc) bc.docked_to = action.payload.dockedTo;
+      if (!bc) return;
+      if (action.payload.dockedTo) clearOtherDocks(state, action.payload.dockedTo);
+      bc.docked_to = action.payload.dockedTo;
     },
     addBrowserCardFromBackend(state, action: PayloadAction<BrowserCardPosition>) {
       const card = action.payload;
@@ -1801,6 +1816,9 @@ const dashboardLayoutSlice = createSlice({
           for (const bc of Object.values(state.browserCards)) {
             if (bc.spawned_by !== session.id) continue;
             const pos = placeBrowserBesideChat(state, parentCard, session.id, bc.width, bc.height, bc.browser_id);
+            // Default home is inside the chat, same as the non-racing spawn path.
+            clearOtherDocks(state, session.id);
+            bc.docked_to = session.id;
             bc.x = pos.x;
             bc.y = pos.y;
             state.glowingBrowserCards[bc.browser_id] = { sourceId: session.id, fading: false, label: 'Use Browser' };

From f89c80faf70b2b4c1d525f4cfbad69005a5612b3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 14:17:10 -0700
Subject: [PATCH 223/248] [eric] voice: aurora speaks in the accent's
 complement (three-hue gradient, volume-morphing lobes with smoothing)

---
 frontend/src/shared/voice/VoiceOverlay.tsx | 97 +++++++++++++++++-----
 1 file changed, 76 insertions(+), 21 deletions(-)

diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index 2fef3f29..7a6041d4 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -8,38 +8,93 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { useThemeAccent } from '@/shared/styles/ThemeContext';
 import { useVoice } from './voiceContext';
 
-// WhisperFlow-style presence: while the mic is hot, an accent-tinted aurora breathes up from the
-// bottom edge, its height and glow riding the live mic level. Imperative rAF writes only (opacity +
-// transform on a fixed layer), so 60Hz voice never re-renders React.
+// WhisperFlow-style presence: while the mic is hot, an aurora breathes up from the bottom edge in
+// the COMPLEMENT of the user's accent (opposite hue = always visible against their canvas, never
+// camouflaged by it), as a three-hue gradient whose lobes morph with the live mic level. Imperative
+// rAF writes only (opacity + transform), so 60Hz voice never re-renders React.
+
+function hexToHue(hex: string): { h: number; s: number; l: number } {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return { h: 250, s: 70, l: 60 };
+  const n = parseInt(m[1], 16);
+  const r = ((n >> 16) & 255) / 255, g = ((n >> 8) & 255) / 255, b = (n & 255) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: l * 100 };
+  const d = max - min;
+  const sat = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+  else if (max === g) h = ((b - r) / d + 2) * 60;
+  else h = ((r - g) / d + 4) * 60;
+  return { h, s: sat * 100, l: l * 100 };
+}
+
+const LOBES = [
+  { left: '14%', width: '58vw', drift: 0.9, phase: 0.0 },
+  { left: '50%', width: '74vw', drift: 0.7, phase: 2.1 },
+  { left: '86%', width: '52vw', drift: 1.15, phase: 4.2 },
+];
+
 const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({ volumeRef }) => {
   const { accent } = useThemeAccent();
-  const ref = useRef<HTMLDivElement | null>(null);
+  const lobeRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const smooth = useRef<number[]>([0, 0, 0]);
   useEffect(() => {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     let raf = 0;
     const tick = (): void => {
-      const el = ref.current;
-      if (el) {
-        const v = volumeRef.current;
-        el.style.opacity = String(0.35 + v * 0.65);
-        el.style.transform = `scaleY(${0.55 + v * 1.1})`;
-      }
+      const v = Math.min(1, volumeRef.current);
+      const t = performance.now() / 1000;
+      LOBES.forEach((lobe, i) => {
+        const el = lobeRefs.current[i];
+        if (!el) return;
+        // Lerp toward the live level so the shape glides instead of jittering; a slow sinusoid keeps
+        // it undulating at steady volume, and volume swells both the wave and the lobe height.
+        smooth.current[i] += (v - smooth.current[i]) * 0.16;
+        const sv = smooth.current[i];
+        const wave = reduced ? 0 : Math.sin(t * lobe.drift + lobe.phase) * (0.08 + sv * 0.1);
+        el.style.opacity = String(0.3 + sv * 0.6);
+        el.style.transform = `translateX(-50%) scale(${1 + wave * 0.6}, ${0.45 + sv * 1.25 + wave})`;
+      });
       raf = requestAnimationFrame(tick);
     };
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
   }, [volumeRef]);
-  const a = accent || '#6b62f0';
+
+  // Opposite side of the wheel from the chosen accent, with two flanking hues for a real gradient.
+  const { h } = hexToHue(accent || '#6b62f0');
+  const c0 = `hsl(${(h + 156) % 360} 92% 62%)`;
+  const c1 = `hsl(${(h + 180) % 360} 94% 58%)`;
+  const c2 = `hsl(${(h + 204) % 360} 92% 64%)`;
   return (
-    <div
-      ref={ref}
-      style={{
-        position: 'fixed', left: 0, right: 0, bottom: 0, height: 130, zIndex: 2147482999,
-        pointerEvents: 'none', transformOrigin: 'bottom',
-        background: `linear-gradient(to top, ${a}55 0%, ${a}2e 35%, transparent 100%)`,
-        filter: 'blur(14px)',
-        transition: 'opacity 120ms linear',
-      }}
-    />
+    <div style={{ position: 'fixed', left: 0, right: 0, bottom: 0, height: 170, zIndex: 2147482999, pointerEvents: 'none', overflow: 'visible' }}>
+      {LOBES.map((lobe, i) => {
+        const col = [c0, c1, c2][i];
+        return (
+          <div
+            key={i}
+            ref={(el) => { lobeRefs.current[i] = el; }}
+            style={{
+              position: 'absolute', bottom: -40, left: lobe.left, width: lobe.width, height: 190,
+              transform: 'translateX(-50%) scale(1, 0.45)', transformOrigin: 'bottom center',
+              background: `radial-gradient(ellipse at 50% 100%, ${col} 0%, ${col}00 70%)`,
+              filter: 'blur(26px)', opacity: 0.3, willChange: 'transform, opacity',
+            }}
+          />
+        );
+      })}
+      <div
+        style={{
+          position: 'absolute', left: 0, right: 0, bottom: 0, height: 90,
+          background: `linear-gradient(to right, ${c0}44, ${c1}55, ${c2}44)`,
+          maskImage: 'linear-gradient(to top, black 0%, transparent 100%)',
+          WebkitMaskImage: 'linear-gradient(to top, black 0%, transparent 100%)',
+          filter: 'blur(10px)',
+        }}
+      />
+    </div>
   );
 };
 

From 7112a8786e95ad301e9488c65dfaff79499e8eca Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 14:24:58 -0700
Subject: [PATCH 224/248] [eric] voice: WhisperFlow top waveform tab,
 synthesized start/stop chimes, polish capped at 900ms; settings: privacy +
 advanced unified onto the chip grammar

---
 .../sections/general/DataPrivacySection.tsx   | 16 ++---
 .../sections/general/GeneralAdvanced.tsx      | 31 +++------
 frontend/src/shared/voice/VoiceOverlay.tsx    | 68 ++++++++++++++++++-
 .../src/shared/voice/useVoiceDictation.ts     | 10 ++-
 frontend/src/shared/voice/voiceCues.ts        | 46 +++++++++++++
 5 files changed, 140 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/shared/voice/voiceCues.ts

diff --git a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
index ea416943..3a1bbfb3 100644
--- a/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
@@ -13,7 +13,7 @@ const ERASE_WORD = 'ERASE';
 // The iOS Reset menu, two actions only: "Reset All Settings" (preferences back to defaults, your stuff + sign-in stay) and "Erase All Content and Settings" (factory wipe + relaunch). Flat rows, not a boxed "danger zone": red lives only on the destructive label, and the real friction is the typed-confirm in the dialog.
 const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) => {
   const c = useClaudeTokens();
-  const { sectionSx, labelSx, descSx } = styles;
+  const { labelSx, descSx, inlineRowSx, inlineRowLastSx } = styles;
 
   const [resetOpen, setResetOpen] = useState(false);
   const [eraseOpen, setEraseOpen] = useState(false);
@@ -108,29 +108,29 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
     borderColor: c.status.error,
     '&:hover': { color: c.status.error, borderColor: c.status.error, bgcolor: c.status.errorBg },
   };
-  const rowSx = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 3, py: 2 };
+
 
   return (
     <Box>
 
-      <Box sx={{ ...rowSx, borderBottom: `1px solid ${c.border.subtle}` }}>
-        <Box>
+      <Box sx={inlineRowSx}>
+        <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Reset all settings</Typography>
           <Typography sx={descSx}>Puts your preferences back to defaults. Your apps, chats, skills, and sign-in stay.</Typography>
         </Box>
         <Button variant="outlined" size="small" onClick={() => { setErr(null); setResetOpen(true); }} sx={rowBtnSx}>Reset</Button>
       </Box>
 
-      <Box sx={{ ...rowSx, borderBottom: `1px solid ${c.border.subtle}` }}>
-        <Box>
+      <Box sx={inlineRowSx}>
+        <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Clear browsing data</Typography>
           <Typography sx={descSx}>Signs you out of sites opened in browser cards and clears their cookies, cache, and local storage. Your chats, apps, and settings stay.</Typography>
         </Box>
         <Button variant="outlined" size="small" onClick={() => { setErr(null); setClearedOk(false); setClearOpen(true); }} sx={rowBtnSx}>Clear</Button>
       </Box>
 
-      <Box sx={rowSx}>
-        <Box>
+      <Box sx={inlineRowLastSx}>
+        <Box sx={{ mr: 3 }}>
           <Typography sx={{ ...labelSx, color: c.status.error }}>Erase all content and settings</Typography>
           <Typography sx={descSx}>Removes every chat, app, skill, and setting and restarts OpenSwarm fresh. This can't be undone.</Typography>
         </Box>
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
index 268aafe7..5140f63a 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
@@ -64,34 +64,23 @@ const GeneralAdvanced: React.FC<{
 
       <Box sx={rowSx}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <Box>
-            <Typography sx={labelSx}>Version</Typography>
-            <Typography sx={{ ...descSx, fontFamily: c.font.mono }}>
-              {appVersion ?? '-'}
-            </Typography>
-          </Box>
+          <Typography sx={labelSx}>Version</Typography>
+          <Typography sx={{ ...descSx, fontFamily: c.font.mono }}>{appVersion ?? '-'}</Typography>
         </Box>
+        {buildLabel && (
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 1 }}>
+            <Typography sx={labelSx}>Build</Typography>
+            <Typography sx={{ ...descSx, fontFamily: c.font.mono }}>{buildLabel}</Typography>
+          </Box>
+        )}
       </Box>
 
-      {buildLabel && (
-        <Box sx={rowSx}>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <Box>
-              <Typography sx={labelSx}>Build</Typography>
-              <Typography sx={{ ...descSx, fontFamily: c.font.mono }}>
-                {buildLabel}
-              </Typography>
-            </Box>
-          </Box>
-        </Box>
-      )}
-
       <SoftwareUpdateRow styles={styles} />
 
       <TrustedFilePatterns />
 
-      <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <Box>
+      <Box sx={inlineRowLastSx}>
+        <Box sx={{ mr: 3 }}>
           <Typography sx={{ ...labelSx, mb: 0.25 }}>Onboarding tour</Typography>
           <Typography sx={{ ...descSx, mb: 0 }}>
             Re-run the Show me walkthrough at any time.
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index 7a6041d4..40d9d721 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -98,6 +98,67 @@ const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({
   );
 };
 
+// WhisperFlow's signature: a small capsule drops from the TOP edge while the mic is hot, carrying a
+// live waveform. Canvas bars driven straight off the mic level ring buffer, imperative rAF only.
+const BAR_COUNT = 26;
+
+const VoiceTab: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({ volumeRef }) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const history = useRef<number[]>(new Array(BAR_COUNT).fill(0.06));
+  useEffect(() => {
+    let raf = 0;
+    let frame = 0;
+    const draw = (): void => {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        const g = canvas.getContext('2d');
+        if (g) {
+          // Shift one bar every other frame so the wave scrolls readably at 60Hz input.
+          frame += 1;
+          if (frame % 2 === 0) {
+            history.current.push(Math.min(1, 0.08 + volumeRef.current * 1.6));
+            history.current.shift();
+          }
+          const w = canvas.width;
+          const h = canvas.height;
+          g.clearRect(0, 0, w, h);
+          const bw = w / BAR_COUNT;
+          for (let i = 0; i < BAR_COUNT; i++) {
+            const level = history.current[i];
+            const bh = Math.max(3, level * (h - 4));
+            const x = i * bw + bw * 0.25;
+            g.fillStyle = `rgba(255,255,255,${0.35 + level * 0.6})`;
+            const bwid = bw * 0.5;
+            const y = (h - bh) / 2;
+            g.beginPath();
+            g.roundRect(x, y, bwid, bh, bwid / 2);
+            g.fill();
+          }
+        }
+      }
+      raf = requestAnimationFrame(draw);
+    };
+    raf = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(raf);
+  }, [volumeRef]);
+  return (
+    <Box
+      sx={{
+        position: 'fixed', top: 10, left: '50%', zIndex: 2147483001, pointerEvents: 'none',
+        display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 0.75, borderRadius: 999,
+        background: 'rgba(18,12,26,0.88)',
+        backdropFilter: 'blur(18px) saturate(150%)', WebkitBackdropFilter: 'blur(18px) saturate(150%)',
+        boxShadow: '0 8px 28px rgba(0,0,0,0.4)',
+        '@keyframes vtab-in': { from: { opacity: 0, transform: 'translate(-50%, -14px)' }, to: { opacity: 1, transform: 'translate(-50%, 0)' } },
+        animation: 'vtab-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both',
+      }}
+    >
+      <MicIcon sx={{ fontSize: 14, color: 'rgba(255,255,255,0.75)' }} />
+      <canvas ref={canvasRef} width={132} height={22} style={{ display: 'block', width: 132, height: 22 }} />
+    </Box>
+  );
+};
+
 // The whole point: dictation must never look like "nothing happened." This floats a small status
 // card above the composer for every phase (listening, transcribing, downloading the model) and shows
 // the transcript + whether it was pasted or just copied. Non-interactive, auto-dismisses.
@@ -124,7 +185,12 @@ const VoiceOverlay: React.FC = () => {
   const live = state !== 'idle';
   const visible = live || (showFeedback && !!feedback);
   if (!visible) return null;
-  const aurora = state === 'recording' ? <VoiceAurora volumeRef={volumeRef} /> : null;
+  const aurora = state === 'recording' ? (
+    <>
+      <VoiceAurora volumeRef={volumeRef} />
+      <VoiceTab volumeRef={volumeRef} />
+    </>
+  ) : null;
 
   let content: React.ReactElement | null;
   if (state === 'recording') {
diff --git a/frontend/src/shared/voice/useVoiceDictation.ts b/frontend/src/shared/voice/useVoiceDictation.ts
index 6888a79a..160935df 100644
--- a/frontend/src/shared/voice/useVoiceDictation.ts
+++ b/frontend/src/shared/voice/useVoiceDictation.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { API_BASE } from '@/shared/config';
 import { encodeWav, VOICE_SAMPLE_RATE } from './encodeWav';
+import { playVoiceCue } from './voiceCues';
 import { injectAtFocus } from './injectAtFocus';
 
 export type VoiceState = 'idle' | 'recording' | 'transcribing' | 'preparing';
@@ -117,6 +118,7 @@ export function useVoiceDictation() {
       node.connect(ctx.destination);
       recRef.current = { ctx, stream, node, source, chunks };
       setState('recording');
+      playVoiceCue('start');
       // Warm the model the moment recording begins so transcription is instant on stop.
       void window.openswarm?.voiceWarmup?.();
     } catch (err) {
@@ -131,6 +133,7 @@ export function useVoiceDictation() {
   const stop = useCallback(async (): Promise<void> => {
     if (stateRef.current !== 'recording') return;
     const samples = teardown();
+    playVoiceCue('stop');
     setState('transcribing');
     try {
       if (!samples || samples.length < VOICE_SAMPLE_RATE * 0.2) { setState('idle'); return; } // < 0.2s = a misfire
@@ -139,7 +142,12 @@ export function useVoiceDictation() {
       if (res?.ok && res.text) {
         // WhisperFlow-style cleanup: punctuation + filler words via the cheap aux tier, fail-open to
         // the raw transcript on any error/timeout so dictation never breaks with the aux down.
-        const text = await polishText(res.text);
+        // Latency: short phrases don't need the aux cleanup (whisper's raw output is fine), and a
+        // slow aux must never hold the cursor hostage; 900ms is the most polish is allowed to cost.
+        const raw = res.text.trim();
+        const text = raw.split(/\s+/).length <= 6
+          ? raw
+          : await Promise.race([polishText(raw), new Promise<string>((r) => window.setTimeout(() => r(raw), 900))]);
         setLastText(text);
         // Land the text where the user's cursor is: focused field, then focused browser page, then
         // the OS paste fallback (other apps). The floating bubble is just confirmation, not the output.
diff --git a/frontend/src/shared/voice/voiceCues.ts b/frontend/src/shared/voice/voiceCues.ts
new file mode 100644
index 00000000..cbe11bac
--- /dev/null
+++ b/frontend/src/shared/voice/voiceCues.ts
@@ -0,0 +1,46 @@
+// WhisperFlow-grade start/stop chimes, synthesized in WebAudio so they ship weightless and always
+// match: a soft two-note rise on start ("I'm listening"), the mirrored fall on stop. Sine + gentle
+// lowpass + fast attack / exponential release = crisp but soothing, never a system beep.
+
+let ctx: AudioContext | null = null;
+
+function ensureCtx(): AudioContext | null {
+  try {
+    if (!ctx || ctx.state === 'closed') ctx = new AudioContext();
+    if (ctx.state === 'suspended') void ctx.resume();
+    return ctx;
+  } catch {
+    return null;
+  }
+}
+
+function blip(ac: AudioContext, freq: number, at: number, dur: number, peak: number): void {
+  const osc = ac.createOscillator();
+  const gain = ac.createGain();
+  const lp = ac.createBiquadFilter();
+  lp.type = 'lowpass';
+  lp.frequency.value = 2400;
+  osc.type = 'sine';
+  osc.frequency.setValueAtTime(freq, at);
+  gain.gain.setValueAtTime(0, at);
+  gain.gain.linearRampToValueAtTime(peak, at + 0.012);
+  gain.gain.exponentialRampToValueAtTime(0.0004, at + dur);
+  osc.connect(lp);
+  lp.connect(gain);
+  gain.connect(ac.destination);
+  osc.start(at);
+  osc.stop(at + dur + 0.02);
+}
+
+export function playVoiceCue(kind: 'start' | 'stop'): void {
+  const ac = ensureCtx();
+  if (!ac) return;
+  const t = ac.currentTime + 0.01;
+  if (kind === 'start') {
+    blip(ac, 587, t, 0.16, 0.055);
+    blip(ac, 880, t + 0.085, 0.2, 0.05);
+  } else {
+    blip(ac, 880, t, 0.14, 0.045);
+    blip(ac, 587, t + 0.075, 0.22, 0.05);
+  }
+}

From fe29551d746db0e1c0cec5f8b512e1f807625b87 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 15:01:59 -0700
Subject: [PATCH 225/248] [eric] voice: native trackpad haptics addon
 (NSHapticFeedbackManager, mouseclamp pattern) taps on dictation start/stop

---
 electron/main.js                              | 30 ++++++++++++
 electron/native/haptics/binding.gyp           | 14 ++++++
 electron/native/haptics/haptics.mm            | 48 +++++++++++++++++++
 electron/native/haptics/package.json          |  7 +++
 electron/package.json                         |  7 +++
 electron/preload.js                           |  1 +
 electron/scripts/build-haptics.sh             | 28 +++++++++++
 .../src/shared/voice/useVoiceDictation.ts     |  2 +
 scripts/build-app.sh                          |  2 +
 9 files changed, 139 insertions(+)
 create mode 100644 electron/native/haptics/binding.gyp
 create mode 100644 electron/native/haptics/haptics.mm
 create mode 100644 electron/native/haptics/package.json
 create mode 100755 electron/scripts/build-haptics.sh

diff --git a/electron/main.js b/electron/main.js
index f8921af0..9162432f 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1777,6 +1777,35 @@ function installMacMouseClamp() {
   }
 }
 
+// Trackpad haptic taps (macOS, Force Touch only): dictation start/stop feedback. Fail-open like
+// mouseclamp; a missing addon or non-mac just makes 'haptic:perform' return false.
+let hapticsAddon = null;
+function installHaptics() {
+  if (process.platform !== 'darwin') return;
+  try {
+    const nodePath = isPackaged
+      ? path.join(process.resourcesPath, 'haptics', 'haptics.node')
+      : path.join(__dirname, 'build-staging', 'haptics', process.arch, 'haptics.node');
+    if (!fs.existsSync(nodePath)) {
+      console.log('[haptics] addon not present, skipping:', nodePath);
+      return;
+    }
+    hapticsAddon = require(nodePath);
+    console.log('[haptics] addon loaded');
+  } catch (e) {
+    console.log('[haptics] load failed (continuing):', e && e.message);
+  }
+}
+ipcMain.handle('haptic:perform', (event, pattern) => {
+  try {
+    if (!hapticsAddon) return false;
+    const p = pattern === 'alignment' ? 1 : pattern === 'level' ? 2 : 0;
+    return hapticsAddon.perform(p);
+  } catch (_) {
+    return false;
+  }
+});
+
 app.whenReady().then(async () => {
   // We made it here, so any prior update swap finished. Drop a stale updating.lock
   // (the watchdog never deletes it) so a real crash later isn't silently swallowed.
@@ -1788,6 +1817,7 @@ app.whenReady().then(async () => {
 
   // Off-window mouse-release crash dodge (macOS). Safe to call before windows exist.
   installMacMouseClamp();
+  installHaptics();
 
   // Voice dictation hotkey (F5 / Cmd-Ctrl+Shift+D). Native uiohook key tap = true keyboard
   // hold-to-talk on every platform; falls back to the old press-to-toggle when the tap can't run
diff --git a/electron/native/haptics/binding.gyp b/electron/native/haptics/binding.gyp
new file mode 100644
index 00000000..6a431329
--- /dev/null
+++ b/electron/native/haptics/binding.gyp
@@ -0,0 +1,14 @@
+{
+  "targets": [
+    {
+      "target_name": "haptics",
+      "sources": ["haptics.mm"],
+      "xcode_settings": {
+        "CLANG_ENABLE_OBJC_ARC": "NO",
+        "OTHER_CFLAGS": ["-fobjc-exceptions"]
+      },
+      "libraries": ["-framework Cocoa"],
+      "conditions": [["OS!=\"mac\"", {"type": "none"}]]
+    }
+  ]
+}
diff --git a/electron/native/haptics/haptics.mm b/electron/native/haptics/haptics.mm
new file mode 100644
index 00000000..13ffe6c9
--- /dev/null
+++ b/electron/native/haptics/haptics.mm
@@ -0,0 +1,48 @@
+// Trackpad haptic taps for dictation start/stop (and any future micro-feedback), the missing half
+// of the WhisperFlow feel. NSHapticFeedbackManager only fires on Force Touch trackpads and only
+// when macOS deems the app active; both are fine, this is garnish, never load-bearing.
+//
+// Fail-open everywhere: no trackpad, no permission, wrong thread, we return false and the app
+// behaves exactly like today. macOS-only by binding.gyp condition.
+
+#include <node_api.h>
+#import <Cocoa/Cocoa.h>
+
+static napi_value Perform(napi_env env, napi_callback_info info) {
+  bool ok = false;
+  @try {
+    size_t argc = 1;
+    napi_value argv[1];
+    napi_get_cb_info(env, info, &argc, argv, NULL, NULL);
+    int32_t pattern = 0;
+    if (argc >= 1) napi_get_value_int32(env, argv[0], &pattern);
+    NSHapticFeedbackPattern p = NSHapticFeedbackPatternGeneric;
+    if (pattern == 1) p = NSHapticFeedbackPatternAlignment;
+    else if (pattern == 2) p = NSHapticFeedbackPatternLevelChange;
+    // Main-thread dispatch: AppKit feedback performers are main-thread creatures, and the IPC
+    // handler that calls us already runs there in Electron's browser process; the async hop is
+    // belt-and-suspenders for any future caller.
+    dispatch_async(dispatch_get_main_queue(), ^{
+      @try {
+        [[NSHapticFeedbackManager defaultPerformer]
+            performFeedbackPattern:p
+                   performanceTime:NSHapticFeedbackPerformanceTimeNow];
+      } @catch (NSException *e) { /* garnish only */ }
+    });
+    ok = true;
+  } @catch (NSException *e) {
+    ok = false;
+  }
+  napi_value result;
+  napi_get_boolean(env, ok, &result);
+  return result;
+}
+
+static napi_value Init(napi_env env, napi_value exports) {
+  napi_value fn;
+  napi_create_function(env, "perform", NAPI_AUTO_LENGTH, Perform, NULL, &fn);
+  napi_set_named_property(env, exports, "perform", fn);
+  return exports;
+}
+
+NAPI_MODULE(NODE_GYP_MODULE_NAME, Init)
diff --git a/electron/native/haptics/package.json b/electron/native/haptics/package.json
new file mode 100644
index 00000000..14c732ab
--- /dev/null
+++ b/electron/native/haptics/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "haptics",
+  "version": "1.0.0",
+  "private": true,
+  "description": "macOS-only native addon: Force Touch trackpad haptic taps via NSHapticFeedbackManager for dictation start/stop feedback. See haptics.mm.",
+  "gypfile": true
+}
diff --git a/electron/package.json b/electron/package.json
index 8f9408db..1790a811 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -75,6 +75,13 @@
             "**/*"
           ]
         },
+        {
+          "from": "build-staging/haptics/${arch}",
+          "to": "haptics",
+          "filter": [
+            "**/*"
+          ]
+        },
         {
           "from": "build-staging/python-env/${arch}",
           "to": "python-env",
diff --git a/electron/preload.js b/electron/preload.js
index 3613fadb..cedb54d6 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -77,6 +77,7 @@ contextBridge.exposeInMainWorld('openswarm', {
   // and request triggers the macOS Accessibility prompt when the tap is blocked on permission.
   voiceHoldCapable: () => ipcRenderer.invoke('voice:hold-capable'),
   voiceRequestHoldPermission: () => ipcRenderer.invoke('voice:request-hold-permission'),
+  haptic: (pattern) => ipcRenderer.invoke('haptic:perform', pattern),
   // Native-tap hold relay: real global key-down/key-up for the voice combo, focus-independent.
   onVoiceHold: (onDown, onUp) => {
     const down = () => onDown();
diff --git a/electron/scripts/build-haptics.sh b/electron/scripts/build-haptics.sh
new file mode 100755
index 00000000..33389992
--- /dev/null
+++ b/electron/scripts/build-haptics.sh
@@ -0,0 +1,28 @@
+#!/bin/bash
+# Compile the macOS mouse-clamp native addon for one arch and stage it where
+# electron-builder's extraResources picks it up (build-staging/haptics/<arch>).
+# See electron/native/haptics/haptics.mm for what it fixes.
+set -euo pipefail
+
+ARCH="${1:?usage: build-haptics.sh <arm64|x64>}"
+
+HERE="$(cd "$(dirname "$0")/.." && pwd)"   # electron/
+# Derive the node-gyp header target from the actually-installed electron so a version bump (e.g. 42.0.0 -> 42.3.3) is auto-tracked instead of silently building against stale headers. Strip any +wvcus suffix; node-gyp wants a plain semver.
+ELECTRON_TARGET="$(node -p "require('$HERE/node_modules/electron/package.json').version.split('+')[0]" 2>/dev/null || echo '42.3.3')"
+SRC="$HERE/native/haptics"
+OUT="$HERE/build-staging/haptics/$ARCH"
+NODE_GYP="$HERE/node_modules/.bin/node-gyp"
+[[ -x "$NODE_GYP" ]] || NODE_GYP="npx --yes node-gyp"  # transitive dep usually, npx if not
+
+echo "[haptics] building for arch=$ARCH (electron $ELECTRON_TARGET)"
+cd "$SRC"
+rm -rf build
+$NODE_GYP rebuild \
+  --target="$ELECTRON_TARGET" \
+  --arch="$ARCH" \
+  --dist-url=https://electronjs.org/headers
+
+mkdir -p "$OUT"
+cp "build/Release/haptics.node" "$OUT/haptics.node"
+echo "[haptics] staged -> $OUT/haptics.node"
+file "$OUT/haptics.node"
diff --git a/frontend/src/shared/voice/useVoiceDictation.ts b/frontend/src/shared/voice/useVoiceDictation.ts
index 160935df..23426ec2 100644
--- a/frontend/src/shared/voice/useVoiceDictation.ts
+++ b/frontend/src/shared/voice/useVoiceDictation.ts
@@ -119,6 +119,7 @@ export function useVoiceDictation() {
       recRef.current = { ctx, stream, node, source, chunks };
       setState('recording');
       playVoiceCue('start');
+      void (window.openswarm as { haptic?: (p: string) => Promise<boolean> } | undefined)?.haptic?.('generic');
       // Warm the model the moment recording begins so transcription is instant on stop.
       void window.openswarm?.voiceWarmup?.();
     } catch (err) {
@@ -134,6 +135,7 @@ export function useVoiceDictation() {
     if (stateRef.current !== 'recording') return;
     const samples = teardown();
     playVoiceCue('stop');
+    void (window.openswarm as { haptic?: (p: string) => Promise<boolean> } | undefined)?.haptic?.('alignment');
     setState('transcribing');
     try {
       if (!samples || samples.length < VOICE_SAMPLE_RATE * 0.2) { setState('idle'); return; } // < 0.2s = a misfire
diff --git a/scripts/build-app.sh b/scripts/build-app.sh
index 2cce1dc5..b39a1599 100755
--- a/scripts/build-app.sh
+++ b/scripts/build-app.sh
@@ -497,6 +497,8 @@ if [[ "$(uname)" == "Darwin" ]]; then
     echo "Building mouse-clamp native addon (arm64 + x64)..."
     bash scripts/build-mouseclamp.sh arm64
     bash scripts/build-mouseclamp.sh x64
+    bash scripts/build-haptics.sh arm64
+    bash scripts/build-haptics.sh x64
 fi
 
 # Node's default ~4 GB heap OOMs while codesign'ing the .app on dual-arch

From 8d98c8f24c1817bead8a18d3c089e53911fdf152 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 15:11:41 -0700
Subject: [PATCH 226/248] [eric] dock: slot height off percentages
 (nested-wrapper resolution pushed it out of the card), sub-agent browser
 tether also suppressed while docked

---
 frontend/src/app/pages/AgentChat/AgentChat.tsx           | 9 +++++++--
 .../src/app/pages/Dashboard/geometry/dashboardTethers.ts | 2 ++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index a600a792..87d9768a 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -2406,8 +2406,13 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
                 <Box
                   data-browser-slot={id}
                   sx={{
-                    flexShrink: 0,
-                    height: 'clamp(240px, 42%, 560px)',
+                    // Percentage heights resolve against a NESTED wrapper here, not the card, which
+                    // pushed the slot (and the docked browser riding it) clean out of the chat.
+                    // Viewport units are the only stable yardstick in this column; shrink allowed so
+                    // a short card squeezes the slot instead of overflowing.
+                    flex: '0 1 auto',
+                    height: 'min(360px, 38vh)',
+                    minHeight: 180,
                     mx: 1.5,
                     mb: 1,
                     borderRadius: '10px',
diff --git a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
index b9a9bc31..0c618e6b 100644
--- a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
+++ b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
@@ -279,6 +279,8 @@ export function useTethers({
       if (s.status !== 'running' && s.status !== 'waiting_approval') continue;
       if (!s.browser_id || !s.parent_session_id) continue;
       if (glowTethers.has(s.browser_id)) continue;
+      // Docked browsers live INSIDE the chat; an arrow to them points at nothing.
+      if (browserCards[s.browser_id]?.docked_to) continue;
       // A browser docked below the hub keeps a "Browser" pointer so the link reads at a glance; the right-docked agent/run cases stay label-free (their glow already said it on spawn).
       const parent = sessionById.get(s.parent_session_id);
       const t = cardTether(

From aeb2b3fb144811fc914c085d6a591344cf8ce557 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 15:55:40 -0700
Subject: [PATCH 227/248] [eric] dashboard: fullscreen chat docks the real
 browser (slot in full view, posEl-aware tile applier w/ live camera tracking,
 dock re-measure on slot moves, no dupe embed)

---
 .../src/app/pages/AgentChat/AgentChat.tsx     |  2 +-
 .../AgentChat/shell/InlineSurfaceEmbeds.tsx   |  4 +-
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 16 +++++-
 .../Dashboard/cards/DashboardViewCard.tsx     | 16 +++++-
 .../app/pages/Dashboard/cards/tileZones.ts    | 56 ++++++++++++++++---
 5 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/pages/AgentChat/AgentChat.tsx b/frontend/src/app/pages/AgentChat/AgentChat.tsx
index 87d9768a..229b10d5 100644
--- a/frontend/src/app/pages/AgentChat/AgentChat.tsx
+++ b/frontend/src/app/pages/AgentChat/AgentChat.tsx
@@ -2402,7 +2402,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
               {/* Dock slot: a browser this agent spawned lives HERE by default (the real card overlays
                   this rect geometrically, so the webview never remounts). Pinned between transcript
                   and composer, never inside the scroller, so it can't be clipped by chat scroll. */}
-              {hasDockedBrowser && !fullscreenChat && (
+              {hasDockedBrowser && (
                 <Box
                   data-browser-slot={id}
                   sx={{
diff --git a/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx b/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
index ac4547c2..425099b7 100644
--- a/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
+++ b/frontend/src/app/pages/AgentChat/shell/InlineSurfaceEmbeds.tsx
@@ -108,8 +108,10 @@ const InlineSurfaceEmbeds: React.FC<{ c: ClaudeTokens; sessionId: string; fullsc
         .filter((s) => s.parent_session_id === sessionId && s.browser_id)
         .map((s) => s.browser_id as string),
     );
+    // A docked browser renders its REAL card inside the chat (even in full size view), so the
+    // snapshot embed would be a stale duplicate right next to the live thing.
     return Object.values(browserCards).filter(
-      (bc) => bc.spawned_by === sessionId || childBrowserIds.has(bc.browser_id),
+      (bc) => !bc.docked_to && (bc.spawned_by === sessionId || childBrowserIds.has(bc.browser_id)),
     );
   }, [browserCards, sessions, sessionId]);
   const linkedApps = useMemo(
diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 6155b559..3aae94fd 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -247,6 +247,7 @@ const BrowserCard: React.FC<Props> = ({
   const dockedTo = useAppSelector((state) => state.dashboardLayout.browserCards[browserId]?.docked_to ?? null);
   const dockParentCard = useAppSelector((state) => (dockedTo ? state.dashboardLayout.cards[dockedTo] ?? null : null));
   const dockParentExpanded = useAppSelector((state) => (dockedTo ? state.agents.expandedSessionIds.includes(dockedTo) : false));
+  const dockParentTiled = useAppSelector((state) => (dockedTo ? state.dashboardLayout.tiledCards[dockedTo] : undefined));
   const [dockRect, setDockRect] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
   const rootElRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
@@ -267,9 +268,18 @@ const BrowserCard: React.FC<Props> = ({
     if (slot) ro.observe(slot);
     if (slot?.parentElement) ro.observe(slot.parentElement);
     window.addEventListener('resize', measure);
-    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
+    // A RO only fires on slot RESIZE; the chat tiling/untiling MOVES the slot without resizing the
+    // window, so re-measure on camera writes + settle timers or the docked card lags behind.
+    window.addEventListener('openswarm:canvas-pan-changed', measure);
+    const timers = [60, 250, 700].map((ms) => window.setTimeout(measure, ms));
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+      window.removeEventListener('openswarm:canvas-pan-changed', measure);
+      timers.forEach((tm) => window.clearTimeout(tm));
+    };
     // dockParentCard x/y/w/h are re-measure triggers: the slot's client rect moves with the chat card.
-  }, [dockedTo, dockParentExpanded, dockParentCard?.x, dockParentCard?.y, dockParentCard?.width, dockParentCard?.height, getCanvasState, dockParentCard]);
+  }, [dockedTo, dockParentExpanded, dockParentTiled, dockParentCard?.x, dockParentCard?.y, dockParentCard?.width, dockParentCard?.height, getCanvasState, dockParentCard]);
   const dockParentZ = dockParentCard?.zOrder ?? 0;
 
   const suspendedSnap = useAppSelector((state) => state.dashboardLayout.suspendedBrowserCards[browserId]);
@@ -1032,7 +1042,7 @@ const BrowserCard: React.FC<Props> = ({
         overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
-        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : dockActive ? dockParentZ + 1 : cardZOrder,
+        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : dockActive ? (dockParentTiled ? 999991 : dockParentZ + 1) : cardZOrder,
         transition: noTransition ? 'none' : 'box-shadow 0.4s ease, border 0.3s ease',
         '&:hover .resize-handle': { opacity: 1 },
         ...(isHighlighted && {
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index e00306f7..4db1dbb0 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -173,6 +173,7 @@ const DashboardViewCard: React.FC<Props> = ({
   const dockedTo = useAppSelector((state) => state.dashboardLayout.viewCards[cardKey]?.docked_to ?? null);
   const dockParentCard = useAppSelector((state) => (dockedTo ? state.dashboardLayout.cards[dockedTo] ?? null : null));
   const dockParentExpanded = useAppSelector((state) => (dockedTo ? state.agents.expandedSessionIds.includes(dockedTo) : false));
+  const dockParentTiled = useAppSelector((state) => (dockedTo ? state.dashboardLayout.tiledCards[dockedTo] : undefined));
   const [dockRect, setDockRect] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
   const dockRootRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
@@ -192,8 +193,17 @@ const DashboardViewCard: React.FC<Props> = ({
     if (slot) ro.observe(slot);
     if (slot?.parentElement) ro.observe(slot.parentElement);
     window.addEventListener('resize', measure);
-    return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
-  }, [dockedTo, dockParentExpanded, dockParentCard?.x, dockParentCard?.y, dockParentCard?.width, dockParentCard?.height, getCanvasState, dockParentCard]);
+    // A RO only fires on slot RESIZE; the chat tiling/untiling MOVES the slot without resizing the
+    // window, so re-measure on camera writes + settle timers or the docked card lags behind.
+    window.addEventListener('openswarm:canvas-pan-changed', measure);
+    const timers = [60, 250, 700].map((ms) => window.setTimeout(measure, ms));
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+      window.removeEventListener('openswarm:canvas-pan-changed', measure);
+      timers.forEach((tm) => window.clearTimeout(tm));
+    };
+  }, [dockedTo, dockParentExpanded, dockParentTiled, dockParentCard?.x, dockParentCard?.y, dockParentCard?.width, dockParentCard?.height, getCanvasState, dockParentCard]);
   const dockParentZ = dockParentCard?.zOrder ?? 0;
 
   // Keep the live preview mounted only when the user can actually see/use this app card. Always live
@@ -628,7 +638,7 @@ const DashboardViewCard: React.FC<Props> = ({
         overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
-        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : cardZOrder,
+        zIndex: tiledStyle ? 999990 : (isDragging || isResizing) ? 999999 : dockActive ? (dockParentTiled ? 999991 : dockParentZ + 1) : cardZOrder,
         transition: noTransition ? 'none' : 'box-shadow 0.4s ease, border 0.3s ease',
         '&:hover .resize-handle': { opacity: 1 },
         ...(isHighlighted && {
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index 31fdcbb3..95ebd4f2 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -108,27 +108,65 @@ export function useTiledStyle(
     if (!zone || !getLive || !selectId) return undefined;
     const el = document.querySelector(`[data-select-id="${CSS.escape(selectId)}"]`) as HTMLElement | null;
     if (!el) return undefined;
-    const props = ['left', 'top', 'width', 'height', 'transform', 'transform-origin'];
+    // left/top belong on whichever element OWNS position: AgentCard splits into a position:absolute
+    // motion wrapper around a position:relative inner Box (writing left/top on the inner Box ADDS to
+    // the wrapper's, rendering the tile at exactly double the offset); Browser/View cards are one
+    // element. Size + counter-scale always live on the select-id element, mirroring the sx path.
+    const posEl = getComputedStyle(el).position === 'absolute' || getComputedStyle(el).position === 'fixed'
+      ? el
+      : (el.parentElement as HTMLElement | null) ?? el;
+    const posProps = ['left', 'top'];
+    const sizeProps = ['width', 'height', 'transform', 'transform-origin'];
+    const clearAll = (): void => {
+      posProps.forEach((pr) => posEl.style.removeProperty(pr));
+      sizeProps.forEach((pr) => el.style.removeProperty(pr));
+    };
     const apply = (): void => {
       // A parked card (kept alive off-screen / minimized) must keep its sx parking position.
-      if (el.getAttribute('data-keepalive-hidden') === '1') { props.forEach((pr) => el.style.removeProperty(pr)); return; }
+      if (el.getAttribute('data-keepalive-hidden') === '1') { clearAll(); return; }
       const cam = getLive();
       const s = computeTiledStyle(zone, cam.panX, cam.panY, cam.zoom);
       if (!s) return;
-      el.style.left = `${s.left}px`;
-      el.style.top = `${s.top}px`;
-      el.style.width = `${s.width}px`;
-      el.style.height = `${s.height}px`;
-      el.style.transform = s.transform;
-      el.style.transformOrigin = s.transformOrigin;
+      // 'important' so framer-motion's own left/top writes (computed off the LAGGING React-committed
+      // camera) can't land after us and shift the tile by the stale-camera delta.
+      posEl.style.setProperty('left', `${s.left}px`, 'important');
+      posEl.style.setProperty('top', `${s.top}px`, 'important');
+      el.style.setProperty('width', `${s.width}px`, 'important');
+      el.style.setProperty('height', `${s.height}px`, 'important');
+      el.style.setProperty('transform', s.transform, 'important');
+      el.style.setProperty('transform-origin', s.transformOrigin, 'important');
     };
     apply();
     window.addEventListener('openswarm:canvas-pan-changed', apply);
     window.addEventListener('resize', apply);
+    // The workspace can change size WITHOUT a window resize (chrome collapsing on fullscreen-enter,
+    // a banner appearing). These inline writes OVERRIDE the class styles, so they must re-measure on
+    // the same signals the React path uses or the tile keeps the pre-collapse viewport (the
+    // fullscreen card that stopped short of the bottom edge).
+    const vp = document.querySelector('[data-canvas-viewport]');
+    const ro = new ResizeObserver(apply);
+    if (vp) ro.observe(vp);
+    const timers = [60, 250, 700].map((ms) => window.setTimeout(apply, ms));
+    // animateTo moves the camera WITHOUT emitting pan-changed, and the important-priority writes
+    // above block React's late self-heal, so a tiled card must track the live camera itself:
+    // a write-on-change rAF loop (frozen while hidden is fine; nothing moves visually then).
+    let raf = 0;
+    let lastKey = '';
+    const tick = (): void => {
+      const cam = getLive();
+      const size = workspaceSize();
+      const key = `${cam.panX}:${cam.panY}:${cam.zoom}:${size.w}:${size.h}`;
+      if (key !== lastKey) { lastKey = key; apply(); }
+      raf = window.requestAnimationFrame(tick);
+    };
+    raf = window.requestAnimationFrame(tick);
     return () => {
       window.removeEventListener('openswarm:canvas-pan-changed', apply);
       window.removeEventListener('resize', apply);
-      props.forEach((pr) => el.style.removeProperty(pr));
+      ro.disconnect();
+      timers.forEach((tm) => window.clearTimeout(tm));
+      window.cancelAnimationFrame(raf);
+      clearAll();
     };
   }, [zone, getLive, selectId]);
   return zone ? computeTiledStyle(zone, panX, panY, zoom) : null;

From 3239ff8a474f778649148f02ae5701a0cc83e446 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 15:55:40 -0700
Subject: [PATCH 228/248] [eric] dashboard: no tether arrow from a minimized
 chat pill (its live-shot already shows the link)

---
 .../src/app/pages/Dashboard/geometry/dashboardTethers.ts   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
index 0c618e6b..d8a6f0c7 100644
--- a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
+++ b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
@@ -117,6 +117,11 @@ export function useTethers({
 }: UseTethersArgs): Tether[] {
   return useMemo(() => {
     const sessionById = new Map(sessionList.map((s) => [s.id, s]));
+    const expandedSet = new Set(expandedSessionIds);
+    // A collapsed chat renders as a pill that already previews its browser, so an arrow from the
+    // pill duplicates the link and reads as clutter; arrows only make sense from an OPEN chat.
+    const sourceIsCollapsedChat = (sid: string): boolean =>
+      sid !== monitorRunSessionId && sessionById.has(sid) && !expandedSet.has(sid);
     const wfHeight = (wc: WorkflowCardPosition): number =>
       measuredHeightsRef.current![wc.workflow_id] ?? wc.height;
     const agentTethers = Object.entries(glowingAgentCards).map(([copyId, { sourceId, fading, label }]) => {
@@ -263,6 +268,7 @@ export function useTethers({
     for (const [browserId, { sourceId, fading, label }] of Object.entries(glowingBrowserCards)) {
       // A docked browser renders INSIDE its chat; an arrow from the chat to it points at nothing.
       if (browserCards[browserId]?.docked_to) continue;
+      if (sourceIsCollapsedChat(sourceId)) continue;
       const t = cardTether(
         glowTarget(browserId),
         browserId,
@@ -281,6 +287,7 @@ export function useTethers({
       if (glowTethers.has(s.browser_id)) continue;
       // Docked browsers live INSIDE the chat; an arrow to them points at nothing.
       if (browserCards[s.browser_id]?.docked_to) continue;
+      if (sourceIsCollapsedChat(s.parent_session_id)) continue;
       // A browser docked below the hub keeps a "Browser" pointer so the link reads at a glance; the right-docked agent/run cases stay label-free (their glow already said it on spawn).
       const parent = sessionById.get(s.parent_session_id);
       const t = cardTether(

From ab102bb8579d1b612117cd9621cbf34a03a81f7f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 15:55:40 -0700
Subject: [PATCH 229/248] [eric] dashboard: expand-chat mount deferred past the
 click paint (INP 504ms -> ~5ms sync)

---
 .../hooks/interaction/useDashboardInteractions.ts  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
index 7545b30f..a4a7a99e 100644
--- a/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
+++ b/frontend/src/app/pages/Dashboard/hooks/interaction/useDashboardInteractions.ts
@@ -47,6 +47,16 @@ interface UseDashboardInteractionsArgs {
   setFocusedCardId: Dispatch<SetStateAction<string | null>>;
 }
 
+// Run fn AFTER the next paint (rAF fires just before paint, the timeout lands after it), with a
+// plain-timer fallback because rAF freezes in occluded windows. Expanding a chat mounts the whole
+// transcript; doing that inside the click handler blocked the pressed frame ~400ms (the INP tail).
+function afterPaint(fn: () => void): void {
+  let fired = false;
+  const run = (): void => { if (!fired) { fired = true; fn(); } };
+  window.requestAnimationFrame(() => window.setTimeout(run, 0));
+  window.setTimeout(run, 80);
+}
+
 export function useDashboardInteractions({
   canvas,
   selection,
@@ -87,7 +97,7 @@ export function useDashboardInteractions({
 
     // Expand (if not already) + center + zoom + bring to front
     if (type === 'agent') {
-      dispatch(expandSession(id));
+      afterPaint(() => dispatch(expandSession(id)));
     }
     setFocusedCardId(id);
     // The capture-phase select fires on pointer DOWN; if the press became a drag (or marquee),
@@ -227,7 +237,7 @@ export function useDashboardInteractions({
       clickTimerRef.current = null;
     }
     if (type === 'agent') {
-      dispatch(expandSession(id));
+      afterPaint(() => dispatch(expandSession(id)));
     }
     dispatch(bringToFront({ id, type }));
     setFocusedCardId(id);

From c8de032306491084963d904e0819328de66347dd Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 17:12:04 -0700
Subject: [PATCH 230/248] [eric] dock: dropping a browser/app on a collapsed
 chat pill expands the chat (used to park the card at -100000 = looked like
 the drop did nothing)

---
 frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx       | 5 ++++-
 frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 3aae94fd..1e46cb18 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -49,7 +49,7 @@ import { saveMinimizedShot } from '../desktop/minimizedShots';
 import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
-import { handleApproval } from '@/shared/state/agentsSlice';
+import { handleApproval, expandSession } from '@/shared/state/agentsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import {
   registerWebview,
@@ -828,6 +828,9 @@ const BrowserCard: React.FC<Props> = ({
       const dockTarget = slotHit?.getAttribute('data-browser-slot') || chatHit?.getAttribute('data-select-id') || null;
       if (dockTarget) {
         dispatch(setBrowserDocked({ browserId, dockedTo: dockTarget }));
+        // Chats live as collapsed pills by default; docking into a pill used to park the card at
+        // -100000 instantly (it just vanished). Open the chat so the drop visibly lands in the slot.
+        dispatch(expandSession(dockTarget));
       } else if (dockedTo) {
         dispatch(setBrowserDocked({ browserId, dockedTo: null }));
       }
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 4db1dbb0..045a8383 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -17,6 +17,7 @@ import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
 import { Output, SERVE_BASE } from '@/shared/state/outputsSlice';
 import { setViewCardPosition, setViewDocked, setViewCardSize, setActiveViewCardId, recordClosedCard, addViewCard, setTiledCard, clearTiledCard, toggleMinimizeCard, activateViewCardPreview } from '@/shared/state/dashboardLayoutSlice';
 import { removeViewCardCleanly } from '@/shared/viewTeardown';
+import { expandSession } from '@/shared/state/agentsSlice';
 import WindowControls from './WindowControls';
 import { openCardContextMenu } from '../desktop/CardContextMenu';
 import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
@@ -431,6 +432,8 @@ const DashboardViewCard: React.FC<Props> = ({
       const dockTarget = slotHit?.getAttribute('data-browser-slot') || chatHit?.getAttribute('data-select-id') || null;
       if (dockTarget) {
         dispatch(setViewDocked({ cardKey, dockedTo: dockTarget }));
+        // Same as BrowserCard: docking into a collapsed pill must open the chat, not vanish the app.
+        dispatch(expandSession(dockTarget));
       } else if (dockedTo) {
         dispatch(setViewDocked({ cardKey, dockedTo: null }));
       }

From 37bd642a4837587dbbe96773917afcf222080b5b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 17:27:05 -0700
Subject: [PATCH 231/248] [eric] voice: rebindable dictation shortcut (Settings
 recorder chip, live rebind across all 3 hotkey tiers; F5 default dropped
 since macOS routes it to Siri; voice_hold_to_talk now actually persists)

---
 backend/apps/settings/models.py               |   3 +
 electron/preload.js                           |   1 +
 electron/voiceHotkey.js                       | 130 +++++++++++++-----
 .../sections/general/GeneralInterface.tsx     |  73 +++-------
 .../sections/general/ShortcutRecorderChip.tsx |  78 +++++++++++
 frontend/src/shared/state/settingsSlice.ts    |   2 +
 .../shared/voice/VoiceDictationContext.tsx    |   7 +
 7 files changed, 203 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/app/pages/Settings/sections/general/ShortcutRecorderChip.tsx

diff --git a/backend/apps/settings/models.py b/backend/apps/settings/models.py
index 29170683..384677c5 100644
--- a/backend/apps/settings/models.py
+++ b/backend/apps/settings/models.py
@@ -49,6 +49,9 @@ class AppSettings(BaseModel):
     # Shared across App Builder workspaces (each runs its own vite port / localStorage origin); null = follow system.
     app_template_theme_override: Optional[Literal["light", "dark"]] = None
     new_agent_shortcut: str = "Meta+l"
+    # None = platform default (Cmd/Ctrl+Shift+D); parts format matches new_agent_shortcut.
+    dictation_shortcut: Optional[str] = None
+    voice_hold_to_talk: bool = True
     anthropic_api_key: Optional[str] = None
     browser_homepage: str = "https://www.google.com"
     openai_api_key: Optional[str] = None
diff --git a/electron/preload.js b/electron/preload.js
index cedb54d6..a508f3ab 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -75,6 +75,7 @@ contextBridge.exposeInMainWorld('openswarm', {
   revealBundle: (folderPath) => ipcRenderer.invoke('help:reveal-bundle', folderPath),
   // True keyboard hold-to-talk needs the native key tap; renderers ask so Settings copy stays honest,
   // and request triggers the macOS Accessibility prompt when the tap is blocked on permission.
+  setVoiceHotkey: (combo) => ipcRenderer.send('voice:set-hotkey', combo),
   voiceHoldCapable: () => ipcRenderer.invoke('voice:hold-capable'),
   voiceRequestHoldPermission: () => ipcRenderer.invoke('voice:request-hold-permission'),
   haptic: (pattern) => ipcRenderer.invoke('haptic:perform', pattern),
diff --git a/electron/voiceHotkey.js b/electron/voiceHotkey.js
index 5b9d77a2..f913da3b 100644
--- a/electron/voiceHotkey.js
+++ b/electron/voiceHotkey.js
@@ -1,6 +1,6 @@
 const { app, globalShortcut, ipcMain, systemPreferences } = require('electron');
 
-// Voice dictation hotkey (F5 primary, Cmd/Ctrl+Shift+D backup), two tiers:
+// Voice dictation hotkey, user-rebindable (Settings > Interface > Dictation shortcut), two tiers:
 //
 //   NATIVE (uiohook-napi event tap): sees real key-down AND key-up globally, in or out of focus,
 //   immune to macOS's letter-keyup-under-Cmd suppression, so the keyboard gets TRUE hold-to-talk
@@ -15,22 +15,57 @@ const { app, globalShortcut, ipcMain, systemPreferences } = require('electron');
 // fallback stays armed until the tap delivers its first real key event. To keep the two paths from
 // double-firing on one press, fallback sends are deferred 90ms and skipped when the tap just
 // handled a key; a deaf tap never updates that timestamp, so the fallback always fires.
+//
+// F5 is deliberately NOT a default: macOS's media-key layer routes it to Siri before any app sees
+// it. It stays bindable for users who have remapped that key at the OS level.
 
-const VOICE_COMBOS = ['F5', 'CommandOrControl+Shift+D'];
+const DEFAULT_COMBO = process.platform === 'darwin' ? 'Meta+Shift+d' : 'Ctrl+Shift+d';
 const TAP_FRESH_MS = 200;
 const FALLBACK_DEFER_MS = 90;
 
+// "Meta+Shift+d" (renderer parts format, same as new_agent_shortcut) -> matcher pieces.
+function parseCombo(str) {
+  const parts = String(str || DEFAULT_COMBO).split('+').filter(Boolean);
+  const key = parts[parts.length - 1] || 'd';
+  const mods = {
+    meta: parts.includes('Meta'),
+    ctrl: parts.includes('Ctrl') || parts.includes('Control'),
+    alt: parts.includes('Alt'),
+    shift: parts.includes('Shift'),
+  };
+  const accel = [
+    mods.meta ? 'Meta' : null,
+    mods.ctrl ? 'Control' : null,
+    mods.alt ? 'Alt' : null,
+    mods.shift ? 'Shift' : null,
+    key.length === 1 ? key.toUpperCase() : key,
+  ].filter(Boolean).join('+');
+  return { key, mods, accel };
+}
+
+function uiohookKeycodeFor(key, UiohookKey) {
+  if (key.length === 1 && /[a-z]/i.test(key)) return UiohookKey[key.toUpperCase()];
+  if (key.length === 1 && /[0-9]/.test(key)) return UiohookKey[key];
+  if (/^F([1-9]|1[0-9]|2[0-4])$/.test(key)) return UiohookKey[key];
+  if (key === ' ' || key === 'Space') return UiohookKey.Space;
+  return undefined; // unmappable for the tap; the fallback tiers still cover it
+}
+
 function installVoiceHotkey(getMainWindow) {
   const send = (channel) => {
     const win = getMainWindow();
     if (win && !win.isDestroyed()) win.webContents.send(channel);
   };
 
+  let combo = parseCombo(DEFAULT_COMBO);
   let tapProven = false;
   let lastTapKeyMs = 0;
+  let registeredAccel = null;
 
-  const unregisterFallbackShortcuts = () => {
-    for (const combo of VOICE_COMBOS) { try { globalShortcut.unregister(combo); } catch (_) {} }
+  const unregisterFallbackShortcut = () => {
+    if (!registeredAccel) return;
+    try { globalShortcut.unregister(registeredAccel); } catch (_) {}
+    registeredAccel = null;
   };
 
   // Fallback toggle, deferred so a live tap's hold-down wins the same press.
@@ -41,6 +76,19 @@ function installVoiceHotkey(getMainWindow) {
     }, FALLBACK_DEFER_MS);
   };
 
+  // Fallback shortcut stays registered while unfocused until the tap proves alive.
+  const registerVoiceShortcut = () => {
+    if (tapProven) return;
+    if (registeredAccel === combo.accel) return;
+    unregisterFallbackShortcut();
+    try {
+      if (globalShortcut.register(combo.accel, sendFallbackToggle)) registeredAccel = combo.accel;
+    } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
+  };
+
+  let tapKeycode;
+  let UiohookKeyRef = null;
+
   const tryStartNativeTap = () => {
     try {
       if (process.platform === 'darwin' && !systemPreferences.isTrustedAccessibilityClient(false)) {
@@ -48,41 +96,42 @@ function installVoiceHotkey(getMainWindow) {
         return false;
       }
       const { uIOhook, UiohookKey } = require('uiohook-napi');
+      UiohookKeyRef = UiohookKey;
+      tapKeycode = uiohookKeycodeFor(combo.key, UiohookKey);
       const MOD_KEYS = new Set([
         UiohookKey.Ctrl, UiohookKey.CtrlRight, UiohookKey.Shift, UiohookKey.ShiftRight,
-        UiohookKey.Meta, UiohookKey.MetaRight,
+        UiohookKey.Meta, UiohookKey.MetaRight, UiohookKey.Alt, UiohookKey.AltRight,
       ]);
-      // 'f5' | 'combo' | null; one hold at a time, repeats and the other combo ignored while held.
-      let heldBy = null;
+      let held = false;
 
       const markAlive = () => {
         lastTapKeyMs = Date.now();
         if (!tapProven) {
           tapProven = true;
-          unregisterFallbackShortcuts();
+          unregisterFallbackShortcut();
           console.log('[voice] native key tap PROVEN (events flowing), hold-to-talk enabled');
         }
       };
 
+      const modsMatch = (e) =>
+        (!combo.mods.meta || e.metaKey) &&
+        (!combo.mods.ctrl || e.ctrlKey) &&
+        (!combo.mods.alt || e.altKey) &&
+        (!combo.mods.shift || e.shiftKey);
+
       uIOhook.on('keydown', (e) => {
         markAlive();
-        if (heldBy) return;
-        if (e.keycode === UiohookKey.F5) {
-          heldBy = 'f5';
-          send('voice:hold-down');
-        } else if (e.keycode === UiohookKey.D && e.shiftKey && (e.metaKey || e.ctrlKey)) {
-          heldBy = 'combo';
+        if (held || tapKeycode === undefined) return;
+        if (e.keycode === tapKeycode && modsMatch(e)) {
+          held = true;
           send('voice:hold-down');
         }
       });
       uIOhook.on('keyup', (e) => {
         markAlive();
-        if (!heldBy) return;
-        const releases =
-          (heldBy === 'f5' && e.keycode === UiohookKey.F5) ||
-          (heldBy === 'combo' && (e.keycode === UiohookKey.D || MOD_KEYS.has(e.keycode)));
-        if (releases) {
-          heldBy = null;
+        if (!held) return;
+        if (e.keycode === tapKeycode || MOD_KEYS.has(e.keycode)) {
+          held = false;
           send('voice:hold-up');
         }
       });
@@ -97,28 +146,26 @@ function installVoiceHotkey(getMainWindow) {
     }
   };
   tryStartNativeTap();
-
-  // Fallback shortcuts stay registered while unfocused until the tap proves alive.
-  const registerVoiceShortcut = () => {
-    if (tapProven) return;
-    for (const combo of VOICE_COMBOS) {
-      try {
-        if (!globalShortcut.isRegistered(combo)) {
-          globalShortcut.register(combo, sendFallbackToggle);
-        }
-      } catch (_) { /* a taken shortcut just means no global hotkey; the pill still works */ }
-    }
-  };
   registerVoiceShortcut();
-  app.on('browser-window-focus', unregisterFallbackShortcuts);
+  app.on('browser-window-focus', unregisterFallbackShortcut);
   app.on('browser-window-blur', registerVoiceShortcut);
 
+  const inputMatchesCombo = (input) => {
+    const k = combo.key;
+    const keyHit = k.length === 1
+      ? (input.code === `Key${k.toUpperCase()}` || (input.key || '').toLowerCase() === k.toLowerCase())
+      : (input.code === k || input.key === k);
+    return keyHit &&
+      (!combo.mods.meta || input.meta) &&
+      (!combo.mods.ctrl || input.control) &&
+      (!combo.mods.alt || input.alt) &&
+      (!combo.mods.shift || input.shift);
+  };
+
   const installVoiceHoldRelay = (contents) => {
     contents.on('before-input-event', (event, input) => {
       if (input.type !== 'keyDown' || input.isAutoRepeat) return;
-      const isD = (input.code === 'KeyD' || (input.key || '').toLowerCase() === 'd');
-      const combo = (isD && (input.meta || input.control) && input.shift) || input.code === 'F5';
-      if (combo) {
+      if (inputMatchesCombo(input)) {
         if (!tapProven) sendFallbackToggle();
         event.preventDefault();
       }
@@ -131,6 +178,17 @@ function installVoiceHotkey(getMainWindow) {
     if (t === 'window' || t === 'webview') installVoiceHoldRelay(contents);
   });
 
+  // Renderer pushes the user's saved combo on boot and whenever Settings changes it.
+  ipcMain.on('voice:set-hotkey', (_e, comboStr) => {
+    const next = parseCombo(comboStr);
+    if (next.accel === combo.accel) return;
+    combo = next;
+    if (UiohookKeyRef) tapKeycode = uiohookKeycodeFor(combo.key, UiohookKeyRef);
+    unregisterFallbackShortcut();
+    registerVoiceShortcut();
+    console.log('[voice] hotkey set to', combo.accel);
+  });
+
   ipcMain.handle('voice:hold-capable', () => tapProven);
   // Settings' "Hold to talk" fires the Accessibility prompt; Input Monitoring has no Electron API,
   // but a running tap makes macOS list the app in that pane for the user to flip.
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index b0d9cb22..81ea84eb 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
@@ -8,13 +8,13 @@ import Slider from '@mui/material/Slider';
 import Switch from '@mui/material/Switch';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
-import KeyboardIcon from '@mui/icons-material/Keyboard';
 import LanguageIcon from '@mui/icons-material/Language';
 import { AppSettings } from '@/shared/state/settingsSlice';
 import { useClaudeTokens, useThemeWash } from '@/shared/styles/ThemeContext';
 import AccentColorPad from '@/app/components/theme/AccentColorPad';
 import type { SettingsStyles } from '../settingsStyles';
 import { settingSelectAttrs } from '../settingSelect';
+import ShortcutRecorderChip, { dictationDefaultCombo, comboDisplay } from './ShortcutRecorderChip';
 
 const GeneralInterface: React.FC<{
   form: AppSettings;
@@ -23,7 +23,6 @@ const GeneralInterface: React.FC<{
 }> = ({ form, setForm, styles }) => {
   const c = useClaudeTokens();
   const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
-  const [recordingShortcut, setRecordingShortcut] = useState(false);
   const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx } = styles;
 
   return (
@@ -72,7 +71,7 @@ const GeneralInterface: React.FC<{
       <Box sx={inlineRowSx} {...settingSelectAttrs('voice_hold_to_talk', 'Dictation', 'Interface', 'Hold to talk, or tap to start and stop.')}>
         <Box sx={{ mr: 3 }}>
           <Typography sx={labelSx}>Dictation</Typography>
-          <Typography sx={descSx}>{`How the mic button and the dictation shortcut (${/Mac/.test(navigator.platform) ? '\u2318\u21e7D' : 'Ctrl+Shift+D'}) work.`}</Typography>
+          <Typography sx={descSx}>{`How the mic button and the dictation shortcut (${comboDisplay(form.dictation_shortcut || dictationDefaultCombo())}) work.`}</Typography>
         </Box>
         <ToggleButtonGroup
           value={form.voice_hold_to_talk ?? true}
@@ -92,6 +91,17 @@ const GeneralInterface: React.FC<{
         </ToggleButtonGroup>
       </Box>
 
+      <Box sx={inlineRowSx} {...settingSelectAttrs('dictation_shortcut', 'Dictation shortcut', 'Interface', 'Global hotkey that starts dictation.')}>
+        <Box sx={{ mr: 3 }}>
+          <Typography sx={labelSx}>Dictation shortcut</Typography>
+          <Typography sx={descSx}>Works anywhere, even with the app in the background.</Typography>
+        </Box>
+        <ShortcutRecorderChip
+          value={form.dictation_shortcut || dictationDefaultCombo()}
+          onChange={(combo) => setForm({ ...form, dictation_shortcut: combo })}
+        />
+      </Box>
+
       <Box sx={rowSx} {...settingSelectAttrs('accent_color', 'Accent color', 'Interface', 'The accent color used across the app.')}>
         <Typography sx={labelSx}>Accent color</Typography>
         <Typography sx={{ ...descSx, mb: 1.5 }}>
@@ -138,57 +148,10 @@ const GeneralInterface: React.FC<{
           <Typography sx={labelSx}>New agent shortcut</Typography>
           <Typography sx={descSx}>Keyboard shortcut to create an agent.</Typography>
         </Box>
-        <Box
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (!recordingShortcut) return;
-            if (['Meta', 'Control', 'Shift', 'Alt'].includes(e.key)) return;
-            e.preventDefault();
-            const parts: string[] = [];
-            if (e.metaKey) parts.push('Meta');
-            if (e.ctrlKey) parts.push('Ctrl');
-            if (e.altKey) parts.push('Alt');
-            if (e.shiftKey) parts.push('Shift');
-            parts.push(e.key.length === 1 ? e.key.toLowerCase() : e.key);
-            setForm({ ...form, new_agent_shortcut: parts.join('+') });
-            setRecordingShortcut(false);
-          }}
-          onBlur={() => setRecordingShortcut(false)}
-          onClick={() => setRecordingShortcut(true)}
-          sx={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 0.75,
-            px: 1.5,
-            py: 0.75,
-            borderRadius: `${c.radius.sm}px`,
-            border: `1px solid ${recordingShortcut ? c.accent.primary : c.border.medium}`,
-            cursor: 'pointer',
-            outline: 'none',
-            transition: 'border-color 0.15s',
-            '&:hover': { borderColor: c.accent.primary },
-          }}
-        >
-          <KeyboardIcon sx={{ fontSize: 16, color: recordingShortcut ? c.accent.primary : c.text.tertiary }} />
-          {recordingShortcut ? (
-            <Typography sx={{ fontSize: '0.8125rem', color: c.accent.primary, fontWeight: 500 }}>
-              Press shortcut…
-            </Typography>
-          ) : (
-            <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
-              {form.new_agent_shortcut
-                .split('+')
-                .map((p) => {
-                  if (p === 'Meta') return '⌘';
-                  if (p === 'Ctrl') return 'Ctrl';
-                  if (p === 'Alt') return '⌥';
-                  if (p === 'Shift') return '⇧';
-                  return p.toUpperCase();
-                })
-                .join(' + ')}
-            </Typography>
-          )}
-        </Box>
+        <ShortcutRecorderChip
+          value={form.new_agent_shortcut}
+          onChange={(combo) => setForm({ ...form, new_agent_shortcut: combo })}
+        />
       </Box>
 
       <Box sx={inlineRowSx} {...settingSelectAttrs('auto_select_mode_on_new_agent', 'Auto-enable element selection', 'Interface', 'Enter element selection mode when creating a new agent.')}>
diff --git a/frontend/src/app/pages/Settings/sections/general/ShortcutRecorderChip.tsx b/frontend/src/app/pages/Settings/sections/general/ShortcutRecorderChip.tsx
new file mode 100644
index 00000000..1ad332d5
--- /dev/null
+++ b/frontend/src/app/pages/Settings/sections/general/ShortcutRecorderChip.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import KeyboardIcon from '@mui/icons-material/Keyboard';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+
+export const IS_MAC = /Mac/.test(navigator.platform);
+
+/** Platform default for the dictation hotkey; F5 is deliberately absent (macOS routes it to Siri before apps ever see it). */
+export function dictationDefaultCombo(): string {
+  return IS_MAC ? 'Meta+Shift+d' : 'Ctrl+Shift+d';
+}
+
+export function comboDisplay(combo: string): string {
+  return combo
+    .split('+')
+    .map((p) => {
+      if (p === 'Meta') return IS_MAC ? '⌘' : 'Win';
+      if (p === 'Ctrl') return IS_MAC ? '⌃' : 'Ctrl';
+      if (p === 'Alt') return IS_MAC ? '⌥' : 'Alt';
+      if (p === 'Shift') return IS_MAC ? '⇧' : 'Shift';
+      return p.length === 1 ? p.toUpperCase() : p;
+    })
+    .join(IS_MAC ? '' : '+');
+}
+
+/** Click-to-record shortcut chip: click arms it, the next non-modifier keydown becomes the combo ("Meta+Shift+d" parts format, same as new_agent_shortcut). */
+const ShortcutRecorderChip: React.FC<{ value: string; onChange: (combo: string) => void }> = ({ value, onChange }) => {
+  const c = useClaudeTokens();
+  const [recording, setRecording] = useState(false);
+  return (
+    <Box
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (!recording) return;
+        if (['Meta', 'Control', 'Shift', 'Alt'].includes(e.key)) return;
+        e.preventDefault();
+        if (e.key === 'Escape') { setRecording(false); return; }
+        const parts: string[] = [];
+        if (e.metaKey) parts.push('Meta');
+        if (e.ctrlKey) parts.push('Ctrl');
+        if (e.altKey) parts.push('Alt');
+        if (e.shiftKey) parts.push('Shift');
+        parts.push(e.key.length === 1 ? e.key.toLowerCase() : e.key);
+        onChange(parts.join('+'));
+        setRecording(false);
+      }}
+      onBlur={() => setRecording(false)}
+      onClick={() => setRecording(true)}
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0.75,
+        px: 1.5,
+        py: 0.75,
+        borderRadius: `${c.radius.sm}px`,
+        border: `1px solid ${recording ? c.accent.primary : c.border.medium}`,
+        cursor: 'pointer',
+        outline: 'none',
+        transition: 'border-color 0.15s',
+        '&:hover': { borderColor: c.accent.primary },
+      }}
+    >
+      <KeyboardIcon sx={{ fontSize: 16, color: recording ? c.accent.primary : c.text.tertiary }} />
+      {recording ? (
+        <Typography sx={{ fontSize: '0.8125rem', color: c.accent.primary, fontWeight: 500 }}>
+          Press shortcut…
+        </Typography>
+      ) : (
+        <Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
+          {comboDisplay(value)}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export default ShortcutRecorderChip;
diff --git a/frontend/src/shared/state/settingsSlice.ts b/frontend/src/shared/state/settingsSlice.ts
index 40d5dae0..0b86d57e 100644
--- a/frontend/src/shared/state/settingsSlice.ts
+++ b/frontend/src/shared/state/settingsSlice.ts
@@ -45,6 +45,7 @@ export interface AppSettings {
   zoom_sensitivity: number;
   theme: 'light' | 'dark';
   new_agent_shortcut: string;
+  dictation_shortcut?: string | null;
   anthropic_api_key: string | null;
   openai_api_key?: string | null;
   google_api_key?: string | null;
@@ -165,6 +166,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
   voice_hold_to_talk: true,
   theme: 'light',
   new_agent_shortcut: 'Meta+l',
+  dictation_shortcut: null,
   anthropic_api_key: null,
   browser_homepage: 'https://duckduckgo.com',
   auto_select_mode_on_new_agent: false,
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
index 95acdc84..28da3f15 100644
--- a/frontend/src/shared/voice/VoiceDictationContext.tsx
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -11,6 +11,13 @@ import VoiceOverlay from './VoiceOverlay';
 export function VoiceDictationProvider({ children }: { children: React.ReactNode }): React.ReactElement {
   const { state, lastText, error, pct, feedback, toggle, start, stop, volumeRef } = useVoiceDictation();
   const holdMode = useAppSelector((s) => s.settings.data.voice_hold_to_talk ?? true);
+  const dictationShortcut = useAppSelector((s) => s.settings.data.dictation_shortcut ?? null);
+
+  // Push the user's combo to main on boot and on change so every hotkey tier rebinds live.
+  useEffect(() => {
+    const bridge = window as unknown as { openswarm?: { setVoiceHotkey?: (combo: string | null) => void } };
+    bridge.openswarm?.setVoiceHotkey?.(dictationShortcut);
+  }, [dictationShortcut]);
   const stateRef = useRef(state);
   stateRef.current = state;
   const heldRef = useRef(false);

From 35a281f4ad954100433bb778056d095dede2efce Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 17:27:05 -0700
Subject: [PATCH 232/248] [eric] voice: bundle per-arch whisper-server into the
 mac build (pinned v1.7.6, static + non-system-dylib gate; model stays the
 proven first-run download)

---
 electron/package.json             |  9 ++++-
 electron/scripts/build-whisper.sh | 61 +++++++++++++++++++++++++++++++
 scripts/build-app.sh              |  3 ++
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100755 electron/scripts/build-whisper.sh

diff --git a/electron/package.json b/electron/package.json
index 1790a811..94205f05 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -2,7 +2,7 @@
   "name": "openswarm",
   "version": "1.5.8",
   "license": "AGPL-3.0-only",
-  "description": "OpenSwarm — AI Agent Orchestrator",
+  "description": "OpenSwarm \u2014 AI Agent Orchestrator",
   "author": "openswarm-ai",
   "main": "main.js",
   "scripts": {
@@ -82,6 +82,13 @@
             "**/*"
           ]
         },
+        {
+          "from": "build-staging/whisper/${arch}",
+          "to": "whisper",
+          "filter": [
+            "**/*"
+          ]
+        },
         {
           "from": "build-staging/python-env/${arch}",
           "to": "python-env",
diff --git a/electron/scripts/build-whisper.sh b/electron/scripts/build-whisper.sh
new file mode 100755
index 00000000..4a2a7c1b
--- /dev/null
+++ b/electron/scripts/build-whisper.sh
@@ -0,0 +1,61 @@
+#!/bin/bash
+# Build whisper.cpp's whisper-server for one arch and stage it where electron-builder's
+# extraResources picks it up (build-staging/whisper/<arch>). The packaged app resolves it at
+# resources/whisper/whisper-server (electron/voice/whisperService.js resolveBinary); the model
+# stays a first-run download (ships +0MB, whisperService owns the fetch + progress UI).
+# The brew binary can't be bundled: it links homebrew dylibs that don't exist on user machines.
+set -euo pipefail
+
+ARCH="${1:?usage: build-whisper.sh <arm64|x64>}"
+
+WHISPER_VERSION="v1.7.6"
+HERE="$(cd "$(dirname "$0")/.." && pwd)"   # electron/
+OUT="$HERE/build-staging/whisper/$ARCH"
+SRC="$HERE/build-staging/whisper-src"
+
+# Idempotent across publish reruns: a staged binary from the same pinned version is reused.
+if [[ -f "$OUT/whisper-server" && -f "$OUT/.version" && "$(cat "$OUT/.version")" == "$WHISPER_VERSION" ]]; then
+    echo "[whisper] $ARCH already staged at $WHISPER_VERSION, skipping"
+    exit 0
+fi
+
+if [[ ! -d "$SRC/.git" ]]; then
+    git clone --depth 1 --branch "$WHISPER_VERSION" https://github.com/ggml-org/whisper.cpp "$SRC"
+else
+    CUR="$(git -C "$SRC" describe --tags --exact-match 2>/dev/null || echo none)"
+    if [[ "$CUR" != "$WHISPER_VERSION" ]]; then
+        git -C "$SRC" fetch --depth 1 origin tag "$WHISPER_VERSION"
+        git -C "$SRC" checkout -f "$WHISPER_VERSION"
+    fi
+fi
+
+case "$ARCH" in
+    arm64) OSX_ARCH="arm64";  EXTRA=(-DGGML_METAL=ON -DGGML_METAL_EMBED_LIBRARY=ON) ;;
+    # Intel slice: CPU + Accelerate only. Metal shaders target Apple Silicon, and GGML_NATIVE
+    # would bake this arm64 build host's flags into a cross build.
+    x64)   OSX_ARCH="x86_64"; EXTRA=(-DGGML_METAL=OFF -DGGML_NATIVE=OFF) ;;
+    *) echo "unknown arch: $ARCH"; exit 1 ;;
+esac
+
+BUILD_DIR="$SRC/build-$ARCH"
+echo "[whisper] building whisper-server $WHISPER_VERSION for $ARCH..."
+cmake -S "$SRC" -B "$BUILD_DIR" \
+    -DCMAKE_BUILD_TYPE=Release \
+    -DCMAKE_OSX_ARCHITECTURES="$OSX_ARCH" \
+    -DBUILD_SHARED_LIBS=OFF \
+    -DWHISPER_BUILD_TESTS=OFF \
+    "${EXTRA[@]}" > /dev/null
+cmake --build "$BUILD_DIR" --target whisper-server -j "$(sysctl -n hw.ncpu)" > /dev/null
+
+BIN="$BUILD_DIR/bin/whisper-server"
+[[ -f "$BIN" ]] || { echo "[whisper] build produced no whisper-server"; exit 1; }
+
+mkdir -p "$OUT"
+cp "$BIN" "$OUT/whisper-server"
+echo "$WHISPER_VERSION" > "$OUT/.version"
+echo "[whisper] staged -> $OUT/whisper-server"
+file "$OUT/whisper-server"
+# A binary that links anything outside the OS is a launch crash on user machines; fail loud here.
+if otool -L "$OUT/whisper-server" | grep -qE "/opt/homebrew|/usr/local"; then
+    echo "[whisper] ERROR: binary links non-system libraries"; otool -L "$OUT/whisper-server"; exit 1
+fi
diff --git a/scripts/build-app.sh b/scripts/build-app.sh
index b39a1599..eb58f9f7 100755
--- a/scripts/build-app.sh
+++ b/scripts/build-app.sh
@@ -499,6 +499,9 @@ if [[ "$(uname)" == "Darwin" ]]; then
     bash scripts/build-mouseclamp.sh x64
     bash scripts/build-haptics.sh arm64
     bash scripts/build-haptics.sh x64
+    echo "Building whisper-server for dictation (arm64 + x64)..."
+    bash scripts/build-whisper.sh arm64
+    bash scripts/build-whisper.sh x64
 fi
 
 # Node's default ~4 GB heap OOMs while codesign'ing the .app on dual-arch

From 70eb3cd8469c7035b888d80d6a31ff9503ec89b2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 17:35:37 -0700
Subject: [PATCH 233/248] [eric] dashboard: tiles start beside the dock rail
 (macOS model, covers half/quarter zones) + shell frame wears the accent wash
 always so the window edge is never white

---
 .../src/app/components/Layout/AppShell.tsx    |  2 +-
 .../app/pages/Dashboard/cards/tileZones.ts    | 39 +++++++++++--------
 .../pages/Dashboard/desktop/DesktopDock.tsx   |  1 +
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index e71277b5..1fb781dd 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -436,7 +436,7 @@ const AppShell: React.FC = () => {
   return (
     <Box sx={{
       display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: c.bg.secondary,
-      ...(fsActive && fsWashStops ? { backgroundImage: washBackgroundUrl(fsWashStops, themeWashOpacity), backgroundSize: '100% 100%' } : {}),
+      ...(fsWashStops ? { backgroundImage: washBackgroundUrl(fsWashStops, themeWashOpacity), backgroundSize: '100% 100%' } : {}),
     }}>
       {/* Sidebar retired: dashboards switch via the macOS-Spaces top strip; a slim band below the
           spaces hot zone keeps the frameless window draggable (the sidebar's drag strip is gone). */}
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index 95ebd4f2..a7d3e2cb 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -33,16 +33,22 @@ export interface TiledStyle {
   transformOrigin: string;
 }
 
-// The workspace = the canvas viewport element (already below the app header, dock floats over it),
-// measured live so we never hardcode chrome sizes that drift. Its screen origin cancels out of the
-// math below because the card shares the viewport's coordinate system, so we only need its size.
-function workspaceSize(): { w: number; h: number } {
+// The workspace = the canvas viewport element (already below the app header), measured live so we
+// never hardcode chrome sizes that drift. Its screen origin cancels out of the math below because
+// the card shares the viewport's coordinate system. x0 insets the LEFT edge past the floating dock
+// rail (macOS model: tiled windows start beside the Dock, never under it), which is what keeps
+// fullscreen AND half/quarter tiles clear of it.
+function workspaceRect(): { x0: number; w: number; h: number } {
   const el = document.querySelector('[data-canvas-viewport]');
-  if (el) {
-    const r = el.getBoundingClientRect();
-    if (r.width > 0 && r.height > 0) return { w: r.width, h: r.height };
+  const r = el?.getBoundingClientRect();
+  if (!r || !(r.width > 0 && r.height > 0)) return { x0: 0, w: window.innerWidth, h: window.innerHeight };
+  let x0 = 0;
+  const dock = document.querySelector('[data-desktop-dock]');
+  if (dock) {
+    const dr = dock.getBoundingClientRect();
+    if (dr.width > 0 && dr.right > r.left && dr.left < r.left + r.width * 0.25) x0 = dr.right - r.left + GAP;
   }
-  return { w: window.innerWidth, h: window.innerHeight };
+  return { x0, w: r.width, h: r.height };
 }
 
 export function computeTiledStyle(zone: string, panX: number, panY: number, zoom: number): TiledStyle | null {
@@ -50,11 +56,11 @@ export function computeTiledStyle(zone: string, panX: number, panY: number, zoom
   // zones use. Anchored to the VIEWPORT (not the window) so docked chrome, like the pinned sidebar,
   // squeezes the card instead of being covered by it (the canvas viewport shrinks with the sidebar).
   if (zone === 'fullscreen') {
-    const { w: vpW, h: vpH } = workspaceSize();
+    const { x0, w: vpW, h: vpH } = workspaceRect();
     return {
-      left: (GAP - panX) / zoom,
+      left: (x0 + GAP - panX) / zoom,
       top: (GAP - panY) / zoom,
-      width: vpW - GAP * 2,
+      width: vpW - x0 - GAP * 2,
       height: vpH - GAP * 2,
       transform: `scale(${1 / zoom})`,
       transformOrigin: 'top left',
@@ -62,13 +68,14 @@ export function computeTiledStyle(zone: string, panX: number, panY: number, zoom
   }
   const z = TILE_ZONES[zone];
   if (!z) return null;
-  const { w: vpW, h: vpH } = workspaceSize();
+  const { x0, w: vpW, h: vpH } = workspaceRect();
+  const usableW = vpW - x0;
   // Screen region (vpX + GAP, vpY + GAP, ...) converted to canvas coords: card lives inside the
   // pan/zoom layer, so screen = viewportOrigin + pan + canvasPos*zoom, and viewportOrigin cancels.
   return {
-    left: (z.x * vpW + GAP - panX) / zoom,
+    left: (x0 + z.x * usableW + GAP - panX) / zoom,
     top: (z.y * vpH + GAP - panY) / zoom,
-    width: z.w * vpW - GAP * 2,
+    width: z.w * usableW - GAP * 2,
     height: z.h * vpH - GAP * 2,
     transform: `scale(${1 / zoom})`,
     transformOrigin: 'top left',
@@ -154,8 +161,8 @@ export function useTiledStyle(
     let lastKey = '';
     const tick = (): void => {
       const cam = getLive();
-      const size = workspaceSize();
-      const key = `${cam.panX}:${cam.panY}:${cam.zoom}:${size.w}:${size.h}`;
+      const size = workspaceRect();
+      const key = `${cam.panX}:${cam.panY}:${cam.zoom}:${size.x0}:${size.w}:${size.h}`;
       if (key !== lastKey) { lastKey = key; apply(); }
       raf = window.requestAnimationFrame(tick);
     };
diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index b458a117..a429199a 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -134,6 +134,7 @@ function DesktopDock({
   return (
     <Box
       ref={dockBodyRef}
+      data-desktop-dock
       onMouseMove={(e: React.MouseEvent) => applyDockMagnify(e.clientY)}
       onMouseLeave={() => { endHover(); applyDockMagnify(null); }}
       sx={{

From 224dc04696b18b9c3e863da8f2f5d77aba6d4637 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:16:01 -0700
Subject: [PATCH 234/248] [eric] theme: stock wallpaper is a designed
 contrasting gradient (canvas + shell + onboarding stage), never flat white
 when no accent picked

---
 frontend/src/app/components/Layout/AppShell.tsx        |  4 ++--
 .../app/components/OnboardingV3/beats/BeatShell.tsx    |  3 ++-
 .../src/app/pages/Dashboard/canvas/DashboardCanvas.tsx |  4 ++--
 frontend/src/shared/styles/washBackground.ts           | 10 ++++++++++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 1fb781dd..08db74c3 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -38,7 +38,7 @@ import { findBrowserByWebContentsId } from '@/shared/browserRegistry';
 import { byPreviewRecency } from '@/shared/previewOrder';
 import { useClaudeTokens, useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import SpacesStrip from '@/app/pages/Dashboard/desktop/SpacesStrip';
-import { washBackgroundUrl } from '@/shared/styles/washBackground';
+import { washBackgroundUrl, effectiveWashStops } from '@/shared/styles/washBackground';
 import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
 
 const UPDATE_DISMISS_KEY = 'openswarm-update-dismissed';
@@ -96,7 +96,7 @@ const AppShell: React.FC = () => {
   // the content floats as a rounded card). Mirrors the DashboardCanvas wash formula.
   const { accent: themeAccent, gradient: themeGradient } = useThemeAccent();
   const { washOpacity: themeWashOpacity } = useThemeWash();
-  const fsWashStops = themeGradient ?? (themeAccent ? [themeAccent] : null);
+  const fsWashStops = effectiveWashStops(themeGradient, themeAccent);
   // During an active free trial the user CAN run things, so a red "no model connected" warning is misleading and discouraging (it sits right above the working starter chips). The trial flips connection_mode back to own_key the moment it's spent, so this banner returns then, landing the connect-a-model nudge after the win, not before it.
   const freeTrialActive = useAppSelector((s) => {
     const d = s.settings.data as any;
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
index 77b963b1..bbf74393 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { effectiveWashStops } from '@/shared/styles/washBackground';
 import { motion } from 'framer-motion';
 import { ArrowLeft } from 'lucide-react';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
@@ -53,7 +54,7 @@ const BeatShell: React.FC<{
   // Once the user has picked stops the stage wears them (our theme beat repaints live); before that it stays Arc-mauve.
   const { accent, gradient } = useThemeAccent();
   const { washOpacity, grain } = useThemeWash();
-  const stops = gradient ?? (accent ? [accent] : null);
+  const stops = effectiveWashStops(gradient, accent);
   // Picked color reads VIVID on the stage (alpha floor over near-white), not muddied into the mauve.
   const washAlpha = Math.round(Math.max(0.5, washOpacity) * 255).toString(16).padStart(2, '0');
   const stageBg = stageDark
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index 0fb54e64..e39cce7d 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -14,7 +14,7 @@ import ApplicationsWindow from '../desktop/ApplicationsWindow';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
 import { useThemeAccent, useThemeWash } from '@/shared/styles/ThemeContext';
 import { GRAIN_URL } from '@/shared/styles/grainTexture';
-import { washBackgroundUrl } from '@/shared/styles/washBackground';
+import { washBackgroundUrl, effectiveWashStops } from '@/shared/styles/washBackground';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 import type {
   CardPosition,
@@ -168,7 +168,7 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   const { accent, gradient } = useThemeAccent();
   const { washOpacity, grain } = useThemeWash();
   // A single picked color stores gradient=null, so fall back to the accent (mirrors BeatShell).
-  const washStops = gradient ?? (accent ? [accent] : null);
+  const washStops = effectiveWashStops(gradient, accent);
   const dotSize = Math.max(1, 1.5 * canvas.zoom);
   const dotSpacing = 24 * canvas.zoom;
 
diff --git a/frontend/src/shared/styles/washBackground.ts b/frontend/src/shared/styles/washBackground.ts
index 1fd76341..890da23c 100644
--- a/frontend/src/shared/styles/washBackground.ts
+++ b/frontend/src/shared/styles/washBackground.ts
@@ -12,3 +12,13 @@ export function washBackgroundUrl(stops: string[], washOpacity: number): string
   const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'><defs><linearGradient id='w' x1='0%' y1='0%' x2='90%' y2='42%'>${stopEls}</linearGradient></defs><rect width='100' height='100' fill='url(%23w)'/></svg>`;
   return `url("data:image/svg+xml,${svg.replace(/#/g, '%23').replace(/'/g, '%27')}")`;
 }
+
+// Stock wallpaper when the user hasn't picked an accent yet: a designed blue-to-cream-to-pink
+// gradient (contrasting stops), so a fresh install and the onboarding stage never look flat/white.
+export const DEFAULT_WASH_STOPS = ['#B7CDEA', '#EFE0D2', '#E7BDD1'];
+
+export function effectiveWashStops(gradient: string[] | null, accent: string | null): string[] {
+  if (gradient && gradient.length > 0) return gradient;
+  if (accent) return [accent];
+  return DEFAULT_WASH_STOPS;
+}

From 37f7a7a8dbaecb4cab0f5f520386d736fbd92d84 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:16:01 -0700
Subject: [PATCH 235/248] [eric] dashboard: docked APPS suppress their tether
 too; tiled geometry never transitions (occluded-window transitions pin at t=0
 and freeze tiles); tiles + dock measures re-apply on window reveal

---
 .../src/app/pages/Dashboard/cards/BrowserCard.tsx    |  2 ++
 .../app/pages/Dashboard/cards/DashboardViewCard.tsx  |  2 ++
 frontend/src/app/pages/Dashboard/cards/tileZones.ts  | 12 +++++++++++-
 .../app/pages/Dashboard/geometry/dashboardTethers.ts |  4 ++--
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 1e46cb18..4f6f1c64 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -271,11 +271,13 @@ const BrowserCard: React.FC<Props> = ({
     // A RO only fires on slot RESIZE; the chat tiling/untiling MOVES the slot without resizing the
     // window, so re-measure on camera writes + settle timers or the docked card lags behind.
     window.addEventListener('openswarm:canvas-pan-changed', measure);
+    document.addEventListener('visibilitychange', measure);
     const timers = [60, 250, 700].map((ms) => window.setTimeout(measure, ms));
     return () => {
       ro.disconnect();
       window.removeEventListener('resize', measure);
       window.removeEventListener('openswarm:canvas-pan-changed', measure);
+      document.removeEventListener('visibilitychange', measure);
       timers.forEach((tm) => window.clearTimeout(tm));
     };
     // dockParentCard x/y/w/h are re-measure triggers: the slot's client rect moves with the chat card.
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index 045a8383..fe96abae 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -197,11 +197,13 @@ const DashboardViewCard: React.FC<Props> = ({
     // A RO only fires on slot RESIZE; the chat tiling/untiling MOVES the slot without resizing the
     // window, so re-measure on camera writes + settle timers or the docked card lags behind.
     window.addEventListener('openswarm:canvas-pan-changed', measure);
+    document.addEventListener('visibilitychange', measure);
     const timers = [60, 250, 700].map((ms) => window.setTimeout(measure, ms));
     return () => {
       ro.disconnect();
       window.removeEventListener('resize', measure);
       window.removeEventListener('openswarm:canvas-pan-changed', measure);
+      document.removeEventListener('visibilitychange', measure);
       timers.forEach((tm) => window.clearTimeout(tm));
     };
   }, [dockedTo, dockParentExpanded, dockParentTiled, dockParentCard?.x, dockParentCard?.y, dockParentCard?.width, dockParentCard?.height, getCanvasState, dockParentCard]);
diff --git a/frontend/src/app/pages/Dashboard/cards/tileZones.ts b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
index a7d3e2cb..669d0ea6 100644
--- a/frontend/src/app/pages/Dashboard/cards/tileZones.ts
+++ b/frontend/src/app/pages/Dashboard/cards/tileZones.ts
@@ -123,7 +123,7 @@ export function useTiledStyle(
       ? el
       : (el.parentElement as HTMLElement | null) ?? el;
     const posProps = ['left', 'top'];
-    const sizeProps = ['width', 'height', 'transform', 'transform-origin'];
+    const sizeProps = ['width', 'height', 'transform', 'transform-origin', 'transition'];
     const clearAll = (): void => {
       posProps.forEach((pr) => posEl.style.removeProperty(pr));
       sizeProps.forEach((pr) => el.style.removeProperty(pr));
@@ -142,10 +142,18 @@ export function useTiledStyle(
       el.style.setProperty('height', `${s.height}px`, 'important');
       el.style.setProperty('transform', s.transform, 'important');
       el.style.setProperty('transform-origin', s.transformOrigin, 'important');
+      // Transitions OUTRANK inline important in the cascade, and in an occluded window they pin at
+      // t=0 forever, freezing the tile at stale geometry. Tiled cards track the camera instantly
+      // by design, so geometry must never animate here.
+      el.style.setProperty('transition', 'none', 'important');
     };
     apply();
     window.addEventListener('openswarm:canvas-pan-changed', apply);
     window.addEventListener('resize', apply);
+    // An occluded window freezes rAF (framer, the tracker below), so geometry set while hidden can
+    // land stale; re-apply the moment the window is visible again.
+    document.addEventListener('visibilitychange', apply);
+    window.addEventListener('focus', apply);
     // The workspace can change size WITHOUT a window resize (chrome collapsing on fullscreen-enter,
     // a banner appearing). These inline writes OVERRIDE the class styles, so they must re-measure on
     // the same signals the React path uses or the tile keeps the pre-collapse viewport (the
@@ -170,6 +178,8 @@ export function useTiledStyle(
     return () => {
       window.removeEventListener('openswarm:canvas-pan-changed', apply);
       window.removeEventListener('resize', apply);
+      document.removeEventListener('visibilitychange', apply);
+      window.removeEventListener('focus', apply);
       ro.disconnect();
       timers.forEach((tm) => window.clearTimeout(tm));
       window.cancelAnimationFrame(raf);
diff --git a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
index d8a6f0c7..438268ef 100644
--- a/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
+++ b/frontend/src/app/pages/Dashboard/geometry/dashboardTethers.ts
@@ -266,8 +266,8 @@ export function useTethers({
     // An "app:<output_id>" glow key targets a VIEW card (AppAgent driving an app); everything else is a browser card.
     const glowTarget = (id: string) => (id.startsWith('app:') ? viewCards[id.slice(4)] : browserCards[id]);
     for (const [browserId, { sourceId, fading, label }] of Object.entries(glowingBrowserCards)) {
-      // A docked browser renders INSIDE its chat; an arrow from the chat to it points at nothing.
-      if (browserCards[browserId]?.docked_to) continue;
+      // A docked card (browser OR app) renders INSIDE its chat; an arrow to it points at nothing.
+      if (glowTarget(browserId)?.docked_to) continue;
       if (sourceIsCollapsedChat(sourceId)) continue;
       const t = cardTether(
         glowTarget(browserId),

From d05afa04e0a394b361ab79843bc14f13a370dab2 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:21:09 -0700
Subject: [PATCH 236/248] [eric] design: history palette gets date groups +
 icon tiles + rounded hover rows (Raycast grammar), settings toggles never
 wrap, workflows empty state explains itself

---
 .../pages/Settings/sections/settingsStyles.ts |  1 +
 .../app/pages/Workflows/SchedulePopover.tsx   | 53 +++++++++++++------
 .../src/app/pages/Workflows/app/LeftRail.tsx  |  5 +-
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/pages/Settings/sections/settingsStyles.ts b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
index 4eb6c5fd..bb13ca9b 100644
--- a/frontend/src/app/pages/Settings/sections/settingsStyles.ts
+++ b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
@@ -66,6 +66,7 @@ export function makeSettingsStyles(c: ClaudeTokens) {
       color: c.text.muted,
       borderColor: c.border.medium,
       textTransform: 'none' as const,
+      whiteSpace: 'nowrap' as const,
       px: 1.75,
       py: 0.5,
       gap: 0.5,
diff --git a/frontend/src/app/pages/Workflows/SchedulePopover.tsx b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
index c0064f95..856f1dd9 100644
--- a/frontend/src/app/pages/Workflows/SchedulePopover.tsx
+++ b/frontend/src/app/pages/Workflows/SchedulePopover.tsx
@@ -6,6 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import BookmarkIcon from '@mui/icons-material/BookmarkBorderRounded';
 import SearchIcon from '@mui/icons-material/Search';
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonthRounded';
 import OpenInFullIcon from '@mui/icons-material/OpenInFullRounded';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -160,27 +161,37 @@ export default function SchedulePopover({
                 </Box>
               )}
             </Box>
-            <Box ref={historyScrollRef} onScroll={onHistoryScroll} sx={{ flex: 1, overflowY: 'auto', borderTop: `1px solid ${c.border.subtle}` }}>
+            <Box ref={historyScrollRef} onScroll={onHistoryScroll} sx={{ flex: 1, overflowY: 'auto', borderTop: `1px solid ${c.border.subtle}`, px: 0.75, py: 0.5 }}>
               {historyResults.length === 0 && !historyLoading && (
                 <Typography sx={{ px: 1.5, py: 2.5, fontSize: '0.8125rem', color: c.text.muted, textAlign: 'center' }}>{historyQuery ? 'No matching chats' : 'No chat history yet'}</Typography>
               )}
-              {historyResults.map((entry) => {
+              {historyResults.map((entry, idx) => {
                 const hasWorkflow = Boolean(workflowIconMap[entry.id]);
+                const bucket = dayBucket(entry.closed_at);
+                const prevBucket = idx > 0 ? dayBucket(historyResults[idx - 1].closed_at) : null;
                 return (
-                  <Box key={entry.id} onClick={() => onHistorySelect(entry.id)} sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 0.9, cursor: 'pointer', '&:hover': { bgcolor: c.bg.elevated } }}>
-                    <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</Typography>
-                    {/* Only annotate chats that became saved workflows.
-                        A small workflow glyph reads as a tag, where the
-                        old single-letter chip read as a random initial. */}
-                    {hasWorkflow && (
-                      <Tooltip title="This chat is saved as a workflow">
-                        <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 18, height: 18, borderRadius: '4px', color: c.text.muted }}>
-                          <BookmarkIcon sx={{ fontSize: 13 }} />
-                        </Box>
-                      </Tooltip>
+                  <React.Fragment key={entry.id}>
+                    {bucket !== prevBucket && (
+                      <Typography sx={{ px: 1, pt: idx === 0 ? 0.75 : 1.5, pb: 0.5, fontSize: '0.6563rem', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.text.ghost }}>{bucket}</Typography>
                     )}
-                    <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0, whiteSpace: 'nowrap' }}>{relTime(entry.closed_at)}</Typography>
-                  </Box>
+                    <Box onClick={() => onHistorySelect(entry.id)} sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1, py: 0.8, cursor: 'pointer', borderRadius: `${c.radius.md}px`, '&:hover': { bgcolor: c.bg.elevated } }}>
+                      <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, borderRadius: '7px', bgcolor: c.bg.elevated, color: c.text.muted, flexShrink: 0 }}>
+                        <ChatBubbleOutlineIcon sx={{ fontSize: 13 }} />
+                      </Box>
+                      <Typography sx={{ flex: 1, fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</Typography>
+                      {/* Only annotate chats that became saved workflows.
+                          A small workflow glyph reads as a tag, where the
+                          old single-letter chip read as a random initial. */}
+                      {hasWorkflow && (
+                        <Tooltip title="This chat is saved as a workflow">
+                          <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 18, height: 18, borderRadius: '4px', color: c.text.muted }}>
+                            <BookmarkIcon sx={{ fontSize: 13 }} />
+                          </Box>
+                        </Tooltip>
+                      )}
+                      <Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{relTime(entry.closed_at)}</Typography>
+                    </Box>
+                  </React.Fragment>
                 );
               })}
             </Box>
@@ -266,6 +277,18 @@ function ModeChip({ label, icon, active, onClick }: { label: string; icon: React
   );
 }
 
+function dayBucket(iso: string | null): string {
+  if (!iso) return 'Earlier';
+  const then = new Date(iso);
+  const now = new Date();
+  const startOfDay = (d: Date): number => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const dayDiff = Math.round((startOfDay(now) - startOfDay(then)) / 86400000);
+  if (dayDiff <= 0) return 'Today';
+  if (dayDiff === 1) return 'Yesterday';
+  if (dayDiff < 7) return 'This week';
+  return 'Earlier';
+}
+
 function relTime(iso: string | null): string {
   if (!iso) return '';
   const sec = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
diff --git a/frontend/src/app/pages/Workflows/app/LeftRail.tsx b/frontend/src/app/pages/Workflows/app/LeftRail.tsx
index 11625702..db1a07c5 100644
--- a/frontend/src/app/pages/Workflows/app/LeftRail.tsx
+++ b/frontend/src/app/pages/Workflows/app/LeftRail.tsx
@@ -135,7 +135,10 @@ const LeftRail: React.FC<{ nav: AppNav }> = ({ nav }) => {
           );
         })}
         {filtered.length === 0 && (
-          <div style={{ padding: '18px 10px', fontSize: 12.5, color: WC.muted2 }}>No workflows yet.</div>
+          <div style={{ padding: '18px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <div style={{ fontSize: 12.5, color: WC.muted2 }}>No workflows yet.</div>
+            <div style={{ fontSize: 11.5, color: WC.faint, lineHeight: 1.5 }}>Schedule anything an agent can do, or ask a chat to watch a folder or site for you.</div>
+          </div>
         )}
       </div>
 

From 3b68101b42f40968d00c213d3d95cb219503730f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:31:01 -0700
Subject: [PATCH 237/248] [eric] shell: pre-React boot paint from persisted
 theme (reload flashed a flat white frame for ~400ms before the wash mounted)

---
 frontend/public/index.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 00e577f6..cc93caf7 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -41,6 +41,28 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 </head>
 <body>
+  <script>
+    // Pre-React boot paint: last session's wash gradient (or the stock one) on the root element,
+    // so a reload never flashes a flat white frame while the bundle boots. Stock stops mirror
+    // DEFAULT_WASH_STOPS in shared/styles/washBackground.ts; keep them in sync by hand.
+    (function () {
+      try {
+        var mode = localStorage.getItem('self-swarm-theme-mode') === 'dark' ? 'dark' : 'light';
+        var g = null;
+        try { g = JSON.parse(localStorage.getItem('self-swarm-theme-gradient') || 'null'); } catch (e) {}
+        var accent = localStorage.getItem('self-swarm-theme-accent');
+        var stops = Array.isArray(g) && g.length > 1 ? g : (accent ? [accent, accent] : ['#B7CDEA', '#EFE0D2', '#E7BDD1']);
+        if (stops.length === 1) stops = [stops[0], stops[0]];
+        var alpha = parseFloat(localStorage.getItem('self-swarm-theme-wash-opacity') || '');
+        if (!isFinite(alpha) || alpha < 0 || alpha > 1) alpha = 0.17;
+        var a = Math.round(alpha * 255).toString(16);
+        if (a.length < 2) a = '0' + a;
+        var css = stops.map(function (hex, i) { return hex + a + ' ' + Math.round((i / (stops.length - 1)) * 100) + '%'; }).join(', ');
+        var base = mode === 'dark' ? '#3D3D3A' : '#F5F4ED';
+        document.documentElement.style.background = 'linear-gradient(115deg, ' + css + ') fixed, ' + base;
+      } catch (e) { /* boot paint is cosmetic; never block boot */ }
+    })();
+  </script>
   <div id="root"></div>
 </body>
 </html>
\ No newline at end of file

From 62521419df826e4d45f950ada025e034af877d7c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:37:24 -0700
Subject: [PATCH 238/248] [eric] design: settings de-vibe pass (usage $0.64 +
 continuous bars over pixel blocks, tools rows densified w/ one-line
 descriptions, skills form labels dropped, command chips unified neutral)

---
 frontend/src/app/pages/Commands/Commands.tsx  | 10 ++++------
 .../Settings/sections/usage/PixelBar.tsx      | 20 +++++--------------
 .../Settings/sections/usage/UsageStats.tsx    |  1 -
 frontend/src/app/pages/Skills/Skills.tsx      |  3 ---
 .../app/pages/Tools/cards/CustomToolCard.tsx  |  6 +++---
 .../src/app/pages/Tools/cards/ToolSection.tsx |  9 +++++----
 6 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/pages/Commands/Commands.tsx b/frontend/src/app/pages/Commands/Commands.tsx
index aa697e56..e5f927a5 100644
--- a/frontend/src/app/pages/Commands/Commands.tsx
+++ b/frontend/src/app/pages/Commands/Commands.tsx
@@ -260,10 +260,8 @@ export const CommandsContent: React.FC = () => {
                       fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
-                      bgcolor: cmd.type === 'mode' ? `${modesMap[cmd.id]?.color || c.accent.primary}15`
-                        : `${c.status.success}15`,
-                      color: cmd.type === 'mode' ? (modesMap[cmd.id]?.color || c.accent.primary)
-                        : c.status.success,
+                      bgcolor: c.bg.secondary,
+                      color: c.text.muted,
                     }}
                   />
                   <Typography
@@ -350,8 +348,8 @@ export const CommandsContent: React.FC = () => {
                       fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
-                      bgcolor: cmd.source === 'builtin' ? `${c.accent.primary}12` : cmd.source === 'view' ? '#f472b615' : `${c.status.info}15`,
-                      color: cmd.source === 'builtin' ? c.accent.primary : cmd.source === 'view' ? '#f472b6' : c.status.info,
+                      bgcolor: c.bg.secondary,
+                      color: c.text.muted,
                     }}
                   />
                   <Typography
diff --git a/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx b/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx
index 87192c2d..142add62 100644
--- a/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx
+++ b/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx
@@ -5,22 +5,12 @@ export const PIXEL_SALMON = ['#C46B57', '#D4795F', '#E8927A', '#F0A088', '#F5B49
 export const PIXEL_BLUE = ['#445588', '#5577AA', '#6688BB', '#7799CC', '#88AADD'];
 
 export const PixelBarOuter: React.FC<{ value: number; max: number; width?: number; palette?: string[]; tokens: any }> = ({ value, max, width = 16, palette = PIXEL_SALMON, tokens: c }) => {
-  const filled = max > 0 ? Math.max(value > 0 ? 1 : 0, Math.round((value / max) * width)) : 0;
+  // A continuous rounded bar reads professional where the old 5px pixel blocks read "vibey".
+  const pct = max > 0 ? Math.max(value > 0 ? 4 : 0, Math.round((value / max) * 100)) : 0;
+  const fill = palette[Math.floor(palette.length / 2)];
   return (
-    <Box sx={{ display: 'flex', gap: '1px', mt: 0.25 }}>
-      {Array.from({ length: width }, (_, i) => (
-        <Box
-          key={i}
-          sx={{
-            width: 5,
-            height: 5,
-            bgcolor: i < filled
-              ? palette[Math.min(palette.length - 1, Math.floor((i / Math.max(filled - 1, 1)) * (palette.length - 1)))]
-              : c.border.subtle,
-            opacity: i < filled ? 1 : 0.3,
-          }}
-        />
-      ))}
+    <Box sx={{ width: width * 6, maxWidth: '100%', height: 4, borderRadius: 2, bgcolor: c.border.subtle, mt: 0.5, overflow: 'hidden' }}>
+      <Box sx={{ width: `${pct}%`, height: '100%', borderRadius: 2, bgcolor: fill }} />
     </Box>
   );
 };
diff --git a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
index 15c8e0a8..73071c86 100644
--- a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
+++ b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
@@ -73,7 +73,6 @@ const UsageStats: React.FC = () => {
     if (v === 0) return '$0.00';
     if (v < 0.001) return `$${v.toFixed(6)}`;
     if (v < 0.01) return `$${v.toFixed(5)}`;
-    if (v < 1) return `$${v.toFixed(4)}`;
     return `$${v.toFixed(2)}`;
   };
   const formatDuration = (s: number) => {
diff --git a/frontend/src/app/pages/Skills/Skills.tsx b/frontend/src/app/pages/Skills/Skills.tsx
index 7523f880..25fc69ef 100644
--- a/frontend/src/app/pages/Skills/Skills.tsx
+++ b/frontend/src/app/pages/Skills/Skills.tsx
@@ -571,7 +571,6 @@ const Skills: React.FC = () => {
 
             {builderPreview.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
                 <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {builderPreview.description}
                 </Typography>
@@ -645,7 +644,6 @@ const Skills: React.FC = () => {
               </Box>
 
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
                 <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedReg.description}
                 </Typography>
@@ -731,7 +729,6 @@ const Skills: React.FC = () => {
 
             {selectedLocal.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
                 <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedLocal.description}
                 </Typography>
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
index ea28cb84..9224c70a 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
@@ -102,7 +102,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                     key={tool.id}
                     sx={{ bgcolor: c.bg.surface, border: `1px solid ${isExpanded ? c.accent.primary : c.border.subtle}`, borderRadius: 2, boxShadow: c.shadow.sm, '&:hover': { borderColor: isDisabled ? c.border.subtle : c.accent.primary, boxShadow: isDisabled ? undefined : '0 0 0 1px rgba(174,86,48,0.12)' }, transition: 'border-color 0.2s, box-shadow 0.2s' }}
                   >
-                    <CardContent sx={{ py: 1.5, px: 2, '&:last-child': { pb: 1.5 } }}>
+                    <CardContent sx={{ py: 1.1, px: 1.75, '&:last-child': { pb: 1.5 } }}>
                       <Box
                         sx={{ display: 'flex', alignItems: 'center', gap: 2, cursor: isDisabled ? 'default' : 'pointer' }}
                         data-onboarding={isYoutube ? 'actions-youtube-chevron' : isReddit ? 'actions-reddit-chevron' : undefined}
@@ -110,7 +110,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                       >
                         {ig && (
                           <Box sx={{
-                            width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            width: 30, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
                             bgcolor: `${ig.color}18`, fontSize: '1.125rem', fontWeight: 700, color: ig.color, flexShrink: 0,
                             opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s',
                           }}>
@@ -119,7 +119,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                         )}
                         <Box sx={{ flex: 1, minWidth: 0, opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s' }}>
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
-                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{tool.name}</Typography>
+                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9375rem' }}>{tool.name}</Typography>
                             {isMcp && <Chip icon={<ExtensionIcon sx={{ fontSize: 12 }} />} label={isStdio ? 'MCP · stdio' : 'MCP'} size="small" sx={{ bgcolor: `${c.status.warning}20`, color: c.status.warning, fontSize: '0.75rem', height: 24 }} />}
                             {tool.command && <Chip icon={<TerminalIcon sx={{ fontSize: 12 }} />} label={`/${tool.command}`} size="small" sx={{ bgcolor: 'rgba(174,86,48,0.12)', color: c.accent.hover, fontSize: '0.75rem', height: 22 }} />}
                             {tool.auth_status === 'connected' && !ig && (
diff --git a/frontend/src/app/pages/Tools/cards/ToolSection.tsx b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
index e42778f3..72257235 100644
--- a/frontend/src/app/pages/Tools/cards/ToolSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
@@ -95,13 +95,13 @@ const ToolSection: React.FC<ToolSectionProps> = ({
 
   return (
   <Card sx={{ bgcolor: c.bg.surface, border: `1px solid ${open && enabled ? c.accent.primary : c.border.subtle}`, borderRadius: 2, boxShadow: c.shadow.sm, '&:hover': { borderColor: c.accent.primary, boxShadow: '0 0 0 1px rgba(174,86,48,0.12)' }, transition: 'border-color 0.2s, box-shadow 0.2s' }}>
-    <CardContent sx={{ py: 1.5, px: 2, '&:last-child': { pb: 1.5 } }}>
+    <CardContent sx={{ py: 1.1, px: 1.75, '&:last-child': { pb: 1.1 } }}>
       <Box
         onClick={() => enabled && onToggle()}
         sx={{ display: 'flex', alignItems: 'center', gap: 2, cursor: enabled ? 'pointer' : 'default' }}
       >
         <Box sx={{
-          width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: 30, height: 30, borderRadius: 1.5, display: 'flex', alignItems: 'center', justifyContent: 'center',
           bgcolor: c.bg.secondary, color: c.text.tertiary, flexShrink: 0,
           opacity: enabled ? 1 : 0.4, transition: 'opacity 0.2s',
         }}>
@@ -109,16 +109,17 @@ const ToolSection: React.FC<ToolSectionProps> = ({
         </Box>
         <Box sx={{ flex: 1, minWidth: 0, opacity: enabled ? 1 : 0.4, transition: 'opacity 0.2s' }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{label}</Typography>
+            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9375rem' }}>{label}</Typography>
             <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
             {deferred && (
               <Chip label="on-demand" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
             )}
           </Box>
-          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{sectionDescription}</Typography>
+          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{sectionDescription}</Typography>
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
           <Switch
+            size="small"
             checked={enabled}
             onChange={(_, checked) => onEnabledChange(checked)}
             sx={{

From f5908610d6ef2cad0982650b671de6b3ba8f676a Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:41:40 -0700
Subject: [PATCH 239/248] [eric] design: settings surface uses system sans
 throughout (serif brand face read bookish in dense panes; this is the
 Linear/Claude settings feel)

---
 frontend/src/app/pages/Settings/Settings.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index cd6f3951..7f0243fd 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -259,6 +259,10 @@ const Settings: React.FC = () => {
           boxShadow: c.shadow.md,
           transition: 'none',
           overflow: 'hidden',
+          // The serif brand face reads bookish inside dense settings panes; system sans here is
+          // what makes Claude/Linear-grade settings feel engineered. Mono labels keep their own
+          // stack (their per-component sx classes land later in the sheet and win).
+          '& .MuiTypography-root, & .MuiButton-root, & .MuiToggleButton-root, & .MuiChip-label, & .MuiInputBase-root': { fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif' },
         },
       }}
     >

From 5d0bbb553c542b06ef443ea9b5f222d7ac618a0b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:47:47 -0700
Subject: [PATCH 240/248] [eric] design: Inter (bundled variable font) is the
 app-wide UI face; the serif-leaning stack read bookish, Inter is the
 Linear/Figma/GitHub-proven professional standard

---
 frontend/package-lock.json                   | 10 ++++++++++
 frontend/package.json                        |  1 +
 frontend/src/app/pages/Settings/Settings.tsx |  4 ----
 frontend/src/index.tsx                       |  1 +
 frontend/src/shared/styles/claudeTokens.ts   |  4 ++--
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f5f40034..83b1a80e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "@codemirror/view": "^6.39.16",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
+        "@fontsource-variable/inter": "^5.3.0",
         "@mui/icons-material": "^7.3.9",
         "@mui/material": "^7.3.9",
         "@pierre/diffs": "^1.0.11",
@@ -2566,6 +2567,15 @@
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e115efb0..4e7c16ba 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@codemirror/view": "^6.39.16",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@fontsource-variable/inter": "^5.3.0",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
     "@pierre/diffs": "^1.0.11",
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index 7f0243fd..cd6f3951 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -259,10 +259,6 @@ const Settings: React.FC = () => {
           boxShadow: c.shadow.md,
           transition: 'none',
           overflow: 'hidden',
-          // The serif brand face reads bookish inside dense settings panes; system sans here is
-          // what makes Claude/Linear-grade settings feel engineered. Mono labels keep their own
-          // stack (their per-component sx classes land later in the sheet and win).
-          '& .MuiTypography-root, & .MuiButton-root, & .MuiToggleButton-root, & .MuiChip-label, & .MuiInputBase-root': { fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif' },
         },
       }}
     >
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 865b4540..67731757 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,3 +1,4 @@
+import '@fontsource-variable/inter';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Main from './app/Main';
diff --git a/frontend/src/shared/styles/claudeTokens.ts b/frontend/src/shared/styles/claudeTokens.ts
index 3e1c7bba..8a42ede7 100644
--- a/frontend/src/shared/styles/claudeTokens.ts
+++ b/frontend/src/shared/styles/claudeTokens.ts
@@ -83,7 +83,7 @@ export const lightTokens: ClaudeTokens = {
   },
   user: { bubble: '#DDD9CE' },
   font: {
-    sans: '"Anthropic Sans", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    sans: '"Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
     size: fontSize,
   },
@@ -135,7 +135,7 @@ export const darkTokens: ClaudeTokens = {
   },
   user: { bubble: '#393937' },
   font: {
-    sans: '"Anthropic Sans", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    sans: '"Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
     size: fontSize,
   },

From 96c4639bdfdd99757c1b1a8bc62d3f2706c2e9ba Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:52:11 -0700
Subject: [PATCH 241/248] [eric] composer: placeholder is 'Ask me to do
 anything...' (dropped the 'sir' bit)

---
 frontend/src/app/pages/Dashboard/DashboardToolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 32d16edd..ba36c4de 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -98,7 +98,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
     }, [settingsLoaded, defaultMode, defaultModel, defaultThinkingLevel]);
     // Ghost-text predictions: what the user might type next, in their own voice. Fetched once per app
     // load (cached), then one is shown at a time and cycled while the composer sits idle+empty. Empty
-    // list (no signal / no provider / error) just leaves the static "What should I do sir..." placeholder.
+    // list (no signal / no provider / error) just leaves the static "Ask me to do anything..." placeholder.
     const [ghostList, setGhostList] = useState<string[]>([]);
     const ghostFetchedRef = useRef(false);
     useEffect(() => {
@@ -443,7 +443,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                 thinkingLevel={thinkingLevel}
                 onThinkingLevelChange={handleThinkingLevelChange}
                 prefillPrompt={prefillPrompt}
-                placeholderOverride="What should I do sir..."
+                placeholderOverride="Ask me to do anything..."
                 ghostSuggestion={ghostSuggestion}
               />
             </DarkTokensScope>

From 9ac91b94e4d412db12cf715825984b138a746d4b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 19:04:41 -0700
Subject: [PATCH 242/248] [eric] ui: tile menu gets a hover runway + longer
 grace (vanished mid-approach); text size range widened to 0.8-1.35 (Tiny to
 Largest)

---
 frontend/src/app/pages/Dashboard/cards/WindowControls.tsx    | 5 ++++-
 .../app/pages/Settings/sections/general/GeneralInterface.tsx | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 943d9ee3..9b3d556d 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -68,7 +68,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
     if (!menuHot) { setMenuHot(true); requestAnimationFrame(() => setMenuOpen(true)); return; }
     setMenuOpen(true);
   };
-  const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 320); };
+  const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 550); };
   const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
 
   const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
@@ -99,6 +99,9 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
           onMouseEnter={openMenu} onMouseLeave={scheduleClose}
           sx={{
             position: 'absolute', top: 19, width: 216, background: '#FFFFFF',
+            // Invisible runway over the button-to-menu gap: without it the pointer crosses dead
+            // space, mouseleave fires, and the menu vanishes mid-approach ("baited").
+            '&::before': { content: '""', position: 'absolute', top: -20, left: 0, right: 0, height: 20 },
             ...(alignRight ? { right: -8 } : { left: -8 }),
             border: '1px solid rgba(0,0,0,0.06)', borderRadius: '12px', boxShadow: '0 .5rem 2rem rgba(0,0,0,.14)',
             p: 1.25, zIndex: 1200, transformOrigin: alignRight ? 'top right' : 'top left',
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 81ea84eb..c66ea94e 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -61,10 +61,12 @@ const GeneralInterface: React.FC<{
           size="small"
           sx={toggleGroupSx}
         >
+          <ToggleButton value={0.8}>Tiny</ToggleButton>
           <ToggleButton value={0.9}>Small</ToggleButton>
           <ToggleButton value={1}>Default</ToggleButton>
           <ToggleButton value={1.1}>Large</ToggleButton>
-          <ToggleButton value={1.2}>Largest</ToggleButton>
+          <ToggleButton value={1.2}>Larger</ToggleButton>
+          <ToggleButton value={1.35}>Largest</ToggleButton>
         </ToggleButtonGroup>
       </Box>
 

From ec9b5766154842ee4b6da7433ff0dd0aadc53869 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 20:44:41 -0700
Subject: [PATCH 243/248] [eric] voice+onboarding: aurora hues
 widened/jittered/desaturated (three tight bands read segmented); prep prompt
 forbids fabricating specifics when evidence is empty

---
 backend/apps/onboarding/prep/prompts.py    |  4 ++++
 frontend/src/shared/voice/VoiceOverlay.tsx | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/backend/apps/onboarding/prep/prompts.py b/backend/apps/onboarding/prep/prompts.py
index 700c9629..b2c5e75e 100644
--- a/backend/apps/onboarding/prep/prompts.py
+++ b/backend/apps/onboarding/prep/prompts.py
@@ -1,6 +1,10 @@
 """The two aux prompts behind the personalized reveal: the profile distill and the full prep shape."""
 
 PREP_SYSTEM = (
+    "Ground every claim in the evidence you were given (scan, picks, usage summary). If the "
+    "evidence is thin or empty, stay warm but GENERIC; NEVER invent specific tools, apps, or "
+    "habits the user did not show you (a fabricated 'you use Ollama and Docker' reads as creepy "
+    "and wrong to someone who does not). "
     "You write first-run starter tasks for OpenSwarm, a desktop AI agent platform that can "
     "organize local files, browse the web in a real browser, build small apps, and run agents in parallel. "
     "Given facts about the user's machine and the apps they picked, respond with STRICT JSON only: "
diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index 40d9d721..4ae8b3bf 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -65,9 +65,13 @@ const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({
 
   // Opposite side of the wheel from the chosen accent, with two flanking hues for a real gradient.
   const { h } = hexToHue(accent || '#6b62f0');
-  const c0 = `hsl(${(h + 156) % 360} 92% 62%)`;
-  const c1 = `hsl(${(h + 180) % 360} 94% 58%)`;
-  const c2 = `hsl(${(h + 204) % 360} 92% 64%)`;
+  // Wide, softly randomized spread around the complement: three tight neon bands read segmented
+  // (the red/orange/yellow stripe complaint); jittered hues + lower saturation blend like a real
+  // aurora while staying distinguishable. Jitter is per-mount so each dictation feels alive.
+  const jitter = React.useMemo(() => [Math.random() * 30 - 15, Math.random() * 20 - 10, Math.random() * 30 - 15], []);
+  const c0 = `hsl(${(h + 120 + jitter[0] + 360) % 360} 74% 64%)`;
+  const c1 = `hsl(${(h + 180 + jitter[1]) % 360} 78% 60%)`;
+  const c2 = `hsl(${(h + 240 + jitter[2]) % 360} 74% 66%)`;
   return (
     <div style={{ position: 'fixed', left: 0, right: 0, bottom: 0, height: 170, zIndex: 2147482999, pointerEvents: 'none', overflow: 'visible' }}>
       {LOBES.map((lobe, i) => {

From ad8d9ca24042a25927ce049e8e248395f79b8a78 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 20:46:31 -0700
Subject: [PATCH 244/248] [eric] voice: mic tap stops an active recording
 (async start ate the tap's press-end); composer mic tooltip shows the real
 dictation combo, not F5

---
 .../src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx    | 3 ++-
 frontend/src/shared/voice/VoiceDictationContext.tsx         | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
index cac473c4..faffeaa4 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { comboDisplay, dictationDefaultCombo } from '@/app/pages/Settings/sections/general/ShortcutRecorderChip';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
@@ -160,7 +161,7 @@ function DesktopSpawnPill({
         >
           <AddRounded sx={{ fontSize: 18 }} />
         </Box>
-        <Tooltip title={recording ? 'Stop dictation' : preparing ? `Downloading voice model ${voicePct}%` : 'Dictate (F5)'} placement="top" arrow>
+        <Tooltip title={recording ? 'Stop dictation' : preparing ? `Downloading voice model ${voicePct}%` : `Dictate (${comboDisplay(dictationDefaultCombo())})`} placement="top" arrow>
           <Box
             role="button"
             aria-label="Voice dictation"
diff --git a/frontend/src/shared/voice/VoiceDictationContext.tsx b/frontend/src/shared/voice/VoiceDictationContext.tsx
index 28da3f15..b78a2d65 100644
--- a/frontend/src/shared/voice/VoiceDictationContext.tsx
+++ b/frontend/src/shared/voice/VoiceDictationContext.tsx
@@ -24,11 +24,15 @@ export function VoiceDictationProvider({ children }: { children: React.ReactNode
 
   const pressStart = useCallback((): void => {
     if (holdMode) {
+      // A TAP while recording must stop: the quick tap's press-end fires before the async start
+      // flips state to 'recording', so without this the mic could be started by a click but never
+      // stopped by one.
+      if (stateRef.current === 'recording') { heldRef.current = false; void stop(); return; }
       if (stateRef.current === 'idle') { heldRef.current = true; void start(); }
     } else {
       toggle();
     }
-  }, [holdMode, start, toggle]);
+  }, [holdMode, start, stop, toggle]);
 
   const pressEnd = useCallback((): void => {
     if (holdMode && heldRef.current) {

From 0469cfe74b88ddfbbc052ae025ca34b83e93830e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 20:49:56 -0700
Subject: [PATCH 245/248] [eric] voice: aurora lobes overlap heavily in one
 tight hue family (wide-spread hues in separated lobes read as rainbow
 patches)

---
 frontend/src/shared/voice/VoiceOverlay.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index 4ae8b3bf..ef4d8d30 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -31,9 +31,9 @@ function hexToHue(hex: string): { h: number; s: number; l: number } {
 }
 
 const LOBES = [
-  { left: '14%', width: '58vw', drift: 0.9, phase: 0.0 },
-  { left: '50%', width: '74vw', drift: 0.7, phase: 2.1 },
-  { left: '86%', width: '52vw', drift: 1.15, phase: 4.2 },
+  { left: '30%', width: '95vw', drift: 0.9, phase: 0.0 },
+  { left: '50%', width: '110vw', drift: 0.7, phase: 2.1 },
+  { left: '70%', width: '95vw', drift: 1.15, phase: 4.2 },
 ];
 
 const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({ volumeRef }) => {
@@ -68,10 +68,10 @@ const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({
   // Wide, softly randomized spread around the complement: three tight neon bands read segmented
   // (the red/orange/yellow stripe complaint); jittered hues + lower saturation blend like a real
   // aurora while staying distinguishable. Jitter is per-mount so each dictation feels alive.
-  const jitter = React.useMemo(() => [Math.random() * 30 - 15, Math.random() * 20 - 10, Math.random() * 30 - 15], []);
-  const c0 = `hsl(${(h + 120 + jitter[0] + 360) % 360} 74% 64%)`;
-  const c1 = `hsl(${(h + 180 + jitter[1]) % 360} 78% 60%)`;
-  const c2 = `hsl(${(h + 240 + jitter[2]) % 360} 74% 66%)`;
+  const jitter = React.useMemo(() => [Math.random() * 16 - 8, Math.random() * 12 - 6, Math.random() * 16 - 8], []);
+  const c0 = `hsl(${(h + 158 + jitter[0] + 360) % 360} 68% 63%)`;
+  const c1 = `hsl(${(h + 180 + jitter[1]) % 360} 72% 60%)`;
+  const c2 = `hsl(${(h + 202 + jitter[2]) % 360} 68% 65%)`;
   return (
     <div style={{ position: 'fixed', left: 0, right: 0, bottom: 0, height: 170, zIndex: 2147482999, pointerEvents: 'none', overflow: 'visible' }}>
       {LOBES.map((lobe, i) => {
@@ -84,7 +84,7 @@ const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({
               position: 'absolute', bottom: -40, left: lobe.left, width: lobe.width, height: 190,
               transform: 'translateX(-50%) scale(1, 0.45)', transformOrigin: 'bottom center',
               background: `radial-gradient(ellipse at 50% 100%, ${col} 0%, ${col}00 70%)`,
-              filter: 'blur(26px)', opacity: 0.3, willChange: 'transform, opacity',
+              filter: 'blur(48px)', opacity: 0.26, willChange: 'transform, opacity',
             }}
           />
         );

From 96a3e51c8329ad8f0f1c429b22a566482cd7ebbd Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 20:53:20 -0700
Subject: [PATCH 246/248] [eric] voice: aurora rebuilt as six interleaved
 alternating-hue wisps + single-hue base glow (adjacent same-order lobes and
 the L-to-R strip were the segmentation)

---
 frontend/src/shared/voice/VoiceOverlay.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/shared/voice/VoiceOverlay.tsx b/frontend/src/shared/voice/VoiceOverlay.tsx
index ef4d8d30..c64f223a 100644
--- a/frontend/src/shared/voice/VoiceOverlay.tsx
+++ b/frontend/src/shared/voice/VoiceOverlay.tsx
@@ -30,10 +30,15 @@ function hexToHue(hex: string): { h: number; s: number; l: number } {
   return { h, s: sat * 100, l: l * 100 };
 }
 
+// Interleaved wisps, like colored gases: neighbors always carry a DIFFERENT hue and overlap ~70%,
+// so mixture happens everywhere instead of three tinted patches sitting in a row.
 const LOBES = [
-  { left: '30%', width: '95vw', drift: 0.9, phase: 0.0 },
-  { left: '50%', width: '110vw', drift: 0.7, phase: 2.1 },
-  { left: '70%', width: '95vw', drift: 1.15, phase: 4.2 },
+  { left: '18%', width: '80vw', height: 200, drift: 0.9, phase: 0.0, hue: 0 },
+  { left: '34%', width: '95vw', height: 165, drift: 0.65, phase: 2.1, hue: 2 },
+  { left: '47%', width: '85vw', height: 210, drift: 1.1, phase: 4.2, hue: 1 },
+  { left: '60%', width: '100vw', height: 170, drift: 0.8, phase: 1.3, hue: 0 },
+  { left: '73%', width: '85vw', height: 205, drift: 1.2, phase: 3.4, hue: 2 },
+  { left: '88%', width: '78vw', height: 175, drift: 0.7, phase: 5.1, hue: 1 },
 ];
 
 const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({ volumeRef }) => {
@@ -75,16 +80,16 @@ const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({
   return (
     <div style={{ position: 'fixed', left: 0, right: 0, bottom: 0, height: 170, zIndex: 2147482999, pointerEvents: 'none', overflow: 'visible' }}>
       {LOBES.map((lobe, i) => {
-        const col = [c0, c1, c2][i];
+        const col = [c0, c1, c2][lobe.hue];
         return (
           <div
             key={i}
             ref={(el) => { lobeRefs.current[i] = el; }}
             style={{
-              position: 'absolute', bottom: -40, left: lobe.left, width: lobe.width, height: 190,
+              position: 'absolute', bottom: -40, left: lobe.left, width: lobe.width, height: lobe.height,
               transform: 'translateX(-50%) scale(1, 0.45)', transformOrigin: 'bottom center',
               background: `radial-gradient(ellipse at 50% 100%, ${col} 0%, ${col}00 70%)`,
-              filter: 'blur(48px)', opacity: 0.26, willChange: 'transform, opacity',
+              filter: 'blur(52px)', opacity: 0.17, willChange: 'transform, opacity',
             }}
           />
         );
@@ -92,7 +97,7 @@ const VoiceAurora: React.FC<{ volumeRef: React.MutableRefObject<number> }> = ({
       <div
         style={{
           position: 'absolute', left: 0, right: 0, bottom: 0, height: 90,
-          background: `linear-gradient(to right, ${c0}44, ${c1}55, ${c2}44)`,
+          background: `linear-gradient(to right, ${c1}33, ${c1}55, ${c1}33)`,
           maskImage: 'linear-gradient(to top, black 0%, transparent 100%)',
           WebkitMaskImage: 'linear-gradient(to top, black 0%, transparent 100%)',
           filter: 'blur(10px)',

From 7a74443b0794fb1a92bf0bfacf8fbfec3b1223af Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 21:17:31 -0700
Subject: [PATCH 247/248] [eric] tiles: dragging an edge of a tiled browser/app
 exits the tile and resizes from its exact spot (macOS-style)

---
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 20 ++++++++++++++++---
 .../Dashboard/cards/DashboardViewCard.tsx     | 20 ++++++++++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index 4f6f1c64..db6029c4 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { store } from '@/shared/state/store';
 import { createPortal } from 'react-dom';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -44,7 +45,7 @@ import {
   type BrowserTab,
 } from '@/shared/state/dashboardLayoutSlice';
 import WindowControls from './WindowControls';
-import { useTiledStyle } from './tileZones';
+import { useTiledStyle, computeTiledStyle } from './tileZones';
 import { saveMinimizedShot } from '../desktop/minimizedShots';
 import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
 import { createSelector } from '@reduxjs/toolkit';
@@ -890,14 +891,27 @@ const BrowserCard: React.FC<Props> = ({
       if (e.button !== 0) return;
       e.preventDefault();
       e.stopPropagation();
+      // Grabbing an edge of a TILED card exits the tile and resizes from exactly where it sat,
+      // macOS-style; without this the handles resized the stale free-position geometry.
+      let origX = cardX, origY = cardY, origW = cardWidth, origH = cardHeight;
+      const zone = store.getState().dashboardLayout.tiledCards[browserId];
+      if (zone) {
+        const cam = getCanvasState();
+        const ts = computeTiledStyle(zone, cam.panX, cam.panY, cam.zoom);
+        if (ts) {
+          origX = ts.left; origY = ts.top; origW = ts.width / cam.zoom; origH = ts.height / cam.zoom;
+          setLocalResize({ x: origX, y: origY, w: origW, h: origH });
+          dispatch(clearTiledCard(browserId));
+        }
+      }
       resizeRef.current = {
         dir, startX: e.clientX, startY: e.clientY,
-        origX: cardX, origY: cardY, origW: cardWidth, origH: cardHeight,
+        origX, origY, origW, origH,
       };
       setIsResizing(true);
       (e.target as HTMLElement).setPointerCapture(e.pointerId);
     },
-    [cardX, cardY, cardWidth, cardHeight],
+    [cardX, cardY, cardWidth, cardHeight, getCanvasState, dispatch],
   );
 
   const computeResize = useCallback(
diff --git a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
index fe96abae..73c24a3b 100644
--- a/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { store } from '@/shared/state/store';
 import { createPortal } from 'react-dom';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
@@ -21,7 +22,7 @@ import { expandSession } from '@/shared/state/agentsSlice';
 import WindowControls from './WindowControls';
 import { openCardContextMenu } from '../desktop/CardContextMenu';
 import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
-import { useTiledStyle } from './tileZones';
+import { useTiledStyle, computeTiledStyle } from './tileZones';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { API_BASE, getAuthToken } from '@/shared/config';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
@@ -478,14 +479,27 @@ const DashboardViewCard: React.FC<Props> = ({
       if (e.button !== 0) return;
       e.preventDefault();
       e.stopPropagation();
+      // Grabbing an edge of a TILED card exits the tile and resizes from exactly where it sat,
+      // macOS-style; without this the handles resized the stale free-position geometry.
+      let origX = cardX, origY = cardY, origW = cardWidth, origH = cardHeight;
+      const zone = store.getState().dashboardLayout.tiledCards[cardKey];
+      if (zone) {
+        const cam = getCanvasState();
+        const ts = computeTiledStyle(zone, cam.panX, cam.panY, cam.zoom);
+        if (ts) {
+          origX = ts.left; origY = ts.top; origW = ts.width / cam.zoom; origH = ts.height / cam.zoom;
+          setLocalResize({ x: origX, y: origY, w: origW, h: origH });
+          dispatch(clearTiledCard(cardKey));
+        }
+      }
       resizeRef.current = {
         dir, startX: e.clientX, startY: e.clientY,
-        origX: cardX, origY: cardY, origW: cardWidth, origH: cardHeight,
+        origX, origY, origW, origH,
       };
       setIsResizing(true);
       (e.target as HTMLElement).setPointerCapture(e.pointerId);
     },
-    [cardX, cardY, cardWidth, cardHeight],
+    [cardX, cardY, cardWidth, cardHeight, getCanvasState, dispatch],
   );
 
   const computeResize = useCallback(

From b1233da12c5314b4a9aecc8f67032005de3f0ad1 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 21:21:55 -0700
Subject: [PATCH 248/248] [eric] tiles: chats also exit the tile on edge-drag;
 tile-menu runway shrunk to the 8px gap (it was overlaying the green button
 and eating its clicks)

---
 .../app/pages/Dashboard/cards/AgentCard.tsx   | 26 ++++++++++++++-----
 .../pages/Dashboard/cards/WindowControls.tsx  |  2 +-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
index 467b92fe..e858af1a 100644
--- a/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
@@ -37,7 +37,7 @@ import {
   clearTiledCard,
 } from '@/shared/state/dashboardLayoutSlice';
 import WindowControls, { ARC_CHIP_SX } from './WindowControls';
-import { useTiledStyle } from './tileZones';
+import { useTiledStyle, computeTiledStyle } from './tileZones';
 import AgentNarratorPill from '../desktop/AgentNarratorPill';
 import { openCardContextMenu } from '../desktop/CardContextMenu';
 import { extractLatestTodos } from '../desktop/agentTodos';
@@ -559,21 +559,35 @@ const AgentCard: React.FC<Props> = ({
       if (e.button !== 0) return;
       e.preventDefault();
       e.stopPropagation();
-      const effectiveW = Math.max(cardWidth, MIN_W);
-      const effectiveH = expanded ? Math.max(EXPANDED_OVERLAY_H, cardHeight) : cardHeight;
+      let effectiveX = cardX;
+      let effectiveY = cardY;
+      let effectiveW = Math.max(cardWidth, MIN_W);
+      let effectiveH = expanded ? Math.max(EXPANDED_OVERLAY_H, cardHeight) : cardHeight;
+      // Grabbing an edge of a TILED chat exits the tile and resizes from exactly where it sat,
+      // macOS-style; without this the handles resized the stale free-position geometry.
+      if (tileZone) {
+        const cam = getCanvasState();
+        const ts = computeTiledStyle(tileZone, cam.panX, cam.panY, cam.zoom);
+        if (ts) {
+          effectiveX = ts.left; effectiveY = ts.top;
+          effectiveW = ts.width / cam.zoom; effectiveH = ts.height / cam.zoom;
+          setLocalResize({ x: effectiveX, y: effectiveY, w: effectiveW, h: effectiveH });
+          dispatch(clearTiledCard(session.id));
+        }
+      }
       resizeRef.current = {
         dir,
         startX: e.clientX,
         startY: e.clientY,
-        origX: cardX,
-        origY: cardY,
+        origX: effectiveX,
+        origY: effectiveY,
         origW: effectiveW,
         origH: effectiveH,
       };
       setIsResizing(true);
       (e.target as HTMLElement).setPointerCapture(e.pointerId);
     },
-    [cardX, cardY, cardWidth, cardHeight, expanded],
+    [cardX, cardY, cardWidth, cardHeight, expanded, tileZone, dispatch, session.id],
   );
 
   const computeResize = useCallback(
diff --git a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
index 9b3d556d..03fc8606 100644
--- a/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
@@ -101,7 +101,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, noTileMenu }: Wind
             position: 'absolute', top: 19, width: 216, background: '#FFFFFF',
             // Invisible runway over the button-to-menu gap: without it the pointer crosses dead
             // space, mouseleave fires, and the menu vanishes mid-approach ("baited").
-            '&::before': { content: '""', position: 'absolute', top: -20, left: 0, right: 0, height: 20 },
+            '&::before': { content: '""', position: 'absolute', top: -8, left: 0, right: 0, height: 8 },
             ...(alignRight ? { right: -8 } : { left: -8 }),
             border: '1px solid rgba(0,0,0,0.06)', borderRadius: '12px', boxShadow: '0 .5rem 2rem rgba(0,0,0,.14)',
             p: 1.25, zIndex: 1200, transformOrigin: alignRight ? 'top right' : 'top left',