feat(maestro): port layout system (tabs, splits, multiview) to React

Closes #249: layoutStore.ts wraps the existing layout.ts tree model
in Zustand, persisting to localStorage on a 400ms debounce and adding
boot reconciliation to prune leaves for sessions no longer live.
MultiView/TabBar/PaneContainer/PaneTitle render tabs, nested splits
with draggable dividers, drag-and-drop tab reordering, and dispatch
each pane to TerminalPane or StructuredPane by session view.

Preview mode (#251) and sidebar drag-to-dock stay out of scope here.

web/index.html

@@ -24,6 +24,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

web/src/components/layout/MultiView.test.tsx

@@ -0,0 +1,96 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { leaves } from "../../layout.js";
+import { createLayoutStore } from "../../stores/layoutStore.js";
+import type { Session } from "../../types.js";
+import { MultiView } from "./MultiView.js";
+
+vi.mock("../terminal/TerminalPane.js", () => ({
+  TerminalPane: ({ sessionId }: { sessionId: string }) => <div data-testid={`terminal-${sessionId}`} />,
+}));
+
+vi.mock("../structured/StructuredPane.js", () => ({
+  StructuredPane: ({ sessionId }: { sessionId: string }) => <div data-testid={`structured-${sessionId}`} />,
+}));
+
+afterEach(cleanup);
+
+function store() {
+  return createLayoutStore({
+    load: () => null,
+    save: vi.fn(),
+    scheduler: { setTimer: () => 1, clearTimer: () => {} },
+  });
+}
+
+function session(id: string, over: Partial<Session> = {}): Session {
+  return {
+    id,
+    cwd: "/home/n",
+    command: "claude",
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: "2026-01-01T00:00:00Z",
+    ...over,
+  } as Session;
+}
+
+describe("MultiView", () => {
+  it("shows the empty state when the active tab has no panes", () => {
+    const s = store();
+    render(<MultiView store={s} />);
+    expect(screen.getByText(/No session open/)).toBeTruthy();
+  });
+
+  it("renders a pane per leaf, dispatching to the terminal or structured body", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    s.getState().openSessionBeside("s2");
+    const sessions = new Map([
+      ["s1", session("s1")],
+      ["s2", session("s2", { view: "Structured" })],
+    ]);
+    render(<MultiView store={s} sessions={sessions} />);
+    expect(screen.getByTestId("terminal-s1")).toBeTruthy();
+    expect(screen.getByTestId("structured-s2")).toBeTruthy();
+  });
+
+  it("split right adds a second pane to the tree", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    render(<MultiView store={s} sessions={new Map([["s1", session("s1")]])} />);
+    fireEvent.click(screen.getByTitle("Split right"));
+    expect(screen.getAllByText("Empty pane")).toHaveLength(1);
+  });
+
+  it("close pane removes it", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    const leafId = leaves(s.getState().layout.tabs[0].root)[0].id;
+    s.getState().splitFocused(leafId, "row"); // adds an empty leaf beside s1
+    render(<MultiView store={s} sessions={new Map([["s1", session("s1")]])} />);
+    // splitFocused(after: true) puts the fresh empty leaf second — close it.
+    fireEvent.click(screen.getAllByTitle("Close pane")[1]);
+    expect(screen.queryByText("Empty pane")).toBeNull();
+    expect(screen.getByTestId("terminal-s1")).toBeTruthy();
+  });
+
+  it("prunes a leaf whose session no longer exists, once the live set is known", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    s.getState().openSessionBeside("dead");
+    render(<MultiView store={s} sessions={new Map([["s1", session("s1")]])} />);
+    expect(screen.getByTestId("terminal-s1")).toBeTruthy();
+    expect(screen.queryByTestId("terminal-dead")).toBeNull();
+  });
+
+  it("does not touch the layout while the live set is still unknown", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    render(<MultiView store={s} />);
+    expect(screen.getByTestId("terminal-s1")).toBeTruthy();
+  });
+});

web/src/components/layout/MultiView.tsx

@@ -0,0 +1,203 @@
+// React port of multiview.ts's tab + split tree (issue #249). Preview mode
+// (docs/PREVIEW.md) is issue #251; sidebar drag-to-dock and the mobile
+// single-pane collapse stay with whichever issue wires this into the shell
+// (#253) — this renders the tree itself: tabs, nested splits, pane chrome.
+
+import type { ReactNode } from "react";
+import { useEffect, useRef } from "react";
+import { useStore } from "zustand";
+
+import { activeTab, type Dir, type Node } from "../../layout.js";
+import type { LayoutStore, LayoutStoreApi } from "../../stores/layoutStore.js";
+import type { Session, Uuid } from "../../types.js";
+import { PaneContainer } from "./PaneContainer.js";
+import { PaneTitle } from "./PaneTitle.js";
+import { TabBar } from "./TabBar.js";
+
+export interface MultiViewProps {
+  store: LayoutStoreApi;
+  /** Live sessions, keyed by id — drives pane titles and (once known) boot
+   *  reconciliation. Passing `undefined` defers reconciliation. */
+  sessions?: ReadonlyMap<Uuid, Session>;
+  onDisconnect?: (sessionId: Uuid) => void;
+  emptyState?: ReactNode;
+}
+
+export function MultiView({ store, sessions, onDisconnect, emptyState }: MultiViewProps) {
+  const layout = useStore(store, (s: LayoutStore) => s.layout);
+  const tab = activeTab(layout);
+
+  const reconciledRef = useRef(false);
+  useEffect(() => {
+    if (reconciledRef.current || !sessions) return;
+    reconciledRef.current = true;
+    store.getState().reconcile(new Set(sessions.keys()));
+  }, [sessions, store]);
+
+  return (
+    <div className="mv flex h-full min-h-0 flex-col">
+      <TabBar store={store} />
+      <div className="mv-canvas min-h-0 flex-1">
+        {tab.root ? (
+          <SplitNode node={tab.root} tab={tab} store={store} sessions={sessions} onDisconnect={onDisconnect} />
+        ) : (
+          (emptyState ?? (
+            <div className="mv-empty flex h-full items-center justify-center p-sp-4 text-fs-13 text-faint">
+              No session open — pick one from the sidebar, or spawn a new one.
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface TreeProps {
+  tab: { id: string; focusedLeafId: string | null };
+  store: LayoutStoreApi;
+  sessions?: ReadonlyMap<Uuid, Session>;
+  onDisconnect?: (sessionId: Uuid) => void;
+}
+
+function SplitNode({ node, ...rest }: TreeProps & { node: Node }) {
+  if (node.kind === "leaf") {
+    return <Pane leaf={node} isFocused={rest.tab.focusedLeafId === node.id} {...rest} />;
+  }
+  return <SplitContainer node={node} {...rest} />;
+}
+
+function SplitContainer({ node, ...rest }: TreeProps & { node: Extract<Node, { kind: "split" }> }) {
+  const slotA = useRef<HTMLDivElement | null>(null);
+  const slotB = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const onDividerPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const divider = e.currentTarget;
+    const container = containerRef.current;
+    if (!container) return;
+    divider.setPointerCapture(e.pointerId);
+    const rect = container.getBoundingClientRect();
+    const move = (ev: PointerEvent) => {
+      const frac =
+        node.dir === "row" ? (ev.clientX - rect.left) / rect.width : (ev.clientY - rect.top) / rect.height;
+      node.ratio = Math.max(0.1, Math.min(0.9, frac));
+      if (slotA.current) slotA.current.style.flexGrow = String(node.ratio);
+      if (slotB.current) slotB.current.style.flexGrow = String(1 - node.ratio);
+    };
+    const up = (ev: PointerEvent) => {
+      try {
+        divider.releasePointerCapture(ev.pointerId);
+      } catch {
+        // already released
+      }
+      divider.removeEventListener("pointermove", move);
+      divider.removeEventListener("pointerup", up);
+      rest.store.getState().commitLayout();
+    };
+    divider.addEventListener("pointermove", move);
+    divider.addEventListener("pointerup", up);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`mv-split flex h-full min-h-0 w-full ${node.dir === "row" ? "flex-row" : "flex-col"}`}
+    >
+      <div ref={slotA} className="mv-slot min-h-0 min-w-0" style={{ flex: `${node.ratio} 1 0` }}>
+        <SplitNode node={node.a} {...rest} />
+      </div>
+      <div
+        className={
+          "mv-divider flex-none bg-border-strong hover:bg-accent " +
+          (node.dir === "row" ? "w-[3px] cursor-col-resize" : "h-[3px] cursor-row-resize")
+        }
+        onPointerDown={onDividerPointerDown}
+      />
+      <div ref={slotB} className="mv-slot min-h-0 min-w-0" style={{ flex: `${1 - node.ratio} 1 0` }}>
+        <SplitNode node={node.b} {...rest} />
+      </div>
+    </div>
+  );
+}
+
+function Pane({
+  leaf,
+  isFocused,
+  store,
+  sessions,
+  onDisconnect,
+}: TreeProps & { leaf: Extract<Node, { kind: "leaf" }>; isFocused: boolean }) {
+  const session = leaf.sessionId ? sessions?.get(leaf.sessionId) : undefined;
+  const splitFocused = (dir: Dir) => store.getState().splitFocused(leaf.id, dir);
+
+  return (
+    <div
+      className={
+        "mv-pane flex h-full min-h-0 min-w-0 flex-col border " +
+        (isFocused ? "border-accent" : "border-border-strong")
+      }
+      data-leaf-id={leaf.id}
+      data-session-id={leaf.sessionId ?? undefined}
+      onPointerDownCapture={() => store.getState().focusLeaf(leaf.id)}
+    >
+      <div className="mv-pane-header flex items-center justify-between gap-sp-2 border-b border-border-strong bg-surface px-sp-2 py-sp-1 text-fs-12">
+        {leaf.sessionId ? (
+          <PaneTitle sessionId={leaf.sessionId} session={session} />
+        ) : (
+          <span className="text-faint">Empty pane</span>
+        )}
+        <div className="mv-pane-tools flex items-center gap-sp-1">
+          {leaf.sessionId && onDisconnect && (
+            <button
+              type="button"
+              className="mv-tool rounded-r-1 px-sp-1 text-faint hover:bg-surface-3 hover:text-ink"
+              title="Disconnect"
+              onClick={() => onDisconnect(leaf.sessionId!)}
+            >
+              ⏻
+            </button>
+          )}
+          <button
+            type="button"
+            className="mv-tool rounded-r-1 px-sp-1 text-faint hover:bg-surface-3 hover:text-ink"
+            title="Split right"
+            onClick={() => splitFocused("row")}
+          >
+            ▥
+          </button>
+          <button
+            type="button"
+            className="mv-tool rounded-r-1 px-sp-1 text-faint hover:bg-surface-3 hover:text-ink"
+            title="Split down"
+            onClick={() => splitFocused("col")}
+          >
+            ▤
+          </button>
+          <button
+            type="button"
+            className="mv-tool rounded-r-1 px-sp-1 text-faint hover:bg-surface-3 hover:text-ink"
+            title="Close pane"
+            onClick={() => store.getState().closePane(leaf.id)}
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+      <div className="mv-pane-host min-h-0 flex-1">
+        {leaf.sessionId ? (
+          <PaneContainer
+            sessionId={leaf.sessionId}
+            session={session}
+            focus={isFocused}
+            onClosed={() => store.getState().closeSession(leaf.sessionId!)}
+          />
+        ) : (
+          <div className="mv-pane-empty flex h-full items-center justify-center p-sp-4 text-fs-13 text-faint">
+            Empty pane — pick a session from the sidebar, or spawn one.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/layout/PaneContainer.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Session } from "../../types.js";
+import { PaneContainer } from "./PaneContainer.js";
+
+vi.mock("../terminal/TerminalPane.js", () => ({
+  TerminalPane: ({ sessionId, focus }: { sessionId: string; focus?: boolean }) => (
+    <div data-testid="terminal-pane" data-session-id={sessionId} data-focus={String(focus)} />
+  ),
+}));
+
+vi.mock("../structured/StructuredPane.js", () => ({
+  StructuredPane: ({ sessionId, focus }: { sessionId: string; focus?: boolean }) => (
+    <div data-testid="structured-pane" data-session-id={sessionId} data-focus={String(focus)} />
+  ),
+}));
+
+afterEach(cleanup);
+
+function session(over: Partial<Session> = {}): Session {
+  return {
+    id: "s1",
+    cwd: "/home/n",
+    command: "claude",
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: "2026-01-01T00:00:00Z",
+    ...over,
+  } as Session;
+}
+
+describe("PaneContainer", () => {
+  it("renders TerminalPane when the session has no view (defaults to Terminal)", () => {
+    render(<PaneContainer sessionId="s1" session={session()} />);
+    expect(screen.getByTestId("terminal-pane")).toBeTruthy();
+    expect(screen.queryByTestId("structured-pane")).toBeNull();
+  });
+
+  it("renders TerminalPane when the session isn't known yet", () => {
+    render(<PaneContainer sessionId="s1" />);
+    expect(screen.getByTestId("terminal-pane")).toBeTruthy();
+  });
+
+  it("renders StructuredPane for a Structured session", () => {
+    render(<PaneContainer sessionId="s1" session={session({ view: "Structured" })} focus={false} />);
+    const pane = screen.getByTestId("structured-pane");
+    expect(pane.dataset.sessionId).toBe("s1");
+    expect(pane.dataset.focus).toBe("false");
+    expect(screen.queryByTestId("terminal-pane")).toBeNull();
+  });
+});

web/src/components/layout/PaneContainer.tsx

@@ -0,0 +1,49 @@
+// Dispatches a leaf's session to the right body — TerminalPane for a PTY
+// session, StructuredPane for an ACP one (session.view, #133/#140/#249).
+
+import { forwardRef, useImperativeHandle, useRef } from "react";
+
+import type { Session, Uuid } from "../../types.js";
+import { StructuredPane, type StructuredPaneHandle } from "../structured/StructuredPane.js";
+import { TerminalPane, type TerminalPaneHandle } from "../terminal/TerminalPane.js";
+
+export interface PaneContainerHandle {
+  focusTerminal(): void;
+  /** No-op for a structured pane — it has no PTY (pane.ts's PaneConnection contract). */
+  sendInput(data: string): void;
+}
+
+export interface PaneContainerProps {
+  sessionId: Uuid;
+  session?: Session;
+  /** Grabs the keyboard once connected. A sidebar preview passes `false`. */
+  focus?: boolean;
+  onClosed?: () => void;
+  className?: string;
+}
+
+export const PaneContainer = forwardRef<PaneContainerHandle, PaneContainerProps>(function PaneContainer(
+  { sessionId, session, focus, onClosed, className },
+  ref,
+) {
+  const terminalRef = useRef<TerminalPaneHandle>(null);
+  const structuredRef = useRef<StructuredPaneHandle>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      focusTerminal: () => {
+        terminalRef.current?.focusTerminal();
+        structuredRef.current?.focusComposer();
+      },
+      sendInput: (data: string) => terminalRef.current?.sendInput(data),
+    }),
+    [],
+  );
+
+  return session?.view === "Structured" ? (
+    <StructuredPane ref={structuredRef} sessionId={sessionId} focus={focus} onClosed={onClosed} className={className} />
+  ) : (
+    <TerminalPane ref={terminalRef} sessionId={sessionId} focus={focus} onClosed={onClosed} className={className} />
+  );
+});

web/src/components/layout/PaneTitle.test.tsx

@@ -0,0 +1,48 @@
+// @vitest-environment happy-dom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import type { Session } from "../../types.js";
+import { PaneTitle } from "./PaneTitle.js";
+
+afterEach(cleanup);
+
+function session(over: Partial<Session> = {}): Session {
+  return {
+    id: "s1",
+    cwd: "/home/n",
+    command: "claude",
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: "2026-01-01T00:00:00Z",
+    ...over,
+  } as Session;
+}
+
+describe("PaneTitle", () => {
+  it("falls back to a short session id when the session isn't known yet", () => {
+    render(<PaneTitle sessionId="abcdef12-3456-7890-abcd-ef1234567890" />);
+    expect(screen.getByText(/abcdef12/)).toBeTruthy();
+  });
+
+  it("shows the name alone when the command matches it", () => {
+    render(<PaneTitle sessionId="s1" session={session({ command: "claude", metadata: { name: "claude" } })} />);
+    expect(screen.getByText("claude")).toBeTruthy();
+    expect(document.querySelector(".at-cmd")).toBeNull();
+  });
+
+  it("shows the command alongside a custom name", () => {
+    render(
+      <PaneTitle sessionId="s1" session={session({ command: "hx src/main.rs", metadata: { name: "editor" } })} />,
+    );
+    expect(screen.getByText("editor")).toBeTruthy();
+    expect(document.querySelector(".at-cmd")).not.toBeNull();
+  });
+
+  it("never injects markup from a session name", () => {
+    render(<PaneTitle sessionId="s1" session={session({ metadata: { name: "<img onerror=x>" } })} />);
+    expect(document.querySelector("img")).toBeNull();
+    expect(screen.getByText("<img onerror=x>")).toBeTruthy();
+  });
+});

web/src/components/layout/PaneTitle.tsx

@@ -0,0 +1,39 @@
+// React port of paneTitle.ts: a pane header's session identity — the name,
+// then the command as its tool mark when recognised, same as the sidebar
+// card's own CommandFragment (SessionCard.tsx). JSX escapes text nodes, so
+// unlike the vanilla string-builder this needs no manual HTML escaping.
+
+import { splitCommand, toolIconSvg } from "../../toolIcon.js";
+import { sessionName, type Session, type Uuid } from "../../types.js";
+
+export interface PaneTitleProps {
+  sessionId: Uuid;
+  session?: Session;
+  className?: string;
+}
+
+export function PaneTitle({ sessionId, session, className }: PaneTitleProps) {
+  if (!session) {
+    return (
+      <span className={className ?? "at-title"} title={sessionId}>
+        session <span className="sid">{sessionId.slice(0, 8)}</span>
+      </span>
+    );
+  }
+
+  const name = sessionName(session);
+  const showCommand = Boolean(session.command) && session.command !== name;
+  const { tool, program } = splitCommand(session.command);
+  const icon = tool ? toolIconSvg(tool) : null;
+
+  return (
+    <span className={className ?? "at-title"} title={`${name} · ${session.command}  (${sessionId})`}>
+      <span className="at-name">{name}</span>
+      {showCommand && (
+        <span className="at-cmd">
+          {icon ? <span className="contents" dangerouslySetInnerHTML={{ __html: icon }} /> : <span>{program}</span>}
+        </span>
+      )}
+    </span>
+  );
+}

web/src/components/layout/TabBar.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { createLayoutStore } from "../../stores/layoutStore.js";
+import { TabBar } from "./TabBar.js";
+
+afterEach(cleanup);
+
+function store() {
+  return createLayoutStore({
+    load: () => null,
+    save: vi.fn(),
+    scheduler: { setTimer: () => 1, clearTimer: () => {} },
+  });
+}
+
+function dataTransfer() {
+  const data = new Map<string, string>();
+  return {
+    setData: (type: string, value: string) => data.set(type, value),
+    getData: (type: string) => data.get(type) ?? "",
+    effectAllowed: "",
+  };
+}
+
+describe("TabBar", () => {
+  it("renders one tab per layout tab, marking the active one", () => {
+    const s = store();
+    s.getState().addTab();
+    render(<TabBar store={s} />);
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(2);
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+  });
+
+  it("shows the open-session count next to a tab's title", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    render(<TabBar store={s} />);
+    expect(screen.getByText(/· 1/)).toBeTruthy();
+  });
+
+  it("clicking a tab selects it", () => {
+    const s = store();
+    s.getState().addTab();
+    const [first] = s.getState().layout.tabs;
+    render(<TabBar store={s} />);
+    fireEvent.click(screen.getAllByRole("tab")[0]);
+    expect(s.getState().layout.activeTabId).toBe(first.id);
+  });
+
+  it("the + button adds a tab", () => {
+    const s = store();
+    render(<TabBar store={s} />);
+    fireEvent.click(screen.getByTitle("New tab"));
+    expect(s.getState().layout.tabs).toHaveLength(2);
+  });
+
+  it("hides the close control on the last remaining tab", () => {
+    const s = store();
+    render(<TabBar store={s} />);
+    expect(screen.queryByTitle("Close tab")).toBeNull();
+  });
+
+  it("closing a tab removes it", () => {
+    const s = store();
+    s.getState().addTab();
+    render(<TabBar store={s} />);
+    fireEvent.click(screen.getAllByTitle("Close tab")[0]);
+    expect(s.getState().layout.tabs).toHaveLength(1);
+  });
+
+  it("dragging a tab onto another reorders them", () => {
+    const s = store();
+    s.getState().addTab();
+    s.getState().addTab();
+    const [a, b, c] = s.getState().layout.tabs;
+    render(<TabBar store={s} />);
+    const tabs = screen.getAllByRole("tab");
+    const dt = dataTransfer();
+    fireEvent.dragStart(tabs[0], { dataTransfer: dt });
+    fireEvent.dragOver(tabs[2], { dataTransfer: dt });
+    fireEvent.drop(tabs[2], { dataTransfer: dt });
+    expect(s.getState().layout.tabs.map((t) => t.id)).toEqual([b.id, c.id, a.id]);
+  });
+});

web/src/components/layout/TabBar.tsx

@@ -0,0 +1,91 @@
+// The tab strip above the canvas (issue #249): click to switch, drag to
+// reorder, a close ✕ per tab (hidden on the last one), a trailing + to add.
+
+import { useState } from "react";
+import { useStore } from "zustand";
+
+import { leaves } from "../../layout.js";
+import type { LayoutStore, LayoutStoreApi } from "../../stores/layoutStore.js";
+
+export interface TabBarProps {
+  store: LayoutStoreApi;
+}
+
+export function TabBar({ store }: TabBarProps) {
+  const layout = useStore(store, (s: LayoutStore) => s.layout);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [overId, setOverId] = useState<string | null>(null);
+
+  return (
+    <div className="mv-tabs flex items-center gap-sp-1 overflow-x-auto border-b border-border-strong bg-surface px-sp-2 text-fs-12" role="tablist">
+      {layout.tabs.map((tab) => {
+        const count = leaves(tab.root).filter((l) => l.sessionId).length;
+        const isActive = tab.id === layout.activeTabId;
+        const isDropTarget = overId === tab.id && draggingId !== null && draggingId !== tab.id;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            draggable
+            data-tab-id={tab.id}
+            className={
+              "mv-tab flex items-center gap-sp-1 rounded-t-r-1 px-sp-2 py-sp-1 " +
+              (isActive ? "bg-surface-2 text-ink" : "text-faint hover:text-ink") +
+              (isDropTarget ? " outline outline-2 outline-accent" : "")
+            }
+            onDragStart={(e) => {
+              setDraggingId(tab.id);
+              e.dataTransfer.setData("text/plain", tab.id);
+              e.dataTransfer.effectAllowed = "move";
+            }}
+            onDragOver={(e) => {
+              if (!draggingId || draggingId === tab.id) return;
+              e.preventDefault();
+              setOverId(tab.id);
+            }}
+            onDragLeave={() => setOverId((current) => (current === tab.id ? null : current))}
+            onDrop={(e) => {
+              e.preventDefault();
+              const fromId = e.dataTransfer.getData("text/plain") || draggingId;
+              setDraggingId(null);
+              setOverId(null);
+              if (fromId && fromId !== tab.id) store.getState().reorderTab(fromId, tab.id);
+            }}
+            onDragEnd={() => {
+              setDraggingId(null);
+              setOverId(null);
+            }}
+            onClick={() => store.getState().selectTab(tab.id)}
+          >
+            <span>
+              {tab.title}
+              {count ? ` · ${count}` : ""}
+            </span>
+            {layout.tabs.length > 1 && (
+              <span
+                className="mv-tab-close text-faint hover:text-ink"
+                title="Close tab"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  store.getState().closeTab(tab.id);
+                }}
+              >
+                ✕
+              </span>
+            )}
+          </button>
+        );
+      })}
+      <button
+        type="button"
+        className="mv-tab-add px-sp-2 py-sp-1 text-muted hover:text-ink"
+        title="New tab"
+        onClick={() => store.getState().addTab()}
+      >
+        +
+      </button>
+    </div>
+  );
+}

web/src/components/sidebar/ActivityRail.tsx

@@ -0,0 +1,47 @@
+// docs/SIDEBAR.md: a 5px bar pinned to the row's own left edge, square
+// corners, full card height. It paints for every card, Idle included, and it
+// carries the accessible name of the state so status is never colour-only.
+
+import { activityColorSlug } from "../../activity.js";
+import type { ActivityState } from "../../types.js";
+
+export const STATE_WORDS: Record<string, string> = {
+  active: "Active",
+  idle: "Idle",
+  "awaiting-input": "Awaiting input",
+  error: "Error",
+};
+
+/** Rail fill per state, and the motion the state earns. */
+const RAIL_CLASS: Record<string, string> = {
+  active: "bg-live",
+  idle: "bg-border-strong",
+  "awaiting-input": "bg-warn rail-blink",
+  error: "bg-danger rail-flash",
+};
+
+/** Duration text inherits the rail's colour (docs/SIDEBAR.md). */
+export const DURATION_CLASS: Record<string, string> = {
+  active: "text-live",
+  idle: "text-muted",
+  "awaiting-input": "text-warn",
+  error: "text-danger",
+};
+
+export function stateWordFor(activity: ActivityState | string | undefined): string {
+  return STATE_WORDS[activityColorSlug(activity ?? "Idle")] ?? STATE_WORDS.idle;
+}
+
+export function ActivityRail({ activity }: { activity: ActivityState | string | undefined }) {
+  const slug = activityColorSlug(activity ?? "Idle");
+  const word = STATE_WORDS[slug] ?? STATE_WORDS.idle;
+  return (
+    <span
+      className={`absolute left-0 top-0 bottom-0 w-[5px] ${RAIL_CLASS[slug] ?? RAIL_CLASS.idle}`}
+      data-activity={slug}
+      role="img"
+      title={word}
+      aria-label={word}
+    />
+  );
+}

web/src/components/sidebar/ContextMenu.tsx

