@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.13

package/src/App.tsx

@@ -1,9 +1,10 @@
 /**
- * The cueloop TUI (#22, #71): header, plan sheet (sheet header + inline
- * compose + selectable lines) or diff pane, right review rail, footer hint
- * bar. Thin renderer over the review-session controller: daemon IO and the
- * mutation verbs live in session-controller.ts, the keyboard grammar in
- * keymap.ts; local state is view state only (cursor, selection, overlays).
+ * The cueloop TUI (#22, #71, #86): state wiring, keymap dispatch, and layout
+ * composition - nothing else. Rendering lives in components/ (PlanSheet,
+ * DiffSheet, ReviewRail, ...), daemon IO and the mutation verbs live in
+ * session-controller.ts, the keyboard grammar in keymap.ts with binding
+ * resolution and status hints from key-bindings.ts, and theming flows
+ * through the ThemeProvider - config themes swap the provider value.
  *
  * The plan review grammar: selection is the entry primitive (mouse drag or
  * keyboard span on one native renderer selection), compose happens inline
@@ -13,31 +14,26 @@
  */
 
 import React, { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { useKeyboard, useRenderer } from "@opentui/react";
-import type { ScrollBoxRenderable, TextRenderable } from "@opentui/core";
-import { type Annotation, type ReviewSession, type VerdictKind } from "@cueloop/schema";
-import {
-  blockRuns,
-  composeBoxHeight,
-  displayText,
-  marksByDisplay,
-  overlayMarks,
-  revisionDelta,
-  spanKey,
-  startSpan,
-  wrapRuns,
-  type DisplayBlock,
-  type Mark,
-  type SpanState,
-  type StyleRun,
-} from "./view";
-import { type DiffRow } from "./view-diff";
-import { DARK as T } from "./theme";
-import { highlightCode, type CodeToken } from "./syntax";
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import type { Clock } from "@opentui/core";
+import { type ReviewSession, type VerdictKind } from "@cueloop/schema";
+import { displayText, marksByDisplay, spanKey, startSpan, type Mark, type SpanState } from "./view";
+import { DARK } from "./theme";
 import { DEFAULT_KEYS, loadConfig } from "./config";
 import { returnPaneFor } from "./herdr";
 import { createReviewController } from "./session-controller";
 import { reduceKey, type Intent, type KeyState } from "./keymap";
+import { KeyBindings, type HintMode } from "./key-bindings";
+import { ThemeProvider } from "./components/theme-context";
+import { StatusBar } from "./components/primitives/StatusBar";
+import { Breadcrumb, type BreadcrumbItem } from "./components/Breadcrumb";
+import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
+import { DiffSheet } from "./components/DiffSheet";
+import { ReviewRail, annotationBlocking, type ReviewRailHandle } from "./components/ReviewRail";
+import { VERDICTS } from "./components/ConfirmCard";
+import { CompletionOverlay } from "./components/CompletionOverlay";
+import { InboxList } from "./components/InboxList";
+import { ComposeBar } from "./components/ComposeBar";
 
 export interface AppProps {
   home?: string;
@@ -48,6 +44,8 @@ export interface AppProps {
    */
   readOnly?: boolean;
   onExit?: (code: number) => void;
+  /** Timer source for the auto-close countdown; tests inject a ManualClock. */
+  clock?: Clock;
 }
 
 type Mode =
@@ -57,35 +55,13 @@ type Mode =
   | { m: "railEdit"; id: string; text: string }
   | { m: "submit"; verdict: VerdictKind; summary: string };
 
-type RailTab = "review" | "agent";
-
-const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
-/** Selector words in the rail confirm card - one word per verdict. */
-const VERDICT_LABEL: Record<VerdictKind, string> = {
-  comment: "Comment",
-  approve: "Approve",
-  request_changes: "Changes",
-};
-
-/** One rendered plan line, registered for the native selection primitive. */
-interface PlanLineRef {
-  renderable: TextRenderable;
-  dispIdx: number;
-  lineIndex: number;
-  /** Block-text offset of the line's first positioned run; null for pure-del lines. */
-  lineStart: number | null;
-  /** Screen columns before the run text (cursor glyph + list marker). */
-  prefixColumns: number;
-  /** Length of the positioned run text in this line. */
-  textLength: number;
+function defaultVerdict(session: ReviewSession): VerdictKind {
+  return session.annotations.length || session.workingCopy !== undefined ? "request_changes" : "approve";
 }
 
-/** Rail card height (3 text rows + 1 margin), for reveal-scroll math. */
-const RAIL_CARD_HEIGHT = 4;
-
-export function App({ home, sessionId, readOnly = false, onExit }: AppProps): React.ReactNode {
+export function App({ home, sessionId, readOnly = false, onExit, clock }: AppProps): React.ReactNode {
   const controller = useMemo(
-    () => createReviewController({ home, sessionId, readOnly, onExit }),
+    () => createReviewController({ home, sessionId, readOnly, onExit, clock }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [home, sessionId],
   );
@@ -99,31 +75,33 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
     controller.getSnapshot,
   );
   const renderer = useRenderer();
+  const { width: terminalWidth } = useTerminalDimensions();
 
   // ── view state ──────────────────────────────
   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 [railTab, setRailTab] = useState<RailTab>("review");
+  const [railTab, setRailTab] = useState<"review" | "agent">("review");
   // ~2s focus pulse on the document highlight when a rail card is activated
   const [pulseAnn, setPulseAnn] = 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("");
-  // rendered plan lines, for driving and reading the native selection
-  const lineRefs = useRef(new Map<string, PlanLineRef>());
-  const docScrollRef = useRef<ScrollBoxRenderable | null>(null);
-  const railScrollRef = useRef<ScrollBoxRenderable | null>(null);
-  // keymap from layered config; theme overrides land on the shared tokens
+  const planSheetRef = useRef<PlanSheetHandle | null>(null);
+  const railRef = useRef<ReviewRailHandle | null>(null);
+  // 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(DARK);
   useEffect(() => {
     const cfg = loadConfig({ repoRoot: session?.workspace.repoRoot });
     keysRef.current = cfg.keys;
-    Object.assign(T, cfg.theme);
+    keyBindings.setKeys(cfg.keys);
+    setTheme(cfg.theme);
     controller.applyConfig(cfg);
-  }, [session?.workspace.repoRoot, controller]);
+  }, [session?.workspace.repoRoot, controller, keyBindings]);
   useEffect(
     () => () => {
       if (pulseTimer.current) clearTimeout(pulseTimer.current);
@@ -149,62 +127,14 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
   const resolved = session?.status === "resolved";
   const isDiff = session?.artifact.type === "diff";
 
-  // ── the native selection: keyboard driver ───
-  const lineRefFor = (dispIdx: number, offset: number): PlanLineRef | null => {
-    for (const meta of lineRefs.current.values()) {
-      if (meta.dispIdx !== dispIdx || meta.lineStart === null) continue;
-      if (offset >= meta.lineStart && offset < meta.lineStart + meta.textLength) return meta;
-    }
-    return null;
-  };
-
-  /** Anchor/extend the renderer's native selection from keyboard span offsets. */
-  const driveNativeSelection = (span: SpanState): void => {
-    if (!renderer) return;
-    const startMeta = lineRefFor(span.dispIdx, span.start);
-    const endMeta = lineRefFor(span.dispIdx, span.end - 1);
-    if (!startMeta || !endMeta) return;
-    const startColumn = startMeta.prefixColumns + (span.start - startMeta.lineStart!);
-    const endColumn = endMeta.prefixColumns + (span.end - 1 - endMeta.lineStart!);
-    renderer.startSelection(startMeta.renderable, startMeta.renderable.x + startColumn, startMeta.renderable.y);
-    renderer.updateSelection(endMeta.renderable, endMeta.renderable.x + endColumn + 1, endMeta.renderable.y);
-  };
   // driving needs committed layout, so it runs after render; any transition
   // out of span mode clears the renderer selection (compose paints its own
   // mark, and a mouse drag never changes the mode, so it survives)
   useEffect(() => {
-    if (mode.m === "span") driveNativeSelection(mode.span);
-    else renderer?.clearSelection();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (mode.m === "span") planSheetRef.current?.driveSpanSelection(mode.span);
+    else planSheetRef.current?.clearSelection();
   }, [mode]);
 
-  /**
-   * Read the native selection (mouse drag) back as a block range. The quote
-   * anchors in the FIRST selected block - quote anchors resolve within one
-   * block. Columns map 1:1 onto text offsets except inside word-diffed mod
-   * blocks, where inline del runs shift the screen columns.
-   */
-  const readNativeSelection = (): { dispIdx: number; start: number; end: number } | null => {
-    if (!renderer?.hasSelection) return null;
-    const ordered = [...lineRefs.current.values()].sort(
-      (a, b) => a.dispIdx - b.dispIdx || a.lineIndex - b.lineIndex,
-    );
-    let found: { dispIdx: number; start: number; end: number } | null = null;
-    for (const meta of ordered) {
-      if (meta.lineStart === null) continue;
-      const selection = meta.renderable.getSelection();
-      if (!selection || selection.end <= selection.start) continue;
-      const startInText = Math.min(meta.textLength, Math.max(0, selection.start - meta.prefixColumns));
-      const endInText = Math.min(meta.textLength, Math.max(0, selection.end - meta.prefixColumns));
-      if (endInText <= startInText) continue;
-      const blockStart = meta.lineStart + startInText;
-      const blockEnd = meta.lineStart + endInText;
-      if (!found) found = { dispIdx: meta.dispIdx, start: blockStart, end: blockEnd };
-      else if (found.dispIdx === meta.dispIdx) found.end = Math.max(found.end, blockEnd);
-    }
-    return found;
-  };
-
   // ── selection symmetry: one selected id, both sides ──
   const pulse = (id: string): void => {
     setPulseAnn(id);
@@ -212,28 +142,19 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
     pulseTimer.current = setTimeout(() => setPulseAnn(null), 2000);
   };
 
-  const revealRailCard = (annotationId: string): void => {
-    const index = session?.annotations.findIndex((annotation) => annotation.id === annotationId) ?? -1;
-    if (index >= 0) railScrollRef.current?.scrollTo(Math.max(0, index * RAIL_CARD_HEIGHT - 1));
-  };
-
   /** Card activation scrolls the document to the anchor and pulses it. */
   const revealAnchor = (annotationId: string): void => {
     for (const [dispIdx, blockMarks] of marks) {
       if (!blockMarks.some((mark) => mark.annotationId === annotationId)) continue;
       setCursor(dispIdx);
-      try {
-        docScrollRef.current?.scrollChildIntoView(`plan-block-${dispIdx}`);
-      } catch {
-        // reveal is best-effort; selection state is already correct
-      }
+      planSheetRef.current?.revealBlock(dispIdx);
       return;
     }
   };
 
   const selectCardFromDocument = (annotationId: string): void => {
     setFocusedAnn(annotationId);
-    revealRailCard(annotationId);
+    railRef.current?.revealCard(annotationId);
   };
 
   const selectCardFromRail = (annotationId: string): void => {
@@ -251,6 +172,16 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
     setMode({ m: "railEdit", id: annotation.id, text: annotation.body });
   };
 
+  /** The $EDITOR hand-off releases the terminal: suspend, edit, resume. */
+  const runEditorHandOff = (): void => {
+    renderer?.suspend();
+    try {
+      controller.edit();
+    } finally {
+      renderer?.resume();
+    }
+  };
+
   // ── keyboard grammar: build state, reduce, dispatch ──
   const dispatch = (intent: Intent): void => {
     switch (intent.t) {
@@ -287,7 +218,6 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
         if (mode.m === "span") {
           const span = spanKey(mode.span, intent.name, displayText(display[mode.span.dispIdx]!));
           setMode({ m: "span", span });
-          driveNativeSelection(span);
         }
         return;
       case "openCompose": {
@@ -306,7 +236,7 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
           if (row) setMode({ m: "compose", kind: intent.kind, dispIdx: cursor, start: 0, end: row.text.length, text: "" });
         } else {
           // a mouse drag leaves a native selection; it wins over the cursor block
-          const native = readNativeSelection();
+          const native = planSheetRef.current?.readSelection() ?? null;
           if (native) {
             setMode({ m: "compose", kind: intent.kind, ...native, text: "" });
           } else {
@@ -325,7 +255,7 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
       case "cut":
         return controller.cut(cursor);
       case "edit":
-        return controller.edit();
+        return runEditorHandOff();
       case "editCard":
         if (focusedAnn) openCardEdit(focusedAnn);
         return;
@@ -344,7 +274,7 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
         }
         return;
       case "deselect":
-        renderer?.clearSelection();
+        planSheetRef.current?.clearSelection();
         setFocusedAnn(undefined);
         setPulseAnn(null);
         return;
@@ -380,20 +310,22 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
     }
   };
 
+  const overlay: KeyState["overlay"] =
+    mode.m === "compose" || mode.m === "railEdit"
+      ? "compose"
+      : mode.m === "submit"
+        ? "submit"
+        : completion.phase === "prompt"
+          ? "completion-prompt"
+          : completion.phase === "counting"
+            ? "completion-counting"
+            : "none";
+
   useKeyboard((key) => {
     const state: KeyState = {
       keys: keysRef.current,
       readOnly,
-      overlay:
-        mode.m === "compose" || mode.m === "railEdit"
-          ? "compose"
-          : mode.m === "submit"
-            ? "submit"
-            : completion.phase === "prompt"
-              ? "completion-prompt"
-              : completion.phase === "counting"
-                ? "completion-counting"
-                : "none",
+      overlay,
       view: !session ? "inbox" : isDiff ? "diff" : "plan",
       spanMode: mode.m === "span",
       resolved: !!resolved,
@@ -404,25 +336,47 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
         ? rows[cursor] !== undefined && rows[cursor]!.t !== "file" && rows[cursor]!.t !== "hunk"
         : !!display[cursor]?.work,
     };
-    for (const intent of reduceKey(state, { name: key.name, shift: !!key.shift })) dispatch(intent);
+    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 }, action)) dispatch(intent);
   });
 
   // ── 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} />;
+  if (error) {
+    return (
+      <ThemeProvider theme={theme}>
+        <text fg={theme.red}>cueloop: {error}</text>
+      </ThemeProvider>
+    );
+  }
+  if (!session && !inbox) {
+    return (
+      <ThemeProvider theme={theme}>
+        <text fg={theme.textDim}>connecting to the daemon…</text>
+      </ThemeProvider>
+    );
+  }
+  if (!session && inbox) {
+    return (
+      <ThemeProvider theme={theme}>
+        <InboxList inbox={inbox} cursor={inboxCursor} />
+      </ThemeProvider>
+    );
+  }
 
   const s = session!;
   const pendingCount = s.annotations.length + (s.workingCopy !== undefined ? 1 : 0);
 
   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}
-      />
+      <ThemeProvider theme={theme}>
+        <CompletionOverlay
+          verdict={s.verdict.kind}
+          completion={completion}
+          status={status}
+          returnsTo={returnPaneFor(s.artifact.meta.herdrPane) ? (s.artifact.meta.agent ?? "the agent") : undefined}
+        />
+      </ThemeProvider>
     );
   }
 
