@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.91

package/src/App.tsx

@@ -1,128 +1,693 @@
-/**
- * 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 plan review grammar: selection is the entry primitive (mouse drag or
- * keyboard span on one native renderer selection), compose happens inline
- * under the anchor, annotation text lives in the rail while the document
- * keeps only the kind-colored highlight, and the rail edits what the
- * document selects - one selected id drives both sides.
- */
-
-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 React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import type { Clock, KeyEvent } from "@opentui/core";
+import { buildDisplay, marksByDisplay, type Mark } from "./view-plan";
 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 { DEFAULT_KEYS, loadConfig } from "./config";
-import { returnPaneFor } from "./herdr";
-import { createReviewController } from "./session-controller";
-import { reduceKey, type Intent, type KeyState } from "./keymap";
+  DEFAULT_KEYS,
+  DEFAULT_QUICK_ACTIONS,
+  loadConfig,
+  persistAuthorName,
+  persistDiffView,
+  persistIdentity,
+  persistPins,
+  type AutoClose,
+  type DiffViewMode,
+  type IdentityConfig,
+  type QuickAction,
+  type ReviewWorkspaceMode,
+} from "./config";
+import { resolveDisplayName } from "./attribution";
+import { resolveGithubIdentity } from "./github-identity";
+import { loadSkills, PaletteNamesContext, SlashSkillsContext } from "./skills";
+import { mergeSlashItems, slashItemsFrom, type SlashItem } from "./slash-palette";
+import {
+  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 { ThreadClient } 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 { ShareDialog } from "./components/ShareDialog";
+import { shareDialogStore } from "./components/share-dialog-store";
+import { Toolbar } from "./components/primitives/Toolbar";
+import { groupInbox, projectName, threadTitle } from "./components/thread-tree";
+import { ThreadTree } from "./components/ThreadTree";
+import { ChangesFileTree } from "./components/ChangesColumn";
+import { MenuControlProvider, useMenuControlState } from "./components/menu-control";
+import { ProjectTreeView } from "./components/ProjectTreeView";
+import { AppShell, type FocusPane, type ProjectPanelMode } from "./components/AppShell";
+import type { ClientExtensionRegistry } from "./client-extension-registry";
+import type { ExtensionUIContext } from "@cueloop/extension-api/client";
+import { EditorGrid } from "./components/EditorGrid";
+import { GridTabContent } from "./components/GridTabContent";
+import { useChangesWorkbench } from "./use-changes-workbench";
+import { useRepoChanges } from "./use-repo-changes";
+import { useThreadBodyEditing } from "./use-thread-body-editing";
+import { useRememberLayout } from "./use-remember-layout";
+import type { LaunchLayout } from "./launch-layout";
+import { ThreadFooter, THREAD_FOOTER_HEIGHT } from "./components/ThreadFooter";
+import { ConfirmCard } from "./components/ConfirmCard";
+import { THREAD_VIEW_CHEATSHEET, ThreadView } from "./components/ThreadView";
+import {
+  curationCommandEntries,
+  diffCommandEntries,
+  resolveNavKey,
+  resolveSessionChord,
+  sessionCommandEntries,
+  treeCommandEntries,
+} from "./thread-chords";
+import { type DiffFoldControls } from "./components/DiffContentView";
+import { commentCountsByFile, readsFrozenDiff } from "./view-diff";
+import { annotationTarget, isAddressed, isAgentNote, threadShareLinks } from "@cueloop/schema";
+import type {
+  Annotation,
+  Artifact,
+  DiffFileContents,
+  Identity,
+  ShareLink,
+  Thread,
+  MessageOutcome,
+} 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 = 2000;
 
 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;
+  /** 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<ThreadClient>;
+  shareTransport?: ShareTransport;
+  /**
+   * 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 message.
+   */
+  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;
+  /** The pane composition to open in; a create-command sets it, a bare launch restores the remembered one. */
+  layout?: LaunchLayout;
+  /** Serve mode: the frozen working-tree diff an observer reads for the served workbench thread. */
+  servedArtifact?: Artifact;
+  extensionRegistry?: ClientExtensionRegistry;
+}
+
+function extensionContext(cwd: string | undefined, threadId: string | null): ExtensionUIContext {
+  return { workspace: cwd ?? process.cwd(), threadId };
+}
+
+/** 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;
+}
+
+/** Whether a thread already has at least one live share link. */
+function isSharedThread(session: Thread | null): boolean {
+  return session !== null && (threadShareLinks(session)?.length ?? 0) > 0;
+}
+
+/** A thread's live share links for the share dialog, or an empty list with no session. */
+function shareLinksFor(session: Thread | null): ShareLink[] {
+  return session ? (threadShareLinks(session) ?? []) : [];
+}
+
+/** The title the share dialog shows and prefills a new link with, or empty with no session. */
+function shareThreadName(session: Thread | null): string {
+  return session ? threadTitle(session) : "";
+}
+
+/** Show the diff source before long titles can truncate it in the header. */
+function reviewThreadTitle(session: Thread): string {
+  if (session.artifact.type === "diff" && session.artifact.meta.vcs)
+    return `vcs: ${session.artifact.meta.vcs} · ${threadTitle(session)}`;
+
+  return threadTitle(session);
+}
+
+/** The drop-up chrome or a floating popover menu (thread actions, editor split) holds the keyboard. */
+function keyboardHeldByMenu(
+  menuDialog: "keybinds" | "settings" | null,
+  openMenuId: string | null,
+): boolean {
+  return menuChromeOpen(menuDialog) || openMenuId !== null;
+}
+
+/** A non-modal toast: escape dismisses it only when nothing else owns escape (no overlay, not span mode). */
+export function toastDismissRequested(
+  toastOpen: boolean,
+  key: { name: string },
+  overlay: KeyState["overlay"],
+  spanMode: boolean,
+): boolean {
+  return toastOpen && key.name === "escape" && overlay === "none" && !spanMode;
+}
+
+/** ctrl+q quits from anywhere, ahead of every focus/menu/overlay gate, with no confirmation. */
+export function quitKeyHandled(
+  key: { name: string; ctrl?: boolean },
+  onExit?: (code: number) => void,
+): boolean {
+  if (!key.ctrl || key.name !== "q") return false;
+  onExit?.(0);
+
+  return true;
+}
+
+/** A popover menu is open, so the shell keyboard is modal: escape closes it, every other key is swallowed. */
+function menuModalHandled(
+  menuControl: { openMenuId: string | null; closeMenu: () => void },
+  key: { name: string },
+): boolean {
+  if (menuControl.openMenuId === null) return false;
+  if (key.name === "escape") menuControl.closeMenu();
+
+  return true;
+}
+
+/** True while a menu, an overlay, or the share dialog owns the keyboard instead of the thread view. */
+function keyboardOwnedElsewhere(
+  menuOwnsKeyboard: boolean,
+  overlay: KeyState["overlay"],
+  shareDialogOpen: boolean,
+): boolean {
+  return menuOwnsKeyboard || overlay !== "none" || shareDialogOpen;
+}
+
+/** 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;
+}
+
+/** The thread body edits inline only for its owner, on an unresolved markdown thread (never a diff). */
+function canEditThreadBody(
+  threadViewActive: boolean,
+  isDiff: boolean,
+  isOwner: boolean,
+  resolved: boolean,
+): boolean {
+  return threadViewActive && !isDiff && isOwner && !resolved;
+}
+
+/** The owner's header actions: an edit/normal toggle that opens or leaves the inline editor, plus share when not editing. */
+function ownerThreadActions(actions: {
+  editing: boolean;
+  onEdit: () => void;
+  onExitEdit: () => void;
+  onShare: () => void;
+  theme: Theme;
+}): React.ReactNode {
+  return (
+    <Toolbar>
+      <Button onPress={actions.editing ? actions.onExitEdit : actions.onEdit} theme={actions.theme}>
+        {actions.editing ? " normal " : " edit "}
+      </Button>
+      {actions.editing ? null : (
+        <Button onPress={actions.onShare} theme={actions.theme}>
+          {" share "}
+        </Button>
+      )}
+    </Toolbar>
+  );
 }
 