@@ -0,0 +1,64 @@
+// Right-click menu on a session card (docs/SIDEBAR.md): rename, spawn similar,
+// kill. Rendered into <body> so a scrolling sidebar cannot clip it.
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+export interface ContextMenuItem {
+  label: string;
+  danger?: boolean;
+  onSelect(): void;
+}
+
+export interface ContextMenuProps {
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+  onClose(): void;
+}
+
+export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    const onDown = (e: Event) => {
+      if (!ref.current?.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown, true);
+    };
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      ref={ref}
+      role="menu"
+      className="context-menu fixed z-modal min-w-[160px] rounded-r-2 border border-border-strong bg-surface py-sp-1 shadow-2"
+      style={{ left: x, top: y }}
+    >
+      {items.map((item) => (
+        <button
+          key={item.label}
+          type="button"
+          role="menuitem"
+          className={`block w-full px-sp-3 py-sp-1 text-left text-fs-12 hover:bg-surface-2 ${
+            item.danger ? "text-danger" : "text-ink"
+          }`}
+          onClick={() => {
+            onClose();
+            item.onSelect();
+          }}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>,
+    document.body,
+  );
+}

web/src/components/sidebar/FolderNode.tsx

@@ -0,0 +1,51 @@
+// A collapsible directory in the sidebar tree. Only a *collapsed* header is a
+// keyboard-walk stop (docs/SIDEBAR.md); an expanded one is decoration in front
+// of the cards it holds, so it carries no highlight of its own.
+
+import type { ReactNode } from "react";
+
+import { splitFolderLabel } from "./model.js";
+
+export interface FolderNodeProps {
+  name: string;
+  path: string;
+  depth: number;
+  collapsed: boolean;
+  highlighted: boolean;
+  onToggle(): void;
+  children: ReactNode;
+}
+
+export function FolderNode(props: FolderNodeProps) {
+  const { stem, last } = splitFolderLabel(props.name);
+  return (
+    <div className="tree-folder">
+      <button
+        type="button"
+        className={`tree-folder-header flex w-full items-center gap-sp-1 py-[2px] text-fs-11 text-muted ${
+          props.highlighted ? "ring-1 ring-accent-ring" : ""
+        }`}
+        style={{ paddingLeft: props.depth * 16 }}
+        aria-expanded={!props.collapsed}
+        data-nav-key={`folder:${props.path}`}
+        data-highlighted={props.highlighted ? "true" : undefined}
+        title={props.name}
+        onClick={props.onToggle}
+      >
+        {/* One glyph, rotated when collapsed, so the mark and the rotation
+            never disagree about which way the folder points. */}
+        <span
+          aria-hidden="true"
+          className={`inline-block transition-transform ${props.collapsed ? "-rotate-90" : ""}`}
+        >
+          ▾
+        </span>
+        <span className="truncate">
+          {stem && <span className="text-faint">{stem}/</span>}
+          {last}
+        </span>
+      </button>
+      {!props.collapsed && props.children}
+    </div>
+  );
+}

web/src/components/sidebar/KillConfirm.tsx

@@ -0,0 +1,63 @@
+// docs/SIDEBAR.md "Killing a session": every kill confirms first, and the
+// confirmation names what the card last saw in the way — the daemon refuses an
+// unforced kill over such a tree, and saying so beforehand is cheaper than the
+// refusal. Cancel holds the focus so a stray Enter kills nothing.
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import type { InTheWay } from "../../types.js";
+import { formatInTheWay } from "../../types.js";
+
+export interface KillConfirmProps {
+  name: string;
+  blockers: InTheWay | null;
+  /** Set when the daemon already refused an unforced kill: this pass forces. */
+  force?: boolean;
+  onConfirm(): void;
+  onCancel(): void;
+}
+
+export function KillConfirm(props: KillConfirmProps) {
+  const cancel = useRef<HTMLButtonElement>(null);
+  useEffect(() => cancel.current?.focus(), []);
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={props.force ? "Force kill session" : "Kill session"}
+      className="kill-confirm fixed inset-0 z-modal flex items-center justify-center bg-bg/70"
+      onKeyDown={(e) => {
+        if (e.key === "Escape") props.onCancel();
+      }}
+    >
+      <div className="min-w-[280px] rounded-r-2 border border-border-strong bg-surface p-sp-4 shadow-2">
+        <p className="text-fs-13 text-ink">
+          {props.force ? "Force kill" : "Kill"} <strong>{props.name}</strong>?
+        </p>
+        {props.blockers && (
+          <p className="mt-sp-2 text-fs-12 text-warn">{formatInTheWay(props.blockers)}</p>
+        )}
+        <div className="mt-sp-3 flex justify-end gap-sp-2">
+          <button
+            ref={cancel}
+            type="button"
+            className="rounded-r-1 border border-border px-sp-3 py-sp-1 text-fs-12 text-ink"
+            onClick={props.onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="rounded-r-1 bg-danger px-sp-3 py-sp-1 text-fs-12 text-accent-ink"
+            onClick={props.onConfirm}
+          >
+            {props.force ? "Force kill" : "Kill"}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

web/src/components/sidebar/SessionCard.tsx

@@ -0,0 +1,264 @@
+// docs/SIDEBAR.md: a session card is always two lines — the name, then the
+// adaptive meta line — with the activity rail in the gutter beside them.
+
+import { useEffect, useRef, type MouseEvent } from "react";
+
+import {
+  activityDurationLabel,
+  activityHeldMs,
+  META_LINE_MIN_HOLD_MS,
+} from "../../activity.js";
+import { splitCommand, toolIconSvg } from "../../toolIcon.js";
+import type { InTheWay, Session } from "../../types.js";
+import {
+  blockerStats,
+  customSessionName,
+  formatInTheWay,
+  isProvisionalName,
+  MAX_SESSION_NAME_LEN,
+  normalizeSessionName,
+  sessionBlockers,
+  sessionName,
+} from "../../types.js";
+import { ActivityRail, DURATION_CLASS, stateWordFor } from "./ActivityRail.js";
+import { activityColorSlug } from "../../activity.js";
+
+export interface SessionCardProps {
+  session: Session;
+  /** Nesting depth; the row's padding (and so the rail) shifts outward with it. */
+  depth: number;
+  /** Clock the duration is measured against — the sidebar ticks it. */
+  now: number;
+  highlighted: boolean;
+  /** Showing in the focused pane. */
+  active: boolean;
+  /** Open in some pane, not the focused one. */
+  open: boolean;
+  previewing: boolean;
+  renaming: boolean;
+  onSelect(): void;
+  onOpenMenu(x: number, y: number): void;
+  onSpawnSimilar(): void;
+  onKill(): void;
+  onRenameCommit(name: string): void;
+  onRenameCancel(): void;
+}
+
+/** The fill ladder from docs/SIDEBAR.md "Which row is filled", furthest down
+ * wins. Written as one ordered run so the precedence is the order it reads in. */
+function rowFill(p: SessionCardProps): string {
+  if (p.active) return "bg-accent-fill";
+  if (p.previewing) return "bg-preview-tint";
+  if (p.open) return "bg-accent/[0.06]";
+  if (p.highlighted) return "bg-preview-tint";
+  return "";
+}
+
+export function SessionCard(props: SessionCardProps) {
+  const { session: s, depth, now, renaming } = props;
+  const name = sessionName(s);
+  const running = s.status === "Running";
+  const word = stateWordFor(s.activity);
+
+  return (
+    <a
+      className={`session-card tree-leaf relative flex flex-col gap-[1px] py-sp-1 pr-sp-2 no-underline ${rowFill(props)} ${
+        running ? "" : "opacity-60"
+      }`}
+      href={`#/attach/${encodeURIComponent(s.id)}`}
+      style={{ paddingLeft: depth * 16 + 8 }}
+      data-session-id={s.id}
+      data-nav-key={`session:${s.id}`}
+      data-status={running ? "running" : "dead"}
+      data-highlighted={props.highlighted ? "true" : undefined}
+      aria-label={`${name}, ${running ? "running" : "exited"}, ${word}`}
+      onClick={(e) => {
+        if (renaming) return;
+        e.preventDefault();
+        props.onSelect();
+      }}
+      onContextMenu={(e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        props.onOpenMenu(e.clientX, e.clientY);
+      }}
+    >
+      <ActivityRail activity={s.activity} />
+      <span className="flex min-w-0 items-center gap-sp-2">
+        {renaming ? (
+          <RenameField
+            session={s}
+            onCommit={props.onRenameCommit}
+            onCancel={props.onRenameCancel}
+          />
+        ) : (
+          <span
+            className={`min-w-0 flex-1 truncate text-fs-13 ${
+              isProvisionalName(s) ? "text-muted" : "text-ink"
+            }`}
+          >
+            {name}
+          </span>
+        )}
+        <span className="flex flex-none items-center gap-[2px]">
+          <button
+            type="button"
+            className="leaf-clone text-faint hover:text-ink"
+            title="Spawn similar"
+            aria-label={`Spawn similar to ${name}`}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              props.onSpawnSimilar();
+            }}
+          >
+            ⧉
+          </button>
+          <button
+            type="button"
+            className="leaf-kill text-faint hover:text-danger"
+            title="Kill session"
+            aria-label={`Kill ${name}`}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              props.onKill();
+            }}
+          >
+            ✕
+          </button>
+        </span>
+      </span>
+      <MetaLine session={s} now={now} />
+    </a>
+  );
+}
+
+/** Line 2, left to right: `[duration] [detail] command [diff stat | exited]`.
+ * The line itself is unconditional; only its fragments are adaptive. */
+export function MetaLine({ session: s, now }: { session: Session; now: number }) {
+  const slug = activityColorSlug(s.activity ?? "Idle");
+  const held = activityHeldMs(s.activity_since, now);
+  const duration =
+    held !== null && held >= META_LINE_MIN_HOLD_MS ? activityDurationLabel(held) : null;
+  const blockers = sessionBlockers(s);
+
+  return (
+    <span
+      className="card-line2 flex min-w-0 items-center gap-sp-2 text-fs-11"
+      data-activity={slug}
+    >
+      {duration && (
+        <span className={`activity-duration flex-none ${DURATION_CLASS[slug] ?? "text-muted"}`}>
+          {duration}
+        </span>
+      )}
+      {s.activity_detail && (
+        <span className="activity-detail min-w-0 flex-1 truncate text-faint">
+          {s.activity_detail}
+        </span>
+      )}
+      <CommandFragment command={s.command} />
+      {blockers && <BlockedFragment blockers={blockers} />}
+      {s.status === "Dead" && <span className="flex-none text-faint">exited</span>}
+    </span>
+  );
+}
+
+/** docs/SIDEBAR.md: the card names the program only, as its tool mark when we
+ * have one. The full command line stays in the tooltip either way. */
+function CommandFragment({ command }: { command: string }) {
+  const { tool, program } = splitCommand(command);
+  const icon = tool ? toolIconSvg(tool) : null;
+  return (
+    <span
+      className="leaf-cmd flex min-w-0 flex-none items-center gap-[4px] truncate text-faint"
+      title={command}
+    >
+      {icon ? (
+        <span className="contents" dangerouslySetInnerHTML={{ __html: icon }} />
+      ) : (
+        <span className="truncate">{program}</span>
+      )}
+    </span>
+  );
+}
+
+/** Blocked work in diff notation — `+124 -18 ?3 ↑2`. Only `+` and `-` take
+ * colour; the spelled-out breakdown survives as the tooltip. */
+function BlockedFragment({ blockers }: { blockers: InTheWay }) {
+  const stats = blockerStats(blockers);
+  return (
+    <span
+      className="leaf-blocked flex flex-none items-center gap-[4px] text-faint"
+      title={`Kill will be refused unless forced — ${formatInTheWay(blockers)}`}
+    >
+      {stats.map((st) => (
+        <span
+          key={st.kind}
+          data-stat={st.kind}
+          className={
+            st.kind === "add" ? "text-live" : st.kind === "del" ? "text-danger" : "text-muted"
+          }
+        >
+          {st.text}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+/** Inline rename (#125): Enter commits, Escape and blur cancel, an emptied
+ * field clears the name so the command fallback resumes. It starts from the
+ * session's own name, never from the command it falls back to. */
+function RenameField({
+  session: s,
+  onCommit,
+  onCancel,
+}: {
+  session: Session;
+  onCommit(name: string): void;
+  onCancel(): void;
+}) {
+  const ref = useRef<HTMLInputElement>(null);
+  const settled = useRef(false);
+
+  useEffect(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+
+  return (
+    <input
+      ref={ref}
+      type="text"
+      className="leaf-rename min-w-0 flex-1 bg-surface-2 text-fs-13 text-ink"
+      defaultValue={customSessionName(s) ?? ""}
+      maxLength={MAX_SESSION_NAME_LEN}
+      aria-label={`Rename ${sessionName(s)}`}
+      // The card is an <a> the tree also drags from: without these, clicking
+      // into the field navigates away or starts a drag.
+      onClick={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (settled.current) return;
+          settled.current = true;
+          onCommit(normalizeSessionName(e.currentTarget.value));
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          if (settled.current) return;
+          settled.current = true;
+          onCancel();
+        }
+      }}
+      onBlur={() => {
+        if (settled.current) return;
+        settled.current = true;
+        onCancel();
+      }}
+    />
+  );
+}

web/src/components/sidebar/Sidebar.test.tsx

@@ -0,0 +1,227 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Session } from "../../types.js";
+import { Sidebar } from "./Sidebar.js";
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+function session(id: string, over: Partial<Session> = {}): Session {
+  return {
+    id,
+    cwd: "/home/n/alpha",
+    command: "hx src/",
+    env: {},
+    metadata: { name: id },
+    status: "Running",
+    created_at: "2026-08-24T10:00:00Z",
+    ...over,
+  } as Session;
+}
+
+/** The card element for a session, by the `data-session-id` the row carries. */
+function card(id: string): HTMLElement {
+  const el = document.querySelector<HTMLElement>(`[data-session-id="${id}"]`);
+  if (!el) throw new Error(`no card for ${id}`);
+  return el;
+}
+
+function tree(): HTMLElement {
+  return document.querySelector<HTMLElement>(".tree")!;
+}
+
+describe("SessionCard layout", () => {
+  it("renders two lines: the name, then a meta line naming the program", () => {
+    render(<Sidebar sessions={[session("alpha")]} />);
+
+    const row = card("alpha");
+    expect(row.textContent).toContain("alpha");
+    const meta = row.querySelector(".card-line2")!;
+    // The program only — never its arguments.
+    expect(meta.textContent).toContain("hx");
+    expect(meta.textContent).not.toContain("src/");
+  });
+
+  it("shows no duration under the 30s hold, and one above it", () => {
+    const now = Date.parse("2026-08-24T10:00:00Z");
+    vi.setSystemTime(now);
+    const fresh = session("fresh", { activity: "Active", activity_since: "2026-08-24T09:59:50Z" });
+    const held = session("held", { activity: "Active", activity_since: "2026-08-24T09:56:00Z" });
+
+    render(<Sidebar sessions={[fresh, held]} />);
+
+    expect(card("fresh").querySelector(".activity-duration")).toBeNull();
+    expect(card("held").querySelector(".activity-duration")!.textContent).toBe("4m");
+  });
+
+  it("paints a rail for every state, blinking on AwaitingInput and flashing on Error", () => {
+    render(
+      <Sidebar
+        sessions={[
+          session("idle"),
+          session("await", { activity: "AwaitingInput" }),
+          session("err", { activity: "Error" }),
+        ]}
+      />,
+    );
+
+    const rail = (id: string) => card(id).querySelector<HTMLElement>("[data-activity]")!;
+    expect(rail("idle").dataset.activity).toBe("idle");
+    expect(rail("idle").className).not.toContain("rail-");
+    expect(rail("await").className).toContain("rail-blink");
+    expect(rail("err").className).toContain("rail-flash");
+    // Status never rests on colour alone.
+    expect(rail("await").getAttribute("aria-label")).toBe("Awaiting input");
+  });
+
+  it("renders blocked work as diff notation with the spelled-out tooltip", () => {
+    render(
+      <Sidebar
+        sessions={[
+          session("alpha", {
+            blocked_work: { uncommitted_files: 2, insertions: 124, deletions: 18, untracked_files: 3 },
+          }),
+        ]}
+      />,
+    );
+
+    const blocked = card("alpha").querySelector<HTMLElement>(".leaf-blocked")!;
+    expect(blocked.textContent).toBe("+124-18?3");
+    expect(blocked.title).toContain("2 uncommitted files");
+  });
+
+  it("dims a provisional name and leaves a settled one alone", () => {
+    render(
+      <Sidebar
+        sessions={[
+          session("gen", { metadata: { name: "gen", name_source: "Generated" } }),
+          session("user", { metadata: { name: "user", name_source: "User" } }),
+        ]}
+      />,
+    );
+
+    expect(card("gen").querySelector(".text-muted")).not.toBeNull();
+    expect(card("user").textContent).toContain("user");
+  });
+});
+
+describe("keyboard walk", () => {
+  const two = [session("a", { cwd: "/one" }), session("b", { cwd: "/two" })];
+
+  it("j and k step the highlight through the cards", () => {
+    render(<Sidebar sessions={two} />);
+
+    fireEvent.keyDown(tree(), { key: "j" });
+    expect(card("a").dataset.highlighted).toBe("true");
+    fireEvent.keyDown(tree(), { key: "j" });
+    expect(card("b").dataset.highlighted).toBe("true");
+    fireEvent.keyDown(tree(), { key: "k" });
+    expect(card("a").dataset.highlighted).toBe("true");
+  });
+
+  it("stops on a collapsed folder header and Enter expands onto its first card", () => {
+    render(<Sidebar sessions={two} />);
+
+    const header = document.querySelector<HTMLElement>('[data-nav-key="folder:one"]')!;
+    fireEvent.click(header);
+    expect(header.getAttribute("aria-expanded")).toBe("false");
+
+    fireEvent.keyDown(tree(), { key: "j" });
+    expect(
+      document.querySelector<HTMLElement>('[data-nav-key="folder:one"]')!.dataset.highlighted,
+    ).toBe("true");
+
+    fireEvent.keyDown(tree(), { key: "Enter" });
+    expect(card("a").dataset.highlighted).toBe("true");
+  });
+
+  it("Enter on a card opens it, and Tab hands the keyboard to the pane", () => {
+    const onSelect = vi.fn();
+    const onFocusPane = vi.fn();
+    render(<Sidebar sessions={two} onSelect={onSelect} onFocusPane={onFocusPane} />);
+
+    fireEvent.keyDown(tree(), { key: "j" });
+    fireEvent.keyDown(tree(), { key: "Enter" });
+    expect(onSelect).toHaveBeenCalledWith("a");
+
+    fireEvent.keyDown(tree(), { key: "Tab" });
+    expect(onFocusPane).toHaveBeenCalled();
+  });
+
+  it("previews the session the walk lands on", () => {
+    const onPreview = vi.fn();
+    render(<Sidebar sessions={two} onPreview={onPreview} />);
+
+    fireEvent.keyDown(tree(), { key: "j" });
+    expect(onPreview).toHaveBeenCalledWith("a");
+  });
+
+  it("x asks to kill the highlighted session and r renames it", () => {
+    const onKill = vi.fn();
+    render(<Sidebar sessions={two} onKill={onKill} />);
+
+    fireEvent.keyDown(tree(), { key: "j" });
+    fireEvent.keyDown(tree(), { key: "x" });
+    expect(onKill).toHaveBeenCalledWith(expect.objectContaining({ id: "a" }));
+
+    fireEvent.keyDown(tree(), { key: "r" });
+    expect(card("a").querySelector(".leaf-rename")).not.toBeNull();
+  });
+});
+
+describe("context menu", () => {
+  it("offers rename, spawn similar and kill", () => {
+    const onSpawnSimilar = vi.fn();
+    const onKill = vi.fn();
+    render(
+      <Sidebar sessions={[session("alpha")]} onSpawnSimilar={onSpawnSimilar} onKill={onKill} />,
+    );
+
+    fireEvent.contextMenu(card("alpha"));
+    const labels = [...document.querySelectorAll('[role="menuitem"]')].map((n) => n.textContent);
+    expect(labels).toEqual(["Rename…", "Spawn similar", "Kill session"]);
+
+    fireEvent.click(screen.getByText("Spawn similar"));
+    expect(onSpawnSimilar).toHaveBeenCalledWith(expect.objectContaining({ id: "alpha" }));
+  });
+
+  it("renames in place: Enter commits the field, Escape cancels", () => {
+    const onRename = vi.fn();
+    render(<Sidebar sessions={[session("alpha")]} onRename={onRename} />);
+
+    fireEvent.contextMenu(card("alpha"));
+    fireEvent.click(screen.getByText("Rename…"));
+
+    const input = card("alpha").querySelector<HTMLInputElement>(".leaf-rename")!;
+    expect(input.value).toBe("alpha");
+    fireEvent.change(input, { target: { value: "  renamed  " } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onRename).toHaveBeenCalledWith("alpha", "renamed");
+    expect(card("alpha").querySelector(".leaf-rename")).toBeNull();
+  });
+});
+
+describe("search", () => {
+  it("filters the tree down to matching sessions", () => {
+    render(<Sidebar sessions={[session("alpha"), session("beta", { cwd: "/home/n/beta" })]} />);
+
+    fireEvent.change(screen.getByLabelText("Search sessions"), { target: { value: "beta" } });
+
+    expect(document.querySelector('[data-session-id="alpha"]')).toBeNull();
+    expect(document.querySelector('[data-session-id="beta"]')).not.toBeNull();
+  });
+});
+
+describe("empty state", () => {
+  it("offers a spawn when there are no sessions at all", () => {
+    const onSpawn = vi.fn();
+    render(<Sidebar sessions={[]} onSpawn={onSpawn} />);
+
+    fireEvent.click(screen.getByText("+ Spawn session"));
+    expect(onSpawn).toHaveBeenCalled();
+  });
+});

web/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,368 @@
+// React port of the sidebar tree (catalog.ts). The contract it renders is
+// docs/SIDEBAR.md: two-line cards behind an activity rail, folder-grouped by
+// repository, walked with j/k.
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useStore } from "zustand";
+
+import { ApiRequestError, killSession, renameSession } from "../../api.js";
+import type { CatalogStore, CatalogStoreApi } from "../../stores/catalogStore.js";
+import type { InTheWay, Session } from "../../types.js";
+import { sessionBlockers, sessionName } from "../../types.js";
+import { buildTree, type TreeNode } from "../../tree.js";
+import { ContextMenu, type ContextMenuItem } from "./ContextMenu.js";
+import { FolderNode } from "./FolderNode.js";
+import { KillConfirm } from "./KillConfirm.js";
+import { SessionCard } from "./SessionCard.js";
+import { SidebarSearch } from "./SidebarSearch.js";
+import { filterSessions, firstRowUnder, navRows, sessionKey } from "./model.js";
+import { useNow } from "./useNow.js";
+import "./sidebar.css";
+
+export interface SidebarProps {
+  /** Live catalog. Either this or `sessions` supplies the tree. */
+  store?: CatalogStoreApi;
+  /** Static session list — what tests and the design kit render from. */
+  sessions?: Session[];
+  /** The daemon's home dir, so cwds abbreviate to `~/…`. */
+  homeDir?: string;
+  /** Showing in the focused pane. */
+  activeId?: string | null;
+  /** Open in some pane, focused one included. */
+  openIds?: ReadonlySet<string>;
+  /** Previewing (docs/PREVIEW.md) — a view, never durable state. */
+  previewId?: string | null;
+  onSelect?(id: string): void;
+  /** The highlight moved onto a session, or off every session. */
+  onPreview?(id: string | null): void;
+  onSpawnSimilar?(session: Session): void;
+  onSpawn?(): void;
+  /** Fast-forward spawn (`N`). */
+  onSpawnDefaults?(): void;
+  /** Tab: hand the keyboard back to the pane. */
+  onFocusPane?(): void;
+  onHelp?(): void;
+  /** Overrides the built-in `DELETE /api/sessions/:id` flow (tests, kit). */
+  onKill?(session: Session): void;
+  /** Overrides the built-in `PATCH /api/sessions/:id` (tests, kit). */
+  onRename?(id: string, name: string): void;
+}
+
+interface MenuState {
+  x: number;
+  y: number;
+  session: Session;
+}
+
+interface KillState {
+  session: Session;
+  blockers: InTheWay | null;
+  force: boolean;
+}
+
+export function Sidebar(props: SidebarProps) {
+  const sessions = useSessions(props);
+  const now = useNow();
+
+  const [query, setQuery] = useState("");
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set<string>());
+  const [navKey, setNavKey] = useState<string | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [menu, setMenu] = useState<MenuState | null>(null);
+  const [kill, setKill] = useState<KillState | null>(null);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  const tree = useMemo(
+    () => buildTree(filterSessions(sessions, query), props.homeDir),
+    [sessions, query, props.homeDir],
+  );
+  const rows = useMemo(() => navRows(tree, collapsed), [tree, collapsed]);
+
+  // A row that went away — session killed, folder collapsed over it — drops
+  // the highlight rather than leaving it pointing at nothing.
+  useEffect(() => {
+    if (navKey !== null && !rows.some((r) => r.key === navKey)) setNavKey(null);
+  }, [rows, navKey]);
+
+  const preview = props.onPreview;
+  const previewOf = useCallback(
+    (key: string | null) => {
+      preview?.(key?.startsWith("session:") ? key.slice("session:".length) : null);
+    },
+    [preview],
+  );
+
+  const moveNav = useCallback(
+    (delta: number) => {
+      if (rows.length === 0) return;
+      const cur = rows.findIndex((r) => r.key === navKey);
+      // Nothing highlighted: start one off the end being walked from, so the
+      // first step lands on the first (or last) row.
+      const from = cur === -1 ? (delta > 0 ? -1 : 0) : cur;
+      const next = rows[(((from + delta) % rows.length) + rows.length) % rows.length];
+      setNavKey(next.key);
+      previewOf(next.key);
+    },
+    [rows, navKey, previewOf],
+  );
+
+  const toggleFolder = useCallback((path: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
+
+  /** Enter: open the highlighted session, or expand the highlighted folder and
+   * land on the first row it was hiding. */
+  const activateNav = useCallback(() => {
+    const row = rows.find((r) => r.key === navKey);
+    if (!row) return;
+    if (row.kind === "session") {
+      props.onSelect?.(row.id);
+      return;
+    }
+    const expanded = new Set(collapsed);
+    expanded.delete(row.path);
+    setCollapsed(expanded);
+    const revealed = firstRowUnder(tree, expanded, row.path);
+    setNavKey(revealed?.key ?? null);
+  }, [rows, navKey, collapsed, tree, props]);
+
+  const beginKill = useCallback(
+    (s: Session) => {
+      if (props.onKill) {
+        props.onKill(s);
+        return;
+      }
+      setKill({ session: s, blockers: sessionBlockers(s), force: false });
+    },
+    [props],
+  );
+
+  const commitRename = useCallback(
+    (id: string, name: string) => {
+      setRenamingId(null);
+      if (props.onRename) props.onRename(id, name);
+      else void renameSession(id, name).catch(() => {});
+    },
+    [props],
+  );
+
+  /** The session behind the highlighted row, when the highlight is on a card. */
+  const highlightedSession = useCallback((): Session | undefined => {
+    const row = rows.find((r) => r.key === navKey);
+    if (row?.kind !== "session") return undefined;
+    return sessions.find((s) => s.id === row.id);
+  }, [rows, navKey, sessions]);
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    // The inline rename field owns its own keys; the walk stays out of it.
+    if (e.target instanceof HTMLInputElement) return;
+    switch (e.key) {
+      case "j":
+      case "ArrowDown":
+        e.preventDefault();
+        moveNav(1);
+        return;
+      case "k":
+      case "ArrowUp":
+        e.preventDefault();
+        moveNav(-1);
+        return;
+      case "Enter":
+        e.preventDefault();
+        activateNav();
+        return;
+      case "Tab":
+        e.preventDefault();
+        props.onFocusPane?.();
+        return;
+      case "c": {
+        const row = rows.find((r) => r.key === navKey);
+        if (row?.kind !== "folder") return;
+        e.preventDefault();
+        toggleFolder(row.path);
+        return;
+      }
+      case "r": {
+        const s = highlightedSession();
+        if (!s) return;
+        e.preventDefault();
+        setRenamingId(s.id);
+        return;
+      }
+      case "x": {
+        const s = highlightedSession();
+        if (!s) return;
+        e.preventDefault();
+        beginKill(s);
+        return;
+      }
+      case "n":
+        e.preventDefault();
+        props.onSpawn?.();
+        return;
+      case "N":
+        e.preventDefault();
+        props.onSpawnDefaults?.();
+        return;
+      case "?":
+        e.preventDefault();
+        props.onHelp?.();
+        return;
+    }
+  };
+
+  const menuItems = (s: Session): ContextMenuItem[] => [
+    { label: "Rename…", onSelect: () => setRenamingId(s.id) },
+    { label: "Spawn similar", onSelect: () => props.onSpawnSimilar?.(s) },
+    { label: "Kill session", danger: true, onSelect: () => beginKill(s) },
+  ];
+
+  const renderNode = (node: TreeNode, depth: number): React.ReactNode => {
+    if (node.kind === "leaf") {
+      const s = node.session;
+      return (
+        <SessionCard
+          key={s.id}
+          session={s}
+          depth={depth}
+          now={now}
+          highlighted={navKey === sessionKey(s.id)}
+          active={props.activeId === s.id}
+          open={(props.openIds?.has(s.id) ?? false) && props.activeId !== s.id}
+          previewing={props.previewId === s.id && props.activeId !== s.id}
+          renaming={renamingId === s.id}
+          onSelect={() => props.onSelect?.(s.id)}
+          onOpenMenu={(x, y) => setMenu({ x, y, session: s })}
+          onSpawnSimilar={() => props.onSpawnSimilar?.(s)}
+          onKill={() => beginKill(s)}
+          onRenameCommit={(name) => commitRename(s.id, name)}
+          onRenameCancel={() => setRenamingId(null)}
+        />
+      );
+    }
+    if (!node.name) {
+      return node.children.map((c) => renderNode(c, depth));
+    }
+    return (
+      <FolderNode
+        key={node.path}
+        name={node.name}
+        path={node.path}
+        depth={depth}
+        collapsed={collapsed.has(node.path)}
+        highlighted={navKey === `folder:${node.path}`}
+        onToggle={() => toggleFolder(node.path)}
+      >
+        {node.children.map((c) => renderNode(c, depth + 1))}
+      </FolderNode>
+    );
+  };
+
+  return (
+    <aside className="sidebar flex h-full min-h-0 flex-col bg-surface">
+      <SidebarSearch
+        value={query}
+        onChange={setQuery}
+        onDismiss={() => treeRef.current?.focus()}
+      />
+      <div
+        ref={treeRef}
+        className="tree min-h-0 flex-1 overflow-y-auto outline-none"
+        tabIndex={-1}
+        role="tree"
+        aria-label="Sessions"
+        onKeyDown={onKeyDown}
+        // The keyboard walk's preview belongs to the list holding the
+        // keyboard: once it doesn't, the pane goes back to what was opened.
+        onBlur={() => preview?.(null)}
+      >
+        {sessions.length === 0 ? (
+          <EmptyState onSpawn={() => props.onSpawn?.()} />
+        ) : (
+          renderNode(tree, 0)
+        )}
+      </div>
+      {menu && (
+        <ContextMenu
+          x={menu.x}
+          y={menu.y}
+          items={menuItems(menu.session)}
+          onClose={() => setMenu(null)}
+        />
+      )}
+      {kill && (
+        <KillConfirm
+          name={sessionName(kill.session)}
+          blockers={kill.blockers}
+          force={kill.force}
+          onCancel={() => setKill(null)}
+          onConfirm={() => {
+            const { session: s, force } = kill;
+            setKill(null);
+            void killSession(s.id, force).catch((e: unknown) => {
+              // The daemon refuses an unforced kill over a worktree holding
+              // unsaved work; that refusal needs its own prompt
+              // (docs/WORKTREES.md).
+              if (e instanceof ApiRequestError && e.code === "kill_guarded") {
+                setKill({
+                  session: s,
+                  blockers: e.unsavedWork ?? sessionBlockers(s),
+                  force: true,
+                });
+              }
+            });
+          }}
+        />
+      )}
+    </aside>
+  );
+}
+
+/** The tree's one empty state: no sessions at all. */
+function EmptyState({ onSpawn }: { onSpawn(): void }) {
+  return (
+    <div className="empty flex flex-col items-center gap-sp-2 p-sp-6 text-center">
+      <div aria-hidden="true" className="text-fs-20 text-faint">
+        +
+      </div>
+      <div className="text-fs-13 text-ink">No sessions yet</div>
+      <p className="text-fs-12 text-muted">Start your first session — it'll show up here.</p>
+      <button
+        type="button"
+        className="rounded-r-1 bg-accent px-sp-3 py-sp-1 text-fs-12 text-accent-ink"
+        onClick={onSpawn}
+      >
+        + Spawn session
+      </button>
+    </div>
+  );
+}
+
+/** Sessions from the store when one is wired, else the static prop. */
+function useSessions(props: SidebarProps): Session[] {
+  const fromStore = useStore(
+    // `useStore` needs a store every render; the no-store case is served by a
+    // stable empty stand-in whose result is thrown away below.
+    props.store ?? EMPTY_STORE,
+    (s: CatalogStore) => s.sessions,
+  );
+  return useMemo(
+    () => (props.store ? [...fromStore.values()] : (props.sessions ?? [])),
+    [props.store, props.sessions, fromStore],
+  );
+}
+
+// One frozen state object, not a fresh one per call: `useStore` reads the
+// snapshot on every render and a new Map each time would never settle.
+const EMPTY_STATE = { sessions: new Map<string, Session>() };
+const EMPTY_STORE = {
+  getState: () => EMPTY_STATE,
+  getInitialState: () => EMPTY_STATE,
+  setState: () => {},
+  subscribe: () => () => {},
+} as unknown as CatalogStoreApi;

web/src/components/sidebar/SidebarSearch.tsx

@@ -0,0 +1,34 @@
+// The sidebar's search field: a substring filter over the tree (name, command
+// and cwd). Escape clears it and hands the keyboard back to the list.
+
+export interface SidebarSearchProps {
+  value: string;
+  onChange(value: string): void;
+  /** Escape on an already-empty field — the list wants the keyboard back. */
+  onDismiss?(): void;
+}
+
+export function SidebarSearch({ value, onChange, onDismiss }: SidebarSearchProps) {
+  return (
+    <header className="sidebar-search p-sp-2">
+      <input
+        type="search"
+        className="search w-full rounded-r-1 border border-border bg-surface-2 px-sp-2 py-sp-1 text-fs-12 text-ink"
+        placeholder="Search sessions…"
+        aria-label="Search sessions"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck={false}
+        value={value}
+        onChange={(e) => onChange(e.currentTarget.value)}
+        onKeyDown={(e) => {
+          if (e.key !== "Escape") return;
+          e.preventDefault();
+          if (value) onChange("");
+          else onDismiss?.();
+        }}
+      />
+    </header>
+  );
+}

web/src/components/sidebar/index.ts

@@ -0,0 +1,8 @@
+export { Sidebar, type SidebarProps } from "./Sidebar.js";
+export { SessionCard, type SessionCardProps } from "./SessionCard.js";
+export { FolderNode, type FolderNodeProps } from "./FolderNode.js";
+export { SidebarSearch, type SidebarSearchProps } from "./SidebarSearch.js";
+export { ActivityRail } from "./ActivityRail.js";
+export { ContextMenu, type ContextMenuItem } from "./ContextMenu.js";
+export { KillConfirm } from "./KillConfirm.js";
+export * from "./model.js";

web/src/components/sidebar/model.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+
+import { buildTree } from "../../tree.js";
+import type { Session } from "../../types.js";
+import { filterSessions, firstRowUnder, navRows, splitFolderLabel } from "./model.js";
+
+function session(id: string, cwd: string, command = "claude"): Session {
+  return {
+    id,
+    cwd,
+    command,
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: "2026-08-24T10:00:00Z",
+  } as Session;
+}
+
+describe("navRows", () => {
+  const tree = buildTree([session("a", "/one"), session("b", "/two")], undefined);
+
+  it("stops on every card and skips expanded folder headers", () => {
+    expect(navRows(tree, new Set()).map((r) => r.key)).toEqual(["session:a", "session:b"]);
+  });
+
+  it("stops on a collapsed folder header instead of the cards it hides", () => {
+    expect(navRows(tree, new Set(["one"])).map((r) => r.key)).toEqual([
+      "folder:one",
+      "session:b",
+    ]);
+  });
+
+  it("names the first row an expanded folder reveals", () => {
+    expect(firstRowUnder(tree, new Set(), "one")?.key).toBe("session:a");
+  });
+});
+
+describe("splitFolderLabel", () => {
+  it("keeps a shallow path whole", () => {
+    expect(splitFolderLabel("~/maestro")).toEqual({ stem: null, last: "~/maestro" });
+  });
+
+  it("initials the leading segments of a deep path", () => {
+    expect(splitFolderLabel("~/git.naps.pt/naps62/maestro")).toEqual({
+      stem: "~/g/n",
+      last: "maestro",
+    });
+  });
+});
+
+describe("filterSessions", () => {
+  const all = [session("a", "/home/n/alpha", "claude"), session("b", "/home/n/beta", "bash")];
+
+  it("returns everything for a blank query", () => {
+    expect(filterSessions(all, "  ")).toHaveLength(2);
+  });
+
+  it("matches the cwd and the command, case-insensitively", () => {
+    expect(filterSessions(all, "ALPHA").map((s) => s.id)).toEqual(["a"]);
+    expect(filterSessions(all, "bash").map((s) => s.id)).toEqual(["b"]);
+  });
+});

web/src/components/sidebar/model.ts

@@ -0,0 +1,90 @@
+// Pure model helpers behind the React sidebar. Kept out of the components so
+// the walk order and the folder label can be tested without a DOM.
+
+import type { Session } from "../../types.js";
+import { sessionCwd, sessionName } from "../../types.js";
+import type { TreeNode } from "../../tree.js";
+
+/** A row the keyboard walk can land on (docs/SIDEBAR.md "Keyboard walk"):
+ * every session card, and a folder header only while it is collapsed. */
+export type NavRow =
+  | { key: string; kind: "folder"; path: string }
+  | { key: string; kind: "session"; id: string };
+
+export function folderKey(path: string): string {
+  return `folder:${path}`;
+}
+
+export function sessionKey(id: string): string {
+  return `session:${id}`;
+}
+
+/** The walkable rows in visual order. An expanded folder contributes nothing
+ * itself — its cards are one row away — while a collapsed one is the only row
+ * it has, so skipping it would leave the folder unreachable. */
+export function navRows(root: TreeNode, collapsed: ReadonlySet<string>): NavRow[] {
+  const out: NavRow[] = [];
+  const walk = (node: TreeNode): void => {
+    if (node.kind === "leaf") {
+      out.push({ key: sessionKey(node.session.id), kind: "session", id: node.session.id });
+      return;
+    }
+    if (node.name && collapsed.has(node.path)) {
+      out.push({ key: folderKey(node.path), kind: "folder", path: node.path });
+      return;
+    }
+    for (const child of node.children) walk(child);
+  };
+  for (const child of root.kind === "folder" ? root.children : [root]) walk(child);
+  return out;
+}
+
+/** The first walkable row inside `path`, i.e. where the highlight lands when
+ * Enter expands that folder. */
+export function firstRowUnder(
+  root: TreeNode,
+  collapsed: ReadonlySet<string>,
+  path: string,
+): NavRow | undefined {
+  const found = findFolder(root, path);
+  if (!found) return undefined;
+  return navRows({ ...found, name: "" }, collapsed)[0];
+}
+
+function findFolder(node: TreeNode, path: string): Extract<TreeNode, { kind: "folder" }> | null {
+  if (node.kind === "leaf") return null;
+  if (node.path === path && node.name) return node;
+  for (const child of node.children) {
+    const hit = findFolder(child, path);
+    if (hit) return hit;
+  }
+  return null;
+}
+
+/** Structured form of `abbreviateFolderName`: a deep path shows its leading
+ * segments as initials so the tail stays readable in a narrow sidebar. */
+export function splitFolderLabel(name: string): { stem: string | null; last: string } {
+  const parts = name.split("/");
+  if (parts.length <= 2) return { stem: null, last: name };
+  const last = parts[parts.length - 1];
+  const stem = parts
+    .slice(0, -1)
+    .map((p) => (p === "~" ? "~" : (Array.from(p)[0] ?? "")))
+    .join("/");
+  return { stem, last };
+}
+
+/** Case-insensitive substring filter over a session's name, command and cwd —
+ * what the sidebar's own search field narrows the tree with. */
+export function filterSessions(sessions: Session[], query: string): Session[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return sessions;
+  return sessions.filter((s) => {
+    const cwd = sessionCwd(s) ?? "";
+    return (
+      sessionName(s).toLowerCase().includes(q) ||
+      s.command.toLowerCase().includes(q) ||
+      cwd.toLowerCase().includes(q)
+    );
+  });
+}

web/src/components/sidebar/sidebar.css

@@ -0,0 +1,49 @@
+/* Motion for the activity rail (docs/SIDEBAR.md): a hard blink while
+   AwaitingInput, a fast flash while Error. Active and Idle are solid and
+   still — colour alone is the signal. Kept as real CSS rather than Tailwind
+   utilities because both need @keyframes of their own. */
+
+@keyframes maestro-rail-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes maestro-rail-flash {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.25;
+  }
+  30% {
+    opacity: 1;
+  }
+  45% {
+    opacity: 0.25;
+  }
+  60% {
+    opacity: 1;
+  }
+}
+
+.rail-blink {
+  animation: maestro-rail-blink 1.2s steps(1) infinite;
+}
+
+.rail-flash {
+  animation: maestro-rail-flash 1.4s ease-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rail-blink,
+  .rail-flash {
+    animation: none;
+  }
+}

web/src/components/sidebar/useNow.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+/** A clock that ticks at least every `intervalMs` while the page is visible.
+ * docs/SIDEBAR.md asks for a re-render at least every 30s so the duration's
+ * cutover points land within one tick. */
+export function useNow(intervalMs = 30_000): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (document.visibilityState !== "visible") return;
+      setNow(Date.now());
+    }, intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+  return now;
+}

