feat(shell): enable interactive commands with virtual terminal (#6694)

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

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { Key } from '../contexts/KeypressContext.js';
+
+export type { Key };
+
+/**
+ * Translates a Key object into its corresponding ANSI escape sequence.
+ * This is useful for sending control characters to a pseudo-terminal.
+ *
+ * @param key The Key object to translate.
+ * @returns The ANSI escape sequence as a string, or null if no mapping exists.
+ */
+export function keyToAnsi(key: Key): string | null {
+  if (key.ctrl) {
+    // Ctrl + letter
+    if (key.name >= 'a' && key.name <= 'z') {
+      return String.fromCharCode(
+        key.name.charCodeAt(0) - 'a'.charCodeAt(0) + 1,
+      );
+    }
+    // Other Ctrl combinations might need specific handling
+    switch (key.name) {
+      case 'c':
+        return '\x03'; // ETX (End of Text), commonly used for interrupt
+      // Add other special ctrl cases if needed
+      default:
+        break;
+    }
+  }
+
+  // Arrow keys and other special keys
+  switch (key.name) {
+    case 'up':
+      return '\x1b[A';
+    case 'down':
+      return '\x1b[B';
+    case 'right':
+      return '\x1b[C';
+    case 'left':
+      return '\x1b[D';
+    case 'escape':
+      return '\x1b';
+    case 'tab':
+      return '\t';
+    case 'backspace':
+      return '\x7f';
+    case 'delete':
+      return '\x1b[3~';
+    case 'home':
+      return '\x1b[H';
+    case 'end':
+      return '\x1b[F';
+    case 'pageup':
+      return '\x1b[5~';
+    case 'pagedown':
+      return '\x1b[6~';
+    default:
+      break;
+  }
+
+  // Enter/Return
+  if (key.name === 'return') {
+    return '\r';
+  }
+
+  // If it's a simple character, return it.
+  if (!key.ctrl && !key.meta && key.sequence) {
+    return key.sequence;
+  }
+
+  return null;
+}

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

@@ -53,6 +53,8 @@ describe('useShellCommandProcessor', () => {
   let mockShellOutputCallback: (event: ShellOutputEvent) => void;
   let resolveExecutionPromise: (result: ShellExecutionResult) => void;
 
+  let setShellInputFocusedMock: Mock;
+
   beforeEach(() => {
     vi.clearAllMocks();
 
@@ -60,9 +62,14 @@ describe('useShellCommandProcessor', () => {
     setPendingHistoryItemMock = vi.fn();
     onExecMock = vi.fn();
     onDebugMessageMock = vi.fn();
+    setShellInputFocusedMock = vi.fn();
     mockConfig = {
       getTargetDir: () => '/test/dir',
       getShouldUseNodePtyShell: () => false,
+      getShellExecutionConfig: () => ({
+        terminalHeight: 20,
+        terminalWidth: 80,
+      }),
     } as Config;
     mockGeminiClient = { addHistory: vi.fn() } as unknown as GeminiClient;
 
@@ -76,12 +83,12 @@ describe('useShellCommandProcessor', () => {
 
     mockShellExecutionService.mockImplementation((_cmd, _cwd, callback) => {
       mockShellOutputCallback = callback;
-      return {
+      return Promise.resolve({
         pid: 12345,
         result: new Promise((resolve) => {
           resolveExecutionPromise = resolve;
         }),
-      };
+      });
     });
   });
 
@@ -94,6 +101,7 @@ describe('useShellCommandProcessor', () => {
         onDebugMessageMock,
         mockConfig,
         mockGeminiClient,
+        setShellInputFocusedMock,
       ),
     );
 
@@ -139,6 +147,7 @@ describe('useShellCommandProcessor', () => {
       expect.any(Function),
       expect.any(Object),
       false,
+      expect.any(Object),
     );
     expect(onExecMock).toHaveBeenCalledWith(expect.any(Promise));
   });
@@ -172,6 +181,7 @@ describe('useShellCommandProcessor', () => {
       }),
     );
     expect(mockGeminiClient.addHistory).toHaveBeenCalled();
+    expect(setShellInputFocusedMock).toHaveBeenCalledWith(false);
   });
 
   it('should handle command failure and display error status', async () => {
@@ -198,6 +208,7 @@ describe('useShellCommandProcessor', () => {
       'Command exited with code 127',
     );
     expect(finalHistoryItem.tools[0].resultDisplay).toContain('not found');
+    expect(setShellInputFocusedMock).toHaveBeenCalledWith(false);
   });
 
   describe('UI Streaming and Throttling', () => {
@@ -208,7 +219,7 @@ describe('useShellCommandProcessor', () => {
       vi.useRealTimers();
     });
 
-    it('should throttle pending UI updates for text streams', async () => {
+    it('should throttle pending UI updates for text streams (non-interactive)', async () => {
       const { result } = renderProcessorHook();
       act(() => {
         result.current.handleShellCommand(
@@ -217,6 +228,26 @@ describe('useShellCommandProcessor', () => {
         );
       });
 
+      // Verify it's using the non-pty shell
+      const wrappedCommand = `{ stream; }; __code=$?; pwd > "${path.join(
+        os.tmpdir(),
+        'shell_pwd_abcdef.tmp',
+      )}"; exit $__code`;
+      expect(mockShellExecutionService).toHaveBeenCalledWith(
+        wrappedCommand,
+        '/test/dir',
+        expect.any(Function),
+        expect.any(Object),
+        false, // usePty
+        expect.any(Object),
+      );
+
+      // Wait for the async PID update to happen.
+      await vi.waitFor(() => {
+        // It's called once for initial, and once for the PID update.
+        expect(setPendingHistoryItemMock).toHaveBeenCalledTimes(2);
+      });
+
       // Simulate rapid output
       act(() => {
         mockShellOutputCallback({
@@ -224,28 +255,49 @@ describe('useShellCommandProcessor', () => {
           chunk: 'hello',
         });
       });
+      // The count should still be 2, as throttling is in effect.
+      expect(setPendingHistoryItemMock).toHaveBeenCalledTimes(2);
 
-      // Should not have updated the UI yet
-      expect(setPendingHistoryItemMock).toHaveBeenCalledTimes(1); // Only the initial call
-
-      // Advance time and send another event to trigger the throttled update
-      await act(async () => {
-        await vi.advanceTimersByTimeAsync(OUTPUT_UPDATE_INTERVAL_MS + 1);
-      });
+      // Simulate more rapid output
       act(() => {
         mockShellOutputCallback({
           type: 'data',
           chunk: ' world',
         });
       });
-
-      // Should now have been called with the cumulative output
       expect(setPendingHistoryItemMock).toHaveBeenCalledTimes(2);
-      expect(setPendingHistoryItemMock).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          tools: [expect.objectContaining({ resultDisplay: 'hello world' })],
-        }),
-      );
+
+      // Advance time, but the update won't happen until the next event
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(OUTPUT_UPDATE_INTERVAL_MS + 1);
+      });
+
+      // Trigger one more event to cause the throttled update to fire.
+      act(() => {
+        mockShellOutputCallback({
+          type: 'data',
+          chunk: '',
+        });
+      });
+
+      // Now the cumulative update should have occurred.
+      // Call 1: Initial, Call 2: PID update, Call 3: Throttled stream update
+      expect(setPendingHistoryItemMock).toHaveBeenCalledTimes(3);
+
+      const streamUpdateFn = setPendingHistoryItemMock.mock.calls[2][0];
+      if (!streamUpdateFn || typeof streamUpdateFn !== 'function') {
+        throw new Error(
+          'setPendingHistoryItem was not called with a stream updater function',
+        );
+      }
+
+      // Get the state after the PID update to feed into the stream updater
+      const pidUpdateFn = setPendingHistoryItemMock.mock.calls[1][0];
+      const initialState = setPendingHistoryItemMock.mock.calls[0][0];
+      const stateAfterPid = pidUpdateFn(initialState);
+
+      const stateAfterStream = streamUpdateFn(stateAfterPid);
+      expect(stateAfterStream.tools[0].resultDisplay).toBe('hello world');
     });
 
     it('should show binary progress messages correctly', async () => {
@@ -269,7 +321,15 @@ describe('useShellCommandProcessor', () => {
         mockShellOutputCallback({ type: 'binary_progress', bytesReceived: 0 });
       });
 
-      expect(setPendingHistoryItemMock).toHaveBeenLastCalledWith(
+      // The state update is functional, so we test it by executing it.
+      const updaterFn1 = setPendingHistoryItemMock.mock.lastCall?.[0];
+      if (!updaterFn1) {
+        throw new Error('setPendingHistoryItem was not called');
+      }
+      const initialState = setPendingHistoryItemMock.mock.calls[0][0];
+      const stateAfterBinaryDetected = updaterFn1(initialState);
+
+      expect(stateAfterBinaryDetected).toEqual(
         expect.objectContaining({
           tools: [
             expect.objectContaining({
@@ -290,7 +350,12 @@ describe('useShellCommandProcessor', () => {
         });
       });
 
-      expect(setPendingHistoryItemMock).toHaveBeenLastCalledWith(
+      const updaterFn2 = setPendingHistoryItemMock.mock.lastCall?.[0];
+      if (!updaterFn2) {
+        throw new Error('setPendingHistoryItem was not called');
+      }
+      const stateAfterProgress = updaterFn2(stateAfterBinaryDetected);
+      expect(stateAfterProgress).toEqual(
         expect.objectContaining({
           tools: [
             expect.objectContaining({
@@ -316,6 +381,7 @@ describe('useShellCommandProcessor', () => {
       expect.any(Function),
       expect.any(Object),
       false,
+      expect.any(Object),
     );
   });
 
@@ -341,6 +407,7 @@ describe('useShellCommandProcessor', () => {
     expect(finalHistoryItem.tools[0].resultDisplay).toContain(
       'Command was cancelled.',
     );
+    expect(setShellInputFocusedMock).toHaveBeenCalledWith(false);
   });
 
   it('should handle binary output result correctly', async () => {
@@ -394,6 +461,7 @@ describe('useShellCommandProcessor', () => {
       type: 'error',
       text: 'An unexpected error occurred: Unexpected failure',
     });
+    expect(setShellInputFocusedMock).toHaveBeenCalledWith(false);
   });
 
   it('should handle synchronous errors during execution and clean up resources', async () => {
@@ -425,6 +493,7 @@ describe('useShellCommandProcessor', () => {
     const tmpFile = path.join(os.tmpdir(), 'shell_pwd_abcdef.tmp');
     // Verify that the temporary file was cleaned up
     expect(vi.mocked(fs.unlinkSync)).toHaveBeenCalledWith(tmpFile);
+    expect(setShellInputFocusedMock).toHaveBeenCalledWith(false);
   });
 
   describe('Directory Change Warning', () => {
@@ -473,4 +542,177 @@ describe('useShellCommandProcessor', () => {
       expect(finalHistoryItem.tools[0].resultDisplay).not.toContain('WARNING');
     });
   });
+
+  describe('ActiveShellPtyId management', () => {
+    beforeEach(() => {
+      // The real service returns a promise that resolves with the pid and result promise
+      mockShellExecutionService.mockImplementation((_cmd, _cwd, callback) => {
+        mockShellOutputCallback = callback;
+        return Promise.resolve({
+          pid: 12345,
+          result: new Promise((resolve) => {
+            resolveExecutionPromise = resolve;
+          }),
+        });
+      });
+    });
+
+    it('should have activeShellPtyId as null initially', () => {
+      const { result } = renderProcessorHook();
+      expect(result.current.activeShellPtyId).toBeNull();
+    });
+
+    it('should set activeShellPtyId when a command with a PID starts', async () => {
+      const { result } = renderProcessorHook();
+
+      act(() => {
+        result.current.handleShellCommand('ls', new AbortController().signal);
+      });
+
+      await vi.waitFor(() => {
+        expect(result.current.activeShellPtyId).toBe(12345);
+      });
+    });
+
+    it('should update the pending history item with the ptyId', async () => {
+      const { result } = renderProcessorHook();
+
+      act(() => {
+        result.current.handleShellCommand('ls', new AbortController().signal);
+      });
+
+      await vi.waitFor(() => {
+        // Wait for the second call which is the functional update
+        expect(setPendingHistoryItemMock).toHaveBeenCalledTimes(2);
+      });
+
+      // The state update is functional, so we test it by executing it.
+      const updaterFn = setPendingHistoryItemMock.mock.lastCall?.[0];
+      expect(typeof updaterFn).toBe('function');
+
+      // The initial state is the first call to setPendingHistoryItem
+      const initialState = setPendingHistoryItemMock.mock.calls[0][0];
+      const stateAfterPid = updaterFn(initialState);
+
+      expect(stateAfterPid.tools[0].ptyId).toBe(12345);
+    });
+
+    it('should reset activeShellPtyId to null after successful execution', async () => {
+      const { result } = renderProcessorHook();
+
+      act(() => {
+        result.current.handleShellCommand('ls', new AbortController().signal);
+      });
+      const execPromise = onExecMock.mock.calls[0][0];
+
+      await vi.waitFor(() => {
+        expect(result.current.activeShellPtyId).toBe(12345);
+      });
+
+      act(() => {
+        resolveExecutionPromise(createMockServiceResult());
+      });
+      await act(async () => await execPromise);
+
+      expect(result.current.activeShellPtyId).toBeNull();
+    });
+
+    it('should reset activeShellPtyId to null after failed execution', async () => {
+      const { result } = renderProcessorHook();
+
+      act(() => {
+        result.current.handleShellCommand(
+          'bad-cmd',
+          new AbortController().signal,
+        );
+      });
+      const execPromise = onExecMock.mock.calls[0][0];
+
+      await vi.waitFor(() => {
+        expect(result.current.activeShellPtyId).toBe(12345);
+      });
+
+      act(() => {
+        resolveExecutionPromise(createMockServiceResult({ exitCode: 1 }));
+      });
+      await act(async () => await execPromise);
+
+      expect(result.current.activeShellPtyId).toBeNull();
+    });
+
+    it('should reset activeShellPtyId to null if execution promise rejects', async () => {
+      let rejectResultPromise: (reason?: unknown) => void;
+      mockShellExecutionService.mockImplementation(() =>
+        Promise.resolve({
+          pid: 1234_5,
+          result: new Promise((_, reject) => {
+            rejectResultPromise = reject;
+          }),
+        }),
+      );
+      const { result } = renderProcessorHook();
+
+      act(() => {
+        result.current.handleShellCommand('cmd', new AbortController().signal);
+      });
+      const execPromise = onExecMock.mock.calls[0][0];
+
+      await vi.waitFor(() => {
+        expect(result.current.activeShellPtyId).toBe(12345);
+      });
+
+      act(() => {
+        rejectResultPromise(new Error('Failure'));
+      });
+
+      await act(async () => await execPromise);
+
+      expect(result.current.activeShellPtyId).toBeNull();
+    });
+
+    it('should not set activeShellPtyId on synchronous execution error and should remain null', async () => {
+      mockShellExecutionService.mockImplementation(() => {
+        throw new Error('Sync Error');
+      });
+      const { result } = renderProcessorHook();
+
+      expect(result.current.activeShellPtyId).toBeNull(); // Pre-condition
+
+      act(() => {
+        result.current.handleShellCommand('cmd', new AbortController().signal);
+      });
+      const execPromise = onExecMock.mock.calls[0][0];
+
+      // The hook's state should not have changed to a PID
+      expect(result.current.activeShellPtyId).toBeNull();
+
+      await act(async () => await execPromise); // Let the promise resolve
+
+      // And it should still be null after everything is done
+      expect(result.current.activeShellPtyId).toBeNull();
+    });
+
+    it('should not set activeShellPtyId if service does not return a PID', async () => {
+      mockShellExecutionService.mockImplementation((_cmd, _cwd, callback) => {
+        mockShellOutputCallback = callback;
+        return Promise.resolve({
+          pid: undefined, // No PID
+          result: new Promise((resolve) => {
+            resolveExecutionPromise = resolve;
+          }),
+        });
+      });
+
+      const { result } = renderProcessorHook();
+
+      act(() => {
+        result.current.handleShellCommand('ls', new AbortController().signal);
+      });
+
+      // Let microtasks run
+      await act(async () => {});
+
+      expect(result.current.activeShellPtyId).toBeNull();
+    });
+  });
 });

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

@@ -9,8 +9,9 @@ import type {
   IndividualToolCallDisplay,
 } from '../types.js';
 import { ToolCallStatus } from '../types.js';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import type {
+  AnsiOutput,
   Config,
   GeminiClient,
   ShellExecutionResult,
@@ -24,6 +25,7 @@ import crypto from 'node:crypto';
 import path from 'node:path';
 import os from 'node:os';
 import fs from 'node:fs';
+import { themeManager } from '../../ui/themes/theme-manager.js';
 
 export const OUTPUT_UPDATE_INTERVAL_MS = 1000;
 const MAX_OUTPUT_LENGTH = 10000;
@@ -69,7 +71,11 @@ export const useShellCommandProcessor = (
   onDebugMessage: (message: string) => void,
   config: Config,
   geminiClient: GeminiClient,
+  setShellInputFocused: (value: boolean) => void,
+  terminalWidth?: number,
+  terminalHeight?: number,
 ) => {
+  const [activeShellPtyId, setActiveShellPtyId] = useState<number | null>(null);
   const handleShellCommand = useCallback(
     (rawQuery: PartListUnion, abortSignal: AbortSignal): boolean => {
       if (typeof rawQuery !== 'string' || rawQuery.trim() === '') {
@@ -104,7 +110,7 @@ export const useShellCommandProcessor = (
         resolve: (value: void | PromiseLike<void>) => void,
       ) => {
         let lastUpdateTime = Date.now();
-        let cumulativeStdout = '';
+        let cumulativeStdout: string | AnsiOutput = '';
         let isBinaryStream = false;
         let binaryBytesReceived = 0;
 
@@ -134,18 +140,38 @@ export const useShellCommandProcessor = (
         onDebugMessage(`Executing in ${targetDir}: ${commandToExecute}`);
 
         try {
+          const activeTheme = themeManager.getActiveTheme();
+          const shellExecutionConfig = {
+            ...config.getShellExecutionConfig(),
+            defaultFg: activeTheme.colors.Foreground,
+            defaultBg: activeTheme.colors.Background,
+          };
+
           const { pid, result } = await ShellExecutionService.execute(
             commandToExecute,
             targetDir,
             (event) => {
+              let shouldUpdate = false;
               switch (event.type) {
                 case 'data':
                   // Do not process text data if we've already switched to binary mode.
                   if (isBinaryStream) break;
-                  cumulativeStdout += event.chunk;
+                  // PTY provides the full screen state, so we just replace.
+                  // Child process provides chunks, so we append.
+                  if (
+                    typeof event.chunk === 'string' &&
+                    typeof cumulativeStdout === 'string'
+                  ) {
+                    cumulativeStdout += event.chunk;
+                  } else {
+                    cumulativeStdout = event.chunk;
+                    shouldUpdate = true;
+                  }
                   break;
                 case 'binary_detected':
                   isBinaryStream = true;
+                  // Force an immediate UI update to show the binary detection message.
+                  shouldUpdate = true;
                   break;
                 case 'binary_progress':
                   isBinaryStream = true;
@@ -157,7 +183,7 @@ export const useShellCommandProcessor = (
               }
 
               // Compute the display string based on the *current* state.
-              let currentDisplayOutput: string;
+              let currentDisplayOutput: string | AnsiOutput;
               if (isBinaryStream) {
                 if (binaryBytesReceived > 0) {
                   currentDisplayOutput = `[Receiving binary output... ${formatMemoryUsage(
@@ -171,25 +197,49 @@ export const useShellCommandProcessor = (
                 currentDisplayOutput = cumulativeStdout;
               }
 
-              // Throttle pending UI updates to avoid excessive re-renders.
-              if (Date.now() - lastUpdateTime > OUTPUT_UPDATE_INTERVAL_MS) {
-                setPendingHistoryItem({
-                  type: 'tool_group',
-                  tools: [
-                    {
-                      ...initialToolDisplay,
-                      resultDisplay: currentDisplayOutput,
-                    },
-                  ],
+              // Throttle pending UI updates, but allow forced updates.
+              if (
+                shouldUpdate ||
+                Date.now() - lastUpdateTime > OUTPUT_UPDATE_INTERVAL_MS
+              ) {
+                setPendingHistoryItem((prevItem) => {
+                  if (prevItem?.type === 'tool_group') {
+                    return {
+                      ...prevItem,
+                      tools: prevItem.tools.map((tool) =>
+                        tool.callId === callId
+                          ? { ...tool, resultDisplay: currentDisplayOutput }
+                          : tool,
+                      ),
+                    };
+                  }
+                  return prevItem;
                 });
                 lastUpdateTime = Date.now();
               }
             },
             abortSignal,
             config.getShouldUseNodePtyShell(),
+            shellExecutionConfig,
           );
 
+          console.log(terminalHeight, terminalWidth);
+
           executionPid = pid;
+          if (pid) {
+            setActiveShellPtyId(pid);
+            setPendingHistoryItem((prevItem) => {
+              if (prevItem?.type === 'tool_group') {
+                return {
+                  ...prevItem,
+                  tools: prevItem.tools.map((tool) =>
+                    tool.callId === callId ? { ...tool, ptyId: pid } : tool,
+                  ),
+                };
+              }
+              return prevItem;
+            });
+          }
 
           result
             .then((result: ShellExecutionResult) => {
@@ -269,6 +319,8 @@ export const useShellCommandProcessor = (
               if (pwdFilePath && fs.existsSync(pwdFilePath)) {
                 fs.unlinkSync(pwdFilePath);
               }
+              setActiveShellPtyId(null);
+              setShellInputFocused(false);
               resolve();
             });
         } catch (err) {
@@ -287,7 +339,8 @@ export const useShellCommandProcessor = (
           if (pwdFilePath && fs.existsSync(pwdFilePath)) {
             fs.unlinkSync(pwdFilePath);
           }
-
+          setActiveShellPtyId(null);
+          setShellInputFocused(false);
           resolve(); // Resolve the promise to unblock `onExec`
         }
       };
@@ -306,8 +359,11 @@ export const useShellCommandProcessor = (
       setPendingHistoryItem,
       onExec,
       geminiClient,
+      setShellInputFocused,
+      terminalHeight,
+      terminalWidth,
     ],
   );
 
-  return { handleShellCommand };
+  return { handleShellCommand, activeShellPtyId };
 };

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

@@ -297,6 +297,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         );
       },
       {
@@ -459,6 +462,9 @@ describe('useGeminiStream', () => {
         () => {},
         () => {},
         () => {},
+        () => {},
+        80,
+        24,
       ),
     );
 
@@ -539,6 +545,9 @@ describe('useGeminiStream', () => {
         () => {},
         () => {},
         () => {},
+        () => {},
+        80,
+        24,
       ),
     );
 
@@ -648,6 +657,9 @@ describe('useGeminiStream', () => {
         () => {},
         () => {},
         () => {},
+        () => {},
+        80,
+        24,
       ),
     );
 
@@ -758,6 +770,9 @@ describe('useGeminiStream', () => {
         () => {},
         () => {},
         () => {},
+        () => {},
+        80,
+        24,
       ),
     );
 
@@ -888,6 +903,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           cancelSubmitSpy,
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -901,6 +919,47 @@ describe('useGeminiStream', () => {
       expect(cancelSubmitSpy).toHaveBeenCalled();
     });
 
+    it('should call setShellInputFocused(false) when escape is pressed', async () => {
+      const setShellInputFocusedSpy = vi.fn();
+      const mockStream = (async function* () {
+        yield { type: 'content', value: 'Part 1' };
+        await new Promise(() => {}); // Keep stream open
+      })();
+      mockSendMessageStream.mockReturnValue(mockStream);
+
+      const { result } = renderHook(() =>
+        useGeminiStream(
+          mockConfig.getGeminiClient(),
+          [],
+          mockAddItem,
+          mockConfig,
+          mockLoadedSettings,
+          mockOnDebugMessage,
+          mockHandleSlashCommand,
+          false,
+          () => 'vscode' as EditorType,
+          () => {},
+          () => Promise.resolve(),
+          false,
+          () => {},
+          () => {},
+          vi.fn(),
+          setShellInputFocusedSpy, // Pass the spy here
+          80,
+          24,
+        ),
+      );
+
+      // Start a query
+      await act(async () => {
+        result.current.submitQuery('test query');
+      });
+
+      simulateEscapeKeyPress();
+
+      expect(setShellInputFocusedSpy).toHaveBeenCalledWith(false);
+    });
+
     it('should not do anything if escape is pressed when not responding', () => {
       const { result } = renderTestHook();
 
@@ -1200,6 +1259,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -1254,6 +1316,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -1308,6 +1373,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -1360,6 +1428,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -1413,6 +1484,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -1495,6 +1569,7 @@ describe('useGeminiStream', () => {
             [],
             mockAddItem,
             mockConfig,
+            mockLoadedSettings,
             mockOnDebugMessage,
             mockHandleSlashCommand,
             false,
@@ -1505,6 +1580,9 @@ describe('useGeminiStream', () => {
             () => {},
             () => {},
             () => {},
+            vi.fn(),
+            80,
+            24,
           ),
         );
 
@@ -1556,6 +1634,9 @@ describe('useGeminiStream', () => {
         vi.fn(), // setModelSwitched
         vi.fn(), // onEditorClose
         vi.fn(), // onCancelSubmit
+        vi.fn(), // setShellInputFocused
+        80, // terminalWidth
+        24, // terminalHeight
       ),
     );
 
@@ -1624,6 +1705,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -1706,6 +1790,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 
@@ -1761,6 +1848,9 @@ describe('useGeminiStream', () => {
           () => {},
           () => {},
           () => {},
+          () => {},
+          80,
+          24,
         ),
       );
 

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

@@ -102,6 +102,10 @@ export const useGeminiStream = (
   setModelSwitchedFromQuotaError: React.Dispatch<React.SetStateAction<boolean>>,
   onEditorClose: () => void,
   onCancelSubmit: () => void,
+  setShellInputFocused: (value: boolean) => void,
+  terminalWidth: number,
+  terminalHeight: number,
+  isShellFocused?: boolean,
 ) => {
   const [initError, setInitError] = useState<string | null>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
@@ -141,7 +145,6 @@ export const useGeminiStream = (
         }
       },
       config,
-      setPendingHistoryItem,
       getPreferredEditor,
       onEditorClose,
     );
@@ -152,6 +155,17 @@ export const useGeminiStream = (
     [toolCalls],
   );
 
+  const activeToolPtyId = useMemo(() => {
+    const executingShellTool = toolCalls?.find(
+      (tc) =>
+        tc.status === 'executing' && tc.request.name === 'run_shell_command',
+    );
+    if (executingShellTool) {
+      return (executingShellTool as { pid?: number }).pid;
+    }
+    return undefined;
+  }, [toolCalls]);
+
   const loopDetectedRef = useRef(false);
   const [
     loopDetectionConfirmationRequest,
@@ -165,15 +179,26 @@ export const useGeminiStream = (
     await done;
     setIsResponding(false);
   }, []);
-  const { handleShellCommand } = useShellCommandProcessor(
+  const { handleShellCommand, activeShellPtyId } = useShellCommandProcessor(
     addItem,
     setPendingHistoryItem,
     onExec,
     onDebugMessage,
     config,
     geminiClient,
+    setShellInputFocused,
+    terminalWidth,
+    terminalHeight,
   );
 
+  const activePtyId = activeShellPtyId || activeToolPtyId;
+
+  useEffect(() => {
+    if (!activePtyId) {
+      setShellInputFocused(false);
+    }
+  }, [activePtyId, setShellInputFocused]);
+
   const streamingState = useMemo(() => {
     if (toolCalls.some((tc) => tc.status === 'awaiting_approval')) {
       return StreamingState.WaitingForConfirmation;
@@ -240,17 +265,19 @@ export const useGeminiStream = (
     setPendingHistoryItem(null);
     onCancelSubmit();
     setIsResponding(false);
+    setShellInputFocused(false);
   }, [
     streamingState,
     addItem,
     setPendingHistoryItem,
     onCancelSubmit,
     pendingHistoryItemRef,
+    setShellInputFocused,
   ]);
 
   useKeypress(
     (key) => {
-      if (key.name === 'escape') {
+      if (key.name === 'escape' && !isShellFocused) {
         cancelOngoingRequest();
       }
     },
@@ -1074,6 +1101,7 @@ export const useGeminiStream = (
     pendingHistoryItems,
     thought,
     cancelOngoingRequest,
+    activePtyId,
     loopDetectionConfirmationRequest,
   };
 };

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

@@ -25,7 +25,6 @@ import { useCallback, useState, useMemo } from 'react';
 import type {
   HistoryItemToolGroup,
   IndividualToolCallDisplay,
-  HistoryItemWithoutId,
 } from '../types.js';
 import { ToolCallStatus } from '../types.js';
 
@@ -46,6 +45,7 @@ export type TrackedWaitingToolCall = WaitingToolCall & {
 };
 export type TrackedExecutingToolCall = ExecutingToolCall & {
   responseSubmittedToGemini?: boolean;
+  pid?: number;
 };
 export type TrackedCompletedToolCall = CompletedToolCall & {
   responseSubmittedToGemini?: boolean;
@@ -65,9 +65,6 @@ export type TrackedToolCall =
 export function useReactToolScheduler(
   onComplete: (tools: CompletedToolCall[]) => Promise<void>,
   config: Config,
-  setPendingHistoryItem: React.Dispatch<
-    React.SetStateAction<HistoryItemWithoutId | null>
-  >,
   getPreferredEditor: () => EditorType | undefined,
   onEditorClose: () => void,
 ): [TrackedToolCall[], ScheduleFn, MarkToolsAsSubmittedFn] {
@@ -77,21 +74,6 @@ export function useReactToolScheduler(
 
   const outputUpdateHandler: OutputUpdateHandler = useCallback(
     (toolCallId, outputChunk) => {
-      setPendingHistoryItem((prevItem) => {
-        if (prevItem?.type === 'tool_group') {
-          return {
-            ...prevItem,
-            tools: prevItem.tools.map((toolDisplay) =>
-              toolDisplay.callId === toolCallId &&
-              toolDisplay.status === ToolCallStatus.Executing
-                ? { ...toolDisplay, resultDisplay: outputChunk }
-                : toolDisplay,
-            ),
-          };
-        }
-        return prevItem;
-      });
-
       setToolCallsForDisplay((prevCalls) =>
         prevCalls.map((tc) => {
           if (tc.request.callId === toolCallId && tc.status === 'executing') {
@@ -102,7 +84,7 @@ export function useReactToolScheduler(
         }),
       );
     },
-    [setPendingHistoryItem],
+    [],
   );
 
   const allToolCallsCompleteHandler: AllToolCallsCompleteHandler = useCallback(
@@ -119,12 +101,29 @@ export function useReactToolScheduler(
           const existingTrackedCall = prevTrackedCalls.find(
             (ptc) => ptc.request.callId === coreTc.request.callId,
           );
-          const newTrackedCall: TrackedToolCall = {
+          // Start with the new core state, then layer on the existing UI state
+          // to ensure UI-only properties like pid are preserved.
+          const responseSubmittedToGemini =
+            existingTrackedCall?.responseSubmittedToGemini ?? false;
+
+          if (coreTc.status === 'executing') {
+            return {
+              ...coreTc,
+              responseSubmittedToGemini,
+              liveOutput: (existingTrackedCall as TrackedExecutingToolCall)
+                ?.liveOutput,
+              pid: (coreTc as ExecutingToolCall).pid,
+            };
+          }
+
+          // For other statuses, explicitly set liveOutput and pid to undefined
+          // to ensure they are not carried over from a previous executing state.
+          return {
             ...coreTc,
-            responseSubmittedToGemini:
-              existingTrackedCall?.responseSubmittedToGemini ?? false,
-          } as TrackedToolCall;
-          return newTrackedCall;
+            responseSubmittedToGemini,
+            liveOutput: undefined,
+            pid: undefined,
+          };
         }),
       );
     },
@@ -278,6 +277,7 @@ export function mapToDisplay(
             resultDisplay:
               (trackedCall as TrackedExecutingToolCall).liveOutput ?? undefined,
             confirmationDetails: undefined,
+            ptyId: (trackedCall as TrackedExecutingToolCall).pid,
           };
         case 'validating': // Fallthrough
         case 'scheduled':

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

@@ -68,6 +68,7 @@ const mockConfig = {
   }),
   getUseSmartEdit: () => false,
   getGeminiClient: () => null, // No client needed for these tests
+  getShellExecutionConfig: () => ({ terminalWidth: 80, terminalHeight: 24 }),
 } as unknown as Config;
 
 const mockTool = new MockTool({
@@ -124,7 +125,6 @@ describe('useReactToolScheduler in YOLO Mode', () => {
         onComplete,
         mockConfig as unknown as Config,
         setPendingHistoryItem,
-        () => undefined,
         () => {},
       ),
     );
@@ -163,7 +163,7 @@ describe('useReactToolScheduler in YOLO Mode', () => {
     expect(mockToolRequiresConfirmation.execute).toHaveBeenCalledWith(
       request.args,
       expect.any(AbortSignal),
-      undefined /*updateOutputFn*/,
+      undefined,
     );
 
     // Check that onComplete was called with success
@@ -272,7 +272,6 @@ describe('useReactToolScheduler', () => {
         onComplete,
         mockConfig as unknown as Config,
         setPendingHistoryItem,
-        () => undefined,
         () => {},
       ),
     );
@@ -314,7 +313,7 @@ describe('useReactToolScheduler', () => {
     expect(mockTool.execute).toHaveBeenCalledWith(
       request.args,
       expect.any(AbortSignal),
-      undefined /*updateOutputFn*/,
+      undefined,
     );
     expect(onComplete).toHaveBeenCalledWith([
       expect.objectContaining({