@cueloop/client 0.1.0-alpha.33 → 0.1.0-alpha.34

package/src/App.tsx

@@ -13,14 +13,36 @@ import React, { useEffect, useMemo, useRef, useState, useSyncExternalStore } fro
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
 import type { Clock, MouseEvent } from "@opentui/core";
 import { type VerdictKind } from "@cueloop/schema";
-import { displayText, marksByDisplay, type Mark } from "./view-plan";
+import { displayText, marksByDisplay, spanFromRange, type Mark } from "./view-plan";
 import { noteForFile, viewedCount } from "./walk";
 import { DARK, dimmedTheme } from "./theme";
-import { DEFAULT_KEYS, loadConfig, persistAuthorName, persistAutoClose, type AutoClose } from "./config";
+import {
+  DEFAULT_KEYS,
+  DEFAULT_QUICK_ACTIONS,
+  loadConfig,
+  persistAuthorName,
+  persistAutoClose,
+  persistTheme,
+  type AutoClose,
+  type QuickAction,
+} from "./config";
+import {
+  composeTheme,
+  DEFAULT_THEME_NAME,
+  THEME_LABELS,
+  THEME_NAMES,
+  type ThemeName,
+} from "./theme-presets";
+import type { Theme } from "./theme";
 import { returnPaneFor } from "@cueloop/schema";
 import { createReviewController } from "./session-controller";
 import type { SessionClient } from "@cueloop/daemon/client";
-import { createIntentDispatch, reviewerAnnotations, type Mode } from "./intent-dispatch";
+import {
+  activeSpanState,
+  createIntentDispatch,
+  reviewerAnnotations,
+  type Mode,
+} from "./intent-dispatch";
 import { reduceKey, type KeyState } from "./keymap";
 import { KeyBindings } from "./key-bindings";
 import { ThemeProvider } from "./components/theme-context";
@@ -79,7 +101,16 @@ export interface AppProps {
   selfAuthor?: string;
 }
 