-type Mode =
-  | { m: "normal" }
-  | { m: "span"; span: SpanState }
-  | { m: "compose"; kind: "comment" | "suggestion"; dispIdx: number; start: number; end: number; text: string }
-  | { m: "railEdit"; id: string; text: string }
-  | { m: "submit"; verdict: VerdictKind; summary: string };
-
-type RailTab = "review" | "agent";
-
-const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
-const VERDICT_LABEL: Record<VerdictKind, string> = {
-  comment: "Comment",
-  approve: "Approve",
-  request_changes: "Request 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 refreshDiffAction(onRefresh: () => void, theme: Theme): React.ReactNode {
+  return (
+    <Toolbar>
+      <Button onPress={onRefresh} foreground={theme.warning} theme={theme}>
+        {" refresh "}
+      </Button>
+    </Toolbar>
+  );
 }
 
-/** Rail card height (3 text rows + 1 margin), for reveal-scroll math. */
-const RAIL_CARD_HEIGHT = 4;
+/** Present pull request context with the ordinary read-only Thread renderer. */
+function pullRequestBriefThread(session: Thread): Thread {
+  return {
+    ...session,
+    artifact: {
+      ...session.artifact,
+      type: "reply",
+      content: session.artifact.meta.prBrief ?? "",
+    },
+    workingCopy: undefined,
+    annotations: [],
+  };
+}
+
+/** Pick the thread pane's body: the pixel prototype, the diff placeholder, the inline editor, or the read-only view. */
+function chooseThreadBody(choice: {
+  isPixelPrototype: boolean;
+  isDiff: boolean;
+  editingBody: boolean;
+  prototype: React.ReactNode;
+  diffPlaceholder: React.ReactNode;
+  editor: React.ReactNode;
+  threadView: React.ReactNode;
+}): React.ReactNode {
+  if (choice.isPixelPrototype) return choice.prototype;
+  if (choice.isDiff) return choice.diffPlaceholder;
+  if (choice.editingBody) return choice.editor;
+
+  return choice.threadView;
+}
+
+/** The author display name for a comment's hover tooltip: the reviewer's own name for their notes, else the resolved collaborator name. */
+function authorLabelResolver(
+  ownName: string | undefined,
+  participants: Identity[] | undefined,
+  overrides: Record<string, string>,
+): (annotation: Annotation) => string | undefined {
+  return (annotation) =>
+    annotation.author === undefined
+      ? (ownName ?? "you")
+      : resolveDisplayName(annotation.author, participants, overrides);
+}
+
+/** 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[]>;
+  diffSourceKey: string;
+  liveWorkingTree: boolean;
+  frozenFiles?: readonly DiffFileContents[];
+  onOpenChangedFile: (path: string) => void;
+  onOpenProjectFile: (path: string) => void;
+  commentCounts?: ReadonlyMap<string, number>;
+  focused?: boolean;
+  theme: Theme;
+}): React.ReactNode {
+  const changes = useRepoChanges({
+    loadChanges: props.loadChanges,
+    visible: props.mode === "changes" && props.liveWorkingTree,
+    diffSourceKey: props.diffSourceKey,
+  });
+
+  if (props.mode === "changes") {
+    return (
+      <ChangesFileTree
+        files={props.liveWorkingTree ? changes : (props.frozenFiles ?? [])}
+        onSelectFile={props.onOpenChangedFile}
+        commentCounts={props.commentCounts}
+        focused={props.focused}
+        theme={props.theme}
+      />
+    );
+  }
+  return (
+    <ProjectTreeView
+      key={props.diffSourceKey}
+      loadFiles={props.loadProjectFiles}
+      onSelectFile={props.onOpenProjectFile}
+      focused={props.focused}
+      theme={props.theme}
+    />
+  );
+}
+
+/** Frozen reviews read their captured files directly; live workspaces poll the repo. */
+interface ProjectDiffFiles {
+  liveWorkingTree: boolean;
+  frozenFiles?: readonly DiffFileContents[];
+}
+
+function projectDiffFiles(session: Thread): ProjectDiffFiles {
+  const frozen = readsFrozenDiff(session);
+
+  return {
+    liveWorkingTree: !frozen,
+    frozenFiles: frozen ? session.artifact.files : undefined,
+  };
+}
+
+/** 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;
+}
+
+/** 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();
+
+  if (!threadViewActive) {
+    return base;
+  }
+
+  return [
+    ...THREAD_VIEW_CHEATSHEET,
+    { title: "Nav mode · session", entries: sessionCommandEntries() },
+    { title: "Nav mode · diff", entries: diffCommandEntries() },
+    { title: "Nav mode · discussion", entries: curationCommandEntries() },
+    { title: "Nav mode · history", entries: treeCommandEntries() },
+  ];
+}
+
+/** The Threads sidebar opens from the launch layout; a bare launch opens it only on the inbox. */
+function initialThreadsOpen(
+  layout: LaunchLayout | undefined,
+  sessionId: string | undefined,
+): boolean {
+  return layout ? layout.threads : sessionId === undefined;
+}
 
