@cueloop/client 0.1.0-alpha.64 → 0.1.0-alpha.66

package/src/App.tsx

@@ -1,7 +1,7 @@
 /**
  * The cueloop TUI: state wiring, keymap dispatch, and layout composition -
  * nothing else. Rendering lives in components/, daemon IO and the mutation
- * verbs in session-controller.ts, the keyboard grammar in keymap.ts with
+ * primitives in session-controller.ts, the keyboard grammar in keymap.ts with
  * binding resolution and status hints from key-bindings.ts, and theming in
  * the ThemeProvider. Selection is the entry primitive (mouse drag or keyboard
  * span on one native renderer selection); annotation text lives in the rail
@@ -18,8 +18,8 @@ import React, {
   useSyncExternalStore,
 } from "react";
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import type { Clock, MouseEvent } from "@opentui/core";
-import { displayText, marksByDisplay, spanFromRange, type Mark } from "./view-plan";
+import type { Clock } from "@opentui/core";
+import { marksByDisplay, type Mark } from "./view-plan";
 import { dimmedTheme } from "./theme";
 import {
   DEFAULT_KEYS,
@@ -39,39 +39,37 @@ 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 { activeSpanState, createIntentDispatch, type Mode } from "./intent-dispatch";
-import { reduceKey } from "./keymap";
-import { KeyBindings } from "./key-bindings";
+import { createIntentDispatch, type Mode } 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 { NERD } from "./components/primitives/icons";
+import { groupInbox, projectName } from "./components/session-tree";
+import { ThreadsSidebar } from "./components/ThreadsSidebar";
+import { ChangesColumn, DiffChangesToggle, useDiffColumns } from "./components/ChangesColumn";
+import { IconButton } from "./components/primitives/IconButton";
+import { ThreadFooter } from "./components/ThreadFooter";
+import { ConfirmCard } from "./components/ConfirmCard";
 import { Breadcrumb } from "./components/Breadcrumb";
-import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
+import { THREAD_VIEW_CHEATSHEET, ThreadView } from "./components/ThreadView";
+import {
+  RAIL_CHORD_ENTRIES,
+  resolveThreadChord,
+  THREAD_CHORD_ENTRIES,
+  TREE_CHORD_ENTRIES,
+} from "./thread-chords";
 import { DiffSheet } from "./components/DiffSheet";
 import { PrototypeSheet } from "./components/PrototypeSheet";
 import type { PrototypeElement } from "./prototype-browser";
-import { 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 { type RailTab, type ReviewRailHandle } from "./components/ReviewRail";
+import { REVIEW_DEFAULT_WIDTH, type ReviewPanelMode } from "./review-panel";
 import {
-  buildActiveSpan,
-  buildCardEditState,
-  buildComposeState,
   buildDiffComposeState,
   buildHeaderItems,
-  buildPopoverState,
   buildRenderFlags,
   buildSubmitConfirmState,
-  computePendingCount,
-  computeRailFootprint,
   computeRoleCapabilities,
   deriveReviewFlags,
   isCompletionOverlayPhase,
@@ -96,7 +94,7 @@ export interface AppProps {
   home?: string;
   sessionId?: 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;
@@ -125,6 +123,43 @@ export interface AppProps {
   appearance?: Appearance;
 }
 
+/** 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;
+}
+
+/** 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";
+}
+
+/** 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 left panel toggle glyph: the mirrored sidebar icon, filled when the column is open. */
+function sidebarToggleGlyph(open: boolean): string {
+  return open ? NERD.sidebarLeft : NERD.sidebarLeftOff;
+}
+
+/** 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: "Session", entries: [...THREAD_CHORD_ENTRIES] },
+    { title: "Rail", entries: [...RAIL_CHORD_ENTRIES] },
+    { title: "Tree", entries: [...TREE_CHORD_ENTRIES] },
+    ...base.filter((section) => section.title === "Agent terminal"),
+  ];
+}
+
 export function App({
   home,
   sessionId,
@@ -173,7 +208,7 @@ export function App({
   useEffect(() => {
     if (!isOwner || !session?.shareId) return;
 
-    return controller.startSharePoll();
+    return controller.startShareSync();
   }, [isOwner, session?.id, session?.shareId, controller]);
   const renderer = useRenderer();
   const { width: terminalWidth } = useTerminalDimensions();
@@ -181,22 +216,25 @@ 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
+  const grouped = useMemo(() => groupInbox(inbox ?? []), [inbox]);
+  // the left Projects and Threads column; collapsed by default per the context
+  // matrix (the thread owns the width), toggled open to jump between threads
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   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");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
   const [selectedCurationId, setSelectedCurationId] = useState<string | undefined>(undefined);
-  const [railTab, setRailTab] = useState<"review" | "agent">("review");
-  // A running in-tab agent terminal (embedded harness); while set, keys route to it.
-  const [agentTerminal, setAgentTerminal] = useState<AgentTerminalHandle | null>(null);
+  const [railTab, setRailTab] = useState<RailTab>("review");
+  // the tree row the reviewer stands on in the rail's Tree tab
+  const [selectedEntryId, setSelectedEntryId] = useState<string | undefined>(undefined);
   // 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
   const [pulsedAnnotationId, setPulsedAnnotationId] = useState<string | null>(null);
@@ -204,7 +242,6 @@ export function App({
   // live mirror of overlay input text: refs commit synchronously, so the
   // RETURN handler never reads a stale value mid-typing
   const liveInput = useRef("");
-  const planSheetRef = useRef<PlanSheetHandle | null>(null);
   const railRef = useRef<ReviewRailHandle | null>(null);
   // keymap from layered config; the loaded theme swaps the provider value
   const keysRef = useRef(DEFAULT_KEYS);
@@ -285,8 +322,8 @@ export function App({
   // ── derived view model ──────────────────────
   const display = controller.display();
   const rows = controller.rows();
+  const diffColumns = useDiffColumns({ session, rows, cursor, setCursor });
   const rejectedRows = controller.rejectedRows();
-  const curationItems = controller.curationItems();
   const marks = useMemo(
     () =>
       session
@@ -305,97 +342,24 @@ 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;
+  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]);
 
-  // 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(() => {
-    // one marker at a time: clear any prior selection, then paint the current
-    // span (span and its quick-actions sub-mode both keep it painted)
-    const span = activeSpanState(mode);
-
-    planSheetRef.current?.clearSelection();
-    if (span) planSheetRef.current?.driveSpanSelection(span);
-  }, [mode]);
-
   // ── 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);
-      planSheetRef.current?.revealBlock(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);
-    if (item.source === "plan") planSheetRef.current?.revealBlock(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 => {
     if (observer) return controller.setStatus("observer - read-only");
     const annotation = session?.annotations.find((candidate) => candidate.id === annotationId);
@@ -435,7 +399,7 @@ export function App({
     display,
     rows,
     cursor,
-    inbox,
+    inbox: inbox === null ? null : grouped.ordered,
     inboxCursor,
     mode,
     session,
@@ -444,6 +408,8 @@ export function App({
     terminalWidth,
     focusedAnnotationId,
     selectedCurationId,
+    railTab,
+    selectedEntryId,
     authorNames,
     quickActions,
     renameAuthor: (id: string, name: string) => {
@@ -452,13 +418,13 @@ export function App({
     },
     liveInput,
     reviewWidthRef,
-    planSheetRef,
     setCursor,
     setInboxCursor,
     setMode,
     setReviewMode,
     setReviewWidth,
     setRailTab,
+    setSelectedEntryId,
     setFocusedAnnotationId,
     setSelectedCurationId,
     setPulsedAnnotationId,
@@ -469,20 +435,33 @@ export function App({
 
   const overlay = resolveOverlay(mode, completion.phase, walking);
 
+  const menuOwnsKeyboard = menuChromeOpen(menuDialog);
+  // an overlay (submit, walk, prompt, confirm) or the menu takes the keyboard
+  // from the thread view; the view suspends its own grammar meanwhile
+  const threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay);
+
   useKeyboard((key) => {
+    // The thread view owns the document grammar while active (its own
+    // useKeyboard handles marks, comments, and ctrl+q); the session chords
+    // (submit, share, edit, walk, the rail) resolve here, and the keymap only
+    // sees keys while an overlay or the menu owns them.
+    if (threadViewActive && !threadViewSuspended) {
+      const chord = resolveThreadChord(key, {
+        composing: threadComposing,
+        isOwner,
+        resolved,
+        treeActive: railTab === "tree",
+      });
+
+      if (chord) dispatch(chord);
+
+      return;
+    }
     // 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")
@@ -505,8 +484,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,
@@ -520,13 +505,9 @@ 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={keyBindings.cheatsheet()}
+      keybindsSections={cheatsheetFor(keyBindings, threadViewActive)}
       settingsCategories={settingsCategories}
       settingsValues={settingsValues}
       settingsNav={settingsNav}
@@ -540,13 +521,14 @@ export function App({
   if (!session)
     return inbox ? (
       <InboxScreen
-        inbox={inbox}
+        rows={grouped.rows}
         inboxCursor={inboxCursor}
         mode={mode}
         theme={theme}
         controller={controller}
         setMode={setMode}
         menuChrome={menuChrome}
+        onOpenMenu={() => setMenuDialog("settings")}
       />
     ) : (
       <ConnectingScreen theme={theme} />
@@ -565,7 +547,6 @@ export function App({
       />
     );
 
-  const composeState = buildComposeState({ mode, isDiff, display, liveInput, setMode, dispatch });
   const diffComposeState = buildDiffComposeState({
     mode,
     isDiff,
@@ -574,17 +555,6 @@ export function App({
     setMode,
     dispatch,
   });
-  const activeSpan = buildActiveSpan(mode, isDiff);
-  const popoverState = buildPopoverState({
-    mode,
-    isDiff,
-    quickActions,
-    isOwner,
-    observer,
-    resolved,
-    controller,
-    dispatch,
-  });
   const submitConfirmState = buildSubmitConfirmState({
     mode,
     isDiff,
@@ -595,54 +565,21 @@ 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,
-    });
-
-  // a mouse drag leaves a native selection: turn it into a word span so the
-  // marker popover opens at the dragged range, mirroring the `v` grammar.
-  // Returns whether a native selection existed (the release ended a drag).
-  const activateSpanFromSelection = (preferredIndex?: number): boolean => {
-    if (!renderer?.hasSelection) return false;
-    // the release block re-anchors the span, so each drag replaces the last
-    const selection = planSheetRef.current?.readSelection(preferredIndex);
-    const block = selection ? display[selection.displayIndex] : undefined;
-    const span =
-      selection && block
-        ? spanFromRange(selection.displayIndex, displayText(block), selection.start, selection.end)
-        : null;
-
-    if (span) setMode({ type: "span", span });
-
-    return true;
-  };
-
-  const onLineActivate = (displayIndex: number): void => {
-    if (activateSpanFromSelection(displayIndex)) return;
-    setCursor(displayIndex);
-    const annotationId = marks.get(displayIndex)?.[0]?.annotationId;
-
-    if (annotationId) selectCardFromDocument(annotationId);
-  };
-
-  // a drag released outside any block's text (the gutter, past a line end, a
-  // gap between blocks) never reaches a block handler; the sheet-level release
-  // still turns the finished drag into a span
-  const onSelectionRelease = (): void => {
-    activateSpanFromSelection();
-  };
+  const headerItems = buildHeaderItems({
+    session: activeSession,
+    resolved,
+    observer,
+    role,
+  });
+  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
@@ -666,19 +603,6 @@ 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
@@ -688,26 +612,25 @@ export function App({
           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 }}
+          style={{
+            flexDirection: "row",
+            height: 2,
+            paddingTop: 1,
+            backgroundColor: theme.panel,
+          }}
         >
           <box style={{ flexGrow: 1, flexDirection: "row", paddingRight: 1 }}>
+            <box onMouseUp={() => setMenuDialog("settings")} style={{ paddingRight: 2 }}>
+              <text fg={theme.textMuted}>{NERD.settings}</text>
+            </box>
+            <IconButton
+              glyph={sidebarToggleGlyph(sidebarOpen)}
+              onPress={() => setSidebarOpen((open) => !open)}
+              marginRight={2}
+              theme={theme}
+            />
             <Breadcrumb items={headerItems} />
             <box style={{ flexGrow: 1 }} />
             {showOwnerActions ? (
@@ -720,77 +643,98 @@ export function App({
                 </Button>
               </Toolbar>
             ) : null}
+            <DiffChangesToggle
+              isDiff={isDiff}
+              open={diffColumns.changesOpen}
+              onToggle={diffColumns.toggleChanges}
+              theme={theme}
+            />
           </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}
-            />
-          ) : (
-            <PlanSheet
-              ref={planSheetRef}
-              session={activeSession}
-              display={display}
-              marks={marks}
-              cursor={cursor}
-              activeSpan={activeSpan}
-              compose={composeState}
-              popover={popoverState}
-              editOrphanCount={editOrphanCount}
-              onLineActivate={onLineActivate}
-              onSelectionRelease={onSelectionRelease}
+          <ThreadsSidebar
+            open={sidebarOpen}
+            rows={grouped.rows}
+            cursor={inboxCursor}
+            activeId={session.id}
+            onSelect={(id) => controller.open(id)}
+            theme={theme}
+          />
+          <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 ? (
+                // 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,
+                    )
+                  }
+                  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}
             />
-          )}
-          <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,
-            }}
+          </box>
+          <ChangesColumn
+            open={diffColumns.changesOpen}
+            files={activeSession.artifact.files}
+            selectedPath={diffColumns.currentFilePath}
+            onSelectFile={diffColumns.scrollToFile}
+            theme={theme}
           />
         </box>
         <TrailingOverlays
@@ -806,6 +750,21 @@ 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>
     </ThemeProvider>