-export function App({ home, sessionId, readOnly = false, onExit, clock, openClient, role = "owner", selfAuthor }: AppProps): React.ReactNode {
+export function App({
+  home,
+  sessionId,
+  readOnly = false,
+  onExit,
+  clock,
+  openClient,
+  role = "owner",
+  selfAuthor,
+}: AppProps): React.ReactNode {
   // Observer stays fully read-only; a collaborator writes annotations but not
   // the plan or a verdict. `observer` is what the controller and every write
   // gate key off; the two capability flags carve out the collaborator's middle.
@@ -89,7 +120,8 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   // feeds all three; split it the day a collaborator earns one of them.
   const isOwner = !observer && role === "owner";
   const controller = useMemo(
-    () => createReviewController({ home, sessionId, readOnly: observer, onExit, clock, openClient }),
+    () =>
+      createReviewController({ home, sessionId, readOnly: observer, onExit, clock, openClient }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [home, sessionId],
   );
@@ -97,11 +129,8 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     controller.connect();
     return () => controller.close();
   }, [controller]);
-  const { session, inbox, status, toast, error, completion, editOrphanCount, walk } = useSyncExternalStore(
-    controller.subscribe,
-    controller.getSnapshot,
-    controller.getSnapshot,
-  );
+  const { session, inbox, status, toast, error, completion, editOrphanCount, walk } =
+    useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
   // A shared plan you own polls for collaborator notes while it is open; the
   // merge refreshes through the normal event path. Stops on leave.
   useEffect(() => {
@@ -119,12 +148,17 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   const [menuOpen, setMenuOpen] = useState(false);
   const [menuDialog, setMenuDialog] = useState<"keybinds" | "settings" | null>(null);
   const [autoClose, setAutoClose] = useState<AutoClose>("off");
-  const [settingsNav, setSettingsNav] = useState<{ categoryId: string; rowIndex: number; zone: "nav" | "body" }>({
+  const [settingsNav, setSettingsNav] = useState<{
+    categoryId: string;
+    rowIndex: number;
+    zone: "nav" | "body";
+  }>({
     categoryId: "general",
     rowIndex: 0,
     zone: "body",
   });
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
+  const [selectedCurationId, setSelectedCurationId] = useState<string | undefined>(undefined);
   const [railTab, setRailTab] = useState<"review" | "agent">("review");
   // 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
@@ -145,16 +179,22 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   const keysRef = useRef(DEFAULT_KEYS);
   const keyBindings = useMemo(() => new KeyBindings(DEFAULT_KEYS), []);
   const [theme, setTheme] = useState(DARK);
+  const [themeName, setThemeName] = useState<ThemeName>(DEFAULT_THEME_NAME);
+  const [themeOverrides, setThemeOverrides] = useState<Partial<Theme>>({});
   const [authorNames, setAuthorNames] = useState<Record<string, string>>({});
+  const [quickActions, setQuickActions] = useState<QuickAction[]>(DEFAULT_QUICK_ACTIONS);
   useEffect(() => {
     const config = loadConfig({ repoRoot: session?.workspace.repoRoot });
     keysRef.current = config.keys;
     keyBindings.setKeys(config.keys);
     setTheme(config.theme);
+    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);
     controller.applyConfig(config);
   }, [session?.workspace.repoRoot, controller, keyBindings]);
@@ -184,8 +224,13 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   // ── derived view model ──────────────────────
   const display = controller.display();
   const rows = controller.rows();
+  const rejectedRows = controller.rejectedRows();
+  const curationItems = controller.curationItems();
   const marks = useMemo(
-    () => (session ? marksByDisplay(session.annotations, display, pulsedAnnotationId ?? undefined) : new Map<number, Mark[]>()),
+    () =>
+      session
+        ? marksByDisplay(session.annotations, display, pulsedAnnotationId ?? undefined)
+        : new Map<number, Mark[]>(),
     [session, display, pulsedAnnotationId],
   );
   /** Annotation ids whose anchor resolved against the working copy. */
@@ -198,6 +243,25 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   }, [marks]);
   const resolved = session?.status === "resolved";
   const isDiff = session?.artifact.type === "diff";
+  // sort position per annotation so the rail interleaves annotation and removal
+  // cards in one line-ordered stack: a diff row carries its blockIndex; a plan
+  // annotation resolves to the display index it marked
+  const annotationPositions = useMemo(() => {
+    const positions = new Map<string, number>();
+    if (!session) return positions;
+    if (isDiff) {
+      for (const annotation of session.annotations) {
+        const blockIndex = (annotation.anchor as { blockIndex?: number }).blockIndex;
+        if (blockIndex !== undefined) positions.set(annotation.id, blockIndex);
+      }
+    } else {
+      for (const [displayIndex, blockMarks] of marks) {
+        for (const mark of blockMarks)
+          if (mark.annotationId) positions.set(mark.annotationId, displayIndex);
+      }
+    }
+    return positions;
+  }, [session, isDiff, marks]);
 
   // ── the guided walk's view model ────────────
   const walkFileList = controller.files();
@@ -208,8 +272,11 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   // out of span mode clears the renderer selection (compose paints its own
   // mark, and a mouse drag never changes the mode, so it survives)
   useEffect(() => {
-    if (mode.type === "span") planSheetRef.current?.driveSpanSelection(mode.span);
-    else planSheetRef.current?.clearSelection();
+    // one marker at a time: clear any prior selection, then paint the current
+    // span (span and its quick-actions sub-mode both keep it painted)
+    const span = activeSpanState(mode);
+    planSheetRef.current?.clearSelection();
+    if (span) planSheetRef.current?.driveSpanSelection(span);
   }, [mode]);
 
   // ── selection symmetry: one selected id, both sides ──
@@ -240,6 +307,25 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     revealAnchor(annotationId);
   };
 
+  // selecting a removal reveals its source line, so the reader sees what the
+  // pending undo would bring back: the diff sheet follows the cursor; the plan
+  // sheet also needs an explicit scroll to the cut block
+  const selectCurationFromRail = (curationId: string): void => {
+    setSelectedCurationId(curationId);
+    const item = curationItems.find((candidate) => candidate.id === curationId);
+    if (!item) return;
+    setCursor(item.revealIndex);
+    if (item.source === "plan") planSheetRef.current?.revealBlock(item.revealIndex);
+  };
+
+  // the selected removal card's undo button: same restore path as the u key,
+  // including the observer read-only guard the keyboard path gets via reduceKey
+  const undoCurationFromRail = (curationId: string): void => {
+    if (observer) return controller.setStatus("observer - read-only");
+    controller.restoreCuration(curationId);
+    setSelectedCurationId(undefined);
+  };
+
   const openCardEdit = (annotationId: string): void => {
     if (observer) return controller.setStatus("observer - read-only");
     const annotation = session?.annotations.find((candidate) => candidate.id === annotationId);
@@ -248,7 +334,11 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     // the author rather than editing the body the planner does not own
     if (annotation.author) {
       setFocusedAnnotationId(annotationId);
-      return void setMode({ type: "rename", authorId: annotation.author, text: authorNames[annotation.author] ?? "" });
+      return void setMode({
+        type: "rename",
+        authorId: annotation.author,
+        text: authorNames[annotation.author] ?? "",
+      });
     }
     if (resolved) return controller.setStatus("review submitted - read-only");
     liveInput.current = annotation.body;
@@ -281,7 +371,9 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     reviewWidth,
     terminalWidth,
     focusedAnnotationId,
+    selectedCurationId,
     authorNames,
+    quickActions,
     renameAuthor: (id: string, name: string) => {
       persistAuthorName(id, name);
       setAuthorNames((prev) => ({ ...prev, [id]: name }));
@@ -296,6 +388,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     setReviewWidth,
     setRailTab,
     setFocusedAnnotationId,
+    setSelectedCurationId,
     setPulsedAnnotationId,
     selectCardFromDocument,
     runEditorHandOff,
@@ -309,15 +402,17 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
         ? "submit"
         : mode.type === "confirmDelete"
           ? "confirm"
-        : mode.type === "rename" || mode.type === "nameSelf"
-          ? "prompt"
-        : completion.phase === "prompt"
-          ? "completion-prompt"
-          : completion.phase === "counting"
-            ? "completion-counting"
-            : walking
-              ? "walk"
-              : "none";
+          : mode.type === "rename" || mode.type === "nameSelf"
+            ? "prompt"
+            : mode.type === "spanActions"
+              ? "spanActions"
+              : completion.phase === "prompt"
+                ? "completion-prompt"
+                : completion.phase === "counting"
+                  ? "completion-counting"
+                  : walking
+                    ? "walk"
+                    : "none";
 
   // ── settings dialog: config-backed model, navigation, persistence ──
   const settingsCategories: SettingsCategory[] = [
@@ -325,16 +420,47 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
       id: "general",
       name: "General",
       description: "submission behaviour",
-      rows: [{ key: "autoClose", label: "Auto-close on submit", kind: "cycle", options: ["off", "3s", "10s"] }],
+      rows: [
+        {
+          key: "autoClose",
+          label: "Auto-close on submit",
+          kind: "cycle",
+          options: ["off", "3s", "10s"],
+        },
+      ],
     },
     {
       id: "display",
       name: "Display",
       description: "the review panel",
-      rows: [{ key: "reviewPanel", label: "Review panel", kind: "cycle", options: ["expanded", "compact", "hidden"] }],
+      rows: [
+        {
+          key: "reviewPanel",
+          label: "Review panel",
+          kind: "cycle",
+          options: ["expanded", "compact", "hidden"],
+        },
+      ],
+    },
+    {
+      id: "appearance",
+      name: "Appearance",
+      description: "the color theme",
+      rows: [
+        {
+          key: "theme",
+          label: "Theme",
+          kind: "cycle",
+          options: THEME_NAMES.map((name) => THEME_LABELS[name]),
+        },
+      ],
     },
   ];
-  const settingsValues = { autoClose: autoClose === "off" ? "off" : `${autoClose}s`, reviewPanel: reviewMode };
+  const settingsValues = {
+    autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
+    reviewPanel: reviewMode,
+    theme: THEME_LABELS[themeName],
+  };
   const cycleSetting = (rowKey: string): void => {
     if (rowKey === "autoClose") {
       const next: AutoClose = autoClose === "off" ? 3 : autoClose === 3 ? 10 : "off";
@@ -345,22 +471,47 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
       const next = order[(order.indexOf(reviewMode) + 1) % order.length]!;
       setReviewMode(next);
       controller.saveReviewPanel({ mode: next });
+    } else if (rowKey === "theme") {
+      const next = THEME_NAMES[(THEME_NAMES.indexOf(themeName) + 1) % THEME_NAMES.length]!;
+      setThemeName(next);
+      setTheme(composeTheme(next, themeOverrides));
+      persistTheme(next);
     }
   };
   const handleSettingsKey = (name: string): void => {
     if (name === "escape") return void setMenuDialog(null);
-    const categoryIndex = settingsCategories.findIndex((category) => category.id === settingsNav.categoryId);
+    const categoryIndex = settingsCategories.findIndex(
+      (category) => category.id === settingsNav.categoryId,
+    );
     const category = settingsCategories[categoryIndex]!;
     if (settingsNav.zone === "nav") {
-      if (name === "j" || name === "down") setSettingsNav({ categoryId: settingsCategories[Math.min(settingsCategories.length - 1, categoryIndex + 1)]!.id, rowIndex: 0, zone: "nav" });
-      else if (name === "k" || name === "up") setSettingsNav({ categoryId: settingsCategories[Math.max(0, categoryIndex - 1)]!.id, rowIndex: 0, zone: "nav" });
-      else if (name === "l" || name === "tab" || name === "return") setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: 0 }));
+      if (name === "j" || name === "down")
+        setSettingsNav({
+          categoryId:
+            settingsCategories[Math.min(settingsCategories.length - 1, categoryIndex + 1)]!.id,
+          rowIndex: 0,
+          zone: "nav",
+        });
+      else if (name === "k" || name === "up")
+        setSettingsNav({
+          categoryId: settingsCategories[Math.max(0, categoryIndex - 1)]!.id,
+          rowIndex: 0,
+          zone: "nav",
+        });
+      else if (name === "l" || name === "tab" || name === "return")
+        setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: 0 }));
       return;
     }
