@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.70

package/src/App.tsx

@@ -1,865 +1,1105 @@
-/**
- * The cueloop TUI (#22): Ledger IA reduced to its terminal shape - header,
- * center artifact pane (projection renderer), right review rail, footer hint
- * bar. Thin renderer over daemon state: every mutation round-trips through
- * DaemonClient; local state is view state only (cursor, span, overlays).
- */
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useKeyboard } from "@opentui/react";
-import { DaemonClient } from "@cueloop/daemon/client";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import type { Clock } from "@opentui/core";
+import { marksByDisplay, type Mark } from "./view-plan";
+import { dimmedTheme } from "./theme";
 import {
-  cutBlock,
-  makeAnchor,
-  restoreBlock,
-  restoreLine,
-  type Annotation,
-  type ReviewSession,
-  type VerdictKind,
-} from "@cueloop/schema";
+  DEFAULT_KEYS,
+  DEFAULT_QUICK_ACTIONS,
+  loadConfig,
+  persistAuthorName,
+  persistDiffView,
+  persistPins,
+  type AutoClose,
+  type DiffViewMode,
+  type QuickAction,
+} from "./config";
+import { loadSkills, SlashSkillsContext } from "./skills";
+import type { SlashItem } from "./slash-palette";
 import {
-  blockRuns,
-  buildDisplay,
-  displayText,
-  marksByDisplay,
-  nextWorkBlock,
-  overlayMarks,
-  spanKey,
-  startSpan,
-  wrapRuns,
-  type DisplayBlock,
-  type SpanState,
-  type StyleRun,
-} from "./view";
-import { diffRows, diffRowAnchor, diffRowLocation, type DiffRow } from "./view-diff";
-import { editInEditor } from "./editor";
-import { DARK as T } from "./theme";
-import { highlightCode, type CodeToken } from "./syntax";
-import { DEFAULT_KEYS, actionFor, loadConfig, persistAutoClose, type AutoClose } from "./config";
-import { focusHerdrPane, returnPaneFor } from "./herdr";
-import { Registry, type Exporter } from "@cueloop/extension-api";
-import { createObsidianExtension, shouldExport, type ObsidianConfig } from "@cueloop/integration-obsidian";
+  composeTheme,
+  DEFAULT_THEME_NAME,
+  themeForName,
+  type Appearance,
+  type ThemeName,
+} from "./theme-presets";
+import type { Theme } from "./theme";
+import { createReviewController, type ShareTransport } from "./thread-controller";
+import type { SessionClient } from "@cueloop/daemon/client";
+import { createIntentDispatch, type Mode, type RailTab } from "./intent-dispatch";
+import { reduceKey, type KeyState } from "./keymap";
+import { KeyBindings, type CheatsheetSection } from "./key-bindings";
+import { useReadySignal } from "./ready-signal";
+import { ThemeProvider } from "./components/theme-context";
+import { Button } from "./components/primitives/Button";
+import { Toolbar } from "./components/primitives/Toolbar";
+import { groupInbox, projectName, threadTitle } from "./components/session-tree";
+import { ThreadTree } from "./components/ThreadTree";
+import { ChangesFileTree } from "./components/ChangesColumn";
+import { ProjectTreeView } from "./components/ProjectTreeView";
+import { AnnotatableFileView } from "./components/AnnotatableFileView";
+import { AppShell, type ProjectPanelMode } from "./components/AppShell";
+import { EditorGrid } from "./components/EditorGrid";
+import type { EditorTab } from "./components/editor-grid";
+import { useChangesWorkbench } from "./use-changes-workbench";
+import { ThreadFooter } from "./components/ThreadFooter";
+import { ConfirmCard } from "./components/ConfirmCard";
+import { THREAD_VIEW_CHEATSHEET, ThreadView } from "./components/ThreadView";
+import {
+  DIFF_CHORD_ENTRIES,
+  RAIL_CHORD_ENTRIES,
+  resolveThreadChord,
+  THREAD_CHORD_ENTRIES,
+  TREE_CHORD_ENTRIES,
+} from "./thread-chords";
+import {
+  DiffContentView,
+  type DiffFoldControls,
+  type DiffContentViewProps,
+} from "./components/DiffContentView";
+import { commentCountsByFile, fileTargetMarks, marksByRows, type DiffRow } from "./view-diff";
+import { annotationTarget, type Anchor } from "@cueloop/schema";
+import type { DiffFileContents, Thread } from "@cueloop/schema";
+import { PrototypePixels } from "./prototype-pixels";
+import type { PrototypeElement } from "./prototype-browser";
+import {
+  buildRenderFlags,
+  buildSubmitConfirmState,
+  computeRoleCapabilities,
+  deriveReviewFlags,
+  isPixelPrototypeMode,
+  isCompletionOverlayPhase,
+  isWalking,
+  resolveOverlay,
+} from "./app-view-model";
+import { buildKeyState } from "./app-key-state";
+import { useSettingsDialog } from "./use-settings-dialog";
+import {
+  CompletionScreen,
+  ConnectingScreen,
+  ErrorScreen,
+  MenuChrome,
+  NoThreadShell,
+  TrailingOverlays,
+} from "./app-screens";
+/** A toast clears itself after this idle; esc dismisses it sooner. */
+const TOAST_DISMISS_MS = 4000;
 
 export interface AppProps {
   home?: string;
   sessionId?: string;
+  /** The launch directory whose git repo backs the no-session welcome tree; defaults to process.cwd(). */
+  cwd?: string;
   /**
-   * Observer mode (SSH-served connections): every mutating verb is ignored and
+   * Observer mode (SSH-served connections): every mutating primitive is ignored and
    * answers "observer - read-only" in the status line; navigation still works.
    */
   readOnly?: boolean;
   onExit?: (code: number) => void;
-}
-
-type Mode =
-  | { m: "normal" }
-  | { m: "span"; span: SpanState }
-  | { m: "compose"; kind: "comment" | "suggestion"; dispIdx: number; start: number; end: number; text: string }
-  | { m: "submit"; verdict: VerdictKind; summary: string };
-
-/** Verbs that write session state; an observer never reaches their handlers. */
-const MUTATING_ACTIONS = new Set(["comment", "suggest", "cut", "edit", "delete_annotation", "submit"]);
-
-const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
-const VERDICT_LABEL: Record<VerdictKind, string> = {
-  comment: "Comment",
-  approve: "Approve",
-  request_changes: "Request changes",
-};
-
-export function App({ home, sessionId, readOnly = false, onExit }: AppProps): React.ReactNode {
-  const clientRef = useRef<DaemonClient | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [inbox, setInbox] = useState<ReviewSession[] | null>(null);
-  const [session, setSession] = useState<ReviewSession | null>(null);
-  const [cursor, setCursor] = useState(0);
-  const [inboxCursor, setInboxCursor] = useState(0);
-  const [mode, setMode] = useState<Mode>({ m: "normal" });
-  const [focusedAnn, setFocusedAnn] = useState<string | undefined>(undefined);
-  const [status, setStatus] = useState("");
+  /** Fired once, after the first frame that paints a usable screen with its keyboard handlers live (ready-signal.ts). */
+  onReady?: () => void;
+  /** Timer source for the auto-close countdown; tests inject a ManualClock. */
+  clock?: Clock;
+  /** Session source; the sharing gateway injects a blob-backed client. */
+  openClient?: () => Promise<SessionClient>;
+  shareTransport?: ShareTransport;
   /**
-   * Post-submit lifecycle (a review pane should hand you back to the agent,
-   * not linger): idle → prompt (auto-close off: offer the choice) or
-   * counting (configured delay) → exit. esc dismisses to the resolved view.
+   * Who is at the keyboard. `owner` is the local planner (default). `observer`
+   * is a passive `cueloop serve` watcher (read-only). `collaborator` is a share
+   * viewer: annotates, but cannot edit the plan or submit an agent verdict.
    */
-  const [completion, setCompletion] = useState<
-    { phase: "idle" } | { phase: "prompt" } | { phase: "counting"; remaining: number } | { phase: "dismissed" }
-  >({ phase: "idle" });
-  const autoCloseRef = useRef<AutoClose>("off");
-  /** Close the review and, inside herdr, bounce focus back to the agent. */
-  const finishReview = useCallback(() => {
-    const pane = returnPaneFor(session?.artifact.meta.herdrPane);
-    if (pane) focusHerdrPane(pane);
-    onExit?.(0);
-  }, [session, onExit]);
-  // live mirror of overlay input text: refs commit synchronously, so the
-  // RETURN handler never reads a stale value mid-typing
-  const liveInput = useRef("");
-  // keymap from layered config; theme overrides land on the shared tokens
-  const keysRef = useRef(DEFAULT_KEYS);
-  const obsidianRef = useRef<ObsidianConfig | null>(null);
-  const exportersRef = useRef<Map<string, Exporter>>(new Map());
-  useEffect(() => {
-    const cfg = loadConfig({ repoRoot: session?.workspace.repoRoot });
-    keysRef.current = cfg.keys;
-    autoCloseRef.current = cfg.ui.autoClose;
-    Object.assign(T, cfg.theme);
-    obsidianRef.current = cfg.integrations.obsidian;
-    // bundled integrations register through the public extension API
-    const registry = new Registry();
-    void registry.load("obsidian", createObsidianExtension(cfg.integrations.obsidian)).then((rec) => {
-      exportersRef.current = rec.exporters;
-    });
-  }, [session?.workspace.repoRoot]);
+  role?: "owner" | "observer" | "collaborator";
+  /**
+   * A collaborator's own SSH fingerprint. On first open of a share it seeds the
+   * name prompt so their notes attribute to a name, not a fingerprint.
+   */
+  selfAuthor?: string;
+  /**
+   * The terminal's background appearance (from an OSC query at startup). The
+   * branded transparent theme darkens its text on a light terminal so it is not
+   * light-on-light. Defaults to dark - the historical assumption.
+   */
+  appearance?: Appearance;
+}
 