web/src/components/spawn/BranchPicker.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { BranchInfo } from "../../types.js";
+import { BranchPicker, type BranchPickerProps } from "./BranchPicker.js";
+
+afterEach(cleanup);
+
+function props(over: Partial<BranchPickerProps> = {}): BranchPickerProps {
+  return {
+    enabled: true,
+    onToggleEnabled: vi.fn(),
+    hint: null,
+    baseRepo: "/repo",
+    mode: "new",
+    onModeChange: vi.fn(),
+    newBranch: "",
+    onNewBranchChange: vi.fn(),
+    branches: undefined,
+    existingBranch: "",
+    onExistingBranchChange: vi.fn(),
+    ...over,
+  };
+}
+
+describe("BranchPicker", () => {
+  it("shows the hint instead of the body while unresolved", () => {
+    render(<BranchPicker {...props({ hint: "Choose a working directory first." })} />);
+    expect(screen.getByText("Choose a working directory first.")).not.toBeNull();
+    expect(screen.queryByText("New branch name")).toBeNull();
+  });
+
+  it("shows the new-branch field by default and the repo line once resolved", () => {
+    render(<BranchPicker {...props()} />);
+    expect(screen.getByText("repo: /repo")).not.toBeNull();
+    expect(screen.getByPlaceholderText("feat/foo")).not.toBeNull();
+    expect(screen.queryByText("Pick a branch")).toBeNull();
+  });
+
+  it("switches to the existing-branch select and reports the mode change", () => {
+    const onModeChange = vi.fn();
+    render(<BranchPicker {...props({ onModeChange })} />);
+
+    fireEvent.click(screen.getByLabelText("Existing branch"));
+
+    expect(onModeChange).toHaveBeenCalledWith("existing");
+  });
+
+  it("disables a branch already held by another worktree, and the main checkout's HEAD", () => {
+    const branches: BranchInfo[] = [
+      { name: "main", is_head: true },
+      { name: "feat/a", is_head: false, worktree: "/repos/a" },
+      { name: "feat/b", is_head: false },
+    ];
+    render(<BranchPicker {...props({ mode: "existing", branches })} />);
+
+    const main = screen.getByRole("option", { name: /main — held by the main checkout/ }) as HTMLOptionElement;
+    const a = screen.getByRole("option", { name: /feat\/a — held by \/repos\/a/ }) as HTMLOptionElement;
+    const b = screen.getByRole("option", { name: "feat/b" }) as HTMLOptionElement;
+    expect(main.disabled).toBe(true);
+    expect(a.disabled).toBe(true);
+    expect(b.disabled).toBe(false);
+  });
+
+  it("shows a placeholder option when no local branches were found", () => {
+    render(<BranchPicker {...props({ mode: "existing", branches: [] })} />);
+    expect(screen.getByText("No local branches found.")).not.toBeNull();
+  });
+
+  it("toggles the worktree checkbox", () => {
+    const onToggleEnabled = vi.fn();
+    render(<BranchPicker {...props({ onToggleEnabled })} />);
+
+    fireEvent.click(screen.getByLabelText("Create git worktree"));
+
+    expect(onToggleEnabled).toHaveBeenCalledWith(false);
+  });
+});

web/src/components/spawn/BranchPicker.tsx

@@ -0,0 +1,119 @@
+// The spawn form's worktree section (#61): create-worktree toggle, then
+// (once a base repo is known) new-branch-vs-existing-branch, mirroring
+// spawnForm.ts's `.adv-group`/`.wt-body`/`.wt-mode` markup.
+
+import type { BranchInfo } from "../../types.js";
+import type { WorktreeBranchMode } from "../../spawnForm.js";
+
+export interface BranchPickerProps {
+  enabled: boolean;
+  onToggleEnabled(enabled: boolean): void;
+  /** Status line shown in place of the body — "Checking…", "not a repo",
+   * "choose a directory first". `null` once the body itself can render. */
+  hint: string | null;
+  /** The repo a worktree would branch from, once resolved. */
+  baseRepo: string | null;
+  mode: WorktreeBranchMode;
+  onModeChange(mode: WorktreeBranchMode): void;
+  newBranch: string;
+  onNewBranchChange(value: string): void;
+  /** This cwd's local branches, or `undefined` while unknown/not yet loaded. */
+  branches: BranchInfo[] | undefined;
+  existingBranch: string;
+  onExistingBranchChange(value: string): void;
+}
+
+export function BranchPicker(props: BranchPickerProps) {
+  return (
+    <div
+      className={`flex flex-col gap-sp-3 border-l-2 pl-sp-3 ${
+        props.enabled ? "border-accent" : "border-border"
+      }`}
+    >
+      <label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
+        <input
+          type="checkbox"
+          data-role="toggle"
+          className="size-[18px] accent-accent"
+          checked={props.enabled}
+          onChange={(e) => props.onToggleEnabled(e.currentTarget.checked)}
+        />
+        Create git worktree
+      </label>
+
+      {props.hint && <p className="m-0 text-fs-12 text-muted">{props.hint}</p>}
+
+      {props.enabled && !props.hint && (
+        <div className="flex flex-col gap-sp-3">
+          {props.baseRepo && (
+            <p className="m-0 font-mono text-fs-12 text-muted">repo: {props.baseRepo}</p>
+          )}
+          <div role="radiogroup" aria-label="Branch source" className="flex gap-sp-4">
+            <label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
+              <input
+                type="radio"
+                name="worktree_branch_mode"
+                checked={props.mode === "new"}
+                onChange={() => props.onModeChange("new")}
+              />
+              New branch
+            </label>
+            <label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
+              <input
+                type="radio"
+                name="worktree_branch_mode"
+                checked={props.mode === "existing"}
+                onChange={() => props.onModeChange("existing")}
+              />
+              Existing branch
+            </label>
+          </div>
+
+          {props.mode === "new" ? (
+            <label className="flex flex-col gap-1 text-fs-12 text-muted">
+              New branch name
+              <input
+                name="worktree_branch"
+                type="text"
+                autoComplete="off"
+                placeholder="feat/foo"
+                className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2 font-mono text-fs-15 text-ink"
+                value={props.newBranch}
+                onChange={(e) => props.onNewBranchChange(e.currentTarget.value)}
+              />
+            </label>
+          ) : (
+            <label className="flex flex-col gap-1 text-fs-12 text-muted">
+              Pick a branch
+              <select
+                className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2 font-mono text-fs-15 text-ink"
+                value={props.existingBranch}
+                onChange={(e) => props.onExistingBranchChange(e.currentTarget.value)}
+              >
+                {branchOptions(props.branches)}
+              </select>
+            </label>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function branchOptions(branches: BranchInfo[] | undefined) {
+  if (!branches || branches.length === 0) {
+    return <option value="">No local branches found.</option>;
+  }
+  return branches.map((b) => {
+    // A branch already checked out anywhere stays visible but unpickable —
+    // git refuses a second checkout. That includes the main checkout's own
+    // HEAD, which is commonly `main` and would otherwise be the default pick,
+    // making every existing-branch spawn fail (#54 review).
+    const held = b.worktree ?? (b.is_head ? "the main checkout" : null);
+    return (
+      <option key={b.name} value={b.name} disabled={held !== null} title={held ?? ""}>
+        {held ? `${b.name} — held by ${held}` : b.name}
+      </option>
+    );
+  });
+}

web/src/components/spawn/DirAutocomplete.test.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { DirAutocomplete } from "./DirAutocomplete.js";
+
+vi.mock("../../api.js", () => ({
+  listDir: vi.fn(),
+}));
+
+import { listDir } from "../../api.js";
+
+const mockListDir = vi.mocked(listDir);
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+function Harness({ initial = "" }: { initial?: string }) {
+  const [value, setValue] = useState(initial);
+  return <DirAutocomplete value={value} onChange={setValue} placeholder="cwd" />;
+}
+
+// `fireEvent.focus`/`.blur` dispatch the event without moving the browser's
+// real focus, so `document.activeElement` (which the dropdown's fetch guards
+// against) never changes — calling the DOM method directly does both.
+function focus(el: HTMLElement): void {
+  act(() => el.focus());
+}
+function blur(el: HTMLElement): void {
+  act(() => el.blur());
+}
+
+describe("DirAutocomplete", () => {
+  it("lists entries matching the trailing segment on focus", async () => {
+    mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha", "beta"] });
+    render(<Harness initial="/home/n/al" />);
+
+    focus(screen.getByPlaceholderText("cwd"));
+
+    expect(await screen.findByRole("option", { name: "alpha/" })).not.toBeNull();
+    expect(screen.queryByRole("option", { name: "beta/" })).toBeNull();
+  });
+
+  it("Tab commits the highlighted entry and does not close the field", async () => {
+    mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha"] });
+    render(<Harness initial="/home/n/a" />);
+    const input = screen.getByPlaceholderText("cwd") as HTMLInputElement;
+    focus(input);
+    await screen.findByRole("option", { name: "alpha/" });
+
+    fireEvent.keyDown(input, { key: "Tab" });
+
+    expect(input.value).toBe("/home/n/alpha/");
+  });
+
+  it("arrows move the highlight and Enter accepts it without submitting", async () => {
+    mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha", "beta"] });
+    render(<Harness initial="/home/n/" />);
+    const input = screen.getByPlaceholderText("cwd") as HTMLInputElement;
+    focus(input);
+    await screen.findByRole("option", { name: "alpha/" });
+
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    const notPrevented = fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(input.value).toBe("/home/n/beta/");
+    expect(notPrevented).toBe(false); // preventDefault called -> event "processed"
+  });
+
+  it("Escape closes the dropdown and stops the key from bubbling", async () => {
+    mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha"] });
+    const onKeyDown = vi.fn();
+    render(
+      <div onKeyDown={onKeyDown}>
+        <Harness initial="/home/n/a" />
+      </div>,
+    );
+    const input = screen.getByPlaceholderText("cwd");
+    focus(input);
+    await screen.findByRole("option", { name: "alpha/" });
+
+    fireEvent.keyDown(input, { key: "Escape" });
+
+    await waitFor(() => expect(screen.queryByRole("option")).toBeNull());
+    expect(onKeyDown).not.toHaveBeenCalled();
+  });
+
+  it("does not reopen on refocus until the operator types again", async () => {
+    mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha"] });
+    render(<Harness initial="/home/n/a" />);
+    const input = screen.getByPlaceholderText("cwd");
+    focus(input);
+    await screen.findByRole("option", { name: "alpha/" });
+    fireEvent.keyDown(input, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByRole("option")).toBeNull());
+
+    blur(input);
+    focus(input);
+
+    await new Promise((r) => setTimeout(r, 10));
+    expect(screen.queryByRole("option")).toBeNull();
+
+    fireEvent.change(input, { target: { value: "/home/n/al" } });
+    expect(await screen.findByRole("option", { name: "alpha/" })).not.toBeNull();
+  });
+});

web/src/components/spawn/DirAutocomplete.tsx

@@ -0,0 +1,256 @@
+// React port of ../../dirAutocomplete.ts: shell-style directory autocomplete
+// on a path <input>. Lists one directory at a time over `GET /api/dirs`,
+// caches per directory, and filters the trailing path segment locally.
+//
+// Keyboard model mirrors `cd dir/sub<tab>`:
+//   Tab    commit the highlighted entry and let focus move on; with nothing
+//          highlighted, plain tab navigation
+//   ↑/↓    move the highlight
+//   Enter  accept the highlighted entry (and suppress form submit); with
+//          nothing highlighted, bubble to the form unprevented
+//   Esc    close the dropdown, refocus the input, and stop the key from
+//          bubbling — so dismissing the popup can't also close a parent modal
+//
+// Once dismissed (Esc or blur) the popup stays closed until the operator
+// types again — refocusing alone doesn't reopen it.
+
+import { useCallback, useEffect, useRef, useState, type InputHTMLAttributes, type Ref } from "react";
+import { createPortal } from "react-dom";
+
+import { listDir } from "../../api.js";
+import { splitPath } from "../../paths.js";
+
+/** Most entries rendered at once — a long list is unhelpful and slow. */
+const MAX_VISIBLE = 60;
+/** Debounce before a network fetch when the input crosses into a new directory. */
+const FETCH_DEBOUNCE_MS = 90;
+
+export interface DirAutocompleteProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+  value: string;
+  onChange(value: string): void;
+  /** Access to the underlying `<input>` — e.g. to focus/select it. */
+  inputRef?: Ref<HTMLInputElement>;
+}
+
+function assignRef(ref: Ref<HTMLInputElement> | undefined, el: HTMLInputElement | null): void {
+  if (!ref) return;
+  if (typeof ref === "function") ref(el);
+  else (ref as { current: HTMLInputElement | null }).current = el;
+}
+
+export function DirAutocomplete({ value, onChange, inputRef, ...inputProps }: DirAutocompleteProps) {
+  const localRef = useRef<HTMLInputElement | null>(null);
+  const cache = useRef(new Map<string, string[]>());
+  const fetchSeq = useRef(0);
+  const debounceTimer = useRef<number | undefined>(undefined);
+  const dismissedRef = useRef(false);
+
+  const [filtered, setFiltered] = useState<string[]>([]);
+  const [highlight, setHighlight] = useState(-1);
+  const [open, setOpen] = useState(false);
+  const [rect, setRect] = useState<{ left: number; top: number; width: number } | null>(null);
+
+  const setInputRef = useCallback(
+    (el: HTMLInputElement | null) => {
+      localRef.current = el;
+      assignRef(inputRef, el);
+    },
+    [inputRef],
+  );
+
+  const reposition = useCallback(() => {
+    const el = localRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setRect({ left: r.left, top: r.bottom + 4, width: r.width });
+  }, []);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setFiltered([]);
+    setHighlight(-1);
+  }, []);
+
+  const dismiss = useCallback(() => {
+    dismissedRef.current = true;
+    close();
+  }, [close]);
+
+  const applyFilter = useCallback(
+    (entries: string[], prefix: string) => {
+      // A fetch can outlive the dismissal it was meant to serve (Tab-commit
+      // re-arms a refresh, then blur dismisses 120ms later). Showing it now
+      // would anchor a dropdown under an unfocused input nothing closes.
+      if (dismissedRef.current || document.activeElement !== localRef.current) {
+        close();
+        return;
+      }
+      const lower = prefix.toLowerCase();
+      const next = entries.filter((e) => e.toLowerCase().startsWith(lower));
+      setFiltered(next);
+      setHighlight(next.length > 0 ? 0 : -1);
+      if (next.length === 0) {
+        close();
+        return;
+      }
+      setOpen(true);
+      reposition();
+    },
+    [close, reposition],
+  );
+
+  const refresh = useCallback(
+    (raw: string) => {
+      const { dir, prefix } = splitPath(raw);
+      const cached = cache.current.get(dir);
+      if (cached) {
+        applyFilter(cached, prefix);
+        return;
+      }
+      const seq = ++fetchSeq.current;
+      listDir(dir)
+        .then((listing) => {
+          cache.current.set(dir, listing.entries);
+          if (seq !== fetchSeq.current) return; // a newer fetch superseded this one
+          const cur = splitPath(localRef.current?.value ?? raw);
+          if (cur.dir === dir) applyFilter(listing.entries, cur.prefix);
+        })
+        .catch(() => {
+          if (seq === fetchSeq.current) close();
+        });
+    },
+    [applyFilter, close],
+  );
+
+  const scheduleRefresh = useCallback(
+    (raw: string) => {
+      window.clearTimeout(debounceTimer.current);
+      debounceTimer.current = window.setTimeout(() => refresh(raw), FETCH_DEBOUNCE_MS);
+    },
+    [refresh],
+  );
+
+  /** Complete `name` as the next path segment and append `/` so the child
+   * directory's listing loads on the next interaction — the drill-in
+   * gesture. Unlike `accept`, doesn't steal focus: Tab uses this to commit
+   * and move to the next field in one gesture. */
+  const commit = useCallback(
+    (name: string) => {
+      const { dir } = splitPath(value);
+      onChange(`${dir}${name}/`);
+    },
+    [value, onChange],
+  );
+
+  const accept = useCallback(
+    (name: string) => {
+      commit(name);
+      localRef.current?.focus();
+    },
+    [commit],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return () => {
+      window.removeEventListener("scroll", reposition, true);
+      window.removeEventListener("resize", reposition);
+    };
+  }, [open, reposition]);
+
+  useEffect(() => () => window.clearTimeout(debounceTimer.current), []);
+
+  return (
+    <>
+      <input
+        {...inputProps}
+        ref={setInputRef}
+        value={value}
+        autoComplete="off"
+        role="combobox"
+        aria-expanded={open}
+        aria-autocomplete="list"
+        onChange={(e) => {
+          dismissedRef.current = false;
+          const next = e.currentTarget.value;
+          onChange(next);
+          scheduleRefresh(next);
+        }}
+        onFocus={(e) => {
+          inputProps.onFocus?.(e);
+          if (dismissedRef.current) return;
+          refresh(value);
+        }}
+        onBlur={(e) => {
+          inputProps.onBlur?.(e);
+          // Delay so a dropdown mousedown can complete first.
+          window.setTimeout(dismiss, 120);
+        }}
+        onKeyDown={(e) => {
+          inputProps.onKeyDown?.(e);
+          if (e.defaultPrevented) return;
+          if (e.key === "Escape") {
+            if (open) {
+              e.preventDefault();
+              e.stopPropagation();
+              dismiss();
+              localRef.current?.focus();
+            }
+            return;
+          }
+          if (e.key === "Tab") {
+            if (!open || highlight < 0 || highlight >= filtered.length) return; // plain tab navigation
+            commit(filtered[highlight]); // no preventDefault — focus moves to the next field
+            return;
+          }
+          if (!open) return;
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setHighlight((h) => Math.min(h + 1, filtered.length - 1));
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setHighlight((h) => Math.max(h - 1, 0));
+          } else if (e.key === "Enter" && highlight >= 0 && highlight < filtered.length) {
+            e.preventDefault(); // accept the entry instead of submitting the form
+            accept(filtered[highlight]);
+          }
+        }}
+      />
+      {open &&
+        rect &&
+        createPortal(
+          <ul
+            role="listbox"
+            className="dir-ac fixed z-modal max-h-[240px] overflow-y-auto rounded-r-2 border border-border-strong bg-surface py-sp-1 font-mono shadow-2"
+            style={{ left: rect.left, top: rect.top, width: rect.width }}
+          >
+            {filtered.slice(0, MAX_VISIBLE).map((name, i) => (
+              <li
+                key={name}
+                role="option"
+                aria-selected={i === highlight}
+                className={`cursor-pointer truncate px-sp-3 py-1 text-fs-12 text-ink ${
+                  i === highlight ? "bg-accent-tint" : ""
+                }`}
+                onMouseDown={(e) => {
+                  e.preventDefault(); // accept before the input's blur fires
+                  accept(name);
+                }}
+              >
+                {name}/
+              </li>
+            ))}
+            {filtered.length > MAX_VISIBLE && (
+              <li className="px-sp-3 py-1 text-fs-11 text-faint">
+                +{filtered.length - MAX_VISIBLE} more — keep typing to narrow
+              </li>
+            )}
+          </ul>,
+          document.body,
+        )}
+    </>
+  );
+}

web/src/components/spawn/SpawnForm.test.tsx

@@ -0,0 +1,383 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { BranchInfo, DaemonInfo, Project, Session, SpawnPreset } from "../../types.js";
+import { SpawnForm } from "./SpawnForm.js";
+
+vi.mock("../../api.js", () => ({
+  createSession: vi.fn(),
+  fetchBranches: vi.fn(),
+  fetchNames: vi.fn(),
+  getDaemonInfo: vi.fn(),
+  gitRoot: vi.fn(),
+  listDir: vi.fn(),
+  projects: vi.fn(),
+}));
+
+import {
+  createSession,
+  fetchBranches,
+  fetchNames,
+  getDaemonInfo,
+  gitRoot,
+  listDir,
+  projects as fetchProjects,
+} from "../../api.js";
+
+const mockCreateSession = vi.mocked(createSession);
+const mockFetchBranches = vi.mocked(fetchBranches);
+const mockFetchNames = vi.mocked(fetchNames);
+const mockGetDaemonInfo = vi.mocked(getDaemonInfo);
+const mockGitRoot = vi.mocked(gitRoot);
+const mockListDir = vi.mocked(listDir);
+const mockFetchProjects = vi.mocked(fetchProjects);
+
+const presets: SpawnPreset[] = [
+  { id: "claude", label: "Claude", command: "claude" },
+  { id: "opencode", label: "opencode", command: "opencode" },
+  { id: "zsh", label: "Shell", command: "zsh" },
+  { id: "custom", label: "Custom…", command: "" },
+];
+
+function info(over: Partial<DaemonInfo> = {}): DaemonInfo {
+  return { hostname: "h", version: "1", home_dir: "/home/n", presets, ...over };
+}
+
+function project(over: Partial<Project> = {}): Project {
+  return { path: "/repos/p", name: "p", last_activity: new Date().toISOString(), ...over };
+}
+
+function session(over: Partial<Session> = {}): Session {
+  return {
+    id: "s1",
+    cwd: "/repos/p",
+    command: "claude",
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: "2026-01-01T00:00:00Z",
+    ...over,
+  };
+}
+
+/** Defaults every test starts from: one known project, no branches, a fresh
+ * generated handle. Individual tests override what they care about. */
+function stub(over: { projects?: Project[]; info?: DaemonInfo; names?: string[]; branches?: BranchInfo[] } = {}) {
+  mockGetDaemonInfo.mockResolvedValue(over.info ?? info());
+  mockFetchProjects.mockResolvedValue(over.projects ?? [project()]);
+  mockFetchNames.mockResolvedValue({ names: over.names ?? ["amber-fox"] });
+  mockFetchBranches.mockResolvedValue(over.branches ?? []);
+  mockGitRoot.mockResolvedValue({});
+  mockListDir.mockResolvedValue({ path: "", entries: [] });
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+async function settle() {
+  await waitFor(() => expect(screen.queryByText("Loading projects…")).toBeNull());
+}
+
+/** Everything worktree/name/structured-related lives behind the "Advanced"
+ * disclosure, collapsed by default (#93) — mirrors the vanilla form exactly. */
+function openAdvanced() {
+  fireEvent.click(screen.getByRole("button", { name: /Advanced/ }));
+}
+
+describe("SpawnForm harness picker", () => {
+  it("selects the first non-custom preset by default and reveals the custom input on Custom…", async () => {
+    stub();
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+
+    expect(screen.getByRole("button", { name: /^Claude/ }).className).toContain("border-accent");
+    fireEvent.click(screen.getByRole("button", { name: "Custom…" }));
+
+    expect(screen.getByPlaceholderText("bash -l").hidden).toBe(false);
+  });
+
+  it("resolves a seeded command to its matching preset", async () => {
+    stub();
+    render(<SpawnForm seed={{ command: "opencode" }} onSuccess={vi.fn()} />);
+    await settle();
+
+    const opencode = screen.getByRole("button", { name: /opencode/ });
+    expect(opencode.className).toContain("border-accent");
+  });
+
+  it("drops an unmatched seeded command into the custom field", async () => {
+    stub();
+    render(<SpawnForm seed={{ command: "hx src/" }} onSuccess={vi.fn()} />);
+    await settle();
+
+    const raw = screen.getByPlaceholderText("bash -l") as HTMLInputElement;
+    expect(raw.hidden).toBe(false);
+    expect(raw.value).toBe("hx src/");
+  });
+});
+
+describe("SpawnForm project picker", () => {
+  it("lists discovered projects and reveals the worktree step on pick", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" }), project({ path: "/repos/b", name: "b" })] });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+
+    expect(screen.queryByText("Worktree")).toBeNull();
+    fireEvent.click(screen.getByText("a"));
+
+    expect(screen.getByText("Worktree")).not.toBeNull();
+    expect(screen.getByText("+ new").closest("button")?.getAttribute("data-active")).toBe("true");
+  });
+
+  it("filters the project grid by name", async () => {
+    stub({ projects: [project({ path: "/repos/alpha", name: "alpha" }), project({ path: "/repos/beta", name: "beta" })] });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+
+    fireEvent.change(screen.getByPlaceholderText("Filter projects…"), { target: { value: "alp" } });
+
+    expect(screen.getByText("alpha")).not.toBeNull();
+    expect(screen.queryByText("beta")).toBeNull();
+  });
+
+  it("falls back to the raw directory input when no projects are discovered", async () => {
+    stub({ projects: [] });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+
+    expect((screen.getByPlaceholderText("/home/user/project") as HTMLInputElement).value).toBe("/home/n");
+  });
+
+  it("Other directory… clears the picker and opens the raw input", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" })] });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    fireEvent.click(screen.getByText("a"));
+    expect(screen.getByText("a").closest("button")?.getAttribute("data-active")).toBe("true");
+
+    fireEvent.click(screen.getByText("Other directory…"));
+
+    expect(screen.getByText("a").closest("button")?.getAttribute("data-active")).toBeNull();
+    expect((screen.getByPlaceholderText("/home/user/project") as HTMLInputElement).value).toBe("/repos/a");
+  });
+});
+
+describe("SpawnForm worktree defaults", () => {
+  it("defaults the toggle on for a picked project and infers the repo without a gitroot probe", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" })] });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+
+    fireEvent.click(screen.getByText("a"));
+
+    expect(screen.getByText("repo: /repos/a")).not.toBeNull();
+    expect(mockGitRoot).not.toHaveBeenCalled();
+  });
+
+  it("defaults the toggle off for a project that is itself a worktree (#91)", async () => {
+    stub({
+      projects: [
+        project({ path: "/repos/main", name: "main" }),
+        project({ path: "/repos/wt", name: "wt", is_worktree: true, base_repo: "/repos/main" }),
+      ],
+    });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+
+    fireEvent.click(screen.getByText("main"));
+    fireEvent.click(screen.getByText("wt"));
+
+    expect((screen.getByLabelText("Create git worktree") as HTMLInputElement).checked).toBe(false);
+  });
+
+  it("still probes gitroot for a free-text directory", async () => {
+    stub();
+    mockGitRoot.mockResolvedValue({ root: "/repos/found" });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+    fireEvent.click(screen.getByText("Other directory…"));
+
+    fireEvent.change(screen.getByPlaceholderText("/home/user/project"), {
+      target: { value: "/repos/found/sub" },
+    });
+
+    await waitFor(() => expect(mockGitRoot).toHaveBeenCalledWith("/repos/found/sub"));
+    expect(await screen.findByText("repo: /repos/found")).not.toBeNull();
+  });
+
+  it("populates existing branches, disabling the one held by another worktree", async () => {
+    stub({
+      projects: [project({ path: "/repos/a", name: "a" })],
+      branches: [
+        { name: "main", is_head: true },
+        { name: "feat/x", is_head: false, worktree: "/repos/other" },
+        { name: "feat/y", is_head: false },
+      ],
+    });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+    fireEvent.click(screen.getByText("a"));
+
+    fireEvent.click(screen.getByLabelText("Existing branch"));
+
+    const y = await screen.findByRole("option", { name: "feat/y" });
+    expect((y as HTMLOptionElement).disabled).toBe(false);
+    expect((screen.getByRole("option", { name: /main — held by the main checkout/ }) as HTMLOptionElement).disabled).toBe(
+      true,
+    );
+  });
+
+  it("submits the first pickable branch when the operator never opens the select", async () => {
+    stub({
+      projects: [project({ path: "/repos/a", name: "a" })],
+      branches: [
+        { name: "main", is_head: true },
+        { name: "feat/y", is_head: false },
+      ],
+    });
+    mockCreateSession.mockResolvedValue(session());
+    const onSuccess = vi.fn();
+    render(<SpawnForm onSuccess={onSuccess} />);
+    await settle();
+    openAdvanced();
+    fireEvent.click(screen.getByText("a"));
+    fireEvent.click(screen.getByLabelText("Existing branch"));
+    await screen.findByRole("option", { name: "feat/y" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalled());
+    expect(mockCreateSession).toHaveBeenCalledWith(
+      expect.objectContaining({ worktree: expect.objectContaining({ branch: "feat/y", create_branch: false }) }),
+    );
+  });
+});
+
+describe("SpawnForm structured view", () => {
+  it("defaults on for a resolved Claude Code command and off for an unsupported one", async () => {
+    stub();
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+
+    expect((screen.getByLabelText("Structured view") as HTMLInputElement).checked).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: /^Shell/ }));
+
+    expect(screen.queryByLabelText("Structured view")).toBeNull();
+  });
+
+  it("keeps an unchecked box unchecked across a command change between two supported tools", async () => {
+    stub();
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+    fireEvent.click(screen.getByLabelText("Structured view"));
+
+    fireEvent.click(screen.getByRole("button", { name: /opencode/ }));
+    fireEvent.click(screen.getByRole("button", { name: /^Claude/ }));
+
+    expect((screen.getByLabelText("Structured view") as HTMLInputElement).checked).toBe(false);
+  });
+});
+
+describe("SpawnForm submit", () => {
+  it("builds and posts the request, reporting the created session", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" })] });
+    const created = session();
+    mockCreateSession.mockResolvedValue(created);
+    const onSuccess = vi.fn();
+    render(<SpawnForm onSuccess={onSuccess} />);
+    await settle();
+    fireEvent.click(screen.getByText("a"));
+
+    fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledWith(created));
+    expect(mockCreateSession).toHaveBeenCalledWith(
+      expect.objectContaining({ cwd: "/repos/a", command: "claude" }),
+    );
+  });
+
+  it("shows the daemon's rejection and leaves the form open", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" })] });
+    mockCreateSession.mockRejectedValue(new Error("cwd is not a directory"));
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    fireEvent.click(screen.getByText("a"));
+
+    fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
+
+    expect(await screen.findByText("cwd is not a directory")).not.toBeNull();
+  });
+
+  it("rejects an existing-branch worktree with nothing picked", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" })], branches: [] });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+    fireEvent.click(screen.getByText("a"));
+    fireEvent.click(screen.getByLabelText("Existing branch"));
+    await screen.findByText("No local branches found.");
+
+    fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
+
+    expect(await screen.findByText("Pick an existing branch.")).not.toBeNull();
+    expect(mockCreateSession).not.toHaveBeenCalled();
+  });
+});
+
+describe("SpawnForm Enter-to-submit (#97)", () => {
+  it("submits from the session name field", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" })] });
+    mockCreateSession.mockResolvedValue(session());
+    const onSuccess = vi.fn();
+    render(<SpawnForm onSuccess={onSuccess} />);
+    await settle();
+    fireEvent.click(screen.getByText("a"));
+    openAdvanced();
+
+    fireEvent.keyDown(screen.getByPlaceholderText("named after your first prompt"), { key: "Enter" });
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalled());
+  });
+
+  it("first Enter picks a not-yet-active project box, the second submits", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" }), project({ path: "/repos/b", name: "b" })] });
+    mockCreateSession.mockResolvedValue(session());
+    const onSuccess = vi.fn();
+    render(<SpawnForm onSuccess={onSuccess} />);
+    await settle();
+
+    const boxB = screen.getByText("b").closest("button")!;
+    fireEvent.keyDown(boxB, { key: "Enter" });
+    expect(onSuccess).not.toHaveBeenCalled();
+    expect(boxB.getAttribute("data-active")).toBe("true");
+
+    fireEvent.keyDown(boxB, { key: "Enter" });
+    await waitFor(() => expect(onSuccess).toHaveBeenCalled());
+  });
+
+  it("toggles the worktree checkbox on Enter instead of submitting", async () => {
+    stub({ projects: [project({ path: "/repos/a", name: "a" })] });
+    render(<SpawnForm onSuccess={vi.fn()} />);
+    await settle();
+    openAdvanced();
+    fireEvent.click(screen.getByText("a"));
+    const checkbox = screen.getByLabelText("Create git worktree") as HTMLInputElement;
+    expect(checkbox.checked).toBe(true);
+
+    fireEvent.keyDown(checkbox, { key: "Enter" });
+
+    expect(checkbox.checked).toBe(false);
+    expect(mockCreateSession).not.toHaveBeenCalled();
+  });
+});

web/src/components/spawn/SpawnForm.tsx