-    if (name === "j" || name === "down") setSettingsNav((state) => ({ ...state, rowIndex: Math.min(category.rows.length - 1, state.rowIndex + 1) }));
-    else if (name === "k" || name === "up") setSettingsNav((state) => ({ ...state, rowIndex: Math.max(0, state.rowIndex - 1) }));
+    if (name === "j" || name === "down")
+      setSettingsNav((state) => ({
+        ...state,
+        rowIndex: Math.min(category.rows.length - 1, state.rowIndex + 1),
+      }));
+    else if (name === "k" || name === "up")
+      setSettingsNav((state) => ({ ...state, rowIndex: Math.max(0, state.rowIndex - 1) }));
     else if (name === "h" || name === "tab") setSettingsNav((state) => ({ ...state, zone: "nav" }));
-    else if (name === "return" || name === "space") cycleSetting(category.rows[settingsNav.rowIndex]!.key);
+    else if (name === "return" || name === "space")
+      cycleSetting(category.rows[settingsNav.rowIndex]!.key);
   };
 
   useKeyboard((key) => {
@@ -369,7 +520,8 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     if (menuOpen) return void (key.name === "escape" && setMenuOpen(false));
     // the toast is non-modal: escape only dismisses it when nothing else owns
     // escape, so an open overlay (compose, submit, prompt, walk) still cancels
-    if (toast && key.name === "escape" && overlay === "none" && mode.type !== "span") return controller.dismissToast();
+    if (toast && key.name === "escape" && overlay === "none" && mode.type !== "span")
+      return controller.dismissToast();
     const state: KeyState = {
       keys: keysRef.current,
       readOnly: observer,
@@ -385,15 +537,59 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
       hasFocusedAnnotation: focusedAnnotationId !== undefined,
       walkAtEnd: walk !== null && walk.index >= walkFileList.length,
       cursorAnnotatable: isDiff
-        ? rows[cursor] !== undefined && rows[cursor]!.kind !== "file" && rows[cursor]!.kind !== "hunk"
+        ? rows[cursor] !== undefined &&
+          rows[cursor]!.kind !== "file" &&
+          rows[cursor]!.kind !== "hunk"
         : !!display[cursor]?.work,
     };
     keyBindings.setContext({ overlay: state.overlay, spanMode: state.spanMode });
     const action = keyBindings.resolveAction({ name: key.name, shift: !!key.shift });
-    for (const intent of reduceKey(state, { name: key.name, shift: !!key.shift, meta: !!key.meta }, action))
+    for (const intent of reduceKey(
+      state,
+      { name: key.name, shift: !!key.shift, meta: !!key.meta },
+      action,
+    ))
       dispatch(intent);
   });
 
