@cueloop/client 0.1.0-alpha.63 → 0.1.0-alpha.65

package/src/App.tsx

@@ -1,7 +1,7 @@
 /**
  * The cueloop TUI: state wiring, keymap dispatch, and layout composition -
  * nothing else. Rendering lives in components/, daemon IO and the mutation
- * verbs in session-controller.ts, the keyboard grammar in keymap.ts with
+ * primitives in session-controller.ts, the keyboard grammar in keymap.ts with
  * binding resolution and status hints from key-bindings.ts, and theming in
  * the ThemeProvider. Selection is the entry primitive (mouse drag or keyboard
  * span on one native renderer selection); annotation text lives in the rail
@@ -19,7 +19,7 @@ import React, {
 } from "react";
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
 import type { Clock, MouseEvent } from "@opentui/core";
-import { displayText, marksByDisplay, spanFromRange, type Mark } from "./view-plan";
+import { marksByDisplay, type Mark } from "./view-plan";
 import { dimmedTheme } from "./theme";
 import {
   DEFAULT_KEYS,
@@ -37,21 +37,27 @@ import {
   type ThemeName,
 } from "./theme-presets";
 import type { Theme } from "./theme";
-import { createReviewController } from "./session-controller";
+import { createReviewController, type ShareTransport } from "./session-controller";
 import type { SessionClient } from "@cueloop/daemon/client";
 import { launchHarnessInSplit } from "@cueloop/daemon/herdr-split";
-import { activeSpanState, createIntentDispatch, type Mode } from "./intent-dispatch";
-import { reduceKey } from "./keymap";
-import { KeyBindings } from "./key-bindings";
+import { createIntentDispatch, type Mode } from "./intent-dispatch";
+import { reduceKey, type KeyState } from "./keymap";
+import { KeyBindings, type CheatsheetSection } from "./key-bindings";
 import { ThemeProvider } from "./components/theme-context";
 import { Button } from "./components/primitives/Button";
 import { Toolbar } from "./components/primitives/Toolbar";
 import { Breadcrumb } from "./components/Breadcrumb";
-import { PlanSheet, type PlanSheetHandle } from "./components/PlanSheet";
+import { THREAD_VIEW_CHEATSHEET, ThreadView } from "./components/ThreadView";
+import {
+  RAIL_CHORD_ENTRIES,
+  resolveThreadChord,
+  THREAD_CHORD_ENTRIES,
+  TREE_CHORD_ENTRIES,
+} from "./thread-chords";
 import { DiffSheet } from "./components/DiffSheet";
 import { PrototypeSheet } from "./components/PrototypeSheet";
 import type { PrototypeElement } from "./prototype-browser";
-import { type ReviewRailHandle } from "./components/ReviewRail";
+import { type RailTab, type ReviewRailHandle } from "./components/ReviewRail";
 import type { AgentTerminalHandle } from "./components/agent-launcher";
 import { ReviewPanel } from "./components/ReviewPanel";
 import {
@@ -62,12 +68,9 @@ import {
   type ReviewPanelMode,
 } from "./review-panel";
 import {
-  buildActiveSpan,
   buildCardEditState,
-  buildComposeState,
   buildDiffComposeState,
   buildHeaderItems,
-  buildPopoverState,
   buildRenderFlags,
   buildSubmitConfirmState,
   computePendingCount,
@@ -96,7 +99,7 @@ export interface AppProps {
   home?: string;
   sessionId?: string;
   /**
-   * Observer mode (SSH-served connections): every mutating verb is ignored and
+   * Observer mode (SSH-served connections): every mutating primitive is ignored and
    * answers "observer - read-only" in the status line; navigation still works.
    */
   readOnly?: boolean;
