feat(cli): truncate shell output in UI history and improve active shell display

docs/cli/keyboard-shortcuts.md

@@ -74,6 +74,7 @@ available combinations.
 | Move down within dialog options.                   | `Down Arrow (no Shift)`<br />`J (no Shift)` |
 | Move to the next item or question in a dialog.     | `Tab (no Shift)`                            |
 | Move to the previous item or question in a dialog. | `Shift + Tab`                               |
+| Move focus out of the embedded shell.              | `Shift + Tab`                               |
 
 #### Suggestions & Completions
 

packages/cli/src/config/keyBindings.ts

@@ -95,6 +95,8 @@ export enum Command {
   CLEAR_SCREEN = 'app.clearScreen',
   RESTART_APP = 'app.restart',
   SUSPEND_APP = 'app.suspend',
+
+  UNFOCUS_SHELL = 'shell.unfocus',
 }
 
 /**
@@ -292,6 +294,9 @@ export const defaultKeyBindings: KeyBindingConfig = {
   [Command.CLEAR_SCREEN]: [{ key: 'l', ctrl: true }],
   [Command.RESTART_APP]: [{ key: 'r' }],
   [Command.SUSPEND_APP]: [{ key: 'z', ctrl: true }],
+
+  // Shell Controls
+  [Command.UNFOCUS_SHELL]: [{ key: 'tab', shift: true }],
 };
 
 interface CommandCategory {
@@ -365,6 +370,7 @@ export const commandCategories: readonly CommandCategory[] = [
       Command.DIALOG_NAVIGATION_DOWN,
       Command.DIALOG_NEXT,
       Command.DIALOG_PREV,
+      Command.UNFOCUS_SHELL,
     ],
   },
   {
@@ -509,4 +515,7 @@ export const commandDescriptions: Readonly<Record<Command, string>> = {
   [Command.CLEAR_SCREEN]: 'Clear the terminal screen and redraw the UI.',
   [Command.RESTART_APP]: 'Restart the application.',
   [Command.SUSPEND_APP]: 'Suspend the application (not yet implemented).',
+
+  // Shell Controls
+  [Command.UNFOCUS_SHELL]: 'Move focus out of the embedded shell.',
 };

packages/cli/src/ui/AppContainer.tsx

@@ -1500,10 +1500,11 @@ Logging in with Google... Restarting Gemini CLI to continue.
         setConstrainHeight(false);
         return true;
       } else if (
-        keyMatchers[Command.FOCUS_SHELL_INPUT](key) &&
+        (keyMatchers[Command.FOCUS_SHELL_INPUT](key) ||
+          keyMatchers[Command.UNFOCUS_SHELL_INPUT](key)) &&
         (activePtyId || (isBackgroundShellVisible && backgroundShells.size > 0))
       ) {
-        if (key.name === 'tab' && key.shift) {
+        if (keyMatchers[Command.UNFOCUS_SHELL](key)) {
           // Always change focus
           setEmbeddedShellFocused(false);
           return true;

packages/cli/src/ui/components/AnsiOutput.test.tsx

@@ -68,8 +68,9 @@ describe('<AnsiOutputText />', () => {
     const output = lastFrame();
     expect(output).toBeDefined();
     const lines = output!.split('\n');
-    expect(lines[0]).toBe('First line');
-    expect(lines[1]).toBe('Third line');
+    expect(lines[0].trim()).toBe('First line');
+    expect(lines[1].trim()).toBe('');
+    expect(lines[2].trim()).toBe('Third line');
   });
 
   it('respects the availableTerminalHeight prop and slices the lines correctly', () => {
@@ -89,6 +90,45 @@ describe('<AnsiOutputText />', () => {
     expect(output).toContain('Line 4');
   });
 
+  it('respects the maxLines prop and slices the lines correctly', () => {
+    const data: AnsiOutput = [
+      [createAnsiToken({ text: 'Line 1' })],
+      [createAnsiToken({ text: 'Line 2' })],
+      [createAnsiToken({ text: 'Line 3' })],
+      [createAnsiToken({ text: 'Line 4' })],
+    ];
+    const { lastFrame } = render(
+      <AnsiOutputText data={data} maxLines={2} width={80} />,
+    );
+    const output = lastFrame();
+    expect(output).not.toContain('Line 1');
+    expect(output).not.toContain('Line 2');
+    expect(output).toContain('Line 3');
+    expect(output).toContain('Line 4');
+  });
+
+  it('prioritizes maxLines over availableTerminalHeight if maxLines is smaller', () => {
+    const data: AnsiOutput = [
+      [createAnsiToken({ text: 'Line 1' })],
+      [createAnsiToken({ text: 'Line 2' })],
+      [createAnsiToken({ text: 'Line 3' })],
+      [createAnsiToken({ text: 'Line 4' })],
+    ];
+    // availableTerminalHeight=3, maxLines=2 => show 2 lines
+    const { lastFrame } = render(
+      <AnsiOutputText
+        data={data}
+        availableTerminalHeight={3}
+        maxLines={2}
+        width={80}
+      />,
+    );
+    const output = lastFrame();
+    expect(output).not.toContain('Line 2');
+    expect(output).toContain('Line 3');
+    expect(output).toContain('Line 4');
+  });
+
   it('renders a large AnsiOutput object without crashing', () => {
     const largeData: AnsiOutput = [];
     for (let i = 0; i < 1000; i++) {

packages/cli/src/ui/components/AnsiOutput.tsx

@@ -14,40 +14,56 @@ interface AnsiOutputProps {
   data: AnsiOutput;
   availableTerminalHeight?: number;
   width: number;
+  maxLines?: number;
+  disableTruncation?: boolean;
 }
 
 export const AnsiOutputText: React.FC<AnsiOutputProps> = ({
   data,
   availableTerminalHeight,
   width,
+  maxLines,
+  disableTruncation,
 }) => {
-  const lastLines = data.slice(
-    -(availableTerminalHeight && availableTerminalHeight > 0
+  const availableHeightLimit =
+    availableTerminalHeight && availableTerminalHeight > 0
       ? availableTerminalHeight
-      : DEFAULT_HEIGHT),
-  );
+      : undefined;
+
+  const numLinesRetained =
+    availableHeightLimit !== undefined && maxLines !== undefined
+      ? Math.min(availableHeightLimit, maxLines)
+      : (availableHeightLimit ?? maxLines ?? DEFAULT_HEIGHT);
+
+  const lastLines = disableTruncation ? data : data.slice(-numLinesRetained);
   return (
-    <Box flexDirection="column" width={width} flexShrink={0}>
+    <Box flexDirection="column" width={width} flexShrink={0} overflow="hidden">
       {lastLines.map((line: AnsiLine, lineIndex: number) => (
-        <Text key={lineIndex} wrap="truncate">
-          {line.length > 0
-            ? line.map((token: AnsiToken, tokenIndex: number) => (
-                <Text
-                  key={tokenIndex}
-                  color={token.fg}
-                  backgroundColor={token.bg}
-                  inverse={token.inverse}
-                  dimColor={token.dim}
-                  bold={token.bold}
-                  italic={token.italic}
-                  underline={token.underline}
-                >
-                  {token.text}
-                </Text>
-              ))
-            : null}
-        </Text>
+        <Box key={lineIndex} height={1} overflow="hidden">
+          <AnsiLineText line={line} />
+        </Box>
       ))}
     </Box>
   );
 };
+
+export const AnsiLineText: React.FC<{ line: AnsiLine }> = ({ line }) => (
+  <Text>
+    {line.length > 0
+      ? line.map((token: AnsiToken, tokenIndex: number) => (
+          <Text
+            key={tokenIndex}
+            color={token.fg}
+            backgroundColor={token.bg}
+            inverse={token.inverse}
+            dimColor={token.dim}
+            bold={token.bold}
+            italic={token.italic}
+            underline={token.underline}
+          >
+            {token.text}
+          </Text>
+        ))
+      : null}
+  </Text>
+);

packages/cli/src/ui/components/MainContent.tsx

@@ -148,7 +148,7 @@ export const MainContent = () => {
     return (
       <ScrollableList
         ref={scrollableListRef}
-        hasFocus={!uiState.isEditorDialogOpen}
+        hasFocus={!uiState.isEditorDialogOpen && !uiState.embeddedShellFocused}
         width={uiState.terminalWidth}
         data={virtualizedData}
         renderItem={renderItem}

packages/cli/src/ui/components/Notifications.test.tsx

@@ -5,6 +5,7 @@
  */
 
 import { render, persistentStateMock } from '../../test-utils/render.js';