+  // ── shared bottom chrome: the menu bar and its drop-up dialogs, one render
+  // reused by the inbox and by plan/diff review so the two never drift ──
+  const menuChrome = (
+    <>
+      <MenuBar
+        open={menuOpen}
+        version={CLIENT_VERSION}
+        status={status}
+        onToggle={() => setMenuOpen((isOpen) => !isOpen)}
+        onSettings={() => {
+          setMenuOpen(false);
+          setMenuDialog("settings");
+        }}
+        onKeybinds={() => {
+          setMenuOpen(false);
+          setMenuDialog("keybinds");
+        }}
+        theme={theme}
+      />
+      {menuDialog === "keybinds" ? (
+        <KeybindsDialog sections={keyBindings.cheatsheet()} theme={theme} />
+      ) : null}
+      {menuDialog === "settings" ? (
+        <SettingsDialog
+          isOpen
+          categories={settingsCategories}
+          values={settingsValues}
+          activeCategoryId={settingsNav.categoryId}
+          activeRowIndex={settingsNav.rowIndex}
+          activeZone={settingsNav.zone}
+          onCategorySelect={(id) => setSettingsNav({ categoryId: id, rowIndex: 0, zone: "body" })}
+          onRowActivate={(row) => cycleSetting(row.key)}
+          theme={theme}
+        />
+      ) : null}
+    </>
+  );
+
   // ── render ──────────────────────────────────
   if (error) {
     return (
@@ -413,28 +609,65 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     const confirming = mode.type === "confirmDelete" ? mode : null;
     return (
       <ThemeProvider theme={theme}>
-        <InboxList
-          inbox={inbox}
-          cursor={inboxCursor}
-          onRequestDelete={(id, title) => setMode({ type: "confirmDelete", sessionId: id, title })}
-        />
-        <ConfirmDialog
-          isOpen={confirming !== null}
-          title=" Delete plan "
-          message={confirming ? `Delete "${confirming.title}"? This removes the plan and its review.` : ""}
-          onConfirm={() => {
-            if (confirming) controller.deleteSession(confirming.sessionId);
-            setMode({ type: "normal" });
+        <box
+          style={{
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            backgroundColor: theme.background,
           }}
-          onCancel={() => setMode({ type: "normal" })}
-          theme={theme}
-        />
+        >
+          {/* mirrors the review header row: same box, position, and accent product
+              word, with a " · resume" separator and no Edit/Share toolbar */}
+          <box
+            style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme.panel }}
+          >
+            <box
+              style={{
+                height: 1,
+                backgroundColor: theme.panel,
+                paddingLeft: 1,
+                flexDirection: "row",
+              }}
+            >
+              <text>
+                <span fg={theme.accent}>cueloop</span>
+                <span fg={theme.textDim}> · resume</span>
+              </text>
+            </box>
+            <box style={{ flexGrow: 1 }} />
+          </box>
+          <InboxList
+            inbox={inbox}
+            cursor={inboxCursor}
+            onRequestDelete={(id, title) =>
+              setMode({ type: "confirmDelete", sessionId: id, title })
+            }
+          />
+          {menuChrome}
+          <ConfirmDialog
+            isOpen={confirming !== null}
+            title=" Delete plan "
+            message={
+              confirming
+                ? `Delete "${confirming.title}"? This removes the plan and its review.`
+                : ""
+            }
+            onConfirm={() => {
+              if (confirming) controller.deleteSession(confirming.sessionId);
+              setMode({ type: "normal" });
+            }}
+            onCancel={() => setMode({ type: "normal" })}
+            theme={theme}
+          />
+        </box>
       </ThemeProvider>
     );
   }
 
   const activeSession = session!;
-  const pendingCount = reviewerAnnotations(activeSession).length + (activeSession.workingCopy !== undefined ? 1 : 0);
+  const pendingCount =
+    reviewerAnnotations(activeSession).length + (activeSession.workingCopy !== undefined ? 1 : 0);
 
   if ((completion.phase === "prompt" || completion.phase === "counting") && activeSession.verdict) {
     return (
@@ -443,7 +676,11 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
           verdict={activeSession.verdict.kind}
           completion={completion}
           status={status}
-          returnsTo={returnPaneFor(activeSession.artifact.meta.herdrPane) ? (activeSession.artifact.meta.agent ?? "the agent") : undefined}
+          returnsTo={
+            returnPaneFor(activeSession.artifact.meta.herdrPane)
+              ? (activeSession.artifact.meta.agent ?? "the agent")
+              : undefined
+          }
         />
       </ThemeProvider>
     );
@@ -485,17 +722,75 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
         }
       : null;
 
-  const activeSpan =
-    mode.type === "span"
-      ? { displayIndex: mode.span.displayIndex, start: mode.span.start, end: mode.span.end }
-      : mode.type === "compose" && !isDiff
-        ? // the compose anchor stays painted selection-style while the box is open
-          { displayIndex: mode.displayIndex, start: mode.start, end: mode.end }
-        : null;
+  const markedSpan = activeSpanState(mode);
+  const activeSpan = markedSpan
+    ? { displayIndex: markedSpan.displayIndex, start: markedSpan.start, end: markedSpan.end }
+    : mode.type === "compose" && !isDiff
+      ? // the compose anchor stays painted selection-style while the box is open
+        { displayIndex: mode.displayIndex, start: mode.start, end: mode.end }
+      : null;
+
+  // mouse mutations bypass reduceKey, so they replay its gates: an observer or a
+  // resolved review is read-only. Returns the status to answer with, or null.
+  const spanMutationBlock = (): string | null =>
+    observer ? "observer - read-only" : resolved ? "review submitted - read-only" : null;
+
+  // the marker-actions popover is span mode made visible: an inline toolbar at
+  // the marked block, or its quick-actions list. Cut is owner-only (hidden for a
+  // collaborator, like every other plan-edit affordance).
+  const popoverState =
+    markedSpan && !isDiff
+      ? {
+          displayIndex: markedSpan.displayIndex,
+          view: mode.type === "spanActions" ? ("actions" as const) : ("toolbar" as const),
+          actions: quickActions,
+          actionIndex: mode.type === "spanActions" ? mode.index : 0,
+          canCut: isOwner,
+          onComment: () => {
+            const blocked = spanMutationBlock();
+            if (blocked) return controller.setStatus(blocked);
+            dispatch({ type: "openCompose", kind: "comment", from: "span" });
+          },
+          onCut: () => {
+            const blocked = spanMutationBlock();
+            if (blocked) return controller.setStatus(blocked);
+            if (!isOwner) return;
+            dispatch({ type: "spanCut" });
+          },
+          onOpenActions: () => {
+            const blocked = spanMutationBlock();
+            if (blocked) return controller.setStatus(blocked);
+            dispatch({ type: "openSpanActions" });
+          },
+          onClose: () => dispatch({ type: "closeOverlay" }),
+          onPickAction: (index: number) => {
+            const blocked = spanMutationBlock();
+            if (blocked) return controller.setStatus(blocked);
+            dispatch({ type: "pickSpanAction", index });
+          },
+          onBack: () => dispatch({ type: "closeSpanActions" }),
+        }
+      : null;
 
   const onLineActivate = (displayIndex: number): void => {
-    // releasing a drag-selection lands here too; a live selection is not a click
-    if (renderer?.hasSelection) return;
+    // a mouse drag leaves a native selection: turn it into a word span so the
+    // marker popover opens at the dragged range, mirroring the `v` grammar
+    if (renderer?.hasSelection) {
+      // the release block re-anchors the span, so each drag replaces the last
+      const selection = planSheetRef.current?.readSelection(displayIndex);
+      const block = selection ? display[selection.displayIndex] : undefined;
+      const span =
+        selection && block
+          ? spanFromRange(
+              selection.displayIndex,
+              displayText(block),
+              selection.start,
+              selection.end,
+            )
+          : null;
+      if (span) setMode({ type: "span", span });
+      return;
+    }
     setCursor(displayIndex);
     const annotationId = marks.get(displayIndex)?.[0]?.annotationId;
     if (annotationId) selectCardFromDocument(annotationId);
@@ -576,23 +871,43 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
   const railFootprint =
     reviewMode === "hidden"
       ? 0
-      : 1 + (reviewMode === "compact" ? REVIEW_COMPACT_WIDTH : resolveReviewWidth(reviewWidth, terminalWidth));
+      : 1 +
+        (reviewMode === "compact"
+          ? REVIEW_COMPACT_WIDTH
+          : resolveReviewWidth(reviewWidth, terminalWidth));
 
   // status badges sit right after the product word so they survive a header
   // that is too narrow for the whole trail (the rail can eat the width)
   const headerItems: BreadcrumbItem[] = [
     { label: "cueloop", tone: "accent" },
-    ...(resolved ? [{ label: `resolved: ${activeSession.verdict!.kind.replace("_", " ")}`, tone: "green" as const }] : []),
+    ...(resolved
+      ? [
+          {
+            label: `resolved: ${activeSession.verdict!.kind.replace("_", " ")}`,
+            tone: "green" as const,
+          },
+        ]
+      : []),
     ...(observer ? [{ label: "observer", tone: "dim" as const }] : []),
-    ...(role === "collaborator" ? [{ label: "shared · your notes save as you go", tone: "dim" as const }] : []),
-    { label: `${activeSession.artifact.meta.title ?? activeSession.artifact.meta.planPath ?? activeSession.id} · rev ${activeSession.revisions.length}`, tone: "dim" },
+    ...(role === "collaborator"
+      ? [{ label: "shared · your notes save as you go", tone: "dim" as const }]
+      : []),
+    {
+      label: `${activeSession.artifact.meta.title ?? activeSession.artifact.meta.planPath ?? activeSession.id} · rev ${activeSession.revisions.length}`,
+      tone: "dim",
+    },
     { label: `submitted by ${activeSession.artifact.meta.agent ?? "unknown"}`, tone: "dim" },
   ];
 
   return (
     <ThemeProvider theme={theme}>
       <box
-        style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: theme.background }}
+        style={{
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          backgroundColor: theme.background,
+        }}
         onMouseDrag={(event: MouseEvent) => {
           if (!dividerDragging || reviewMode !== "expanded") return;
           const next = widthFromMouseColumn(event.x, terminalWidth);
@@ -605,14 +920,20 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
           controller.saveReviewPanel({ width: reviewWidthRef.current });
         }}
       >
-        <box style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme.panel }}>
+        <box
+          style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme.panel }}
+        >
           <box style={{ flexGrow: 1, flexDirection: "row", paddingRight: 1 }}>
             <Breadcrumb items={headerItems} />
             <box style={{ flexGrow: 1 }} />
             {isOwner && !isDiff && !resolved ? (
               <Toolbar>
-                <Button onPress={onEditRequest} theme={theme}>{" Edit "}</Button>
-                <Button onPress={onShareRequest} theme={theme}>{" Share "}</Button>
+                <Button onPress={onEditRequest} theme={theme}>
+                  {" Edit "}
+                </Button>
+                <Button onPress={onShareRequest} theme={theme}>
+                  {" Share "}
+                </Button>
               </Toolbar>
             ) : null}
           </box>
