@cueloop/client 0.1.0-alpha.78 → 0.1.0-alpha.79

package/src/App.tsx

@@ -7,7 +7,7 @@ import React, {
   useSyncExternalStore,
 } from "react";
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import type { Clock } from "@opentui/core";
+import type { Clock, KeyEvent } from "@opentui/core";
 import { marksByDisplay, type Mark } from "./view-plan";
 import {
   DEFAULT_KEYS,
@@ -42,7 +42,8 @@ import { KeyBindings, type CheatsheetSection } from "./key-bindings";
 import { useReadySignal } from "./ready-signal";
 import { ThemeProvider } from "./components/theme-context";
 import { Button } from "./components/primitives/Button";
-import { ShareChoiceDialog, SHARE_CHOICES } from "./components/ShareChoiceDialog";
+import { ShareDialog } from "./components/ShareDialog";
+import { shareDialogStore } from "./components/share-dialog-store";
 import { Toolbar } from "./components/primitives/Toolbar";
 import { groupInbox, projectName, threadTitle } from "./components/session-tree";
 import { ThreadTree } from "./components/ThreadTree";
@@ -53,27 +54,32 @@ import { AppShell, type FocusPane, type ProjectPanelMode } from "./components/Ap
 import { EditorGrid } from "./components/EditorGrid";
 import { GridTabContent } from "./components/GridTabContent";
 import { useChangesWorkbench } from "./use-changes-workbench";
+import { useThreadBodyEditing } from "./use-thread-body-editing";
 import { useRememberLayout } from "./use-remember-layout";
 import type { LaunchLayout } from "./launch-layout";
-import { ThreadFooter } from "./components/ThreadFooter";
+import { ThreadFooter, THREAD_FOOTER_HEIGHT } from "./components/ThreadFooter";
 import { ConfirmCard } from "./components/ConfirmCard";
-import { ManageAccessDialog } from "./components/ManageAccessDialog";
 import { THREAD_VIEW_CHEATSHEET, ThreadView } from "./components/ThreadView";
 import {
-  diffChordEntries,
-  dispatchLeaderCommand,
-  leaderCombosFor,
-  leaderHint,
-  matchesLeader,
-  railChordEntries,
-  resolveThreadChord,
-  THREAD_CHORD_ENTRIES,
-  treeChordEntries,
+  curationCommandEntries,
+  diffCommandEntries,
+  resolveNavKey,
+  resolveSessionChord,
+  sessionCommandEntries,
+  treeCommandEntries,
 } from "./thread-chords";
 import { type DiffFoldControls } from "./components/DiffContentView";
 import { commentCountsByFile } from "./view-diff";
-import { annotationTarget } from "@cueloop/schema";
-import type { Annotation, Artifact, DiffFileContents, Identity, Thread } from "@cueloop/schema";
+import { annotationTarget, threadShareLinks } from "@cueloop/schema";
+import type {
+  Annotation,
+  Artifact,
+  DiffFileContents,
+  Identity,
+  ShareLink,
+  Thread,
+  VerdictKind,
+} from "@cueloop/schema";
 import { PrototypePixels } from "./prototype-pixels";
 import type { PrototypeElement } from "./prototype-browser";
 import {
@@ -145,9 +151,19 @@ function menuChromeOpen(menuDialog: "keybinds" | "settings" | null): boolean {
   return menuDialog !== null;
 }
 
-/** The private-share allowlist for a session, or an empty list for a public one. */
-function allowedGithubLogins(session: Thread | null): string[] {
-  return session?.access?.githubLogins ?? [];
+/** Whether a thread already has at least one live share link. */
+function isSharedThread(session: Thread | null): boolean {
+  return session !== null && (threadShareLinks(session)?.length ?? 0) > 0;
+}
+
+/** A thread's live share links for the share dialog, or an empty list with no session. */
+function shareLinksFor(session: Thread | null): ShareLink[] {
+  return session ? (threadShareLinks(session) ?? []) : [];
+}
+
+/** The title the share dialog shows and prefills a new link with, or empty with no session. */
+function shareThreadName(session: Thread | null): string {
+  return session ? threadTitle(session) : "";
 }
 
 /** The drop-up chrome or a floating popover menu (thread actions, editor split) holds the keyboard. */
@@ -190,80 +206,67 @@ function menuModalHandled(
   return true;
 }
 
-/** 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 highlighted share option, or the public default when the choice is closed. */
-function shareChoiceIndex(mode: Mode): number {
-  return mode.type === "shareChoice" ? mode.index : 0;
-}
-
-interface ShareChoiceActions {
-  setMode: (mode: Mode) => void;
-  isOwner: boolean;
-  publish: () => void;
-  openManageAccess: () => void;
+/** True while a menu, an overlay, or the share dialog owns the keyboard instead of the thread view. */
+function keyboardOwnedElsewhere(
+  menuOwnsKeyboard: boolean,
+  overlay: KeyState["overlay"],
+  shareDialogOpen: boolean,
+): boolean {
+  return menuOwnsKeyboard || overlay !== "none" || shareDialogOpen;
 }
 
-/** Move the share-choice highlight by one row, clamped to the list. */
-function movedShareChoice(index: number, delta: number): Mode {
-  const next = Math.min(SHARE_CHOICES.length - 1, Math.max(0, index + delta));
-
-  return { type: "shareChoice", index: next };
+/** 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;
 }
 
-/** Commit the highlighted share option: public publishes a link, private opens manage-access. */
-function commitShareChoice(index: number, actions: ShareChoiceActions): void {
-  const picked = SHARE_CHOICES[index]?.choice;
-
-  actions.setMode({ type: "normal" });
-
-  if (!actions.isOwner) return;
-
-  if (picked === "private") actions.openManageAccess();
-  else actions.publish();
+/** The thread body edits inline only for its owner, on an unresolved markdown thread (never a diff). */
+function canEditThreadBody(
+  threadViewActive: boolean,
+  isDiff: boolean,
+  isOwner: boolean,
+  resolved: boolean,
+): boolean {
+  return threadViewActive && !isDiff && isOwner && !resolved;
 }
 
-/** Route one key to the open share choice: escape cancels, arrows move, enter commits. */
-function handleShareChoiceKey(
-  index: number,
-  key: { name: string },
-  actions: ShareChoiceActions,
-): void {
-  if (key.name === "escape") return actions.setMode({ type: "normal" });
-
-  if (key.name === "down" || key.name === "j") return actions.setMode(movedShareChoice(index, 1));
-
-  if (key.name === "up" || key.name === "k") return actions.setMode(movedShareChoice(index, -1));
-
-  if (key.name === "return" || key.name === "enter") commitShareChoice(index, actions);
+/** The owner's header actions: an edit/normal toggle that opens or leaves the inline editor, plus share when not editing. */
+function ownerThreadActions(actions: {
+  editing: boolean;
+  onEdit: () => void;
+  onExitEdit: () => void;
+  onShare: () => void;
+  theme: Theme;
+}): React.ReactNode {
+  return (
+    <Toolbar>
+      <Button onPress={actions.editing ? actions.onExitEdit : actions.onEdit} theme={actions.theme}>
+        {actions.editing ? " normal " : " edit "}
+      </Button>
+      {actions.editing ? null : (
+        <Button onPress={actions.onShare} theme={actions.theme}>
+          {" share "}
+        </Button>
+      )}
+    </Toolbar>
+  );
 }
 
-/**
- * An app-level dialog owns the keyboard while open: the manage-access dialog takes its own keys,
- * and the share choice moves the highlight, commits on enter, and cancels on escape. Returns true
- * when a dialog consumed the key so the caller stops the grammar.
- */
-function appDialogOwnsKey(
-  accessDialogOpen: boolean,
-  mode: Mode,
-  key: { name: string },
-  actions: ShareChoiceActions,
-): boolean {
-  if (accessDialogOpen) return true;
-
-  if (mode.type !== "shareChoice") return false;
-
-  handleShareChoiceKey(mode.index, key, actions);
-
-  return true;
-}
+/** Pick the thread pane's body: the pixel prototype, the diff placeholder, the inline editor, or the read-only view. */
+function chooseThreadBody(choice: {
+  isPixelPrototype: boolean;
+  isDiff: boolean;
+  editingBody: boolean;
+  prototype: React.ReactNode;
+  diffPlaceholder: React.ReactNode;
+  editor: React.ReactNode;
+  threadView: React.ReactNode;
+}): React.ReactNode {
+  if (choice.isPixelPrototype) return choice.prototype;
+  if (choice.isDiff) return choice.diffPlaceholder;
+  if (choice.editingBody) return choice.editor;
 
-/** 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;
+  return choice.threadView;
 }
 
 /** The author display name for a comment's hover tooltip: the reviewer's own name for their notes, else the resolved collaborator name. */
@@ -344,11 +347,7 @@ function usableScreenReached(
 }
 
 /** The keybinds dialog content: the thread grammar while the thread view owns the keys. */
-function cheatsheetFor(
-  keyBindings: KeyBindings,
-  threadViewActive: boolean,
-  hint: string,
-): CheatsheetSection[] {
+function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): CheatsheetSection[] {
   const base = keyBindings.cheatsheet();
 
   if (!threadViewActive) {
@@ -357,11 +356,10 @@ function cheatsheetFor(
 
   return [
     ...THREAD_VIEW_CHEATSHEET,
-    { title: "Session", entries: [...THREAD_CHORD_ENTRIES] },
-    { title: "Diff", entries: diffChordEntries(hint) },
-    { title: "Rail", entries: railChordEntries(hint) },
-    { title: "Tree", entries: treeChordEntries(hint) },
-    ...base.filter((section) => section.title === "Agent terminal"),
+    { title: "Nav mode · session", entries: sessionCommandEntries() },
+    { title: "Nav mode · diff", entries: diffCommandEntries() },
+    { title: "Nav mode · discussion", entries: curationCommandEntries() },
+    { title: "Nav mode · history", entries: treeCommandEntries() },
   ];
 }
 
@@ -421,29 +419,13 @@ export function threadsNavHandled(params: {
   return false;
 }
 
-export function appLeaderHandled(params: {
-  focusedPane: FocusPane;
-  key: { name: string; shift?: boolean; ctrl?: boolean; meta?: boolean; super?: boolean };
-  leaderCombos: readonly string[];
-  pending: { current: boolean };
-  runLeaderCommand: (key: { name: string; shift?: boolean }) => void;
-}): boolean {
-  const { focusedPane, key, leaderCombos, pending, runLeaderCommand } = params;
-
-  if (focusedPane !== "threads" && focusedPane !== "project") return false;
-  if (pending.current) {
-    pending.current = false;
-    if (key.name !== "escape") runLeaderCommand(key);
-
-    return true;
-  }
-  if (matchesLeader(key, leaderCombos)) {
-    pending.current = true;
-
-    return true;
-  }
-
-  return false;
+export function paneCycleRequested(
+  key: { name: string },
+  overlay: string,
+  menuOwnsKeyboard: boolean,
+  threadComposing: boolean,
+): boolean {
+  return key.name === "tab" && overlay === "none" && !menuOwnsKeyboard && !threadComposing;
 }
 
 export function visiblePanes(
@@ -543,11 +525,12 @@ export function App({
 
   // A shared plan you own polls for collaborator notes while it is open; the
   // merge refreshes through the normal event path. Stops on leave.
+  const threadShared = isSharedThread(session);
   useEffect(() => {
-    if (!isOwner || !session?.shareId) return;
+    if (!isOwner || !threadShared) return;
 
     return controller.startShareSync();
-  }, [isOwner, session?.id, session?.shareId, controller]);
+  }, [isOwner, session?.id, threadShared, controller]);
   const renderer = useRenderer();
   const { width: terminalWidth } = useTerminalDimensions();
 
@@ -594,10 +577,11 @@ export function App({
   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 [accessDialogOpen, setAccessDialogOpen] = useState(false);
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
   const [autoClose, setAutoClose] = useState<AutoClose>("off");
   // unified or side-by-side diff; split only lays out when the Changes pane is zoomed
   const [diffView, setDiffView] = useState<DiffViewMode>("split");
+  const [defaultVerdict, setDefaultVerdict] = useState<VerdictKind>("approve");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
   const [selectedCurationId, setSelectedCurationId] = useState<string | undefined>(undefined);
   const [railTab, setRailTab] = useState<RailTab>("review");
@@ -641,6 +625,7 @@ export function App({
     setSkills(loadSkills(config.skillsPath));
     setAutoClose(config.ui.autoClose);
     setDiffView(config.ui.diffView);
+    setDefaultVerdict(config.ui.defaultVerdict);
     setPinnedIds(new Set(config.ui.pins));
     controller.applyConfig(config);
   }, [session?.workspace.repoRoot, controller, keyBindings, appearance]);
@@ -701,6 +686,7 @@ export function App({
     cycleSetting,
     handleSettingsKey,
     onCategorySelect,
+    openSettings,
   } = useSettingsDialog({
     theme,
     appearance,
@@ -773,6 +759,13 @@ export function App({
   const [threadComposing, setThreadComposing] = useState(false);
   const [prototypeComposing, setPrototypeComposing] = useState(false);
   const [welcomeComposing, setWelcomeComposing] = useState(false);
+  // inline body edit: the markdown editor owns the thread pane and all keys while open
+  const canEditBody = canEditThreadBody(threadViewActive, isDiff, isOwner, resolved);
+  const bodyEditing = useThreadBodyEditing({
+    controller,
+    sessionId: session?.id,
+    canEdit: canEditBody,
+  });
   // sort position per annotation so the rail interleaves annotation and removal
   // cards in one line-ordered stack: a diff row carries its blockIndex; a plan
   // annotation resolves to the display index it marked
@@ -807,8 +800,13 @@ export function App({
     setMode({ type: "railEdit", id: annotation.id, text: annotation.body });
   };
 
-  /** The $EDITOR hand-off releases the terminal: suspend, edit, resume. */
-  const runEditorHandOff = (): void => {
+  // a markdown thread edits inline; a diff is not markdown, so it keeps the external-editor hand-off
+  const openBodyEditor = (): void => {
+    if (canEditBody) {
+      bodyEditing.openEditor();
+
+      return;
+    }
     renderer?.suspend();
     try {
       controller.edit();
@@ -829,6 +827,7 @@ export function App({
     inboxCursor,
     mode,
     session,
+    defaultVerdict,
     focusedAnnotationId,
     selectedCurationId,
     railTab,
@@ -853,7 +852,7 @@ export function App({
     setSelectedCurationId,
     setPulsedAnnotationId,
     selectCardFromDocument,
-    runEditorHandOff,
+    openBodyEditor,
     openCardEdit,
     toggleDiffView: () => {
       const next: DiffViewMode = diffView === "stacked" ? "split" : "stacked";
@@ -865,18 +864,22 @@ export function App({
       else if (workbench.zoomed) controller.setStatus("split diff");
       else controller.setStatus("split diff shows when zoomed");
     },
+    openShareDialog: () => {
+      if (!isOwner) return controller.setStatus("only the plan owner can share");
+      shareDialogStore.getState().reset();
+      setShareDialogOpen(true);
+    },
   });
 
   const overlay = resolveOverlay(mode, completion.phase, walking);
 
   const menuControl = useMenuControlState();
   const menuOwnsKeyboard = keyboardHeldByMenu(menuDialog, menuControl.openMenuId);
-  // an overlay (submit, walk, prompt, confirm, share choice) or the menu takes the
-  // keyboard from the thread view; the view suspends its own grammar meanwhile
-  const threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay);
+  // an overlay (submit, walk, prompt, confirm, share choice), the manage-access
+  // dialog, or the menu takes the keyboard from the thread view; the view suspends
+  // its own grammar meanwhile so typing lands in the dialog, not the thread
+  const threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay, shareDialogOpen);
 
-  const leaderCombos = leaderCombosFor(keysRef.current.leader);
-  const leaderPending = useRef(false);
   const navigablePanes = navigableFocusPanes(
     sidebarOpen,
     workbench.zoomed,
@@ -893,40 +896,50 @@ export function App({
   }, [session, navigablePanes, focusedPane]);
   const cyclePanes = (backward: boolean): void =>
     setFocusedPane((current) => nextFocusPane(current, navigablePanes, backward));
-  const runLeaderCommand = (key: { name: string; shift?: boolean }): void => {
-    if (key.name === "tab") return cyclePanes(Boolean(key.shift));
+  const runNavCommand = (key: { name: string; shift?: boolean }): boolean => {
+    const intent = resolveNavKey(key, {
+      isOwner,
+      resolved,
+      treeActive: railTab === "tree",
+      isDiff,
+    });
 
-    dispatchLeaderCommand(
-      key,
-      { composing: threadComposing, isOwner, resolved, treeActive: railTab === "tree", isDiff },
-      dispatch,
-    );
+    if (!intent) return false;
+    dispatch(intent);
+
+    return true;
   };
   // clicking a sidebar thread moves the cursor onto it too, so the row shows its selected backdrop at once
   const openThread = (id: string): void => {
+    // save the open editor into the leaving thread's working copy before the switch, so a click away never drops edits
+    if (bodyEditing.editing) bodyEditing.requestExit();
     const index = grouped.ordered.findIndex((thread) => thread.id === id);
 
     if (index >= 0) setInboxCursor(() => index);
     controller.open(id);
   };
 
+  const threadSurfaceHandledKey = (key: KeyEvent): boolean => {
+    if (!threadViewActive || threadViewSuspended) return false;
+    if (!threadComposing) {
+      const chord = resolveSessionChord(key, { isOwner, resolved });
+
+      if (chord) dispatch(chord);
+    }
+
+    return true;
+  };
+
   useKeyboard((key) => {
     if (quitKeyHandled(key, onExit)) return;
-    // an app-level dialog (manage-access, share choice) owns the keyboard while open
-    if (
-      appDialogOwnsKey(accessDialogOpen, mode, key, {
-        setMode,
-        isOwner,
-        publish: () => controller.share(),
-        openManageAccess: () => setAccessDialogOpen(true),
-      })
-    )
-      return;
+    // the inline body editor owns the pane and every key while open
+    if (bodyEditing.editing) return;
+    // the share dialog owns its own keys while open; the shell grammar stands down
+    if (shareDialogOpen) return;
     if (menuModalHandled(menuControl, key)) return;
-    if (
-      appLeaderHandled({ focusedPane, key, leaderCombos, pending: leaderPending, runLeaderCommand })
-    )
-      return;
+    if (paneCycleRequested(key, overlay, menuOwnsKeyboard, threadComposing)) {
+      return cyclePanes(Boolean(key.shift));
+    }
     if (
       threadsNavHandled({
         focusedPane,
@@ -938,23 +951,7 @@ export function App({
       })
     )
       return;
-    // 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",
-        isDiff,
-      });
-
-      if (chord) dispatch(chord);
-
-      return;
-    }
+    if (threadSurfaceHandledKey(key)) return;
     // A compose textarea owns the keyboard while open: let it receive the typed note instead of the
     // global keymap acting on each letter (the prototype, and the bare-shell welcome playground).
     if (prototypeComposing || welcomeComposing) return;
@@ -1009,7 +1006,7 @@ export function App({
     <MenuChrome
       menuDialog={menuDialog}
       theme={theme}
-      keybindsSections={cheatsheetFor(keyBindings, threadViewActive, leaderHint(leaderCombos))}
+      keybindsSections={cheatsheetFor(keyBindings, threadViewActive)}
       settingsCategories={settingsCategories}
       settingsValues={settingsValues}
       settingsNav={settingsNav}
@@ -1034,7 +1031,7 @@ export function App({
             controller={controller}
             setMode={setMode}
             menuChrome={menuChrome}
-            onOpenMenu={() => setMenuDialog("settings")}
+            onOpenMenu={openSettings}
             sidebarOpen={sidebarOpen}
             onToggleSidebar={() => setSidebarOpen((open) => !open)}
             focusedPane={focusedPane}
@@ -1109,22 +1106,9 @@ export function App({
     // this is owner-only; stay silent rather than nag if it is ever reached.
     if (!isOwner) return;
     if (resolved) return controller.setStatus("review submitted - read-only");
-    runEditorHandOff();
-  };
-
-  // the share choice's public option: publish the plan, copy the ssh line
-  const onShareRequest = (): void => {
-    if (!isOwner) return controller.setStatus("only the plan owner can share");
-    controller.share();
+    openBodyEditor();
   };
 
-  // the share choice's private option opens the manage-access allowlist surface
-  const onPrivateShareRequest = (): void => {
-    if (!isOwner) return controller.setStatus("only the plan owner can share");
-    setAccessDialogOpen(true);
-  };
-  const allowedLogins = allowedGithubLogins(session);
-
   // clicking the rail Submit button: same read-only answer as the submit key
   const onSubmitRequest = (): void => {
     if (observer) return controller.setStatus("observer - read-only");
@@ -1151,7 +1135,7 @@ export function App({
             <AppShell
               sidebarOpen={sidebarOpen}
               onToggleSidebar={() => setSidebarOpen((open) => !open)}
-              onOpenMenu={() => setMenuDialog("settings")}
+              onOpenMenu={openSettings}
               onFocusPane={setFocusedPane}
               threadsPanel={
                 <scrollbox style={{ flexGrow: 1 }} focused={false}>
@@ -1167,86 +1151,95 @@ export function App({
                     onRename={(id, title) =>
                       setMode({ type: "renameThread", sessionId: id, text: title })
                     }
+                    onRequestDelete={(id, title) =>
+                      setMode({ type: "confirmDelete", sessionId: id, title })
+                    }
                     theme={theme}
                   />
                 </scrollbox>
               }
               threadTitle={threadTitle(activeSession)}
               threadActions={
-                showOwnerActions ? (
-                  <Toolbar>
-                    <Button onPress={onEditRequest} theme={theme}>
-                      {" edit "}
-                    </Button>
-                    <Button onPress={() => dispatch({ type: "share" })} theme={theme}>
-                      {" share "}
-                    </Button>
-                  </Toolbar>
-                ) : undefined
+                showOwnerActions
+                  ? ownerThreadActions({
+                      editing: bodyEditing.editing,
+                      onEdit: onEditRequest,
+                      onExitEdit: bodyEditing.requestExit,
+                      onShare: () => dispatch({ type: "share" }),
+                      theme,
+                    })
+                  : undefined
               }
               threadPanel={
                 <box style={{ flexGrow: 1, flexDirection: "column" }}>
                   <box style={{ flexGrow: 1, flexDirection: "row" }}>
-                    {isPixelPrototype ? (
-                      <PrototypePixels
-                        prototypePath={prototypePath}
-                        canComment={prototypeCanComment}
-                        onCommentElement={onCommentPrototype}
-                        onComposingChange={setPrototypeComposing}
-                        hidden={chromeHidden}
-                      />
-                    ) : isDiff ? (
-                      <box
-                        style={{
-                          flexGrow: 1,
-                          flexDirection: "column",
-                          alignItems: "center",
-                          justifyContent: "center",
-                        }}
-                      >
-                        <text fg={theme.textDim}>Select a thread</text>
-                      </box>
-                    ) : (
-                      <ThreadView
-                        session={activeSession}
-                        suspended={surfaceSuspended(threadViewSuspended, focusedPane, "thread")}
-                        editOrphanCount={editOrphanCount}
-                        onComposingChange={setThreadComposing}
-                        leaderCombos={leaderCombos}
-                        onLeaderCommand={runLeaderCommand}
-                        resolved={resolved}
-                        onObserverBlocked={(reason) =>
-                          controller.setStatus(
-                            reason === "observer"
-                              ? "observer - read-only"
-                              : "review submitted - read-only",
-                          )
-                        }
-                        onCursorChange={setCursor}
-                        focusedAnnotationId={focusedAnnotationId}
-                        onFocusAnnotation={setFocusedAnnotationId}
-                        display={display}
-                        marks={marks}
-                        quickActions={quickActions}
-                        observer={observer}
-                        onAnnotate={(span, body) =>
-                          void controller.annotate(
-                            "comment",
-                            span.start.blockIndex,
-                            span.start.char,
-                            span.end.char,
-                            body,
-                            span.end.blockIndex,
-                          )
-                        }
-                        onReply={(rootAnnotationId, body) =>
-                          void controller.reply(rootAnnotationId, body)
-                        }
-                        onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
-                        resolveAuthorLabel={resolveAuthorLabel}
-                        onExit={() => onExit?.(0)}
-                      />
-                    )}
+                    {chooseThreadBody({
+                      isPixelPrototype,
+                      isDiff,
+                      editingBody: bodyEditing.editing,
+                      prototype: (
+                        <PrototypePixels
+                          prototypePath={prototypePath}
+                          canComment={prototypeCanComment}
+                          onCommentElement={onCommentPrototype}
+                          onComposingChange={setPrototypeComposing}
+                          hidden={chromeHidden}
+                        />
+                      ),
+                      diffPlaceholder: (
+                        <box
+                          style={{
+                            flexGrow: 1,
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                          }}
+                        >
+                          <text fg={theme.textDim}>Select a thread</text>
+                        </box>
+                      ),
+                      editor: bodyEditing.renderEditor(theme),
+                      threadView: (
+                        <ThreadView
+                          session={activeSession}
+                          suspended={surfaceSuspended(threadViewSuspended, focusedPane, "thread")}
+                          editOrphanCount={editOrphanCount}
+                          onComposingChange={setThreadComposing}
+                          onNavCommand={runNavCommand}
+                          resolved={resolved}
+                          onObserverBlocked={(reason) =>
+                            controller.setStatus(
+                              reason === "observer"
+                                ? "observer - read-only"
+                                : "review submitted - read-only",
+                            )
+                          }
+                          onCursorChange={setCursor}
+                          focusedAnnotationId={focusedAnnotationId}
+                          onFocusAnnotation={setFocusedAnnotationId}
+                          display={display}
+                          marks={marks}
+                          quickActions={quickActions}
+                          observer={observer}
+                          onAnnotate={(span, body) =>
+                            void controller.annotate(
+                              "comment",
+                              span.start.blockIndex,
+                              span.start.char,
+                              span.end.char,
+                              body,
+                              span.end.blockIndex,
+                            )
+                          }
+                          onReply={(rootAnnotationId, body) =>
+                            void controller.reply(rootAnnotationId, body)
+                          }
+                          onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
+                          resolveAuthorLabel={resolveAuthorLabel}
+                          onExit={() => onExit?.(0)}
+                        />
+                      ),
+                    })}
                   </box>
                   {threadFooter}
                 </box>
@@ -1313,8 +1306,7 @@ export function App({
                           void controller.reply(rootAnnotationId, body),
                         onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
                         resolveAuthorLabel,
-                        leaderCombos,
-                        onLeaderCommand: runLeaderCommand,
+                        onNavCommand: runNavCommand,
                         onExit: () => onExit?.(0),
                       }}
                       rejectedRows={rejectedRows}
@@ -1330,6 +1322,8 @@ export function App({
                           body,
                         )
                       }
+                      // zoomed, the footer already rides the Changes pane, so no extra offset is needed
+                      emptyBottomPadding={workbench.zoomed ? 0 : THREAD_FOOTER_HEIGHT}
                       theme={theme}
                     />
                   )}
@@ -1384,26 +1378,17 @@ export function App({
                   </box>
                 </box>
               ) : null}
-              <ManageAccessDialog
-                isOpen={accessDialogOpen}
-                logins={allowedLogins}
-                onAdd={(login) => controller.setShareAccess([...allowedLogins, login])}
-                onRemove={(login) =>
-                  controller.setShareAccess(allowedLogins.filter((entry) => entry !== login))
-                }
-                onCreateLink={() => {
-                  setAccessDialogOpen(false);
-                  controller.share();
-                }}
-                onClose={() => setAccessDialogOpen(false)}
-                theme={theme}
-              />
-              <ShareChoiceDialog
-                isOpen={mode.type === "shareChoice"}
-                selectedIndex={shareChoiceIndex(mode)}
-                onPublicShare={onShareRequest}
-                onPrivateShare={onPrivateShareRequest}
-                onClose={() => setMode({ type: "normal" })}
+              <ShareDialog
+                key={String(shareDialogOpen)}
+                isOpen={shareDialogOpen}
+                threadName={shareThreadName(session)}
+                links={shareLinksFor(session)}
+                isOwner={isOwner}
+                onCreateLink={(input) => controller.createShareLink(input)}
+                onUpdateLink={(id, input) => controller.updateShareLink(id, input)}
+                onDeleteLink={(id) => controller.deleteShareLink(id)}
+                onCopyLink={(id) => controller.copyShareLink(id)}
+                onClose={() => setShareDialogOpen(false)}
                 theme={theme}
               />
               {menuChrome}