@@ -432,20 +386,25 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
           kind: mode.kind,
           dispIdx: mode.dispIdx,
           quote: displayText(display[mode.dispIdx]!).slice(mode.start, mode.end),
-          text: mode.text,
-          onInput: (text: string) => {
-            liveInput.current = text;
-            setMode({ ...mode, text });
+          draft: {
+            text: mode.text,
+            onInput: (text: string) => {
+              liveInput.current = text;
+              setMode({ ...mode, text });
+            },
+            onSave: () => dispatch({ t: "saveCompose" }),
+            onCancel: () => dispatch({ t: "closeOverlay" }),
           },
-          onSave: () => dispatch({ t: "saveCompose" }),
-          onCancel: () => dispatch({ t: "closeOverlay" }),
         }
       : null;
 
-  const registerLine = (key: string, renderable: TextRenderable | null, meta: Omit<PlanLineRef, "renderable">): void => {
-    if (renderable) lineRefs.current.set(key, { renderable, ...meta });
-    else lineRefs.current.delete(key);
-  };
+  const activeSpan =
+    mode.m === "span"
+      ? { dispIdx: mode.span.dispIdx, start: mode.span.start, end: mode.span.end }
+      : mode.m === "compose" && !isDiff
+        ? // the compose anchor stays painted selection-style while the box is open
+          { dispIdx: mode.dispIdx, start: mode.start, end: mode.end }
+        : null;
 
   const onLineActivate = (dispIdx: number): void => {
     // releasing a drag-selection lands here too; a live selection is not a click
@@ -458,7 +417,7 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
   const onEditRequest = (): void => {
     if (readOnly) return controller.setStatus("observer - read-only");
     if (resolved) return controller.setStatus("review submitted - read-only");
-    controller.edit();
+    runEditorHandOff();
   };
 
   // clicking the rail Submit button: same read-only answer as the submit key
@@ -468,7 +427,7 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
     dispatch({ t: "openSubmit" });
   };
 