@@ -105,6 +108,7 @@ export interface AppProps {
   clock?: Clock;
   /** Session source; the sharing gateway injects a blob-backed client. */
   openClient?: () => Promise<SessionClient>;
+  shareTransport?: ShareTransport;
   /**
    * Who is at the keyboard. `owner` is the local planner (default). `observer`
    * is a passive `cueloop serve` watcher (read-only). `collaborator` is a share
@@ -124,6 +128,37 @@ export interface AppProps {
   appearance?: Appearance;
 }
 
+/** True while the drop-up or one of its dialogs is open and owns the keyboard. */
+function menuChromeOpen(menuOpen: boolean, menuDialog: "keybinds" | "settings" | null): boolean {
+  return menuOpen || menuDialog !== null;
+}
+
+/** True while a menu, an overlay, or the agent terminal owns the keyboard instead of the thread view. */
+function keyboardOwnedElsewhere(
+  menuOwnsKeyboard: boolean,
+  overlay: KeyState["overlay"],
+  agentTerminal: AgentTerminalHandle | null,
+): boolean {
+  return menuOwnsKeyboard || overlay !== "none" || agentTerminal !== null;
+}
+
+/** The keybinds dialog content: the thread grammar while the thread view owns the keys. */
+function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): CheatsheetSection[] {
+  const base = keyBindings.cheatsheet();
+
+  if (!threadViewActive) {
+    return base;
+  }
+
+  return [
+    ...THREAD_VIEW_CHEATSHEET,
+    { title: "Session", entries: [...THREAD_CHORD_ENTRIES] },
+    { title: "Rail", entries: [...RAIL_CHORD_ENTRIES] },
+    { title: "Tree", entries: [...TREE_CHORD_ENTRIES] },
+    ...base.filter((section) => section.title === "Agent terminal"),
+  ];
+}
+
 export function App({
   home,
   sessionId,
@@ -131,6 +166,7 @@ export function App({
   onExit,
   clock,
   openClient,
+  shareTransport,
   role = "owner",
   selfAuthor,
   appearance = "dark",
@@ -138,7 +174,15 @@ export function App({
   const { observer, isOwner } = computeRoleCapabilities(readOnly, role);
   const controller = useMemo(
     () =>
-      createReviewController({ home, sessionId, readOnly: observer, onExit, clock, openClient }),
+      createReviewController({
+        home,
+        sessionId,
+        readOnly: observer,
+        onExit,
+        clock,
+        openClient,
+        shareTransport,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [home, sessionId],
   );
@@ -163,7 +207,7 @@ export function App({
   useEffect(() => {
     if (!isOwner || !session?.shareId) return;
 
-    return controller.startSharePoll();
+    return controller.startShareSync();
   }, [isOwner, session?.id, session?.shareId, controller]);
   const renderer = useRenderer();
   const { width: terminalWidth } = useTerminalDimensions();
@@ -178,7 +222,9 @@ export function App({
   const [autoClose, setAutoClose] = useState<AutoClose>("off");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
   const [selectedCurationId, setSelectedCurationId] = useState<string | undefined>(undefined);
-  const [railTab, setRailTab] = useState<"review" | "agent">("review");
+  const [railTab, setRailTab] = useState<RailTab>("review");
+  // the tree row the reviewer stands on in the rail's Tree tab
+  const [selectedEntryId, setSelectedEntryId] = useState<string | undefined>(undefined);
   // A running in-tab agent terminal (embedded harness); while set, keys route to it.
   const [agentTerminal, setAgentTerminal] = useState<AgentTerminalHandle | null>(null);
   // review panel layout: mode + expanded width are client view state, loaded
@@ -194,7 +240,6 @@ export function App({
   // live mirror of overlay input text: refs commit synchronously, so the
   // RETURN handler never reads a stale value mid-typing
   const liveInput = useRef("");
-  const planSheetRef = useRef<PlanSheetHandle | null>(null);
   const railRef = useRef<ReviewRailHandle | null>(null);
   // keymap from layered config; the loaded theme swaps the provider value
   const keysRef = useRef(DEFAULT_KEYS);
@@ -295,6 +340,9 @@ export function App({
     return ids;
   }, [marks]);
   const { isDiff, isPrototype, resolved } = deriveReviewFlags(session);
+  // plans and replies open in the thread view; diffs and prototypes keep their sheets
+  const threadViewActive = session !== null && !isDiff && !isPrototype;
+  const [threadComposing, setThreadComposing] = useState(false);
   const [prototypeComposing, setPrototypeComposing] = useState(false);
   // 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
@@ -305,7 +353,8 @@ export function App({
     if (!session) return positions;
     if (isDiff) {
       for (const annotation of session.annotations) {
-        const blockIndex = (annotation.anchor as { blockIndex?: number }).blockIndex;
+        const blockIndex =
+          "blockIndex" in annotation.anchor ? annotation.anchor.blockIndex : undefined;
 
         if (blockIndex !== undefined) positions.set(annotation.id, blockIndex);
       }
@@ -324,18 +373,6 @@ export function App({
   const walking = isWalking(isDiff, walk);
   const viewedPaths = useMemo(() => new Set(session?.viewedPaths ?? []), [session]);
 
-  // driving needs committed layout, so it runs after render; any transition
-  // 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(() => {
-    // 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 ──
   const pulse = (id: string): void => {
     setPulsedAnnotationId(id);
@@ -348,7 +385,6 @@ export function App({
     for (const [displayIndex, blockMarks] of marks) {
       if (!blockMarks.some((mark) => mark.annotationId === annotationId)) continue;
       setCursor(displayIndex);
-      planSheetRef.current?.revealBlock(displayIndex);
 
       return;
     }
@@ -374,7 +410,6 @@ export function App({
 
     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,
@@ -433,6 +468,8 @@ export function App({
     terminalWidth,
     focusedAnnotationId,
     selectedCurationId,
+    railTab,
+    selectedEntryId,
     authorNames,
     quickActions,
     renameAuthor: (id: string, name: string) => {
@@ -441,13 +478,13 @@ export function App({
     },
     liveInput,
     reviewWidthRef,
-    planSheetRef,
     setCursor,
     setInboxCursor,
     setMode,
     setReviewMode,
     setReviewWidth,
     setRailTab,
+    setSelectedEntryId,
     setFocusedAnnotationId,
     setSelectedCurationId,
     setPulsedAnnotationId,
@@ -458,7 +495,28 @@ export function App({
 
   const overlay = resolveOverlay(mode, completion.phase, walking);
 
+  const menuOwnsKeyboard = menuChromeOpen(menuOpen, 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 threadViewSuspended = keyboardOwnedElsewhere(menuOwnsKeyboard, overlay, agentTerminal);
+
   useKeyboard((key) => {
+    // The thread view owns the document grammar while active (its own
+    // useKeyboard handles marks, comments, and ctrl+q); the session chords
+    // (submit, share, edit, walk, the rail) resolve here, and the keymap only
+    // sees keys while an overlay or the menu owns them.
+    if (threadViewActive && !threadViewSuspended) {
+      const chord = resolveThreadChord(key, {
+        composing: threadComposing,
+        isOwner,
+        resolved,
+        treeActive: railTab === "tree",
+      });
+
+      if (chord) dispatch(chord);
+
+      return;
+    }
     // The prototype compose textarea owns the keyboard while open: let it receive
     // the typed note instead of the global keymap acting on each letter.
     if (prototypeComposing) return;
@@ -515,7 +573,7 @@ export function App({
       theme={theme}
       setMenuOpen={setMenuOpen}
       setMenuDialog={setMenuDialog}
-      keybindsSections={keyBindings.cheatsheet()}
+      keybindsSections={cheatsheetFor(keyBindings, threadViewActive)}
       settingsCategories={settingsCategories}
       settingsValues={settingsValues}
       settingsNav={settingsNav}
@@ -554,7 +612,6 @@ export function App({
       />
     );
 
-  const composeState = buildComposeState({ mode, isDiff, display, liveInput, setMode, dispatch });
   const diffComposeState = buildDiffComposeState({
     mode,
     isDiff,
@@ -563,17 +620,6 @@ export function App({
     setMode,
     dispatch,
   });
-  const activeSpan = buildActiveSpan(mode, isDiff);
-  const popoverState = buildPopoverState({
-    mode,
-    isDiff,
-    quickActions,
-    isOwner,
-    observer,
-    resolved,
-    controller,
-    dispatch,
-  });
   const submitConfirmState = buildSubmitConfirmState({
     mode,
     isDiff,
@@ -600,39 +646,6 @@ export function App({
       resolvedIds,
     });
 
-  // 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.
-  // Returns whether a native selection existed (the release ended a drag).
-  const activateSpanFromSelection = (preferredIndex?: number): boolean => {
-    if (!renderer?.hasSelection) return false;
-    // the release block re-anchors the span, so each drag replaces the last
-    const selection = planSheetRef.current?.readSelection(preferredIndex);
-    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 true;
-  };
-
-  const onLineActivate = (displayIndex: number): void => {
-    if (activateSpanFromSelection(displayIndex)) return;
-    setCursor(displayIndex);
-    const annotationId = marks.get(displayIndex)?.[0]?.annotationId;
-
-    if (annotationId) selectCardFromDocument(annotationId);
-  };
-
-  // a drag released outside any block's text (the gutter, past a line end, a
-  // gap between blocks) never reaches a block handler; the sheet-level release
-  // still turns the finished drag into a span
-  const onSelectionRelease = (): void => {
-    activateSpanFromSelection();
-  };
-
   const onEditRequest = (): void => {
     // A share viewer/observer has no Edit affordance (the button is hidden), so
     // this is owner-only; stay silent rather than nag if it is ever reached.
@@ -734,18 +747,37 @@ export function App({
               theme={walking ? dimmedTheme(theme) : undefined}
             />
           ) : (
-            <PlanSheet
-              ref={planSheetRef}
+            <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}
-              cursor={cursor}
-              activeSpan={activeSpan}
-              compose={composeState}
-              popover={popoverState}
-              editOrphanCount={editOrphanCount}
-              onLineActivate={onLineActivate}
-              onSelectionRelease={onSelectionRelease}
+              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)}
+              onExit={() => onExit?.(0)}
             />
           )}
           <ReviewPanel
@@ -779,6 +811,21 @@ export function App({
                   seedText,
                 }),
               onAgentTerminal: setAgentTerminal,
+              tree: {
+                rows: controller.treeRows(),
+                selectedEntryId,
+                canMove: isOwner && !resolved,
+                canFork: isOwner,
+                onSelect: setSelectedEntryId,
+                onGo: (entryId) => {
+                  setSelectedEntryId(entryId);
+                  dispatch({ type: "treeGo" });
+                },
+                onBranch: () => dispatch({ type: "treeBranch" }),
+                onLabel: () => dispatch({ type: "treeLabel" }),
+                onFork: () => dispatch({ type: "treeFork" }),
+                onForkAndShare: () => dispatch({ type: "treeForkShare" }),
+              },
             }}
           />
         </box>

package/src/app-screens.tsx

@@ -2,7 +2,7 @@ import React, { type Dispatch, type SetStateAction } from "react";
 import type { ReviewSession, VerdictKind } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
-import type { Mode } from "./intent-dispatch";
+import type { Mode, TreeAsk } from "./intent-dispatch";
 import type { Intent } from "./keymap";
 import type { ReviewController, ToastState } from "./session-controller";
 import { noteForFile } from "./walk";
@@ -195,6 +195,21 @@ export function CompletionScreen(props: {
   );
 }
 
+/** The words each tree prompt uses; enter with an empty summary moves back without one. */
+const TREE_PROMPTS: Record<TreeAsk, { title: string; label: string; placeholder: string }> = {
+  branch: { title: " Branch ", label: "Name for the new branch:", placeholder: "alt" },
+  label: {
+    title: " Checkpoint ",
+    label: "Name for this checkpoint:",
+    placeholder: "before the rewrite",
+  },
+  navigate: {
+    title: " Move back ",
+    label: "Summary of what you leave behind (optional):",
+    placeholder: "tried a shorter plan",
+  },
+};
+
 export function TrailingOverlays(props: {
   walking: boolean;
   walk: { index: number } | null;
@@ -264,6 +279,17 @@ export function TrailingOverlays(props: {
           theme={theme}
         />
       ) : null}
+      {mode.type === "treePrompt" ? (
+        <PromptDialog
+          isOpen
+          title={TREE_PROMPTS[mode.ask].title}
+          label={TREE_PROMPTS[mode.ask].label}
+          value={mode.text}
+          placeholder={TREE_PROMPTS[mode.ask].placeholder}
+          onInput={(text) => setMode({ ...mode, text })}
+          theme={theme}
+        />
+      ) : null}
       {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
     </>
   );

package/src/app-view-model.ts

@@ -1,14 +1,11 @@
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import type { ReviewSession, VerdictKind } from "@cueloop/schema";
-import { activeSpanState, reviewerAnnotations, type Mode } from "./intent-dispatch";
-import { displayText, type DisplayBlock } from "./view-plan";
+import { reviewerAnnotations, type Mode } from "./intent-dispatch";
 import type { DiffRow } from "./view-diff";
 import type { Intent, KeyState } from "./keymap";
-import type { Completion, ReviewController } from "./session-controller";
-import type { QuickAction } from "./config";
+import type { Completion } from "./session-controller";
 import type { WalkFile } from "./walk";
 import { viewedCount } from "./walk";
-import type { PlanComposeState, PlanPopoverState } from "./components/PlanSheet";
 import type { DiffComposeState } from "./components/DiffSheet";
 import type { ConfirmCardProps } from "./components/ConfirmCard";
 import type { RailCardEdit } from "./components/ReviewRail";
@@ -18,17 +15,13 @@ import { REVIEW_COMPACT_WIDTH, resolveReviewWidth, type ReviewPanelMode } from "
 export function computeRoleCapabilities(
   readOnly: boolean,
   role: "owner" | "observer" | "collaborator",
-): { observer: boolean; isOwner: boolean } {
+) {
   const observer = readOnly || role === "observer";
 
   return { observer, isOwner: !observer && role === "owner" };
 }
 
-export function deriveReviewFlags(session: ReviewSession | null): {
-  isDiff: boolean;
-  isPrototype: boolean;
-  resolved: boolean;
-} {
+export function deriveReviewFlags(session: ReviewSession | null) {
   return {
     isDiff: session?.artifact.type === "diff",
     isPrototype: session?.artifact.type === "prototype",
@@ -48,7 +41,8 @@ export function resolveOverlay(
   if (mode.type === "compose" || mode.type === "railEdit") return "compose";
   if (mode.type === "submit") return "submit";
   if (mode.type === "confirmDelete") return "confirm";
-  if (mode.type === "rename" || mode.type === "nameSelf") return "prompt";
+  if (mode.type === "rename" || mode.type === "nameSelf" || mode.type === "treePrompt")
+    return "prompt";
   if (mode.type === "spanActions") return "spanActions";
   if (completionPhase === "prompt") return "completion-prompt";
   if (completionPhase === "counting") return "completion-counting";
@@ -121,13 +115,7 @@ export function buildRenderFlags(params: {
   menuOpen: boolean;
   menuDialog: "keybinds" | "settings" | null;
   resolvedIds: Set<string>;
-}): {
-  showOwnerActions: boolean;
-  prototypeCanComment: boolean;
-  chromeHidden: boolean;
-  prototypePath: string;
-  railResolvedIds: Set<string> | null;
-} {
+}) {
   const { session, isOwner, isDiff, isPrototype, resolved, menuOpen, menuDialog, resolvedIds } =
     params;
 
@@ -140,49 +128,12 @@ export function buildRenderFlags(params: {
   };
 }
 
-export function buildActiveSpan(
-  mode: Mode,
-  isDiff: boolean,
-): { displayIndex: number; start: number; end: number } | null {
-  const markedSpan = activeSpanState(mode);
-
-  if (markedSpan)
-    return { displayIndex: markedSpan.displayIndex, start: markedSpan.start, end: markedSpan.end };
-  if (mode.type === "compose" && !isDiff)
-    return { displayIndex: mode.displayIndex, start: mode.start, end: mode.end };
-
-  return null;
-}
-
 interface DraftHandlerDeps {
   liveInput: MutableRefObject<string>;
   setMode: Dispatch<SetStateAction<Mode>>;
   dispatch: (intent: Intent) => void;
 }
 
-export function buildComposeState(
-  deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; display: DisplayBlock[] },
-): PlanComposeState | null {
-  const { mode, isDiff, display, liveInput, setMode, dispatch } = deps;
-
-  if (mode.type !== "compose" || isDiff) return null;
-
-  return {
-    kind: mode.kind,
-    displayIndex: mode.displayIndex,
-    quote: displayText(display[mode.displayIndex]!).slice(mode.start, mode.end),
-    draft: {
-      text: mode.text,
-      onInput: (text: string) => {
-        liveInput.current = text;
-        setMode({ ...mode, text });
-      },
-      onSave: () => dispatch({ type: "saveCompose" }),
-      onCancel: () => dispatch({ type: "closeOverlay" }),
-    },
-  };
-}
-
 export function buildDiffComposeState(
   deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; rows: DiffRow[] },
 ): DiffComposeState | null {
@@ -206,59 +157,6 @@ export function buildDiffComposeState(
   };
 }
 
-export function buildPopoverState(deps: {
-  mode: Mode;
-  isDiff: boolean;
-  quickActions: QuickAction[];
-  isOwner: boolean;
-  observer: boolean;
-  resolved: boolean;
-  controller: ReviewController;
-  dispatch: (intent: Intent) => void;
-}): PlanPopoverState | null {
-  const { mode, isDiff, quickActions, isOwner, observer, resolved, controller, dispatch } = deps;
-  const markedSpan = activeSpanState(mode);
-
-  if (!markedSpan || isDiff) return null;
-  const spanMutationBlock = (): string | null =>
-    observer ? "observer - read-only" : resolved ? "review submitted - read-only" : null;
-
-  return {
-    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" }),
-  };
-}
-
 export function buildSubmitConfirmState(
   deps: DraftHandlerDeps & {
     mode: Mode;

package/src/components/AnnotationCard.tsx

@@ -181,11 +181,11 @@ export function AnnotationCard({
   );
 
   if (draft) {
-    const verb = "comment on";
+    const primitive = "comment on";
 
     return (
       <Card
-        title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
+        title={` ${primitive} "${truncateToSingleLine(quote, 40)}" `}
         contentRows={editorRowCount + 1}
         borderColor={kindColor}
         backgroundColor="transparent"

package/src/components/DiffSheet.scroll.test.tsx

@@ -4,7 +4,7 @@ import { expect, test } from "bun:test";
 import React, { useState } from "react";
 import { testRender } from "@opentui/react/test-utils";
 import { useKeyboard } from "@opentui/react";
-import type { Renderable, ScrollBoxRenderable } from "@opentui/core";
+import { ScrollBoxRenderable, type Renderable } from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import { DiffSheet } from "./DiffSheet";
 import { diffRows, type DiffRow } from "../view-diff";
@@ -82,7 +82,10 @@ test("scrolling down past wrapped annotation cards keeps the cursor pinned and t
   });
 
   await setup.waitForVisualIdle();
-  const scrollbox = findById(setup.renderer.root, "diff-scroll") as ScrollBoxRenderable;
+  const found = findById(setup.renderer.root, "diff-scroll");
+
+  if (!(found instanceof ScrollBoxRenderable)) throw new Error("diff-scroll is not a scrollbox");
+  const scrollbox = found;
 
   // the cursor row is the one painted with the cursor background
   const cursorScreenRow = (): number => {

package/src/components/DiffSheet.tsx

@@ -60,12 +60,7 @@ export interface DiffSheetProps {
 }
 
 /** The sign, base color, and background a row draws with. */
-function rowStyle(
-  row: DiffRow,
-  isCursorRow: boolean,
-  isAnnotatedRow: boolean,
-  tokens: Theme,
-): { sign: string; baseColor: string; background: string | undefined } {
+function rowStyle(row: DiffRow, isCursorRow: boolean, isAnnotatedRow: boolean, tokens: Theme) {
   const sign = row.kind === "add" ? "+" : row.kind === "del" ? "-" : " ";
   const baseColor =
     row.kind === "add"