-export function App({ home, sessionId, readOnly = false, onExit }: AppProps): React.ReactNode {
+function initialFocusedPane(
+  sessionId: string | undefined,
+  zoomed: boolean,
+  layout?: LaunchLayout,
+): FocusPane {
+  if (sessionId === undefined) return "threads";
+
+  return layout?.focusPane ?? (zoomed ? "changes" : "thread");
+}
+
+function bareShellDefersKeys(
+  sessionIsNull: boolean,
+  overlayIsNone: boolean,
+  focusedPane: FocusPane,
+): boolean {
+  return sessionIsNull && overlayIsNone && focusedPane !== "threads";
+}
+
+function surfaceSuspended(base: boolean, focusedPane: FocusPane, pane: FocusPane): boolean {
+  return base || focusedPane !== pane;
+}
+
+export function threadsNavHandled(params: {
+  focusedPane: FocusPane;
+  quiet: boolean;
+  key: { name: string };
+  count: number;
+  setInboxCursor: (update: (cursor: number) => number) => void;
+  openSession: () => void;
+}): boolean {
+  const { focusedPane, quiet, key, count } = params;
+
+  if (focusedPane !== "threads" || !quiet || count === 0) return false;
+  if (key.name === "j" || key.name === "down") {
+    params.setInboxCursor((cursor) => Math.min(cursor + 1, count - 1));
+
+    return true;
+  }
+  if (key.name === "k" || key.name === "up") {
+    params.setInboxCursor((cursor) => Math.max(cursor - 1, 0));
+
+    return true;
+  }
+  if (key.name === "return" || key.name === "enter") {
+    params.openSession();
+
+    return true;
+  }
+
+  return false;
+}
+
+export function paneCycleRequested(
+  key: { name: string },
+  overlay: string,
+  menuOwnsKeyboard: boolean,
+  threadComposing: boolean,
+): boolean {
+  return key.name === "tab" && overlay === "none" && !menuOwnsKeyboard && !threadComposing;
+}
+
+export function visiblePanes(
+  sidebarOpen: boolean,
+  threadShown: boolean,
+  changesOpen: boolean,
+  projectOpen: boolean,
+): FocusPane[] {
+  const panes: FocusPane[] = [];
+
+  if (sidebarOpen) panes.push("threads");
+  if (threadShown) panes.push("thread");
+  if (changesOpen) panes.push("changes");
+  if (projectOpen) panes.push("project");
+
+  return panes;
+}
+
+export function nextFocusPane(
+  current: FocusPane,
+  panes: FocusPane[],
+  backward: boolean,
+): FocusPane {
+  if (panes.length === 0) return current;
+  const index = panes.indexOf(current);
+  const step = backward ? -1 : 1;
+
+  return panes[(index + step + panes.length) % panes.length] ?? current;
+}
+
+/** The panes that can own the keyboard: a diff's Thread pane is an inert placeholder, so it is out. */
+function navigableFocusPanes(
+  sidebarOpen: boolean,
+  zoomed: boolean,
+  isDiff: boolean,
+  changesOpen: boolean,
+  projectOpen: boolean,
+): FocusPane[] {
+  return visiblePanes(sidebarOpen, !zoomed && !isDiff, changesOpen, projectOpen);
+}
+
+/** The layout hid or inert-ed the focused pane: fall back to the first navigable one, else stay put. */
+export function reconciledFocus(navigable: FocusPane[], focusedPane: FocusPane): FocusPane | null {
+  if (navigable.length === 0 || navigable.includes(focusedPane)) return null;
+
+  return navigable[0] ?? null;
+}
+
+export function App({
+  home,
+  sessionId,
+  cwd,
+  readOnly = false,
+  onExit,
+  onReady,
+  clock,
+  openClient,
+  shareTransport,
+  role = "owner",
+  selfAuthor,
+  appearance = "dark",
+  layout,
+  servedArtifact,
+  extensionRegistry,
+}: AppProps): React.ReactNode {
+  const { observer, isOwner } = computeRoleCapabilities(readOnly, role);
   const controller = useMemo(
-    () => createReviewController({ home, sessionId, readOnly, onExit }),
+    () =>
+      createReviewController({
+        home,
+        sessionId,
+        cwd,
+        readOnly: observer,
+        onExit,
+        clock,
+        openClient,
+        shareTransport,
+        servedArtifact,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [home, sessionId],
   );
+  const showExtensionError = useCallback(
+    (message: string) => controller.showToast(message),
+    [controller],
+  );
+
   useEffect(() => {
     controller.connect();
+
     return () => controller.close();
   }, [controller]);
-  const { session, inbox, status, error, completion, editOrphanCount } = useSyncExternalStore(
-    controller.subscribe,
-    controller.getSnapshot,
-    controller.getSnapshot,
+  // 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);
+
+  // A shared plan you own polls for collaborator notes while it is open; the
+  // merge refreshes through the normal event path. Stops on leave.
+  const threadShared = isSharedThread(session);
+  useEffect(() => {
+    if (!isOwner || !threadShared) return;
+
+    return controller.startShareSync();
+  }, [isOwner, session?.id, threadShared, controller]);
   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);
+  // 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(() => initialThreadsOpen(layout, sessionId));
+  // the Changes + Project right region and its editor grid (tabs, splits, zoom)
+  const workbench = useChangesWorkbench({ layout });
+  const [focusedPane, setFocusedPane] = useState<FocusPane>(() =>
+    initialFocusedPane(sessionId, workbench.zoomed, layout),
+  );
+  // only the session view persists from here; the bare shell owns its own (NoThreadShell), so this
+  // workbench stays inactive with no session and never clobbers what the shell saved
+  useRememberLayout(
+    layout,
+    session !== null,
+    sidebarOpen,
+    workbench.changesOpen,
+    workbench.projectOpen,
+    workbench.zoomed,
+  );
+  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 [shareDialogOpen, setShareDialogOpen] = useState(false);
+  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 [defaultMessage, setDefaultMessage] = useState<MessageOutcome>("approved");
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
+  const [selectedCurationId, setSelectedCurationId] = useState<string | undefined>(undefined);
   const [railTab, setRailTab] = useState<RailTab>("review");
-  // ~2s focus pulse on the document highlight when a rail card is activated
-  const [pulseAnn, setPulseAnn] = useState<string | null>(null);
+  // 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("");
-  // 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
+  // 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 [identity, setIdentity] = useState<IdentityConfig>({ provider: "typed" });
+  const [quickActions, setQuickActions] = useState<QuickAction[]>(DEFAULT_QUICK_ACTIONS);
+  const [skills, setSkills] = useState<SlashItem[]>([]);
+  const [reviewSkill, setReviewSkill] = useState("code-review");
+  const [reviewWorkspace, setReviewWorkspace] = useState<ReviewWorkspaceMode>("worktree");
+  const reviewSkillOptions = useMemo(
+    () => [...new Set([reviewSkill, "code-review", ...skills.map((skill) => skill.name)])],
+    [reviewSkill, skills],
+  );
+  const paletteNames = useMemo(
+    () => new Set(mergeSlashItems(slashItemsFrom(quickActions), skills).map((item) => item.name)),
+    [quickActions, skills],
+  );
+  // opt-in: render a prototype as a kitty pixel mockup instead of the markdown doc
+  const [prototypePixels, setPrototypePixels] = useState(false);
+
   useEffect(() => {
-    const cfg = loadConfig({ repoRoot: session?.workspace.repoRoot });
-    keysRef.current = cfg.keys;
-    Object.assign(T, cfg.theme);
-    controller.applyConfig(cfg);
-  }, [session?.workspace.repoRoot, controller]);
+    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);
+    setIdentity(config.identity);
+    setQuickActions(config.actions);
+    setSkills(loadSkills(config.skillsPath));
+    setReviewSkill(config.review.skill);
+    setReviewWorkspace(config.review.workspace);
+    setAutoClose(config.ui.autoClose);
+    setDiffView(config.ui.diffView);
+    setDefaultMessage(config.ui.defaultMessage);
+    setPinnedIds(new Set(config.ui.pins));
+    controller.applyConfig(config);
+  }, [session?.workspace.repoRoot, controller, keyBindings, appearance]);
   useEffect(
     () => () => {
       if (pulseTimer.current) clearTimeout(pulseTimer.current);
@@ -130,1035 +695,816 @@ export function App({ home, sessionId, readOnly = false, onExit }: AppProps): Re
     [],
   );
 
+  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]);
+
+  // Bumped on every identity change so a slow GitHub sync that lands after a newer rename is discarded.
+  const identityGenerationRef = useRef(0);
+  const applyIdentity = (next: IdentityConfig): void => {
+    identityGenerationRef.current += 1;
+    setIdentity(next);
+    try {
+      persistIdentity(next);
+    } catch {
+      controller.setStatus("could not save identity to config");
+    }
+  };
+  const syncGithubIdentity = (): void => {
+    const generation = (identityGenerationRef.current += 1);
+    void resolveGithubIdentity().then((github) => {
+      if (identityGenerationRef.current !== generation) return;
+      if (!github) return controller.setStatus("GitHub not connected - run gh auth login");
+      const name = github.name?.trim() || github.login;
+
+      applyIdentity({ name, provider: "github" });
+    });
+  };
+
+  // ── settings dialog: config-backed model, navigation, persistence ──
+  const {
+    settingsNav,
+    settingsCategories,
+    settingsValues,
+    cycleSetting,
+    handleSettingsKey,
+    onCategorySelect,
+    openSettings,
+  } = useSettingsDialog({
+    theme,
+    appearance,
+    autoClose,
+    setAutoClose,
+    diffView,
+    setDiffView,
+    themeName,
+    setThemeName,
+    themeOverrides,
+    setTheme,
+    quickActions,
+    setQuickActions,
+    setMenuDialog,
+    identityName: identity.name,
+    identityProvider: identity.provider,
+    onSyncGithubIdentity: syncGithubIdentity,
+    onRenameDisplayName: () => {
+      setMenuDialog(null);
+      setMode({ type: "renameSelf", text: identity.name ?? "" });
+    },
+    reviewSkill,
+    reviewSkillOptions,
+    setReviewSkill,
+    reviewWorkspace,
+    setReviewWorkspace,
+  });
+
   // ── derived view model ──────────────────────
   const display = controller.display();
   const rows = controller.rows();