-  const submitConfirmState: SubmitConfirmState | null =
+  const submitConfirmState =
     mode.m === "submit"
       ? {
           verdict: mode.verdict,
@@ -485,765 +444,93 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
         }
       : null;
 
-  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}
-            session={s}
-            editOrphanCount={editOrphanCount}
-            compose={composeState}
-            registerLine={registerLine}
-            onLineActivate={onLineActivate}
-            onEditRequest={onEditRequest}
-            docScrollRef={docScrollRef}
-          />
-        )}
-        <Rail
-          session={s}
-          selectedId={focusedAnn}
-          resolvedIds={isDiff ? null : resolvedIds}
-          railTab={railTab}
-          pendingCount={pendingCount}
-          cardEdit={
-            mode.m === "railEdit"
-              ? {
-                  id: mode.id,
-                  text: mode.text,
-                  onInput: (text: string) => {
-                    liveInput.current = text;
-                    setMode({ m: "railEdit", id: mode.id, text });
-                  },
-                  onSave: () => dispatch({ t: "saveCompose" }),
-                  onCancel: () => dispatch({ t: "closeOverlay" }),
-                }
-              : null
-          }
-          submitConfirm={submitConfirmState}
-          onTab={setRailTab}
-          onSelectCard={selectCardFromRail}
-          onActivateCard={openCardEdit}
-          onSubmitRequest={onSubmitRequest}
-          railScrollRef={railScrollRef}
-        />
-      </box>
-      {mode.m === "compose" && isDiff ? (
-        <ComposeBar mode={mode} quote={rows[mode.dispIdx]?.text ?? ""} onChange={(text) => { liveInput.current = text; setMode({ ...mode, text }); }} />
-      ) : (
-        <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 === "submit"
-                ? "verdict ←/→ · ⏎ submit · esc cancel"
-                : mode.m === "span"
-                  ? "span · l/h grow/shrink · w/b slide · $ end · c comment · s suggest · esc"
-                  : mode.m === "compose" || mode.m === "railEdit"
-                    ? "typing · ⏎ save · esc cancel"
-                    : focusedAnn !== undefined
-                      ? "card · e edit · x Cut · n/p cards · esc deselect · ⏎ submit"
-                      : "j/k move · v span · drag selects · c comment · s suggest · x cut · e edit · n/p annotations · ⏎ submit · q quit"}
-          </text>
-        </box>
-      )}
-    </box>
-  );
-}
-
-// ── panes ─────────────────────────────────────
-
-interface ComposeState {
-  kind: "comment" | "suggestion";
-  dispIdx: number;
-  quote: string;
-  text: string;
-  onInput: (text: string) => void;
-  onSave: () => void;
-  onCancel: () => void;
-}
-
-function PlanPane({
-  display,
-  marks,
-  cursor,
-  mode,
-  session,
-  editOrphanCount,
-  compose,
-  registerLine,
-  onLineActivate,
-  onEditRequest,
-  docScrollRef,
-}: {
-  display: DisplayBlock[];
-  marks: Map<number, Mark[]>;
-  cursor: number;
-  mode: Mode;
-  session: ReviewSession;
-  editOrphanCount: number;
-  compose: ComposeState | null;
-  registerLine: (key: string, renderable: TextRenderable | null, meta: Omit<PlanLineRef, "renderable">) => void;
-  onLineActivate: (dispIdx: number) => void;
-  onEditRequest: () => void;
-  docScrollRef: React.RefObject<ScrollBoxRenderable | null>;
-}): React.ReactNode {
-  const width = 76;
-  const children: React.ReactNode[] = [];
-  for (let i = 0; i < display.length; i++) {
-    const d = display[i]!;
-    const isCursor = i === cursor;
-    const gap = topGap(display[i - 1], d);
-    if (d.kind === "code") {
-      children.push(
-        <CodeBlock key={i} id={`plan-block-${i}`} block={d} isCursor={isCursor} gap={gap} annotated={(marks.get(i) ?? []).length > 0} />,
-      );
-    } else {
-      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" });
-      }
-      // the compose anchor stays painted selection-style while the box is open
-      if (mode.m === "compose" && mode.dispIdx === i) {
-        blockMarks.push({ start: mode.start, end: mode.end, role: "kspan" });
-      }
-      const runs = overlayMarks(blockRuns(d, true), blockMarks);
-      const lines = wrapRuns(runs, width - marker(d).length);
-      const prefixColumns = 2 + marker(d).length;
-      children.push(
-        <box key={i} id={`plan-block-${i}`} style={{ flexDirection: "column", marginTop: gap }}>
-          {lines.map((line, li) => {
-            const positioned = line.filter((run) => run.start !== null);
-            const lineStart = positioned.length ? positioned[0]!.start : null;
-            const lastPositioned = positioned[positioned.length - 1];
-            const textLength =
-              lineStart !== null && lastPositioned ? lastPositioned.start! + lastPositioned.text.length - lineStart : 0;
-            return (
-              <text
-                key={li}
-                bg={isCursor ? T.cursorBg : undefined}
-                selectable
-                selectionBg={T.accent}
-                selectionFg={T.accentInk}
-                ref={(renderable: TextRenderable | null) =>
-                  registerLine(`${i}:${li}`, renderable, { dispIdx: i, lineIndex: li, lineStart, prefixColumns, textLength })
-                }
-                onMouseUp={() => onLineActivate(i)}
-              >
-                <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>,
-      );
-    }
-    if (compose && compose.dispIdx === i) {
-      children.push(
-        <AnnotationCard
-          key={`compose-${i}`}
-          kind={compose.kind}
-          quote={compose.quote}
-          draft={{ text: compose.text, onInput: compose.onInput, onSave: compose.onSave, onCancel: compose.onCancel }}
-        />,
-      );
-    }
-  }
-  return (
-    <box style={{ flexGrow: 1, flexDirection: "column" }}>
-      <SheetHeader session={session} onEditRequest={onEditRequest} />
-      {editOrphanCount > 0 ? (
-        <box style={{ height: 1, backgroundColor: T.markCommentBg, paddingLeft: 2 }}>
-          <text fg={T.red}>
-            {editOrphanCount} annotation{editOrphanCount === 1 ? "" : "s"} no longer match - the passage was removed.
-          </text>
-        </box>
-      ) : null}
-      <scrollbox ref={docScrollRef} style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }} focused={false}>
-        {children}
-      </scrollbox>
-    </box>
-  );
-}
-
-/** Sheet chrome: submitted-by + revision delta left, the Edit word-button right. */
-function SheetHeader({ session, onEditRequest }: { session: ReviewSession; onEditRequest: () => void }): React.ReactNode {
-  const revisionCount = session.revisions.length;
-  const previous = revisionCount > 1 ? session.revisions[revisionCount - 2] : undefined;
-  const delta = previous ? revisionDelta(previous.content, session.artifact.content) : null;
-  return (
-    <box style={{ height: 1, flexDirection: "row", paddingLeft: 2, paddingRight: 1 }}>
-      <text fg={T.textDim}>
-        submitted by <span fg={T.textMuted}>{session.artifact.meta.agent ?? "unknown"}</span> · revision {revisionCount}
-        {delta ? (
-          <span fg={T.green}>
-            {" "}· v{revisionCount - 1}→v{revisionCount} +{delta.added} -{delta.removed}
-          </span>
-        ) : null}
-      </text>
-      <box style={{ flexGrow: 1 }} />
-      <box onMouseUp={onEditRequest}>
-        <text fg={T.textDim}> Edit </text>
-      </box>
-    </box>
-  );
-}
-
-function CodeBlock({
-  id,
-  block,
-  isCursor,
-  gap,
-  annotated,
-}: {
-  id: string;
-  block: DisplayBlock;
-  isCursor: boolean;
-  gap: number;
-  annotated: boolean;
-}): 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);
-  useEffect(() => {
-    let live = true;
-    void highlightCode(content, lang).then((t) => {
-      if (live && t) setTokens(t);
-    });
-    return () => {
-      live = false;
-    };
-  }, [content, lang]);
-  const lines: CodeToken[][] = tokens ?? content.split("\n").map((l) => [{ content: l }]);
-  return (
-    <box id={id} 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>
-  );
-}
-
-/** 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 rail ──────────────────────────────────
-
-interface CardEditState {
-  id: string;
-  text: string;
-  onInput: (text: string) => void;
-  onSave: () => void;
-  onCancel: () => void;
-}
+  const cardEditState =
+    mode.m === "railEdit"
+      ? {
+          id: mode.id,
+          text: mode.text,
+          onInput: (text: string) => {
+            liveInput.current = text;
+            setMode({ m: "railEdit", id: mode.id, text });
+          },
+          onSave: () => dispatch({ t: "saveCompose" }),
+          onCancel: () => dispatch({ t: "closeOverlay" }),
+        }
+      : null;
 
-/** The open confirm card: verdict, summary draft, counts, and its actions. */
-interface SubmitConfirmState {
-  verdict: VerdictKind;
-  summary: string;
-  annotationCount: number;
-  blockingCount: number;
-  onInput: (summary: string) => void;
-  onSelectVerdict: (verdict: VerdictKind) => void;
-  onSubmit: () => void;
-  onCancel: () => void;
-}
+  const headerItems: BreadcrumbItem[] = [
+    { label: "cueloop", tone: "accent" },
+    { label: `${s.artifact.meta.title ?? s.artifact.meta.planPath ?? s.id} · rev ${s.revisions.length}`, tone: "dim" },
+    ...(resolved ? [{ label: `resolved: ${s.verdict!.kind.replace("_", " ")}`, tone: "green" as const }] : []),
+    ...(readOnly ? [{ label: "observer", tone: "dim" as const }] : []),
+    ...(status ? [{ label: status, tone: "accent" as const }] : []),
+  ];
+
+  keyBindings.setContext({ overlay, spanMode: mode.m === "span" });
+  const hintMode: HintMode = readOnly
+    ? "read-only"
+    : mode.m === "submit"
+      ? "submit"
+      : mode.m === "span"
+        ? "span"
+        : mode.m === "compose" || mode.m === "railEdit"
+          ? "compose"
+          : focusedAnn !== undefined
+            ? "card"
+            : "normal";
+  const railWidth = terminalWidth >= 100 ? 34 : 28;
 
