@cueloop/client 0.1.0-alpha.65 → 0.1.0-alpha.67

package/src/App.tsx

@@ -18,7 +18,7 @@ import React, {
   useSyncExternalStore,
 } from "react";
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import type { Clock, MouseEvent } from "@opentui/core";
+import type { Clock } from "@opentui/core";
 import { marksByDisplay, type Mark } from "./view-plan";
 import { dimmedTheme } from "./theme";
 import {
@@ -26,7 +26,10 @@ import {
   DEFAULT_QUICK_ACTIONS,
   loadConfig,
   persistAuthorName,
+  persistDiffView,
+  persistPins,
   type AutoClose,
+  type DiffViewMode,
   type QuickAction,
 } from "./config";
 import {
@@ -39,42 +42,39 @@ import {
 import type { Theme } from "./theme";
 import { createReviewController, type ShareTransport } from "./session-controller";
 import type { SessionClient } from "@cueloop/daemon/client";
-import { launchHarnessInSplit } from "@cueloop/daemon/herdr-split";
-import { createIntentDispatch, type Mode } from "./intent-dispatch";
+import { createIntentDispatch, type Mode, type RailTab } from "./intent-dispatch";
 import { reduceKey, type KeyState } from "./keymap";
 import { KeyBindings, type CheatsheetSection } from "./key-bindings";
 import { ThemeProvider } from "./components/theme-context";
 import { Button } from "./components/primitives/Button";
 import { Toolbar } from "./components/primitives/Toolbar";
-import { Breadcrumb } from "./components/Breadcrumb";
+import { groupInbox, projectName, threadTitle } from "./components/session-tree";
+import { InboxList } from "./components/InboxList";
+import { ChangesFileTree } from "./components/ChangesColumn";
+import { ProjectTreeView } from "./components/ProjectTreeView";
+import { FileContentsView } from "./components/FileContentsView";
+import { AppShell, type ProjectPanelMode } from "./components/AppShell";
+import { EditorGrid } from "./components/EditorGrid";
+import type { EditorTab } from "./components/editor-grid";
+import { useChangesWorkbench } from "./use-changes-workbench";
+import { ThreadFooter } from "./components/ThreadFooter";
+import { ConfirmCard } from "./components/ConfirmCard";
 import { THREAD_VIEW_CHEATSHEET, ThreadView } from "./components/ThreadView";
 import {
+  DIFF_CHORD_ENTRIES,
   RAIL_CHORD_ENTRIES,
   resolveThreadChord,
   THREAD_CHORD_ENTRIES,
   TREE_CHORD_ENTRIES,
 } from "./thread-chords";
-import { DiffSheet } from "./components/DiffSheet";
+import { DiffSheet, type DiffFoldControls, type DiffSheetProps } from "./components/DiffSheet";
+import { commentCountsByFile, marksByRows, type DiffRow } from "./view-diff";
+import type { DiffFileContents } from "@cueloop/schema";
 import { PrototypeSheet } from "./components/PrototypeSheet";
 import type { PrototypeElement } from "./prototype-browser";
-import { type RailTab, type ReviewRailHandle } from "./components/ReviewRail";
-import type { AgentTerminalHandle } from "./components/agent-launcher";
-import { ReviewPanel } from "./components/ReviewPanel";
 import {
-  REVIEW_DEFAULT_WIDTH,
-  resolveReviewWidth,
-  toggleReviewPanelMode,
-  widthFromMouseColumn,
-  type ReviewPanelMode,
-} from "./review-panel";
-import {
-  buildCardEditState,
-  buildDiffComposeState,
-  buildHeaderItems,
   buildRenderFlags,
   buildSubmitConfirmState,
-  computePendingCount,
-  computeRailFootprint,
   computeRoleCapabilities,
   deriveReviewFlags,
   isCompletionOverlayPhase,
@@ -87,17 +87,18 @@ import {
   CompletionScreen,
   ConnectingScreen,
   ErrorScreen,
-  InboxScreen,
   MenuChrome,
+  NoThreadShell,
   TrailingOverlays,
 } from "./app-screens";
-
 /** A toast clears itself after this idle; esc dismisses it sooner. */
 const TOAST_DISMISS_MS = 4000;
 
 export interface AppProps {
   home?: string;
   sessionId?: string;
+  /** The launch directory whose git repo backs the no-session welcome tree; defaults to process.cwd(). */
+  cwd?: string;
   /**
    * Observer mode (SSH-served connections): every mutating primitive is ignored and
    * answers "observer - read-only" in the status line; navigation still works.
@@ -129,17 +130,193 @@ export interface AppProps {
 }
 
 /** True while the drop-up or one of its dialogs is open and owns the keyboard. */
-function menuChromeOpen(menuOpen: boolean, menuDialog: "keybinds" | "settings" | null): boolean {
-  return menuOpen || menuDialog !== null;
+function menuChromeOpen(menuDialog: "keybinds" | "settings" | null): boolean {
+  return menuDialog !== null;
+}
+
+/** True while a menu or an overlay owns the keyboard instead of the thread view. */
+function keyboardOwnedElsewhere(menuOwnsKeyboard: boolean, overlay: KeyState["overlay"]): boolean {
+  return menuOwnsKeyboard || overlay !== "none";
 }
 
-/** True while a menu, an overlay, or the agent terminal owns the keyboard instead of the thread view. */
-function keyboardOwnedElsewhere(
-  menuOwnsKeyboard: boolean,
-  overlay: KeyState["overlay"],
-  agentTerminal: AgentTerminalHandle | null,
-): boolean {
-  return menuOwnsKeyboard || overlay !== "none" || agentTerminal !== null;
+/** 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 inline-commenting props the diff sheet shares with the thread view, wired once by the app. */
+type DiffSurfaceProps = Pick<
+  DiffSheetProps,
+  | "session"
+  | "quickActions"
+  | "observer"
+  | "resolved"
+  | "suspended"
+  | "onComposingChange"
+  | "onObserverBlocked"
+  | "onCursorChange"
+  | "focusedAnnotationId"
+  | "onFocusAnnotation"
+  | "onAnnotate"
+  | "onReply"
+  | "onUpdateAnnotation"
+  | "onExit"
+>;
+
+/** The Changes tab body: the whole diff in one scroll container, or a bare hint when nothing changed. */
+function ChangesTabBody(props: {
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  theme: Theme;
+}): React.ReactNode {
+  const marks = useMemo(
+    () =>
+      marksByRows(props.surface.session.annotations, props.rows, props.surface.focusedAnnotationId),
+    [props.surface.session.annotations, props.rows, props.surface.focusedAnnotationId],
+  );
+
+  if (props.rows.length === 0) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={props.theme.textDim}>No changes</text>
+      </box>
+    );
+  }
+
+  return (
+    <DiffSheet
+      rows={props.rows}
+      marks={marks}
+      {...props.surface}
+      rejectedRows={props.rejectedRows}
+      fold={props.fold}
+      fileStats={props.fileStats}
+      split={props.split}
+      theme={props.dimmed ? dimmedTheme(props.theme) : undefined}
+    />
+  );
+}
+
+/** An editor tab's body: the whole diff for the Changes tab, a file's diff or contents for a file tab. */
+function GridTabContent(props: {
+  tab: EditorTab;
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  readFile: (path: string) => Promise<string | null>;
+  theme: Theme;
+}): React.ReactNode {
+  const { tab } = props;
+  if (tab.kind === "file" && tab.fileView === "contents" && tab.path !== undefined) {
+    return <FileContentsView path={tab.path} loadContents={props.readFile} theme={props.theme} />;
+  }
+  if (tab.kind !== "file") {
+    return (
+      <ChangesTabBody
+        rows={props.rows}
+        surface={props.surface}
+        rejectedRows={props.rejectedRows}
+        fold={props.fold}
+        fileStats={props.fileStats}
+        split={props.split}
+        dimmed={props.dimmed}
+        theme={props.theme}
+      />
+    );
+  }
+  // a single-file tab shows that file's rows alone, so its row indices are its own: comments and
+  // the caret report back in whole-diff indices, and the fold controls (a band to fold) do not apply
+  const fileRowIndices = props.rows.flatMap((row, index) => (row.file === tab.path ? [index] : []));
+  const rows = fileRowIndices.map((index) => props.rows[index]!);
+  const wholeIndex = (rowIndex: number): number => fileRowIndices[rowIndex] ?? rowIndex;
+  const rejectedRows = new Set(
+    fileRowIndices.flatMap((index, rowIndex) => (props.rejectedRows.has(index) ? [rowIndex] : [])),
+  );
+
+  return (
+    <ChangesTabBody
+      rows={rows}
+      surface={{
+        ...props.surface,
+        onCursorChange: (rowIndex) => props.surface.onCursorChange?.(wholeIndex(rowIndex)),
+        onAnnotate: (span, body) =>
+          props.surface.onAnnotate(
+            {
+              start: { blockIndex: wholeIndex(span.start.blockIndex), char: span.start.char },
+              end: { blockIndex: wholeIndex(span.end.blockIndex), char: span.end.char },
+            },
+            body,
+          ),
+      }}
+      rejectedRows={rejectedRows}
+      fileStats={props.fileStats}
+      split={props.split}
+      dimmed={props.dimmed}
+      theme={props.theme}
+    />
+  );
+}
+
+/** The Project pane body: the resolved repo's changed files in changes mode, its full tree otherwise. */
+function ProjectPanelBody(props: {
+  mode: ProjectPanelMode;
+  loadChanges: () => Promise<readonly DiffFileContents[]>;
+  loadProjectFiles: () => Promise<string[]>;
+  reloadKey: string;
+  onOpenChangedFile: (path: string) => void;
+  onOpenProjectFile: (path: string) => void;
+  commentCounts?: ReadonlyMap<string, number>;
+  theme: Theme;
+}): React.ReactNode {
+  const [changes, setChanges] = useState<readonly DiffFileContents[]>([]);
+  const loadRef = useRef(props.loadChanges);
+  useEffect(() => {
+    loadRef.current = props.loadChanges;
+  });
+  useEffect(() => {
+    let alive = true;
+
+    void loadRef.current().then(
+      (files) => {
+        if (alive) setChanges(files);
+      },
+      () => {
+        if (alive) setChanges([]);
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, [props.reloadKey, props.mode]);
+
+  if (props.mode === "changes") {
+    return (
+      <ChangesFileTree
+        files={changes}
+        onSelectFile={props.onOpenChangedFile}
+        commentCounts={props.commentCounts}
+        theme={props.theme}
+      />
+    );
+  }
+  return (
+    <ProjectTreeView
+      key={props.reloadKey}
+      loadFiles={props.loadProjectFiles}
+      onSelectFile={props.onOpenProjectFile}
+      theme={props.theme}
+    />
+  );
 }
 
 /** The keybinds dialog content: the thread grammar while the thread view owns the keys. */
@@ -153,6 +330,7 @@ function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): Che
   return [
     ...THREAD_VIEW_CHEATSHEET,
     { title: "Session", entries: [...THREAD_CHORD_ENTRIES] },
+    { title: "Diff", entries: [...DIFF_CHORD_ENTRIES] },
     { title: "Rail", entries: [...RAIL_CHORD_ENTRIES] },
     { title: "Tree", entries: [...TREE_CHORD_ENTRIES] },
     ...base.filter((section) => section.title === "Agent terminal"),
@@ -162,6 +340,7 @@ function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): Che
 export function App({
   home,
   sessionId,
+  cwd,
   readOnly = false,
   onExit,
   clock,
@@ -177,6 +356,7 @@ export function App({
       createReviewController({
         home,
         sessionId,
+        cwd,
         readOnly: observer,
         onExit,
         clock,
@@ -215,32 +395,47 @@ export function App({
   // ── view state ──────────────────────────────
   const [cursor, setCursor] = useState(0);
   const [inboxCursor, setInboxCursor] = useState(0);
+  // Projects and Threads grouping; ordered is the flat sequence the inbox cursor walks
+  // pinned threads are client-local view state, seeded from the user config and
+  // persisted on toggle; a pin lifts the thread into the sidebar's Pinned section
+  const [pinnedIds, setPinnedIds] = useState<Set<string>>(new Set());
+  const grouped = useMemo(() => groupInbox(inbox ?? [], pinnedIds), [inbox, pinnedIds]);
+  const togglePin = (id: string): void =>
+    setPinnedIds((current) => {
+      const next = new Set(current);
+
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      persistPins([...next]);
+
+      return next;
+    });
+  // the left Projects and Threads column; collapsed by default per the context
+  // matrix (the thread owns the width), toggled open to jump between threads
+  // one sidebar-open state across the no-thread shell and the thread view, so
+  // picking a thread keeps the sidebar as it was. It opens when the app lands with
+  // nothing selected (pick a thread) and stays collapsed on a direct thread open,
+  // where the thread owns the width.
+  const [sidebarOpen, setSidebarOpen] = useState(sessionId === undefined);
+  // the Changes + Project right region and its editor grid (tabs, splits, zoom)
+  const workbench = useChangesWorkbench();
   const [mode, setMode] = useState<Mode>({ type: "normal" });
-  // the bottom-left menu drop-up and the centered dialog it opens
-  const [menuOpen, setMenuOpen] = useState(false);
+  // the top-left settings gear drop-down and the centered dialog it opens
   const [menuDialog, setMenuDialog] = useState<"keybinds" | "settings" | null>(null);
   const [autoClose, setAutoClose] = useState<AutoClose>("off");
+  // unified or side-by-side diff; split only lays out when the Changes pane is zoomed
+  const [diffView, setDiffView] = useState<DiffViewMode>("unified");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
   const [selectedCurationId, setSelectedCurationId] = useState<string | undefined>(undefined);
   const [railTab, setRailTab] = useState<RailTab>("review");
-  // the tree row the reviewer stands on in the rail's Tree tab
+  // the tree row the reviewer stands on in the session tree
   const [selectedEntryId, setSelectedEntryId] = useState<string | undefined>(undefined);
-  // A running in-tab agent terminal (embedded harness); while set, keys route to it.
-  const [agentTerminal, setAgentTerminal] = useState<AgentTerminalHandle | null>(null);
-  // review panel layout: mode + expanded width are client view state, loaded
-  // from and persisted to the user config so they survive a restart. The ref
-  // mirrors the width so the drag-end persist reads the latest value.
-  const [reviewMode, setReviewMode] = useState<ReviewPanelMode>("expanded");
-  const [reviewWidth, setReviewWidth] = useState(REVIEW_DEFAULT_WIDTH);
-  const [dividerDragging, setDividerDragging] = useState(false);
-  const reviewWidthRef = useRef(REVIEW_DEFAULT_WIDTH);
-  // ~2s focus pulse on the document highlight when a rail card is activated
+  // ~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("");
-  const railRef = useRef<ReviewRailHandle | null>(null);
   // keymap from layered config; the loaded theme swaps the provider value
   const keysRef = useRef(DEFAULT_KEYS);
   const keyBindings = useMemo(() => new KeyBindings(DEFAULT_KEYS), []);
@@ -258,12 +453,11 @@ export function App({
     setTheme(composeTheme(config.ui.theme, config.themeOverrides, appearance));
     setThemeName(config.ui.theme);
     setThemeOverrides(config.themeOverrides);
-    setReviewMode(config.ui.reviewState);
-    setReviewWidth(config.ui.reviewWidth);
-    reviewWidthRef.current = config.ui.reviewWidth;
     setAuthorNames(config.authors);
     setQuickActions(config.actions);
     setAutoClose(config.ui.autoClose);
+    setDiffView(config.ui.diffView);
+    setPinnedIds(new Set(config.ui.pins));
     controller.applyConfig(config);
   }, [session?.workspace.repoRoot, controller, keyBindings, appearance]);
   useEffect(
@@ -305,15 +499,14 @@ export function App({
     appearance,
     autoClose,
     setAutoClose,
-    reviewMode,
-    setReviewMode,
+    diffView,
+    setDiffView,
     themeName,
     setThemeName,
     themeOverrides,
     setTheme,
     quickActions,
     setQuickActions,
-    controller,
     setMenuDialog,
   });
 
@@ -321,7 +514,6 @@ export function App({
   const display = controller.display();
   const rows = controller.rows();
   const rejectedRows = controller.rejectedRows();
-  const curationItems = controller.curationItems();
   const marks = useMemo(
     () =>
       session
@@ -340,84 +532,29 @@ export function App({
     return ids;
   }, [marks]);
   const { isDiff, isPrototype, resolved } = deriveReviewFlags(session);
-  // plans and replies open in the thread view; diffs and prototypes keep their sheets
-  const threadViewActive = session !== null && !isDiff && !isPrototype;
+  // 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 and replies open in the thread view, diffs in the diff sheet: both drive the shared
+  // annotation surface and own the document grammar; only the prototype keeps the keymap
+  const threadViewActive = session !== null && !isPrototype;
   const [threadComposing, setThreadComposing] = useState(false);
   const [prototypeComposing, setPrototypeComposing] = useState(false);
   // sort position per annotation so the rail interleaves annotation and removal
   // cards in one line-ordered stack: a diff row carries its blockIndex; a plan
   // annotation resolves to the display index it marked
-  const annotationPositions = useMemo(() => {
-    const positions = new Map<string, number>();
-
-    if (!session) return positions;
-    if (isDiff) {
-      for (const annotation of session.annotations) {
-        const blockIndex =
-          "blockIndex" in annotation.anchor ? annotation.anchor.blockIndex : undefined;
-
-        if (blockIndex !== undefined) positions.set(annotation.id, blockIndex);
-      }
-    } else {
-      for (const [displayIndex, blockMarks] of marks) {
-        for (const mark of blockMarks)
-          if (mark.annotationId) positions.set(mark.annotationId, displayIndex);
-      }
-    }
-
-    return positions;
-  }, [session, isDiff, marks]);
-
   // ── 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 => {
-    setPulsedAnnotationId(id);
-    if (pulseTimer.current) clearTimeout(pulseTimer.current);
-    pulseTimer.current = setTimeout(() => setPulsedAnnotationId(null), 2000);
-  };
-
-  /** Card activation scrolls the document to the anchor and pulses it. */
-  const revealAnchor = (annotationId: string): void => {
-    for (const [displayIndex, blockMarks] of marks) {
-      if (!blockMarks.some((mark) => mark.annotationId === annotationId)) continue;
-      setCursor(displayIndex);
-
-      return;
-    }
-  };
-
   const selectCardFromDocument = (annotationId: string): void => {
     setFocusedAnnotationId(annotationId);
-    railRef.current?.revealCard(annotationId);
-  };
-
-  const selectCardFromRail = (annotationId: string): void => {
-    setFocusedAnnotationId(annotationId);
-    pulse(annotationId);
-    revealAnchor(annotationId);
-  };
-
-  // selecting a removal reveals its source line, so the reader sees what the
-  // pending undo would bring back: the diff sheet follows the cursor; the plan
-  // sheet also needs an explicit scroll to the cut block
-  const selectCurationFromRail = (curationId: string): void => {
-    setSelectedCurationId(curationId);
-    const item = curationItems.find((candidate) => candidate.id === curationId);
-
-    if (!item) return;
-    setCursor(item.revealIndex);
-  };
-
-  // the selected removal card's undo button: same restore path as the u key,
-  // including the observer read-only guard the keyboard path gets via reduceKey
-  const undoCurationFromRail = (curationId: string): void => {
-    if (observer) return controller.setStatus("observer - read-only");
-    controller.restoreCuration(curationId);
-    setSelectedCurationId(undefined);
   };
 
   const openCardEdit = (annotationId: string): void => {
@@ -459,13 +596,10 @@ export function App({
     display,
     rows,
     cursor,
-    inbox,
+    inbox: inbox === null ? null : grouped.ordered,
     inboxCursor,
     mode,
     session,
-    reviewMode,
-    reviewWidth,
-    terminalWidth,
     focusedAnnotationId,
     selectedCurationId,
     railTab,
@@ -476,13 +610,11 @@ export function App({
       persistAuthorName(id, name);
       setAuthorNames((prev) => ({ ...prev, [id]: name }));
     },
+    renameThread: (id: string, title: string) => controller.renameSession(id, title),
     liveInput,
-    reviewWidthRef,
     setCursor,
     setInboxCursor,
     setMode,
-    setReviewMode,
-    setReviewWidth,
     setRailTab,
     setSelectedEntryId,
     setFocusedAnnotationId,
@@ -491,14 +623,22 @@ export function App({
     selectCardFromDocument,
     runEditorHandOff,
     openCardEdit,
+    toggleDiffView: () => {
+      const next: DiffViewMode = diffView === "unified" ? "split" : "unified";
+
+      setDiffView(next);
+      persistDiffView(next);
+      if (next === "split" && !workbench.zoomed)
+        controller.setStatus("split diff shows when zoomed");
+    },
   });
 
   const overlay = resolveOverlay(mode, completion.phase, walking);
 
-  const menuOwnsKeyboard = menuChromeOpen(menuOpen, menuDialog);
+  const menuOwnsKeyboard = menuChromeOpen(menuDialog);
   // an overlay (submit, walk, prompt, confirm) or the menu takes the keyboard
   // from the thread view; the view suspends its own grammar meanwhile
-  const threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay, agentTerminal);
+  const threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay);
 
   useKeyboard((key) => {
     // The thread view owns the document grammar while active (its own
@@ -511,6 +651,7 @@ export function App({
         isOwner,
         resolved,
         treeActive: railTab === "tree",
+        isDiff,
       });
 
       if (chord) dispatch(chord);
@@ -520,16 +661,8 @@ export function App({
     // The prototype compose textarea owns the keyboard while open: let it receive
     // the typed note instead of the global keymap acting on each letter.
     if (prototypeComposing) return;
-    // A running in-tab agent terminal owns the keyboard: forward every key to it,
-    // with ctrl+] as the detach chord back to the review.
-    if (agentTerminal) {
-      if (key.ctrl && key.name === "]") return void agentTerminal.detach();
-
-      return void agentTerminal.write(key.sequence);
-    }
     if (menuDialog === "settings") return void handleSettingsKey(key.name);
     if (menuDialog) return void (key.name === "escape" && setMenuDialog(null));
-    if (menuOpen) return void (key.name === "escape" && setMenuOpen(false));
     // the toast is non-modal: escape only dismisses it when nothing else owns
     // escape, so an open overlay (compose, submit, prompt, walk) still cancels
     if (toast && key.name === "escape" && overlay === "none" && mode.type !== "span")
@@ -552,8 +685,14 @@ export function App({
       display,
     });
 
-    keyBindings.setContext({ overlay: state.overlay, spanMode: state.spanMode });
-    const action = keyBindings.resolveAction({ name: key.name, shift: !!key.shift });
+    keyBindings.setContext({
+      overlay: state.overlay,
+      spanMode: state.spanMode,
+    });
+    const action = keyBindings.resolveAction({
+      name: key.name,
+      shift: !!key.shift,
+    });
 
     for (const intent of reduceKey(
       state,
@@ -567,12 +706,8 @@ export function App({
   // reused by the inbox and by plan/diff review so the two never drift ──
   const menuChrome = (
     <MenuChrome
-      menuOpen={menuOpen}
       menuDialog={menuDialog}
-      status={status}
       theme={theme}
-      setMenuOpen={setMenuOpen}
-      setMenuDialog={setMenuDialog}
       keybindsSections={cheatsheetFor(keyBindings, threadViewActive)}
       settingsCategories={settingsCategories}
       settingsValues={settingsValues}
@@ -586,14 +721,20 @@ export function App({
   if (error) return <ErrorScreen error={error} theme={theme} />;
   if (!session)
     return inbox ? (
-      <InboxScreen
-        inbox={inbox}
+      <NoThreadShell
+        rows={grouped.rows}
         inboxCursor={inboxCursor}
         mode={mode}
         theme={theme}
         controller={controller}
         setMode={setMode}
         menuChrome={menuChrome}
+        onOpenMenu={() => setMenuDialog("settings")}
+        sidebarOpen={sidebarOpen}
+        onToggleSidebar={() => setSidebarOpen((open) => !open)}
+        pinnedIds={pinnedIds}
+        onPin={togglePin}
+        onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
       />
     ) : (
       <ConnectingScreen theme={theme} />
@@ -612,14 +753,15 @@ export function App({
       />
     );
 
-  const diffComposeState = buildDiffComposeState({
-    mode,
-    isDiff,
-    rows,
-    liveInput,
-    setMode,
-    dispatch,
-  });
+  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,
@@ -630,21 +772,15 @@ export function App({
     setMode,
     dispatch,
   });
-  const cardEditState = buildCardEditState({ mode, liveInput, setMode, dispatch });
-  const pendingCount = computePendingCount(activeSession);
-  const railFootprint = computeRailFootprint(reviewMode, reviewWidth, terminalWidth);
-  const headerItems = buildHeaderItems({ session: activeSession, resolved, observer, role });
-  const { showOwnerActions, prototypeCanComment, chromeHidden, prototypePath, railResolvedIds } =
-    buildRenderFlags({
-      session: activeSession,
-      isOwner,
-      isDiff,
-      isPrototype,
-      resolved,
-      menuOpen,
-      menuDialog,
-      resolvedIds,
-    });
+  const { showOwnerActions, prototypeCanComment, chromeHidden, prototypePath } = buildRenderFlags({
+    session: activeSession,
+    isOwner,
+    isDiff,
+    isPrototype,
+    resolved,
+    menuDialog,
+    resolvedIds,
+  });
 
   const onEditRequest = (): void => {
     // A share viewer/observer has no Edit affordance (the button is hidden), so
@@ -668,167 +804,185 @@ export function App({
     dispatch({ type: "openSubmit" });
   };
 
-  // the clickable chevron toggles expanded <-> compact; the keybinding (b)
-  // cycles all three including hidden
-  const onToggleReviewPanel = (): void => {
-    const next = toggleReviewPanelMode(reviewMode);
-
-    setReviewMode(next);
-    controller.saveReviewPanel({ mode: next });
-  };
-  // grabbing the divider only arms a drag when there is a width to drag
-  const onDividerGrab = (): void => {
-    if (reviewMode === "expanded") setDividerDragging(true);
-  };
-
   return (
     <ThemeProvider theme={theme}>
-      <box
-        style={{
-          flexDirection: "column",
-          width: "100%",
-          height: "100%",
-          backgroundColor: theme.background,
-        }}
-        onMouseDrag={(event: MouseEvent) => {
-          if (!dividerDragging || reviewMode !== "expanded") return;
-          const next = widthFromMouseColumn(event.x, terminalWidth);
-
-          // many raw mouse-moves land in the same column: only re-render when the
-          // width actually changes, so the drag does not reconcile per pixel
-          if (next === reviewWidthRef.current) return;
-          reviewWidthRef.current = next;
-          setReviewWidth(next);
-        }}
-        onMouseUp={() => {
-          if (!dividerDragging) return;
-          setDividerDragging(false);
-          controller.saveReviewPanel({ width: reviewWidthRef.current });
-        }}
-      >
-        <box
-          style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme.panel }}
-        >
-          <box style={{ flexGrow: 1, flexDirection: "row", paddingRight: 1 }}>
-            <Breadcrumb items={headerItems} />
-            <box style={{ flexGrow: 1 }} />
-            {showOwnerActions ? (
-              <Toolbar>
-                <Button onPress={onEditRequest} theme={theme}>
-                  {" Edit "}
-                </Button>
-                <Button onPress={onShareRequest} theme={theme}>
-                  {" Share "}
-                </Button>
-              </Toolbar>
-            ) : null}
-          </box>
-          <box style={{ width: railFootprint }} />
-        </box>
-        <box style={{ flexGrow: 1, flexDirection: "row" }}>
-          {isPrototype ? (
-            <PrototypeSheet
-              prototypePath={prototypePath}
-              quickActions={quickActions}
-              canComment={prototypeCanComment}
-              onCommentElement={onCommentPrototype}
-              onComposingChange={setPrototypeComposing}
-              hidden={chromeHidden}
-            />
-          ) : isDiff ? (
-            // the sheet dims to reading-quiet colors while the wizard has focus
-            <DiffSheet
-              rows={rows}
-              cursor={cursor}
-              annotations={activeSession.annotations}
-              focusedAnnotationId={focusedAnnotationId}
-              rejectedRows={rejectedRows}
-              compose={diffComposeState}
-              theme={walking ? dimmedTheme(theme) : undefined}
-            />
-          ) : (
-            <ThreadView
-              session={activeSession}
-              suspended={threadViewSuspended}
-              editOrphanCount={editOrphanCount}
-              onComposingChange={setThreadComposing}
-              resolved={resolved}
-              onObserverBlocked={(reason) =>
-                controller.setStatus(
-                  reason === "observer" ? "observer - read-only" : "review submitted - read-only",
-                )
-              }
-              onCursorChange={setCursor}
-              focusedAnnotationId={focusedAnnotationId}
-              onFocusAnnotation={setFocusedAnnotationId}
-              display={display}
-              marks={marks}
-              quickActions={quickActions}
-              observer={observer}
-              onAnnotate={(span, body) =>
-                void controller.annotate(
-                  "comment",
-                  span.start.blockIndex,
-                  span.start.char,
-                  span.end.char,
-                  body,
-                  span.end.blockIndex,
-                )
+      <AppShell
+        sidebarOpen={sidebarOpen}
+        onToggleSidebar={() => setSidebarOpen((open) => !open)}
+        onOpenMenu={() => setMenuDialog("settings")}
+        threadsPanel={
+          <scrollbox style={{ flexGrow: 1 }} focused={false}>
+            <InboxList
+              rows={grouped.rows}
+              cursor={inboxCursor}
+              activeId={activeSession.id}
+              pinnedIds={pinnedIds}
+              width={30}
+              onSelect={(id) => controller.open(id)}
+              onPin={togglePin}
+              onRename={(id, title) =>
+                setMode({ type: "renameThread", sessionId: id, text: title })
               }
-              onReply={(rootAnnotationId, body) => void controller.reply(rootAnnotationId, body)}
-              onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
-              onExit={() => onExit?.(0)}
+              theme={theme}
             />
-          )}
-          <ReviewPanel
-            mode={reviewMode}
-            width={resolveReviewWidth(reviewWidth, terminalWidth)}
-            onDividerGrab={onDividerGrab}
-            onToggle={onToggleReviewPanel}
-            railRef={railRef}
-            rail={{
-              session: activeSession,
-              authorNames,
-              selectedId: focusedAnnotationId,
-              resolvedIds: railResolvedIds,
-              curationItems,
-              selectedCurationId,
-              annotationPositions,
-              railTab,
-              pendingCount,
-              cardEdit: cardEditState,
-              submitConfirm: submitConfirmState,
-              onTabChange: setRailTab,
-              onSelectCard: selectCardFromRail,
-              onActivateCard: openCardEdit,
-              onSelectCuration: selectCurationFromRail,
-              onUndoCuration: undoCurationFromRail,
-              onSubmitRequest,
-              onLaunchHarness: (command, seedText) =>
-                launchHarnessInSplit({
-                  command,
-                  cwd: activeSession.artifact.meta.cwd ?? process.cwd(),
-                  seedText,
-                }),
-              onAgentTerminal: setAgentTerminal,
-              tree: {
-                rows: controller.treeRows(),
-                selectedEntryId,
-                canMove: isOwner && !resolved,
-                canFork: isOwner,
-                onSelect: setSelectedEntryId,
-                onGo: (entryId) => {
-                  setSelectedEntryId(entryId);
-                  dispatch({ type: "treeGo" });
-                },
-                onBranch: () => dispatch({ type: "treeBranch" }),
-                onLabel: () => dispatch({ type: "treeLabel" }),
-                onFork: () => dispatch({ type: "treeFork" }),
-                onForkAndShare: () => dispatch({ type: "treeForkShare" }),
-              },
-            }}
+          </scrollbox>
+        }
+        threadTitle={threadTitle(activeSession)}
+        threadActions={
+          showOwnerActions ? (
+            <Toolbar>
+              <Button onPress={onEditRequest} theme={theme}>
+                {" edit "}
+              </Button>
+              <Button onPress={onShareRequest} theme={theme}>
+                {" share "}
+              </Button>
+            </Toolbar>
+          ) : undefined
+        }
+        threadPanel={
+          <box style={{ flexGrow: 1, flexDirection: "column" }}>
+            <box style={{ flexGrow: 1, flexDirection: "row" }}>
+              {isPrototype ? (
+                <PrototypeSheet
+                  prototypePath={prototypePath}
+                  quickActions={quickActions}
+                  canComment={prototypeCanComment}
+                  onCommentElement={onCommentPrototype}
+                  onComposingChange={setPrototypeComposing}
+                  hidden={chromeHidden}
+                />
+              ) : isDiff ? (
+                <box style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }}>
+                  <text fg={theme.textDim}>review the changes on the right</text>
+                </box>
+              ) : (
+                <ThreadView
+                  session={activeSession}
+                  suspended={threadViewSuspended}
+                  editOrphanCount={editOrphanCount}
+                  onComposingChange={setThreadComposing}
+                  resolved={resolved}
+                  onObserverBlocked={(reason) =>
+                    controller.setStatus(
+                      reason === "observer"
+                        ? "observer - read-only"
+                        : "review submitted - read-only",
+                    )
+                  }
+                  onCursorChange={setCursor}
+                  focusedAnnotationId={focusedAnnotationId}
+                  onFocusAnnotation={setFocusedAnnotationId}
+                  display={display}
+                  marks={marks}
+                  quickActions={quickActions}
+                  observer={observer}
+                  onAnnotate={(span, body) =>
+                    void controller.annotate(
+                      "comment",
+                      span.start.blockIndex,
+                      span.start.char,
+                      span.end.char,
+                      body,
+                      span.end.blockIndex,
+                    )
+                  }
+                  onReply={(rootAnnotationId, body) =>
+                    void controller.reply(rootAnnotationId, body)
+                  }
+                  onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
+                  onExit={() => onExit?.(0)}
+                />
+              )}
+            </box>
+            <ThreadFooter
+              repo={projectName(activeSession.workspace)}
+              branch={activeSession.workspace.branch}
+              onSubmit={onSubmitRequest}
+              canSubmit={canSubmitReview(isOwner, resolved, observer)}
+              theme={theme}
+            />
+          </box>
+        }
+        changesOpen={workbench.changesOpen}
+        projectOpen={workbench.projectOpen}
+        onToggleChanges={workbench.toggleChanges}
+        onToggleProject={workbench.toggleProject}
+        onToggleRight={workbench.toggleRight}
+        projectMode={workbench.projectMode}
+        zoomHideThread={workbench.zoomed}
+        changesPanel={
+          <EditorGrid
+            tree={workbench.grid}
+            focusedGroupId={workbench.activeGroup}
+            commentCounts={diffCommentCounts}
+            onFocusGroup={workbench.focusGroup}
+            onActivateTab={workbench.activate}
+            onCloseTab={workbench.close}
+            onSplit={workbench.split}
+            onZoom={workbench.toggleZoom}
+            zoomed={workbench.zoomed}
+            renderTab={(tab, groupFocused) => (
+              <GridTabContent
+                tab={tab}
+                rows={rows}
+                surface={{
+                  session: activeSession,
+                  quickActions,
+                  observer,
+                  resolved,
+                  suspended: threadViewSuspended || !groupFocused,
+                  onComposingChange: setThreadComposing,
+                  onObserverBlocked: (reason) =>
+                    controller.setStatus(
+                      reason === "observer"
+                        ? "observer - read-only"
+                        : "review submitted - read-only",
+                    ),
+                  onCursorChange: setCursor,
+                  focusedAnnotationId,
+                  onFocusAnnotation: setFocusedAnnotationId,
+                  onAnnotate: (span, body) =>
+                    void controller.annotate(
+                      "comment",
+                      span.start.blockIndex,
+                      span.start.char,
+                      span.end.char,
+                      body,
+                      span.end.blockIndex,
+                    ),
+                  onReply: (rootAnnotationId, body) =>
+                    void controller.reply(rootAnnotationId, body),
+                  onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
+                  onExit: () => onExit?.(0),
+                }}
+                rejectedRows={rejectedRows}
+                fold={diffFold}
+                fileStats={controller.fileStats()}
+                split={diffView === "split" && workbench.zoomed}
+                dimmed={walking}
+                readFile={(path) => controller.repoReadFile(path)}
+                theme={theme}
+              />
+            )}
+            theme={theme}
           />
-        </box>
+        }
+        projectPanel={
+          <ProjectPanelBody
+            mode={workbench.projectMode}
+            loadChanges={() => controller.repoChanges()}
+            loadProjectFiles={() => controller.repoFiles()}
+            reloadKey={activeSession.id}
+            // a diff review opens a changed file as its captured diff; other threads show live contents
+            onOpenChangedFile={(path) => workbench.openFile(path, isDiff ? "diff" : "contents")}
+            onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
+            commentCounts={diffCommentCounts}
+            theme={theme}
+          />
+        }
+        theme={theme}
+      >
         <TrailingOverlays
           walking={walking}
           walk={walk}
@@ -842,8 +996,23 @@ export function App({
           setMode={setMode}
           dispatch={dispatch}
         />
+        {submitConfirmState !== null ? (
+          <box
+            style={{
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: "100%",
+              height: "100%",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <ConfirmCard {...submitConfirmState} theme={theme} />
+          </box>
+        ) : null}
         {menuChrome}
-      </box>
+      </AppShell>
     </ThemeProvider>
   );
 }