+  const rejectedRows = controller.rejectedRows();
   const marks = useMemo(
-    () => (session ? marksByDisplay(session.annotations, display, pulseAnn ?? undefined) : new Map<number, Mark[]>()),
-    [session, display, pulseAnn],
+    () =>
+      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>();
+
     for (const blockMarks of marks.values()) {
       for (const mark of blockMarks) if (mark.annotationId) ids.add(mark.annotationId);
     }
+
     return ids;
   }, [marks]);
-  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
-  }, [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;
-  };
+  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);
+  // inline body edit: the markdown editor owns the thread pane and all keys while open
+  const canEditBody = canEditThreadBody(threadViewActive, isDiff, isOwner, resolved);
+  const bodyEditing = useThreadBodyEditing({
+    controller,
+    sessionId: session?.id,
+    canEdit: canEditBody,
+  });
+  // 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]);
 
   // ── selection symmetry: one selected id, both sides ──
-  const pulse = (id: string): void => {
-    setPulseAnn(id);
-    if (pulseTimer.current) clearTimeout(pulseTimer.current);
-    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
-      }
-      return;
-    }
-  };
-
   const selectCardFromDocument = (annotationId: string): void => {
-    setFocusedAnn(annotationId);
-    revealRailCard(annotationId);
-  };
-
-  const selectCardFromRail = (annotationId: string): void => {
-    setFocusedAnn(annotationId);
-    pulse(annotationId);
-    revealAnchor(annotationId);
+    setFocusedAnnotationId(annotationId);
   };
 
   const openCardEdit = (annotationId: string): void => {
-    if (readOnly) return controller.setStatus("observer - read-only");
-    if (resolved) return controller.setStatus("review submitted - read-only");
+    if (observer) return controller.setStatus("observer - read-only");
     const annotation = session?.annotations.find((candidate) => candidate.id === annotationId);
+
     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);
