feat: add click-to-focus support for interactive shell (#13341)

packages/cli/src/ui/hooks/shellCommandProcessor.test.tsx

@@ -419,11 +419,10 @@ describe('useShellCommandProcessor', () => {
     });
     await act(async () => await execPromise);
 
-    const finalHistoryItem = addItemToHistoryMock.mock.calls[1][0];
-    expect(finalHistoryItem.tools[0].status).toBe(ToolCallStatus.Canceled);
-    expect(finalHistoryItem.tools[0].resultDisplay).toContain(
-      'Command was cancelled.',
-    );
+    // With the new logic, cancelled commands are not added to history by this hook
+    // to avoid duplication/flickering, as they are handled by useGeminiStream.
+    expect(addItemToHistoryMock).toHaveBeenCalledTimes(1);
+    expect(setPendingHistoryItemMock).toHaveBeenCalledWith(null);
     expect(setShellInputFocusedMock).toHaveBeenCalledWith(false);
   });
 

packages/cli/src/ui/hooks/shellCommandProcessor.ts

@@ -284,13 +284,17 @@ export const useShellCommandProcessor = (
               };
 
               // Add the complete, contextual result to the local UI history.
-              addItemToHistory(
-                {
-                  type: 'tool_group',
-                  tools: [finalToolDisplay],
-                } as HistoryItemWithoutId,
-                userMessageTimestamp,
-              );
+              // We skip this for cancelled commands because useGeminiStream handles the
+              // immediate addition of the cancelled item to history to prevent flickering/duplicates.
+              if (finalStatus !== ToolCallStatus.Canceled) {
+                addItemToHistory(
+                  {
+                    type: 'tool_group',
+                    tools: [finalToolDisplay],
+                  } as HistoryItemWithoutId,
+                  userMessageTimestamp,
+                );
+              }
 
               // Add the same complete, contextual result to the LLM's history.
               addShellCommandToGeminiHistory(

packages/cli/src/ui/hooks/useGeminiStream.ts

@@ -54,6 +54,7 @@ import { findLastSafeSplitPoint } from '../utils/markdownUtilities.js';
 import { useStateAndRef } from './useStateAndRef.js';
 import type { UseHistoryManagerReturn } from './useHistoryManager.js';
 import { useLogger } from './useLogger.js';
+import { SHELL_COMMAND_NAME } from '../constants.js';
 import {
   useReactToolScheduler,
   mapToDisplay as mapTrackedToolCallsToDisplay,
@@ -232,6 +233,22 @@ export const useGeminiStream = (
     }
   }, [activePtyId, setShellInputFocused]);
 
+  const prevActiveShellPtyIdRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (
+      turnCancelledRef.current &&
+      prevActiveShellPtyIdRef.current !== null &&
+      activeShellPtyId === null
+    ) {
+      addItem(
+        { type: MessageType.INFO, text: 'Request cancelled.' },
+        Date.now(),
+      );
+      setIsResponding(false);
+    }
+    prevActiveShellPtyIdRef.current = activeShellPtyId;
+  }, [activeShellPtyId, addItem]);
+
   const streamingState = useMemo(() => {
     if (toolCalls.some((tc) => tc.status === 'awaiting_approval')) {
       return StreamingState.WaitingForConfirmation;
@@ -306,7 +323,33 @@ export const useGeminiStream = (
     cancelAllToolCalls(abortControllerRef.current.signal);
 
     if (pendingHistoryItemRef.current) {
-      addItem(pendingHistoryItemRef.current, Date.now());
+      const isShellCommand =
+        pendingHistoryItemRef.current.type === 'tool_group' &&
+        pendingHistoryItemRef.current.tools.some(
+          (t) => t.name === SHELL_COMMAND_NAME,
+        );
+
+      // If it is a shell command, we update the status to Canceled and clear the output
+      // to avoid artifacts, then add it to history immediately.
+      if (isShellCommand) {
+        const toolGroup = pendingHistoryItemRef.current as HistoryItemToolGroup;
+        const updatedTools = toolGroup.tools.map((tool) => {
+          if (tool.name === SHELL_COMMAND_NAME) {
+            return {
+              ...tool,
+              status: ToolCallStatus.Canceled,
+              resultDisplay: tool.resultDisplay,
+            };
+          }
+          return tool;
+        });
+        addItem(
+          { ...toolGroup, tools: updatedTools } as HistoryItemWithoutId,
+          Date.now(),
+        );
+      } else {
+        addItem(pendingHistoryItemRef.current, Date.now());
+      }
     }
     setPendingHistoryItem(null);
 
@@ -314,14 +357,18 @@ export const useGeminiStream = (
     // Otherwise, we let handleCompletedTools figure out the next step,
     // which might involve sending partial results back to the model.
     if (isFullCancellation) {
-      addItem(
-        {
-          type: MessageType.INFO,
-          text: 'Request cancelled.',
-        },
-        Date.now(),
-      );
-      setIsResponding(false);
+      // If shell is active, we delay this message to ensure correct ordering
+      // (Shell item first, then Info message).
+      if (!activeShellPtyId) {
+        addItem(
+          {
+            type: MessageType.INFO,
+            text: 'Request cancelled.',
+          },
+          Date.now(),
+        );
+        setIsResponding(false);
+      }
     }
 
     onCancelSubmit(false);
@@ -335,6 +382,7 @@ export const useGeminiStream = (
     setShellInputFocused,
     cancelAllToolCalls,
     toolCalls,
+    activeShellPtyId,
   ]);
 
   useKeypress(

packages/cli/src/ui/hooks/useMouseClick.test.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { vi, describe, it, expect, beforeEach, type Mock } from 'vitest';
+import { renderHook } from '../../test-utils/render.js';
+import { useMouseClick } from './useMouseClick.js';
+import { getBoundingBox, type DOMElement } from 'ink';
+import type React from 'react';
+
+// Mock ink
+vi.mock('ink', async () => ({
+  getBoundingBox: vi.fn(),
+}));
+
+// Mock MouseContext
+const mockUseMouse = vi.fn();
+vi.mock('../contexts/MouseContext.js', async () => ({
+  useMouse: (cb: unknown, opts: unknown) => mockUseMouse(cb, opts),
+}));
+
+describe('useMouseClick', () => {
+  let handler: Mock;
+  let containerRef: React.RefObject<DOMElement | null>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    handler = vi.fn();
+    containerRef = { current: {} as DOMElement };
+  });
+
+  it('should call handler with relative coordinates when click is inside bounds', () => {
+    vi.mocked(getBoundingBox).mockReturnValue({
+      x: 10,
+      y: 5,
+      width: 20,
+      height: 10,
+    } as unknown as ReturnType<typeof getBoundingBox>);
+
+    renderHook(() => useMouseClick(containerRef, handler));
+
+    // Get the callback registered with useMouse
+    expect(mockUseMouse).toHaveBeenCalled();
+    const callback = mockUseMouse.mock.calls[0][0];
+
+    // Simulate click inside: x=15 (col 16), y=7 (row 8)
+    // Terminal events are 1-based. col 16 -> mouseX 15. row 8 -> mouseY 7.
+    // relativeX = 15 - 10 = 5
+    // relativeY = 7 - 5 = 2
+    callback({ name: 'left-press', col: 16, row: 8 });
+
+    expect(handler).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'left-press' }),
+      5,
+      2,
+    );
+  });
+
+  it('should not call handler when click is outside bounds', () => {
+    vi.mocked(getBoundingBox).mockReturnValue({
+      x: 10,
+      y: 5,
+      width: 20,
+      height: 10,
+    } as unknown as ReturnType<typeof getBoundingBox>);
+
+    renderHook(() => useMouseClick(containerRef, handler));
+    const callback = mockUseMouse.mock.calls[0][0];
+
+    // Click outside: x=5 (col 6), y=7 (row 8) -> left of box
+    callback({ name: 'left-press', col: 6, row: 8 });
+    expect(handler).not.toHaveBeenCalled();
+  });
+});

packages/cli/src/ui/hooks/useMouseClick.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getBoundingBox, type DOMElement } from 'ink';
+import type React from 'react';
+import { useMouse, type MouseEvent } from '../contexts/MouseContext.js';
+
+export const useMouseClick = (
+  containerRef: React.RefObject<DOMElement | null>,
+  handler: (event: MouseEvent, relativeX: number, relativeY: number) => void,
+  options: { isActive?: boolean; button?: 'left' | 'right' } = {},
+) => {
+  const { isActive = true, button = 'left' } = options;
+
+  useMouse(
+    (event: MouseEvent) => {
+      const eventName = button === 'left' ? 'left-press' : 'right-release';
+      if (event.name === eventName && containerRef.current) {
+        const { x, y, width, height } = getBoundingBox(containerRef.current);
+        // Terminal mouse events are 1-based, Ink layout is 0-based.
+        const mouseX = event.col - 1;
+        const mouseY = event.row - 1;
+
+        const relativeX = mouseX - x;
+        const relativeY = mouseY - y;
+
+        if (
+          relativeX >= 0 &&
+          relativeX < width &&
+          relativeY >= 0 &&
+          relativeY < height
+        ) {
+          handler(event, relativeX, relativeY);
+        }
+      }
+    },
+    { isActive },
+  );
+};