-function Rail({
-  session,
-  selectedId,
-  resolvedIds,
-  railTab,
-  pendingCount,
-  cardEdit,
-  submitConfirm,
-  onTab,
-  onSelectCard,
-  onActivateCard,
-  onSubmitRequest,
-  railScrollRef,
-}: {
-  session: ReviewSession;
-  selectedId?: string;
-  /** Ids whose anchor resolved; null = orphan display off (diff view). */
-  resolvedIds: Set<string> | null;
-  railTab: RailTab;
-  pendingCount: number;
-  cardEdit: CardEditState | null;
-  submitConfirm: SubmitConfirmState | null;
-  onTab: (tab: RailTab) => void;
-  onSelectCard: (id: string) => void;
-  onActivateCard: (id: string) => void;
-  onSubmitRequest: () => void;
-  railScrollRef: React.RefObject<ScrollBoxRenderable | null>;
-}): React.ReactNode {
   return (
-    <box style={{ width: 34, backgroundColor: T.panel, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
-      <box style={{ height: 1, flexDirection: "row" }}>
-        <box onMouseUp={() => onTab("review")}>
-          <text fg={railTab === "review" ? T.accent : T.textDim}>Review ({pendingCount})</text>
-        </box>
-        <text fg={T.textDim}>{"   "}</text>
-        <box onMouseUp={() => onTab("agent")}>
-          <text fg={railTab === "agent" ? T.accent : T.textDim}>Agent</text>
-        </box>
-      </box>
-      <text> </text>
-      {railTab === "agent" ? (
-        <AgentTab session={session} />
-      ) : (
-        <>
-          {session.workingCopy !== undefined ? <text fg={T.textDim}>± plan edits → one diff</text> : null}
-          {session.annotations.length === 0 ? (
-            <text fg={T.textDim}>no annotations yet</text>
-          ) : (
-            <scrollbox ref={railScrollRef} style={{ flexGrow: 1 }} focused={false}>
-              {session.annotations.map((annotation) => (
-                <AnnotationCard
-                  key={annotation.id}
-                  kind={annotation.kind}
-                  quote={annotation.anchor.quote}
-                  saved={{
-                    body: annotation.body,
-                    selected: annotation.id === selectedId,
-                    orphan: resolvedIds !== null && !resolvedIds.has(annotation.id),
-                    blocking: annotationBlocking(annotation),
-                    editing:
-                      cardEdit && cardEdit.id === annotation.id
-                        ? { text: cardEdit.text, onInput: cardEdit.onInput, onSave: cardEdit.onSave, onCancel: cardEdit.onCancel }
-                        : null,
-                    onMouseUp: () =>
-                      annotation.id === selectedId ? onActivateCard(annotation.id) : onSelectCard(annotation.id),
-                  }}
-                />
-              ))}
-            </scrollbox>
-          )}
-          <box style={{ flexGrow: 1 }} />
-          {/* the confirm card sits OUTSIDE the scrollbox: the annotation stack
-              above scrolls while the card stays pinned to the rail bottom */}
-          {session.status === "resolved" ? (
-            <text fg={T.green}>resolved: {session.verdict!.kind.replace("_", " ")}</text>
-          ) : submitConfirm ? (
-            <SubmitConfirmCard confirm={submitConfirm} />
+    <ThemeProvider theme={theme}>
+      <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: theme.bg }}>
+        <Breadcrumb items={headerItems} />
+        <box style={{ flexGrow: 1, flexDirection: "row" }}>
+          {isDiff ? (
+            <DiffSheet rows={rows} cursor={cursor} annotations={s.annotations} focusedAnnotationId={focusedAnn} />
           ) : (
-            <box onMouseUp={onSubmitRequest}>
-              <text fg={T.accent}>{`Submit review (${pendingCount}) ⏎`}</text>
-            </box>
+            <PlanSheet
+              ref={planSheetRef}
+              session={s}
+              display={display}
+              marks={marks}
+              cursor={cursor}
+              activeSpan={activeSpan}
+              compose={composeState}
+              editOrphanCount={editOrphanCount}
+              onLineActivate={onLineActivate}
+              onEditRequest={onEditRequest}
+            />
           )}
-        </>
-      )}
-    </box>
-  );
-}
-
-/**
- * Confirm card content rows: counts, spacer, verdict selector, spacer,
- * summary input, spacer, Submit/Cancel buttons. The bordered box height is
- * this count plus the two border rows - a pure function of the content, so
- * layout and render never drift.
- */
-const SUBMIT_CONFIRM_CONTENT_ROWS = 7;
-
-function submitConfirmHeight(): number {
-  return SUBMIT_CONFIRM_CONTENT_ROWS + 2;
-}
-
-/**
- * The Submit button expanded into a bordered confirm card at the rail bottom:
- * honest counts, the verdict selector (arrow keys or click), the optional
- * summary, and plain word-buttons - key hints live in the status line only.
- */
-function SubmitConfirmCard({ confirm }: { confirm: SubmitConfirmState }): React.ReactNode {
-  return (
-    <box
-      style={{
-        height: submitConfirmHeight(),
-        marginRight: 1,
-        border: true,
-        borderStyle: "rounded",
-        borderColor: T.accent,
-        backgroundColor: T.elevated,
-        flexDirection: "column",
-        paddingLeft: 1,
-      }}
-      title=" submit review "
-    >
-      <text fg={T.textDim}>{`${confirm.annotationCount} annotations · ${confirm.blockingCount} blocking`}</text>
-      <box style={{ height: 1 }} />
-      <box style={{ flexDirection: "row", height: 1 }}>
-        {VERDICTS.map((candidate) => (
-          <box key={candidate} style={{ paddingRight: 1 }} onMouseUp={() => confirm.onSelectVerdict(candidate)}>
-            <text fg={candidate === confirm.verdict ? verdictColor(candidate) : T.textDim}>
-              {candidate === confirm.verdict ? `[${VERDICT_LABEL[candidate]}]` : ` ${VERDICT_LABEL[candidate]} `}
-            </text>
-          </box>
-        ))}
-      </box>
-      <box style={{ height: 1 }} />
-      <input focused value={confirm.summary} onInput={confirm.onInput} placeholder="summary for the agent (optional)" />
-      <box style={{ height: 1 }} />
-      <box style={{ flexDirection: "row", height: 1 }}>
-        <box style={{ backgroundColor: T.accent, marginRight: 2 }} onMouseUp={confirm.onSubmit}>
-          <text fg={T.accentInk}> Submit </text>
-        </box>
-        <box onMouseUp={confirm.onCancel}>
-          <text fg={T.textDim}> Cancel </text>
+          <ReviewRail
+            ref={railRef}
+            session={s}
+            selectedId={focusedAnn}
+            resolvedIds={isDiff ? null : resolvedIds}
+            railTab={railTab}
+            pendingCount={pendingCount}
+            cardEdit={cardEditState}
+            submitConfirm={submitConfirmState}
+            onTabChange={setRailTab}
+            onSelectCard={selectCardFromRail}
+            onActivateCard={openCardEdit}
+            onSubmitRequest={onSubmitRequest}
+            width={railWidth}
+          />
         </box>
+        {mode.m === "compose" && isDiff ? (
+          <ComposeBar
+            kind={mode.kind}
+            quote={rows[mode.dispIdx]?.text ?? ""}
+            text={mode.text}
+            onInput={(text) => {
+              liveInput.current = text;
+              setMode({ ...mode, text });
+            }}
+          />
+        ) : (
+          <StatusBar>{keyBindings.statusHint(hintMode)}</StatusBar>
+        )}
       </box>
-    </box>
-  );
-}
-
-/** Agent tab: who submitted, where the session stands, which revision. */
-function AgentTab({ session }: { session: ReviewSession }): React.ReactNode {
-  return (
-    <box style={{ flexDirection: "column", flexGrow: 1 }}>
-      <text fg={T.textMuted}>{session.artifact.meta.agent ?? "unknown"}</text>
-      <text fg={T.textDim}>status: {session.status}</text>
-      <text fg={T.textDim}>revision {session.revisions.length}</text>
-    </box>
-  );
-}
-
-/**
- * The composer and the rail card are one component in two modes: draft props
- * attached (bordered box inline in the document flow) or saved props attached
- * (rail card, optionally editing its body in place). Compose, saved, and
- * re-edit all share this rendering path.
- */
-function AnnotationCard({
-  kind,
-  quote,
-  draft,
-  saved,
-}: {
-  kind: string;
-  quote: string;
-  draft?: { text: string; onInput: (text: string) => void; onSave: () => void; onCancel: () => void };
-  saved?: {
-    body: string;
-    selected: boolean;
-    orphan: boolean;
-    blocking: boolean;
-    editing: { text: string; onInput: (text: string) => void; onSave: () => void; onCancel: () => void } | null;
-    onMouseUp: () => void;
-  };
-}): React.ReactNode {
-  const color = kind === "suggestion" ? T.green : T.accent;
-  if (draft) {
-    const verb = kind === "suggestion" ? "suggest replacement for" : "comment on";
-    return (
-      <box
-        style={{
-          height: composeBoxHeight(),
-          marginLeft: 2,
-          marginRight: 2,
-          border: true,
-          borderStyle: "rounded",
-          borderColor: color,
-          backgroundColor: T.elevated,
-          flexDirection: "column",
-          paddingLeft: 1,
-        }}
-        title={` ${verb} "${truncate(quote, 40)}" `}
-      >
-        <input focused value={draft.text} onInput={draft.onInput} placeholder="write a note..." />
-        <SaveCancelRow onSave={draft.onSave} onCancel={draft.onCancel} />
-      </box>
-    );
-  }
-  const card = saved!;
-  return (
-    <box
-      style={{ flexDirection: "column", marginBottom: 1, backgroundColor: card.selected ? T.elevated : undefined }}
-      onMouseUp={card.onMouseUp}
-    >
-      <text fg={card.selected ? T.text : color}>
-        {card.selected ? "▸ " : "  "}
-        {kind.toUpperCase()}
-        {card.blocking ? <span fg={T.red}> · BLOCKING</span> : null}
-        <span fg={T.textDim}>{card.orphan ? " · ORPHANED" : " · pending"}</span>
-      </text>
-      <text fg={T.textDim}>  "{truncate(quote, 26)}"</text>
-      {card.editing ? (
-        <>
-          <input focused value={card.editing.text} onInput={card.editing.onInput} />
-          <SaveCancelRow onSave={card.editing.onSave} onCancel={card.editing.onCancel} />
-        </>
-      ) : (
-        <text fg={card.orphan ? T.textDim : T.textMuted}>  {truncate(card.body, 28)}</text>
-      )}
-    </box>
-  );
-}
-
-function SaveCancelRow({ onSave, onCancel }: { onSave: () => void; onCancel: () => void }): React.ReactNode {
-  return (
-    <box style={{ flexDirection: "row", height: 1 }}>
-      <box style={{ backgroundColor: T.accent, marginRight: 2 }} onMouseUp={onSave}>
-        <text fg={T.accentInk}> Save ⏎ </text>
-      </box>
-      <box onMouseUp={onCancel}>
-        <text fg={T.textDim}> Cancel esc </text>
-      </box>
-    </box>
-  );
-}
-
-/** Forward-compatible: open annotation kinds may carry a blocking flag. */
-function annotationBlocking(annotation: Annotation): boolean {
-  return (annotation as Annotation & { blocking?: boolean }).blocking === true;
-}
-
-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>
-  );
-}
-
-/** Bottom compose bar - the diff view still composes here. */
-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>
+    </ThemeProvider>
   );
 }