-  // ── daemon wiring ───────────────────────────
-  useEffect(() => {
-    let closed = false;
-    void (async () => {
-      try {
-        const client = await DaemonClient.connect({ home, autostart: true });
-        if (closed) return void client.close();
-        clientRef.current = client;
-        client.onEvent((e) => {
-          // another controller/observer changed state: re-fetch
-          if (session && e.sessionId === session.id) void refreshSession(e.sessionId);
-          if (!sessionId) void refreshInbox();
-        });
-        await client.subscribe();
-        if (sessionId) {
-          setSession(await client.sessionGet(sessionId));
-        } else {
-          setInbox(await client.sessionList({ status: "pending" }));
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : String(err));
-      }
-    })();
-    return () => {
-      closed = true;
-      clientRef.current?.close();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [home, sessionId]);
+/** True while the drop-up or one of its dialogs is open and owns the keyboard. */
+function menuChromeOpen(menuDialog: "keybinds" | "settings" | null): boolean {
+  return menuDialog !== null;
+}
 
-  const refreshSession = useCallback(async (id: string) => {
-    const c = clientRef.current;
-    if (c) setSession(await c.sessionGet(id));
-  }, []);
-  const refreshInbox = useCallback(async () => {
-    const c = clientRef.current;
-    if (c) setInbox(await c.sessionList({ status: "pending" }));
-  }, []);
+/** True while a menu or an overlay owns the keyboard instead of the thread view. */
+function keyboardOwnedElsewhere(menuOwnsKeyboard: boolean, overlay: KeyState["overlay"]): boolean {
+  return menuOwnsKeyboard || overlay !== "none";
+}
 
-  // ── derived view model ──────────────────────
-  const working = session ? (session.workingCopy ?? session.artifact.content) : "";
-  const display = useMemo(
-    () => (session ? buildDisplay(session.artifact.content, session.workingCopy) : []),
-    [session],
-  );
-  const marks = useMemo(
-    () => (session ? marksByDisplay(session.annotations, display, focusedAnn) : new Map()),
-    [session, display, focusedAnn],
-  );
-  const resolved = session?.status === "resolved";
-  const isDiff = session?.artifact.type === "diff";
-  const rows = useMemo(() => (session && isDiff ? diffRows(session.artifact.content) : []), [session, isDiff]);
-
-  const apply = useCallback((p: Promise<ReviewSession>) => {
-    p.then(setSession).catch((e: unknown) => setStatus(String(e instanceof Error ? e.message : e)));
-  }, []);
-
-  // ── verbs ───────────────────────────────────
-  const verbCut = useCallback(() => {
-    if (!session || resolved) return;
-    const d = display[cursor];
-    if (!d) return;
-    const c = clientRef.current!;
-    if (d.type === "del") {
-      const line = restoreLine(nextWorkBlock(display, cursor), working.split("\n").length);
-      // restoreBlock returns undefined when the block structure round-trips
-      // to the submitted revision - the working copy is gone
-      const restored = restoreBlock(session.artifact.content, working, d.base!, line);
-      apply(c.sessionSetWorkingCopy(session.id, restored));
-      setStatus("cut restored");
-    } else if (d.work) {
-      apply(c.sessionSetWorkingCopy(session.id, cutBlock(working, d.work)));
-      setStatus("block cut - it serializes into the diff");
-    }
-  }, [session, resolved, display, cursor, working, apply]);
+/** The footer submit fires only for the owner of an unresolved review, never an observer. */
+function canSubmitReview(isOwner: boolean, resolved: boolean, observer: boolean): boolean {
+  return isOwner && !resolved && !observer;
+}
 
-  const verbEdit = useCallback(() => {
-    if (!session || resolved) return;
-    try {
-      const result = editInEditor(working, "plan.md");
-      if (result.changed) {
-        apply(clientRef.current!.sessionSetWorkingCopy(session.id, result.content));
-        setStatus("edits tracked - one diff");
-      } else setStatus("no changes");
-    } catch (err) {
-      setStatus(err instanceof Error ? err.message : String(err));
-    }
-  }, [session, resolved, working, apply]);
-
-  const saveCompose = useCallback(
-    (m: Extract<Mode, { m: "compose" }>, liveText: string) => {
-      if (!session || !liveText.trim()) return setMode({ m: "normal" });
-      let anchor;
-      if (session.artifact.type === "diff") {
-        anchor = { ...diffRowAnchor(rows, m.dispIdx), blockIndex: m.dispIdx };
-      } else {
-        const workBlocks = display.filter((d) => d.work).map((d) => d.work!);
-        const workIdx = display.slice(0, m.dispIdx + 1).filter((d) => d.work).length - 1;
-        anchor = makeAnchor(workBlocks, workIdx, m.start, m.end);
-      }
-      apply(
-        clientRef.current!.sessionAnnotate(session.id, {
-          id: `a_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`,
-          kind: m.kind,
-          anchor,
-          body: liveText.trim(),
-        }),
-      );
-      setMode({ m: "normal" });
-      setStatus(m.kind === "suggestion" ? "suggestion added - the agent applies it" : "comment added");
-    },
-    [session, display, rows, apply],
-  );
+/** The inline-commenting props the diff sheet shares with the thread view, wired once by the app. */
+type DiffSurfaceProps = Pick<
+  DiffContentViewProps,
+  | "session"
+  | "quickActions"
+  | "observer"
+  | "commentsEnabled"
+  | "resolved"
+  | "suspended"
+  | "onComposingChange"
+  | "onObserverBlocked"
+  | "onCursorChange"
+  | "focusedAnnotationId"
+  | "onFocusAnnotation"
+  | "onAnnotate"
+  | "onReply"
+  | "onUpdateAnnotation"
+  | "onExit"
+>;
 
-  const submit = useCallback(
-    (verdict: VerdictKind, summary: string) => {
-      if (!session) return;
-      clientRef.current!
-        .sessionResolve(session.id, verdict, summary)
-        .then((resolved) => {
-          setSession(resolved);
-          setStatus(`review submitted - ${verdict.replace("_", " ")}`);
-          // notes-vault export: guarded by config, default is manual (no-op)
-          const obsidian = obsidianRef.current;
-          const exporter = exportersRef.current.get("obsidian");
-          if (obsidian && exporter && shouldExport(obsidian.exportOn, verdict)) {
-            void exporter(resolved).then((r) => {
-              setStatus(r.success && r.path ? `exported to ${r.path}` : `export failed: ${r.error ?? "unknown"}`);
-            });
-          }
-          // hand the reviewer back to the agent: prompt or count down per config;
-          // inside herdr with a known return pane, closing is the default
-          const delay = autoCloseRef.current;
-          const returns = returnPaneFor(resolved.artifact.meta.herdrPane) !== undefined;
-          if (delay === 0) finishReview();
-          else if (typeof delay === "number") setCompletion({ phase: "counting", remaining: delay });
-          else if (returns) setCompletion({ phase: "counting", remaining: 3 });
-          else setCompletion({ phase: "prompt" });
-        })
-        .catch((e: unknown) => setStatus(String(e instanceof Error ? e.message : e)));
-      setMode({ m: "normal" });
-    },
-    [session, finishReview],
+/** The Changes tab body: the whole diff in one scroll container, or a bare hint when nothing changed. */
+function ChangesTabBody(props: {
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  theme: Theme;
+}): React.ReactNode {
+  const annotations = props.surface.session.annotations;
+  // a diff thread's Changes view is the artifact itself; any other thread's is the working-tree diff,
+  // whose notes carry a file target and resolve per file - each surface paints only its own notes
+  const forArtifact = props.surface.session.artifact.type === "diff";
+  const marks = useMemo(
+    () =>
+      forArtifact
+        ? marksByRows(
+            annotations.filter((annotation) => annotationTarget(annotation).kind === "artifact"),
+            props.rows,
+            props.surface.focusedAnnotationId,
+          )
+        : fileTargetMarks(annotations, props.rows, props.surface.focusedAnnotationId),
+    [annotations, forArtifact, props.rows, props.surface.focusedAnnotationId],
   );
 
-  useEffect(() => {
-    if (completion.phase !== "counting") return;
-    if (completion.remaining <= 0) return void finishReview();
-    const timer = setTimeout(
-      () => setCompletion((c) => (c.phase === "counting" ? { phase: "counting", remaining: c.remaining - 1 } : c)),
-      1000,
+  if (props.rows.length === 0) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={props.theme.textDim}>No changes</text>
+      </box>
     );
-    return () => clearTimeout(timer);
-  }, [completion, finishReview]);
-
-  // ── keyboard grammar ────────────────────────
-  useKeyboard((key) => {
-    const name = key.name;
-    // compose/submit overlays own the keys via focused inputs; only escape here
-    if (mode.m === "compose" || mode.m === "submit") {
-      if (name === "escape") setMode({ m: "normal" });
-      else if (name === "return" || name === "enter") {
-        if (mode.m === "compose") saveCompose(mode, liveInput.current);
-        else submit(mode.verdict, liveInput.current);
-      } else if (mode.m === "submit" && (name === "left" || name === "right")) {
-        const dir = name === "left" ? -1 : 1;
-        const idx = (VERDICTS.indexOf(mode.verdict) + dir + VERDICTS.length) % VERDICTS.length;
-        setMode({ ...mode, verdict: VERDICTS[idx]! });
-      }
-      return;
-    }
-    if (completion.phase === "prompt" || completion.phase === "counting") {
-      if (name === "return" || name === "enter" || name === "q") return finishReview();
-      if (name === "a" && completion.phase === "prompt") {
-        // opt in: close in 3s from now on, persisted to the user config
-        try {
-          persistAutoClose(3);
-        } catch {
-          // a read-only config dir must not block closing the review
-        }
-        autoCloseRef.current = 3;
-        return setCompletion({ phase: "counting", remaining: 3 });
-      }
-      if (name === "escape") return setCompletion({ phase: "dismissed" });
-      return;
-    }
-    const action = actionFor(keysRef.current, name, !!key.shift);
-    if (action === "quit") return onExit?.(0);
-    if (readOnly && action && MUTATING_ACTIONS.has(action)) return setStatus("observer - read-only");
-
-    // inbox mode
-    if (!session) {
-      if (!inbox?.length) return;
-      if (name === "j" || name === "down") setInboxCursor((c) => Math.min(inbox.length - 1, c + 1));
-      else if (name === "k" || name === "up") setInboxCursor((c) => Math.max(0, c - 1));
-      else if (name === "return" || name === "enter") {
-        const s = inbox[inboxCursor];
-        if (s) setSession(s);
-      }
-      return;
-    }
-
-    if (session.artifact.type === "diff") {
-      if (action === "down") setCursor((c) => Math.min(rows.length - 1, c + 1));
-      else if (action === "up") setCursor((c) => Math.max(0, c - 1));
-      else if (action === "top") setCursor(0);
-      else if (action === "bottom") setCursor(rows.length - 1);
-      else if (action === "comment") {
-        if (resolved) return setStatus("review submitted - read-only");
-        const row = rows[cursor];
-        if (!row || row.t === "file" || row.t === "hunk") return setStatus("move to a code line to comment");
-        liveInput.current = "";
-        setMode({ m: "compose", kind: "comment", dispIdx: cursor, start: 0, end: row.text.length, text: "" });
-      } else if (action === "next_annotation" || action === "prev_annotation") {
-        const anns = session.annotations;
-        if (!anns.length) return setStatus("no annotations");
-        const idx = anns.findIndex((a) => a.id === focusedAnn);
-        const next = idx === -1 ? 0 : (idx + (action === "next_annotation" ? 1 : -1) + anns.length) % anns.length;
-        setFocusedAnn(anns[next]!.id);
-      } else if (action === "delete_annotation") {
-        if (resolved || !focusedAnn) return;
-        apply(clientRef.current!.sessionRemoveAnnotation(session.id, focusedAnn));
-        setFocusedAnn(undefined);
-      } else if (action === "submit") {
-        if (!resolved) {
-          liveInput.current = "";
-          setMode({ m: "submit", verdict: defaultVerdict(session), summary: "" });
-        }
-      } else if (action === "span" || action === "cut" || action === "edit" || action === "suggest") {
-        setStatus("plan-only verb - diff review uses c on a line");
-      }
-      return;
-    }
-
-    const vis = display;
-    if (mode.m === "span") {
-      if (name === "escape") return setMode({ m: "normal" });
-      if (["l", "h", "w", "b", "$", "0"].includes(name)) {
-        return setMode({ m: "span", span: spanKey(mode.span, name, displayText(vis[mode.span.dispIdx]!)) });
-      }
-      if (name === "c" || name === "s") {
-        if (readOnly) return setStatus("observer - read-only");
-        liveInput.current = "";
-        return setMode({
-          m: "compose",
-          kind: name === "s" ? "suggestion" : "comment",
-          dispIdx: mode.span.dispIdx,
-          start: mode.span.start,
-          end: mode.span.end,
-          text: "",
-        });
-      }
-      return;
-    }
-
-    // normal mode
-    if (action === "down") setCursor((c) => Math.min(vis.length - 1, c + 1));
-    else if (action === "up") setCursor((c) => Math.max(0, c - 1));
-    else if (action === "top") setCursor(0);
-    else if (action === "bottom") setCursor(vis.length - 1);
-    else if (action === "span") {
-      const d = vis[cursor];
-      if (d?.work) {
-        const span = startSpan(cursor, displayText(d));
-        if (span) setMode({ m: "span", span });
-      }
-    } else if (action === "comment" || action === "suggest") {
-      if (resolved) return setStatus("review submitted - read-only");
-      const d = vis[cursor];
-      if (!d?.work) return setStatus("text is cut - restore it first");
-      liveInput.current = "";
-      setMode({
-        m: "compose",
-        kind: action === "suggest" ? "suggestion" : "comment",
-        dispIdx: cursor,
-        start: 0,
-        end: displayText(d).length,
-        text: "",
-      });
-    } else if (action === "cut") {
-      if (resolved) return setStatus("review submitted - read-only");
-      verbCut();
-    } else if (action === "edit") {
-      if (resolved) return setStatus("review submitted - read-only");
-      verbEdit();
-    } else if (action === "next_annotation" || action === "prev_annotation") {
-      const anns = session.annotations;
-      if (!anns.length) return setStatus("no annotations");
-      const idx = anns.findIndex((a) => a.id === focusedAnn);
-      const next = idx === -1 ? 0 : (idx + (action === "next_annotation" ? 1 : -1) + anns.length) % anns.length;
-      setFocusedAnn(anns[next]!.id);
-    } else if (action === "delete_annotation") {
-      if (resolved || !focusedAnn) return;
-      apply(clientRef.current!.sessionRemoveAnnotation(session.id, focusedAnn));
-      setFocusedAnn(undefined);
-      setStatus("annotation deleted");
-    } else if (action === "submit") {
-      if (!resolved) {
-        liveInput.current = "";
-        setMode({ m: "submit", verdict: defaultVerdict(session), summary: "" });
-      }
-    }
-  });
+  }
 
-  // ── render ──────────────────────────────────
-  if (error) return <text fg={T.red}>cueloop: {error}</text>;
-  if (!session && !inbox) return <text fg={T.textDim}>connecting to the daemon…</text>;
-  if (!session && inbox) return <Inbox inbox={inbox} cursor={inboxCursor} />;
+  return (
+    <DiffContentView
+      rows={props.rows}
+      marks={marks}
+      {...props.surface}
+      rejectedRows={props.rejectedRows}
+      fold={props.fold}
+      fileStats={props.fileStats}
+      split={props.split}
+      theme={props.dimmed ? dimmedTheme(props.theme) : undefined}
+    />
+  );
+}
 
-  const s = session!;
-  const pendingCount = s.annotations.length + (s.workingCopy !== undefined ? 1 : 0);
+/** An editor tab's body: the whole diff for the Changes tab, a file's diff or contents for a file tab. */
+function GridTabContent(props: {
+  tab: EditorTab;
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  readFile: (path: string) => Promise<string | null>;
+  /** Persist a comment on a project file; the file view built the anchor against its own lines. */
+  onAddFileComment: (path: string, anchor: Anchor, body: string) => void;
+  theme: Theme;
+}): React.ReactNode {
+  const { tab } = props;
+  if (tab.kind === "file" && tab.fileView === "contents" && tab.path !== undefined) {
+    const filePath = tab.path;
 
-  if ((completion.phase === "prompt" || completion.phase === "counting") && s.verdict) {
     return (
-      <CompletionOverlay
-        verdict={s.verdict.kind}
-        completion={completion}
-        status={status}
-        returnsTo={returnPaneFor(s.artifact.meta.herdrPane) ? (s.artifact.meta.agent ?? "the agent") : undefined}
+      <AnnotatableFileView
+        path={filePath}
+        loadContents={props.readFile}
+        session={props.surface.session}
+        quickActions={props.surface.quickActions}
+        observer={props.surface.observer}
+        resolved={props.surface.resolved}
+        suspended={props.surface.suspended}
+        focusedAnnotationId={props.surface.focusedAnnotationId}
+        onFocusAnnotation={props.surface.onFocusAnnotation}
+        onComposingChange={props.surface.onComposingChange}
+        onCursorChange={props.surface.onCursorChange}
+        onObserverBlocked={props.surface.onObserverBlocked}
+        onAddComment={(anchor, body) => props.onAddFileComment(filePath, anchor, body)}
+        onReply={props.surface.onReply}
+        onUpdateAnnotation={props.surface.onUpdateAnnotation}
+        onExit={props.surface.onExit}
+        theme={props.theme}
       />
     );
   }
-
-  return (
-    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: T.bg }}>
-      <box style={{ height: 1, backgroundColor: T.panel, paddingLeft: 1, flexDirection: "row" }}>
-        <text fg={T.text}>
-          <span fg={T.accent}>cueloop</span>
-          <span fg={T.textDim}> · {s.artifact.meta.title ?? s.artifact.meta.planPath ?? s.id} · rev {s.revisions.length}</span>
-          {resolved ? <span fg={T.green}> · resolved: {s.verdict!.kind.replace("_", " ")}</span> : null}
-          {readOnly ? <span fg={T.textDim}> · observer</span> : null}
-          {status ? <span fg={T.accent}> · {status}</span> : null}
-        </text>
-      </box>
-      <box style={{ flexGrow: 1, flexDirection: "row" }}>
-        {isDiff ? (
-          <DiffPane rows={rows} cursor={cursor} annotations={s.annotations} focusedAnn={focusedAnn} />
-        ) : (
-          <PlanPane display={display} marks={marks} cursor={cursor} mode={mode} />
-        )}
-        <Rail session={s} focusedAnn={focusedAnn} pendingCount={pendingCount} />
-      </box>
-      {mode.m === "compose" ? (
-        <ComposeBar mode={mode} quote={isDiff ? (rows[mode.dispIdx]?.text ?? "") : displayText(display[mode.dispIdx]!).slice(mode.start, mode.end)} onChange={(text) => { liveInput.current = text; setMode({ ...mode, text }); }} />
-      ) : mode.m === "submit" ? (
-        <SubmitBar mode={mode} pendingCount={pendingCount} onChange={(summary) => { liveInput.current = summary; setMode({ ...mode, summary }); }} />
-      ) : (
-        <box style={{ height: 1, backgroundColor: T.panel, paddingLeft: 1 }}>
-          <text fg={T.textDim}>
-            {readOnly
-              ? "observer - read-only · j/k move · n/p annotations · q quit"
-              : mode.m === "span"
-                ? "span · l/h grow/shrink · w/b slide · $ end · c comment · s suggest · esc"
-                : "j/k move · v span · c comment · s suggest · x cut · e edit · n/p annotations · ⏎ submit · q quit"}
-          </text>
-        </box>
-      )}
-    </box>
+  if (tab.kind !== "file") {
+    return (
+      <ChangesTabBody
+        rows={props.rows}
+        surface={props.surface}
+        rejectedRows={props.rejectedRows}
+        fold={props.fold}
+        fileStats={props.fileStats}
+        split={props.split}
+        dimmed={props.dimmed}
+        theme={props.theme}
+      />
+    );
+  }
+  // a single-file tab shows that file's rows alone, so its row indices are its own: comments and
+  // the caret report back in whole-diff indices, and the fold controls (a band to fold) do not apply
+  const fileRowIndices = props.rows.flatMap((row, index) => (row.file === tab.path ? [index] : []));
+  const rows = fileRowIndices.map((index) => props.rows[index]!);
+  const wholeIndex = (rowIndex: number): number => fileRowIndices[rowIndex] ?? rowIndex;
+  const rejectedRows = new Set(
+    fileRowIndices.flatMap((index, rowIndex) => (props.rejectedRows.has(index) ? [rowIndex] : [])),
   );
-}
 
-// ── panes ─────────────────────────────────────
-
-function PlanPane({
-  display,
-  marks,
-  cursor,
-  mode,
-}: {
-  display: DisplayBlock[];
-  marks: Map<number, { start: number; end: number; role: StyleRun["role"]; annotationId?: string }[]>;
-  cursor: number;
-  mode: Mode;
-}): React.ReactNode {
-  const width = 76;
   return (
-    <scrollbox style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }} focused={false}>
-      {display.map((d, i) => {
-        const isCursor = i === cursor;
-        const gap = topGap(display[i - 1], d);
-        if (d.kind === "code") {
-          return (
-            <CodeBlock
-              key={i}
-              block={d}
-              isCursor={isCursor}
-              gap={gap}
-              annotated={(marks.get(i) ?? []).length > 0}
-            />
-          );
-        }
-        const blockMarks = [...(marks.get(i) ?? [])];
-        if (mode.m === "span" && mode.span.dispIdx === i) {
-          blockMarks.push({ start: mode.span.start, end: mode.span.end, role: "kspan" });
-        }
-        const runs = overlayMarks(blockRuns(d, true), blockMarks);
-        const lines = wrapRuns(runs, width - marker(d).length);
-        return (
-          <box key={i} style={{ flexDirection: "column", marginTop: gap }}>
-            {lines.map((line, li) => (
-              <text key={li} bg={isCursor ? T.cursorBg : undefined}>
-                <span fg={isCursor ? T.accent : T.textDim}>{li === 0 ? cursorGlyph(isCursor) : "  "}</span>
-                <span fg={T.textDim}>{li === 0 ? marker(d) : " ".repeat(marker(d).length)}</span>
-                {line.map((r, ri) => (
-                  <span key={ri} {...runStyle(r, d)}>
-                    {r.text}
-                  </span>
-                ))}
-                {li === 0 && d.type !== "same" ? <span fg={tagColor(d)}> [{tagLabel(d)}]</span> : null}
-              </text>
-            ))}
-          </box>
-        );
-      })}
-    </scrollbox>
+    <ChangesTabBody
+      rows={rows}
+      surface={{
+        ...props.surface,
+        onCursorChange: (rowIndex) => props.surface.onCursorChange?.(wholeIndex(rowIndex)),
+        onAnnotate: (span, body) =>
+          props.surface.onAnnotate(
+            {
+              start: { blockIndex: wholeIndex(span.start.blockIndex), char: span.start.char },
+              end: { blockIndex: wholeIndex(span.end.blockIndex), char: span.end.char },
+            },
+            body,
+          ),
+      }}
+      rejectedRows={rejectedRows}
+      fileStats={props.fileStats}
+      split={props.split}
+      dimmed={props.dimmed}
+      theme={props.theme}
+    />
   );
 }
 
