@cueloop/client 0.1.0-alpha.75 → 0.1.0-alpha.77

package/src/App.tsx

@@ -15,11 +15,15 @@ import {
   loadConfig,
   persistAuthorName,
   persistDiffView,
+  persistIdentity,
   persistPins,
   type AutoClose,
   type DiffViewMode,
+  type IdentityConfig,
   type QuickAction,
 } from "./config";
+import { resolveDisplayName } from "./attribution";
+import { resolveGithubIdentity } from "./github-identity";
 import { loadSkills, PaletteNamesContext, SlashSkillsContext } from "./skills";
 import { mergeSlashItems, slashItemsFrom, type SlashItem } from "./slash-palette";
 import {
@@ -38,12 +42,14 @@ 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 { Toolbar } from "./components/primitives/Toolbar";
 import { groupInbox, projectName, threadTitle } from "./components/session-tree";
 import { ThreadTree } from "./components/ThreadTree";
 import { ChangesFileTree } from "./components/ChangesColumn";
+import { MenuControlProvider, useMenuControlState } from "./components/menu-control";
 import { ProjectTreeView } from "./components/ProjectTreeView";
-import { AppShell, type ProjectPanelMode } from "./components/AppShell";
+import { AppShell, type FocusPane, type ProjectPanelMode } from "./components/AppShell";
 import { EditorGrid } from "./components/EditorGrid";
 import { GridTabContent } from "./components/GridTabContent";
 import { useChangesWorkbench } from "./use-changes-workbench";
@@ -51,18 +57,23 @@ import { useRememberLayout } from "./use-remember-layout";
 import type { LaunchLayout } from "./launch-layout";
 import { ThreadFooter } from "./components/ThreadFooter";
 import { ConfirmCard } from "./components/ConfirmCard";
+import { ManageAccessDialog } from "./components/ManageAccessDialog";
 import { THREAD_VIEW_CHEATSHEET, ThreadView } from "./components/ThreadView";
 import {
-  DIFF_CHORD_ENTRIES,
-  RAIL_CHORD_ENTRIES,
+  diffChordEntries,
+  dispatchLeaderCommand,
+  leaderCombosFor,
+  leaderHint,
+  matchesLeader,
+  railChordEntries,
   resolveThreadChord,
   THREAD_CHORD_ENTRIES,
-  TREE_CHORD_ENTRIES,
+  treeChordEntries,
 } from "./thread-chords";
 import { type DiffFoldControls } from "./components/DiffContentView";
 import { commentCountsByFile } from "./view-diff";
 import { annotationTarget } from "@cueloop/schema";
-import type { Artifact, DiffFileContents, Thread } from "@cueloop/schema";
+import type { Annotation, Artifact, DiffFileContents, Identity, Thread } from "@cueloop/schema";
 import { PrototypePixels } from "./prototype-pixels";
 import type { PrototypeElement } from "./prototype-browser";
 import {
@@ -86,7 +97,7 @@ import {
   TrailingOverlays,
 } from "./app-screens";
 /** A toast clears itself after this idle; esc dismisses it sooner. */
-const TOAST_DISMISS_MS = 4000;
+const TOAST_DISMISS_MS = 2000;
 
 export interface AppProps {
   home?: string;
@@ -134,16 +145,139 @@ 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 ?? [];
+}
+
+/** The drop-up chrome or a floating popover menu (thread actions, editor split) holds the keyboard. */
+function keyboardHeldByMenu(
+  menuDialog: "keybinds" | "settings" | null,
+  openMenuId: string | null,
+): boolean {
+  return menuChromeOpen(menuDialog) || openMenuId !== null;
+}
+
+/** A non-modal toast: escape dismisses it only when nothing else owns escape (no overlay, not span mode). */
+export function toastDismissRequested(
+  toastOpen: boolean,
+  key: { name: string },
+  overlay: KeyState["overlay"],
+  spanMode: boolean,
+): boolean {
+  return toastOpen && key.name === "escape" && overlay === "none" && !spanMode;
+}
+
+/** ctrl+q quits from anywhere, ahead of every focus/menu/overlay gate, with no confirmation. */
+export function quitKeyHandled(
+  key: { name: string; ctrl?: boolean },
+  onExit?: (code: number) => void,
+): boolean {
+  if (!key.ctrl || key.name !== "q") return false;
+  onExit?.(0);
+
+  return true;
+}
+
+/** A popover menu is open, so the shell keyboard is modal: escape closes it, every other key is swallowed. */
+function menuModalHandled(
+  menuControl: { openMenuId: string | null; closeMenu: () => void },
+  key: { name: string },
+): boolean {
+  if (menuControl.openMenuId === null) return false;
+  if (key.name === "escape") menuControl.closeMenu();
+
+  return true;
+}
+
 /** True while a menu 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;
+}
+
+/** 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 };
+}
+
+/** 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();
+}
+
+/** 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);
+}
+
+/**
+ * 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;
+}
+
 /** 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 author display name for a comment's hover tooltip: the reviewer's own name for their notes, else the resolved collaborator name. */
+function authorLabelResolver(
+  ownName: string | undefined,
+  participants: Identity[] | undefined,
+  overrides: Record<string, string>,
+): (annotation: Annotation) => string | undefined {
+  return (annotation) =>
+    annotation.author === undefined
+      ? (ownName ?? "you")
+      : resolveDisplayName(annotation.author, participants, overrides);
+}
+
 /** The Project pane body: the resolved repo's changed files in changes mode, its full tree otherwise. */
 function ProjectPanelBody(props: {
   mode: ProjectPanelMode;
@@ -153,6 +287,7 @@ function ProjectPanelBody(props: {
   onOpenChangedFile: (path: string) => void;
   onOpenProjectFile: (path: string) => void;
   commentCounts?: ReadonlyMap<string, number>;
+  focused?: boolean;
   theme: Theme;
 }): React.ReactNode {
   const [changes, setChanges] = useState<readonly DiffFileContents[]>([]);
@@ -183,6 +318,7 @@ function ProjectPanelBody(props: {
         files={changes}
         onSelectFile={props.onOpenChangedFile}
         commentCounts={props.commentCounts}
+        focused={props.focused}
         theme={props.theme}
       />
     );
@@ -192,6 +328,7 @@ function ProjectPanelBody(props: {
       key={props.reloadKey}
       loadFiles={props.loadProjectFiles}
       onSelectFile={props.onOpenProjectFile}
+      focused={props.focused}
       theme={props.theme}
     />
   );
@@ -207,7 +344,11 @@ function usableScreenReached(
 }
 
 /** The keybinds dialog content: the thread grammar while the thread view owns the keys. */
-function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): CheatsheetSection[] {
+function cheatsheetFor(
+  keyBindings: KeyBindings,
+  threadViewActive: boolean,
+  hint: string,
+): CheatsheetSection[] {
   const base = keyBindings.cheatsheet();
 
   if (!threadViewActive) {
@@ -217,9 +358,9 @@ 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] },
+    { title: "Diff", entries: diffChordEntries(hint) },
+    { title: "Rail", entries: railChordEntries(hint) },
+    { title: "Tree", entries: treeChordEntries(hint) },
     ...base.filter((section) => section.title === "Agent terminal"),
   ];
 }
@@ -232,6 +373,125 @@ function initialThreadsOpen(
   return layout ? layout.threads : sessionId === undefined;
 }
 
+function initialFocusedPane(sessionId: string | undefined, zoomed: boolean): FocusPane {
+  if (sessionId === undefined) return "threads";
+
+  return zoomed ? "changes" : "thread";
+}
+
+function bareShellDefersKeys(
+  sessionIsNull: boolean,
+  overlayIsNone: boolean,
+  focusedPane: FocusPane,
+): boolean {
+  return sessionIsNull && overlayIsNone && focusedPane !== "threads";
+}
+
+function surfaceSuspended(base: boolean, focusedPane: FocusPane, pane: FocusPane): boolean {
+  return base || focusedPane !== pane;
+}
+
+export function threadsNavHandled(params: {
+  focusedPane: FocusPane;
+  quiet: boolean;
+  key: { name: string };
+  count: number;
+  setInboxCursor: (update: (cursor: number) => number) => void;
+  openSession: () => void;
+}): boolean {
+  const { focusedPane, quiet, key, count } = params;
+
+  if (focusedPane !== "threads" || !quiet || count === 0) return false;
+  if (key.name === "j" || key.name === "down") {
+    params.setInboxCursor((cursor) => Math.min(cursor + 1, count - 1));
+
+    return true;
+  }
+  if (key.name === "k" || key.name === "up") {
+    params.setInboxCursor((cursor) => Math.max(cursor - 1, 0));
+
+    return true;
+  }
+  if (key.name === "return" || key.name === "enter") {
+    params.openSession();
+
+    return true;
+  }
+
+  return false;
+}
+
+export function 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 visiblePanes(
+  sidebarOpen: boolean,
+  threadShown: boolean,
+  changesOpen: boolean,
+  projectOpen: boolean,
+): FocusPane[] {
+  const panes: FocusPane[] = [];
+
+  if (sidebarOpen) panes.push("threads");
+  if (threadShown) panes.push("thread");
+  if (changesOpen) panes.push("changes");
+  if (projectOpen) panes.push("project");
+
+  return panes;
+}
+
+export function nextFocusPane(
+  current: FocusPane,
+  panes: FocusPane[],
+  backward: boolean,
+): FocusPane {
+  if (panes.length === 0) return current;
+  const index = panes.indexOf(current);
+  const step = backward ? -1 : 1;
+
+  return panes[(index + step + panes.length) % panes.length] ?? current;
+}
+
+/** The panes that can own the keyboard: a diff's Thread pane is an inert placeholder, so it is out. */
+function navigableFocusPanes(
+  sidebarOpen: boolean,
+  zoomed: boolean,
+  isDiff: boolean,
+  changesOpen: boolean,
+  projectOpen: boolean,
+): FocusPane[] {
+  return visiblePanes(sidebarOpen, !zoomed && !isDiff, changesOpen, projectOpen);
+}
+
+/** The layout hid or inert-ed the focused pane: fall back to the first navigable one, else stay put. */
+export function reconciledFocus(navigable: FocusPane[], focusedPane: FocusPane): FocusPane | null {
+  if (navigable.length === 0 || navigable.includes(focusedPane)) return null;
+
+  return navigable[0] ?? null;
+}
+
 export function App({
   home,
   sessionId,
@@ -318,6 +578,9 @@ export function App({
   const [sidebarOpen, setSidebarOpen] = useState(() => initialThreadsOpen(layout, sessionId));
   // the Changes + Project right region and its editor grid (tabs, splits, zoom)
   const workbench = useChangesWorkbench({ layout });
+  const [focusedPane, setFocusedPane] = useState<FocusPane>(() =>
+    initialFocusedPane(sessionId, workbench.zoomed),
+  );
   // only the session view persists from here; the bare shell owns its own (NoThreadShell), so this
   // workbench stays inactive with no session and never clobbers what the shell saved
   useRememberLayout(
@@ -331,6 +594,7 @@ 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 [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");
@@ -352,6 +616,7 @@ export function App({
   const [themeName, setThemeName] = useState<ThemeName>(DEFAULT_THEME_NAME);
   const [themeOverrides, setThemeOverrides] = useState<Partial<Theme>>({});
   const [authorNames, setAuthorNames] = useState<Record<string, string>>({});
+  const [identity, setIdentity] = useState<IdentityConfig>({ provider: "typed" });
   const [quickActions, setQuickActions] = useState<QuickAction[]>(DEFAULT_QUICK_ACTIONS);
   const [skills, setSkills] = useState<SlashItem[]>([]);
   const paletteNames = useMemo(
@@ -371,6 +636,7 @@ export function App({
     setThemeName(config.ui.theme);
     setThemeOverrides(config.themeOverrides);
     setAuthorNames(config.authors);
+    setIdentity(config.identity);
     setQuickActions(config.actions);
     setSkills(loadSkills(config.skillsPath));
     setAutoClose(config.ui.autoClose);
@@ -404,6 +670,29 @@ export function App({
     if (!known) setMode({ type: "nameSelf", text: "" });
   }, [role, selfAuthor, session]);
 
+  // Bumped on every identity change so a slow GitHub sync that lands after a newer rename is discarded.
+  const identityGenerationRef = useRef(0);
+  const applyIdentity = (next: IdentityConfig): void => {
+    identityGenerationRef.current += 1;
+    setIdentity(next);
+    try {
+      persistIdentity(next);
+    } catch {
+      controller.setStatus("could not save identity to config");
+    }
+  };
+  const syncGithubIdentity = (): void => {
+    const generation = (identityGenerationRef.current += 1);
+    void resolveGithubIdentity().then((github) => {
+      if (identityGenerationRef.current !== generation) return;
+      if (!github) return controller.setStatus("GitHub not connected - run gh auth login");
+      const name = github.name?.trim() || github.login;
+
+      applyIdentity({ name, provider: "github" });
+      controller.setStatus(`identity synced from GitHub - ${name}`);
+    });
+  };
+
   // ── settings dialog: config-backed model, navigation, persistence ──
   const {
     settingsNav,
@@ -426,6 +715,13 @@ export function App({
     quickActions,
     setQuickActions,
     setMenuDialog,
+    identityName: identity.name,
+    identityProvider: identity.provider,
+    onSyncGithubIdentity: syncGithubIdentity,
+    onRenameDisplayName: () => {
+      setMenuDialog(null);
+      setMode({ type: "renameSelf", text: identity.name ?? "" });
+    },
   });
 
   // ── derived view model ──────────────────────
@@ -544,6 +840,9 @@ export function App({
       setAuthorNames((prev) => ({ ...prev, [id]: name }));
     },
     renameThread: (id: string, title: string) => controller.renameSession(id, title),
+    setLocalIdentityName: (name: string) => {
+      applyIdentity(name ? { name, provider: "typed" } : { provider: "typed" });
+    },
     liveInput,
     setCursor,
     setInboxCursor,
@@ -570,12 +869,75 @@ 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 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);
 
+  const leaderCombos = leaderCombosFor(keysRef.current.leader);
+  const leaderPending = useRef(false);
+  const navigablePanes = navigableFocusPanes(
+    sidebarOpen,
+    workbench.zoomed,
+    isDiff,
+    workbench.changesOpen,
+    workbench.projectOpen,
+  );
+  useEffect(() => {
+    // the bare shell drives its panes from its own workbench, so only reconcile against this one
+    if (!session) return;
+    const next = reconciledFocus(navigablePanes, focusedPane);
+
+    if (next) setFocusedPane(next);
+  }, [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));
+
+    dispatchLeaderCommand(
+      key,
+      { composing: threadComposing, isOwner, resolved, treeActive: railTab === "tree", isDiff },
+      dispatch,
+    );
+  };
+  // clicking a sidebar thread moves the cursor onto it too, so the row shows its selected backdrop at once
+  const openThread = (id: string): void => {
+    const index = grouped.ordered.findIndex((thread) => thread.id === id);
+
+    if (index >= 0) setInboxCursor(() => index);
+    controller.open(id);
+  };
+
   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;
+    if (menuModalHandled(menuControl, key)) return;
+    if (
+      appLeaderHandled({ focusedPane, key, leaderCombos, pending: leaderPending, runLeaderCommand })
+    )
+      return;
+    if (
+      threadsNavHandled({
+        focusedPane,
+        quiet: overlay === "none" && !menuOwnsKeyboard && !threadComposing,
+        key,
+        count: grouped.ordered.length,
+        setInboxCursor,
+        openSession: () => dispatch({ type: "openSession" }),
+      })
+    )
+      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
@@ -600,8 +962,9 @@ export function App({
     if (menuDialog) return void (key.name === "escape" && setMenuDialog(null));
     // the toast is non-modal: escape only dismisses it when nothing else owns
     // escape, so an open overlay (compose, submit, prompt, walk) still cancels
-    if (toast && key.name === "escape" && overlay === "none" && mode.type !== "span")
+    if (toastDismissRequested(toast !== null, key, overlay, mode.type === "span"))
       return controller.dismissToast();
+    if (bareShellDefersKeys(session === null, overlay === "none", focusedPane)) return;
     const state = buildKeyState({
       keys: keysRef.current,
       observer,
@@ -646,12 +1009,13 @@ export function App({
     <MenuChrome
       menuDialog={menuDialog}
       theme={theme}
-      keybindsSections={cheatsheetFor(keyBindings, threadViewActive)}
+      keybindsSections={cheatsheetFor(keyBindings, threadViewActive, leaderHint(leaderCombos))}
       settingsCategories={settingsCategories}
       settingsValues={settingsValues}
       settingsNav={settingsNav}
       onCategorySelect={onCategorySelect}
       cycleSetting={cycleSetting}
+      onClose={() => setMenuDialog(null)}
     />
   );
 
@@ -664,6 +1028,7 @@ export function App({
           <NoThreadShell
             rows={grouped.rows}
             inboxCursor={inboxCursor}
+            onOpenThread={openThread}
             mode={mode}
             theme={theme}
             controller={controller}
@@ -672,6 +1037,9 @@ export function App({
             onOpenMenu={() => setMenuDialog("settings")}
             sidebarOpen={sidebarOpen}
             onToggleSidebar={() => setSidebarOpen((open) => !open)}
+            focusedPane={focusedPane}
+            onFocusPane={setFocusedPane}
+            menuControl={menuControl}
             pinnedIds={pinnedIds}
             onPin={togglePin}
             onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
@@ -686,6 +1054,11 @@ export function App({
     );
 
   const activeSession = session;
+  const resolveAuthorLabel = authorLabelResolver(
+    identity.name,
+    activeSession.participants,
+    authorNames,
+  );
 
   if (isCompletionOverlayPhase(completion) && activeSession.verdict)
     return (
@@ -735,12 +1108,19 @@ export function App({
     runEditorHandOff();
   };
 
-  // clicking the header Share button: publish the plan, copy the ssh line
+  // 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();
   };
 
+  // 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");
@@ -763,221 +1143,268 @@ export function App({
     <SlashSkillsContext.Provider value={skills}>
       <PaletteNamesContext.Provider value={paletteNames}>
         <ThemeProvider theme={theme}>
-          <AppShell
-            sidebarOpen={sidebarOpen}
-            onToggleSidebar={() => setSidebarOpen((open) => !open)}
-            onOpenMenu={() => setMenuDialog("settings")}
-            threadsPanel={
-              <scrollbox style={{ flexGrow: 1 }} focused={false}>
-                <ThreadTree
-                  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}
-                />
-              </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" }}>
-                  {isPixelPrototype ? (
-                    <PrototypePixels
-                      prototypePath={prototypePath}
-                      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,
+          <MenuControlProvider value={menuControl}>
+            <AppShell
+              sidebarOpen={sidebarOpen}
+              onToggleSidebar={() => setSidebarOpen((open) => !open)}
+              onOpenMenu={() => setMenuDialog("settings")}
+              onFocusPane={setFocusedPane}
+              threadsPanel={
+                <scrollbox style={{ flexGrow: 1 }} focused={false}>
+                  <ThreadTree
+                    rows={grouped.rows}
+                    cursor={inboxCursor}
+                    activeId={activeSession.id}
+                    focused={focusedPane === "threads"}
+                    pinnedIds={pinnedIds}
+                    width={30}
+                    onSelect={openThread}
+                    onPin={togglePin}
+                    onRename={(id, title) =>
+                      setMode({ type: "renameThread", sessionId: id, text: title })
+                    }
+                    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
+              }
+              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)}
+                      />
+                    )}
+                  </box>
+                  {threadFooter}
+                </box>
+              }
+              changesOpen={workbench.changesOpen}
+              projectOpen={workbench.projectOpen}
+              onToggleChanges={workbench.toggleChanges}
+              onToggleProject={workbench.toggleProject}
+              onToggleRight={workbench.toggleRight}
+              projectMode={workbench.projectMode}
+              zoomHideThread={workbench.zoomed}
+              changesFooter={threadFooter}
+              changesPanel={
+                <EditorGrid
+                  tree={workbench.grid}
+                  focusedGroupId={workbench.activeGroup}
+                  commentCounts={diffCommentCounts}
+                  onFocusGroup={workbench.focusGroup}
+                  onActivateTab={workbench.activate}
+                  onCloseTab={workbench.close}
+                  onSplit={workbench.split}
+                  onZoom={workbench.toggleZoom}
+                  zoomed={workbench.zoomed}
+                  renderTab={(tab, groupFocused) => (
+                    <GridTabContent
+                      tab={tab}
+                      rows={rows}
+                      surface={{
+                        session: activeSession,
+                        quickActions,
+                        observer,
+                        commentsEnabled: true,
+                        resolved,
+                        suspended: surfaceSuspended(
+                          threadViewSuspended || !groupFocused,
+                          focusedPane,
+                          "changes",
+                        ),
+                        onComposingChange: setThreadComposing,
+                        onObserverBlocked: (reason) =>
+                          controller.setStatus(
+                            reason === "observer"
+                              ? "observer - read-only"
+                              : "review submitted - read-only",
+                          ),
+                        onCursorChange: setCursor,
+                        focusedAnnotationId,
+                        onFocusAnnotation: setFocusedAnnotationId,
+                        // a diff thread's Changes view is the artifact itself; any other thread's is the
+                        // live working-tree diff, so its notes carry a file target and anchor there
+                        onAnnotate: (span, body) =>
+                          void controller.annotate(
+                            "comment",
+                            span.start.blockIndex,
+                            span.start.char,
+                            span.end.char,
+                            body,
+                            span.end.blockIndex,
+                            isDiff
+                              ? { kind: "artifact" }
+                              : { kind: "file", path: "", rev: "worktree" },
+                          ),
+                        onReply: (rootAnnotationId, body) =>
+                          void controller.reply(rootAnnotationId, body),
+                        onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
+                        resolveAuthorLabel,
+                        leaderCombos,
+                        onLeaderCommand: runLeaderCommand,
+                        onExit: () => onExit?.(0),
+                      }}
+                      rejectedRows={rejectedRows}
+                      fold={diffFold}
+                      fileStats={controller.fileStats()}
+                      split={diffView === "split" && workbench.zoomed}
+                      dimmed={walking}
+                      readFile={(path) => controller.repoReadFile(path)}
+                      onAddFileComment={(path, anchor, body) =>
+                        void controller.addComment(
+                          anchor,
+                          { kind: "file", path, rev: "worktree" },
                           body,
-                          span.end.blockIndex,
                         )
                       }
-                      onReply={(rootAnnotationId, body) =>
-                        void controller.reply(rootAnnotationId, body)
-                      }
-                      onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
-                      onExit={() => onExit?.(0)}
+                      theme={theme}
                     />
                   )}
+                  theme={theme}
+                />
+              }
+              projectPanel={
+                <ProjectPanelBody
+                  mode={workbench.projectMode}
+                  loadChanges={() => controller.repoChanges()}
+                  loadProjectFiles={() => controller.repoFiles()}
+                  reloadKey={activeSession.id}
+                  // the Changes navigator always opens a changed file as a diff - a diff review shows its
+                  // captured snapshot, every other thread the live working-tree diff
+                  onOpenChangedFile={(path) => workbench.openFile(path, "diff")}
+                  onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
+                  commentCounts={diffCommentCounts}
+                  focused={focusedPane === "project"}
+                  theme={theme}
+                />
+              }
+              theme={theme}
+            >
+              <TrailingOverlays
+                walking={walking}
+                walk={walk}
+                walkFileList={walkFileList}
+                viewedPaths={viewedPaths}
+                session={activeSession}
+                terminalWidth={terminalWidth}
+                theme={theme}
+                mode={mode}
+                toast={toast}
+                setMode={setMode}
+                dispatch={dispatch}
+              />
+              {submitConfirmState !== null ? (
+                <box
+                  onMouseUp={submitConfirmState.onCancel}
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "100%",
+                    height: "100%",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <box onMouseUp={(event) => event.stopPropagation()}>
+                    <ConfirmCard {...submitConfirmState} theme={theme} />
+                  </box>
                 </box>
-                {threadFooter}
-              </box>
-            }
-            changesOpen={workbench.changesOpen}
-            projectOpen={workbench.projectOpen}
-            onToggleChanges={workbench.toggleChanges}
-            onToggleProject={workbench.toggleProject}
-            onToggleRight={workbench.toggleRight}
-            projectMode={workbench.projectMode}
-            zoomHideThread={workbench.zoomed}
-            changesFooter={threadFooter}
-            changesPanel={
-              <EditorGrid
-                tree={workbench.grid}
-                focusedGroupId={workbench.activeGroup}
-                commentCounts={diffCommentCounts}
-                onFocusGroup={workbench.focusGroup}
-                onActivateTab={workbench.activate}
-                onCloseTab={workbench.close}
-                onSplit={workbench.split}
-                onZoom={workbench.toggleZoom}
-                zoomed={workbench.zoomed}
-                renderTab={(tab, groupFocused) => (
-                  <GridTabContent
-                    tab={tab}
-                    rows={rows}
-                    surface={{
-                      session: activeSession,
-                      quickActions,
-                      observer,
-                      commentsEnabled: true,
-                      resolved,
-                      suspended: threadViewSuspended || !groupFocused,
-                      onComposingChange: setThreadComposing,
-                      onObserverBlocked: (reason) =>
-                        controller.setStatus(
-                          reason === "observer"
-                            ? "observer - read-only"
-                            : "review submitted - read-only",
-                        ),
-                      onCursorChange: setCursor,
-                      focusedAnnotationId,
-                      onFocusAnnotation: setFocusedAnnotationId,
-                      // a diff thread's Changes view is the artifact itself; any other thread's is the
-                      // live working-tree diff, so its notes carry a file target and anchor there
-                      onAnnotate: (span, body) =>
-                        void controller.annotate(
-                          "comment",
-                          span.start.blockIndex,
-                          span.start.char,
-                          span.end.char,
-                          body,
-                          span.end.blockIndex,
-                          isDiff
-                            ? { kind: "artifact" }
-                            : { kind: "file", path: "", rev: "worktree" },
-                        ),
-                      onReply: (rootAnnotationId, body) =>
-                        void controller.reply(rootAnnotationId, body),
-                      onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
-                      onExit: () => onExit?.(0),
-                    }}
-                    rejectedRows={rejectedRows}
-                    fold={diffFold}
-                    fileStats={controller.fileStats()}
-                    split={diffView === "split" && workbench.zoomed}
-                    dimmed={walking}
-                    readFile={(path) => controller.repoReadFile(path)}
-                    onAddFileComment={(path, anchor, body) =>
-                      void controller.addComment(
-                        anchor,
-                        { kind: "file", path, rev: "worktree" },
-                        body,
-                      )
-                    }
-                    theme={theme}
-                  />
-                )}
+              ) : 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}
               />
-            }
-            projectPanel={
-              <ProjectPanelBody
-                mode={workbench.projectMode}
-                loadChanges={() => controller.repoChanges()}
-                loadProjectFiles={() => controller.repoFiles()}
-                reloadKey={activeSession.id}
-                // the Changes navigator always opens a changed file as a diff - a diff review shows its
-                // captured snapshot, every other thread the live working-tree diff
-                onOpenChangedFile={(path) => workbench.openFile(path, "diff")}
-                onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
-                commentCounts={diffCommentCounts}
+              <ShareChoiceDialog
+                isOpen={mode.type === "shareChoice"}
+                selectedIndex={shareChoiceIndex(mode)}
+                onPublicShare={onShareRequest}
+                onPrivateShare={onPrivateShareRequest}
+                onClose={() => setMode({ type: "normal" })}
                 theme={theme}
               />
-            }
-            theme={theme}
-          >
-            <TrailingOverlays
-              walking={walking}
-              walk={walk}
-              walkFileList={walkFileList}
-              viewedPaths={viewedPaths}
-              session={activeSession}
-              terminalWidth={terminalWidth}
-              theme={theme}
-              mode={mode}
-              toast={toast}
-              setMode={setMode}
-              dispatch={dispatch}
-            />
-            {submitConfirmState !== null ? (
-              <box
-                style={{
-                  position: "absolute",
-                  left: 0,
-                  top: 0,
-                  width: "100%",
-                  height: "100%",
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <ConfirmCard {...submitConfirmState} theme={theme} />
-              </box>
-            ) : null}
-            {menuChrome}
-          </AppShell>
+              {menuChrome}
+            </AppShell>
+          </MenuControlProvider>
         </ThemeProvider>
       </PaletteNamesContext.Provider>
     </SlashSkillsContext.Provider>