+
+      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({ m: "railEdit", id: annotation.id, text: annotation.body });
+    setMode({ type: "railEdit", id: annotation.id, text: annotation.body });
   };
 
-  // ── keyboard grammar: build state, reduce, dispatch ──
-  const dispatch = (intent: Intent): void => {
-    switch (intent.t) {
-      case "exit":
-        return void onExit?.(0);
-      case "status":
-        return controller.setStatus(intent.msg);
-      case "move": {
-        const len = isDiff ? rows.length : display.length;
-        if (intent.to === "down") setCursor((c) => Math.min(len - 1, c + 1));
-        else if (intent.to === "up") setCursor((c) => Math.max(0, c - 1));
-        else if (intent.to === "top") setCursor(0);
-        else setCursor(len - 1);
-        return;
-      }
-      case "inboxMove": {
-        const len = inbox?.length ?? 0;
-        setInboxCursor((c) => (intent.to === "down" ? Math.min(len - 1, c + 1) : Math.max(0, c - 1)));
-        return;
-      }
-      case "openSession": {
-        const s = inbox?.[inboxCursor];
-        if (s) controller.open(s.id);
-        return;
-      }
-      case "startSpan": {
-        const d = display[cursor];
-        if (!d?.work) return;
-        const span = startSpan(cursor, displayText(d));
-        if (span) setMode({ m: "span", span });
-        return;
-      }
-      case "spanKey":
-        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": {
-        liveInput.current = "";
-        if (intent.from === "span" && mode.m === "span") {
-          setMode({
-            m: "compose",
-            kind: intent.kind,
-            dispIdx: mode.span.dispIdx,
-            start: mode.span.start,
-            end: mode.span.end,
-            text: "",
-          });
-        } else if (isDiff) {
-          const row = rows[cursor];
-          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();
-          if (native) {
-            setMode({ m: "compose", kind: intent.kind, ...native, text: "" });
-          } else {
-            const d = display[cursor];
-            if (d) setMode({ m: "compose", kind: intent.kind, dispIdx: cursor, start: 0, end: displayText(d).length, text: "" });
-          }
-        }
-        return;
-      }
-      case "openSubmit":
-        if (!session) return;
-        liveInput.current = "";
-        return void setMode({ m: "submit", verdict: defaultVerdict(session), summary: "" });
-      case "cut":
-        return controller.cut(cursor);
-      case "edit":
-        return controller.edit();
-      case "editCard":
-        if (focusedAnn) openCardEdit(focusedAnn);
-        return;
-      case "nextAnn":
-      case "prevAnn": {
-        const anns = session?.annotations ?? [];
-        if (!anns.length) return;
-        const idx = anns.findIndex((a) => a.id === focusedAnn);
-        const next = idx === -1 ? 0 : (idx + (intent.t === "nextAnn" ? 1 : -1) + anns.length) % anns.length;
-        return void selectCardFromDocument(anns[next]!.id);
-      }
-      case "removeAnnotation":
-        if (focusedAnn) {
-          controller.removeAnnotation(focusedAnn);
-          setFocusedAnn(undefined);
-        }
-        return;
-      case "deselect":
-        renderer?.clearSelection();
-        setFocusedAnn(undefined);
-        setPulseAnn(null);
-        return;
-      case "closeOverlay":
-        return void setMode({ m: "normal" });
-      case "saveCompose": {
-        const body = liveInput.current.trim();
-        if (mode.m === "railEdit") {
-          if (session && body) controller.updateAnnotation(mode.id, body);
-          return void setMode({ m: "normal" });
-        }
-        if (mode.m !== "compose") return;
-        if (session && body) {
-          const annotationId = controller.annotate(mode.kind, mode.dispIdx, mode.start, mode.end, body);
-          if (annotationId) setFocusedAnn(annotationId);
-        }
-        return void setMode({ m: "normal" });
-      }
-      case "submitVerdict":
-        if (mode.m === "submit") controller.submit(mode.verdict, liveInput.current);
-        return void setMode({ m: "normal" });
-      case "cycleVerdict": {
-        if (mode.m !== "submit") return;
-        const idx = (VERDICTS.indexOf(mode.verdict) + intent.dir + VERDICTS.length) % VERDICTS.length;
-        return void setMode({ ...mode, verdict: VERDICTS[idx]! });
-      }
-      case "finishReview":
-        return controller.finishReview();
-      case "optInAutoClose":
-        return controller.optInAutoClose();
-      case "dismissCompletion":
-        return controller.dismissCompletion();
+  // a markdown thread edits inline; a diff is not markdown, so it keeps the external-editor hand-off
+  const openBodyEditor = (): void => {
+    if (canEditBody) {
+      bodyEditing.openEditor();
+
+      return;
+    }
+    renderer?.suspend();
+    try {
+      controller.edit();
+    } finally {
+      renderer?.resume();
     }
   };
 
-  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",
-      view: !session ? "inbox" : isDiff ? "diff" : "plan",
-      spanMode: mode.m === "span",
-      resolved: !!resolved,
-      hasInboxItems: !!inbox?.length,
-      annotationCount: session?.annotations.length ?? 0,
-      hasFocusedAnnotation: focusedAnn !== undefined,
-      cursorAnnotatable: isDiff
-        ? 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);
+  // ── keyboard grammar: build state, reduce, dispatch ──
+  const dispatch = createIntentDispatch({
+    controller,
+    onExit,
+    isDiff,
+    display,
+    rows,
+    cursor,
+    inbox: inbox === null ? null : grouped.ordered,
+    inboxCursor,
+    mode,
+    session,
+    defaultMessage,
+    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),
+    setLocalIdentityName: (name: string) => {
+      applyIdentity(name ? { name, provider: "typed" } : { provider: "typed" });
+    },
+    liveInput,
+    setCursor,
+    setInboxCursor,
+    setMode,
+    setRailTab,
+    setSelectedEntryId,
+    setFocusedAnnotationId,
+    setSelectedCurationId,
+    setPulsedAnnotationId,
+    selectCardFromDocument,
+    openBodyEditor,
+    openCardEdit,
+    toggleDiffView: () => {
+      const next: DiffViewMode = diffView === "stacked" ? "split" : "stacked";
+
+      setDiffView(next);
+      persistDiffView(next);
+    },
+    openShareDialog: () => {
+      if (!isOwner) return controller.setStatus("only the plan owner can share");
+      shareDialogStore.getState().reset();
+      setShareDialogOpen(true);
+    },
   });
 