-function CodeBlock({
-  block,
-  isCursor,
-  gap,
-  annotated,
-}: {
-  block: DisplayBlock;
-  isCursor: boolean;
-  gap: number;
-  annotated: boolean;
+/** The Project pane body: the resolved repo's changed files in changes mode, its full tree otherwise. */
+function ProjectPanelBody(props: {
+  mode: ProjectPanelMode;
+  loadChanges: () => Promise<readonly DiffFileContents[]>;
+  loadProjectFiles: () => Promise<string[]>;
+  reloadKey: string;
+  onOpenChangedFile: (path: string) => void;
+  onOpenProjectFile: (path: string) => void;
+  commentCounts?: ReadonlyMap<string, number>;
+  theme: Theme;
 }): React.ReactNode {
-  const lang = (block.work ?? block.base)?.lang;
-  const content = displayText(block);
-  // Shiki tokens arrive async; plain verbatim lines render until then
-  const [tokens, setTokens] = useState<CodeToken[][] | null>(null);
+  const [changes, setChanges] = useState<readonly DiffFileContents[]>([]);
+  const loadRef = useRef(props.loadChanges);
   useEffect(() => {
-    let live = true;
-    void highlightCode(content, lang).then((t) => {
-      if (live && t) setTokens(t);
-    });
+    loadRef.current = props.loadChanges;
+  });
+  useEffect(() => {
+    let alive = true;
+
+    void loadRef.current().then(
+      (files) => {
+        if (alive) setChanges(files);
+      },
+      () => {
+        if (alive) setChanges([]);
+      },
+    );
+
     return () => {
-      live = false;
+      alive = false;
     };
-  }, [content, lang]);
-  const lines: CodeToken[][] = tokens ?? content.split("\n").map((l) => [{ content: l }]);
+  }, [props.reloadKey, props.mode]);
+
+  if (props.mode === "changes") {
+    return (
+      <ChangesFileTree
+        files={changes}
+        onSelectFile={props.onOpenChangedFile}
+        commentCounts={props.commentCounts}
+        theme={props.theme}
+      />
+    );
+  }
   return (
-    <box style={{ flexDirection: "column", marginTop: gap }}>
-      <text>
-        <span fg={isCursor ? T.accent : T.textDim}>{cursorGlyph(isCursor)}</span>
-        <span fg={T.textDim}>{lang ?? "code"}</span>
-        {annotated ? <span fg={T.accent}> ◆</span> : null}
-        {block.type !== "same" ? <span fg={tagColor(block)}> [{tagLabel(block)}]</span> : null}
-      </text>
-      <box
-        style={{
-          flexDirection: "column",
-          backgroundColor: T.elevated,
-          paddingLeft: 2,
-          paddingRight: 2,
-          paddingTop: 1,
-          paddingBottom: 1,
-          marginLeft: 2,
-        }}
-      >
-        {lines.map((line, li) => (
-          <text key={li}>
-            {line.length === 0 || (line.length === 1 && line[0]!.content === "") ? (
-              " "
-            ) : (
-              line.map((tok, ti) => (
-                <span key={ti} fg={tok.color ?? T.textMuted}>
-                  {tok.content}
-                </span>
-              ))
-            )}
-          </text>
-        ))}
-      </box>
-    </box>
+    <ProjectTreeView
+      key={props.reloadKey}
+      loadFiles={props.loadProjectFiles}
+      onSelectFile={props.onOpenProjectFile}
+      theme={props.theme}
+    />
   );
 }
 
