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,173 @@ 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');
+    expect(copyToClipboard).toHaveBeenCalledTimes(1);
+  });
+
+  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', 3, 2)); // drag into the middle of line 1
+    handler(makeEvent('left-release', 3, 2));
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 5,
+      ey: 1,
+    });
+    expect(copyToClipboard).toHaveBeenCalledWith('hello\nworld!');
+    expect(copyToClipboard).toHaveBeenCalledTimes(1);
+  });
+
+  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');
+    expect(copyToClipboard).toHaveBeenCalledTimes(1);
+  });
+
+  it('extends a word drag to the release cell when no move event is emitted', () => {
+    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));
+    handler(makeEvent('left-press', 2)); // double-click -> selects "foo"
+    handler(makeEvent('left-release', 10)); // release over "baz" with no move
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 10,
+      ey: 0,
+    });
+    expect(copyToClipboard).toHaveBeenCalledWith('foo bar baz');
+  });
+
+  it('extends a double-click word selection backward when dragging left', () => {
+    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', 9)); // first click on "baz"
+    handler(makeEvent('left-press', 9)); // double-click -> selects "baz"
+    handler(makeEvent('move', 1)); // drag back onto "foo"
+    handler(makeEvent('left-release', 1));
+    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 backward when dragging up', () => {
+    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, 2));
+    handler(makeEvent('left-press', 2, 2));
+    handler(makeEvent('left-press', 2, 2)); // triple-click -> line 1
+    handler(makeEvent('move', 2, 1)); // drag up onto line 0
+    handler(makeEvent('left-release', 2, 1));
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 5,
+      ey: 1,
+    });
+    expect(copyToClipboard).toHaveBeenCalledWith('hello\nworld!');
+  });
+
+  it('falls back to the cursor cell when a word drag lands on whitespace', () => {
+    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));
+    handler(makeEvent('left-press', 2)); // double-click -> selects "foo"
+    handler(makeEvent('move', 4)); // drag onto the gap after "foo"
+    handler(makeEvent('left-release', 4));
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 3,
+      ey: 0,
+    });
+    expect(copyToClipboard).toHaveBeenCalledWith('foo ');
+  });
+
+  it('keeps the triple-click chain across drift during a held double-click', () => {
+    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));
+    handler(makeEvent('left-release', 2));
+    handler(makeEvent('left-press', 2)); // double-click -> selects "foo"
+    handler(makeEvent('move', 4)); // drift off the word while held
+    handler(makeEvent('left-release', 4));
+    handler(makeEvent('left-press', 2)); // third click -> selects the line
+    handler(makeEvent('left-release', 2));
+    nowSpy.mockRestore();
+
+    expect(setSelection).toHaveBeenLastCalledWith({
+      sx: 0,
+      sy: 0,
+      ex: 10,
+      ey: 0,
+    });
+    expect(copyToClipboard).toHaveBeenLastCalledWith('foo bar baz');
+  });
+
   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,47 @@ 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)
+        : 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 extendActiveDrag = useCallback(
+    (point: { x: number; y: number }) => {
+      if (spanDragRef.current) {
+        extendSpanDrag(point);
+      } else {
+        selectionRef.current.extend(point);
+      }
+    },
+    [extendSpanDrag],
+  );
+
   const handleMouse = useCallback(
     (event: MouseEvent) => {
       const selection = selectionRef.current;
@@ -220,19 +266,27 @@ 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.start({ x: span.sx, y: span.sy }, mode);
+            selection.extend({ x: span.ex, y: span.ey });
+            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();
@@ -244,7 +298,11 @@ export function TextSelectionController(
         if (!selection.dragging) {
           return;
         }
-        lastClickRef.current = null;
+        // A held multi-click keeps its click record so pointer drift cannot
+        // break a triple-click; char drags still break the chain.
+        if (!spanDragRef.current) {
+          lastClickRef.current = null;
+        }
         // A scroll under the drag invalidates coordinates in B1.
         if (
           propsRef.current.getScrollState().scrollTop !==
@@ -257,22 +315,29 @@ export function TextSelectionController(
         if (!mapped) {
           return;
         }
-        selection.extend(clampToViewport(mapped.point, mapped.rect));
+        extendActiveDrag(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 mapped = mapEvent(event);
         if (mapped) {
-          selection.extend(clampToViewport(mapped.point, mapped.rect));
+          extendActiveDrag(clampToViewport(mapped.point, mapped.rect));
         }
+        // Clear the span drag only after extending, so the release cell still
+        // applies to a word/line drag when no move covered it.
+        spanDragRef.current = null;
         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,
+      extendActiveDrag,
     ],
   );