-  // ── 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} />;
+  const overlay = resolveOverlay(mode, completion.phase, walking);
 
-  const s = session!;
-  const pendingCount = s.annotations.length + (s.workingCopy !== undefined ? 1 : 0);
+  const menuControl = useMenuControlState();
+  const menuOwnsKeyboard = keyboardHeldByMenu(menuDialog, menuControl.openMenuId);
+  // an overlay (submit, walk, prompt, confirm, share choice), the manage-access
+  // dialog, or the menu takes the keyboard from the thread view; the view suspends
+  // its own grammar meanwhile so typing lands in the dialog, not the thread
+  const threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay, shareDialogOpen);
 
-  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}
-      />
-    );
-  }
+  const navigablePanes = navigableFocusPanes(
+    sidebarOpen,
+    workbench.zoomed,
+    isDiff,
+    workbench.changesOpen,
+    workbench.projectOpen,
+  );
+  useEffect(() => {
+    // the bare shell drives its panes from its own workbench, so only reconcile against this one
+    if (!session) return;
+    const next = reconciledFocus(navigablePanes, focusedPane);
 
-  const composeState =
-    mode.m === "compose" && !isDiff
-      ? {
-          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 });
-          },
-          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);
-  };
+    if (next) setFocusedPane(next);
+  }, [session, navigablePanes, focusedPane]);
+  const cyclePanes = (backward: boolean): void =>
+    setFocusedPane((current) => nextFocusPane(current, navigablePanes, backward));
+  const runNavCommand = (
+    key: { name: string; shift?: boolean },
+    selection: {
+      start: { blockIndex: number; char: number };
+      end: { blockIndex: number; char: number };
+    } | null = null,
+  ): boolean => {
+    const intent = resolveNavKey(key, {
+      isOwner,
+      resolved,
+      treeActive: railTab === "tree",
+      isDiff,
+    });
 
-  const onLineActivate = (dispIdx: number): void => {
-    // releasing a drag-selection lands here too; a live selection is not a click
-    if (renderer?.hasSelection) return;
-    setCursor(dispIdx);
-    const annotationId = marks.get(dispIdx)?.[0]?.annotationId;
-    if (annotationId) selectCardFromDocument(annotationId);
-  };
+    if (!intent) return false;
+    if (intent.type === "cut" && selection) {
+      controller.cut(
+        selection.start.blockIndex,
+        selection.start.char,
+        selection.end.char,
+        selection.end.blockIndex,
+      );
+    } else dispatch(intent);
 
-  const onEditRequest = (): void => {
-    if (readOnly) return controller.setStatus("observer - read-only");
-    if (resolved) return controller.setStatus("review submitted - read-only");
-    controller.edit();
+    return true;
   };
+  // clicking a sidebar thread moves the cursor onto it too, so the row shows its selected backdrop at once
+  const openThread = (id: string): void => {
+    // save the open editor into the leaving thread's working copy before the switch, so a click away never drops edits
+    if (bodyEditing.editing) bodyEditing.requestExit();
+    const index = grouped.ordered.findIndex((thread) => thread.id === id);
 
-  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
-          }
-          onTab={setRailTab}
-          onSelectCard={selectCardFromRail}
-          onActivateCard={openCardEdit}
-          railScrollRef={railScrollRef}
-        />
-      </box>
-      {mode.m === "compose" && isDiff ? (
-        <ComposeBar mode={mode} quote={rows[mode.dispIdx]?.text ?? ""} 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"
-                : 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 ─────────────────────────────────────
+    if (index >= 0) setInboxCursor(() => index);
+    controller.open(id);
+  };
 
-interface ComposeState {
-  kind: "comment" | "suggestion";
-  dispIdx: number;
-  quote: string;
-  text: string;
-  onInput: (text: string) => void;
-  onSave: () => void;
-  onCancel: () => void;
-}
+  const threadSurfaceHandledKey = (key: KeyEvent): boolean => {
+    if (!threadViewActive || threadViewSuspended) return false;
+    if (!threadComposing) {
+      const chord = resolveSessionChord(key, { isOwner, resolved });
 
-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 }}
-        />,
-      );
+      if (chord) dispatch(chord);
     }
-  }
-  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>
-  );
-}
+    return true;
+  };
 