-/** Vertical rhythm: gaps live ABOVE blocks so boundaries never collapse. */
-function topGap(prev: DisplayBlock | undefined, cur: DisplayBlock): number {
-  if (!prev) return 0;
-  const tightPair =
-    (cur.kind === "li" && prev.kind === "li") || (cur.kind === "oli" && prev.kind === "oli");
-  return tightPair ? 0 : 1;
+/** The render tree has left the connecting screen: an error, a session, or the no-thread shell. */
+function usableScreenReached(
+  error: string | null,
+  session: Thread | null,
+  inbox: Thread[] | null,
+): boolean {
+  return Boolean(error) || session !== null || inbox !== null;
 }
 
-function Rail({
-  session,
-  focusedAnn,
-  pendingCount,
-}: {
-  session: ReviewSession;
-  focusedAnn?: string;
-  pendingCount: number;
-}): React.ReactNode {
-  return (
-    <box style={{ width: 34, backgroundColor: T.panel, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
-      <text fg={T.textDim}>REVIEW ({pendingCount})</text>
-      <text fg={T.textDim}>{session.workingCopy !== undefined ? "± plan edits → one diff" : "  no direct edits"}</text>
-      <text> </text>
-      {session.annotations.length === 0 ? (
-        <text fg={T.textDim}>no annotations yet</text>
-      ) : (
-        session.annotations.map((a) => <AnnCard key={a.id} a={a} focused={a.id === focusedAnn} />)
-      )}
-      <box style={{ flexGrow: 1 }} />
-      <text fg={session.status === "resolved" ? T.green : T.accent}>
-        {session.status === "resolved" ? `resolved: ${session.verdict!.kind.replace("_", " ")}` : `Submit review (${pendingCount}) ⏎`}
-      </text>
-    </box>
-  );
-}
+/** The keybinds dialog content: the thread grammar while the thread view owns the keys. */
+function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): CheatsheetSection[] {
+  const base = keyBindings.cheatsheet();
 
-function AnnCard({ a, focused }: { a: Annotation; focused: boolean }): React.ReactNode {
-  const color = a.kind === "suggestion" ? T.green : T.accent;
-  return (
-    <box style={{ flexDirection: "column", marginBottom: 1 }}>
-      <text fg={focused ? T.text : color}>
-        {focused ? "▸ " : "  "}
-        {a.kind.toUpperCase()}
-      </text>
-      <text fg={T.textDim}>  “{truncate(a.anchor.quote, 26)}”</text>
-      <text fg={T.textMuted}>  {truncate(a.body, 28)}</text>
-    </box>
-  );
+  if (!threadViewActive) {
+    return base;
+  }
+
+  return [
+    ...THREAD_VIEW_CHEATSHEET,
+    { title: "Session", entries: [...THREAD_CHORD_ENTRIES] },
+    { title: "Diff", entries: [...DIFF_CHORD_ENTRIES] },
+    { title: "Rail", entries: [...RAIL_CHORD_ENTRIES] },
+    { title: "Tree", entries: [...TREE_CHORD_ENTRIES] },
+    ...base.filter((section) => section.title === "Agent terminal"),
+  ];
 }
 
-function Inbox({ inbox, cursor }: { inbox: ReviewSession[]; cursor: number }): React.ReactNode {
-  return (
-    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: T.bg, padding: 1 }}>
-      <text fg={T.accent}>cueloop · inbox ({inbox.length} pending)</text>
-      <text> </text>
-      {inbox.length === 0 ? (
-        <text fg={T.textDim}>nothing waiting for review</text>
-      ) : (
-        inbox.map((s, i) => (
-          <text key={s.id} fg={i === cursor ? T.text : T.textMuted} bg={i === cursor ? T.cursorBg : undefined}>
-            {i === cursor ? "▸ " : "  "}
-            {s.artifact.meta.title ?? s.id} · {s.workspace.branch} · {s.artifact.type}
-          </text>
-        ))
-      )}
-      <box style={{ flexGrow: 1 }} />
-      <text fg={T.textDim}>j/k move · ⏎ open · q quit</text>
-    </box>
+export function App({
+  home,
+  sessionId,
+  cwd,
+  readOnly = false,
+  onExit,
+  onReady,
+  clock,
+  openClient,
+  shareTransport,
+  role = "owner",
+  selfAuthor,
+  appearance = "dark",
+}: AppProps): React.ReactNode {
+  const { observer, isOwner } = computeRoleCapabilities(readOnly, role);
+  const controller = useMemo(
+    () =>
+      createReviewController({
+        home,
+        sessionId,
+        cwd,
+        readOnly: observer,
+        onExit,
+        clock,
+        openClient,
+        shareTransport,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [home, sessionId],
   );
-}
 
-function ComposeBar({
-  mode,
-  quote,
-  onChange,
-}: {
-  mode: Extract<Mode, { m: "compose" }>;
-  quote: string;
-  onChange: (text: string) => void;
-}): React.ReactNode {
-  return (
-    <box style={{ height: 2, backgroundColor: T.elevated, flexDirection: "column", paddingLeft: 1 }}>
-      <text fg={mode.kind === "suggestion" ? T.green : T.accent}>
-        {mode.kind === "suggestion" ? "SUGGEST REPLACEMENT FOR" : "COMMENT ON"} “{truncate(quote, 60)}” · ⏎ save · esc cancel
-      </text>
-      <input focused value={mode.text} onInput={onChange} />
-    </box>
+  useEffect(() => {
+    controller.connect();
+
+    return () => controller.close();
+  }, [controller]);
+  // stable across renders so the memoized PrototypeContentView is not
+  // re-rendered by unrelated App state (status ticks, a rail-width drag)
+  const onCommentPrototype = useCallback(
+    (element: PrototypeElement, body: string) =>
+      controller.annotatePrototype(element.selector, element.quote, body),
+    [controller],
   );
-}
+  const { session, inbox, status, toast, error, completion, editOrphanCount, walk } =
+    useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
 
-function SubmitBar({
-  mode,
-  pendingCount,
-  onChange,
-}: {
-  mode: Extract<Mode, { m: "submit" }>;
-  pendingCount: number;
-  onChange: (summary: string) => void;
-}): React.ReactNode {
-  return (
-    <box style={{ height: 2, backgroundColor: T.elevated, flexDirection: "column", paddingLeft: 1 }}>
-      <text>
-        <span fg={T.textDim}>verdict ←/→ : </span>
-        {VERDICTS.map((v, i) => (
-          <span key={v} fg={v === mode.verdict ? verdictColor(v) : T.textDim}>
-            {v === mode.verdict ? `[${VERDICT_LABEL[v]}]` : ` ${VERDICT_LABEL[v]} `}
-            {i < VERDICTS.length - 1 ? " " : ""}
-          </span>
-        ))}
-        <span fg={T.textDim}> · Submit review ({pendingCount}) on ⏎ · esc cancel</span>
-      </text>
-      <input focused value={mode.summary} onInput={onChange} placeholder="summary for the agent (optional)" />
-    </box>
+  // A shared plan you own polls for collaborator notes while it is open; the
+  // merge refreshes through the normal event path. Stops on leave.
+  useEffect(() => {
+    if (!isOwner || !session?.shareId) return;
+
+    return controller.startShareSync();
+  }, [isOwner, session?.id, session?.shareId, controller]);
+  const renderer = useRenderer();
+  const { width: terminalWidth } = useTerminalDimensions();
+
+  // ── view state ──────────────────────────────
+  const [cursor, setCursor] = useState(0);
+  const [inboxCursor, setInboxCursor] = useState(0);
+  // Projects and Threads grouping; ordered is the flat sequence the inbox cursor walks
+  // pinned threads are client-local view state, seeded from the user config and
+  // persisted on toggle; a pin lifts the thread into the sidebar's Pinned section
+  const [pinnedIds, setPinnedIds] = useState<Set<string>>(new Set());
+  const grouped = useMemo(() => groupInbox(inbox ?? [], pinnedIds), [inbox, pinnedIds]);
+  const togglePin = (id: string): void =>
+    setPinnedIds((current) => {
+      const next = new Set(current);
+
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      persistPins([...next]);
+
+      return next;
+    });
+  // the left Projects and Threads column; collapsed by default per the context
+  // matrix (the thread owns the width), toggled open to jump between threads
+  // one sidebar-open state across the no-thread shell and the thread view, so
+  // picking a thread keeps the sidebar as it was. It opens when the app lands with
+  // nothing selected (pick a thread) and stays collapsed on a direct thread open,
+  // where the thread owns the width.
+  const [sidebarOpen, setSidebarOpen] = useState(sessionId === undefined);
+  // the Changes + Project right region and its editor grid (tabs, splits, zoom)
+  const workbench = useChangesWorkbench();
+  const [mode, setMode] = useState<Mode>({ type: "normal" });
+  // the top-left settings gear drop-down and the centered dialog it opens
+  const [menuDialog, setMenuDialog] = useState<"keybinds" | "settings" | null>(null);
+  const [autoClose, setAutoClose] = useState<AutoClose>("off");
+  // unified or side-by-side diff; split only lays out when the Changes pane is zoomed
+  const [diffView, setDiffView] = useState<DiffViewMode>("split");
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
+  const [selectedCurationId, setSelectedCurationId] = useState<string | undefined>(undefined);
+  const [railTab, setRailTab] = useState<RailTab>("review");
+  // the tree row the reviewer stands on in the session tree
+  const [selectedEntryId, setSelectedEntryId] = useState<string | undefined>(undefined);
+  // ~2s focus pulse on the document highlight when a card is activated
+  const [pulsedAnnotationId, setPulsedAnnotationId] = useState<string | null>(null);
+  const pulseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // live mirror of overlay input text: refs commit synchronously, so the
+  // RETURN handler never reads a stale value mid-typing
+  const liveInput = useRef("");
+  // keymap from layered config; the loaded theme swaps the provider value
+  const keysRef = useRef(DEFAULT_KEYS);
+  const keyBindings = useMemo(() => new KeyBindings(DEFAULT_KEYS), []);
+  const [theme, setTheme] = useState(() => themeForName(DEFAULT_THEME_NAME, appearance));
+  const [themeName, setThemeName] = useState<ThemeName>(DEFAULT_THEME_NAME);
+  const [themeOverrides, setThemeOverrides] = useState<Partial<Theme>>({});
+  const [authorNames, setAuthorNames] = useState<Record<string, string>>({});
+  const [quickActions, setQuickActions] = useState<QuickAction[]>(DEFAULT_QUICK_ACTIONS);
+  const [skills, setSkills] = useState<SlashItem[]>([]);
+  // opt-in: render a prototype as a kitty pixel mockup instead of the markdown doc
+  const [prototypePixels, setPrototypePixels] = useState(false);
+
+  useEffect(() => {
+    const config = loadConfig({ repoRoot: session?.workspace.repoRoot });
+
+    setPrototypePixels(config.experimental.prototypePixels);
+    keysRef.current = config.keys;
+    keyBindings.setKeys(config.keys);
+    setTheme(composeTheme(config.ui.theme, config.themeOverrides, appearance));
+    setThemeName(config.ui.theme);
+    setThemeOverrides(config.themeOverrides);
+    setAuthorNames(config.authors);
+    setQuickActions(config.actions);
+    setSkills(loadSkills(config.skillsPath));
+    setAutoClose(config.ui.autoClose);
+    setDiffView(config.ui.diffView);
+    setPinnedIds(new Set(config.ui.pins));
+    controller.applyConfig(config);
+  }, [session?.workspace.repoRoot, controller, keyBindings, appearance]);
+  useEffect(
+    () => () => {
+      if (pulseTimer.current) clearTimeout(pulseTimer.current);
+    },
+    [],
   );
-}
 
-function DiffPane({
-  rows,
-  cursor,
-  annotations,
-  focusedAnn,
-}: {
-  rows: DiffRow[];
-  cursor: number;
-  annotations: Annotation[];
-  focusedAnn?: string;
-}): React.ReactNode {
-  // simple windowing: keep the cursor in view without a scroll dependency
-  const windowStart = Math.max(0, cursor - 12);
-  const visible = rows.slice(windowStart, windowStart + 200);
-  const annotated = new Map<number, Annotation>();
-  for (const a of annotations) {
-    const idx = rows.findIndex((r) => r.text === a.anchor.quote && (r.t === "ctx" || r.t === "add" || r.t === "del"));
-    if (idx !== -1) annotated.set(idx, a);
-  }
-  return (
-    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
-      {visible.map((row, vi) => {
-        const i = windowStart + vi;
-        const isCursor = i === cursor;
-        const ann = annotated.get(i);
-        const gutter = row.t === "del" ? (row.oldLine?.toString() ?? "") : (row.newLine?.toString() ?? "");
-        const sign = row.t === "add" ? "+" : row.t === "del" ? "-" : " ";
-        if (row.t === "file") {
-          return (
-            <text key={i} fg={T.text} bg={isCursor ? T.cursorBg : T.panel}>
-              {isCursor ? "▎" : " "}■ {row.text}
-            </text>
-          );
-        }
-        if (row.t === "hunk") {
-          return (
-            <text key={i} fg={T.blue} bg={isCursor ? T.cursorBg : undefined}>
-              {isCursor ? "▎" : " "}{row.text}
-            </text>
-          );
-        }
-        const fg = row.t === "add" ? T.insFg : row.t === "del" ? T.delFg : T.textMuted;
-        return (
-          <box key={i} style={{ flexDirection: "column" }}>
-            <text bg={isCursor ? T.cursorBg : ann ? T.markCommentBg : undefined}>
-              <span fg={T.textDim}>{isCursor ? "▎" : " "}{gutter.padStart(4)} </span>
-              <span fg={fg}>{sign}{row.text}</span>
-            </text>
-            {ann ? (
-              <text>
-                <span fg={T.textDim}>{"      "}</span>
-                <span fg={ann.id === focusedAnn ? T.text : T.accent}>◆ {truncate(ann.body, 70)}</span>
-              </text>
-            ) : null}
-          </box>
-        );
-      })}
-    </box>
+  useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(() => controller.dismissToast(), TOAST_DISMISS_MS);
+
+    return () => clearTimeout(timer);
+  }, [toast, controller]);
+
+  // First open of a share: ask the collaborator for a display name once, unless
+  // a past visit already recorded one. esc skips and their notes read anonymous.
+  const promptedSelfRef = useRef(false);
+
+  useEffect(() => {
+    if (promptedSelfRef.current || role !== "collaborator" || !selfAuthor || !session) return;
+    promptedSelfRef.current = true;
+    const known = session.participants?.find((participant) => participant.id === selfAuthor)?.name;
+
+    if (!known) setMode({ type: "nameSelf", text: "" });
+  }, [role, selfAuthor, session]);
+
+  // ── settings dialog: config-backed model, navigation, persistence ──
+  const {
+    settingsNav,
+    settingsCategories,
+    settingsValues,
+    cycleSetting,
+    handleSettingsKey,
+    onCategorySelect,
+  } = useSettingsDialog({
+    theme,
+    appearance,
+    autoClose,
+    setAutoClose,
+    diffView,
+    setDiffView,
+    themeName,
+    setThemeName,
+    themeOverrides,
+    setTheme,
+    quickActions,
+    setQuickActions,
+    setMenuDialog,
+  });
+
+  // ── derived view model ──────────────────────
+  const display = controller.display();
+  const rows = controller.rows();
+  const rejectedRows = controller.rejectedRows();
+  const marks = useMemo(
+    () =>
+      session
+        ? marksByDisplay(
+            // the plan thread shows only artifact notes; Changes-diff notes render on that surface
+            session.annotations.filter(
+              (annotation) => annotationTarget(annotation).kind === "artifact",
+            ),
+            display,
+            pulsedAnnotationId ?? undefined,
+          )
+        : new Map<number, Mark[]>(),
+    [session, display, pulsedAnnotationId],
   );
-}
+  /** Annotation ids whose anchor resolved against the working copy. */
+  const resolvedIds = useMemo(() => {
+    const ids = new Set<string>();
 
-function CompletionOverlay({
-  verdict,
-  completion,
-  status,
-  returnsTo,
-}: {
-  verdict: VerdictKind;
-  completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
-  /** Latest status line (e.g. the vault-export path) stays visible here. */
-  status: string;
-  /** Where focus goes on close (the agent's herdr pane), when known. */
-  returnsTo?: string;
-}): React.ReactNode {
-  const approved = verdict === "approve";
-  return (
-    <box
-      style={{
-        width: "100%",
-        height: "100%",
-        backgroundColor: T.bg,
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <text fg={approved ? T.green : T.accent}>{approved ? "✓ review approved" : "✎ feedback sent"}</text>
-      <text> </text>
-      <text fg={T.text}>The agent has your {approved ? "approval" : "feedback"} and is unblocked.</text>
-      {status ? <text fg={T.textDim}>{status}</text> : null}
-      <text> </text>
-      {completion.phase === "counting" ? (
-        <text fg={T.textDim}>
-          closing in {completion.remaining}s{returnsTo ? ` - returning to ${returnsTo}` : ""} · ⏎ now · esc stay
-        </text>
-      ) : (
-        <text fg={T.textDim}>⏎ close · a always close after submit (3s) · esc stay</text>
-      )}
-    </box>
+    for (const blockMarks of marks.values()) {
+      for (const mark of blockMarks) if (mark.annotationId) ids.add(mark.annotationId);
+    }
+
+    return ids;
+  }, [marks]);
+  const { isDiff, isPrototype, resolved } = deriveReviewFlags(session);
+  // a prototype is a markdown design doc by default; only the opt-in experimental
+  // pixel mode (flag on + an HTML entry) renders it as a kitty mockup instead
+  const isPixelPrototype = isPixelPrototypeMode(
+    isPrototype,
+    prototypePixels,
+    session?.artifact.meta.prototypePath,
   );
-}
+  // comments per changed-file path, for the changed-files tree and tab badges
+  const diffCommentCounts = useMemo(
+    () => (session && isDiff ? commentCountsByFile(session, rows) : undefined),
+    [session, isDiff, rows],
+  );
+  // entering a diff opens the right region in changed-files mode; a plan or reply opens it closed
+  workbench.syncSession(session?.id, isDiff);
+  // plans, replies, and the default (markdown) prototype open in the thread view, diffs in the
+  // diff sheet: both drive the shared annotation surface; only the pixel prototype keeps the keymap
+  const threadViewActive = session !== null && !isPixelPrototype;
+  const [threadComposing, setThreadComposing] = useState(false);
+  const [prototypeComposing, setPrototypeComposing] = useState(false);
+  const [welcomeComposing, setWelcomeComposing] = useState(false);
+  // sort position per annotation so the rail interleaves annotation and removal
+  // cards in one line-ordered stack: a diff row carries its blockIndex; a plan
+  // annotation resolves to the display index it marked
+  // ── the guided walk's view model ────────────
+  const walkFileList = controller.files();
+  const walking = isWalking(isDiff, walk);
+  const viewedPaths = useMemo(() => new Set(session?.viewedPaths ?? []), [session]);
 
-// ── small helpers ─────────────────────────────
+  // ── selection symmetry: one selected id, both sides ──
+  const selectCardFromDocument = (annotationId: string): void => {
+    setFocusedAnnotationId(annotationId);
+  };
 
-function marker(d: DisplayBlock): string {
-  if (d.kind === "li") return "- ";
-  if (d.kind === "oli") return `${d.oliNum ?? 1}. `;
-  if (d.kind === "quote") return "▏ ";
-  return "";
-}
+  const openCardEdit = (annotationId: string): void => {
+    if (observer) return controller.setStatus("observer - read-only");
+    const annotation = session?.annotations.find((candidate) => candidate.id === annotationId);
 
-function cursorGlyph(isCursor: boolean): string {
-  return isCursor ? "▎ " : "  ";
-}
+    if (!annotation) return;
+    // a collaborator's note is theirs to word: activating it (click or e) renames
+    // the author rather than editing the body the planner does not own
+    if (annotation.author) {
+      setFocusedAnnotationId(annotationId);
 
-function tagLabel(d: DisplayBlock): string {
-  return d.type === "del" ? "cut" : d.type === "add" ? "new" : "edited";
-}
+      return void setMode({
+        type: "rename",
+        authorId: annotation.author,
+        text: authorNames[annotation.author] ?? "",
+      });
+    }
+    if (resolved) return controller.setStatus("review submitted - read-only");
+    liveInput.current = annotation.body;
+    setMode({ type: "railEdit", id: annotation.id, text: annotation.body });
+  };
 
-function tagColor(d: DisplayBlock): string {
-  return d.type === "del" ? T.red : d.type === "add" ? T.green : T.accent;
-}
+  /** The $EDITOR hand-off releases the terminal: suspend, edit, resume. */
+  const runEditorHandOff = (): void => {
+    renderer?.suspend();
+    try {
+      controller.edit();
+    } finally {
+      renderer?.resume();
+    }
+  };
 
-function verdictColor(v: VerdictKind): string {
-  return v === "approve" ? T.green : v === "request_changes" ? T.red : T.blue;
-}
+  // ── keyboard grammar: build state, reduce, dispatch ──
+  const dispatch = createIntentDispatch({
+    controller,
+    onExit,
+    isDiff,
+    display,
+    rows,
+    cursor,
+    inbox: inbox === null ? null : grouped.ordered,
+    inboxCursor,
+    mode,
+    session,
+    focusedAnnotationId,
+    selectedCurationId,
+    railTab,
+    selectedEntryId,
+    authorNames,
+    quickActions,
+    renameAuthor: (id: string, name: string) => {
+      persistAuthorName(id, name);
+      setAuthorNames((prev) => ({ ...prev, [id]: name }));
+    },
+    renameThread: (id: string, title: string) => controller.renameSession(id, title),
+    liveInput,
+    setCursor,
+    setInboxCursor,
+    setMode,
+    setRailTab,
+    setSelectedEntryId,
+    setFocusedAnnotationId,
+    setSelectedCurationId,
+    setPulsedAnnotationId,
+    selectCardFromDocument,
+    runEditorHandOff,
+    openCardEdit,
+    toggleDiffView: () => {
+      const next: DiffViewMode = diffView === "stacked" ? "split" : "stacked";
 
-function defaultVerdict(s: ReviewSession): VerdictKind {
-  return s.annotations.length || s.workingCopy !== undefined ? "request_changes" : "approve";
-}
+      setDiffView(next);
+      persistDiffView(next);
+      // every toggle names the new mode; picking split on a narrow pane also says it needs the wide layout
+      if (next === "stacked") controller.setStatus("stacked diff");
+      else if (workbench.zoomed) controller.setStatus("split diff");
+      else controller.setStatus("split diff shows when zoomed");
+    },
+  });
 
-function runStyle(r: StyleRun, d: DisplayBlock): { fg?: string; bg?: string; attributes?: number } {
-  const headingFg = d.kind === "h1" ? T.text : d.kind === "h2" || d.kind === "h3" ? T.accent : undefined;
-  const struck = d.type === "del";
-  switch (r.role) {
-    case "ins":
-      return { fg: T.insFg };
-    case "del":
-      return { fg: T.delFg };
-    case "mark-comment":
-      return { fg: T.text, bg: T.markCommentBg };
-    case "mark-suggestion":
-      return { fg: T.text, bg: T.markSuggestionBg };
-    case "mark-focus":
-      return { fg: T.accentInk, bg: T.accent };
-    case "kspan":
-      return { fg: T.accentInk, bg: T.accent };
-    default:
-      return { fg: struck ? T.red : (headingFg ?? (d.kind === "code" ? T.textMuted : T.text)) };
-  }
-}
+  const overlay = resolveOverlay(mode, completion.phase, walking);
+
+  const menuOwnsKeyboard = menuChromeOpen(menuDialog);
+  // an overlay (submit, walk, prompt, confirm) or the menu takes the keyboard
+  // from the thread view; the view suspends its own grammar meanwhile
+  const threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay);
+
+  useKeyboard((key) => {
+    // The thread view owns the document grammar while active (its own
+    // useKeyboard handles marks, comments, and ctrl+q); the session chords
+    // (submit, share, edit, walk, the rail) resolve here, and the keymap only
+    // sees keys while an overlay or the menu owns them.
+    if (threadViewActive && !threadViewSuspended) {
+      const chord = resolveThreadChord(key, {
+        composing: threadComposing,
+        isOwner,
+        resolved,
+        treeActive: railTab === "tree",
+        isDiff,
+      });
+
+      if (chord) dispatch(chord);
+
+      return;
+    }
+    // A compose textarea owns the keyboard while open: let it receive the typed note instead of the
+    // global keymap acting on each letter (the prototype, and the bare-shell welcome playground).
+    if (prototypeComposing || welcomeComposing) return;
+    if (menuDialog === "settings") return void handleSettingsKey(key.name);
+    if (menuDialog) return void (key.name === "escape" && setMenuDialog(null));
+    // the toast is non-modal: escape only dismisses it when nothing else owns
+    // escape, so an open overlay (compose, submit, prompt, walk) still cancels
+    if (toast && key.name === "escape" && overlay === "none" && mode.type !== "span")
+      return controller.dismissToast();
+    const state = buildKeyState({
+      keys: keysRef.current,
+      observer,
+      isOwner,
+      overlay,
+      session,
+      isDiff,
+      mode,
+      resolved,
+      inbox,
+      focusedAnnotationId,
+      walk,
+      walkFileList,
+      rows,
+      cursor,
+      display,
+    });
+
+    keyBindings.setContext({
+      overlay: state.overlay,
+      spanMode: state.spanMode,
+    });
+    const action = keyBindings.resolveAction({
+      name: key.name,
+      shift: !!key.shift,
+    });
+
+    for (const intent of reduceKey(
+      state,
+      { name: key.name, shift: !!key.shift, meta: !!key.meta },
+      action,
+    ))
+      dispatch(intent);
+  });
+
+  // after every keyboard hook above, so their subscriptions precede the signal
+  useReadySignal(usableScreenReached(error, session, inbox), onReady);
+
+  // ── shared bottom chrome: the menu bar and its drop-up dialogs, one render
+  // reused by the inbox and by plan/diff review so the two never drift ──
+  const menuChrome = (
+    <MenuChrome
+      menuDialog={menuDialog}
+      theme={theme}
+      keybindsSections={cheatsheetFor(keyBindings, threadViewActive)}
+      settingsCategories={settingsCategories}
+      settingsValues={settingsValues}
+      settingsNav={settingsNav}
+      onCategorySelect={onCategorySelect}
+      cycleSetting={cycleSetting}
+    />
+  );
+
+  // ── render ──────────────────────────────────
+  if (error) return <ErrorScreen error={error} theme={theme} />;
+  if (!session)
+    return inbox ? (
+      <SlashSkillsContext.Provider value={skills}>
+        <NoThreadShell
+          rows={grouped.rows}
+          inboxCursor={inboxCursor}
+          mode={mode}
+          theme={theme}
+          controller={controller}
+          setMode={setMode}
+          menuChrome={menuChrome}
+          onOpenMenu={() => setMenuDialog("settings")}
+          sidebarOpen={sidebarOpen}
+          onToggleSidebar={() => setSidebarOpen((open) => !open)}
+          pinnedIds={pinnedIds}
+          onPin={togglePin}
+          onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
+          quickActions={quickActions}
+          onWelcomeComposingChange={setWelcomeComposing}
+        />
+      </SlashSkillsContext.Provider>
+    ) : (
+      <ConnectingScreen theme={theme} />
+    );
+
+  const activeSession = session;
+
+  if (isCompletionOverlayPhase(completion) && activeSession.verdict)
+    return (
+      <CompletionScreen
+        theme={theme}
+        session={activeSession}
+        verdict={activeSession.verdict.kind}
+        completion={completion}
+        status={status}
+      />
+    );
+
+  const diffFold: DiffFoldControls = {
+    isCollapsed: (file) => controller.isFileCollapsed(file),
+    isExpanded: (file) => controller.isFileExpanded(file),
+    canExpand: (file) => controller.canExpandFile(file),
+    onToggleCollapse: (file) =>
+      controller.setFileCollapsed(file, !controller.isFileCollapsed(file)),
+    onToggleExpand: (file) => controller.setFileExpanded(file, !controller.isFileExpanded(file)),
+    onCopyPath: (file) => controller.copyFilePath(file),
+  };
+  const submitConfirmState = buildSubmitConfirmState({
+    mode,
+    isDiff,
+    session: activeSession,
+    walkFileList,
+    viewedPaths,
+    liveInput,
+    setMode,
+    dispatch,
+  });
+  const { showOwnerActions, prototypeCanComment, chromeHidden, prototypePath } = buildRenderFlags({
+    session: activeSession,
+    isOwner,
+    isDiff,
+    isPixelPrototype,
+    resolved,
+    menuDialog,
+    resolvedIds,
+  });
+
+  const onEditRequest = (): void => {
+    // A share viewer/observer has no Edit affordance (the button is hidden), so
+    // this is owner-only; stay silent rather than nag if it is ever reached.
+    if (!isOwner) return;
+    if (resolved) return controller.setStatus("review submitted - read-only");
+    runEditorHandOff();
+  };
+
+  // clicking the header Share button: publish the plan, copy the ssh line
+  const onShareRequest = (): void => {
+    if (!isOwner) return controller.setStatus("only the plan owner can share");
+    controller.share();
+  };
+
+  // clicking the rail Submit button: same read-only answer as the submit key
+  const onSubmitRequest = (): void => {
+    if (observer) return controller.setStatus("observer - read-only");
+    if (!isOwner) return controller.setStatus("shared view - your notes save as you go");
+    if (resolved) return;
+    dispatch({ type: "openSubmit" });
+  };
 
-function truncate(s: string, n: number): string {
-  const one = s.replace(/\n/g, " ");
-  return one.length > n ? one.slice(0, n - 1) + "…" : one;
+  return (
+    <SlashSkillsContext.Provider value={skills}>
+      <ThemeProvider theme={theme}>
+        <AppShell
+          sidebarOpen={sidebarOpen}
+          onToggleSidebar={() => setSidebarOpen((open) => !open)}
+          onOpenMenu={() => setMenuDialog("settings")}
+          threadsPanel={
+            <scrollbox style={{ flexGrow: 1 }} focused={false}>
+              <ThreadTree
+                rows={grouped.rows}
+                cursor={inboxCursor}
+                activeId={activeSession.id}
+                pinnedIds={pinnedIds}
+                width={30}
+                onSelect={(id) => controller.open(id)}
+                onPin={togglePin}
+                onRename={(id, title) =>
+                  setMode({ type: "renameThread", sessionId: id, text: title })
+                }
+                theme={theme}
+              />
+            </scrollbox>
+          }
+          threadTitle={threadTitle(activeSession)}
+          threadActions={
+            showOwnerActions ? (
+              <Toolbar>
+                <Button onPress={onEditRequest} theme={theme}>
+                  {" edit "}
+                </Button>
+                <Button onPress={onShareRequest} theme={theme}>
+                  {" share "}
+                </Button>
+              </Toolbar>
+            ) : undefined
+          }
+          threadPanel={
+            <box style={{ flexGrow: 1, flexDirection: "column" }}>
+              <box style={{ flexGrow: 1, flexDirection: "row" }}>
+                {isPixelPrototype ? (
+                  <PrototypePixels
+                    prototypePath={prototypePath}
+                    canComment={prototypeCanComment}
+                    onCommentElement={onCommentPrototype}
+                    onComposingChange={setPrototypeComposing}
+                    hidden={chromeHidden}
+                  />
+                ) : isDiff ? (
+                  <box style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }}>
+                    <text fg={theme.textDim}>review the changes on the right</text>
+                  </box>
+                ) : (
+                  <ThreadView
+                    session={activeSession}
+                    suspended={threadViewSuspended}
+                    editOrphanCount={editOrphanCount}
+                    onComposingChange={setThreadComposing}
+                    resolved={resolved}
+                    onObserverBlocked={(reason) =>
+                      controller.setStatus(
+                        reason === "observer"
+                          ? "observer - read-only"
+                          : "review submitted - read-only",
+                      )
+                    }
+                    onCursorChange={setCursor}
+                    focusedAnnotationId={focusedAnnotationId}
+                    onFocusAnnotation={setFocusedAnnotationId}
+                    display={display}
+                    marks={marks}
+                    quickActions={quickActions}
+                    observer={observer}
+                    onAnnotate={(span, body) =>
+                      void controller.annotate(
+                        "comment",
+                        span.start.blockIndex,
+                        span.start.char,
+                        span.end.char,
+                        body,
+                        span.end.blockIndex,
+                      )
+                    }
+                    onReply={(rootAnnotationId, body) =>
+                      void controller.reply(rootAnnotationId, body)
+                    }
+                    onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
+                    onExit={() => onExit?.(0)}
+                  />
+                )}
+              </box>
+              <ThreadFooter
+                repo={projectName(activeSession.workspace)}
+                branch={activeSession.workspace.branch}
+                onSubmit={onSubmitRequest}
+                canSubmit={canSubmitReview(isOwner, resolved, observer)}
+                theme={theme}
+              />
+            </box>
+          }
+          changesOpen={workbench.changesOpen}
+          projectOpen={workbench.projectOpen}
+          onToggleChanges={workbench.toggleChanges}
+          onToggleProject={workbench.toggleProject}
+          onToggleRight={workbench.toggleRight}
+          projectMode={workbench.projectMode}
+          zoomHideThread={workbench.zoomed}
+          changesPanel={
+            <EditorGrid
+              tree={workbench.grid}
+              focusedGroupId={workbench.activeGroup}
+              commentCounts={diffCommentCounts}
+              onFocusGroup={workbench.focusGroup}
+              onActivateTab={workbench.activate}
+              onCloseTab={workbench.close}
+              onSplit={workbench.split}
+              onZoom={workbench.toggleZoom}
+              zoomed={workbench.zoomed}
+              renderTab={(tab, groupFocused) => (
+                <GridTabContent
+                  tab={tab}
+                  rows={rows}
+                  surface={{
+                    session: activeSession,
+                    quickActions,
+                    observer,
+                    commentsEnabled: true,
+                    resolved,
+                    suspended: threadViewSuspended || !groupFocused,
+                    onComposingChange: setThreadComposing,
+                    onObserverBlocked: (reason) =>
+                      controller.setStatus(
+                        reason === "observer"
+                          ? "observer - read-only"
+                          : "review submitted - read-only",
+                      ),
+                    onCursorChange: setCursor,
+                    focusedAnnotationId,
+                    onFocusAnnotation: setFocusedAnnotationId,
+                    // a diff thread's Changes view is the artifact itself; any other thread's is the
+                    // live working-tree diff, so its notes carry a file target and anchor there
+                    onAnnotate: (span, body) =>
+                      void controller.annotate(
+                        "comment",
+                        span.start.blockIndex,
+                        span.start.char,
+                        span.end.char,
+                        body,
+                        span.end.blockIndex,
+                        isDiff ? { kind: "artifact" } : { kind: "file", path: "", rev: "worktree" },
+                      ),
+                    onReply: (rootAnnotationId, body) =>
+                      void controller.reply(rootAnnotationId, body),
+                    onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
+                    onExit: () => onExit?.(0),
+                  }}
+                  rejectedRows={rejectedRows}
+                  fold={diffFold}
+                  fileStats={controller.fileStats()}
+                  split={diffView === "split" && workbench.zoomed}
+                  dimmed={walking}
+                  readFile={(path) => controller.repoReadFile(path)}
+                  onAddFileComment={(path, anchor, body) =>
+                    void controller.addComment(
+                      anchor,
+                      { kind: "file", path, rev: "worktree" },
+                      body,
+                    )
+                  }
+                  theme={theme}
+                />
+              )}
+              theme={theme}
+            />
+          }
+          projectPanel={
+            <ProjectPanelBody
+              mode={workbench.projectMode}
+              loadChanges={() => controller.repoChanges()}
+              loadProjectFiles={() => controller.repoFiles()}
+              reloadKey={activeSession.id}
+              // the Changes navigator always opens a changed file as a diff - a diff review shows its
+              // captured snapshot, every other thread the live working-tree diff
+              onOpenChangedFile={(path) => workbench.openFile(path, "diff")}
+              onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
+              commentCounts={diffCommentCounts}
+              theme={theme}
+            />
+          }
+          theme={theme}
+        >
+          <TrailingOverlays
+            walking={walking}
+            walk={walk}
+            walkFileList={walkFileList}
+            viewedPaths={viewedPaths}
+            session={activeSession}
+            terminalWidth={terminalWidth}
+            theme={theme}
+            mode={mode}
+            toast={toast}
+            setMode={setMode}
+            dispatch={dispatch}
+          />
+          {submitConfirmState !== null ? (
+            <box
+              style={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: "100%",
+                height: "100%",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <ConfirmCard {...submitConfirmState} theme={theme} />
+            </box>
+          ) : null}
+          {menuChrome}
+        </AppShell>
+      </ThemeProvider>
+    </SlashSkillsContext.Provider>
+  );
 }