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

package/src/App.tsx

@@ -13,24 +13,52 @@ 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 } 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, type HintMode } from "./key-bindings";
+import { KeyBindings } from "./key-bindings";
 import { ThemeProvider } from "./components/theme-context";
-import { StatusBar } from "./components/primitives/StatusBar";
+import { Button } from "./components/primitives/Button";
+import { Toolbar } from "./components/primitives/Toolbar";
+import { MenuBar } from "./components/MenuBar";
+import { KeybindsDialog } from "./components/KeybindsDialog";
+import { SettingsDialog, type SettingsCategory } from "./components/SettingsDialog";
+import { CLIENT_VERSION } from "./version";
 import { Breadcrumb, type BreadcrumbItem } from "./components/Breadcrumb";
 import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
 import { DiffSheet } from "./components/DiffSheet";
 import { annotationBlocking, type ReviewRailHandle } from "./components/ReviewRail";
 import { ReviewPanel } from "./components/ReviewPanel";
 import {
+  REVIEW_COMPACT_WIDTH,
   REVIEW_DEFAULT_WIDTH,
   resolveReviewWidth,
   toggleReviewPanelMode,
@@ -41,14 +69,11 @@ import { CompletionOverlay } from "./components/CompletionOverlay";
 import { InboxList } from "./components/InboxList";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { PromptDialog } from "./components/PromptDialog";
-import { ComposeBar } from "./components/ComposeBar";
 import { WalkWizard } from "./components/WalkWizard";
+import { Toast } from "./components/Toast";
 
-/**
- * The breadcrumb header and the status bar each occupy one terminal row; the
- * review layout (plan column, divider, rail) gets the rows that remain.
- */
-const CHROME_ROWS = 2;
+/** A toast clears itself after this idle; esc dismisses it sooner. */
+const TOAST_DISMISS_MS = 4000;
 
 export interface AppProps {
   home?: string;
@@ -76,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.
@@ -86,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],
   );
@@ -94,11 +129,8 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     controller.connect();
     return () => controller.close();
   }, [controller]);
-  const { session, inbox, status, 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(() => {
@@ -106,13 +138,27 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     return controller.startSharePoll();
   }, [isOwner, session?.id, session?.shareId, controller]);
   const renderer = useRenderer();
-  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const { width: terminalWidth } = useTerminalDimensions();
 
   // ── view state ──────────────────────────────
   const [cursor, setCursor] = useState(0);
   const [inboxCursor, setInboxCursor] = useState(0);
   const [mode, setMode] = useState<Mode>({ type: "normal" });
+  // the bottom-left menu drop-up and the centered dialog it opens
+  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";
+  }>({
+    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
@@ -133,16 +179,23 @@ 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]);
   useEffect(
@@ -152,6 +205,12 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     [],
   );
 
+  useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(() => controller.dismissToast(), TOAST_DISMISS_MS);
+    return () => clearTimeout(timer);
+  }, [toast, controller]);
+
   // First open of a share: ask the collaborator for a display name once, unless
   // a past visit already recorded one. esc skips and their notes read anonymous.
   const promptedSelfRef = useRef(false);
@@ -165,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. */
@@ -179,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();
@@ -189,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 ──
@@ -221,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);
@@ -229,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;
@@ -262,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 }));
@@ -277,6 +388,7 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
     setReviewWidth,
     setRailTab,
     setFocusedAnnotationId,
+    setSelectedCurationId,
     setPulsedAnnotationId,
     selectCardFromDocument,
     runEditorHandOff,