@@ -0,0 +1,853 @@
+// React port of ../../spawnForm.ts: the spawn form itself — preset tiles,
+// two-step project picker, name, structured-view checkbox, worktree. Mounted
+// inside SpawnModal.
+//
+// Working-directory picker (#95), unchanged from the vanilla form:
+//  1. Step one is one box per repository (name, then its parent directory).
+//     A worktree is a box only when its main checkout is missing from the
+//     scan.
+//  2. The filter keeps a repository when the query matches it or any of its
+//     worktrees.
+//  3. Picking a box reveals step two: "+ new", then that repository's
+//     worktrees newest-first. "Other directory…" clears both steps.
+//  4. "+ new" is the default selection — except on a box that is itself a
+//     linked worktree, which defaults to that worktree.
+//  5. "+ new" means create: cwd is the repository, create-worktree on. An
+//     existing worktree means run in it: cwd is that worktree, create-worktree
+//     off (the daemon never adopts, docs/WORKTREES.md).
+//  6. Neither step probes /api/gitroot; only the free-text hatch does.
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  createSession,
+  fetchBranches,
+  fetchNames,
+  getDaemonInfo,
+  gitRoot,
+  projects as fetchProjects,
+} from "../../api.js";
+import { parentDir } from "../../paths.js";
+import {
+  filterProjects,
+  groupProjects,
+  isStale,
+  sortProjects,
+  type ProjectGroup,
+} from "../../projectList.js";
+import {
+  buildSpawnRequest,
+  FALLBACK_PRESETS,
+  supportsStructuredView,
+  type SpawnFormSeed,
+  type SpawnFormValues,
+  type WorktreeBranchMode,
+} from "../../spawnForm.js";
+import { splitCommand, toolIconSvg, TOOL_LABELS } from "../../toolIcon.js";
+import { abbreviateCwd } from "../../types.js";
+import type { BranchInfo, Project, Session, SpawnPreset } from "../../types.js";
+import { BranchPicker } from "./BranchPicker.js";
+import { DirAutocomplete } from "./DirAutocomplete.js";
+
+/** Quiet period after raw-path typing before `/api/gitroot` fires (#74). Must
+ * stay equal to `GITROOT_PROBE_DEBOUNCE_MS` in crates/maestro-tui/src/draft.rs
+ * and to ../../spawnForm.ts's own constant, so every client debounces alike. */
+const GITROOT_PROBE_DEBOUNCE_MS = 250;
+
+/** "new" (create a worktree) or the path of an existing worktree to run in. */
+type WorktreeChoice = "new" | string;
+
+type BaseRepoResolution =
+  | { kind: "disabled" }
+  | { kind: "no-cwd" }
+  | { kind: "found"; repo: string }
+  | { kind: "probe" };
+
+function resolveBaseRepoFor(cwd: string, wtEnabled: boolean, discovered: Project[]): BaseRepoResolution {
+  if (!wtEnabled) return { kind: "disabled" };
+  if (!cwd) return { kind: "no-cwd" };
+  const project = discovered.find((p) => p.path === cwd);
+  if (project) return { kind: "found", repo: project.base_repo ?? project.path };
+  return { kind: "probe" };
+}
+
+/** Every worktree of a group, including the group's own box when the scan
+ * found no main checkout to nest it under. */
+function worktreesOf(group: ProjectGroup): Project[] {
+  return [group.main, ...group.worktrees].filter((p) => p.is_worktree);
+}
+
+/** Resolve a preset id to a tool icon id — the preset's command is the source
+ * of truth, the same way the sidebar derives one. The "Custom…" preset (empty
+ * command) has no tool to show. */
+function presetToolId(p: SpawnPreset): string | null {
+  if (!p.command) return null;
+  return splitCommand(p.command).tool;
+}
+
+function harnessIcon(toolId: string): string | null {
+  const small = toolIconSvg(toolId);
+  if (!small) return null;
+  // toolIconSvg renders at 13x13 (viewBox 0 0 16 16) for the sidebar; the
+  // harness card wants the same mark at 24x24 so it breathes.
+  return small.replace(/width="13"/g, 'width="24"').replace(/height="13"/g, 'height="24"');
+}
+
+function pickerButtonClass(active: boolean): string {
+  return `flex min-h-[32px] items-baseline justify-between gap-sp-3 rounded-r-2 border px-sp-3 py-1.5 text-left font-mono ${
+    active ? "border-accent bg-accent-tint" : "border-border bg-surface-2 hover:border-border-strong"
+  }`;
+}
+
+export interface SpawnFormProps {
+  seed?: SpawnFormSeed;
+  /** Fired whenever any value changes, once the form's initial seed settles. */
+  onChange?(values: SpawnFormValues): void;
+  onSuccess(session: Session): void;
+}
+
+export function SpawnForm({ seed, onChange, onSuccess }: SpawnFormProps) {
+  const prefill = useRef(seed ?? {}).current;
+
+  const formRef = useRef<HTMLFormElement>(null);
+  const filterInputRef = useRef<HTMLInputElement>(null);
+  const customCommandRef = useRef<HTMLInputElement>(null);
+  const rawCwdRef = useRef<HTMLInputElement>(null);
+  const destroyedRef = useRef(false);
+  useEffect(() => () => {
+    destroyedRef.current = true;
+  }, []);
+
+  // ---- harness / command -------------------------------------------------
+  const [homeDir, setHomeDir] = useState("");
+  const [infoLoading, setInfoLoading] = useState(true);
+  const [presets, setPresets] = useState<SpawnPreset[]>(FALLBACK_PRESETS);
+  const [selectedPresetId, setSelectedPresetId] = useState("");
+  const [command, setCommand] = useState("");
+  const [customCommand, setCustomCommand] = useState("");
+  const [commandTouched, setCommandTouched] = useState(false);
+  const [structuredView, setStructuredView] = useState(false);
+  const [structuredTouched, setStructuredTouched] = useState(false);
+
+  const activePreset = useMemo(() => presets.find((p) => p.id === selectedPresetId), [presets, selectedPresetId]);
+  const isCustomSelected = !activePreset || activePreset.command === "";
+
+  useEffect(() => {
+    if (commandTouched && isCustomSelected) customCommandRef.current?.focus();
+  }, [isCustomSelected, commandTouched]);
+
+  useEffect(() => {
+    let cancelled = false;
+    getDaemonInfo()
+      .then((info) => {
+        if (cancelled) return;
+        setHomeDir(info.home_dir ?? "");
+        if (info.presets?.length) setPresets(info.presets);
+      })
+      .catch(() => {
+        // keep fallbacks
+      })
+      .finally(() => {
+        if (!cancelled) setInfoLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Pick a sensible starting command whenever the preset list changes and the
+  // operator hasn't touched it yet: a seed's command (matched to a preset, or
+  // dropped into custom), else the first non-custom preset.
+  useEffect(() => {
+    if (commandTouched) return;
+    const wanted = prefill.command;
+    if (wanted) {
+      const match = presets.find((p) => p.command === wanted && p.command !== "");
+      if (match) {
+        setSelectedPresetId(match.id);
+        setCommand(match.command);
+        return;
+      }
+      const custom = presets.find((p) => p.command === "");
+      setCustomCommand(wanted);
+      setSelectedPresetId(custom ? custom.id : "custom");
+      setCommand(wanted);
+      return;
+    }
+    const first = presets.find((p) => p.command !== "");
+    if (first) {
+      setSelectedPresetId(first.id);
+      setCommand(first.command);
+    }
+    // prefill is captured once at construction, not a reactive dependency.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [presets, commandTouched]);
+
+  const structuredSupported = useMemo(() => supportsStructuredView(command), [command]);
+  useEffect(() => {
+    if (!structuredSupported) setStructuredView(false);
+    else if (!structuredTouched) setStructuredView(true);
+  }, [structuredSupported, structuredTouched]);
+
+  // ---- project picker ------------------------------------------------------
+  const [discovered, setDiscovered] = useState<Project[]>([]);
+  const [projectsLoading, setProjectsLoading] = useState(true);
+  const [filterQuery, setFilterQuery] = useState("");
+  const [cwd, setCwd] = useState("");
+  const [cwdRawVisible, setCwdRawVisible] = useState(false);
+  const [rawFocusToken, setRawFocusToken] = useState(0);
+  const [selectedGroupPath, setSelectedGroupPath] = useState<string | null>(null);
+  const [worktreeChoice, setWorktreeChoice] = useState<WorktreeChoice>("new");
+
+  const groups = useMemo(() => groupProjects(sortProjects(discovered, new Date())), [discovered]);
+  const visibleGroups = useMemo(
+    () => groups.filter((g) => filterProjects([g.main, ...g.worktrees], filterQuery).length > 0),
+    [groups, filterQuery],
+  );
+  const selectedGroup = useMemo(
+    () => groups.find((g) => g.main.path === selectedGroupPath) ?? null,
+    [groups, selectedGroupPath],
+  );
+
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchProjects()
+      .then((list) => {
+        if (!cancelled) setDiscovered(list);
+      })
+      .catch(() => {
+        if (!cancelled) setDiscovered([]);
+      })
+      .finally(() => {
+        if (!cancelled) setProjectsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // ---- worktree (branch-only; base_repo inferred via scan or /gitroot) ----
+  const [wtEnabled, setWtEnabled] = useState(prefill.worktreeEnabled ?? true);
+  const [inferredBaseRepo, setInferredBaseRepo] = useState<string | null>(null);
+  const [wtHint, setWtHint] = useState<string | null>(null);
+  const [name, setName] = useState(prefill.name ?? "");
+  const [branchEdited, setBranchEdited] = useState(Boolean(prefill.worktreeBranchEdited));
+  const [branchMode, setBranchMode] = useState<WorktreeBranchMode>(prefill.worktreeBranchMode ?? "new");
+  const [newBranch, setNewBranch] = useState(prefill.worktreeBranch ?? "");
+  const [existingBranch, setExistingBranch] = useState("");
+  const [branchCache, setBranchCache] = useState<{ cwd: string; branches: BranchInfo[] } | null>(null);
+
+  const [advancedCollapsed, setAdvancedCollapsed] = useState(true);
+  const [error, setError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  const probeTokenRef = useRef(0);
+  const probeTimerRef = useRef<number | undefined>(undefined);
+
+  const applyBaseRepoResolution = useCallback((res: BaseRepoResolution) => {
+    switch (res.kind) {
+      case "disabled":
+        setInferredBaseRepo(null);
+        setWtHint(null);
+        return;
+      case "no-cwd":
+        setInferredBaseRepo(null);
+        setWtHint("Choose a working directory first.");
+        return;
+      case "found":
+        setInferredBaseRepo(res.repo);
+        setWtHint(null);
+        setBranchCache(null);
+        setExistingBranch("");
+        return;
+      case "probe":
+        return; // caller schedules the probe
+    }
+  }, []);
+
+  const probeGitRoot = useCallback(async (path: string) => {
+    const token = ++probeTokenRef.current;
+    if (!path) {
+      setInferredBaseRepo(null);
+      setWtHint("Choose a working directory first.");
+      return;
+    }
+    setWtHint("Checking for a git repository…");
+    let root: string | undefined;
+    try {
+      root = (await gitRoot(path)).root;
+    } catch {
+      root = undefined;
+    }
+    if (token !== probeTokenRef.current || destroyedRef.current) return; // a newer probe superseded us
+    if (root) {
+      setInferredBaseRepo(root);
+      setWtHint(null);
+      setBranchCache(null);
+      setExistingBranch("");
+    } else {
+      setInferredBaseRepo(null);
+      // Publish the untick too, or a later submit fails with an inferred repo
+      // that no longer matches an unticked box.
+      setWtEnabled(false);
+      setWtHint("Not inside a git repository — pick a dir in a repo to use a worktree.");
+    }
+  }, []);
+
+  const scheduleGitRootProbe = useCallback(
+    (path: string) => {
+      window.clearTimeout(probeTimerRef.current);
+      probeTimerRef.current = window.setTimeout(() => {
+        probeTimerRef.current = undefined;
+        void probeGitRoot(path);
+      }, GITROOT_PROBE_DEBOUNCE_MS);
+    },
+    [probeGitRoot],
+  );
+  useEffect(() => () => window.clearTimeout(probeTimerRef.current), []);
+
+  // Seed the form once the initial project scan and daemon info have both
+  // settled — mirrors createSpawnForm's `loadProjects()`. Computed from local
+  // values rather than reading state back, since the setState calls below
+  // won't have committed yet within this same effect.
+  const seededRef = useRef(false);
+  useEffect(() => {
+    if (infoLoading || projectsLoading || seededRef.current) return;
+    seededRef.current = true;
+
+    const seedCwd = prefill.cwd ?? null;
+    let finalCwd = "";
+    let finalCwdRawVisible = false;
+    let finalGroupPath: string | null = null;
+    let finalChoice: WorktreeChoice = "new";
+
+    const restore = (path: string): boolean => {
+      for (const group of groups) {
+        const wt = worktreesOf(group).find((p) => p.path === path);
+        const choice: WorktreeChoice | null = wt ? wt.path : group.main.path === path ? "new" : null;
+        if (choice === null) continue;
+        finalGroupPath = group.main.path;
+        finalChoice = choice;
+        return true;
+      }
+      return false;
+    };
+
+    if (seedCwd) {
+      if (prefill.cwdRawVisible === false) {
+        finalCwd = seedCwd;
+        if (!restore(seedCwd)) finalCwdRawVisible = true;
+      } else {
+        finalCwd = seedCwd;
+        finalCwdRawVisible = true;
+      }
+    } else if (discovered.length === 0) {
+      finalCwd = homeDir;
+      finalCwdRawVisible = true;
+    }
+
+    setCwd(finalCwd);
+    setCwdRawVisible(finalCwdRawVisible);
+    setSelectedGroupPath(finalGroupPath);
+    setWorktreeChoice(finalChoice);
+
+    const res = resolveBaseRepoFor(finalCwd, wtEnabled, discovered);
+    applyBaseRepoResolution(res);
+    if (res.kind === "probe") scheduleGitRootProbe(finalCwd);
+
+    setReady(true);
+    // groups/wtEnabled/discovered/homeDir are read for this one settle pass;
+    // re-running on their later changes would re-seed a form the operator
+    // has since edited.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [infoLoading, projectsLoading]);
+
+  // ---- name (also seeds the worktree branch) ------------------------------
+  const skipInitialBranchSync = useRef(Boolean(prefill.worktreeBranch));
+  useEffect(() => {
+    // One-time construction seeding, mirroring spawnForm.ts precedence: an
+    // explicit seed wins outright; otherwise the prefilled name; otherwise a
+    // freshly generated handle (#53).
+    if (prefill.worktreeBranch) return;
+    if (!branchEdited && branchMode === "new" && prefill.name) return; // handled below, mount-only
+    if (!branchEdited && branchMode === "new") {
+      void fetchNames(1)
+        .then((batch) => {
+          const handle = batch.names[0];
+          if (destroyedRef.current || !handle) return;
+          setNewBranch((cur) => cur || handle);
+        })
+        .catch(() => {
+          // the operator types their own branch
+        });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!skipInitialBranchSync.current && !branchEdited && branchMode === "new" && name) {
+      setNewBranch(name);
+    }
+    skipInitialBranchSync.current = false;
+    // A cleared name leaves the branch on its last value; only `name` changes
+    // (typed or the mount-time prefill) drive this sync.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [name]);
+
+  // ---- existing-branch picker (#61): fetch once per cwd -------------------
+  useEffect(() => {
+    if (branchMode !== "existing" || !cwd || !inferredBaseRepo) return;
+    if (branchCache?.cwd === cwd) return;
+    let cancelled = false;
+    const target = cwd;
+    fetchBranches(target)
+      .then((branches) => {
+        if (cancelled || destroyedRef.current) return;
+        setBranchCache({ cwd: target, branches });
+      })
+      .catch(() => {
+        // the picker just stays empty; "new" mode still works
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [branchMode, cwd, inferredBaseRepo, branchCache]);
+
+  const branchesForCwd = branchCache?.cwd === cwd ? branchCache.branches : undefined;
+
+  // A native <select> defaults its displayed (and reported) value to the
+  // first enabled option once nothing is explicitly selected. Derived at
+  // render/submit time rather than synced via an effect, so there is no
+  // window where the control shows one branch while state still holds "".
+  const effectiveExistingBranch =
+    existingBranch || branchesForCwd?.find((b) => !b.worktree && !b.is_head)?.name || "";
+
+  // ---- emit (#observability parity with spawnForm.ts's onChange) ---------
+  useEffect(() => {
+    if (!ready) return;
+    onChange?.({
+      command,
+      cwd,
+      name,
+      structuredView,
+      autoApprove: activePreset?.auto_approve ?? false,
+      worktreeEnabled: wtEnabled,
+      worktreeBranch: branchMode === "existing" ? effectiveExistingBranch : newBranch,
+      worktreeBranchEdited: branchEdited,
+      worktreeBranchMode: branchMode,
+      cwdRawVisible,
+    });
+  }, [
+    ready,
+    command,
+    cwd,
+    name,
+    structuredView,
+    activePreset,
+    wtEnabled,
+    branchMode,
+    effectiveExistingBranch,
+    newBranch,
+    branchEdited,
+    cwdRawVisible,
+    onChange,
+  ]);
+
+  // ---- handlers -------------------------------------------------------------
+  const selectPreset = useCallback(
+    (id: string) => {
+      setCommandTouched(true);
+      setSelectedPresetId(id);
+      const preset = presets.find((p) => p.id === id);
+      if (!preset || preset.command === "") setCommand(customCommand.trim());
+      else setCommand(preset.command);
+    },
+    [presets, customCommand],
+  );
+
+  const clearProjectSelection = useCallback(() => {
+    setSelectedGroupPath(null);
+    setWorktreeChoice("new");
+  }, []);
+
+  const showRawCwd = useCallback(
+    (prefillValue?: string, focus = true) => {
+      setCwdRawVisible(true);
+      if (prefillValue != null) setCwd(prefillValue);
+      clearProjectSelection();
+      if (focus) setRawFocusToken((t) => t + 1);
+    },
+    [clearProjectSelection],
+  );
+
+  useEffect(() => {
+    if (rawFocusToken === 0) return;
+    rawCwdRef.current?.focus();
+    rawCwdRef.current?.select();
+  }, [rawFocusToken]);
+
+  const applyWorktreeChoice = useCallback(
+    (group: ProjectGroup, choice: WorktreeChoice) => {
+      const target = choice === "new" ? group.main : worktreesOf(group).find((p) => p.path === choice);
+      if (!target) return;
+      setWorktreeChoice(choice);
+      setCwd(target.path);
+      setBranchCache(null);
+      setExistingBranch("");
+      if (choice === "new") {
+        setWtEnabled(true);
+        applyBaseRepoResolution({ kind: "found", repo: group.main.base_repo ?? group.main.path });
+      } else {
+        setWtEnabled(false);
+        applyBaseRepoResolution({ kind: "disabled" });
+      }
+    },
+    [applyBaseRepoResolution],
+  );
+
+  const selectProject = useCallback(
+    (group: ProjectGroup) => {
+      setSelectedGroupPath(group.main.path);
+      setCwdRawVisible(false);
+      // Rule 4: a box that is itself a linked worktree defaults to running there.
+      applyWorktreeChoice(group, group.main.is_worktree ? group.main.path : "new");
+    },
+    [applyWorktreeChoice],
+  );
+
+  const onWtEnabledChange = useCallback(
+    (next: boolean) => {
+      setWtEnabled(next);
+      const res = resolveBaseRepoFor(cwd, next, discovered);
+      applyBaseRepoResolution(res);
+      if (res.kind === "probe") scheduleGitRootProbe(cwd);
+    },
+    [cwd, discovered, applyBaseRepoResolution, scheduleGitRootProbe],
+  );
+
+  const onRawCwdChange = useCallback(
+    (v: string) => {
+      setCwd(v);
+      setBranchCache(null);
+      setExistingBranch("");
+      if (wtEnabled) scheduleGitRootProbe(v);
+    },
+    [wtEnabled, scheduleGitRootProbe],
+  );
+
+  const onSubmit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setError("");
+      const values: SpawnFormValues = {
+        command,
+        cwd,
+        name,
+        structuredView,
+        autoApprove: activePreset?.auto_approve ?? false,
+        worktreeEnabled: wtEnabled,
+        worktreeBranch: branchMode === "existing" ? effectiveExistingBranch : newBranch,
+        worktreeBranchEdited: branchEdited,
+        worktreeBranchMode: branchMode,
+      };
+      const built = buildSpawnRequest(values, inferredBaseRepo);
+      if ("error" in built) {
+        setError(built.error);
+        return;
+      }
+      setSubmitting(true);
+      try {
+        const session = await createSession(built.req);
+        onSuccess(session);
+      } catch (err) {
+        setError((err as Error).message);
+        setSubmitting(false);
+      }
+    },
+    [
+      command,
+      cwd,
+      name,
+      structuredView,
+      activePreset,
+      wtEnabled,
+      branchMode,
+      effectiveExistingBranch,
+      newBranch,
+      branchEdited,
+      inferredBaseRepo,
+      onSuccess,
+    ],
+  );
+
+  // ---- Enter submits from anywhere (#97) ------------------------------------
+  const onFormKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLFormElement>) => {
+      if (e.key !== "Enter" || e.defaultPrevented) return;
+      const target = e.target as HTMLElement;
+
+      if (target.dataset.role === "toggle") {
+        e.preventDefault();
+        (target as HTMLInputElement).click();
+        return;
+      }
+
+      if (target instanceof HTMLButtonElement && target.dataset.picker) {
+        e.preventDefault();
+        if (target.dataset.active === "true") {
+          formRef.current?.requestSubmit();
+        } else {
+          target.click();
+        }
+        return;
+      }
+
+      e.preventDefault();
+      if (target === filterInputRef.current) {
+        // Resolve the filter to a project only when the current pick isn't
+        // one of the matches: a filter typed past it means the operator
+        // moved on, while a pick that still matches keeps its worktree choice.
+        const stillMatches =
+          selectedGroup != null && visibleGroups.some((g) => g.main.path === selectedGroup.main.path);
+        if (!stillMatches && visibleGroups[0]) selectProject(visibleGroups[0]);
+      }
+      formRef.current?.requestSubmit();
+    },
+    [selectedGroup, visibleGroups, selectProject],
+  );
+
+  return (
+    <form
+      ref={formRef}
+      onSubmit={onSubmit}
+      onKeyDown={onFormKeyDown}
+      className="mx-auto flex w-full max-w-[60ch] flex-col gap-sp-2 overflow-auto p-sp-3"
+    >
+      <div className="flex flex-col gap-sp-2">
+        <span className="text-fs-13 text-ink">Harness</span>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-sp-2">
+          {presets.map((p) => {
+            const isCustom = p.command === "";
+            const toolId = presetToolId(p);
+            const icon = isCustom ? null : toolId ? harnessIcon(toolId) : harnessIcon("shell");
+            const label = TOOL_LABELS[toolId ?? ""] ?? p.label;
+            const active = p.id === selectedPresetId;
+            return (
+              <button
+                key={p.id}
+                type="button"
+                className={`flex flex-col items-center gap-sp-2 rounded-r-2 border px-sp-2 py-sp-3 text-center ${
+                  active
+                    ? "border-accent bg-accent-tint"
+                    : isCustom
+                      ? "border-dashed border-border text-muted"
+                      : "border-border bg-surface-2 hover:border-border-strong"
+                }`}
+                onClick={() => selectPreset(p.id)}
+              >
+                <span
+                  className={`flex h-8 w-8 items-center justify-center ${active ? "text-ink" : "text-muted"}`}
+                  aria-hidden={icon ? undefined : true}
+                  dangerouslySetInnerHTML={icon ? { __html: icon } : undefined}
+                >
+                  {icon ? undefined : "…"}
+                </span>
+                <span className="max-w-full truncate text-fs-13 font-semibold">
+                  {isCustom ? "Custom…" : label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+        <input
+          ref={customCommandRef}
+          className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
+          name="command_raw"
+          type="text"
+          hidden={!isCustomSelected}
+          placeholder="bash -l"
+          autoComplete="off"
+          value={customCommand}
+          onChange={(e) => {
+            const v = e.currentTarget.value;
+            setCustomCommand(v);
+            if (isCustomSelected) {
+              setCommandTouched(true);
+              setCommand(v.trim());
+            }
+          }}
+        />
+      </div>
+
+      <div className="flex flex-col gap-sp-2">
+        <span className="text-fs-13 text-ink">Project</span>
+        <input
+          ref={filterInputRef}
+          className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
+          type="text"
+          placeholder="Filter projects…"
+          autoComplete="off"
+          value={filterQuery}
+          onChange={(e) => setFilterQuery(e.currentTarget.value)}
+        />
+        {!ready ? (
+          <p className="m-0 px-sp-3 py-1.5 text-fs-13 text-faint">Loading projects…</p>
+        ) : (
+          <div className="grid max-h-[300px] grid-cols-2 gap-sp-2 overflow-y-auto p-px">
+            {visibleGroups.map((group) => {
+              const active = selectedGroup?.main.path === group.main.path;
+              return (
+                <button
+                  key={group.main.path}
+                  type="button"
+                  data-picker="project"
+                  data-active={active || undefined}
+                  className={`flex min-w-0 flex-col gap-0.5 rounded-r-2 border px-sp-3 py-sp-2 text-left ${
+                    active ? "border-accent bg-accent-tint" : "border-border bg-surface-2 hover:border-border-strong"
+                  } ${isStale(group.main, new Date()) ? "opacity-55" : ""}`}
+                  onClick={() => selectProject(group)}
+                >
+                  <span className="truncate text-fs-13 font-semibold text-ink">{group.main.name}</span>
+                  <span className="break-words font-mono text-fs-12 text-muted">
+                    {abbreviateCwd(parentDir(group.main.path), homeDir)}
+                  </span>
+                </button>
+              );
+            })}
+            {discovered.length > 0 && visibleGroups.length === 0 && (
+              <p className="col-span-2 m-0 px-sp-3 py-1.5 text-fs-13 text-faint">No projects match.</p>
+            )}
+          </div>
+        )}
+        <button
+          type="button"
+          className="self-start bg-transparent px-0 py-1 text-fs-13 italic text-muted hover:text-ink"
+          onClick={() => showRawCwd(cwd || homeDir)}
+        >
+          Other directory…
+        </button>
+        {cwdRawVisible && (
+          <DirAutocomplete
+            inputRef={rawCwdRef}
+            className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
+            name="cwd_raw"
+            type="text"
+            placeholder="/home/user/project"
+            value={cwd}
+            onChange={onRawCwdChange}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col border-t border-border pt-sp-2">
+        <button
+          type="button"
+          className="flex w-full items-center gap-sp-1 py-sp-2 text-left text-fs-11 text-muted"
+          aria-expanded={!advancedCollapsed}
+          onClick={() => setAdvancedCollapsed((c) => !c)}
+        >
+          <span className={`inline-block transition-transform ${advancedCollapsed ? "-rotate-90" : ""}`}>▾</span>
+          <span className="font-semibold">Advanced</span>
+          <span className="ml-auto text-fs-12 text-muted">{wtEnabled ? "creates a worktree" : "no worktree"}</span>
+        </button>
+        {!advancedCollapsed && (
+          <div className="flex flex-col gap-sp-3 py-sp-2">
+            <label className="flex flex-col gap-1 text-fs-12 text-muted">
+              Session name
+              <input
+                name="name"
+                type="text"
+                autoComplete="off"
+                placeholder="named after your first prompt"
+                className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
+                value={name}
+                onChange={(e) => setName(e.currentTarget.value)}
+              />
+            </label>
+
+            {structuredSupported && (
+              <label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
+                <input
+                  type="checkbox"
+                  data-role="toggle"
+                  className="size-[18px] accent-accent"
+                  checked={structuredView}
+                  onChange={(e) => {
+                    setStructuredTouched(true);
+                    setStructuredView(e.currentTarget.checked);
+                  }}
+                />
+                Structured view
+              </label>
+            )}
+
+            {selectedGroup && (
+              <div className="flex flex-col gap-sp-2">
+                <span className="text-fs-13 text-ink">Worktree</span>
+                <div className="flex max-h-[200px] flex-col gap-sp-1 overflow-y-auto">
+                  <button
+                    type="button"
+                    data-picker="worktree"
+                    data-active={worktreeChoice === "new" || undefined}
+                    className={pickerButtonClass(worktreeChoice === "new")}
+                    onClick={() => applyWorktreeChoice(selectedGroup, "new")}
+                  >
+                    <span className="text-fs-13 font-semibold text-accent">+ new</span>
+                    <span className="text-right text-fs-12 text-muted">
+                      new worktree of {selectedGroup.main.name}
+                    </span>
+                  </button>
+                  {worktreesOf(selectedGroup).map((wt) => (
+                    <button
+                      key={wt.path}
+                      type="button"
+                      data-picker="worktree"
+                      data-active={worktreeChoice === wt.path || undefined}
+                      className={pickerButtonClass(worktreeChoice === wt.path)}
+                      onClick={() => applyWorktreeChoice(selectedGroup, wt.path)}
+                    >
+                      <span className="text-fs-13 font-semibold text-ink">{wt.name}</span>
+                      <span className="text-right text-fs-12 text-muted">{wt.path}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <BranchPicker
+              enabled={wtEnabled}
+              onToggleEnabled={onWtEnabledChange}
+              hint={wtHint}
+              baseRepo={inferredBaseRepo}
+              mode={branchMode}
+              onModeChange={setBranchMode}
+              newBranch={newBranch}
+              onNewBranchChange={(v) => {
+                setBranchEdited(true);
+                setNewBranch(v);
+              }}
+              branches={branchesForCwd}
+              existingBranch={effectiveExistingBranch}
+              onExistingBranchChange={setExistingBranch}
+            />
+          </div>
+        )}
+      </div>
+
+      <p role="alert" aria-live="polite" className={`m-0 text-fs-13 text-danger ${error ? "rounded-r-2 bg-danger-tint px-sp-3 py-sp-2" : "min-h-[1.2em]"}`}>
+        {error}
+      </p>
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          disabled={submitting}
+          className="rounded-r-1 bg-accent px-sp-4 py-sp-2 text-fs-13 font-semibold text-accent-ink disabled:opacity-60"
+        >
+          Spawn
+        </button>
+      </div>
+    </form>
+  );
+}

web/src/components/spawn/SpawnModal.test.tsx

@@ -0,0 +1,108 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { DaemonInfo, Project, Session } from "../../types.js";
+import { SpawnModal } from "./SpawnModal.js";
+
+vi.mock("../../api.js", () => ({
+  createSession: vi.fn(),
+  fetchBranches: vi.fn(),
+  fetchNames: vi.fn(),
+  getDaemonInfo: vi.fn(),
+  gitRoot: vi.fn(),
+  listDir: vi.fn(),
+  projects: vi.fn(),
+}));
+
+import { createSession, fetchNames, getDaemonInfo, listDir, projects as fetchProjects } from "../../api.js";
+
+function info(): DaemonInfo {
+  return { hostname: "h", version: "1", home_dir: "/home/n", presets: [{ id: "claude", label: "Claude", command: "claude" }] };
+}
+
+function project(over: Partial<Project> = {}): Project {
+  return { path: "/repos/p", name: "p", ...over };
+}
+
+beforeEach(() => {
+  vi.mocked(getDaemonInfo).mockResolvedValue(info());
+  vi.mocked(fetchProjects).mockResolvedValue([project()]);
+  vi.mocked(fetchNames).mockResolvedValue({ names: ["amber-fox"] });
+  vi.mocked(listDir).mockResolvedValue({ path: "", entries: [] });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+async function settle() {
+  await waitFor(() => expect(screen.queryByText("Loading projects…")).toBeNull());
+}
+
+describe("SpawnModal", () => {
+  it("mounts the spawn form inside a dialog", async () => {
+    render(<SpawnModal onSuccess={vi.fn()} onClose={vi.fn()} />);
+    await settle();
+
+    expect(screen.getByRole("dialog")).not.toBeNull();
+    expect(screen.getByRole("button", { name: "Spawn" })).not.toBeNull();
+  });
+
+  it("titles a seeded open as a clone", async () => {
+    render(<SpawnModal seed={{ command: "claude" }} onSuccess={vi.fn()} onClose={vi.fn()} />);
+    await settle();
+
+    expect(screen.getByText("Spawn similar")).not.toBeNull();
+  });
+
+  it("titles a plain open as a new session", async () => {
+    render(<SpawnModal onSuccess={vi.fn()} onClose={vi.fn()} />);
+    await settle();
+
+    expect(screen.getByText("Spawn session")).not.toBeNull();
+  });
+
+  it("closes on Escape, on Cancel and on a backdrop click", async () => {
+    const onClose = vi.fn();
+    const { unmount } = render(<SpawnModal onSuccess={vi.fn()} onClose={onClose} />);
+    await settle();
+
+    fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" });
+    expect(onClose).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onClose).toHaveBeenCalledTimes(2);
+    unmount();
+
+    render(<SpawnModal onSuccess={vi.fn()} onClose={onClose} />);
+    await settle();
+    fireEvent.click(document.querySelector(".modal-backdrop")!);
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it("closes before handing the created session to its caller", async () => {
+    const created: Session = {
+      id: "s1",
+      cwd: "/repos/p",
+      command: "claude",
+      env: {},
+      metadata: {},
+      status: "Running",
+      created_at: "2026-01-01T00:00:00Z",
+    };
+    vi.mocked(createSession).mockResolvedValue(created);
+    const calls: string[] = [];
+    const onClose = vi.fn(() => calls.push("close"));
+    const onSuccess = vi.fn(() => calls.push("success"));
+    render(<SpawnModal onSuccess={onSuccess} onClose={onClose} />);
+    await settle();
+    fireEvent.click(screen.getByText("p"));
+
+    fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledWith(created));
+    expect(calls).toEqual(["close", "success"]);
+  });
+});

web/src/components/spawn/SpawnModal.tsx

@@ -0,0 +1,82 @@
+// React port of ../../spawnModal.ts: dialog chrome around SpawnForm. Escape,
+// the ✕ and a click on the backdrop all close it; SpawnForm's own DirAutocomplete
+// swallows Escape first, so dismissing a dropdown never also discards the form.
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import type { Session } from "../../types.js";
+import { SpawnForm, type SpawnFormProps } from "./SpawnForm.js";
+
+export interface SpawnModalProps {
+  seed?: SpawnFormProps["seed"];
+  /** Called with the created session after a successful submit — the modal
+   * has already closed by then, so the caller decides where it lands. */
+  onSuccess(session: Session): void;
+  onClose(): void;
+}
+
+export function SpawnModal({ seed, onSuccess, onClose }: SpawnModalProps) {
+  const filterInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSuccess = (session: Session) => {
+    onClose();
+    onSuccess(session);
+  };
+
+  // The project filter owns the keyboard on open: typing narrows the list and
+  // Tab from here reaches the harness tiles, matching the TUI's draft pane.
+  useEffect(() => {
+    const host = filterInputRef.current;
+    host?.querySelector<HTMLInputElement>("input[placeholder='Filter projects…']")?.focus();
+  }, []);
+
+  return createPortal(
+    <div
+      className="modal-backdrop fixed inset-0 z-modal flex items-center justify-center bg-bg/70 backdrop-blur-sm"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="spawn-title"
+        className="flex max-h-[92vh] w-full max-w-[560px] flex-col rounded-r-3 border border-border bg-surface shadow-2"
+        onKeyDown={(e) => {
+          if (e.key === "Escape" && !e.defaultPrevented) {
+            e.preventDefault();
+            onClose();
+          }
+        }}
+      >
+        <header className="flex items-center justify-between border-b border-border p-sp-3">
+          <h2 id="spawn-title" className="m-0 text-fs-15 font-semibold text-ink">
+            {seed ? "Spawn similar" : "Spawn session"}
+          </h2>
+          <button
+            type="button"
+            aria-label="Close"
+            className="rounded-r-1 px-sp-2 py-1 text-fs-15 text-muted hover:text-ink"
+            onClick={onClose}
+          >
+            ✕
+          </button>
+        </header>
+        <div ref={filterInputRef} className="min-h-0 flex-1 overflow-auto">
+          <SpawnForm seed={seed} onSuccess={handleSuccess} />
+        </div>
+        <div className="flex justify-end gap-sp-2 border-t border-border p-sp-3">
+          <button
+            type="button"
+            className="rounded-r-1 border border-border px-sp-3 py-sp-1 text-fs-12 text-ink"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

web/src/components/spawn/index.ts

@@ -0,0 +1,8 @@
+export { SpawnModal, type SpawnModalProps } from "./SpawnModal.js";
+export { SpawnForm, type SpawnFormProps } from "./SpawnForm.js";
+export { DirAutocomplete, type DirAutocompleteProps } from "./DirAutocomplete.js";
+export { BranchPicker, type BranchPickerProps } from "./BranchPicker.js";
+export { useFastForward, type UseFastForwardOptions } from "./useFastForward.js";
+// spawnSimilar.ts is pure seed-building logic with no DOM dependency — reused
+// as-is rather than re-implemented for React (#248).
+export { spawnSimilarSeed, spawnSimilarProjectSeed } from "../../spawnSimilar.js";

web/src/components/spawn/useFastForward.test.ts

@@ -0,0 +1,114 @@
+// @vitest-environment happy-dom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Project, Session, SpawnPreset } from "../../types.js";
+import { useFastForward } from "./useFastForward.js";
+
+vi.mock("../../api.js", () => ({
+  createSession: vi.fn(),
+  fetchNames: vi.fn(),
+  getDaemonInfo: vi.fn(),
+  projects: vi.fn(),
+}));
+
+import { createSession, fetchNames, getDaemonInfo, projects as fetchProjects } from "../../api.js";
+
+const mockCreateSession = vi.mocked(createSession);
+const mockFetchNames = vi.mocked(fetchNames);
+const mockGetDaemonInfo = vi.mocked(getDaemonInfo);
+const mockFetchProjects = vi.mocked(fetchProjects);
+
+const presets: SpawnPreset[] = [{ id: "claude", label: "Claude", command: "claude" }];
+
+function project(over: Partial<Project> = {}): Project {
+  return { path: "/repos/p", name: "p", base_repo: "/repos/p", last_command: "claude", ...over };
+}
+
+function session(): Session {
+  return {
+    id: "s1",
+    cwd: "/repos/p",
+    command: "claude",
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: "2026-01-01T00:00:00Z",
+  };
+}
+
+afterEach(() => vi.clearAllMocks());
+
+describe("useFastForward", () => {
+  it("spawns immediately once every default resolves", async () => {
+    mockFetchProjects.mockResolvedValue([project()]);
+    mockFetchNames.mockResolvedValue({ names: ["amber-fox"] });
+    mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
+    const created = session();
+    mockCreateSession.mockResolvedValue(created);
+    const onSpawned = vi.fn();
+    const onFallback = vi.fn();
+
+    const { result } = renderHook(() => useFastForward({ onSpawned, onFallback }));
+    await act(() => result.current());
+
+    expect(mockCreateSession).toHaveBeenCalledWith(
+      expect.objectContaining({
+        cwd: "/repos/p",
+        command: "claude",
+        worktree: { base_repo: "/repos/p", branch: "amber-fox", create_branch: true },
+      }),
+    );
+    expect(onSpawned).toHaveBeenCalledWith(created);
+    expect(onFallback).not.toHaveBeenCalled();
+  });
+
+  it("falls back to a pre-filled seed when the daemon rejects the spawn", async () => {
+    mockFetchProjects.mockResolvedValue([project()]);
+    mockFetchNames.mockResolvedValue({ names: ["amber-fox"] });
+    mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
+    mockCreateSession.mockRejectedValue(new Error("boom"));
+    const onSpawned = vi.fn();
+    const onFallback = vi.fn();
+
+    const { result } = renderHook(() => useFastForward({ onSpawned, onFallback }));
+    await act(() => result.current());
+
+    expect(onSpawned).not.toHaveBeenCalled();
+    expect(onFallback).toHaveBeenCalledWith(
+      expect.objectContaining({ cwd: "/repos/p", command: "claude", worktreeBranch: "amber-fox" }),
+    );
+  });
+
+  it("falls back when nothing is known yet (no projects, no handle)", async () => {
+    mockFetchProjects.mockResolvedValue([]);
+    mockFetchNames.mockRejectedValue(new Error("exhausted"));
+    mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
+    const onSpawned = vi.fn();
+    const onFallback = vi.fn();
+
+    const { result } = renderHook(() => useFastForward({ onSpawned, onFallback }));
+    await act(() => result.current());
+
+    expect(mockCreateSession).not.toHaveBeenCalled();
+    expect(onFallback).toHaveBeenCalledWith(expect.objectContaining({ cwd: "" }));
+  });
+
+  it("prefers the focused session's project over the freshest one", async () => {
+    mockFetchProjects.mockResolvedValue([
+      project({ path: "/repos/fresh", name: "fresh" }),
+      project({ path: "/repos/current", name: "current", last_activity: "2020-01-01T00:00:00Z" }),
+    ]);
+    mockFetchNames.mockResolvedValue({ names: ["h"] });
+    mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
+    mockCreateSession.mockResolvedValue(session());
+    const onSpawned = vi.fn();
+
+    const { result } = renderHook(() =>
+      useFastForward({ focusedCwd: "/repos/current", onSpawned, onFallback: vi.fn() }),
+    );
+    await act(() => result.current());
+
+    expect(mockCreateSession).toHaveBeenCalledWith(expect.objectContaining({ cwd: "/repos/current" }));
+  });
+});

web/src/components/spawn/useFastForward.ts

@@ -0,0 +1,57 @@
+// React port of main.ts's `requestFastForward` (#67): one keystroke, every
+// spawn default resolved — most recent project (or the one the operator is
+// on), its last command, a fresh generated branch handle, worktree on with a
+// new branch. A failed POST, or any missing default, falls back to the same
+// pre-filled form `onFallback` opens, rather than a dead keystroke.
+
+import { useCallback } from "react";
+
+import { createSession, fetchNames, getDaemonInfo, projects as fetchProjects } from "../../api.js";
+import { buildFastForwardRequest, fastForwardSeed, resolveFastForward } from "../../fastForward.js";
+import { FALLBACK_PRESETS, type SpawnFormSeed } from "../../spawnForm.js";
+import type { Project, Session, SpawnPreset } from "../../types.js";
+
+export interface UseFastForwardOptions {
+  /** The project of the session the operator is currently on, if any — its
+   * base repo for a worktree session, else its cwd. Same rule the plain
+   * spawn modal's seed uses, so `N` lands where the operator currently is. */
+  focusedCwd?: string;
+  onSpawned(session: Session): void;
+  onFallback(seed: SpawnFormSeed): void;
+}
+
+async function resolvePresets(): Promise<SpawnPreset[]> {
+  try {
+    const info = await getDaemonInfo();
+    if (info.presets?.length) return info.presets;
+  } catch {
+    // keep fallbacks
+  }
+  return FALLBACK_PRESETS;
+}
+
+/** Returns a function to call on the fast-forward keystroke. */
+export function useFastForward(opts: UseFastForwardOptions): () => Promise<void> {
+  const { focusedCwd, onSpawned, onFallback } = opts;
+
+  return useCallback(async () => {
+    const [discovered, handle] = await Promise.all([
+      fetchProjects().catch(() => [] as Project[]),
+      fetchNames(1)
+        .then((batch) => batch.names[0])
+        .catch(() => undefined),
+    ]);
+    const presets = await resolvePresets();
+    const resolved = resolveFastForward(discovered, presets, handle, focusedCwd);
+    const req = buildFastForwardRequest(resolved);
+    if (req) {
+      try {
+        onSpawned(await createSession(req));
+        return;
+      } catch {
+        // degrades to the pre-filled form below, never a silent dead key
+      }
+    }
+    onFallback(fastForwardSeed(resolved));
+  }, [focusedCwd, onSpawned, onFallback]);
+}

web/src/components/structured/ApprovalView.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ApprovalView } from "./ApprovalView.js";
+
+afterEach(cleanup);
+
+const ALL_OPTIONS = [
+  { optionId: "a1", name: "Allow once", kind: "allow_once" as const },
+  { optionId: "a2", name: "Allow always", kind: "allow_always" as const },
+  { optionId: "r1", name: "Reject", kind: "reject_once" as const },
+];
+
+function buttons(): string[] {
+  return [...document.querySelectorAll(".st-approval-acts button")].map((b) => b.textContent ?? "");
+}
+
+describe("ApprovalView", () => {
+  it("asks the operator with the three decisions the daemon exposes", () => {
+    render(
+      <ApprovalView
+        request={{ toolCall: { title: "Write(a.ts)", locations: [{ path: "/repo/a.ts" }] }, options: ALL_OPTIONS }}
+        pending
+        onDecide={() => Promise.resolve()}
+      />,
+    );
+    expect(buttons()).toEqual(["Allow once", "Allow for session", "Deny"]);
+    expect(screen.getByText("Write(a.ts)")).toBeTruthy();
+    expect(screen.getByText("/repo/a.ts")).toBeTruthy();
+  });
+
+  it("submits the decision the operator picked", async () => {
+    const onDecide = vi.fn().mockResolvedValue(undefined);
+    render(<ApprovalView request={{ options: ALL_OPTIONS }} pending onDecide={onDecide} />);
+    fireEvent.click(screen.getByText("Deny"));
+    await waitFor(() => expect(onDecide).toHaveBeenCalledWith("deny"));
+  });
+
+  it("disables every button once one is pressed, so a decision is sent once", () => {
+    render(<ApprovalView request={{ options: ALL_OPTIONS }} pending onDecide={() => new Promise(() => {})} />);
+    fireEvent.click(screen.getByText("Allow once"));
+    const all = [...document.querySelectorAll<HTMLButtonElement>(".st-approval-acts button")];
+    expect(all.every((b) => b.disabled)).toBe(true);
+  });
+
+  it("restores the controls when the decision failed and this approval is still pending", async () => {
+    const onDecide = vi.fn().mockRejectedValue(new Error("nope"));
+    render(<ApprovalView request={{ options: ALL_OPTIONS }} pending onDecide={onDecide} />);
+    fireEvent.click(screen.getByText("Allow once"));
+    await waitFor(() => {
+      const all = [...document.querySelectorAll<HTMLButtonElement>(".st-approval-acts button")];
+      expect(all.every((b) => !b.disabled)).toBe(true);
+    });
+  });
+
+  it("offers no button for a decision the request cannot back", () => {
+    render(
+      <ApprovalView
+        request={{ options: [{ optionId: "a1", name: "Allow once", kind: "allow_once" }] }}
+        pending
+        onDecide={() => Promise.resolve()}
+      />,
+    );
+    expect(buttons()).toEqual(["Allow once"]);
+  });
+
+  it("says so when the request offers no decision at all", () => {
+    render(<ApprovalView request={{ options: [] }} pending onDecide={() => Promise.resolve()} />);
+    expect(screen.getByText("no decision offered")).toBeTruthy();
+  });
+
+  it("renders a resolved approval as a one-liner, with no controls", () => {
+    render(
+      <ApprovalView
+        request={{ toolCall: { title: "Write(a.ts)" }, options: ALL_OPTIONS }}
+        pending={false}
+        onDecide={() => Promise.resolve()}
+      />,
+    );
+    expect(screen.getByText("Write(a.ts) — approved")).toBeTruthy();
+    expect(document.querySelector(".st-approval-acts")).toBeNull();
+  });
+});

web/src/components/structured/ApprovalView.tsx

@@ -0,0 +1,80 @@
+// An `Approval` row. The daemon exposes exactly three decisions
+// (docs/STRUCTURED-VIEW.md) and mints the nonce; this only solicits one of
+// them. A decision the request offers no matching ACP option for is not shown
+// — its button would "allow" something that silently resolves `Cancelled`.
+
+import { useState } from "react";
+
+import type { AcpPermissionOption, AcpToolCallLike, StructuredApprovalDecision } from "../../types.js";
+import { offeredDecisions, toolKindLabel } from "./model.js";
+
+const SPECS: [StructuredApprovalDecision, string, string][] = [
+  ["allow_once", "Allow once", "primary"],
+  ["allow_for_session", "Allow for session", ""],
+  ["deny", "Deny", "deny"],
+];
+
+export interface ApprovalViewProps {
+  /** The `RequestPermissionRequest` the row carries — serialized without its
+   *  nonce, which never leaves the daemon's live wire. */
+  request: { toolCall?: AcpToolCallLike; options?: AcpPermissionOption[] };
+  /** Whether this is the one live approval. A restored/answered row is not. */
+  pending: boolean;
+  /** Resolves once the decision reached the daemon; rejects only while this
+   *  approval is still the pending one, so the buttons can come back. */
+  onDecide: (decision: StructuredApprovalDecision) => Promise<void>;
+}
+
+export function ApprovalView({ request, pending, onDecide }: ApprovalViewProps) {
+  const [busy, setBusy] = useState(false);
+  const toolCall = request.toolCall ?? {};
+  const what = toolCall.title ?? toolKindLabel(toolCall.kind);
+
+  // Resolved approvals render as a compact one-liner inside a tool group (or
+  // are dropped entirely when standalone — see model.ts's transcriptItems).
+  if (!pending) {
+    return <div className="st-row st-row-approval st-approval-compact">{`${what} — approved`}</div>;
+  }
+
+  const offered = offeredDecisions(request.options ?? []);
+  const path = toolCall.locations?.[0]?.path;
+
+  const decide = (decision: StructuredApprovalDecision) => {
+    setBusy(true);
+    onDecide(decision).catch(() => {
+      // Rejects only while this approval is still pending — restore the
+      // controls so the operator can retry. The error itself is surfaced by
+      // the pane's banner.
+      setBusy(false);
+    });
+  };
+
+  return (
+    <div className="st-row st-row-approval">
+      <div className="st-approval">
+        <div className="st-approval-title">
+          <span aria-hidden="true">⚠</span> permission requested
+        </div>
+        <div className="st-approval-what">{what}</div>
+        {path && <div className="st-approval-path">{path}</div>}
+        {offered.length > 0 ? (
+          <div className="st-approval-acts">
+            {SPECS.filter(([decision]) => offered.includes(decision)).map(([decision, label, cls]) => (
+              <button
+                key={decision}
+                type="button"
+                className={cls ? `act ${cls}` : "act"}
+                disabled={busy}
+                onClick={() => decide(decision)}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className="st-approval-resolved">no decision offered</div>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/structured/Composer.tsx

@@ -0,0 +1,391 @@
+// The composer: draft, attachments, `/` command autocomplete off the live
+// `available_commands_update` notices, the session-settings menu, and the
+// send/cancel pair. Sending is the pane's job — this only hands it a draft and
+// the files that go with it.
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type DragEvent,
+  type FormEvent,
+  type KeyboardEvent,
+} from "react";
+
+import type { AcpSessionConfigChoice, AcpSessionConfigOption } from "../../types.js";
+import {
+  applyCommand,
+  commandTokenAt,
+  filterCommands,
+  orderConfigOptions,
+  type AvailableCommand,
+} from "./model.js";
+
+/** Per-message ceilings the daemon enforces on uploads
+ *  (docs/STRUCTURED-VIEW.md, "Prompt and cancel"). */
+export const MAX_ATTACHMENTS = 10;
+export const MAX_ATTACHMENT_BYTES = 20 * 1024 * 1024;
+/** Pasted text at or above either bound becomes a `.txt` attachment instead of
+ *  going inline. */
+const PASTE_TO_FILE_CHARS = 4_000;
+const PASTE_TO_FILE_LINES = 40;
+
+export interface ComposerProps {
+  /** Files chosen but not yet sent. Owned by the pane so a failed send can put
+   *  them back. */
+  attachments: File[];
+  onAttachmentsChange(files: File[]): void;
+  commands: AvailableCommand[];
+  configOptions: AcpSessionConfigOption[];
+  /** A turn is in flight — the cancel control replaces nothing, it appears
+   *  beside send (a queued message is still allowed). */
+  turnActive: boolean;
+  /** An upload/POST is in flight: the attachment controls are frozen. */
+  uploading: boolean;
+  configBusy: boolean;
+  /** Restored into the box when a send fails. */
+  draft: string;
+  onDraftChange(draft: string): void;
+  onSubmit(text: string, attachments: File[]): void;
+  onCancel(): void;
+  onConfigChange(option: AcpSessionConfigOption, value: string | boolean): void;
+  onError(message: string): void;
+  menuId: string;
+}
+
+function configChoices(option: AcpSessionConfigOption): AcpSessionConfigChoice[] {
+  return (option.options ?? []).flatMap((choice) => ("options" in choice ? choice.options : [choice]));
+}
+
+function currentConfigLabel(option: AcpSessionConfigOption): string {
+  if (typeof option.currentValue === "boolean") return option.currentValue ? "On" : "Off";
+  return configChoices(option).find((choice) => choice.value === option.currentValue)?.name
+    ?? String(option.currentValue);
+}
+
+export function Composer({
+  attachments,
+  onAttachmentsChange,
+  commands,
+  configOptions,
+  turnActive,
+  uploading,
+  configBusy,
+  draft,
+  onDraftChange,
+  onSubmit,
+  onCancel,
+  onConfigChange,
+  onError,
+  menuId,
+}: ComposerProps) {
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const fileRef = useRef<HTMLInputElement | null>(null);
+  const configRef = useRef<HTMLDivElement | null>(null);
+  const [caret, setCaret] = useState(0);
+  const [activeCommand, setActiveCommand] = useState(0);
+  const [configOpen, setConfigOpen] = useState(false);
+  /** Escape closes the menu until the draft or caret moves again. */
+  const [menuDismissed, setMenuDismissed] = useState(false);
+  const pasteCount = useRef(0);
+
+  // Grow with the draft, up to the CSS max-height; past that it scrolls.
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    input.style.height = "auto";
+    input.style.overflowY = "hidden";
+    input.style.height = `${Math.min(input.scrollHeight, 160)}px`;
+    if (input.scrollHeight > 160) input.style.overflowY = "auto";
+  }, [draft]);
+
+  useEffect(() => {
+    if (!configOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!configRef.current?.contains(event.target as Node)) setConfigOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [configOpen]);
+
+  const token = commandTokenAt(draft, caret, caret);
+  const matches = token && commands.length > 0 ? filterCommands(commands, token.query) : [];
+  const menuOpen = matches.length > 0 && !menuDismissed;
+  const activeIndex = menuOpen ? Math.min(Math.max(activeCommand, 0), matches.length - 1) : -1;
+
+  const addFiles = useCallback(
+    (files: File[]) => {
+      if (uploading) return;
+      const next = [...attachments];
+      for (const file of files) {
+        if (file.size > MAX_ATTACHMENT_BYTES) {
+          onError(`${file.name} exceeds 20 MiB. Choose a smaller file.`);
+        } else if (next.length >= MAX_ATTACHMENTS) {
+          onError(`Attach up to ${MAX_ATTACHMENTS} files per message.`);
+        } else {
+          next.push(file);
+        }
+      }
+      onAttachmentsChange(next);
+    },
+    [attachments, onAttachmentsChange, onError, uploading],
+  );
+
+  const syncCaret = () => {
+    setMenuDismissed(false);
+    setCaret(inputRef.current?.selectionStart ?? 0);
+  };
+
+  const chooseCommand = (command: AvailableCommand) => {
+    const input = inputRef.current;
+    if (!input) return;
+    const current = commandTokenAt(draft, input.selectionStart, input.selectionEnd);
+    if (!current) return;
+    const applied = applyCommand(draft, current, command.name);
+    onDraftChange(applied.value);
+    setActiveCommand(0);
+    // The caret has to move after React has written the new value.
+    requestAnimationFrame(() => {
+      input.focus();
+      input.setSelectionRange(applied.cursor, applied.cursor);
+      setCaret(applied.cursor);
+    });
+  };
+
+  const submit = () => {
+    if ((!draft.trim() && attachments.length === 0) || uploading) return;
+    onSubmit(draft, attachments);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (menuOpen) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const direction = event.key === "ArrowDown" ? 1 : -1;
+        setActiveCommand((index) => (index + direction + matches.length) % matches.length);
+        return;
+      }
+      if ((event.key === "Enter" && !event.shiftKey) || event.key === "Tab") {
+        event.preventDefault();
+        chooseCommand(matches[activeIndex]);
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setMenuDismissed(true);
+        return;
+      }
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const onPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const clipboard = event.clipboardData;
+    if (!clipboard || uploading) return;
+    if (clipboard.files.length) {
+      event.preventDefault();
+      addFiles(Array.from(clipboard.files));
+      return;
+    }
+    const text = clipboard.getData("text/plain");
+    if (text.length < PASTE_TO_FILE_CHARS && text.split("\n").length < PASTE_TO_FILE_LINES) return;
+    // No slot for it, or too big to upload: leave it inline rather than
+    // dropping it on the floor.
+    if (attachments.length >= MAX_ATTACHMENTS || new Blob([text]).size > MAX_ATTACHMENT_BYTES) return;
+    event.preventDefault();
+    addFiles([new File([text], `pasted-${++pasteCount.current}.txt`, { type: "text/plain" })]);
+  };
+
+  const ordered = orderConfigOptions(configOptions);
+  const summary = ordered.map((option) => `${option.name}: ${currentConfigLabel(option)}`).join("\n");
+
+  return (
+    <form
+      className="structured-composer"
+      onSubmit={(event: FormEvent) => {
+        event.preventDefault();
+        submit();
+      }}
+      onDragOver={(event: DragEvent) => {
+        if (event.dataTransfer?.types.includes("Files")) event.preventDefault();
+      }}
+      onDrop={(event: DragEvent) => {
+        if (!event.dataTransfer?.files.length) return;
+        event.preventDefault();
+        addFiles(Array.from(event.dataTransfer.files));
+      }}
+    >
+      <button
+        type="button"
+        className="structured-attach"
+        aria-label="Attach files"
+        title="Attach files (up to 20 MiB each)"
+        disabled={uploading}
+        onClick={() => fileRef.current?.click()}
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+          <path d="m8 12 7-7a3 3 0 0 1 4 4L9 19a5 5 0 0 1-7-7L12 2M5 14l9-9" />
+        </svg>
+      </button>
+      <input
+        ref={fileRef}
+        className="structured-file-input"
+        type="file"
+        multiple
+        hidden
+        disabled={uploading}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          addFiles(Array.from(event.target.files ?? []));
+          event.target.value = "";
+        }}
+      />
+      <div className="structured-input-wrap">
+        <div className="structured-attachments" aria-label="Attachments" aria-live="polite" hidden={attachments.length === 0}>
+          {attachments.map((file, index) => (
+            <span key={`${file.name}-${index}`} className="structured-attachment">
+              <span title={`${file.name} (${file.size.toLocaleString()} bytes)`}>{file.name}</span>
+              <button
+                type="button"
+                aria-label={`Remove ${file.name}`}
+                disabled={uploading}
+                onClick={() => onAttachmentsChange(attachments.filter((_, i) => i !== index))}
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+        <div id={menuId} className="structured-command-menu" role="listbox" hidden={!menuOpen}>
+          {matches.map((command, index) => (
+            <div
+              key={command.name}
+              id={`${menuId}-option-${index}`}
+              className="structured-command-option"
+              role="option"
+              aria-selected={index === activeIndex}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={() => chooseCommand(command)}
+            >
+              <div className="structured-command-title">
+                <span className="structured-command-name">{`/${command.name}`}</span>
+                <span className="structured-command-hint">{command.input?.hint ?? ""}</span>
+              </div>
+              <div className="structured-command-description">
+                {command.description.replace(/\s+/g, " ").trim()}
+              </div>
+            </div>
+          ))}
+        </div>
+        <textarea
+          ref={inputRef}
+          className="structured-input"
+          rows={1}
+          placeholder="Reply, or / for commands…"
+          autoComplete="off"
+          aria-autocomplete="list"
+          aria-expanded={menuOpen}
+          aria-controls={menuId}
+          aria-activedescendant={activeIndex >= 0 ? `${menuId}-option-${activeIndex}` : undefined}
+          value={draft}
+          onChange={(event) => {
+            onDraftChange(event.target.value);
+            setActiveCommand(0);
+            setMenuDismissed(false);
+            setCaret(event.target.selectionStart ?? event.target.value.length);
+          }}
+          onClick={syncCaret}
+          onSelect={syncCaret}
+          onKeyUp={(event) => {
+            if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) syncCaret();
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+        />
+      </div>
+      <div className="structured-config" ref={configRef} hidden={ordered.length === 0}>
+        <button
+          type="button"
+          className="structured-config-trigger"
+          aria-haspopup="true"
+          aria-expanded={configOpen}
+          aria-label={`Session settings. ${summary.replaceAll("\n", ". ")}`}
+          title={summary}
+          disabled={configBusy}
+          onClick={() => setConfigOpen((open) => !open)}
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6" />
+          </svg>
+        </button>
+        <div
+          className="structured-config-menu"
+          role="group"
+          aria-label="Session settings"
+          hidden={!configOpen}
+          onKeyDown={(event) => {
+            if (event.key !== "Escape") return;
+            setConfigOpen(false);
+            configRef.current?.querySelector<HTMLButtonElement>(".structured-config-trigger")?.focus();
+          }}
+        >
+          {ordered.map((option) => (
+            <label key={option.id} className="structured-config-row" title={option.description ?? undefined}>
+              <span className="structured-config-name">{option.name}</span>
+              {option.type === "select" ? (
+                <select
+                  className="structured-config-select"
+                  disabled={configBusy}
+                  value={String(option.currentValue)}
+                  onChange={(event) => onConfigChange(option, event.target.value)}
+                >
+                  {configChoices(option).map((choice) => (
+                    <option key={choice.value} value={choice.value} title={choice.description ?? ""}>
+                      {choice.name}
+                    </option>
+                  ))}
+                </select>
+              ) : option.type === "boolean" ? (
+                <input
+                  type="checkbox"
+                  className="structured-config-toggle"
+                  disabled={configBusy}
+                  checked={option.currentValue === true}
+                  onChange={(event) => onConfigChange(option, event.target.checked)}
+                />
+              ) : null}
+            </label>
+          ))}
+        </div>
+      </div>
+      <button type="submit" className="structured-send">
+        <span>Send</span>
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="m7 5 5 5-5 5M12 10H3" />
+        </svg>
+      </button>
+      {turnActive && (
+        <button
+          type="button"
+          className="structured-cancel"
+          aria-label="Cancel turn"
+          title="Cancel turn"
+          onClick={onCancel}
+        >
+          <svg className="structured-cancel-spinner" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="50 14" strokeLinecap="round" />
+          </svg>
+          <svg className="structured-cancel-stop" viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" />
+          </svg>
+        </button>
+      )}
+    </form>
+  );
+}

web/src/components/structured/Copyable.tsx

@@ -0,0 +1,101 @@
+// docs/STRUCTURED-VIEW.md: the web client's user, agent, thought, tool-detail
+// and notice text blocks copy their complete source text when clicked or
+// keyboard-activated. The visible node is whatever it wraps; this only adds
+// the affordance and the "copied"/"error" state the CSS reads.
+
+import { useCallback, useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
+
+async function writeClipboard(text: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return;
+  } catch {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const copied = document.execCommand?.("copy") ?? false;
+    textarea.remove();
+    if (!copied) throw new Error("clipboard unavailable");
+  }
+}
+
+export interface CopyableProps {
+  /** The complete source text — not whatever the DOM happens to show. */
+  text: string;
+  /** Names the thing in the "Copy …" label ("message", "diff", "path", …). */
+  label: string;
+  as?: ElementType;
+  className?: string;
+  title?: string;
+  children?: ReactNode;
+  /** Extra attributes the row builders set (`data-row-id`, `lang`, …). */
+  [key: string]: unknown;
+}
+
+/** Wrapping a node in a copy affordance. Empty `text` renders the node plain —
+ *  a control that copies nothing is worse than no control. */
+export function Copyable({
+  text,
+  label,
+  as: Tag = "div",
+  className,
+  children,
+  ...rest
+}: CopyableProps) {
+  const [copyState, setCopyState] = useState<"copied" | "error" | null>(null);
+  const timer = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timer.current !== null) window.clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  const copy = useCallback(() => {
+    void writeClipboard(text).then(
+      () => {
+        setCopyState("copied");
+        if (timer.current !== null) window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => setCopyState(null), 1200);
+      },
+      () => setCopyState("error"),
+    );
+  }, [text]);
+
+  if (!text) {
+    return (
+      <Tag className={className} {...rest}>
+        {children}
+      </Tag>
+    );
+  }
+
+  const ariaLabel = copyState === "copied" ? `${label} copied` : `Copy ${label}`;
+  return (
+    <Tag
+      className={className ? `${className} st-copyable` : "st-copyable"}
+      tabIndex={0}
+      role="button"
+      aria-label={ariaLabel}
+      title={`Copy ${label}`}
+      data-copy-state={copyState ?? undefined}
+      onClick={(event: React.MouseEvent) => {
+        // A link inside the block is a link, not a copy target.
+        if ((event.target as Element | null)?.closest("a")) return;
+        copy();
+      }}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        copy();
+      }}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}

web/src/components/structured/DiffView.test.tsx

@@ -0,0 +1,50 @@
+// @vitest-environment happy-dom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { DiffView } from "./DiffView.js";
+import { toolDiffMeta } from "./model.js";
+
+afterEach(cleanup);
+
+function lines(kind: string): string[] {
+  return [...document.querySelectorAll(`.st-ln-${kind}`)].map((el) => el.textContent ?? "");
+}
+
+describe("DiffView", () => {
+  it("marks insertions and deletions with their column prefixes", () => {
+    render(<DiffView diff={{ path: "src/a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }} />);
+    expect(lines("del")).toEqual(["- two"]);
+    expect(lines("add")).toEqual(["+ TWO", "+ three"]);
+    expect(lines("ctx")).toEqual(["  one"]);
+    expect(screen.getByText("src/a.ts")).toBeTruthy();
+  });
+
+  it("carries the +added −removed counts the tool head shows", () => {
+    render(<DiffView diff={{ path: "a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }} />);
+    const body = document.querySelector<HTMLElement>(".st-diff")!;
+    expect(body.dataset.added).toBe("2");
+    expect(body.dataset.removed).toBe("1");
+    expect(toolDiffMeta([{ type: "diff", path: "a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }]))
+      .toBe("+2 −1");
+  });
+
+  it("renders every line of a new file as added", () => {
+    render(<DiffView diff={{ path: "new.ts", newText: "alpha\nbeta\n" }} />);
+    expect(lines("add")).toEqual(["+ alpha", "+ beta"]);
+    expect(lines("del")).toEqual([]);
+  });
+
+  it("collapses a long unchanged run to a hunk summary", () => {
+    const filler = Array.from({ length: 20 }, (_, i) => `line ${i}`).join("\n");
+    render(<DiffView diff={{ path: "a.ts", oldText: `head\n${filler}\n`, newText: `HEAD\n${filler}\n` }} />);
+    expect(lines("hunk")).toEqual(["⋯ 17 unchanged lines ⋯"]);
+  });
+
+  it("copies the whole diff, prefixes included", () => {
+    render(<DiffView diff={{ path: "a.ts", oldText: "one\n", newText: "two\n" }} />);
+    const body = document.querySelector<HTMLElement>(".st-diff")!;
+    expect(body.getAttribute("aria-label")).toBe("Copy diff");
+    expect(body.textContent).toBe("- one+ two");
+  });
+});

web/src/components/structured/DiffView.tsx

@@ -0,0 +1,56 @@
+// A `Diff` content block, rendered as coloured hunks. ACP hands over whole
+// `oldText`/`newText`, so the lines and their `+added −removed` counts are
+// computed here (structuredDiff.ts) rather than parsed out of a patch.
+
+import { useMemo } from "react";
+
+import { computeDiffLines, diffStats, type DiffLine } from "../../structuredDiff.js";
+import type { AcpDiff } from "../../types.js";
+import { Copyable } from "./Copyable.js";
+
+/** Column prefix by line kind. A `hunk` summary and an `eof` marker are their
+ *  own complete text, so neither takes one. */
+const PREFIX: Record<DiffLine["kind"], string> = {
+  add: "+ ",
+  del: "- ",
+  ctx: "  ",
+  hunk: "",
+  eof: "",
+};
+
+export function diffLineText(line: DiffLine): string {
+  return PREFIX[line.kind] + line.text;
+}
+
+export interface DiffViewProps {
+  diff: AcpDiff;
+}
+
+export function DiffView({ diff }: DiffViewProps) {
+  const lines = useMemo(() => computeDiffLines(diff.oldText, diff.newText), [diff.oldText, diff.newText]);
+  const stats = useMemo(() => diffStats(lines), [lines]);
+  const plain = useMemo(() => lines.map(diffLineText).join("\n"), [lines]);
+
+  return (
+    <div className="st-diff-block">
+      <Copyable className="st-diff-path" text={diff.path} label="path" title={diff.path}>
+        {diff.path}
+      </Copyable>
+      <Copyable
+        className="st-diff"
+        text={plain}
+        label="diff"
+        data-added={stats.added}
+        data-removed={stats.removed}
+      >
+        <pre>
+          {lines.map((line, index) => (
+            <span key={index} className={`st-ln st-ln-${line.kind}`}>
+              {diffLineText(line)}
+            </span>
+          ))}
+        </pre>
+      </Copyable>
+    </div>
+  );
+}

web/src/components/structured/StructuredPane.test.tsx

@@ -0,0 +1,403 @@
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../../api.js", async () => {
+  const actual = await vi.importActual<typeof import("../../api.js")>("../../api.js");
+  return {
+    ...actual,
+    sendStructuredPrompt: vi.fn().mockResolvedValue(undefined),
+    uploadStructuredFile: vi.fn().mockResolvedValue({ path: "/uploads/pasted.txt" }),
+    cancelStructuredTurn: vi.fn().mockResolvedValue(undefined),
+    resolveStructuredApproval: vi.fn().mockResolvedValue(undefined),
+    setStructuredConfig: vi.fn().mockResolvedValue(undefined),
+  };
+});
+
+import {
+  cancelStructuredTurn,
+  resolveStructuredApproval,
+  sendStructuredPrompt,
+  uploadStructuredFile,
+} from "../../api.js";
+import { INITIAL_RECONNECT_MS } from "../../reconnect.js";
+import type { ReducedState, StructuredEvent, TranscriptRow } from "../../types.js";
+import { StructuredPane } from "./StructuredPane.js";
+
+/** Just enough of a WebSocket for the pane to drive (mirrors structured.test.ts's
+ *  own fake, which the pre-React connection used). */
+class FakeSocket {
+  onopen: (() => void) | null = null;
+  onmessage: ((ev: { data: string }) => void) | null = null;
+  onerror: (() => void) | null = null;
+  onclose: ((ev: { code: number; reason: string }) => void) | null = null;
+  closed = false;
+
+  open(): void {
+    act(() => this.onopen?.());
+  }
+  emit(event: StructuredEvent): void {
+    act(() => this.onmessage?.({ data: JSON.stringify(event) }));
+  }
+  drop(code = 1006, reason = ""): void {
+    act(() => this.onclose?.({ code, reason }));
+  }
+  close(): void {
+    this.closed = true;
+  }
+}
+
+const idle: ReducedState = { turn: { responding: false, thinking: false, active_tool_calls: [] } };
+const busy: ReducedState = { turn: { responding: true, thinking: false, active_tool_calls: [] } };
+
+function row(id: string, kind: TranscriptRow["kind"], data: unknown = {}): TranscriptRow {
+  return { id, kind, data };
+}
+
+function chunk(id: string, kind: "user" | "agent_text" | "agent_thought", text: string): TranscriptRow {
+  return row(id, kind, { content: { type: "text", text } });
+}
+
+const APPROVAL_REQUEST = {
+  toolCall: { title: "Write(secrets.txt)", kind: "edit", locations: [{ path: "/repo/secrets.txt" }] },
+  options: [
+    { optionId: "a1", name: "Allow once", kind: "allow_once" },
+    { optionId: "a2", name: "Allow always", kind: "allow_always" },
+    { optionId: "r1", name: "Reject", kind: "reject_once" },
+  ],
+};
+
+function mount(): { socket: FakeSocket; sockets: FakeSocket[] } {
+  const sockets: FakeSocket[] = [];
+  render(
+    <StructuredPane
+      sessionId="s1"
+      socketFactory={() => {
+        const socket = new FakeSocket();
+        sockets.push(socket);
+        return socket as unknown as WebSocket;
+      }}
+    />,
+  );
+  sockets[0].open();
+  return { socket: sockets[0], sockets };
+}
+
+function snapshot(socket: FakeSocket, rows: TranscriptRow[], state: ReducedState = idle): void {
+  socket.emit({ type: "transcript_snapshot", snapshot: { cursor: rows.length, rows } });
+  socket.emit({ type: "reduced_state", state });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("the eight row kinds", () => {
+  it("renders user, agent, thought, tool, diff, approval and notice rows; never a plan", () => {
+    const { socket } = mount();
+    snapshot(
+      socket,
+      [
+        chunk("user:1", "user", "please edit it"),
+        chunk("agent:1", "agent_text", "**bold** answer"),
+        chunk("thought:1", "agent_thought", "considering"),
+        row("tool:1", "tool_call", { title: "Read(src/main.ts)", kind: "read", status: "completed" }),
+        row("tool:2", "tool_diff", {
+          title: "Edit(a.ts)",
+          kind: "edit",
+          status: "completed",
+          content: [{ type: "diff", path: "a.ts", oldText: "one\n", newText: "one\ntwo\n" }],
+        }),
+        row("approval:1", "approval", APPROVAL_REQUEST),
+        row("plan", "plan", { entries: [{ content: "step", priority: "high", status: "pending" }] }),
+        row("notice:1", "notice", { sessionUpdate: "mystery_update" }),
+      ],
+      { ...idle, pending_approval: { nonce: "nonce-1", request: APPROVAL_REQUEST as never } },
+    );
+
+    expect(screen.getByText("please edit it")).toBeTruthy();
+    expect(document.querySelector(".st-row-agent strong")?.textContent).toBe("bold");
+    expect(document.querySelector(".st-row-thought")?.textContent).toContain("considering");
+    expect(screen.getByText("src/main.ts")).toBeTruthy();
+    // The diff row's head carries the line counts, not a fabricated duration.
+    expect(document.querySelector('[data-row-id="tool:2"] .st-tool-meta')?.textContent).toBe("+1 −0");
+    expect(screen.getByText("permission requested")).toBeTruthy();
+    expect(screen.getByText("[notice]")).toBeTruthy();
+    expect(document.querySelector('[data-row-id="plan"]')).toBeNull();
+  });
+
+  it("omits the state-only notices it consumes for `/` autocomplete", () => {
+    const { socket } = mount();
+    snapshot(socket, [
+      row("notice:1", "notice", {
+        sessionUpdate: "available_commands_update",
+        availableCommands: [{ name: "compact", description: "Compact the conversation" }],
+      }),
+      row("notice:2", "notice", { sessionUpdate: "session_info_update" }),
+    ]);
+    expect(screen.queryByText("[notice]")).toBeNull();
+
+    // …and offers them in the composer instead.
+    const input = document.querySelector<HTMLTextAreaElement>(".structured-input")!;
+    fireEvent.change(input, { target: { value: "/comp" } });
+    expect(screen.getByText("/compact")).toBeTruthy();
+  });
+
+  it("renders a completed turn's footer inline, and retires it once the next turn starts", () => {
+    const { socket } = mount();
+    const footer = row("turn_meta:1", "notice", {
+      maestroTurnMeta: { elapsedMs: 65_000, outcome: "completed", model: "sonnet", contextDelta: 1200 },
+    });
+    snapshot(socket, [chunk("user:1", "user", "go"), footer]);
+    expect(screen.getByText("1m 5s · +1.2k context tokens · sonnet")).toBeTruthy();
+
+    socket.emit({
+      type: "projection_update",
+      transcript: { type: "append", row: chunk("user:2", "user", "again") },
+      state: idle,
+    });
+    expect(screen.queryByText(/1m 5s/)).toBeNull();
+  });
+});
+
+describe("tool rows and activity groups", () => {
+  it("collapses two or more tools in a turn into one group, opened on click", () => {
+    const { socket } = mount();
+    snapshot(socket, [
+      chunk("user:1", "user", "go"),
+      row("tool:1", "tool_call", { title: "Read(a.ts)", kind: "read", status: "completed" }),
+      chunk("agent:1", "agent_text", "still working"),
+      row("tool:2", "tool_call", { title: "Read(b.ts)", kind: "read", status: "completed" }),
+      chunk("agent:2", "agent_text", "the answer"),
+    ]);
+
+    const head = screen.getByText("2 tool calls").closest("button")!;
+    expect(head.getAttribute("aria-expanded")).toBe("false");
+    // The final answer stays outside the group; the intermediate text is in it.
+    expect(document.querySelector(".st-tool-group")!.contains(screen.getByText("the answer"))).toBe(false);
+    expect(document.querySelector(".st-tool-group")!.contains(screen.getByText("still working"))).toBe(true);
+
+    fireEvent.click(head);
+    expect(head.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("discloses a tool's output only once its head is opened", () => {
+    const { socket } = mount();
+    snapshot(socket, [
+      row("tool:1", "tool_call", {
+        title: "Execute(ls)",
+        kind: "execute",
+        status: "completed",
+        content: [{ type: "content", content: { type: "text", text: "a.ts\nb.ts" } }],
+        rawInput: { command: "ls" },
+        rawOutput: { exit_code: 0 },
+      }),
+    ]);
+    expect(document.querySelector(".st-tool-text")).toBeNull();
+
+    fireEvent.click(document.querySelector<HTMLButtonElement>(".st-tool-head")!);
+    expect(document.querySelector(".st-tool-text")?.textContent).toBe("a.ts\nb.ts");
+    expect(screen.getByText("Exit code")).toBeTruthy();
+    expect(document.querySelector(".st-tool-exit-ok")?.textContent).toBe("0");
+  });
+
+  it("patches a tool row in place rather than appending a second one", () => {
+    const { socket } = mount();
+    snapshot(socket, [row("tool:1", "tool_call", { title: "Read(a.ts)", kind: "read", status: "in_progress" })]);
+    expect(document.querySelector(".st-tool-meta")?.textContent).toBe("running");
+
+    socket.emit({
+      type: "projection_update",
+      transcript: {
+        type: "patch",
+        row: row("tool:1", "tool_call", { title: "Read(a.ts)", kind: "read", status: "completed" }),
+      },
+      state: idle,
+    });
+    expect(document.querySelectorAll('[data-row-id="tool:1"]')).toHaveLength(1);
+    expect(document.querySelector(".st-tool-meta")).toBeNull();
+  });
+});
+
+describe("approvals", () => {
+  it("answers with the live nonce, offering only the decisions the request backs", async () => {
+    const { socket } = mount();
+    snapshot(socket, [row("approval:1", "approval", APPROVAL_REQUEST)], {
+      ...idle,
+      pending_approval: { nonce: "nonce-1", request: APPROVAL_REQUEST as never },
+    });
+
+    expect(screen.getByText("/repo/secrets.txt")).toBeTruthy();
+    fireEvent.click(screen.getByText("Allow for session"));
+    await waitFor(() =>
+      expect(resolveStructuredApproval).toHaveBeenCalledWith("s1", "nonce-1", "allow_for_session"),
+    );
+  });
+
+  it("hides a decision the request offers no ACP option for", () => {
+    const { socket } = mount();
+    const request = { toolCall: { title: "Read(a.ts)" }, options: [{ optionId: "r", name: "No", kind: "reject_once" }] };
+    snapshot(socket, [row("approval:1", "approval", request)], {
+      ...idle,
+      pending_approval: { nonce: "nonce-2", request: request as never },
+    });
+    expect(screen.getByText("Deny")).toBeTruthy();
+    expect(screen.queryByText("Allow once")).toBeNull();
+  });
+
+  it("treats only the newest approval as pending, and hides resolved standalone ones", () => {
+    const { socket } = mount();
+    snapshot(
+      socket,
+      [row("approval:1", "approval", APPROVAL_REQUEST), row("approval:2", "approval", APPROVAL_REQUEST)],
+      { ...idle, pending_approval: { nonce: "nonce-3", request: APPROVAL_REQUEST as never } },
+    );
+    expect(screen.getAllByText("permission requested")).toHaveLength(1);
+    expect(screen.queryByText(/approved/)).toBeNull();
+  });
+
+  it("drops the controls once the approval is no longer pending", () => {
+    const { socket } = mount();
+    snapshot(socket, [row("approval:1", "approval", APPROVAL_REQUEST)], {
+      ...idle,
+      pending_approval: { nonce: "nonce-4", request: APPROVAL_REQUEST as never },
+    });
+    expect(screen.getByText("Allow once")).toBeTruthy();
+
+    socket.emit({ type: "reduced_state", state: idle });
+    expect(screen.queryByText("Allow once")).toBeNull();
+  });
+});
+
+describe("prompt and cancel", () => {
+  it("sends a draft, clearing the composer", async () => {
+    const { socket } = mount();
+    snapshot(socket, []);
+    const input = document.querySelector<HTMLTextAreaElement>(".structured-input")!;
+    fireEvent.change(input, { target: { value: "do the thing" } });
+    fireEvent.submit(document.querySelector("form.structured-composer")!);
+
+    await waitFor(() => expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", "do the thing"));
+    expect(input.value).toBe("");
+  });
+
+  it("uploads attachments and names them in the prompt", async () => {
+    const { socket } = mount();
+    snapshot(socket, []);
+    const file = new File(["hello"], "notes.txt", { type: "text/plain" });
+    fireEvent.change(document.querySelector<HTMLInputElement>(".structured-file-input")!, {
+      target: { files: [file] },
+    });
+    expect(screen.getByText("notes.txt")).toBeTruthy();
+
+    fireEvent.change(document.querySelector<HTMLTextAreaElement>(".structured-input")!, {
+      target: { value: "read this" },
+    });
+    fireEvent.submit(document.querySelector("form.structured-composer")!);
+
+    await waitFor(() => expect(uploadStructuredFile).toHaveBeenCalled());
+    await waitFor(() =>
+      expect(sendStructuredPrompt).toHaveBeenCalledWith(
+        "s1",
+        'read this\n\nAttached file "notes.txt": "/uploads/pasted.txt"',
+      ),
+    );
+  });
+
+  it("queues a second message while a turn is in flight, and sends it when the turn ends", async () => {
+    const { socket } = mount();
+    snapshot(socket, [], busy);
+    fireEvent.change(document.querySelector<HTMLTextAreaElement>(".structured-input")!, {
+      target: { value: "next up" },
+    });
+    fireEvent.submit(document.querySelector("form.structured-composer")!);
+
+    expect(sendStructuredPrompt).not.toHaveBeenCalled();
+    expect(document.querySelector(".st-row-queued")?.textContent).toBe("next up");
+
+    socket.emit({ type: "reduced_state", state: idle });
+    await waitFor(() => expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", "next up"));
+  });
+
+  it("hands a failed send's draft back to the operator", async () => {
+    vi.mocked(sendStructuredPrompt).mockRejectedValueOnce(new Error("boom"));
+    const { socket } = mount();
+    snapshot(socket, []);
+    const input = document.querySelector<HTMLTextAreaElement>(".structured-input")!;
+    fireEvent.change(input, { target: { value: "keep me" } });
+    fireEvent.submit(document.querySelector("form.structured-composer")!);
+
+    await waitFor(() => expect(document.querySelector(".structured-error")?.textContent).toContain("boom"));
+    expect(input.value).toBe("keep me");
+  });
+
+  it("shows the cancel control only while a turn is live", () => {
+    const { socket } = mount();
+    snapshot(socket, []);
+    expect(document.querySelector(".structured-cancel")).toBeNull();
+
+    socket.emit({ type: "reduced_state", state: busy });
+    fireEvent.click(document.querySelector<HTMLButtonElement>(".structured-cancel")!);
+    expect(cancelStructuredTurn).toHaveBeenCalledWith("s1");
+  });
+
+  it("reports live turn activity above the composer", () => {
+    const { socket } = mount();
+    snapshot(socket, [], {
+      turn: {
+        responding: true,
+        thinking: false,
+        active_tool_calls: ["t1", "t2"],
+        started_at: new Date(Date.now() - 5_000).toISOString(),
+      },
+      usage: { used: 12_000, size: 200_000 },
+    });
+    const activity = document.querySelector<HTMLElement>(".structured-activity")!;
+    expect(activity.hidden).toBe(false);
+    expect(activity.textContent).toContain("Running 2 tools");
+    expect(activity.textContent).toContain("12k context / 200k context");
+  });
+});
+
+describe("the socket", () => {
+  it("replaces the transcript wholesale on every snapshot, never merging", async () => {
+    const { socket, sockets } = mount();
+    snapshot(socket, [chunk("user:1", "user", "first")]);
+    socket.drop(1006);
+
+    // The retry is on reconnect.ts's backoff schedule, not immediate.
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, INITIAL_RECONNECT_MS + 20));
+    });
+    const replacement = sockets[1];
+    expect(replacement).toBeDefined();
+    replacement.open();
+    snapshot(replacement, [chunk("user:2", "user", "second")]);
+    expect(screen.queryByText("first")).toBeNull();
+    expect(screen.getByText("second")).toBeTruthy();
+  });
+
+  it("reports a daemon rejection instead of retrying it", () => {
+    const status = vi.fn();
+    const sockets: FakeSocket[] = [];
+    render(
+      <StructuredPane
+        sessionId="s1"
+        onStatusChange={status}
+        socketFactory={() => {
+          const socket = new FakeSocket();
+          sockets.push(socket);
+          return socket as unknown as WebSocket;
+        }}
+      />,
+    );
+    sockets[0].open();
+    sockets[0].drop(4004, "not a structured session");
+    expect(sockets).toHaveLength(1);
+    expect(status).toHaveBeenCalledWith("error", "not a structured session");
+  });
+});

web/src/components/structured/StructuredPane.tsx

@@ -0,0 +1,400 @@
+// React port of structured.ts (#246): a live structured session — the
+// transcript from `WS /api/structured/:id`, the composer that drives
+// `.../prompt` and `.../cancel`, and the approval controls that answer
+// `.../approvals/:nonce`. docs/STRUCTURED-VIEW.md is the contract.
+//
+// Like TerminalPane, the pane draws the body only: pane chrome (title,
+// disconnect, sessions drawer) belongs to whatever composes it, which reads
+// the connection state through `onStatusChange`.
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  cancelStructuredTurn,
+  resolveStructuredApproval,
+  sendStructuredPrompt,
+  setStructuredConfig,
+  uploadStructuredFile,
+} from "../../api.js";
+import { formatContextTokens, formatElapsed } from "../../structuredRender.js";
+import type {
+  AcpSessionConfigOption,
+  StructuredApprovalDecision,
+  TranscriptRow as Row,
+  Uuid,
+} from "../../types.js";
+import { Composer } from "./Composer.js";
+import {
+  commandsFromTranscript,
+  pendingApprovalRowId as pendingApprovalRowIdOf,
+  transcriptItems,
+  turnIsActive,
+} from "./model.js";
+import { ToolGroup } from "./ToolGroup.js";
+import { TranscriptRow } from "./TranscriptRow.js";
+import { useStructuredSession, type StructuredStatus, type StructuredSocketFactory } from "./useStructuredSession.js";
+import "./structured.css";
+
+/** Within this much of the bottom, wheel and touch imprecision should still
+ *  count as following. */
+const FOLLOW_BOTTOM_THRESHOLD_PX = 64;
+
+interface QueuedPrompt {
+  text: string;
+  attachments: File[];
+}
+
+export interface StructuredPaneProps {
+  sessionId: Uuid;
+  /** Grabs the composer once mounted. A sidebar preview passes `false`. */
+  focus?: boolean;
+  shouldReconnect?: (code: number) => boolean;
+  onClosed?: () => void;
+  onStatusChange?: (status: StructuredStatus, detail?: string) => void;
+  /** Test seam: drive the socket without a daemon. */
+  socketFactory?: StructuredSocketFactory;
+  className?: string;
+}
+
+export interface StructuredPaneHandle {
+  /** Put the keyboard in the composer — the structured pane's terminal. */
+  focusComposer(): void;
+}
+
+export const StructuredPane = forwardRef<StructuredPaneHandle, StructuredPaneProps>(function StructuredPane(
+  { sessionId, focus = true, shouldReconnect, onClosed, onStatusChange, socketFactory, className },
+  ref,
+) {
+  const session = useStructuredSession(sessionId, { shouldReconnect, onClosed, socketFactory });
+  const { rows, state, status, detail, socketGeneration } = session;
+
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const composerRef = useRef<HTMLDivElement | null>(null);
+  const followingBottom = useRef(true);
+
+  const [expandedRows, setExpandedRows] = useState<ReadonlySet<string>>(new Set());
+  const [expandedGroups, setExpandedGroups] = useState<ReadonlySet<string>>(new Set());
+  const [draft, setDraft] = useState("");
+  const [attachments, setAttachments] = useState<File[]>([]);
+  const [queue, setQueue] = useState<QueuedPrompt[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [configBusy, setConfigBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [now, setNow] = useState(() => Date.now());
+  /** Server path → object URL, so a user row can preview an image it uploaded. */
+  const imageUrls = useRef(new Map<string, string>());
+
+  // Submission bookkeeping, ported from structured.ts: a prompt is "sending"
+  // from the POST until the projection shows the turn it claimed, and an
+  // acceptance that straddles a reconnect forces one more reconnect so the
+  // snapshot cannot predate the 204.
+  const submission = useRef(0);
+  const accepted = useRef<{ generation: number; socketGeneration: number } | null>(null);
+  const optimisticStart = useRef<number | null>(null);
+  const promptPending = useRef(false);
+  const [awaitingBegin, setAwaitingBegin] = useState<number | null>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      focusComposer: () => composerRef.current?.querySelector<HTMLTextAreaElement>(".structured-input")?.focus(),
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    onStatusChange?.(status, detail ?? undefined);
+  }, [status, detail, onStatusChange]);
+
+  useEffect(() => {
+    if (!focus) return;
+    composerRef.current?.querySelector<HTMLTextAreaElement>(".structured-input")?.focus();
+  }, [focus]);
+
+  const urls = imageUrls.current;
+  useEffect(
+    () => () => {
+      for (const url of urls.values()) URL.revokeObjectURL(url);
+      urls.clear();
+    },
+    [urls],
+  );
+
+  const turnActive = turnIsActive(state);
+  const pendingRowId = useMemo(() => pendingApprovalRowIdOf(rows, state), [rows, state]);
+  const items = useMemo(
+    () => transcriptItems(rows, pendingRowId, turnActive),
+    [rows, pendingRowId, turnActive],
+  );
+  const commands = useMemo(() => commandsFromTranscript(rows), [rows]);
+  const configOptions: AcpSessionConfigOption[] = state.config_options?.configOptions ?? [];
+
+  const active = turnActive || awaitingBegin !== null;
+
+  // Stop saying "Sending" once the turn the submission was waiting for has
+  // begun — or, when it was accepted but a replacement socket has
+  // re-snapshotted since, once that newer snapshot has landed. Without the
+  // second case a prompt accepted across a reconnect would say "Sending"
+  // forever.
+  useEffect(() => {
+    if (turnActive) {
+      setAwaitingBegin(null);
+    } else if (
+      awaitingBegin !== null &&
+      accepted.current?.generation === awaitingBegin &&
+      socketGeneration > accepted.current.socketGeneration
+    ) {
+      setAwaitingBegin(null);
+    }
+  }, [turnActive, awaitingBegin, socketGeneration]);
+
+  useEffect(() => {
+    if (!active) optimisticStart.current = null;
+  }, [active]);
+
+  // Keep the pane pinned to the newest row unless the operator scrolled away.
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !followingBottom.current) return;
+    el.scrollTop = Math.max(0, el.scrollHeight - el.clientHeight);
+  }, [items, active, queue]);
+
+  useEffect(() => {
+    if (!active) return;
+    const timer = window.setInterval(() => setNow(Date.now()), 1_000);
+    return () => window.clearInterval(timer);
+  }, [active]);
+
+  const onScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    followingBottom.current = el.scrollHeight - el.clientHeight - el.scrollTop <= FOLLOW_BOTTOM_THRESHOLD_PX;
+  };
+
+  const decide = useCallback(
+    async (rowId: string, decision: StructuredApprovalDecision): Promise<void> => {
+      const nonce = state.pending_approval?.nonce;
+      // Already resolved elsewhere between the click and here. A stale nonce
+      // is a no-op, not an error (docs/STRUCTURED-VIEW.md: any nonce answers
+      // 204), and the row's buttons are already gone — resolve quietly.
+      if (!nonce || rowId !== pendingRowId) return;
+      try {
+        await resolveStructuredApproval(sessionId, nonce, decision);
+      } catch (e: unknown) {
+        // Propagate — so the row re-enables its buttons — only while this is
+        // still the pending approval. If it moved on in flight, reviving the
+        // buttons would revive a decision that no longer applies.
+        setError(String(e));
+        throw e;
+      }
+    },
+    [sessionId, state.pending_approval?.nonce, pendingRowId],
+  );
+
+  const dispatchPrompt = useCallback(
+    (text: string, files: File[]) => {
+      const generation = ++submission.current;
+      const submissionSocket = socketGeneration;
+      setAwaitingBegin(generation);
+      optimisticStart.current = Date.now();
+      accepted.current = null;
+      promptPending.current = true;
+      setUploading(files.length > 0);
+      setDraft("");
+      setError(null);
+
+      const send = async () => {
+        const references: string[] = [];
+        for (const file of files) {
+          const { path } = await uploadStructuredFile(sessionId, file);
+          if (file.type.startsWith("image/")) imageUrls.current.set(path, URL.createObjectURL(file));
+          references.push(`Attached file ${JSON.stringify(file.name)}: ${JSON.stringify(path)}`);
+        }
+        await sendStructuredPrompt(sessionId, [text, ...references].filter(Boolean).join("\n\n"));
+      };
+
+      void send().then(
+        () => {
+          promptPending.current = false;
+          if (generation !== submission.current) return;
+          setUploading(false);
+          setAttachments((current) => (current === files ? [] : current));
+          accepted.current = { generation, socketGeneration };
+          // A replacement socket may have captured idle before the POST
+          // claimed the prompt. Reconnect so its snapshot cannot predate the
+          // 204.
+          if (socketGeneration > submissionSocket) session.reconnect();
+        },
+        (e: unknown) => {
+          promptPending.current = false;
+          if (generation !== submission.current) return;
+          setAwaitingBegin((current) => (current === generation ? null : current));
+          optimisticStart.current = null;
+          setUploading(false);
+          // The draft and its attachments are the operator's work — a failed
+          // send hands both back rather than eating them.
+          setAttachments((current) => (current.length === 0 ? files : current));
+          setDraft((current) => (current === "" ? text : current));
+          setError(String(e));
+        },
+      );
+    },
+    [sessionId, socketGeneration, session],
+  );
+
+  // A queued message goes out as soon as the projected turn is idle — the
+  // daemon answers a second prompt `409 turn_in_flight`, so the queue is
+  // client-local (docs/STRUCTURED-VIEW.md).
+  useEffect(() => {
+    if (active || promptPending.current || queue.length === 0) return;
+    const [next, ...rest] = queue;
+    setQueue(rest);
+    dispatchPrompt(next.text, next.attachments);
+  }, [active, queue, dispatchPrompt]);
+
+  const submit = (text: string, files: File[]) => {
+    if (active || queue.length > 0) {
+      setQueue((current) => [...current, { text, attachments: files }]);
+      setAttachments([]);
+      setDraft("");
+      setError(null);
+      return;
+    }
+    dispatchPrompt(text, files);
+  };
+
+  const cancel = () => {
+    setError(null);
+    cancelStructuredTurn(sessionId).catch((e: unknown) => setError(String(e)));
+  };
+
+  const changeConfig = (option: AcpSessionConfigOption, value: string | boolean) => {
+    setConfigBusy(true);
+    setError(null);
+    setStructuredConfig(sessionId, { config_id: option.id, value })
+      .catch((e: unknown) =>
+        setError(e instanceof Error ? e.message : "Could not change the session setting"),
+      )
+      .finally(() => setConfigBusy(false));
+  };
+
+  const elapsedMs = () => {
+    const authoritative = state.turn.started_at ? Date.parse(state.turn.started_at) : Number.NaN;
+    const startedAt = Number.isFinite(authoritative) ? authoritative : optimisticStart.current;
+    return startedAt === null ? 0 : Math.max(0, now - startedAt);
+  };
+
+  const activityLabel = () => {
+    const tools = state.turn.active_tool_calls.length;
+    const label = awaitingBegin !== null
+      ? "Sending"
+      : state.turn.thinking
+        ? "Thinking"
+        : tools > 0
+          ? `Running ${tools} ${tools === 1 ? "tool" : "tools"}`
+          : "Responding";
+    const parts = [label, formatElapsed(elapsedMs())];
+    if (typeof state.usage?.used === "number") {
+      const usage = formatContextTokens(state.usage.used);
+      parts.push(
+        typeof state.usage.size === "number" ? `${usage} / ${formatContextTokens(state.usage.size)}` : usage,
+      );
+    }
+    return parts.join(" · ");
+  };
+
+  const setRowExpanded = (id: string, expanded: boolean) =>
+    setExpandedRows((current) => {
+      const next = new Set(current);
+      if (expanded) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  const setGroupExpanded = (id: string, expanded: boolean) =>
+    setExpandedGroups((current) => {
+      const next = new Set(current);
+      if (expanded) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  const renderRow = (row: Row) => (
+    <TranscriptRow
+      key={row.id}
+      row={row}
+      pendingApproval={row.id === pendingRowId}
+      onDecide={(decision) => decide(row.id, decision)}
+      expanded={expandedRows.has(row.id)}
+      onExpandedChange={(expanded) => setRowExpanded(row.id, expanded)}
+      imageUrls={imageUrls.current}
+    />
+  );
+
+  return (
+    <div className={className ? `structured-pane ${className}` : "structured-pane"}>
+      <div className="structured-body">
+        <div className="structured-main">
+          <div className="structured-scroll" ref={scrollRef} onScroll={onScroll}>
+            <div className="structured-rows">
+              {items.map((item) =>
+                item.type === "row" ? (
+                  renderRow(item.row)
+                ) : (
+                  <ToolGroup
+                    key={item.id}
+                    id={item.id}
+                    toolCount={item.group.toolCount}
+                    expanded={expandedGroups.has(item.id)}
+                    onExpandedChange={(expanded) => setGroupExpanded(item.id, expanded)}
+                  >
+                    {item.group.rows.map(renderRow)}
+                  </ToolGroup>
+                ),
+              )}
+              {queue.map((queued, index) => (
+                <div key={`queued-${index}`} className="st-row st-row-queued">
+                  <div className="st-body">
+                    <div className="st-user-text">{queued.text}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="structured-activity" role="status" aria-live="polite" hidden={!active}>
+              <span className="structured-activity-pulse" aria-hidden="true" />
+              <span className="structured-activity-text">{active ? activityLabel() : ""}</span>
+            </div>
+          </div>
+          {error !== null && <div className="structured-error">{error}</div>}
+          <div ref={composerRef}>
+            <Composer
+              attachments={attachments}
+              onAttachmentsChange={setAttachments}
+              commands={commands}
+              configOptions={configOptions}
+              turnActive={active}
+              uploading={uploading}
+              configBusy={configBusy}
+              draft={draft}
+              onDraftChange={setDraft}
+              onSubmit={submit}
+              onCancel={cancel}
+              onConfigChange={changeConfig}
+              onError={setError}
+              menuId={`structured-command-menu-${sessionId}`}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

web/src/components/structured/ToolGroup.tsx

@@ -0,0 +1,43 @@
+// A turn's collapsed activity block: two or more tool rows after the same
+// `User` row, plus the narration absorbed between them. The header counts tool
+// rows only (docs/STRUCTURED-VIEW.md); opening it reveals tools and text in
+// chronological order.
+
+import type { ReactNode } from "react";
+
+export interface ToolGroupProps {
+  id: string;
+  toolCount: number;
+  expanded: boolean;
+  onExpandedChange(expanded: boolean): void;
+  children: ReactNode;
+}
+
+export function ToolGroup({ id, toolCount, expanded, onExpandedChange, children }: ToolGroupProps) {
+  return (
+    <div className="st-tool-group" data-tool-group-id={id}>
+      <button
+        type="button"
+        className="st-tool-group-head"
+        aria-expanded={expanded}
+        onClick={() => onExpandedChange(!expanded)}
+      >
+        <span className="st-tool-group-glyph" aria-hidden="true">
+          ›
+        </span>
+        <span className="st-tool-group-title">{`${toolCount} tool calls`}</span>
+      </button>
+      <div
+        className={
+          expanded ? "st-tool-group-body st-disclosure is-expanded" : "st-tool-group-body st-disclosure"
+        }
+        aria-hidden={!expanded}
+        inert={!expanded}
+      >
+        <div className="st-disclosure-clip">
+          <div className="st-disclosure-inner">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/structured/ToolIcon.tsx

@@ -0,0 +1,35 @@
+// The glyph column of a tool row's head. Recognition is narrow on purpose: an
+// unrecognised or absent `ToolKind` gets the generic bullet, never a blank
+// column and never a mark that stands for the wrong kind of work.
+
+import type { AcpToolKind } from "../../types.js";
+
+/** Glyph shown in a tool row's head, by `ToolKind`. */
+const KIND_GLYPH: Record<string, string> = {
+  read: "≡",
+  edit: "±",
+  delete: "✕",
+  move: "→",
+  search: "⌕",
+  execute: "$",
+  think: "…",
+  fetch: "⇣",
+  switch_mode: "⇄",
+};
+
+export function toolGlyph(kind: string | undefined): string {
+  return (kind && KIND_GLYPH[kind]) || "•";
+}
+
+export interface ToolIconProps {
+  kind: AcpToolKind | string | undefined;
+  className?: string;
+}
+
+export function ToolIcon({ kind, className = "st-tool-glyph" }: ToolIconProps) {
+  return (
+    <span className={className} aria-hidden="true">
+      {toolGlyph(kind)}
+    </span>
+  );
+}

web/src/components/structured/TranscriptRow.tsx

@@ -0,0 +1,387 @@
+// One transcript row, by kind. docs/STRUCTURED-VIEW.md fixes the eight kinds
+// and leaves every rendering decision here: markdown for AgentText, an inline
+// italic stream for AgentThought, a tool card for ToolCall/ToolDiff, a diff
+// view for ToolDiff's content, an approval card for Approval, and an opaque
+// collapsed line for a Notice nobody has taught the client about. `Plan` is
+// deliberately not drawn — the web client has no plan rail.
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+import { renderInlineMarkdown, renderMarkdown, formatElapsed } from "../../structuredRender.js";
+import type {
+  AcpContentBlock,
+  AcpPermissionOption,
+  AcpToolCallContent,
+  AcpToolCallLike,
+  StructuredApprovalDecision,
+  TranscriptRow as Row,
+  TurnMeta,
+} from "../../types.js";
+import { ApprovalView } from "./ApprovalView.js";
+import { Copyable } from "./Copyable.js";
+import { DiffView } from "./DiffView.js";
+import {
+  contentBlockText,
+  isStateOnlyNotice,
+  splitToolTitle,
+  statusMeta,
+  toolDiffMeta,
+  turnMeta,
+} from "./model.js";
+import { safeMediaSource, toolPayload } from "./toolPayload.js";
+import { ToolIcon } from "./ToolIcon.js";
+
+// ---------------------------------------------------------------------------
+// content rows: user / agent / thought
+// ---------------------------------------------------------------------------
+
+/** Model-authored markdown, sanitized by structuredRender.ts before it enters
+ *  the DOM. Tables get their own scroller and links open out of the app. */
+function Prose({ html }: { html: string }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+    for (const table of Array.from(container.querySelectorAll("table"))) {
+      if (table.parentElement?.classList.contains("st-markdown-table-wrap")) continue;
+      const scroller = document.createElement("div");
+      scroller.className = "st-markdown-table-wrap";
+      table.replaceWith(scroller);
+      scroller.appendChild(table);
+    }
+    for (const link of container.querySelectorAll("a")) {
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+    }
+  }, [html]);
+  return <div ref={ref} className="st-body" dangerouslySetInnerHTML={{ __html: html }} />;
+}
+
+export interface ContentRowProps {
+  row: Row;
+  variant: "user" | "agent" | "thought";
+  /** Object URLs for images this prompt uploaded, keyed by the server path the
+   *  row's text names. */
+  imageUrls?: Map<string, string>;
+}
+
+/** `Attached file "name": "path"` references the composer appends on send. */
+const ATTACHED_FILE_RE = /Attached file "(?:[^"\\]|\\.)*": "((?:[^"\\]|\\.)*)"/g;
+
+function attachedImages(text: string, imageUrls: Map<string, string>): string[] {
+  const urls: string[] = [];
+  ATTACHED_FILE_RE.lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = ATTACHED_FILE_RE.exec(text)) !== null) {
+    let serverPath: string;
+    try {
+      serverPath = JSON.parse(`"${match[1]}"`) as string;
+    } catch {
+      continue;
+    }
+    const url = imageUrls.get(serverPath);
+    if (url) urls.push(url);
+  }
+  return urls;
+}
+
+export function ContentRow({ row, variant, imageUrls }: ContentRowProps) {
+  const data = row.data as { content?: AcpContentBlock } | undefined;
+  const text = contentBlockText(data?.content);
+  const displayText = variant === "thought" ? text.trim() : text;
+  const label = variant === "user" ? "message" : variant === "agent" ? "response" : "thought";
+
+  let body: ReactNode;
+  if (variant === "user") {
+    const images = imageUrls && imageUrls.size > 0 ? attachedImages(displayText, imageUrls) : [];
+    // With previews in hand the path references are noise — the image is the
+    // attachment. Without them the text is all the operator has, so it stays.
+    const shown =
+      images.length > 0
+        ? displayText.replace(/\n\nAttached file "[^"]*": "[^"]*"/g, "").trim()
+        : displayText;
+    body = (
+      <div className="st-body">
+        {shown && <div className="st-user-text">{shown}</div>}
+        {images.map((src) => (
+          <img key={src} className="st-user-image" src={src} alt="Uploaded image" loading="lazy" />
+        ))}
+      </div>
+    );
+  } else if (variant === "agent") {
+    body = <Prose html={renderMarkdown(displayText)} />;
+  } else {
+    body = <div className="st-body" dangerouslySetInnerHTML={{ __html: renderInlineMarkdown(displayText) }} />;
+  }
+
+  return (
+    <Copyable className={`st-row st-row-${variant}`} text={displayText} label={label} data-row-id={row.id}>
+      {body}
+    </Copyable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// tool rows
+// ---------------------------------------------------------------------------
+
+function ToolDetailBlock({ label, text }: { label: string; text: string }) {
+  return (
+    <div className="st-tool-detail">
+      <div className="st-tool-detail-label">{label}</div>
+      <Copyable as="pre" text={text} label={label.toLowerCase()}>
+        {text}
+      </Copyable>
+    </div>
+  );
+}
+
+function ContentBlockView({ block }: { block: AcpContentBlock }) {
+  if (block.type === "text") {
+    if (!block.text) return null;
+    return (
+      <Copyable className="st-tool-text" text={block.text} label="output">
+        {block.text}
+      </Copyable>
+    );
+  }
+  if (block.type === "image") {
+    const source = safeMediaSource(block.mimeType, block.data, "image");
+    if (source) return <img className="st-tool-image" src={source} alt="Tool output" loading="lazy" />;
+    return <ToolDetailBlock label="Image" text={block.uri ?? block.mimeType ?? "Unavailable"} />;
+  }
+  if (block.type === "audio") {
+    const source = safeMediaSource(block.mimeType, block.data, "audio");
+    if (source) return <audio className="st-tool-audio" controls src={source} />;
+    return <ToolDetailBlock label="Audio" text={block.mimeType ?? "Unavailable"} />;
+  }
+  if (block.type === "resource_link") {
+    return (
+      <div className="st-tool-resource">
+        <span className="st-tool-resource-name">{block.title ?? block.name ?? "Resource"}</span>
+        {block.uri && (
+          <Copyable as="code" className="st-tool-resource-uri" text={block.uri} label="resource URI">
+            {block.uri}
+          </Copyable>
+        )}
+        {block.description && <span className="st-tool-resource-description">{block.description}</span>}
+      </div>
+    );
+  }
+  const resource = block.resource;
+  if (typeof resource?.text === "string") {
+    return (
+      <ToolDetailBlock label={resource.uri ? `Resource · ${resource.uri}` : "Resource"} text={resource.text} />
+    );
+  }
+  const printed = resource === undefined ? "" : JSON.stringify(resource, null, 2);
+  return printed ? <ToolDetailBlock label="Resource" text={printed} /> : null;
+}
+
+function ToolBody({ tool, content }: { tool: AcpToolCallLike; content: AcpToolCallContent[] }) {
+  const payload = toolPayload(tool, content);
+  const hasRaw = payload.raw.input !== null || payload.raw.output !== null;
+  return (
+    <>
+      {content.map((block, index) => {
+        if (block.type === "content") return <ContentBlockView key={index} block={block.content} />;
+        if (block.type === "diff") return <DiffView key={index} diff={block} />;
+        return (
+          <div key={index} className="st-tool-terminal">
+            {block.terminalId ? `Terminal · ${block.terminalId}` : "Embedded terminal"}
+          </div>
+        );
+      })}
+      {payload.details.map((detail, index) => (
+        <ToolDetailBlock key={`${detail.label}-${index}`} label={detail.label} text={detail.text} />
+      ))}
+      {payload.exitCode !== null && (
+        <div className="st-tool-fact">
+          <span className="st-tool-fact-label">Exit code</span>
+          <code className={payload.exitCode === 0 ? "st-tool-exit-ok" : "st-tool-exit-failed"}>
+            {payload.exitCode}
+          </code>
+        </div>
+      )}
+      {hasRaw && (
+        <details className="st-tool-raw">
+          <summary>Raw JSON</summary>
+          <div className="st-tool-raw-body">
+            {payload.raw.input !== null && <ToolDetailBlock label="Input" text={payload.raw.input} />}
+            {payload.raw.output !== null && <ToolDetailBlock label="Output" text={payload.raw.output} />}
+          </div>
+        </details>
+      )}
+    </>
+  );
+}
+
+/** True when a tool call has anything at all to disclose — a head with nothing
+ *  behind it stays a plain line rather than an empty disclosure. */
+function hasToolBody(tool: AcpToolCallLike, content: AcpToolCallContent[]): boolean {
+  if (content.length > 0) return true;
+  const payload = toolPayload(tool, content);
+  return payload.details.length > 0 || payload.exitCode !== null || payload.raw.input !== null || payload.raw.output !== null;
+}
+
+export interface ToolRowProps {
+  row: Row;
+  expanded: boolean;
+  onExpandedChange(expanded: boolean): void;
+}
+
+export function ToolRow({ row, expanded, onExpandedChange }: ToolRowProps) {
+  const tool = (row.data ?? {}) as AcpToolCallLike;
+  const content = tool.content ?? [];
+  const hasDiff = content.some((c) => c.type === "diff");
+  const { label, arg } = splitToolTitle(tool.title, tool.name, tool.kind);
+  const meta = statusMeta(tool.status, hasDiff);
+  const metaParts: string[] = [];
+  if (hasDiff) metaParts.push(toolDiffMeta(content));
+  if (meta) metaParts.push(meta.text);
+  const disclosable = hasToolBody(tool, content);
+  const open = expanded && disclosable;
+
+  return (
+    <div className="st-row st-row-tool" data-row-id={row.id}>
+      <div className="st-tool">
+        <button
+          type="button"
+          className="st-tool-head"
+          aria-expanded={open}
+          onClick={() => disclosable && onExpandedChange(!open)}
+        >
+          <ToolIcon kind={tool.kind} />
+          <span className="st-tool-name">{label}</span>
+          <span className="st-tool-arg" title={arg}>
+            {arg}
+          </span>
+          {metaParts.length > 0 && (
+            <span className={meta ? `st-tool-meta st-tool-meta-${meta.kind}` : "st-tool-meta"}>
+              {metaParts.join(" · ")}
+            </span>
+          )}
+        </button>
+        {disclosable && (
+          <div
+            className={open ? "st-tool-out st-disclosure is-expanded" : "st-tool-out st-disclosure"}
+            aria-hidden={!open}
+            inert={!open}
+          >
+            <div className="st-disclosure-clip">
+              <div className="st-disclosure-inner">
+                {/* Built only once opened: a long transcript would otherwise
+                    render every tool's whole output up front. */}
+                {open && <ToolBody tool={tool} content={content} />}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// notices and turn footers
+// ---------------------------------------------------------------------------
+
+function compactNumber(value: number): string {
+  if (Math.abs(value) < 1_000) return String(value);
+  if (Math.abs(value) < 1_000_000) return `${(value / 1_000).toFixed(value % 1_000 === 0 ? 0 : 1)}k`;
+  return `${(value / 1_000_000).toFixed(value % 1_000_000 === 0 ? 0 : 1)}m`;
+}
+
+export function TurnMetaRow({ meta }: { meta: TurnMeta }) {
+  const parts = [formatElapsed(meta.elapsedMs)];
+  if (typeof meta.contextDelta === "number") {
+    const sign = meta.contextDelta > 0 ? "+" : "";
+    parts.push(`${sign}${compactNumber(meta.contextDelta)} context tokens`);
+  } else if (typeof meta.contextTokens === "number") {
+    parts.push(`${compactNumber(meta.contextTokens)} context`);
+  }
+  if (meta.model) parts.push(meta.model);
+  if (meta.outcome !== "completed") parts.push(meta.outcome);
+  const text = parts.join(" · ");
+  return (
+    <Copyable
+      className={`st-turn-meta st-turn-meta-${meta.outcome}`}
+      text={text}
+      label="turn details"
+      aria-label={`Turn ${meta.outcome}`}
+    >
+      <span className="st-turn-meta-dot" aria-hidden="true" />
+      <span>{text}</span>
+    </Copyable>
+  );
+}
+
+/** The floor presentation docs/STRUCTURED-VIEW.md allows for a `Notice` the
+ *  client has nothing better to do with: an opaque, collapsed line. */
+export function NoticeRow({ row }: { row: Row }) {
+  const text = `[${row.kind}]`;
+  return (
+    <Copyable className="st-row st-row-notice" text={text} label="notice" data-row-id={row.id}>
+      <div className="st-body">{text}</div>
+    </Copyable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// dispatch
+// ---------------------------------------------------------------------------
+
+export interface TranscriptRowProps {
+  row: Row;
+  /** This row is the one live approval (docs/STRUCTURED-VIEW.md's nonce
+   *  rules). Every other approval row is history. */
+  pendingApproval?: boolean;
+  onDecide?: (decision: StructuredApprovalDecision) => Promise<void>;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  imageUrls?: Map<string, string>;
+}
+
+/** One transcript row, or `null` for the rows the web client omits (`plan`,
+ *  and the state-only notices it consumes for `/` autocomplete). */
+export function TranscriptRow({
+  row,
+  pendingApproval = false,
+  onDecide,
+  expanded = false,
+  onExpandedChange,
+  imageUrls,
+}: TranscriptRowProps) {
+  switch (row.kind) {
+    case "user":
+      return <ContentRow row={row} variant="user" imageUrls={imageUrls} />;
+    case "agent_text":
+      return <ContentRow row={row} variant="agent" />;
+    case "agent_thought":
+      return <ContentRow row={row} variant="thought" />;
+    case "tool_call":
+    case "tool_diff":
+      return (
+        <ToolRow row={row} expanded={expanded} onExpandedChange={(next) => onExpandedChange?.(next)} />
+      );
+    case "approval": {
+      const request = (row.data ?? {}) as { toolCall?: AcpToolCallLike; options?: AcpPermissionOption[] };
+      return (
+        <ApprovalView
+          request={request}
+          pending={pendingApproval}
+          onDecide={onDecide ?? (() => Promise.resolve())}
+        />
+      );
+    }
+    case "plan":
+      return null;
+    case "notice": {
+      if (isStateOnlyNotice(row)) return null;
+      const meta = turnMeta(row);
+      return meta ? <TurnMetaRow meta={meta} /> : <NoticeRow row={row} />;
+    }
+    default:
+      return <NoticeRow row={row} />;
+  }
+}

web/src/components/structured/index.ts

@@ -0,0 +1,13 @@
+export { StructuredPane, type StructuredPaneHandle, type StructuredPaneProps } from "./StructuredPane.js";
+export { TranscriptRow, type TranscriptRowProps } from "./TranscriptRow.js";
+export { DiffView, type DiffViewProps } from "./DiffView.js";
+export { ApprovalView, type ApprovalViewProps } from "./ApprovalView.js";
+export { ToolGroup, type ToolGroupProps } from "./ToolGroup.js";
+export { ToolIcon, toolGlyph, type ToolIconProps } from "./ToolIcon.js";
+export { Composer, type ComposerProps } from "./Composer.js";
+export {
+  useStructuredSession,
+  type StructuredSession,
+  type StructuredSocketFactory,
+  type StructuredStatus,
+} from "./useStructuredSession.js";

web/src/components/structured/model.test.ts

@@ -0,0 +1,252 @@
+import { describe, expect, it } from "vitest";
+
+import type { ReducedState, TranscriptRow } from "../../types.js";
+import {
+  activityGroupsByTurn,
+  applyCommand,
+  commandsFromTranscript,
+  commandTokenAt,
+  contentBlockText,
+  filterCommands,
+  isStateOnlyNotice,
+  offeredDecisions,
+  orderConfigOptions,
+  pendingApprovalRowId,
+  splitToolTitle,
+  statusMeta,
+  toolDiffMeta,
+  toolKindLabel,
+  transcriptItems,
+  turnMeta,
+} from "./model.js";
+
+function row(id: string, kind: TranscriptRow["kind"], data: unknown = {}): TranscriptRow {
+  return { id, kind, data };
+}
+
+function tool(id: string): TranscriptRow {
+  return row(id, "tool_call", { title: `Read(${id})`, status: "completed" });
+}
+
+function text(id: string, kind: "user" | "agent_text" | "agent_thought", body: string): TranscriptRow {
+  return row(id, kind, { content: { type: "text", text: body } });
+}
+
+const idle: ReducedState = { turn: { responding: false, thinking: false, active_tool_calls: [] } };
+
+describe("row taxonomy", () => {
+  it("splits an adapter's Name(argument) title, and falls back to the kind", () => {
+    expect(splitToolTitle("Read(src/main.ts)", null, "read")).toEqual({ label: "Read", arg: "src/main.ts" });
+    expect(splitToolTitle("something opaque", null, "search")).toEqual({
+      label: "Search",
+      arg: "something opaque",
+    });
+    expect(splitToolTitle(undefined, null, undefined)).toEqual({ label: "Tool", arg: "" });
+  });
+
+  it("labels an unknown tool kind rather than leaving it blank", () => {
+    expect(toolKindLabel("execute")).toBe("Execute");
+    expect(toolKindLabel("no_such_kind")).toBe("Tool");
+    expect(toolKindLabel(undefined)).toBe("Tool");
+  });
+
+  it("names non-text content blocks instead of dropping them", () => {
+    expect(contentBlockText({ type: "text", text: "hi" })).toBe("hi");
+    expect(contentBlockText({ type: "image" })).toBe("[image]");
+    expect(contentBlockText({ type: "resource_link", name: "spec.md" })).toBe("[resource: spec.md]");
+    expect(contentBlockText(undefined)).toBe("");
+  });
+
+  it("counts a tool call's diff lines", () => {
+    expect(toolDiffMeta([{ type: "diff", path: "a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }]))
+      .toBe("+2 −1");
+    expect(toolDiffMeta([])).toBe("+0 −0");
+  });
+
+  it("shows a status only while it is worth showing", () => {
+    expect(statusMeta("in_progress", false)).toEqual({ text: "running", kind: "running" });
+    expect(statusMeta("failed", true)).toEqual({ text: "failed", kind: "failed" });
+    expect(statusMeta("pending", true)).toBeNull(); // the diff counts already say it
+    expect(statusMeta("completed", false)).toBeNull();
+  });
+});
+
+describe("notices", () => {
+  it("reads a maestroTurnMeta footer, and only a well-formed one", () => {
+    const meta = { elapsedMs: 4200, outcome: "completed", model: "sonnet" };
+    expect(turnMeta(row("n1", "notice", { maestroTurnMeta: meta }))).toEqual(meta);
+    expect(turnMeta(row("n2", "notice", { maestroTurnMeta: { outcome: "completed" } }))).toBeNull();
+    expect(turnMeta(row("n3", "notice", { sessionUpdate: "session_info_update" }))).toBeNull();
+  });
+
+  it("marks the state-only notices the client consumes rather than shows", () => {
+    expect(isStateOnlyNotice(row("n1", "notice", { sessionUpdate: "available_commands_update" }))).toBe(true);
+    expect(isStateOnlyNotice(row("n2", "notice", { sessionUpdate: "session_info_update" }))).toBe(true);
+    expect(isStateOnlyNotice(row("n3", "notice", { sessionUpdate: "something_else" }))).toBe(false);
+  });
+});
+
+describe("approvals", () => {
+  it("offers only decisions the request actually backs", () => {
+    expect(
+      offeredDecisions([
+        { optionId: "a", name: "Allow once", kind: "allow_once" },
+        { optionId: "r", name: "Reject", kind: "reject_once" },
+      ]),
+    ).toEqual(["allow_once", "deny"]);
+    expect(offeredDecisions([{ optionId: "a", name: "Always", kind: "allow_always" }])).toEqual([
+      "allow_for_session",
+    ]);
+    expect(offeredDecisions([])).toEqual([]);
+  });
+
+  it("points a live pending approval at the newest approval row", () => {
+    const rows = [row("approval:1", "approval"), tool("tool:1"), row("approval:2", "approval")];
+    const pending: ReducedState = {
+      ...idle,
+      pending_approval: { nonce: "n", request: {} as never },
+    };
+    expect(pendingApprovalRowId(rows, pending)).toBe("approval:2");
+    expect(pendingApprovalRowId(rows, idle)).toBeNull();
+  });
+});
+
+describe("activity grouping", () => {
+  it("groups a turn's tools once there are two of them", () => {
+    const rows = [text("user:1", "user", "go"), tool("tool:1"), tool("tool:2")];
+    const groups = activityGroupsByTurn(rows, null, false);
+    expect([...groups.keys()]).toEqual(["turn:user:1"]);
+    expect(groups.get("turn:user:1")).toMatchObject({ toolCount: 2 });
+  });
+
+  it("leaves a single tool call standalone", () => {
+    const rows = [text("user:1", "user", "go"), tool("tool:1")];
+    expect(activityGroupsByTurn(rows, null, false).size).toBe(0);
+  });
+
+  it("absorbs intermediate narration but keeps the final answer outside", () => {
+    const rows = [
+      text("user:1", "user", "go"),
+      tool("tool:1"),
+      text("agent:1", "agent_text", "working"),
+      tool("tool:2"),
+      text("agent:2", "agent_text", "done"),
+    ];
+    const group = activityGroupsByTurn(rows, null, false).get("turn:user:1")!;
+    expect(group.rows.map((r) => r.id)).toEqual(["tool:1", "agent:1", "tool:2"]);
+    expect(group.toolCount).toBe(2);
+  });
+
+  it("keeps the newest thought outside while the turn is still live", () => {
+    const rows = [
+      text("user:1", "user", "go"),
+      tool("tool:1"),
+      tool("tool:2"),
+      text("thought:1", "agent_thought", "hmm"),
+      text("thought:2", "agent_thought", "aha"),
+    ];
+    const live = activityGroupsByTurn(rows, null, true).get("turn:user:1")!;
+    expect(live.rows.map((r) => r.id)).toEqual(["tool:1", "tool:2", "thought:1"]);
+    const ended = activityGroupsByTurn(rows, null, false).get("turn:user:1")!;
+    expect(ended.rows.map((r) => r.id)).toEqual(["tool:1", "tool:2", "thought:1", "thought:2"]);
+  });
+
+  it("absorbs a resolved approval, never the pending one", () => {
+    const rows = [
+      text("user:1", "user", "go"),
+      tool("tool:1"),
+      row("approval:1", "approval"),
+      tool("tool:2"),
+      row("approval:2", "approval"),
+      tool("tool:3"),
+    ];
+    const group = activityGroupsByTurn(rows, "approval:2", false).get("turn:user:1")!;
+    expect(group.rows.map((r) => r.id)).toEqual(["tool:1", "approval:1", "tool:2", "tool:3"]);
+  });
+});
+
+describe("transcript render list", () => {
+  it("renders a group once, at its first member's position", () => {
+    const rows = [text("user:1", "user", "go"), tool("tool:1"), tool("tool:2"), text("agent:1", "agent_text", "done")];
+    const items = transcriptItems(rows, null, false);
+    expect(items.map((item) => (item.type === "row" ? item.row.id : item.id))).toEqual([
+      "user:1",
+      "turn:user:1",
+      "agent:1",
+    ]);
+  });
+
+  it("omits plan rows, state-only notices and standalone resolved approvals", () => {
+    const rows = [
+      text("user:1", "user", "go"),
+      row("plan", "plan", { entries: [] }),
+      row("notice:1", "notice", { sessionUpdate: "available_commands_update", availableCommands: [] }),
+      row("approval:1", "approval"),
+      text("agent:1", "agent_text", "done"),
+    ];
+    const items = transcriptItems(rows, null, false);
+    expect(items.map((item) => (item.type === "row" ? item.row.id : item.id))).toEqual(["user:1", "agent:1"]);
+  });
+
+  it("keeps a turn footer only while it is the final item", () => {
+    const footer = row("turn_meta:1", "notice", { maestroTurnMeta: { elapsedMs: 10, outcome: "completed" } });
+    expect(transcriptItems([text("user:1", "user", "go"), footer], null, false)).toHaveLength(2);
+    const later = [text("user:1", "user", "go"), footer, text("user:2", "user", "again")];
+    expect(transcriptItems(later, null, false).map((i) => (i.type === "row" ? i.row.id : i.id))).toEqual([
+      "user:1",
+      "user:2",
+    ]);
+  });
+});
+
+describe("composer commands", () => {
+  const notice = row("notice:9", "notice", {
+    sessionUpdate: "available_commands_update",
+    availableCommands: [
+      { name: "compact", description: "Compact  the\n conversation" },
+      { name: "cost", description: "Show cost", input: { hint: "[period]" } },
+      { name: 42 },
+    ],
+  });
+
+  it("takes the newest available_commands_update, skipping malformed entries", () => {
+    const stale = row("notice:1", "notice", {
+      sessionUpdate: "available_commands_update",
+      availableCommands: [{ name: "old", description: "gone" }],
+    });
+    expect(commandsFromTranscript([stale, notice]).map((c) => c.name)).toEqual(["compact", "cost"]);
+    expect(commandsFromTranscript([])).toEqual([]);
+  });
+
+  it("only matches a /token under the caret", () => {
+    expect(commandTokenAt("/comp", 5, 5)).toEqual({ start: 0, end: 5, query: "comp" });
+    expect(commandTokenAt("hello /co there", 9, 9)).toEqual({ start: 6, end: 9, query: "co" });
+    expect(commandTokenAt("no slash", 3, 3)).toBeNull();
+    expect(commandTokenAt("/comp", 2, 5)).toBeNull(); // a selection is not a caret
+  });
+
+  it("ranks prefix matches ahead of substring matches", () => {
+    const commands = commandsFromTranscript([notice]);
+    expect(filterCommands(commands, "co").map((c) => c.name)).toEqual(["compact", "cost"]);
+    expect(filterCommands(commands, "act").map((c) => c.name)).toEqual(["compact"]);
+  });
+
+  it("replaces only the token under the caret", () => {
+    const token = commandTokenAt("say /co now", 7, 7)!;
+    expect(applyCommand("say /co now", token, "compact")).toEqual({ value: "say /compact now", cursor: 13 });
+    const trailing = commandTokenAt("/co", 3, 3)!;
+    expect(applyCommand("/co", trailing, "compact")).toEqual({ value: "/compact ", cursor: 9 });
+  });
+});
+
+describe("session config", () => {
+  it("orders the menu by category, unknown categories last", () => {
+    const options = [
+      { id: "d", category: null },
+      { id: "b", category: "thought_level" },
+      { id: "a", category: "model" },
+      { id: "c", category: "mode" },
+    ];
+    expect(orderConfigOptions(options).map((o) => o.id)).toEqual(["a", "b", "c", "d"]);
+  });
+});

web/src/components/structured/model.ts

@@ -0,0 +1,369 @@
+// Pure transcript logic for the structured pane (#246) — the decisions
+// docs/STRUCTURED-VIEW.md leaves to a client, kept out of the components so
+// they can be tested without a DOM or a socket. Ported from structured.ts's
+// private helpers and the parts of structuredRender.ts that were data, not
+// markup.
+
+import type {
+  AcpContentBlock,
+  AcpPermissionOption,
+  AcpToolCallContent,
+  ReducedState,
+  StructuredApprovalDecision,
+  TranscriptRow,
+  TranscriptRowKind,
+  TurnMeta,
+} from "../../types.js";
+import { computeDiffLines, diffStats } from "../../structuredDiff.js";
+
+/** Human label behind a `ToolKind`. An unrecognised/absent kind is "Tool" —
+ *  never a blank label. */
+const KIND_LABEL: Record<string, string> = {
+  read: "Read",
+  edit: "Edit",
+  delete: "Delete",
+  move: "Move",
+  search: "Search",
+  execute: "Execute",
+  think: "Think",
+  fetch: "Fetch",
+  switch_mode: "Switch mode",
+};
+
+export function toolKindLabel(kind: string | undefined): string {
+  return (kind && KIND_LABEL[kind]) || "Tool";
+}
+
+/** Split a title into `{label, arg}` when it follows the adapter's own
+ *  `Name(argument)` convention; otherwise the whole title is the arg and the
+ *  tool's `kind` supplies a generic label. Never guesses at a shape the data
+ *  doesn't actually show. */
+export function splitToolTitle(
+  title: string | undefined,
+  name: string | null | undefined,
+  kind: string | undefined,
+): { label: string; arg: string } {
+  const label = name ?? toolKindLabel(kind);
+  if (!title) return { label, arg: "" };
+  const m = /^(\S+)\(([\s\S]*)\)$/.exec(title);
+  if (m) return { label: name ?? m[1], arg: m[2] };
+  return { label, arg: title };
+}
+
+/** Content-block text, or a labelled placeholder for anything that isn't
+ *  text — never dropped silently, never fabricated. */
+export function contentBlockText(block: AcpContentBlock | undefined): string {
+  if (!block) return "";
+  switch (block.type) {
+    case "text":
+      return block.text;
+    case "image":
+      return "[image]";
+    case "audio":
+      return "[audio]";
+    case "resource_link":
+      return `[resource: ${block.name ?? block.uri ?? "linked"}]`;
+    case "resource":
+      return "[resource]";
+    default:
+      return "";
+  }
+}
+
+/** `+added −removed` across every diff block in a tool call's content — real
+ *  derived data, never a fabricated duration. */
+export function toolDiffMeta(content: AcpToolCallContent[]): string {
+  let added = 0;
+  let removed = 0;
+  for (const block of content) {
+    if (block.type !== "diff") continue;
+    const stats = diffStats(computeDiffLines(block.oldText, block.newText));
+    added += stats.added;
+    removed += stats.removed;
+  }
+  return `+${added} −${removed}`;
+}
+
+export function statusMeta(
+  status: string | undefined,
+  hasDiff: boolean,
+): { text: string; kind: string } | null {
+  if (status === "in_progress") return { text: "running", kind: "running" };
+  if (status === "failed") return { text: "failed", kind: "failed" };
+  if (status === "pending" && !hasDiff) return { text: "pending", kind: "pending" };
+  return null;
+}
+
+/** The `maestroTurnMeta` footer a `Notice` row carries when it is a completed,
+ *  cancelled or failed turn's durable footer — `null` for every other notice. */
+export function turnMeta(row: TranscriptRow): TurnMeta | null {
+  if (row.kind !== "notice" || !row.data || typeof row.data !== "object") return null;
+  const value = (row.data as { maestroTurnMeta?: unknown }).maestroTurnMeta;
+  if (!value || typeof value !== "object") return null;
+  const meta = value as Partial<TurnMeta>;
+  if (typeof meta.elapsedMs !== "number" || typeof meta.outcome !== "string") return null;
+  return meta as TurnMeta;
+}
+
+/** Notices the web client consumes as state and omits from the visible
+ *  transcript (docs/STRUCTURED-VIEW.md, "A client decides"). */
+export function isStateOnlyNotice(row: TranscriptRow): boolean {
+  if (row.kind !== "notice" || !row.data || typeof row.data !== "object") return false;
+  const update = (row.data as { sessionUpdate?: string }).sessionUpdate;
+  return update === "available_commands_update" || update === "session_info_update";
+}
+
+/** Which decisions a permission request actually backs, by the
+ *  `PermissionOptionKind` values it offers (docs/STRUCTURED-VIEW.md's
+ *  "Decision mapping"). A decision with no matching option resolves
+ *  `Cancelled` server-side regardless of what the client sent — offering its
+ *  button would let the operator "allow" something that silently no-ops. */
+export function offeredDecisions(options: AcpPermissionOption[]): StructuredApprovalDecision[] {
+  const kinds = new Set(options.map((o) => o.kind));
+  const decisions: StructuredApprovalDecision[] = [];
+  if (kinds.has("allow_once")) decisions.push("allow_once");
+  if (kinds.has("allow_always")) decisions.push("allow_for_session");
+  if (kinds.has("reject_once") || kinds.has("reject_always")) decisions.push("deny");
+  return decisions;
+}
+
+/** The row id a live `pending_approval` names: the newest `Approval` row.
+ *  Only one approval is ever live (docs/STRUCTURED-VIEW.md, "One live
+ *  approval at a time"), so the last one is the pending one. */
+export function pendingApprovalRowId(rows: TranscriptRow[], state: ReducedState): string | null {
+  return state.pending_approval ? lastRowIdOfKind(rows, "approval") : null;
+}
+
+export function lastRowIdOfKind(rows: TranscriptRow[], kind: TranscriptRowKind): string | null {
+  for (let i = rows.length - 1; i >= 0; i--) if (rows[i].kind === kind) return rows[i].id;
+  return null;
+}
+
+export function turnIsActive(state: ReducedState): boolean {
+  return state.turn.responding || state.turn.thinking;
+}
+
+export interface ActivityGroup {
+  /** Header label count — tool rows only, never absorbed text. */
+  toolCount: number;
+  /** Tools plus absorbed intermediate text/approvals, in transcript order. */
+  rows: TranscriptRow[];
+}
+
+/**
+ * Group tool rows (and intermediate agent text / resolved approvals between
+ * them) by turn. An agent_text/agent_thought row is "intermediate" when a tool
+ * row follows it in the same turn — it gets absorbed into the group so the
+ * collapsed block preserves chronological order. Resolved approval rows (not
+ * the currently pending one) are absorbed the same way. The *last* agent text
+ * with no subsequent tool stays standalone (the prominent final answer).
+ *
+ * Returns groups keyed by `turn:<userId>`.
+ */
+export function activityGroupsByTurn(
+  rows: TranscriptRow[],
+  pendingApprovalId: string | null,
+  turnActive: boolean,
+): Map<string, ActivityGroup> {
+  // First: count tools per turn to know which turns qualify for grouping.
+  const toolCounts = new Map<string, number>();
+  let turnId = "before-first-message";
+  for (const row of rows) {
+    if (row.kind === "user") turnId = row.id;
+    if (row.kind !== "tool_call" && row.kind !== "tool_diff") continue;
+    const gid = `turn:${turnId}`;
+    toolCounts.set(gid, (toolCounts.get(gid) ?? 0) + 1);
+  }
+  // Second: build groups with interleaved text for turns with 2+ tools.
+  const groups = new Map<string, ActivityGroup>();
+  turnId = "before-first-message";
+  // Pending rows that might be intermediate (not yet confirmed by a following
+  // tool). If no tool follows, they stay standalone.
+  let pending: TranscriptRow[] = [];
+  let currentGid = `turn:${turnId}`;
+  for (const row of rows) {
+    if (row.kind === "user") {
+      turnId = row.id;
+      currentGid = `turn:${turnId}`;
+      pending = [];
+      continue;
+    }
+    const count = toolCounts.get(currentGid) ?? 0;
+    if (count < 2) continue;
+    const isIntermediateText = row.kind === "agent_text" || row.kind === "agent_thought";
+    const isResolvedApproval = row.kind === "approval" && row.id !== pendingApprovalId;
+    if (isIntermediateText || isResolvedApproval) {
+      pending.push(row);
+      continue;
+    }
+    if (row.kind === "tool_call" || row.kind === "tool_diff") {
+      const group = groups.get(currentGid) ?? { toolCount: count, rows: [] };
+      // Flush any pending rows — a tool follows, so they're intermediate.
+      group.rows.push(...pending);
+      pending = [];
+      group.rows.push(row);
+      groups.set(currentGid, group);
+    }
+  }
+  // A final agent text is the answer, so it stays outside. Thought rows are
+  // working commentary, though: when a turn already has a disclosure they
+  // belong with its activity even if the next tool call has not arrived yet.
+  // While the turn is still live the most recent one stays outside as visible
+  // narration (docs/STRUCTURED-VIEW.md), and is absorbed when the turn ends.
+  const lastGroup = groups.get(currentGid);
+  if (lastGroup && pending.length > 0 && pending.every((row) => row.kind === "agent_thought")) {
+    const absorb = turnActive ? pending.slice(0, -1) : pending;
+    lastGroup.rows.push(...absorb);
+  }
+
+  return groups;
+}
+
+/** One entry of the flattened render list: either a standalone row or a whole
+ *  activity group. */
+export type TranscriptItem =
+  | { type: "row"; row: TranscriptRow }
+  | { type: "group"; id: string; group: ActivityGroup };
+
+/**
+ * The transcript in render order: rows, with each turn's tool activity folded
+ * into a single group item where one exists. Resolved approvals not absorbed
+ * into a group are dropped — the tool row itself already identifies the
+ * action. `plan` rows and state-only notices are dropped too (both clients
+ * omit `Plan` from the transcript). A turn footer only survives as the final
+ * item, so old footers stop reading like transcript content.
+ */
+export function transcriptItems(
+  rows: TranscriptRow[],
+  pendingApprovalId: string | null,
+  turnActive: boolean,
+): TranscriptItem[] {
+  const groups = activityGroupsByTurn(rows, pendingApprovalId, turnActive);
+  const grouped = new Set<string>();
+  for (const group of groups.values()) for (const row of group.rows) grouped.add(row.id);
+
+  const items: TranscriptItem[] = [];
+  let turnId = "before-first-message";
+  const emitted = new Set<string>();
+  for (const row of rows) {
+    if (row.kind === "user") turnId = row.id;
+    const groupId = `turn:${turnId}`;
+    const group = groups.get(groupId);
+    if (group && grouped.has(row.id)) {
+      // The group renders once, at its first member's position.
+      if (!emitted.has(groupId)) {
+        emitted.add(groupId);
+        items.push({ type: "group", id: groupId, group });
+      }
+      continue;
+    }
+    if (row.kind === "plan") continue;
+    if (row.kind === "notice" && isStateOnlyNotice(row)) continue;
+    // A resolved approval outside a group adds nothing the tool row does not
+    // already say. A pending one always renders.
+    if (row.kind === "approval" && row.id !== pendingApprovalId) continue;
+    items.push({ type: "row", row });
+  }
+
+  return items.filter(
+    (item, index) =>
+      !(item.type === "row" && turnMeta(item.row) !== null) || index === items.length - 1,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// composer: `/` command autocomplete off `available_commands_update` notices
+// ---------------------------------------------------------------------------
+
+export interface AvailableCommand {
+  name: string;
+  description: string;
+  input?: { hint?: string };
+}
+
+/** The live command list is whatever the most recent
+ *  `available_commands_update` notice carries (docs/STRUCTURED-VIEW.md). */
+export function commandsFromTranscript(rows: TranscriptRow[]): AvailableCommand[] {
+  for (let i = rows.length - 1; i >= 0; i--) {
+    if (rows[i].kind !== "notice") continue;
+    const data = rows[i].data as { sessionUpdate?: string; availableCommands?: unknown[] } | undefined;
+    if (data?.sessionUpdate !== "available_commands_update") continue;
+    return (data.availableCommands ?? []).flatMap((value) => {
+      if (!value || typeof value !== "object") return [];
+      const command = value as Partial<AvailableCommand>;
+      if (typeof command.name !== "string" || typeof command.description !== "string") return [];
+      return [{ name: command.name, description: command.description, input: command.input }];
+    });
+  }
+  return [];
+}
+
+export interface CommandToken {
+  start: number;
+  end: number;
+  query: string;
+}
+
+/** The whitespace-delimited token under the caret, when it is a `/command`
+ *  being typed. Completing one replaces only that token. */
+export function commandTokenAt(
+  value: string,
+  selectionStart: number,
+  selectionEnd: number,
+): CommandToken | null {
+  if (selectionStart !== selectionEnd) return null;
+  let start = selectionStart;
+  while (start > 0 && !/\s/.test(value[start - 1])) start--;
+  let end = selectionStart;
+  while (end < value.length && !/\s/.test(value[end])) end++;
+  const match = /^\/([^\s/]*)$/.exec(value.slice(start, selectionStart));
+  return match ? { start, end, query: match[1].toLocaleLowerCase() } : null;
+}
+
+/** Substring match, prefix matches first, then alphabetical. */
+export function filterCommands(commands: AvailableCommand[], query: string): AvailableCommand[] {
+  return commands
+    .filter((command) => command.name.toLocaleLowerCase().includes(query))
+    .sort((a, b) => {
+      const aStarts = a.name.toLocaleLowerCase().startsWith(query);
+      const bStarts = b.name.toLocaleLowerCase().startsWith(query);
+      return aStarts === bStarts ? a.name.localeCompare(b.name) : aStarts ? -1 : 1;
+    });
+}
+
+/** Replace the token under the caret with `/name`, returning the new draft and
+ *  where the caret lands. A trailing space is added only when the completion
+ *  ends the draft. */
+export function applyCommand(
+  value: string,
+  token: CommandToken,
+  name: string,
+): { value: string; cursor: number } {
+  const before = value.slice(0, token.start);
+  const after = value.slice(token.end);
+  let replacement = `/${name}`;
+  let cursor = before.length + replacement.length;
+  if (after.length === 0) {
+    replacement += " ";
+    cursor++;
+  } else if (/^[ \t]/.test(after)) {
+    cursor++;
+  }
+  return { value: before + replacement + after, cursor };
+}
+
+// ---------------------------------------------------------------------------
+// session config menu
+// ---------------------------------------------------------------------------
+
+/** Category order the config menu sorts by; anything else lands after. */
+const CONFIG_CATEGORY_ORDER = ["model", "thought_level", "mode", "model_config"];
+
+export function orderConfigOptions<T extends { category?: string | null }>(options: T[]): T[] {
+  return [...options].sort((a, b) => {
+    const rank = (category?: string | null) => CONFIG_CATEGORY_ORDER.indexOf(category ?? "");
+    const aRank = rank(a.category);
+    const bRank = rank(b.category);
+    return (aRank < 0 ? 99 : aRank) - (bRank < 0 ? 99 : bRank);
+  });
+}

web/src/components/structured/toolPayload.ts

@@ -0,0 +1,112 @@
+// What a tool row shows below its head, derived from `rawInput`/`rawOutput`.
+// The adapters emit a handful of recognisable payload shapes (a shell command,
+// an MCP call, a search, a plain function call); anything else falls through to
+// the raw JSON disclosure rather than being guessed at.
+
+import type { AcpContentBlock, AcpToolCallContent, AcpToolCallLike } from "../../types.js";
+
+/** One labelled `<pre>` block under a tool head. */
+export interface ToolDetail {
+  label: string;
+  text: string;
+}
+
+export interface ToolPayload {
+  details: ToolDetail[];
+  /** A shell command's exit code, when the output carried one. */
+  exitCode: number | null;
+  raw: { input: string | null; output: string | null };
+}
+
+function printable(value: unknown): string | null {
+  if (value === undefined || value === null) return null;
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function jsonPrintable(value: unknown): string | null {
+  if (value === undefined) return null;
+  try {
+    return JSON.stringify(value, null, 2) ?? null;
+  } catch {
+    return printable(value);
+  }
+}
+
+function record(value: unknown): Record<string, unknown> | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  return value as Record<string, unknown>;
+}
+
+/** Push a detail unless it is empty, or repeats text the content blocks above
+ *  already show verbatim. */
+function push(details: ToolDetail[], label: string, value: unknown, duplicates?: Set<string>): void {
+  const text = printable(value);
+  if (text !== null && text !== "" && !duplicates?.has(text)) details.push({ label, text });
+}
+
+/** The text of every `content` block, so a `rawOutput` echoing it is not shown
+ *  a second time. */
+function contentTexts(content: AcpToolCallContent[]): Set<string> {
+  return new Set(
+    content
+      .filter((block): block is Extract<AcpToolCallContent, { type: "content" }> => block.type === "content")
+      .filter((block) => block.content.type === "text")
+      .map((block) => (block.content as Extract<AcpContentBlock, { type: "text" }>).text),
+  );
+}
+
+export function toolPayload(tool: AcpToolCallLike, content: AcpToolCallContent[]): ToolPayload {
+  const details: ToolDetail[] = [];
+  let exitCode: number | null = null;
+  const input = record(tool.rawInput);
+  const texts = contentTexts(content);
+
+  if (input) {
+    if (typeof input.command === "string") {
+      details.push({ label: "Command", text: input.command });
+      push(details, "Working directory", input.cwd);
+      const result = record(tool.rawOutput);
+      if (result) {
+        push(details, "Output", result.formatted_output ?? result.stdout ?? result.output, texts);
+        if (typeof result.exit_code === "number") exitCode = result.exit_code;
+      }
+    } else if (typeof input.server === "string" && typeof input.tool === "string" && "arguments" in input) {
+      push(details, "Arguments", input.arguments);
+      const result = record(tool.rawOutput);
+      if (result) {
+        push(details, "Result", result.result, texts);
+        push(details, "Error", result.error);
+      }
+    } else if (typeof input.query === "string" && (tool.kind === "search" || input.type === "webSearch")) {
+      details.push({ label: "Query", text: input.query });
+      push(details, "Action", input.action);
+    } else if ("arguments" in input) {
+      push(details, "Arguments", input.arguments);
+      const result = record(tool.rawOutput);
+      if (result) push(details, "Result", result.output, texts);
+    }
+  }
+
+  return {
+    details,
+    exitCode,
+    raw: { input: jsonPrintable(tool.rawInput), output: jsonPrintable(tool.rawOutput) },
+  };
+}
+
+/** A `data:` URL for an inline image/audio block, or `null` when the mime type
+ *  is absent or does not name that family — never a URL built from an
+ *  unvalidated string. */
+export function safeMediaSource(
+  mimeType: string | undefined,
+  data: string | undefined,
+  family: "image" | "audio",
+): string | null {
+  if (!mimeType || !data || !new RegExp(`^${family}/[a-z0-9.+-]+$`, "i").test(mimeType)) return null;
+  return `data:${mimeType};base64,${data}`;
+}

web/src/components/structured/useStructuredSession.ts

@@ -0,0 +1,216 @@
+// The `WS /api/structured/:id` half of the pane (#246). Every connect — fresh
+// or reconnect — resends the whole transcript rather than resuming a cursor
+// (docs/STRUCTURED-VIEW.md), so a snapshot replaces state wholesale instead of
+// merging into what came before.
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { structuredWsUrl } from "../../routes.js";
+import { INITIAL_RECONNECT_MS, MAX_RECONNECT_MS } from "../../reconnect.js";
+import type {
+  ReducedState,
+  StructuredEvent,
+  TranscriptDelta,
+  TranscriptRow,
+  Uuid,
+} from "../../types.js";
+
+export type StructuredStatus = "connecting" | "open" | "reconnecting" | "closed" | "error";
+
+/** Injectable so tests can drive the socket without a daemon — the same seam
+ *  structured.ts used. */
+export type StructuredSocketFactory = (sessionId: Uuid) => WebSocket;
+
+const idleState = (): ReducedState => ({
+  turn: { responding: false, thinking: false, active_tool_calls: [] },
+});
+
+function applyDelta(rows: TranscriptRow[], delta: TranscriptDelta): TranscriptRow[] {
+  if (delta.type === "append") {
+    // A patch can arrive for a row this connection has never seen (its
+    // snapshot predates it); treating an unknown id as an append keeps the
+    // transcript complete rather than dropping the row.
+    const at = rows.findIndex((row) => row.id === delta.row.id);
+    return at === -1 ? [...rows, delta.row] : rows.map((row, i) => (i === at ? delta.row : row));
+  }
+  if (delta.type === "patch") {
+    const at = rows.findIndex((row) => row.id === delta.row.id);
+    return at === -1 ? [...rows, delta.row] : rows.map((row, i) => (i === at ? delta.row : row));
+  }
+  return rows.filter((row) => row.id !== delta.id);
+}
+
+export interface StructuredSession {
+  rows: TranscriptRow[];
+  state: ReducedState;
+  status: StructuredStatus;
+  /** A daemon-supplied close reason (code ≥ 4000), when there is one. */
+  detail: string | null;
+  /** The number of sockets this pane has opened, newest last. A submission
+   *  that straddles a reconnect uses it to notice its acceptance may predate
+   *  the current snapshot. */
+  socketGeneration: number;
+  /** Drop the socket and reconnect, so the next snapshot cannot predate a
+   *  POST that has already been accepted. */
+  reconnect(): void;
+}
+
+export interface UseStructuredSessionOptions {
+  shouldReconnect?: (code: number) => boolean;
+  onClosed?: () => void;
+  socketFactory?: StructuredSocketFactory;
+}
+
+/** Application-defined close codes (daemon rejection) and the clean-close code
+ *  — retrying either would only loop. */
+function defaultShouldReconnect(code: number): boolean {
+  return code < 4000 && code !== 1000;
+}
+
+export function useStructuredSession(
+  sessionId: Uuid,
+  {
+    shouldReconnect = defaultShouldReconnect,
+    onClosed,
+    socketFactory = (id) => new WebSocket(structuredWsUrl(id)),
+  }: UseStructuredSessionOptions = {},
+): StructuredSession {
+  const [rows, setRows] = useState<TranscriptRow[]>([]);
+  const [state, setState] = useState<ReducedState>(idleState);
+  const [status, setStatus] = useState<StructuredStatus>("connecting");
+  const [detail, setDetail] = useState<string | null>(null);
+  const [socketGeneration, setSocketGeneration] = useState(0);
+
+  // Read through refs so a changed callback never tears the socket down.
+  const shouldReconnectRef = useRef(shouldReconnect);
+  const onClosedRef = useRef(onClosed);
+  const factoryRef = useRef(socketFactory);
+  shouldReconnectRef.current = shouldReconnect;
+  onClosedRef.current = onClosed;
+  factoryRef.current = socketFactory;
+
+  const reconnectRef = useRef<() => void>(() => {});
+
+  useEffect(() => {
+    let disposed = false;
+    let socket: WebSocket | null = null;
+    let reconnectMs = INITIAL_RECONNECT_MS;
+    let timer: number | null = null;
+
+    const closeSocket = () => {
+      const existing = socket;
+      socket = null;
+      if (!existing) return;
+      existing.onopen = null;
+      existing.onmessage = null;
+      existing.onerror = null;
+      existing.onclose = null;
+      try {
+        existing.close();
+      } catch {
+        // ignore — an already-closing socket has nothing to close
+      }
+    };
+
+    const cancelTimer = () => {
+      if (timer === null) return;
+      window.clearTimeout(timer);
+      timer = null;
+    };
+
+    function connect(): void {
+      if (disposed) return;
+      cancelTimer();
+      closeSocket();
+      const current = factoryRef.current(sessionId);
+      socket = current;
+      setSocketGeneration((n) => n + 1);
+
+      current.onopen = () => {
+        if (disposed || socket !== current) return;
+        reconnectMs = INITIAL_RECONNECT_MS;
+        setDetail(null);
+        setStatus("open");
+      };
+
+      current.onmessage = (ev) => {
+        if (disposed || socket !== current) return;
+        if (typeof ev.data !== "string") return;
+        let msg: StructuredEvent;
+        try {
+          msg = JSON.parse(ev.data) as StructuredEvent;
+        } catch {
+          return; // not a structured event we understand
+        }
+        switch (msg.type) {
+          case "transcript_snapshot":
+            setRows([...msg.snapshot.rows]);
+            break;
+          case "reduced_state":
+            setState(msg.state);
+            break;
+          case "projection_update":
+            if (msg.transcript) {
+              const delta = msg.transcript;
+              setRows((previous) => applyDelta(previous, delta));
+            }
+            setState(msg.state);
+            break;
+        }
+      };
+
+      current.onerror = () => {
+        if (disposed || socket !== current) return;
+        setStatus("error");
+      };
+
+      current.onclose = (ev) => {
+        if (disposed || socket !== current) return;
+        socket = null;
+        const reason = ev.reason?.trim();
+        if (ev.code >= 4000 && reason) {
+          setDetail(reason);
+          setStatus("error");
+          return;
+        }
+        if (shouldReconnectRef.current(ev.code)) {
+          const delay = Math.min(reconnectMs, MAX_RECONNECT_MS);
+          setStatus("reconnecting");
+          timer = window.setTimeout(() => {
+            timer = null;
+            if (disposed) return;
+            reconnectMs = Math.min(reconnectMs * 2, MAX_RECONNECT_MS);
+            connect();
+          }, delay);
+          return;
+        }
+        setDetail(String(ev.code));
+        setStatus("closed");
+        onClosedRef.current?.();
+      };
+    }
+
+    reconnectRef.current = () => {
+      if (disposed) return;
+      setStatus("reconnecting");
+      connect();
+    };
+
+    setStatus("connecting");
+    connect();
+
+    return () => {
+      disposed = true;
+      reconnectRef.current = () => {};
+      cancelTimer();
+      closeSocket();
+    };
+  }, [sessionId]);
+
+  const reconnect = useCallback(() => reconnectRef.current(), []);
+
+  return useMemo(
+    () => ({ rows, state, status, detail, socketGeneration, reconnect }),
+    [rows, state, status, detail, socketGeneration, reconnect],
+  );
+}

web/src/spawnForm.ts

@@ -15,9 +15,9 @@ import { splitCommand, toolIconSvg, TOOL_LABELS } from "./toolIcon.js";
 import { abbreviateCwd } from "./types.js";
 import type { BranchInfo, CreateSessionRequest, Project, Session, SpawnPreset } from "./types.js";
 
-const STRUCTURED_VIEW_TOOLS = new Set(["claude", "codex"]);
+export const STRUCTURED_VIEW_TOOLS = new Set(["claude", "codex"]);
 
-function supportsStructuredView(command: string): boolean {
+export function supportsStructuredView(command: string): boolean {
   const tool = splitCommand(command).tool;
   return tool !== null && STRUCTURED_VIEW_TOOLS.has(tool);
 }

web/src/stores/layoutStore.test.ts

@@ -0,0 +1,162 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { leaves } from "../layout.js";
+import { createLayoutStore, type LayoutStoreOptions } from "./layoutStore.js";
+
+function fakeScheduler() {
+  const timers = new Map<number, () => void>();
+  let id = 0;
+  return {
+    scheduler: {
+      setTimer: (fn: () => void) => {
+        const h = ++id;
+        timers.set(h, fn);
+        return h;
+      },
+      clearTimer: (h: number) => {
+        timers.delete(h);
+      },
+    },
+    flush() {
+      for (const fn of [...timers.values()]) fn();
+      timers.clear();
+    },
+  };
+}
+
+function store(opts: Partial<LayoutStoreOptions> = {}) {
+  return createLayoutStore({
+    load: () => null,
+    save: vi.fn(),
+    scheduler: fakeScheduler().scheduler,
+    ...opts,
+  });
+}
+
+describe("layoutStore", () => {
+  it("boots with a single empty tab when nothing is persisted", () => {
+    const { layout } = store().getState();
+    expect(layout.tabs).toHaveLength(1);
+    expect(layout.tabs[0].root).toBeNull();
+  });
+
+  it("boots from a persisted layout when one loads", () => {
+    const persisted = store().getState().layout;
+    persisted.tabs[0].title = "Restored";
+    const s = store({ load: () => persisted });
+    expect(s.getState().layout.tabs[0].title).toBe("Restored");
+  });
+
+  it("openSession seeds the active tab from empty", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    expect(leaves(s.getState().layout.tabs[0].root).map((l) => l.sessionId)).toEqual(["s1"]);
+  });
+
+  it("openSession focuses an already-open session instead of moving it", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    s.getState().openSessionBeside("s2");
+    s.getState().openSession("s1");
+    const ids = leaves(s.getState().layout.tabs[0].root)
+      .map((l) => l.sessionId)
+      .sort();
+    expect(ids).toEqual(["s1", "s2"]);
+  });
+
+  it("openSessionBeside splits next to the focused pane instead of replacing it", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    s.getState().openSessionBeside("s2");
+    expect(leaves(s.getState().layout.tabs[0].root)).toHaveLength(2);
+  });
+
+  it("openSessionBeside(newTab) opens its own tab", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    s.getState().openSessionBeside("s2", { newTab: true });
+    expect(s.getState().layout.tabs).toHaveLength(2);
+    expect(leaves(s.getState().layout.tabs[1].root).map((l) => l.sessionId)).toEqual(["s2"]);
+  });
+
+  it("closeSession removes the pane and closes a tab left with nothing else", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    s.getState().addTab();
+    s.getState().openSession("s2");
+    s.getState().closeSession("s2");
+    expect(s.getState().layout.tabs).toHaveLength(1);
+    expect(leaves(s.getState().layout.tabs[0].root).map((l) => l.sessionId)).toEqual(["s1"]);
+  });
+
+  it("splitFocused adds a leaf beside the given one and focuses it", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    const first = leaves(s.getState().layout.tabs[0].root)[0].id;
+    s.getState().splitFocused(first, "row");
+    const tab = s.getState().layout.tabs[0];
+    expect(leaves(tab.root)).toHaveLength(2);
+    expect(tab.focusedLeafId).not.toBe(first);
+  });
+
+  it("closePane collapses the split back to the surviving leaf", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    const first = leaves(s.getState().layout.tabs[0].root)[0].id;
+    s.getState().splitFocused(first, "row");
+    s.getState().closePane(first);
+    const remaining = leaves(s.getState().layout.tabs[0].root);
+    expect(remaining).toHaveLength(1);
+    expect(remaining[0].sessionId).toBeNull();
+  });
+
+  it("addTab/selectTab/closeTab manage the tab strip", () => {
+    const s = store();
+    s.getState().addTab();
+    expect(s.getState().layout.tabs).toHaveLength(2);
+    const [first, second] = s.getState().layout.tabs;
+    s.getState().selectTab(first.id);
+    expect(s.getState().layout.activeTabId).toBe(first.id);
+    s.getState().closeTab(second.id);
+    expect(s.getState().layout.tabs).toHaveLength(1);
+  });
+
+  it("reorderTab moves a tab to sit where another one is", () => {
+    const s = store();
+    s.getState().addTab();
+    s.getState().addTab();
+    const [a, b, c] = s.getState().layout.tabs;
+    s.getState().reorderTab(c.id, a.id);
+    expect(s.getState().layout.tabs.map((t) => t.id)).toEqual([c.id, a.id, b.id]);
+  });
+
+  it("reconcile drops leaves for sessions no longer live, and closes a tab left with nothing else", () => {
+    const s = store();
+    s.getState().openSession("s1");
+    s.getState().addTab();
+    s.getState().openSession("dead");
+    s.getState().reconcile(new Set(["s1"]));
+    const { layout } = s.getState();
+    expect(layout.tabs).toHaveLength(1);
+    expect(leaves(layout.tabs[0].root).map((l) => l.sessionId)).toEqual(["s1"]);
+  });
+
+  it("reconcile leaves an intentionally empty tab alone", () => {
+    const s = store();
+    s.getState().addTab();
+    s.getState().reconcile(new Set());
+    expect(s.getState().layout.tabs).toHaveLength(2);
+  });
+
+  it("debounces persistence to a single write once idle", () => {
+    const save = vi.fn();
+    const { scheduler, flush } = fakeScheduler();
+    const s = store({ save, scheduler });
+    s.getState().openSession("s1");
+    s.getState().openSessionBeside("s2");
+    expect(save).not.toHaveBeenCalled();
+    flush();
+    expect(save).toHaveBeenCalledTimes(1);
+    expect(save.mock.calls[0][0]).toBe(s.getState().layout);
+  });
+});

web/src/stores/layoutStore.ts

@@ -0,0 +1,253 @@
+// Zustand wrapper around ../layout.js's layout tree model (issue #249).
+// Actions mutate the tree in place via layout.js's own functions, then
+// re-wrap it so `useStore` selectors relying on referential equality notice.
+
+import { create } from "zustand";
+
+import {
+  activeTab,
+  addTab as addTabToLayout,
+  closeTab as closeTabInLayout,
+  emptyLayout,
+  equalizeRatios,
+  findLeaf,
+  leaves,
+  locateSession,
+  removeLeaf,
+  splitLeaf,
+  type Dir,
+  type Layout,
+} from "../layout.js";
+import { loadLayout, saveLayout } from "../persistence.js";
+import type { Uuid } from "../types.js";
+import type { Scheduler } from "./catalogStore.js";
+
+const SAVE_DEBOUNCE_MS = 400;
+
+const browserScheduler: Scheduler = {
+  setTimer: (fn, ms) => window.setTimeout(fn, ms),
+  clearTimer: (h) => window.clearTimeout(h),
+};
+
+export interface LayoutStoreOptions {
+  load?: () => Layout | null;
+  save?: (layout: Layout) => void;
+  scheduler?: Scheduler;
+}
+
+export interface LayoutState {
+  layout: Layout;
+}
+
+export interface LayoutActions {
+  /** Bring `sessionId` into view: focus it if already open, else fill the
+   *  focused pane (VS-Code-style replace), or seed an empty tab. */
+  openSession(sessionId: Uuid): void;
+  /** Same, but never evicts a running pane: reuses an empty leaf or splits
+   *  beside the focused one. `newTab` opens its own tab instead. */
+  openSessionBeside(sessionId: Uuid, opts?: { newTab?: boolean }): void;
+  /** Drop the pane showing `sessionId` (closed/killed elsewhere). */
+  closeSession(sessionId: Uuid): void;
+  splitFocused(leafId: string, dir: Dir): void;
+  closePane(leafId: string): void;
+  focusLeaf(leafId: string): void;
+  selectTab(tabId: string): void;
+  addTab(): void;
+  closeTab(tabId: string): void;
+  /** Tab-strip drag-and-drop reordering: moves `fromId` to sit where `toId`
+   *  currently is. */
+  reorderTab(fromId: string, toId: string): void;
+  /** Persist whatever a divider drag left on a split's `ratio` — the drag
+   *  itself mutates the node directly (same trade as the vanilla version),
+   *  this just re-wraps and schedules the save. */
+  commitLayout(): void;
+  /** Boot reconciliation: drop every leaf whose session isn't in `liveIds`,
+   *  and close any tab that held nothing else. A session killed while its
+   *  tab was closed is pruned instead of leaving a pane that can only ever
+   *  show a dead socket. Tabs that were already empty are left alone. */
+  reconcile(liveIds: ReadonlySet<Uuid>): void;
+}
+
+export type LayoutStore = LayoutState & LayoutActions;
+export type LayoutStoreApi = ReturnType<typeof createLayoutStore>;
+
+/** Builds an isolated layout store — load/save/scheduler are injectable
+ *  (tests), or default to the real localStorage persistence.ts + browser
+ *  timers. Same shape as {@link createCatalogStore}. */
+export function createLayoutStore(opts: LayoutStoreOptions = {}) {
+  const load = opts.load ?? loadLayout;
+  const save = opts.save ?? saveLayout;
+  const scheduler = opts.scheduler ?? browserScheduler;
+
+  let saveTimer: number | null = null;
+
+  return create<LayoutStore>((set, get) => {
+    function touch(): void {
+      // A shallow clone, not the same reference back: `useStore` (and any
+      // other Object.is-based selector) needs the identity to change to
+      // notice a mutation made in place on the tree underneath.
+      set({ layout: { ...get().layout } });
+    }
+
+    function schedulePersist(): void {
+      if (saveTimer !== null) scheduler.clearTimer(saveTimer);
+      saveTimer = scheduler.setTimer(() => {
+        saveTimer = null;
+        save(get().layout);
+      }, SAVE_DEBOUNCE_MS);
+    }
+
+    function commit(): void {
+      touch();
+      schedulePersist();
+    }
+
+    function mutate(fn: (layout: Layout) => void): void {
+      fn(get().layout);
+      commit();
+    }
+
+    return {
+      layout: load() ?? emptyLayout(),
+
+      openSession(sessionId) {
+        mutate((layout) => {
+          const loc = locateSession(layout, sessionId);
+          if (loc) {
+            layout.activeTabId = loc.tab.id;
+            loc.tab.focusedLeafId = loc.leaf.id;
+            return;
+          }
+          const tab = activeTab(layout);
+          if (!tab.root) {
+            tab.focusedLeafId = splitLeaf(tab, "", sessionId, "row", true);
+            return;
+          }
+          const target = (tab.focusedLeafId && findLeaf(tab.root, tab.focusedLeafId)) || leaves(tab.root)[0];
+          target.sessionId = sessionId;
+          tab.focusedLeafId = target.id;
+        });
+      },
+
+      openSessionBeside(sessionId, placement) {
+        mutate((layout) => {
+          const loc = locateSession(layout, sessionId);
+          if (loc) {
+            layout.activeTabId = loc.tab.id;
+            loc.tab.focusedLeafId = loc.leaf.id;
+            return;
+          }
+          if (placement?.newTab) {
+            const fresh = addTabToLayout(layout);
+            fresh.focusedLeafId = splitLeaf(fresh, "", sessionId, "row", true);
+            return;
+          }
+          const tab = activeTab(layout);
+          if (!tab.root || !tab.focusedLeafId || !findLeaf(tab.root, tab.focusedLeafId)) {
+            tab.focusedLeafId = splitLeaf(tab, "", sessionId, "row", true);
+            return;
+          }
+          const target = findLeaf(tab.root, tab.focusedLeafId)!;
+          if (!target.sessionId) {
+            target.sessionId = sessionId;
+          } else {
+            tab.focusedLeafId = splitLeaf(tab, target.id, sessionId, "row", true);
+            equalizeRatios(tab.root);
+          }
+        });
+      },
+
+      closeSession(sessionId) {
+        mutate((layout) => {
+          const loc = locateSession(layout, sessionId);
+          if (!loc) return;
+          removeLeaf(loc.tab, loc.leaf.id);
+          if (loc.tab.focusedLeafId === loc.leaf.id) {
+            loc.tab.focusedLeafId = leaves(loc.tab.root)[0]?.id ?? null;
+          }
+          if (!loc.tab.root) closeTabInLayout(layout, loc.tab.id);
+        });
+      },
+
+      splitFocused(leafId, dir) {
+        mutate((layout) => {
+          const tab = activeTab(layout);
+          tab.focusedLeafId = splitLeaf(tab, leafId, null, dir, true);
+          equalizeRatios(tab.root);
+        });
+      },
+
+      closePane(leafId) {
+        mutate((layout) => {
+          const tab = activeTab(layout);
+          removeLeaf(tab, leafId);
+          if (tab.focusedLeafId === leafId) {
+            tab.focusedLeafId = leaves(tab.root)[0]?.id ?? null;
+          }
+        });
+      },
+
+      focusLeaf(leafId) {
+        mutate((layout) => {
+          const tab = activeTab(layout);
+          if (tab.focusedLeafId === leafId) return;
+          tab.focusedLeafId = leafId;
+        });
+      },
+
+      selectTab(tabId) {
+        mutate((layout) => {
+          if (layout.tabs.some((t) => t.id === tabId)) layout.activeTabId = tabId;
+        });
+      },
+
+      addTab() {
+        mutate((layout) => {
+          addTabToLayout(layout);
+        });
+      },
+
+      closeTab(tabId) {
+        mutate((layout) => {
+          closeTabInLayout(layout, tabId);
+        });
+      },
+
+      reorderTab(fromId, toId) {
+        mutate((layout) => {
+          if (fromId === toId) return;
+          const from = layout.tabs.findIndex((t) => t.id === fromId);
+          const to = layout.tabs.findIndex((t) => t.id === toId);
+          if (from < 0 || to < 0) return;
+          const [moved] = layout.tabs.splice(from, 1);
+          layout.tabs.splice(to, 0, moved);
+        });
+      },
+
+      commitLayout() {
+        commit();
+      },
+
+      reconcile(liveIds) {
+        mutate((layout) => {
+          const emptied: string[] = [];
+          for (const tab of [...layout.tabs]) {
+            let prunedAny = false;
+            for (const leaf of leaves(tab.root)) {
+              if (leaf.sessionId && !liveIds.has(leaf.sessionId)) {
+                removeLeaf(tab, leaf.id);
+                prunedAny = true;
+              }
+            }
+            if (!prunedAny) continue;
+            if (!tab.focusedLeafId || !findLeaf(tab.root, tab.focusedLeafId)) {
+              tab.focusedLeafId = leaves(tab.root)[0]?.id ?? null;
+            }
+            if (!tab.root) emptied.push(tab.id);
+          }
+          for (const id of emptied) closeTabInLayout(layout, id);
+        });
+      },
+    };
+  });
+}