@@ -626,6 +947,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               cursor={cursor}
               annotations={activeSession.annotations}
               focusedAnnotationId={focusedAnnotationId}
+              rejectedRows={rejectedRows}
               compose={diffComposeState}
               theme={walking ? dimmedTheme(theme) : undefined}
             />
@@ -638,6 +960,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               cursor={cursor}
               activeSpan={activeSpan}
               compose={composeState}
+              popover={popoverState}
               editOrphanCount={editOrphanCount}
               onLineActivate={onLineActivate}
             />
@@ -653,6 +976,9 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               authorNames,
               selectedId: focusedAnnotationId,
               resolvedIds: isDiff ? null : resolvedIds,
+              curationItems,
+              selectedCurationId,
+              annotationPositions,
               railTab,
               pendingCount,
               cardEdit: cardEditState,
@@ -660,25 +986,12 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               onTabChange: setRailTab,
               onSelectCard: selectCardFromRail,
               onActivateCard: openCardEdit,
+              onSelectCuration: selectCurationFromRail,
+              onUndoCuration: undoCurationFromRail,
               onSubmitRequest,
             }}
           />
         </box>
-        <MenuBar
-          open={menuOpen}
-          version={CLIENT_VERSION}
-          status={status}
-          onToggle={() => setMenuOpen((isOpen) => !isOpen)}
-          onSettings={() => {
-            setMenuOpen(false);
-            setMenuDialog("settings");
-          }}
-          onKeybinds={() => {
-            setMenuOpen(false);
-            setMenuDialog("keybinds");
-          }}
-          theme={theme}
-        />
         {walking && walk !== null ? (
           <WalkWizard
             files={walkFileList}
@@ -720,20 +1033,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
           />
         ) : null}
         {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
-        {menuDialog === "keybinds" ? <KeybindsDialog sections={keyBindings.cheatsheet()} theme={theme} /> : null}
-        {menuDialog === "settings" ? (
-          <SettingsDialog
-            isOpen
-            categories={settingsCategories}
-            values={settingsValues}
-            activeCategoryId={settingsNav.categoryId}
-            activeRowIndex={settingsNav.rowIndex}
-            activeZone={settingsNav.zone}
-            onCategorySelect={(id) => setSettingsNav({ categoryId: id, rowIndex: 0, zone: "body" })}
-            onRowActivate={(row) => cycleSetting(row.key)}
-            theme={theme}
-          />
-        ) : null}
+        {menuChrome}
       </box>
     </ThemeProvider>
   );