@@ -290,17 +402,126 @@ 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[] = [
+    {
+      id: "general",
+      name: "General",
+      description: "submission behaviour",
+      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"],
+        },
+      ],
+    },
+    {
+      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,
+    theme: THEME_LABELS[themeName],
+  };
+  const cycleSetting = (rowKey: string): void => {
+    if (rowKey === "autoClose") {
+      const next: AutoClose = autoClose === "off" ? 3 : autoClose === 3 ? 10 : "off";
+      setAutoClose(next);
+      persistAutoClose(next);
+    } else if (rowKey === "reviewPanel") {
+      const order: ReviewPanelMode[] = ["expanded", "compact", "hidden"];
+      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 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 }));
+      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) }));
+    else if (name === "h" || name === "tab") setSettingsNav((state) => ({ ...state, zone: "nav" }));
+    else if (name === "return" || name === "space")
+      cycleSetting(category.rows[settingsNav.rowIndex]!.key);
+  };
 
   useKeyboard((key) => {
+    if (menuDialog === "settings") return void handleSettingsKey(key.name);
+    if (menuDialog) return void (key.name === "escape" && setMenuDialog(null));
+    if (menuOpen) return void (key.name === "escape" && setMenuOpen(false));
+    // the toast is non-modal: escape only dismisses it when nothing else owns
+    // escape, so an open overlay (compose, submit, prompt, walk) still cancels
+    if (toast && key.name === "escape" && overlay === "none" && mode.type !== "span")
+      return controller.dismissToast();
     const state: KeyState = {
       keys: keysRef.current,
       readOnly: observer,
@@ -316,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 (
@@ -344,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 (
@@ -374,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>
     );
@@ -398,17 +704,93 @@ 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 diffComposeState =
+    mode.type === "compose" && isDiff
+      ? {
+          kind: mode.kind,
+          rowIndex: mode.displayIndex,
+          quote: rows[mode.displayIndex]?.text.replace(/\n$/, "") ?? "",
+          draft: {
+            text: mode.text,
+            onInput: (text: string) => {
+              liveInput.current = text;
+              setMode({ ...mode, text });
+            },
+            onSave: () => dispatch({ type: "saveCompose" }),
+            onCancel: () => dispatch({ type: "closeOverlay" }),
+          },
+        }
+      : 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);
@@ -484,36 +866,48 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
         }
       : null;
 
+  // width the review panel occupies (divider + rail), so the header can reserve
+  // it and keep Edit/Share pinned to the plan sheet's right edge, not the rail's
+  const railFootprint =
+    reviewMode === "hidden"
+      ? 0
+      : 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" },
-    { label: `${activeSession.artifact.meta.title ?? activeSession.artifact.meta.planPath ?? activeSession.id} · rev ${activeSession.revisions.length}`, tone: "dim" },
-    ...(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 }] : []),
-    ...(status ? [{ label: status, tone: "accent" 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",
+    },
+    { label: `submitted by ${activeSession.artifact.meta.agent ?? "unknown"}`, tone: "dim" },
   ];
 
-  keyBindings.setContext({ overlay, spanMode: mode.type === "span" });
-  const hintMode: HintMode = observer
-    ? "read-only"
-    : mode.type === "submit"
-      ? "submit"
-      : mode.type === "span"
-        ? "span"
-        : mode.type === "compose" || mode.type === "railEdit"
-          ? "compose"
-          : walking
-            ? "walk"
-            : focusedAnnotationId !== undefined
-              ? "card"
-              : role === "collaborator"
-                ? "collaborator"
-                : "normal";
-
   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);
@@ -526,7 +920,25 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
           controller.saveReviewPanel({ width: reviewWidthRef.current });
         }}
       >
-        <Breadcrumb items={headerItems} />
+        <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>
+              </Toolbar>
+            ) : null}
+          </box>
+          <box style={{ width: railFootprint }} />
+        </box>
         <box style={{ flexGrow: 1, flexDirection: "row" }}>
           {isDiff ? (
             // the sheet dims to reading-quiet colors while the wizard has focus
@@ -535,6 +947,8 @@ 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}
             />
           ) : (
@@ -546,18 +960,14 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               cursor={cursor}
               activeSpan={activeSpan}
               compose={composeState}
+              popover={popoverState}
               editOrphanCount={editOrphanCount}
               onLineActivate={onLineActivate}
-              onEditRequest={onEditRequest}
-              onShareRequest={onShareRequest}
-              canEdit={isOwner}
             />
           )}
           <ReviewPanel
             mode={reviewMode}
             width={resolveReviewWidth(reviewWidth, terminalWidth)}
-            height={terminalHeight - CHROME_ROWS}
-            dragging={dividerDragging}
             onDividerGrab={onDividerGrab}
             onToggle={onToggleReviewPanel}
             railRef={railRef}
@@ -566,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,
@@ -573,23 +986,12 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
               onTabChange: setRailTab,
               onSelectCard: selectCardFromRail,
               onActivateCard: openCardEdit,
+              onSelectCuration: selectCurationFromRail,
+              onUndoCuration: undoCurationFromRail,
               onSubmitRequest,
             }}
           />
         </box>
-        {mode.type === "compose" && isDiff ? (
-          <ComposeBar
-            kind={mode.kind}
-            quote={rows[mode.displayIndex]?.text ?? ""}
-            text={mode.text}
-            onInput={(text) => {
-              liveInput.current = text;
-              setMode({ ...mode, text });
-            }}
-          />
-        ) : (
-          <StatusBar>{keyBindings.statusHint(hintMode)}</StatusBar>
-        )}
         {walking && walk !== null ? (
           <WalkWizard
             files={walkFileList}
@@ -630,6 +1032,8 @@ export function App({ home, sessionId, readOnly = false, onExit, clock, openClie
             theme={theme}
           />
         ) : null}
+        {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
+        {menuChrome}
       </box>
     </ThemeProvider>
   );