-
-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>
-  );
-}
-
-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>
-  );
-}
-
-// ── small helpers ─────────────────────────────
-
-function marker(d: DisplayBlock): string {
-  if (d.kind === "li") return "- ";
-  if (d.kind === "oli") return `${d.oliNum ?? 1}. `;
-  if (d.kind === "quote") return "▏ ";
-  return "";
-}
-
-function cursorGlyph(isCursor: boolean): string {
-  return isCursor ? "▎ " : "  ";
-}
-
-function tagLabel(d: DisplayBlock): string {
-  return d.type === "del" ? "cut" : d.type === "add" ? "new" : "edited";
-}
-
-function tagColor(d: DisplayBlock): string {
-  return d.type === "del" ? T.red : d.type === "add" ? T.green : T.accent;
-}
-
-function verdictColor(v: VerdictKind): string {
-  return v === "approve" ? T.green : v === "request_changes" ? T.red : T.blue;
-}
-
-function defaultVerdict(s: ReviewSession): VerdictKind {
-  return s.annotations.length || s.workingCopy !== undefined ? "request_changes" : "approve";
-}
-
-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)) };
-  }
-}
-
-function truncate(s: string, n: number): string {
-  const one = s.replace(/\n/g, " ");
-  return one.length > n ? one.slice(0, n - 1) + "…" : one;
-}