-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);
+  useKeyboard((key) => {
+    if (quitKeyHandled(key, onExit)) return;
+    // the inline body editor owns the pane and every key while open
+    if (bodyEditing.editing) return;
+    // the share dialog owns its own keys while open; the shell grammar stands down
+    if (shareDialogOpen) return;
+    if (menuModalHandled(menuControl, key)) return;
+    if (paneCycleRequested(key, overlay, menuOwnsKeyboard, threadComposing)) {
+      return cyclePanes(Boolean(key.shift));
+    }
+    if (
+      threadsNavHandled({
+        focusedPane,
+        quiet: overlay === "none" && !menuOwnsKeyboard && !threadComposing,
+        key,
+        count: grouped.ordered.length,
+        setInboxCursor,
+        openSession: () => dispatch({ type: "openSession" }),
+      })
+    )
+      return;
+    if (threadSurfaceHandledKey(key)) 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 (toastDismissRequested(toast !== null, key, overlay, mode.type === "span"))
+      return controller.dismissToast();
+    if (bareShellDefersKeys(session === null, overlay === "none", focusedPane)) return;
+    const state = buildKeyState({
+      keys: keysRef.current,
+      observer,
+      isOwner,
+      overlay,
+      session,
+      isDiff,
+      mode,
+      resolved,
+      inbox,
+      focusedAnnotationId,
+      walk,
+      walkFileList,
+      rows,
+      cursor,
+      display,
     });
-    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;
-}
+    keyBindings.setContext({
+      overlay: state.overlay,
+      spanMode: state.spanMode,
+    });
+    const action = keyBindings.resolveAction({
+      name: key.name,
+      shift: !!key.shift,
+    });
 
-// ── the rail ──────────────────────────────────
+    for (const intent of reduceKey(
+      state,
+      { name: key.name, shift: !!key.shift, meta: !!key.meta },
+      action,
+    ))
+      dispatch(intent);
+  });
 
-interface CardEditState {
-  id: string;
-  text: string;
-  onInput: (text: string) => void;
-  onSave: () => void;
-  onCancel: () => void;
-}
+  // after every keyboard hook above, so their subscriptions precede the signal
+  useReadySignal(usableScreenReached(error, session, inbox), onReady);
 
-function Rail({
-  session,
-  selectedId,
-  resolvedIds,
-  railTab,
-  pendingCount,
-  cardEdit,
-  onTab,
-  onSelectCard,
-  onActivateCard,
-  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;
-  onTab: (tab: RailTab) => void;
-  onSelectCard: (id: string) => void;
-  onActivateCard: (id: string) => 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 }} />
-          <text fg={session.status === "resolved" ? T.green : T.accent}>
-            {session.status === "resolved" ? `resolved: ${session.verdict!.kind.replace("_", " ")}` : `Submit review (${pendingCount}) ⏎`}
-          </text>
-        </>
-      )}
-    </box>
+  // ── 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}
+      onClose={() => setMenuDialog(null)}
+    />
   );
-}
 
-/** 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>
+  // ── render ──────────────────────────────────
+  if (error) return <ErrorScreen error={error} theme={theme} />;
+  if (!session)
+    return inbox ? (
+      <SlashSkillsContext.Provider value={skills}>
+        <PaletteNamesContext.Provider value={paletteNames}>
+          <NoThreadShell
+            toast={toast}
+            extensionRegistry={extensionRegistry}
+            extensionContext={extensionContext(cwd, null)}
+            rows={grouped.rows}
+            inboxCursor={inboxCursor}
+            onOpenThread={openThread}
+            mode={mode}
+            theme={theme}
+            controller={controller}
+            setMode={setMode}
+            menuChrome={menuChrome}
+            onOpenMenu={openSettings}
+            sidebarOpen={sidebarOpen}
+            onToggleSidebar={() => setSidebarOpen((open) => !open)}
+            focusedPane={focusedPane}
+            onFocusPane={setFocusedPane}
+            menuControl={menuControl}
+            pinnedIds={pinnedIds}
+            onPin={togglePin}
+            onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
+            quickActions={quickActions}
+            onWelcomeComposingChange={setWelcomeComposing}
+            layout={layout}
+          />
+        </PaletteNamesContext.Provider>
+      </SlashSkillsContext.Provider>
+    ) : (
+      <ConnectingScreen theme={theme} />
     );
-  }
-  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>
+  const activeSession = session;
+  const resolveAuthorLabel = authorLabelResolver(
+    identity.name,
+    activeSession.participants,
+    authorNames,
   );
-}
 
-/** Forward-compatible: open annotation kinds may carry a blocking flag. */
-function annotationBlocking(annotation: Annotation): boolean {
-  return (annotation as Annotation & { blocking?: boolean }).blocking === true;
-}
+  if (isCompletionOverlayPhase(completion) && activeSession.message)
+    return (
+      <CompletionScreen
+        theme={theme}
+        session={activeSession}
+        message={activeSession.message.outcome}
+        completion={completion}
+        status={status}
+        onClose={() => dispatch({ type: "finishReview" })}
+        onBackToPlan={() => dispatch({ type: "dismissCompletion" })}
+        onAlways={() => dispatch({ type: "optInAutoClose" })}
+      />
+    );
 
-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>
-  );
-}
+  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,
+    quickActions,
+    liveInput,
+    setMode,
+    dispatch,
+  });
+  const { showOwnerActions, showDiffRefresh, prototypeCanComment, chromeHidden, prototypePath } =
+    buildRenderFlags({
+      session: activeSession,
+      isOwner,
+      isDiff,
+      isPixelPrototype,
+      resolved,
+      menuDialog,
+      resolvedIds,
+    });
 
