feat(ui): word-wise drag after double-click, line-wise extension after triple-click

packages/cli/src/ui/selection/selection-state.ts

@@ -46,17 +46,6 @@ export class SelectionState {
     }
   }
 
-  /** Select a resolved word/line span from a multi-click (not a drag). */
-  selectSpan(
-    span: { sx: number; sy: number; ex: number; ey: number },
-    mode: SelectionMode,
-  ): void {
-    this.anchor = { x: span.sx, y: span.sy };
-    this.focus = { x: span.ex, y: span.ey };
-    this.dragging = false;
-    this.mode = mode;
-  }
-
   finish(): void {
     this.dragging = false;
   }

packages/cli/src/ui/selection/use-text-selection.test.tsx

@@ -213,6 +213,67 @@ describe('TextSelectionController', () => {
     expect(copyToClipboard).toHaveBeenLastCalledWith('hello');
   });
 
+  it('extends a double-click word selection word-wise on drag', () => {
+    frame = makeFrame('foo bar baz');
+    viewportRect = { x: 0, y: 0, width: 11, height: 1 };
+    const nowSpy = vi.spyOn(Date, 'now').mockReturnValue(1000);
+    const handler = mount();
+    handler(makeEvent('left-press', 2)); // first click on "foo"
+    handler(makeEvent('left-press', 2)); // double-click -> selects "foo"
+    handler(makeEvent('move', 10)); // drag to "baz"
+    handler(makeEvent('left-release', 10));
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 10,
+      ey: 0,
+    });
+    expect(copyToClipboard).toHaveBeenCalledWith('foo bar baz');
+  });
+
+  it('extends a triple-click line selection line-wise on drag', () => {
+    frame = makeTwoLineFrame('hello', 'world!');
+    viewportRect = { x: 0, y: 0, width: 6, height: 2 };
+    const nowSpy = vi.spyOn(Date, 'now').mockReturnValue(1000);
+    const handler = mount();
+    handler(makeEvent('left-press', 2, 1));
+    handler(makeEvent('left-press', 2, 1));
+    handler(makeEvent('left-press', 2, 1)); // triple-click -> line 0
+    handler(makeEvent('move', 6, 2)); // drag to line 1
+    handler(makeEvent('left-release', 6, 2));
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 5,
+      ey: 1,
+    });
+    expect(copyToClipboard).toHaveBeenCalledWith('hello\nworld!');
+  });
+
+  it('copies a single-character word on a no-drag double-click', () => {
+    frame = makeFrame('a b');
+    viewportRect = { x: 0, y: 0, width: 3, height: 1 };
+    const nowSpy = vi.spyOn(Date, 'now').mockReturnValue(1000);
+    const handler = mount();
+    handler(makeEvent('left-press', 1));
+    handler(makeEvent('left-release', 1));
+    handler(makeEvent('left-press', 1)); // double-click -> selects "a"
+    handler(makeEvent('left-release', 1));
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 0,
+      ey: 0,
+    });
+    expect(copyToClipboard).toHaveBeenCalledWith('a');
+  });
+
   it('snaps a wide-character spacer to the leading cell', () => {
     frame = makeWideFrame();
     const handler = mount();

packages/cli/src/ui/selection/use-text-selection.tsx

@@ -100,6 +100,10 @@ export function TextSelectionController(
   const baselineFrameRef = useRef<ReadonlyFrame | null>(null);
   const baselineViewportRectRef = useRef<ViewportRect | null>(null);
   const lastClickRef = useRef<ClickRecord | null>(null);
+  const spanDragRef = useRef<{
+    mode: 'word' | 'line';
+    anchorSpan: { sx: number; sy: number; ex: number; ey: number };
+  } | null>(null);
   const bufferRef = useRef<ScreenBuffer | undefined>(undefined);
   const propsRef = useRef(props);
   propsRef.current = props;
@@ -113,6 +117,7 @@ export function TextSelectionController(
 
   const clearSelection = useCallback(() => {
     const selection = selectionRef.current;
+    spanDragRef.current = null;
     if (selection.isEmpty) {
       return;
     }
@@ -183,6 +188,42 @@ export function TextSelectionController(
     [getBuffer, stdout],
   );
 
+  // Extend an active word/line drag so the range spans from the original
+  // multi-click span to the word/line boundary at the current point (issue
+  // #8738). Falls back to a single cell when the cursor is over whitespace.
+  const extendSpanDrag = useCallback(
+    (point: { x: number; y: number }) => {
+      const spanDrag = spanDragRef.current;
+      if (!spanDrag) return;
+      const selection = selectionRef.current;
+      const frame = getBuffer()?.frame ?? null;
+      const current =
+        spanDrag.mode === 'word'
+          ? (wordSpanAt(frame, point.x, point.y) ?? {
+              sx: point.x,
+              sy: point.y,
+              ex: point.x,
+              ey: point.y,
+            })
+          : (lineSpanAt(frame, point.y) ?? {
+              sx: point.x,
+              sy: point.y,
+              ex: point.x,
+              ey: point.y,
+            });
+      const a = spanDrag.anchorSpan;
+      const cursorAfter =
+        point.y > a.ey || (point.y === a.ey && point.x >= a.ex);
+      selection.anchor = cursorAfter
+        ? { x: a.sx, y: a.sy }
+        : { x: a.ex, y: a.ey };
+      selection.focus = cursorAfter
+        ? { x: current.ex, y: current.ey }
+        : { x: current.sx, y: current.sy };
+    },
+    [getBuffer],
+  );
+
   const handleMouse = useCallback(
     (event: MouseEvent) => {
       const selection = selectionRef.current;
@@ -220,19 +261,29 @@ export function TextSelectionController(
 
         if (count >= 2) {
           const frame = getBuffer()?.frame ?? null;
+          const mode = count === 2 ? 'word' : 'line';
           const span =
             count === 2
               ? wordSpanAt(frame, point.x, point.y)
               : lineSpanAt(frame, point.y);
           if (span) {
-            selection.selectSpan(span, count === 2 ? 'word' : 'line');
+            // Enter a drag-capable word/line selection so a held double/triple
+            // click can extend by word/line on move (issue #8738). Copy happens
+            // on release, matching char drags.
+            selection.mode = mode;
+            selection.anchor = { x: span.sx, y: span.sy };
+            selection.focus = { x: span.ex, y: span.ey };
+            selection.dragging = true;
+            spanDragRef.current = { mode, anchorSpan: span };
+            dragScrollTopRef.current =
+              propsRef.current.getScrollState().scrollTop;
             recordBaseline();
             applyHighlight();
-            copySelection();
             return;
           }
         }
 
+        spanDragRef.current = null;
         selection.start(point);
         dragScrollTopRef.current = propsRef.current.getScrollState().scrollTop;
         recordBaseline();
@@ -257,22 +308,36 @@ export function TextSelectionController(
         if (!mapped) {
           return;
         }
-        selection.extend(clampToViewport(mapped.point, mapped.rect));
+        if (spanDragRef.current) {
+          extendSpanDrag(clampToViewport(mapped.point, mapped.rect));
+        } else {
+          selection.extend(clampToViewport(mapped.point, mapped.rect));
+        }
         applyHighlight();
         return;
       }
 
       if (event.name === 'left-release') {
-        // Word/line click-selects are not drags; leave them intact.
         if (!selection.dragging) {
           return;
         }
+        const spanDrag = spanDragRef.current;
+        spanDragRef.current = null;
         const mapped = mapEvent(event);
         if (mapped) {
-          selection.extend(clampToViewport(mapped.point, mapped.rect));
+          if (spanDrag) {
+            extendSpanDrag(clampToViewport(mapped.point, mapped.rect));
+          } else {
+            selection.extend(clampToViewport(mapped.point, mapped.rect));
+          }
         }
         selection.finish();
-        if (selection.isCollapsed || selection.isEmpty) {
+        // A collapsed range is a real single-cell span in word/line mode,
+        // but only a bare click in char mode.
+        if (
+          selection.isEmpty ||
+          (selection.isCollapsed && selection.mode === 'char')
+        ) {
           clearSelection();
           return;
         }
@@ -288,6 +353,7 @@ export function TextSelectionController(
       recordBaseline,
       mapEvent,
       getBuffer,
+      extendSpanDrag,
     ],
   );