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

package/src/App.tsx

@@ -26,7 +26,10 @@ import {
   DEFAULT_QUICK_ACTIONS,
   loadConfig,
   persistAuthorName,
+  persistDiffView,
+  persistPins,
   type AutoClose,
+  type DiffViewMode,
   type QuickAction,
 } from "./config";
 import {
@@ -39,35 +42,37 @@ import {
 import type { Theme } from "./theme";
 import { createReviewController, type ShareTransport } from "./session-controller";
 import type { SessionClient } from "@cueloop/daemon/client";
-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 { 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 { 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 { Breadcrumb } from "./components/Breadcrumb";
 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 { REVIEW_DEFAULT_WIDTH, type ReviewPanelMode } from "./review-panel";
 import {
-  buildDiffComposeState,
-  buildHeaderItems,
   buildRenderFlags,
   buildSubmitConfirmState,
   computeRoleCapabilities,
@@ -82,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.
@@ -138,9 +144,179 @@ function canSubmitReview(isOwner: boolean, resolved: boolean, observer: 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 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. */
@@ -154,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"),
@@ -163,6 +340,7 @@ function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): Che
 export function App({
   home,
   sessionId,
+  cwd,
   readOnly = false,
   onExit,
   clock,
@@ -178,6 +356,7 @@ export function App({
       createReviewController({
         home,
         sessionId,
+        cwd,
         readOnly: observer,
         onExit,
         clock,
@@ -217,32 +396,46 @@ export function App({
   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]);
+  // 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
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  // one sidebar-open state across the no-thread shell and the thread view, so
+  // picking a thread keeps the sidebar as it was. It opens when the app lands with
+  // nothing selected (pick a thread) and stays collapsed on a direct thread open,
+  // where the thread owns the width.
+  const [sidebarOpen, setSidebarOpen] = useState(sessionId === undefined);
+  // the Changes + Project right region and its editor grid (tabs, splits, zoom)
+  const workbench = useChangesWorkbench();
   const [mode, setMode] = useState<Mode>({ type: "normal" });
   // the top-left settings gear drop-down and the centered dialog it opens
   const [menuDialog, setMenuDialog] = useState<"keybinds" | "settings" | null>(null);
   const [autoClose, setAutoClose] = useState<AutoClose>("off");
+  // unified or side-by-side diff; split only lays out when the Changes pane is zoomed
+  const [diffView, setDiffView] = useState<DiffViewMode>("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);
-  // 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 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), []);
@@ -260,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(
@@ -307,22 +499,20 @@ export function App({
     appearance,
     autoClose,
     setAutoClose,
-    reviewMode,
-    setReviewMode,
+    diffView,
+    setDiffView,
     themeName,
     setThemeName,
     themeOverrides,
     setTheme,
     quickActions,
     setQuickActions,
-    controller,
     setMenuDialog,
   });
 
   // ── derived view model ──────────────────────
   const display = controller.display();
   const rows = controller.rows();
-  const diffColumns = useDiffColumns({ session, rows, cursor, setCursor });
   const rejectedRows = controller.rejectedRows();
   const marks = useMemo(
     () =>
@@ -342,8 +532,16 @@ 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
@@ -357,7 +555,6 @@ export function App({
   // ── selection symmetry: one selected id, both sides ──
   const selectCardFromDocument = (annotationId: string): void => {
     setFocusedAnnotationId(annotationId);
-    railRef.current?.revealCard(annotationId);
   };
 
   const openCardEdit = (annotationId: string): void => {
@@ -403,9 +600,6 @@ export function App({
     inboxCursor,
     mode,
     session,
-    reviewMode,
-    reviewWidth,
-    terminalWidth,
     focusedAnnotationId,
     selectedCurationId,
     railTab,
@@ -416,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,
@@ -431,6 +623,14 @@ 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);
@@ -451,6 +651,7 @@ export function App({
         isOwner,
         resolved,
         treeActive: railTab === "tree",
+        isDiff,
       });
 
       if (chord) dispatch(chord);
@@ -520,7 +721,7 @@ export function App({
   if (error) return <ErrorScreen error={error} theme={theme} />;
   if (!session)
     return inbox ? (
-      <InboxScreen
+      <NoThreadShell
         rows={grouped.rows}
         inboxCursor={inboxCursor}
         mode={mode}
@@ -529,6 +730,11 @@ export function App({
         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} />
@@ -547,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,
@@ -565,12 +772,6 @@ export function App({
     setMode,
     dispatch,
   });
-  const headerItems = buildHeaderItems({
-    session: activeSession,
-    resolved,
-    observer,
-    role,
-  });
   const { showOwnerActions, prototypeCanComment, chromeHidden, prototypePath } = buildRenderFlags({
     session: activeSession,
     isOwner,
@@ -605,61 +806,41 @@ export function App({
 
   return (
     <ThemeProvider theme={theme}>
-      <box
-        style={{
-          flexDirection: "column",
-          width: "100%",
-          height: "100%",
-          backgroundColor: theme.background,
-        }}
-      >
-        <box
-          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 ? (
-              <Toolbar>
-                <Button onPress={onEditRequest} theme={theme}>
-                  {" Edit "}
-                </Button>
-                <Button onPress={onShareRequest} theme={theme}>
-                  {" Share "}
-                </Button>
-              </Toolbar>
-            ) : null}
-            <DiffChangesToggle
-              isDiff={isDiff}
-              open={diffColumns.changesOpen}
-              onToggle={diffColumns.toggleChanges}
+      <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 })
+              }
               theme={theme}
             />
-          </box>
-        </box>
-        <box style={{ flexGrow: 1, flexDirection: "row" }}>
-          <ThreadsSidebar
-            open={sidebarOpen}
-            rows={grouped.rows}
-            cursor={inboxCursor}
-            activeId={session.id}
-            onSelect={(id) => controller.open(id)}
-            theme={theme}
-          />
+          </scrollbox>
+        }
+        threadTitle={threadTitle(activeSession)}
+        threadActions={
+          showOwnerActions ? (
+            <Toolbar>
+              <Button onPress={onEditRequest} theme={theme}>
+                {" edit "}
+              </Button>
+              <Button onPress={onShareRequest} theme={theme}>
+                {" share "}
+              </Button>
+            </Toolbar>
+          ) : undefined
+        }
+        threadPanel={
           <box style={{ flexGrow: 1, flexDirection: "column" }}>
             <box style={{ flexGrow: 1, flexDirection: "row" }}>
               {isPrototype ? (
@@ -672,16 +853,9 @@ export function App({
                   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}
-                />
+                <box style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }}>
+                  <text fg={theme.textDim}>review the changes on the right</text>
+                </box>
               ) : (
                 <ThreadView
                   session={activeSession}
@@ -729,14 +903,86 @@ export function App({
               theme={theme}
             />
           </box>
-          <ChangesColumn
-            open={diffColumns.changesOpen}
-            files={activeSession.artifact.files}
-            selectedPath={diffColumns.currentFilePath}
-            onSelectFile={diffColumns.scrollToFile}
+        }
+        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}
@@ -766,7 +1012,7 @@ export function App({
           </box>
         ) : null}
         {menuChrome}
-      </box>
+      </AppShell>
     </ThemeProvider>
   );
 }