+import { waitFor } from '../../test-utils/async.js';
 import { Notifications } from './Notifications.js';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { useAppContext, type AppState } from '../contexts/AppContext.js';
@@ -172,7 +173,7 @@ describe('Notifications', () => {
     render(<Notifications />);
 
     await act(async () => {
-      await vi.waitFor(() => {
+      await waitFor(() => {
         expect(persistentStateMock.set).toHaveBeenCalledWith(
           'hasSeenScreenReaderNudge',
           true,

packages/cli/src/ui/components/ShellInputPrompt.test.tsx

@@ -68,16 +68,64 @@ describe('ShellInputPrompt', () => {
   it.each([
     ['up', -1],
     ['down', 1],
-  ])('handles scroll %s (Ctrl+Shift+%s)', (key, direction) => {
+  ])('handles scroll %s (Command.SCROLL_%s)', (key, direction) => {
     render(<ShellInputPrompt activeShellPtyId={1} focus={true} />);
 
     const handler = mockUseKeypress.mock.calls[0][0];
 
-    handler({ name: key, shift: true, alt: false, ctrl: true, cmd: false });
+    handler({ name: key, shift: true, alt: false, ctrl: false, cmd: false });
 
     expect(mockScrollPty).toHaveBeenCalledWith(1, direction);
   });
 
+  it.each([
+    ['pageup', -15],
+    ['pagedown', 15],
+  ])(
+    'handles page scroll %s (Command.PAGE_%s) with default size',
+    (key, expectedScroll) => {
+      render(<ShellInputPrompt activeShellPtyId={1} focus={true} />);
+
+      const handler = mockUseKeypress.mock.calls[0][0];
+
+      handler({ name: key, shift: false, alt: false, ctrl: false, cmd: false });
+
+      expect(mockScrollPty).toHaveBeenCalledWith(1, expectedScroll);
+    },
+  );
+
+  it('respects scrollPageSize prop', () => {
+    render(
+      <ShellInputPrompt
+        activeShellPtyId={1}
+        focus={true}
+        scrollPageSize={10}
+      />,
+    );
+
+    const handler = mockUseKeypress.mock.calls[0][0];
+
+    // PageDown
+    handler({
+      name: 'pagedown',
+      shift: false,
+      alt: false,
+      ctrl: false,
+      cmd: false,
+    });
+    expect(mockScrollPty).toHaveBeenCalledWith(1, 10);
+
+    // PageUp
+    handler({
+      name: 'pageup',
+      shift: false,
+      alt: false,
+      ctrl: false,
+      cmd: false,
+    });
+    expect(mockScrollPty).toHaveBeenCalledWith(1, -10);
+  });
+
   it('does not handle input when not focused', () => {
     render(<ShellInputPrompt activeShellPtyId={1} focus={false} />);
 
@@ -111,4 +159,21 @@ describe('ShellInputPrompt', () => {
 
     expect(mockWriteToPty).not.toHaveBeenCalled();
   });
+
+  it('ignores Command.UNFOCUS_SHELL (Shift+Tab) to allow focus navigation', () => {
+    render(<ShellInputPrompt activeShellPtyId={1} focus={true} />);
+
+    const handler = mockUseKeypress.mock.calls[0][0];
+
+    const result = handler({
+      name: 'tab',
+      shift: true,
+      alt: false,
+      ctrl: false,
+      cmd: false,
+    });
+
+    expect(result).toBe(false);
+    expect(mockWriteToPty).not.toHaveBeenCalled();
+  });
 });

packages/cli/src/ui/components/ShellInputPrompt.tsx

@@ -9,16 +9,19 @@ import type React from 'react';
 import { useKeypress } from '../hooks/useKeypress.js';
 import { ShellExecutionService } from '@google/gemini-cli-core';
 import { keyToAnsi, type Key } from '../hooks/keyToAnsi.js';
+import { ACTIVE_SHELL_MAX_LINES } from '../constants.js';
 import { Command, keyMatchers } from '../keyMatchers.js';
 
 export interface ShellInputPromptProps {
   activeShellPtyId: number | null;
   focus?: boolean;
+  scrollPageSize?: number;
 }
 
 export const ShellInputPrompt: React.FC<ShellInputPromptProps> = ({
   activeShellPtyId,
   focus = true,
+  scrollPageSize = ACTIVE_SHELL_MAX_LINES,
 }) => {
   const handleShellInputSubmit = useCallback(
     (input: string) => {
@@ -34,21 +37,33 @@ export const ShellInputPrompt: React.FC<ShellInputPromptProps> = ({
       if (!focus || !activeShellPtyId) {
         return false;
       }
-
       // Allow background shell toggle to bubble up
       if (keyMatchers[Command.TOGGLE_BACKGROUND_SHELL](key)) {
         return false;
       }
 
-      if (key.ctrl && key.shift && key.name === 'up') {
+      // Allow Shift+Tab to bubble up for focus navigation
+      if (keyMatchers[Command.UNFOCUS_SHELL](key)) {
+        return false;
+      }
+
+      if (keyMatchers[Command.SCROLL_UP](key)) {
         ShellExecutionService.scrollPty(activeShellPtyId, -1);
         return true;
       }
-
-      if (key.ctrl && key.shift && key.name === 'down') {
+      if (keyMatchers[Command.SCROLL_DOWN](key)) {
         ShellExecutionService.scrollPty(activeShellPtyId, 1);
         return true;
       }
+      // TODO: Check pty service actually scrolls (request)[https://github.com/google-gemini/gemini-cli/pull/17438/changes/c9fdaf8967da0036bfef43592fcab5a69537df35#r2776479023].
+      if (keyMatchers[Command.PAGE_UP](key)) {
+        ShellExecutionService.scrollPty(activeShellPtyId, -scrollPageSize);
+        return true;
+      }
+      if (keyMatchers[Command.PAGE_DOWN](key)) {
+        ShellExecutionService.scrollPty(activeShellPtyId, scrollPageSize);
+        return true;
+      }
 
       const ansiSequence = keyToAnsi(key);
       if (ansiSequence) {
@@ -58,7 +73,7 @@ export const ShellInputPrompt: React.FC<ShellInputPromptProps> = ({
 
       return false;
     },
-    [focus, handleShellInputSubmit, activeShellPtyId],
+    [focus, handleShellInputSubmit, activeShellPtyId, scrollPageSize],
   );
 
   useKeypress(handleInput, { isActive: focus });