-/** 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>
-  );
-}
+  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");
+    openBodyEditor();
+  };
 
-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>
-  );
-}
+  // 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 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>
+  const threadFooter = (
+    <ThreadFooter
+      repo={projectName(activeSession.workspace)}
+      branch={activeSession.workspace.branch}
+      onSubmit={onSubmitRequest}
+      canSubmit={canSubmitReview(isOwner, resolved, observer)}
+      pendingAnnotations={
+        activeSession.annotations.filter(
+          (annotation) => !isAddressed(annotation) && !isAgentNote(annotation),
+        ).length
+      }
+      theme={theme}
+    />
   );
-}
 
-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>
+    <SlashSkillsContext.Provider value={skills}>
+      <PaletteNamesContext.Provider value={paletteNames}>
+        <ThemeProvider theme={theme}>
+          <MenuControlProvider value={menuControl}>
+            <AppShell
+              extensionRegistry={extensionRegistry}
+              extensionContext={{
+                workspace: activeSession.workspace.repoRoot,
+                threadId: activeSession.id,
+              }}
+              onExtensionError={showExtensionError}
+              sidebarOpen={sidebarOpen}
+              onToggleSidebar={() => setSidebarOpen((open) => !open)}
+              onOpenMenu={openSettings}
+              onFocusPane={setFocusedPane}
+              focusedPane={focusedPane}
+              threadsPanel={
+                <scrollbox style={{ flexGrow: 1 }} focused={false}>
+                  <ThreadTree
+                    rows={grouped.rows}
+                    cursor={inboxCursor}
+                    activeId={activeSession.id}
+                    focused={focusedPane === "threads"}
+                    pinnedIds={pinnedIds}
+                    width={30}
+                    onSelect={openThread}
+                    onPin={togglePin}
+                    onRename={(id, title) =>
+                      setMode({ type: "renameThread", sessionId: id, text: title })
+                    }
+                    onRequestDelete={(id, title) =>
+                      setMode({ type: "confirmDelete", sessionId: id, title })
+                    }
+                    theme={theme}
+                  />
+                </scrollbox>
+              }
+              threadTitle={reviewThreadTitle(activeSession)}
+              threadActions={
+                showOwnerActions
+                  ? ownerThreadActions({
+                      editing: bodyEditing.editing,
+                      onEdit: onEditRequest,
+                      onExitEdit: bodyEditing.requestExit,
+                      onShare: () => dispatch({ type: "share" }),
+                      theme,
+                    })
+                  : showDiffRefresh
+                    ? refreshDiffAction(() => void controller.refreshDiff(), theme)
+                    : undefined
+              }
+              threadPanel={
+                <box style={{ flexGrow: 1, flexDirection: "column" }}>
+                  <box style={{ flexGrow: 1, flexDirection: "row" }}>
+                    {chooseThreadBody({
+                      isPixelPrototype,
+                      isDiff,
+                      editingBody: bodyEditing.editing,
+                      prototype: (
+                        <PrototypePixels
+                          prototypePath={prototypePath}
+                          canComment={prototypeCanComment}
+                          onCommentElement={onCommentPrototype}
+                          onComposingChange={setPrototypeComposing}
+                          hidden={chromeHidden}
+                        />
+                      ),
+                      diffPlaceholder: activeSession.artifact.meta.prBrief ? (
+                        <ThreadView
+                          session={pullRequestBriefThread(activeSession)}
+                          display={buildDisplay(activeSession.artifact.meta.prBrief)}
+                          marks={new Map()}
+                          quickActions={quickActions}
+                          suspended={threadViewSuspended}
+                          resolved
+                          observer
+                          onComposingChange={() => {}}
+                          onObserverBlocked={() => {}}
+                          onCursorChange={() => {}}
+                          onAnnotate={() => {}}
+                          onReply={() => {}}
+                          onUpdateAnnotation={() => {}}
+                          resolveAuthorLabel={() => undefined}
+                          onExit={() => onExit?.(0)}
+                        />
+                      ) : (
+                        <box
+                          style={{
+                            flexGrow: 1,
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                          }}
+                        >
+                          <text fg={theme.textDim}>Select a thread</text>
+                        </box>
+                      ),
+                      editor: bodyEditing.renderEditor(theme),
+                      threadView: (
+                        <ThreadView
+                          session={activeSession}
+                          suspended={surfaceSuspended(threadViewSuspended, focusedPane, "thread")}
+                          editOrphanCount={editOrphanCount}
+                          onComposingChange={setThreadComposing}
+                          onNavCommand={runNavCommand}
+                          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)}
+                          resolveAuthorLabel={resolveAuthorLabel}
+                          onExit={() => onExit?.(0)}
+                        />
+                      ),
+                    })}
+                  </box>
+                  {threadFooter}
+                </box>
+              }
+              changesOpen={workbench.changesOpen}
+              projectOpen={workbench.projectOpen}
+              onToggleChanges={workbench.toggleChanges}
+              onToggleProject={workbench.toggleProject}
+              onToggleRight={workbench.toggleRight}
+              projectMode={workbench.projectMode}
+              zoomHideThread={workbench.zoomed}
+              changesFooter={threadFooter}
+              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: surfaceSuspended(
+                          threadViewSuspended || !groupFocused,
+                          focusedPane,
+                          "changes",
+                        ),
+                        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),
+                        resolveAuthorLabel,
+                        onNavCommand: runNavCommand,
+                        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,
+                        )
+                      }
+                      // zoomed, the footer already rides the Changes pane, so no extra offset is needed
+                      emptyBottomPadding={workbench.zoomed ? 0 : THREAD_FOOTER_HEIGHT}
+                      theme={theme}
+                    />
+                  )}
+                  theme={theme}
+                />
+              }
+              projectPanel={
+                <ProjectPanelBody
+                  mode={workbench.projectMode}
+                  loadChanges={() => controller.repoChanges()}
+                  loadProjectFiles={() => controller.repoFiles()}
+                  diffSourceKey={activeSession.id}
+                  {...projectDiffFiles(activeSession)}
+                  // 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}
+                  focused={focusedPane === "project"}
+                  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
+                  onMouseUp={submitConfirmState.onCancel}
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "100%",
+                    height: "100%",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <box onMouseUp={(event) => event.stopPropagation()}>
+                    <ConfirmCard {...submitConfirmState} theme={theme} />
+                  </box>
+                </box>
+              ) : null}
+              <ShareDialog
+                key={String(shareDialogOpen)}
+                isOpen={shareDialogOpen}
+                threadName={shareThreadName(session)}
+                links={shareLinksFor(session)}
+                isOwner={isOwner}
+                onCreateLink={(input) => controller.createShareLink(input)}
+                onUpdateLink={(id, input) => controller.updateShareLink(id, input)}
+                onDeleteLink={(id) => controller.deleteShareLink(id)}
+                onCopyLink={(id) => controller.copyShareLink(id)}
+                onClose={() => setShareDialogOpen(false)}
+                theme={theme}
+              />
+              {menuChrome}
+            </AppShell>
+          </MenuControlProvider>
+        </ThemeProvider>
+      </PaletteNamesContext.Provider>
+    </SlashSkillsContext.Provider>
   );
 }
-
-// ── 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;
-}