@cueloop/client 0.1.0-alpha.82 → 0.1.0-alpha.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.82",
+  "version": "0.1.0-alpha.84",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.82",
-    "@cueloop/extension-api": "0.1.0-alpha.82",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.82",
-    "@cueloop/schema": "0.1.0-alpha.82",
+    "@cueloop/daemon": "0.1.0-alpha.84",
+    "@cueloop/extension-api": "0.1.0-alpha.84",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.84",
+    "@cueloop/schema": "0.1.0-alpha.84",
     "@opentui/core": "^0.5.11",
     "@opentui/keymap": "0.5.11",
     "@opentui/react": "^0.5.11",

package/src/App.diff.test.tsx

@@ -96,9 +96,9 @@ describe("diff review", () => {
 
     // Act - submit with the session chord (cmd+enter, no composer open), cycle to request changes
     await pressKey(setup, "RETURN", { meta: true });
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
     await press(setup, "right");
-    await waitForText(setup, "[Changes]");
+    await waitForText(setup, "[changes]");
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
@@ -195,10 +195,11 @@ describe("diff review", () => {
     await navCommand(setup, "x");
 
     // Assert - the single change is gone, so the curated working copy is empty
-    await waitForText(setup, "change rejected");
+    await waitForState(setup, () => server.core.sessionGet(withFiles.id).workingCopy === "");
     const stored = server.core.sessionGet(withFiles.id);
 
     expect(stored.workingCopy).toBe("");
+    expect(setup.captureCharFrame()).not.toContain("change rejected");
   });
 
   test("a diff opens with the Changes column listing every changed file", async () => {

package/src/App.export.test.tsx

@@ -77,7 +77,7 @@ describe("obsidian export on resolve", () => {
     await pressKey(setup, "RETURN", { meta: true }); // open the submit overlay, keep the default message (approve)
 
     // Assert
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
 
     // Act
     await pressKey(setup, "RETURN", { meta: true }); // submit

package/src/App.readonly.test.tsx

@@ -114,7 +114,7 @@ describe("observer primitives are blocked", () => {
 
       // no draft card and no submit card ever appear
       expect(frame).not.toContain("● c");
-      expect(frame).not.toContain("[Approve]");
+      expect(frame).not.toContain("[approve]");
       expect(snapshot()).toEqual(before);
     });
   }

package/src/App.submit-confirm.test.tsx

@@ -84,7 +84,7 @@ function seedAnnotations(count: number): void {
 }
 
 describe("send message confirm", () => {
-  test("cmd+enter opens the send-message confirm overlay", async () => {
+  test("cmd+enter opens the send-message confirm overlay with stable message choices", async () => {
     // Arrange
     const setup = await renderApp();
 
@@ -95,12 +95,31 @@ describe("send message confirm", () => {
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert - the overlay: message selector and word-buttons
-    await waitForText(setup, "[Approve]"); // nothing pending: approve default
-    const frame = setup.captureCharFrame();
+    await waitForText(setup, "[approve]"); // nothing pending: approve default
+    const initialFrame = setup.captureCharFrame();
+    const initialSelector = initialFrame
+      .split("\n")
+      .find((row) => row.includes("[comment] [approve] [changes]"));
+
+    expect(initialSelector).toBeDefined();
+    expect(initialFrame).toContain(" send ");
+    expect(initialFrame).toContain(" cancel ");
 
-    expect(frame).toContain("[Approve]");
-    expect(frame).toContain(" send ");
-    expect(frame).toContain(" cancel ");
+    // Act - move the active choice across the selector
+    await press(setup, "right");
+    const changesSelector = setup
+      .captureCharFrame()
+      .split("\n")
+      .find((row) => row.includes("[comment] [approve] [changes]"));
+    await press(setup, "right");
+    const commentSelector = setup
+      .captureCharFrame()
+      .split("\n")
+      .find((row) => row.includes("[comment] [approve] [changes]"));
+
+    // Assert - active styling does not move or resize any choice
+    expect(changesSelector).toBe(initialSelector);
+    expect(commentSelector).toBe(initialSelector);
   });
 
   test("left/right cycles the message selector in the overlay", async () => {
@@ -110,25 +129,25 @@ describe("send message confirm", () => {
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
 
     // Act
     await press(setup, "right");
 
     // Assert
-    await waitForText(setup, "[Changes]");
+    await waitForText(setup, "[changes]");
 
     // Act
     await press(setup, "right");
 
     // Assert
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[comment]");
 
     // Act
     await press(setup, "left");
 
     // Assert
-    await waitForText(setup, "[Changes]");
+    await waitForText(setup, "[changes]");
   });
 
   test("esc closes the overlay", async () => {
@@ -138,13 +157,13 @@ describe("send message confirm", () => {
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
 
     // Act
     await press(setup, "escape");
 
     // Assert - a bare ESC settles after the parser's escape-sequence window
-    const frame = await waitForTextGone(setup, "[Approve]");
+    const frame = await waitForTextGone(setup, "[approve]");
 
     expect(frame).not.toContain(" cancel ");
   });
@@ -158,9 +177,9 @@ describe("send message confirm", () => {
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert - opens on the default message, then cycle to request changes
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
     await press(setup, "right");
-    await waitForText(setup, "[Changes]");
+    await waitForText(setup, "[changes]");
 
     // Act
     await setup.mockInput.typeText("Tighten the steps.");
@@ -174,12 +193,35 @@ describe("send message confirm", () => {
     expect(stored.message!.outcome).toBe("changes_requested");
   });
 
+  test("Comment sends feedback while leaving the Thread open", async () => {
+    seedAnnotations(1);
+    const setup = await renderApp();
+
+    await pressKey(setup, "RETURN", { meta: true });
+    await waitForText(setup, "[approve]");
+    await press(setup, "left");
+    await waitForText(setup, "[comment]");
+
+    await setup.mockInput.typeText("For now.");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    await waitForText(setup, "comment sent - thread stays open");
+    const stored = server.core.sessionGet(session.id);
+
+    expect(stored.status).toBe("pending");
+    expect(stored.message!.outcome).toBe("comment");
+    expect(stored.message!.annotations?.map((annotation) => annotation.id)).toEqual([
+      "a_confirm_1",
+    ]);
+    expect(setup.captureCharFrame()).not.toContain("feedback sent");
+  });
+
   test("typing / in the summary opens the skills/actions palette", async () => {
     // Arrange
     seedAnnotations(1);
     const setup = await renderApp();
     await pressKey(setup, "RETURN", { meta: true });
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
 
     // Act
     await setup.mockInput.typeText("/restate");
@@ -192,7 +234,7 @@ describe("send message confirm", () => {
     // Arrange
     const setup = await renderApp();
     await pressKey(setup, "RETURN", { meta: true });
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
 
     // Act - a burst of control bytes stands in for the binary an image paste delivers
     await setup.mockInput.typeText("look at this ");
@@ -215,7 +257,7 @@ describe("send message confirm", () => {
     // Assert - no overlay, and the session stays pending
     const frame = setup.captureCharFrame();
 
-    expect(frame).not.toContain("[Approve]");
+    expect(frame).not.toContain("[approve]");
     expect(frame).not.toContain(" cancel ");
     expect(server.core.sessionGet(session.id).status).toBe("pending");
   });

package/src/App.test.tsx

@@ -8,6 +8,7 @@ import React from "react";
 import { DaemonServer } from "@cueloop/daemon";
 import type { Thread } from "@cueloop/schema";
 import { App } from "./App";
+import { DARK } from "./theme";
 import {
   clickText,
   dragText,
@@ -33,6 +34,8 @@ The daemon persists sessions to disk atomically.
 
 - move the store
 - add recovery
+
+Use the **safe** mode.
 `;
 
 let home: string;
@@ -67,6 +70,25 @@ async function renderApp(sessionId?: string) {
   });
 }
 
+type Setup = Awaited<ReturnType<typeof renderApp>>;
+
+function foregroundsOf(setup: Setup, needle: string): string[] {
+  const foregrounds: string[] = [];
+
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (!span.text.includes(needle)) continue;
+      const [red, green, blue] = span.fg.toInts();
+
+      foregrounds.push(
+        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""),
+      );
+    }
+  }
+
+  return foregrounds;
+}
+
 describe("plan rendering", () => {
   test("renders the plan with headings, list markers, and the footer", async () => {
     // Arrange
@@ -168,6 +190,58 @@ describe("thread view grammar", () => {
     await waitForState(setup, () => server.core.sessionGet(session.id).workingCopy === undefined);
   });
 
+  test("Cut removes only the marked characters instead of their whole block", async () => {
+    const setup = await renderApp();
+
+    await dragText(setup, "move the store", "move the store", "move".length);
+    await navCommand(setup, "x");
+    await waitForState(setup, () =>
+      (server.core.sessionGet(session.id).workingCopy ?? "").includes("-  the store"),
+    );
+    const working = server.core.sessionGet(session.id).workingCopy ?? "";
+    const textCuts = server.core.sessionGet(session.id).textCuts;
+
+    expect(working).not.toContain("move the store");
+    expect(working).toContain("-  the store");
+    expect(working).toContain("- add recovery");
+    expect(textCuts).toHaveLength(1);
+    expect(textCuts?.[0]?.quote).toBe("move");
+    expect(foregroundsOf(setup, "the store")).not.toContain(DARK.green);
+    expect(setup.captureCharFrame()).not.toContain("selection cut");
+
+    await pressKey(setup, "x");
+    await waitForState(setup, () => server.core.sessionGet(session.id).workingCopy === undefined);
+
+    expect(server.core.sessionGet(session.id).textCuts).toBeUndefined();
+  });
+
+  test("a large partial Cut keeps its surviving prefix plain in one modified block", async () => {
+    const original = "A seeded plan so cueloop dev always has a thread to open.";
+    const shortened = server.core.sessionCreate({
+      workspace: { repoRoot: "/repo", branch: "main" },
+      artifact: { type: "plan", content: original, meta: { title: "Partial Cut" } },
+    });
+
+    server.core.sessionSetWorkingCopy(shortened.id, "A seed");
+    const setup = await renderApp(shortened.id);
+
+    await waitForText(setup, "A seed");
+    expect(foregroundsOf(setup, "seed")).toContain(DARK.text);
+    expect(foregroundsOf(setup, "seed")).not.toContain(DARK.green);
+  });
+
+  test("Cut maps rendered inline Markdown back to its exact source characters", async () => {
+    const setup = await renderApp();
+
+    await dragText(setup, "safe", "safe", "safe".length);
+    await navCommand(setup, "x");
+    await waitForState(setup, () =>
+      (server.core.sessionGet(session.id).workingCopy ?? "").includes("Use the **** mode."),
+    );
+
+    expect(server.core.sessionGet(session.id).workingCopy).toContain("Use the **** mode.");
+  });
+
   test("ctrl+e opens the inline editor; the header toggles to normal and leaving tracks the edit", async () => {
     // Arrange
     const setup = await renderApp();
@@ -204,11 +278,11 @@ describe("submit", () => {
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert - the card opens on the default message, approve
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
 
     // Act - cycle to request changes, then send with a summary
     await press(setup, "right");
-    await waitForText(setup, "[Changes]");
+    await waitForText(setup, "[changes]");
     await type(setup, "Expand the steps.");
     await pressKey(setup, "RETURN", { meta: true });
 
@@ -231,7 +305,7 @@ describe("submit", () => {
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
-    await waitForText(setup, "[Approve]"); // no pending items → approve default
+    await waitForText(setup, "[approve]"); // no pending items → approve default
 
     // Act
     await pressKey(setup, "RETURN", { meta: true });

package/src/App.tsx

@@ -674,7 +674,6 @@ export function App({
       const name = github.name?.trim() || github.login;
 
       applyIdentity({ name, provider: "github" });
-      controller.setStatus(`identity synced from GitHub - ${name}`);
     });
   };
 
@@ -859,10 +858,6 @@ export function App({
 
       setDiffView(next);
       persistDiffView(next);
-      // every toggle names the new mode; picking split on a narrow pane also says it needs the wide layout
-      if (next === "stacked") controller.setStatus("stacked diff");
-      else if (workbench.zoomed) controller.setStatus("split diff");
-      else controller.setStatus("split diff shows when zoomed");
     },
     openShareDialog: () => {
       if (!isOwner) return controller.setStatus("only the plan owner can share");
@@ -896,7 +891,13 @@ export function App({
   }, [session, navigablePanes, focusedPane]);
   const cyclePanes = (backward: boolean): void =>
     setFocusedPane((current) => nextFocusPane(current, navigablePanes, backward));
-  const runNavCommand = (key: { name: string; shift?: boolean }): boolean => {
+  const runNavCommand = (
+    key: { name: string; shift?: boolean },
+    selection: {
+      start: { blockIndex: number; char: number };
+      end: { blockIndex: number; char: number };
+    } | null = null,
+  ): boolean => {
     const intent = resolveNavKey(key, {
       isOwner,
       resolved,
@@ -905,7 +906,14 @@ export function App({
     });
 
     if (!intent) return false;
-    dispatch(intent);
+    if (intent.type === "cut" && selection) {
+      controller.cut(
+        selection.start.blockIndex,
+        selection.start.char,
+        selection.end.char,
+        selection.end.blockIndex,
+      );
+    } else dispatch(intent);
 
     return true;
   };

package/src/App.walk.test.tsx

@@ -253,7 +253,7 @@ describe("the guided walk", () => {
     await waitForTextGone(setup, "agent note");
     await pressKey(setup, "RETURN", { meta: true });
     // nothing pending despite the note, so the confirm card defaults to approve
-    await waitForText(setup, "[Approve]");
+    await waitForText(setup, "[approve]");
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert

package/src/components/ConfirmCard.tsx

@@ -7,7 +7,7 @@
 
 import React, { useContext } from "react";
 import { useTerminalDimensions } from "@opentui/react";
-import type { MessageOutcome } from "@cueloop/schema";
+import { MESSAGE_OUTCOMES, type MessageOutcome } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import type { QuickAction } from "../config";
 import { SlashSkillsContext } from "../skills";
@@ -18,15 +18,14 @@ import { composeRowCount } from "./AnnotationCards";
 import { SlashComposer } from "./SlashComposer";
 import { DialogActions } from "./primitives/DialogActions";
 
-const SUBMIT_CARD_MAX_WIDTH = 48;
+const SUBMIT_CARD_MAX_WIDTH = 52;
 const PALETTE_WINDOW = 5;
 
-export const MESSAGE_OUTCOMES: MessageOutcome[] = ["approved", "changes_requested"];
-
 /** Selector words in the confirm card - one word per message. */
 export const MESSAGE_OUTCOME_LABEL: Record<MessageOutcome, string> = {
-  approved: "Approve",
-  changes_requested: "Changes",
+  comment: "comment",
+  approved: "approve",
+  changes_requested: "changes",
 };
 
 export interface ConfirmCardProps {
@@ -57,10 +56,10 @@ export function outcomeColor(message: MessageOutcome, tokens: Theme): string {
 }
 
 /**
- * The message selector: one row of pressable words, matching the reading
- * direction of a choice between two outcomes. Selection stays controlled by
- * the grammar (←/→ cycle the message); a click selects directly. The
- * selected message wears brackets and its color.
+ * The message selector: one row of pressable words in reading order.
+ * Selection stays controlled by the grammar (←/→ cycle the message); a click
+ * selects directly. Every message keeps its brackets so active color never changes the row's
+ * width or moves a neighboring choice.
  */
 function MessageSelector({
   message,
@@ -82,9 +81,7 @@ function MessageSelector({
           onMouseUp={() => onSelectMessage(candidate)}
         >
           <text fg={candidate === message ? outcomeColor(candidate, tokens) : tokens.textDim}>
-            {candidate === message
-              ? `[${MESSAGE_OUTCOME_LABEL[candidate]}]`
-              : ` ${MESSAGE_OUTCOME_LABEL[candidate]} `}
+            {`[${MESSAGE_OUTCOME_LABEL[candidate]}]`}
           </text>
         </box>
       ))}
@@ -106,7 +103,7 @@ export function ConfirmCard({
   const tokens = useComponentTheme(theme);
   const skills = useContext(SlashSkillsContext);
   const { width: terminalWidth } = useTerminalDimensions();
-  const cardWidth = Math.max(24, Math.min(terminalWidth - 6, SUBMIT_CARD_MAX_WIDTH));
+  const cardWidth = Math.max(24, Math.min(terminalWidth - 2, SUBMIT_CARD_MAX_WIDTH));
 
   const composerRows = composeRowCount(summary, cardWidth - 4);
   const token = activeSlashToken(summary, summary.length);

package/src/components/DiffContentView.tsx

@@ -24,7 +24,7 @@ import { splitDiffRows, type SplitLine, type SplitRow } from "../split-diff";
 import { UNDERLINE, type AnnotationPalette } from "../annotation-palette";
 import { lineMarkRanges, runsFor, wrapLines, type MarkRange } from "../mark-runs";
 import { useFrameMeasure } from "../use-frame-measure";
-import { useTerminalVirtualizer } from "../use-terminal-virtualizer";
+import { scrollBoxDragViewport, useTerminalVirtualizer } from "../use-terminal-virtualizer";
 import { useAnnotationSurface, type LineSource } from "../use-annotation-surface";
 import { NavModeHint } from "./NavModeHint";
 import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
@@ -98,7 +98,7 @@ export interface DiffContentViewProps {
   onUpdateAnnotation: (id: string, body: string) => void;
   /** The author's display name for a comment's hover tooltip. */
   resolveAuthorLabel?: (annotation: Annotation) => string | undefined;
-  onNavCommand?: (key: KeyEvent) => boolean;
+  onNavCommand?: (key: KeyEvent, selection: TextSpan | null) => boolean;
   onExit: () => void;
   /** Row indices the owner rejected during curation; drawn struck through. */
   rejectedRows?: Set<number>;
@@ -527,6 +527,7 @@ export function DiffContentView({
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    dragViewport: () => scrollBoxDragViewport(scrollRef.current),
     resolveAuthorLabel,
     onNavCommand,
     onExit,

package/src/components/ProjectTreeView.test.tsx

@@ -5,7 +5,7 @@ import { test, expect } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
 import { ProjectTreeView } from "./ProjectTreeView";
-import { settle, waitForText } from "../test-support";
+import { locateText, settle, waitForText } from "../test-support";
 import { DARK } from "../theme";
 
 test("tab expands a folder, then j moves down and tab opens the file", async () => {
@@ -57,3 +57,19 @@ test("without focus the keyboard does nothing", async () => {
 
   setup.renderer.destroy();
 });
+
+test("the empty project hint stays centered in the panel", async () => {
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={async () => []} onSelectFile={() => {}} theme={DARK} />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "empty");
+  const position = locateText(setup, "empty");
+
+  expect(position.column).toBeGreaterThanOrEqual(17);
+  expect(position.column).toBeLessThanOrEqual(18);
+  expect(position.row).toBeGreaterThanOrEqual(5);
+  expect(position.row).toBeLessThanOrEqual(6);
+  setup.renderer.destroy();
+});

package/src/components/ProjectTreeView.tsx

@@ -78,14 +78,28 @@ export function ProjectTreeView({
 
   if (paths === null) {
     return (
-      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
         <text fg={tokens.textDim}>loading...</text>
       </box>
     );
   }
   if (paths.length === 0) {
     return (
-      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
         <text fg={tokens.textDim}>empty</text>
       </box>
     );

package/src/components/ThreadView.selection.test.tsx

@@ -58,7 +58,7 @@ function session(annotations: Annotation[] = []) {
   });
 }
 
-async function mount(annotations: Annotation[] = []): Promise<void> {
+async function mount(annotations: Annotation[] = [], height = 24): Promise<void> {
   annotate = mock<AnnotateHandler>(() => {});
   reply = mock<ReplyHandler>(() => {});
   const display = buildDisplay(PLAN, undefined);
@@ -75,7 +75,7 @@ async function mount(annotations: Annotation[] = []): Promise<void> {
       onUpdateAnnotation={() => {}}
       onExit={() => {}}
     />,
-    { width: 64, height: 24 },
+    { width: 64, height },
   );
   await settle(setup);
   await settle(setup);
@@ -391,6 +391,20 @@ describe("marking across rows", () => {
     expect(rows.get(origin.row + 1)).toBe("session, t");
   });
 
+  test("shift+down extends a mark to the same column on the next visual row", async () => {
+    const origin = stanzaOrigin();
+    const column = STANZA_ROWS[0]!.indexOf("written");
+
+    await setup.mockMouse.click(origin.column + column, origin.row);
+    await settle(setup);
+    setup.mockInput.pressKey("ARROW_DOWN", { shift: true });
+    await settle(setup);
+
+    expect(highlightedAcrossRows()).toBe(
+      STANZA.slice(stanzaOffset(0, column), stanzaOffset(1, column)).replace("\n", " "),
+    );
+  });
+
   test("a backward drag up two rows normalizes to the same characters", async () => {
     // Arrange: press inside "crash" on row three
     const origin = stanzaOrigin();
@@ -463,6 +477,21 @@ describe("marking across rows", () => {
     // Assert
     expect(highlightedByRow().size).toBe(0);
   });
+
+  test("holding a mark at the viewport edge scrolls and extends it", async () => {
+    setup.renderer.destroy();
+    await mount([], 10);
+    const origin = locate("daemon");
+
+    await setup.mockMouse.pressDown(origin.column, origin.row);
+    await setup.mockMouse.moveTo(63, 9);
+    await new Promise((resolve) => setTimeout(resolve, 350));
+    await settle(setup);
+    await setup.mockMouse.release(63, 9);
+
+    expect(setup.captureCharFrame()).not.toContain("# Plan");
+    expect(highlightedText().length).toBeGreaterThan("daemon".length);
+  });
 });
 
 describe("marking across blocks", () => {

package/src/components/ThreadView.tsx

@@ -35,7 +35,7 @@ import { BOLD, CUT, ITALIC, UNDERLINE } from "../annotation-palette";
 import { wrapLines, type MarkRange, type VisualLine } from "../mark-runs";
 import { MarkdownGridBlock } from "./MarkdownGridBlock";
 import { useFrameMeasure } from "../use-frame-measure";
-import { useTerminalVirtualizer } from "../use-terminal-virtualizer";
+import { scrollBoxDragViewport, useTerminalVirtualizer } from "../use-terminal-virtualizer";
 import { useAnnotationSurface, type LineSource } from "../use-annotation-surface";
 import { NavModeHint } from "./NavModeHint";
 import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
@@ -158,7 +158,7 @@ export interface ThreadViewProps {
   onUpdateAnnotation: (id: string, body: string) => void;
   /** The author's display name for a comment's hover tooltip. */
   resolveAuthorLabel?: (annotation: Annotation) => string | undefined;
-  onNavCommand?: (key: KeyEvent) => boolean;
+  onNavCommand?: (key: KeyEvent, selection: TextSpan | null) => boolean;
   onExit: () => void;
   theme?: Theme;
 }
@@ -192,6 +192,7 @@ export function ThreadView({
     textAt: (blockIndex) => renderedText(display[blockIndex]!),
     annotatable: () => true,
   };
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
   const surface = useAnnotationSurface({
     source,
     session,
@@ -209,12 +210,12 @@ export function ThreadView({
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    dragViewport: () => scrollBoxDragViewport(scrollRef.current),
     resolveAuthorLabel,
     onNavCommand,
     onExit,
   });
   const { palette, discussions } = surface;
-  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
   const { height: terminalHeight } = useTerminalDimensions();
   const viewWidth = useFrameMeasure(
     () => scrollRef.current?.content?.width ?? 0,