feat(ui): add visual indicators for hook execution (#15408)

packages/cli/src/config/settingsSchema.test.ts

@@ -357,6 +357,15 @@ describe('SettingsSchema', () => {
       );
     });
 
+    it('should have hooks.notifications setting in schema', () => {
+      const setting = getSettingsSchema().hooks.properties.notifications;
+      expect(setting).toBeDefined();
+      expect(setting.type).toBe('boolean');
+      expect(setting.category).toBe('Advanced');
+      expect(setting.default).toBe(true);
+      expect(setting.showInDialog).toBe(true);
+    });
+
     it('should have name and description in hook definitions', () => {
       const hookDef = SETTINGS_SCHEMA_DEFINITIONS['HookDefinitionArray'];
       expect(hookDef).toBeDefined();

packages/cli/src/config/settingsSchema.ts

@@ -1559,6 +1559,15 @@ const SETTINGS_SCHEMA = {
         },
         mergeStrategy: MergeStrategy.UNION,
       },
+      notifications: {
+        type: 'boolean',
+        label: 'Hook Notifications',
+        category: 'Advanced',
+        requiresRestart: false,
+        default: true,
+        description: 'Show visual indicators when hooks are executing.',
+        showInDialog: true,
+      },
       BeforeTool: {
         type: 'array',
         label: 'Before Tool Hooks',

packages/cli/src/ui/AppContainer.test.tsx

@@ -143,6 +143,7 @@ vi.mock('./contexts/SessionContext.js');
 vi.mock('./components/shared/text-buffer.js');
 vi.mock('./hooks/useLogger.js');
 vi.mock('./hooks/useInputHistoryStore.js');
+vi.mock('./hooks/useHookDisplayState.js');
 
 // Mock external utilities
 vi.mock('../utils/events.js');
@@ -171,6 +172,7 @@ import { useTextBuffer } from './components/shared/text-buffer.js';
 import { useLogger } from './hooks/useLogger.js';
 import { useLoadingIndicator } from './hooks/useLoadingIndicator.js';
 import { useInputHistoryStore } from './hooks/useInputHistoryStore.js';
+import { useHookDisplayState } from './hooks/useHookDisplayState.js';
 import { useKeypress, type Key } from './hooks/useKeypress.js';
 import { measureElement } from 'ink';
 import { useTerminalSize } from './hooks/useTerminalSize.js';
@@ -243,6 +245,7 @@ describe('AppContainer State Management', () => {
   const mockedUseLoadingIndicator = useLoadingIndicator as Mock;
   const mockedUseKeypress = useKeypress as Mock;
   const mockedUseInputHistoryStore = useInputHistoryStore as Mock;
+  const mockedUseHookDisplayState = useHookDisplayState as Mock;
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -363,6 +366,7 @@ describe('AppContainer State Management', () => {
       elapsedTime: '0.0s',
       currentLoadingPhrase: '',
     });
+    mockedUseHookDisplayState.mockReturnValue([]);
 
     // Mock Config
     mockConfig = makeFakeConfig();
@@ -1874,6 +1878,21 @@ describe('AppContainer State Management', () => {
       expect(capturedUIState.currentModel).toBe('new-model');
       unmount!();
     });
+
+    it('provides activeHooks from useHookDisplayState', async () => {
+      const mockHooks = [{ name: 'hook1', eventName: 'event1' }];
+      mockedUseHookDisplayState.mockReturnValue(mockHooks);
+
+      let unmount: () => void;
+      await act(async () => {
+        const result = renderAppContainer();
+        unmount = result.unmount;
+      });
+      await waitFor(() => expect(capturedUIState).toBeTruthy());
+
+      expect(capturedUIState.activeHooks).toEqual(mockHooks);
+      unmount!();
+    });
   });
 
   describe('Shell Interaction', () => {

packages/cli/src/ui/AppContainer.tsx

@@ -123,9 +123,11 @@ import { useSettings } from './contexts/SettingsContext.js';
 import { terminalCapabilityManager } from './utils/terminalCapabilityManager.js';
 import { useInputHistoryStore } from './hooks/useInputHistoryStore.js';
 import { useBanner } from './hooks/useBanner.js';
-
-const WARNING_PROMPT_DURATION_MS = 1000;
-const QUEUE_ERROR_DISPLAY_DURATION_MS = 3000;
+import { useHookDisplayState } from './hooks/useHookDisplayState.js';
+import {
+  WARNING_PROMPT_DURATION_MS,
+  QUEUE_ERROR_DISPLAY_DURATION_MS,
+} from './constants.js';
 
 function isToolExecuting(pendingHistoryItems: HistoryItemWithoutId[]) {
   return pendingHistoryItems.some((item) => {
@@ -189,6 +191,7 @@ export const AppContainer = (props: AppContainerProps) => {
     useState<boolean>(false);
   const [historyRemountKey, setHistoryRemountKey] = useState(0);
   const [settingsNonce, setSettingsNonce] = useState(0);
+  const activeHooks = useHookDisplayState();
   const [updateInfo, setUpdateInfo] = useState<UpdateObject | null>(null);
   const [isTrustedFolder, setIsTrustedFolder] = useState<boolean | undefined>(
     isWorkspaceTrusted(settings.merged).isTrusted,
@@ -1522,6 +1525,7 @@ Logging in with Google... Restarting Gemini CLI to continue.
       elapsedTime,
       currentLoadingPhrase,
       historyRemountKey,
+      activeHooks,
       messageQueue,
       queueErrorMessage,
       showAutoAcceptIndicator,
@@ -1612,6 +1616,7 @@ Logging in with Google... Restarting Gemini CLI to continue.
       elapsedTime,
       currentLoadingPhrase,
       historyRemountKey,
+      activeHooks,
       messageQueue,
       queueErrorMessage,
       showAutoAcceptIndicator,

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

@@ -36,6 +36,10 @@ vi.mock('./ContextSummaryDisplay.js', () => ({
   ContextSummaryDisplay: () => <Text>ContextSummaryDisplay</Text>,
 }));
 
+vi.mock('./HookStatusDisplay.js', () => ({
+  HookStatusDisplay: () => <Text>HookStatusDisplay</Text>,
+}));
+
 vi.mock('./AutoAcceptIndicator.js', () => ({
   AutoAcceptIndicator: () => <Text>AutoAcceptIndicator</Text>,
 }));
@@ -125,6 +129,7 @@ const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
     errorCount: 0,
     nightly: false,
     isTrustedFolder: true,
+    activeHooks: [],
     ...overrides,
   }) as UIState;
 
@@ -341,6 +346,17 @@ describe('Composer', () => {
       expect(lastFrame()).toContain('ContextSummaryDisplay');
     });
 
+    it('renders HookStatusDisplay instead of ContextSummaryDisplay with active hooks', () => {
+      const uiState = createMockUIState({
+        activeHooks: [{ name: 'test-hook', eventName: 'before-agent' }],
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('HookStatusDisplay');
+      expect(lastFrame()).not.toContain('ContextSummaryDisplay');
+    });
+
     it('shows Ctrl+C exit prompt when ctrlCPressedOnce is true', () => {
       const uiState = createMockUIState({
         ctrlCPressedOnce: true,

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

@@ -5,9 +5,9 @@
  */
 
 import { useState } from 'react';
-import { Box, Text, useIsScreenReaderEnabled } from 'ink';
+import { Box, useIsScreenReaderEnabled } from 'ink';
 import { LoadingIndicator } from './LoadingIndicator.js';
-import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
+import { StatusDisplay } from './StatusDisplay.js';
 import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
 import { ShellModeIndicator } from './ShellModeIndicator.js';
 import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
@@ -17,7 +17,6 @@ import { Footer } from './Footer.js';
 import { ShowMoreLines } from './ShowMoreLines.js';
 import { QueuedMessageDisplay } from './QueuedMessageDisplay.js';
 import { OverflowProvider } from '../contexts/OverflowContext.js';
-import { theme } from '../semantic-colors.js';
 import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 import { useUIState } from '../contexts/UIStateContext.js';
 import { useUIActions } from '../contexts/UIActionsContext.js';
@@ -43,7 +42,7 @@ export const Composer = () => {
   const [suggestionsVisible, setSuggestionsVisible] = useState(false);
 
   const isAlternateBuffer = useAlternateBuffer();
-  const { contextFileNames, showAutoAcceptIndicator } = uiState;
+  const { showAutoAcceptIndicator } = uiState;
   const suggestionsPosition = isAlternateBuffer ? 'above' : 'below';
   const hideContextSummary =
     suggestionsVisible && suggestionsPosition === 'above';
@@ -92,38 +91,7 @@ export const Composer = () => {
         alignItems={isNarrow ? 'flex-start' : 'center'}
       >
         <Box marginRight={1}>
-          {process.env['GEMINI_SYSTEM_MD'] && (
-            <Text color={theme.status.error}>|⌐■_■| </Text>
-          )}
-          {uiState.ctrlCPressedOnce ? (
-            <Text color={theme.status.warning}>
-              Press Ctrl+C again to exit.
-            </Text>
-          ) : uiState.warningMessage ? (
-            <Text color={theme.status.warning}>{uiState.warningMessage}</Text>
-          ) : uiState.ctrlDPressedOnce ? (
-            <Text color={theme.status.warning}>
-              Press Ctrl+D again to exit.
-            </Text>
-          ) : uiState.showEscapePrompt ? (
-            <Text color={theme.text.secondary}>Press Esc again to clear.</Text>
-          ) : uiState.queueErrorMessage ? (
-            <Text color={theme.status.error}>{uiState.queueErrorMessage}</Text>
-          ) : (
-            !settings.merged.ui?.hideContextSummary &&
-            !hideContextSummary && (
-              <ContextSummaryDisplay
-                ideContext={uiState.ideContextState}
-                geminiMdFileCount={uiState.geminiMdFileCount}
-                contextFileNames={contextFileNames}
-                mcpServers={config.getMcpClientManager()?.getMcpServers() ?? {}}
-                blockedMcpServers={
-                  config.getMcpClientManager()?.getBlockedMcpServers() ?? []
-                }
-                skillCount={config.getSkillManager().getSkills().length}
-              />
-            )
-          )}
+          <StatusDisplay hideContextSummary={hideContextSummary} />
         </Box>
         <Box paddingTop={isNarrow ? 1 : 0}>
           {showAutoAcceptIndicator !== ApprovalMode.DEFAULT &&

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { render } from '../../test-utils/render.js';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
 import * as useTerminalSize from '../hooks/useTerminalSize.js';
 
@@ -16,6 +16,11 @@ vi.mock('../hooks/useTerminalSize.js', () => ({
 
 const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
 
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
 const renderWithWidth = (
   width: number,
   props: React.ComponentProps<typeof ContextSummaryDisplay>,
@@ -26,48 +31,68 @@ const renderWithWidth = (
 
 describe('<ContextSummaryDisplay />', () => {
   const baseProps = {
-    geminiMdFileCount: 1,
-    contextFileNames: ['GEMINI.md'],
-    mcpServers: { 'test-server': { command: 'test' } },
+    geminiMdFileCount: 0,
+    contextFileNames: [],
+    mcpServers: {},
     ideContext: {
       workspaceState: {
-        openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        openFiles: [],
       },
     },
     skillCount: 1,
   };
 
   it('should render on a single line on a wide screen', () => {
-    const { lastFrame, unmount } = renderWithWidth(120, baseProps);
-    const output = lastFrame()!;
-    expect(output).toContain(
-      '1 open file (ctrl+g to view) | 1 GEMINI.md file | 1 MCP server | 1 skill',
-    );
-    expect(output).not.toContain('Using:');
-    // Check for absence of newlines
-    expect(output.includes('\n')).toBe(false);
+    const props = {
+      ...baseProps,
+      geminiMdFileCount: 1,
+      contextFileNames: ['GEMINI.md'],
+      mcpServers: { 'test-server': { command: 'test' } },
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
+    };
+    const { lastFrame, unmount } = renderWithWidth(120, props);
+    expect(lastFrame()).toMatchSnapshot();
     unmount();
   });
 
   it('should render on multiple lines on a narrow screen', () => {
-    const { lastFrame, unmount } = renderWithWidth(60, baseProps);
-    const output = lastFrame()!;
-    const expectedLines = [
-      ' - 1 open file (ctrl+g to view)',
-      ' - 1 GEMINI.md file',
-      ' - 1 MCP server',
-      ' - 1 skill',
-    ];
-    const actualLines = output.split('\n');
-    expect(actualLines).toEqual(expectedLines);
+    const props = {
+      ...baseProps,
+      geminiMdFileCount: 1,
+      contextFileNames: ['GEMINI.md'],
+      mcpServers: { 'test-server': { command: 'test' } },
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
+    };
+    const { lastFrame, unmount } = renderWithWidth(60, props);
+    expect(lastFrame()).toMatchSnapshot();
     unmount();
   });
 
   it('should switch layout at the 80-column breakpoint', () => {
+    const props = {
+      ...baseProps,
+      geminiMdFileCount: 1,
+      contextFileNames: ['GEMINI.md'],
+      mcpServers: { 'test-server': { command: 'test' } },
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
+    };
+
     // At 80 columns, should be on one line
     const { lastFrame: wideFrame, unmount: unmountWide } = renderWithWidth(
       80,
-      baseProps,
+      props,
     );
     expect(wideFrame()!.includes('\n')).toBe(false);
     unmountWide();
@@ -75,13 +100,12 @@ describe('<ContextSummaryDisplay />', () => {
     // At 79 columns, should be on multiple lines
     const { lastFrame: narrowFrame, unmount: unmountNarrow } = renderWithWidth(
       79,
-      baseProps,
+      props,
     );
     expect(narrowFrame()!.includes('\n')).toBe(true);
     expect(narrowFrame()!.split('\n').length).toBe(4);
     unmountNarrow();
   });
-
   it('should not render empty parts', () => {
     const props = {
       ...baseProps,
@@ -89,11 +113,14 @@ describe('<ContextSummaryDisplay />', () => {
       contextFileNames: [],
       mcpServers: {},
       skillCount: 0,
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
     };
     const { lastFrame, unmount } = renderWithWidth(60, props);
-    const expectedLines = [' - 1 open file (ctrl+g to view)'];
-    const actualLines = lastFrame()!.split('\n');
-    expect(actualLines).toEqual(expectedLines);
+    expect(lastFrame()).toMatchSnapshot();
     unmount();
   });
 });

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

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { HookStatusDisplay } from './HookStatusDisplay.js';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+describe('<HookStatusDisplay />', () => {
+  it('should render a single executing hook', () => {
+    const props = {
+      activeHooks: [{ name: 'test-hook', eventName: 'BeforeAgent' }],
+    };
+    const { lastFrame, unmount } = render(<HookStatusDisplay {...props} />);
+    expect(lastFrame()).toMatchSnapshot();
+    unmount();
+  });
+
+  it('should render multiple executing hooks', () => {
+    const props = {
+      activeHooks: [
+        { name: 'h1', eventName: 'BeforeAgent' },
+        { name: 'h2', eventName: 'BeforeAgent' },
+      ],
+    };
+    const { lastFrame, unmount } = render(<HookStatusDisplay {...props} />);
+    expect(lastFrame()).toMatchSnapshot();
+    unmount();
+  });
+
+  it('should render sequential hook progress', () => {
+    const props = {
+      activeHooks: [
+        { name: 'step', eventName: 'BeforeAgent', index: 1, total: 3 },
+      ],
+    };
+    const { lastFrame, unmount } = render(<HookStatusDisplay {...props} />);
+    expect(lastFrame()).toMatchSnapshot();
+    unmount();
+  });
+
+  it('should return empty string if no active hooks', () => {
+    const props = { activeHooks: [] };
+    const { lastFrame, unmount } = render(<HookStatusDisplay {...props} />);
+    expect(lastFrame()).toBe('');
+    unmount();
+  });
+});

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Text } from 'ink';
+import { theme } from '../semantic-colors.js';
+import { type ActiveHook } from '../types.js';
+
+interface HookStatusDisplayProps {
+  activeHooks: ActiveHook[];
+}
+
+export const HookStatusDisplay: React.FC<HookStatusDisplayProps> = ({
+  activeHooks,
+}) => {
+  if (activeHooks.length === 0) {
+    return null;
+  }
+
+  const label = activeHooks.length > 1 ? 'Executing Hooks' : 'Executing Hook';
+  const displayNames = activeHooks.map((hook) => {
+    let name = hook.name;
+    if (hook.index && hook.total && hook.total > 1) {
+      name += ` (${hook.index}/${hook.total})`;
+    }
+    return name;
+  });
+
+  const text = `${label}: ${displayNames.join(', ')}`;
+
+  return (
+    <Text color={theme.status.warning} wrap="truncate">
+      {text}
+    </Text>
+  );
+};

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

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render } from '../../test-utils/render.js';
+import { Text } from 'ink';
+import { StatusDisplay } from './StatusDisplay.js';
+import { UIStateContext, type UIState } from '../contexts/UIStateContext.js';
+import { ConfigContext } from '../contexts/ConfigContext.js';
+import { SettingsContext } from '../contexts/SettingsContext.js';
+
+// Mock child components to simplify testing
+vi.mock('./ContextSummaryDisplay.js', () => ({
+  ContextSummaryDisplay: (props: { skillCount: number }) => (
+    <Text>Mock Context Summary Display (Skills: {props.skillCount})</Text>
+  ),
+}));
+
+vi.mock('./HookStatusDisplay.js', () => ({
+  HookStatusDisplay: () => <Text>Mock Hook Status Display</Text>,
+}));
+
+// Create mock context providers
+const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
+  ({
+    ctrlCPressedOnce: false,
+    warningMessage: null,
+    ctrlDPressedOnce: false,
+    showEscapePrompt: false,
+    queueErrorMessage: null,
+    activeHooks: [],
+    ideContextState: null,
+    geminiMdFileCount: 0,
+    contextFileNames: [],
+    ...overrides,
+  }) as UIState;
+
+const createMockConfig = (overrides = {}) => ({
+  getMcpClientManager: vi.fn().mockImplementation(() => ({
+    getBlockedMcpServers: vi.fn(() => []),
+    getMcpServers: vi.fn(() => ({})),
+  })),
+  getSkillManager: vi.fn().mockImplementation(() => ({
+    getSkills: vi.fn(() => ['skill1', 'skill2']),
+  })),
+  ...overrides,
+});
+
+const createMockSettings = (merged = {}) => ({
+  merged: {
+    hooks: { notifications: true },
+    ui: { hideContextSummary: false },
+    ...merged,
+  },
+});
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const renderStatusDisplay = (
+  props: { hideContextSummary: boolean } = { hideContextSummary: false },
+  uiState: UIState = createMockUIState(),
+  settings = createMockSettings(),
+  config = createMockConfig(),
+) =>
+  render(
+    <ConfigContext.Provider value={config as any}>
+      <SettingsContext.Provider value={settings as any}>
+        <UIStateContext.Provider value={uiState}>
+          <StatusDisplay {...props} />
+        </UIStateContext.Provider>
+      </SettingsContext.Provider>
+    </ConfigContext.Provider>,
+  );
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+describe('StatusDisplay', () => {
+  const originalEnv = process.env;
+
+  afterEach(() => {
+    process.env = { ...originalEnv };
+    delete process.env['GEMINI_SYSTEM_MD'];
+  });
+
+  it('renders nothing by default if context summary is hidden via props', () => {
+    const { lastFrame } = renderStatusDisplay({ hideContextSummary: true });
+    expect(lastFrame()).toBe('');
+  });
+
+  it('renders ContextSummaryDisplay by default', () => {
+    const { lastFrame } = renderStatusDisplay();
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders system md indicator if env var is set', () => {
+    process.env['GEMINI_SYSTEM_MD'] = 'true';
+    const { lastFrame } = renderStatusDisplay();
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('prioritizes Ctrl+C prompt over everything else (except system md)', () => {
+    const uiState = createMockUIState({
+      ctrlCPressedOnce: true,
+      warningMessage: 'Warning',
+      activeHooks: [{ name: 'hook', eventName: 'event' }],
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders warning message', () => {
+    const uiState = createMockUIState({
+      warningMessage: 'This is a warning',
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('prioritizes warning over Ctrl+D', () => {
+    const uiState = createMockUIState({
+      warningMessage: 'Warning',
+      ctrlDPressedOnce: true,
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders Ctrl+D prompt', () => {
+    const uiState = createMockUIState({
+      ctrlDPressedOnce: true,
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders Escape prompt', () => {
+    const uiState = createMockUIState({
+      showEscapePrompt: true,
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders Queue Error Message', () => {
+    const uiState = createMockUIState({
+      queueErrorMessage: 'Queue Error',
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('renders HookStatusDisplay when hooks are active', () => {
+    const uiState = createMockUIState({
+      activeHooks: [{ name: 'hook', eventName: 'event' }],
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('does NOT render HookStatusDisplay if notifications are disabled in settings', () => {
+    const uiState = createMockUIState({
+      activeHooks: [{ name: 'hook', eventName: 'event' }],
+    });
+    const settings = createMockSettings({
+      hooks: { notifications: false },
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      uiState,
+      settings,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('hides ContextSummaryDisplay if configured in settings', () => {
+    const settings = createMockSettings({
+      ui: { hideContextSummary: true },
+    });
+    const { lastFrame } = renderStatusDisplay(
+      { hideContextSummary: false },
+      undefined,
+      settings,
+    );
+    expect(lastFrame()).toBe('');
+  });
+});

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Text } from 'ink';
+import { theme } from '../semantic-colors.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
+import { HookStatusDisplay } from './HookStatusDisplay.js';
+
+interface StatusDisplayProps {
+  hideContextSummary: boolean;
+}
+
+export const StatusDisplay: React.FC<StatusDisplayProps> = ({
+  hideContextSummary,
+}) => {
+  const uiState = useUIState();
+  const settings = useSettings();
+  const config = useConfig();
+
+  if (process.env['GEMINI_SYSTEM_MD']) {
+    return <Text color={theme.status.error}>|⌐■_■| </Text>;
+  }
+
+  if (uiState.ctrlCPressedOnce) {
+    return (
+      <Text color={theme.status.warning}>Press Ctrl+C again to exit.</Text>
+    );
+  }
+
+  if (uiState.warningMessage) {
+    return <Text color={theme.status.warning}>{uiState.warningMessage}</Text>;
+  }
+
+  if (uiState.ctrlDPressedOnce) {
+    return (
+      <Text color={theme.status.warning}>Press Ctrl+D again to exit.</Text>
+    );
+  }
+
+  if (uiState.showEscapePrompt) {
+    return <Text color={theme.text.secondary}>Press Esc again to clear.</Text>;
+  }
+
+  if (uiState.queueErrorMessage) {
+    return <Text color={theme.status.error}>{uiState.queueErrorMessage}</Text>;
+  }
+
+  if (
+    uiState.activeHooks.length > 0 &&
+    (settings.merged.hooks?.notifications ?? true)
+  ) {
+    return <HookStatusDisplay activeHooks={uiState.activeHooks} />;
+  }
+
+  if (!settings.merged.ui?.hideContextSummary && !hideContextSummary) {
+    return (
+      <ContextSummaryDisplay
+        ideContext={uiState.ideContextState}
+        geminiMdFileCount={uiState.geminiMdFileCount}
+        contextFileNames={uiState.contextFileNames}
+        mcpServers={config.getMcpClientManager()?.getMcpServers() ?? {}}
+        blockedMcpServers={
+          config.getMcpClientManager()?.getBlockedMcpServers() ?? []
+        }
+        skillCount={config.getSkillManager().getSkills().length}
+      />
+    );
+  }
+
+  return null;
+};

packages/cli/src/ui/components/__snapshots__/ContextSummaryDisplay.test.tsx.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ContextSummaryDisplay /> > should not render empty parts 1`] = `" - 1 open file (ctrl+g to view)"`;
+
+exports[`<ContextSummaryDisplay /> > should render on a single line on a wide screen 1`] = `" 1 open file (ctrl+g to view) | 1 GEMINI.md file | 1 MCP server | 1 skill"`;
+
+exports[`<ContextSummaryDisplay /> > should render on multiple lines on a narrow screen 1`] = `
+" - 1 open file (ctrl+g to view)
+ - 1 GEMINI.md file
+ - 1 MCP server
+ - 1 skill"
+`;

packages/cli/src/ui/components/__snapshots__/HookStatusDisplay.test.tsx.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<HookStatusDisplay /> > should render a single executing hook 1`] = `"Executing Hook: test-hook"`;
+
+exports[`<HookStatusDisplay /> > should render multiple executing hooks 1`] = `"Executing Hooks: h1, h2"`;
+
+exports[`<HookStatusDisplay /> > should render sequential hook progress 1`] = `"Executing Hook: step (1/3)"`;

packages/cli/src/ui/components/__snapshots__/StatusDisplay.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StatusDisplay > does NOT render HookStatusDisplay if notifications are disabled in settings 1`] = `"Mock Context Summary Display (Skills: 2)"`;
+
+exports[`StatusDisplay > prioritizes Ctrl+C prompt over everything else (except system md) 1`] = `"Press Ctrl+C again to exit."`;
+
+exports[`StatusDisplay > prioritizes warning over Ctrl+D 1`] = `"Warning"`;
+
+exports[`StatusDisplay > renders ContextSummaryDisplay by default 1`] = `"Mock Context Summary Display (Skills: 2)"`;
+
+exports[`StatusDisplay > renders Ctrl+D prompt 1`] = `"Press Ctrl+D again to exit."`;
+
+exports[`StatusDisplay > renders Escape prompt 1`] = `"Press Esc again to clear."`;
+
+exports[`StatusDisplay > renders HookStatusDisplay when hooks are active 1`] = `"Mock Hook Status Display"`;
+
+exports[`StatusDisplay > renders Queue Error Message 1`] = `"Queue Error"`;
+
+exports[`StatusDisplay > renders system md indicator if env var is set 1`] = `"|⌐■_■|"`;
+
+exports[`StatusDisplay > renders warning message 1`] = `"This is a warning"`;

packages/cli/src/ui/constants.ts

@@ -28,3 +28,6 @@ export const TOOL_STATUS = {
 
 // Maximum number of MCP resources to display per server before truncating
 export const MAX_MCP_RESOURCES_TO_SHOW = 10;
+
+export const WARNING_PROMPT_DURATION_MS = 1000;
+export const QUEUE_ERROR_DISPLAY_DURATION_MS = 3000;

packages/cli/src/ui/contexts/UIStateContext.tsx

@@ -14,6 +14,7 @@ import type {
   LoopDetectionConfirmationRequest,
   HistoryItemWithoutId,
   StreamingState,
+  ActiveHook,
 } from '../types.js';
 import type { CommandContext, SlashCommand } from '../commands/types.js';
 import type { TextBuffer } from '../components/shared/text-buffer.js';
@@ -96,6 +97,7 @@ export interface UIState {
   elapsedTime: number;
   currentLoadingPhrase: string;
   historyRemountKey: number;
+  activeHooks: ActiveHook[];
   messageQueue: string[];
   queueErrorMessage: string | null;
   showAutoAcceptIndicator: ApprovalMode;

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

@@ -0,0 +1,234 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderHook } from '../../test-utils/render.js';
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { useHookDisplayState } from './useHookDisplayState.js';
+import {
+  coreEvents,
+  CoreEvent,
+  type HookStartPayload,
+  type HookEndPayload,
+} from '@google/gemini-cli-core';
+import { act } from 'react';
+
+describe('useHookDisplayState', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+    coreEvents.removeAllListeners(CoreEvent.HookStart);
+    coreEvents.removeAllListeners(CoreEvent.HookEnd);
+  });
+
+  it('should initialize with empty hooks', () => {
+    const { result } = renderHook(() => useHookDisplayState());
+    expect(result.current).toEqual([]);
+  });
+
+  it('should add a hook when HookStart event is emitted', () => {
+    const { result } = renderHook(() => useHookDisplayState());
+
+    const payload: HookStartPayload = {
+      hookName: 'test-hook',
+      eventName: 'before-agent',
+      hookIndex: 1,
+      totalHooks: 1,
+    };
+
+    act(() => {
+      coreEvents.emitHookStart(payload);
+    });
+
+    expect(result.current).toHaveLength(1);
+    expect(result.current[0]).toMatchObject({
+      name: 'test-hook',
+      eventName: 'before-agent',
+    });
+  });
+
+  it('should remove a hook immediately if duration > 1s', () => {
+    const { result } = renderHook(() => useHookDisplayState());
+
+    const startPayload: HookStartPayload = {
+      hookName: 'test-hook',
+      eventName: 'before-agent',
+    };
+
+    act(() => {
+      coreEvents.emitHookStart(startPayload);
+    });
+
+    // Advance time by 1.1 seconds
+    act(() => {
+      vi.advanceTimersByTime(1100);
+    });
+
+    const endPayload: HookEndPayload = {
+      hookName: 'test-hook',
+      eventName: 'before-agent',
+      success: true,
+    };
+
+    act(() => {
+      coreEvents.emitHookEnd(endPayload);
+    });
+
+    expect(result.current).toHaveLength(0);
+  });
+
+  it('should delay removal if duration < 1s', () => {
+    const { result } = renderHook(() => useHookDisplayState());
+
+    const startPayload: HookStartPayload = {
+      hookName: 'test-hook',
+      eventName: 'before-agent',
+    };
+
+    act(() => {
+      coreEvents.emitHookStart(startPayload);
+    });
+
+    // Advance time by only 100ms
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    const endPayload: HookEndPayload = {
+      hookName: 'test-hook',
+      eventName: 'before-agent',
+      success: true,
+    };
+
+    act(() => {
+      coreEvents.emitHookEnd(endPayload);
+    });
+
+    // Should still be present
+    expect(result.current).toHaveLength(1);
+
+    // Advance remaining time (900ms needed, let's go 950ms)
+    act(() => {
+      vi.advanceTimersByTime(950);
+    });
+
+    expect(result.current).toHaveLength(0);
+  });
+
+  it('should handle multiple hooks correctly', () => {
+    const { result } = renderHook(() => useHookDisplayState());
+
+    act(() => {
+      coreEvents.emitHookStart({ hookName: 'h1', eventName: 'e1' });
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    act(() => {
+      coreEvents.emitHookStart({ hookName: 'h2', eventName: 'e1' });
+    });
+
+    expect(result.current).toHaveLength(2);
+
+    // End h1 (total time 500ms -> needs 500ms delay)
+    act(() => {
+      coreEvents.emitHookEnd({
+        hookName: 'h1',
+        eventName: 'e1',
+        success: true,
+      });
+    });
+
+    // h1 still there
+    expect(result.current).toHaveLength(2);
+
+    // Advance 600ms. h1 should disappear. h2 has been running for 600ms.
+    act(() => {
+      vi.advanceTimersByTime(600);
+    });
+
+    expect(result.current).toHaveLength(1);
+    expect(result.current[0].name).toBe('h2');
+
+    // End h2 (total time 600ms -> needs 400ms delay)
+    act(() => {
+      coreEvents.emitHookEnd({
+        hookName: 'h2',
+        eventName: 'e1',
+        success: true,
+      });
+    });
+
+    expect(result.current).toHaveLength(1);
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(result.current).toHaveLength(0);
+  });
+
+  it('should handle interleaved hooks with same name and event', () => {
+    const { result } = renderHook(() => useHookDisplayState());
+    const hook = { hookName: 'same-hook', eventName: 'same-event' };
+
+    // Start Hook 1 at t=0
+    act(() => {
+      coreEvents.emitHookStart(hook);
+    });
+
+    // Advance to t=500
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // Start Hook 2 at t=500
+    act(() => {
+      coreEvents.emitHookStart(hook);
+    });
+
+    expect(result.current).toHaveLength(2);
+    expect(result.current[0].name).toBe('same-hook');
+    expect(result.current[1].name).toBe('same-hook');
+
+    // End Hook 1 at t=600 (Duration 600ms -> delay 400ms)
+    act(() => {
+      vi.advanceTimersByTime(100);
+      coreEvents.emitHookEnd({ ...hook, success: true });
+    });
+
+    // Both still visible (Hook 1 pending removal in 400ms)
+    expect(result.current).toHaveLength(2);
+
+    // Advance 400ms (t=1000). Hook 1 should be removed.
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    expect(result.current).toHaveLength(1);
+
+    // End Hook 2 at t=1100 (Duration: 1100 - 500 = 600ms -> delay 400ms)
+    act(() => {
+      vi.advanceTimersByTime(100);
+      coreEvents.emitHookEnd({ ...hook, success: true });
+    });
+
+    // Hook 2 still visible (pending removal in 400ms)
+    expect(result.current).toHaveLength(1);
+
+    // Advance 400ms (t=1500). Hook 2 should be removed.
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    expect(result.current).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import {
+  coreEvents,
+  CoreEvent,
+  type HookStartPayload,
+  type HookEndPayload,
+} from '@google/gemini-cli-core';
+import { type ActiveHook } from '../types.js';
+import { WARNING_PROMPT_DURATION_MS } from '../constants.js';
+
+export const useHookDisplayState = () => {
+  const [activeHooks, setActiveHooks] = useState<ActiveHook[]>([]);
+
+  // Track start times independently of render state to calculate duration in event handlers
+  // Key: `${hookName}:${eventName}` -> Stack of StartTimes (FIFO)
+  const hookStartTimes = useRef<Map<string, number[]>>(new Map());
+
+  // Track active timeouts to clear them on unmount
+  const timeouts = useRef<Set<NodeJS.Timeout>>(new Set());
+
+  useEffect(() => {
+    const activeTimeouts = timeouts.current;
+    const startTimes = hookStartTimes.current;
+
+    const handleHookStart = (payload: HookStartPayload) => {
+      const key = `${payload.hookName}:${payload.eventName}`;
+      const now = Date.now();
+
+      // Add start time to ref
+      if (!startTimes.has(key)) {
+        startTimes.set(key, []);
+      }
+      startTimes.get(key)!.push(now);
+
+      setActiveHooks((prev) => [
+        ...prev,
+        {
+          name: payload.hookName,
+          eventName: payload.eventName,
+          index: payload.hookIndex,
+          total: payload.totalHooks,
+        },
+      ]);
+    };
+
+    const handleHookEnd = (payload: HookEndPayload) => {
+      const key = `${payload.hookName}:${payload.eventName}`;
+      const starts = startTimes.get(key);
+      const startTime = starts?.shift(); // Get the earliest start time for this hook type
+
+      // Cleanup empty arrays in map
+      if (starts && starts.length === 0) {
+        startTimes.delete(key);
+      }
+
+      const now = Date.now();
+      // Default to immediate removal if start time not found (defensive)
+      const elapsed = startTime ? now - startTime : WARNING_PROMPT_DURATION_MS;
+      const remaining = WARNING_PROMPT_DURATION_MS - elapsed;
+
+      const removeHook = () => {
+        setActiveHooks((prev) => {
+          const index = prev.findIndex(
+            (h) =>
+              h.name === payload.hookName && h.eventName === payload.eventName,
+          );
+          if (index === -1) return prev;
+          const newHooks = [...prev];
+          newHooks.splice(index, 1);
+          return newHooks;
+        });
+      };
+
+      if (remaining > 0) {
+        const timeoutId = setTimeout(() => {
+          removeHook();
+          activeTimeouts.delete(timeoutId);
+        }, remaining);
+        activeTimeouts.add(timeoutId);
+      } else {
+        removeHook();
+      }
+    };
+
+    coreEvents.on(CoreEvent.HookStart, handleHookStart);
+    coreEvents.on(CoreEvent.HookEnd, handleHookEnd);
+
+    return () => {
+      coreEvents.off(CoreEvent.HookStart, handleHookStart);
+      coreEvents.off(CoreEvent.HookEnd, handleHookEnd);
+      // Clear all pending timeouts
+      activeTimeouts.forEach(clearTimeout);
+      activeTimeouts.clear();
+    };
+  }, []);
+
+  return activeHooks;
+};

packages/cli/src/ui/types.ts

@@ -418,3 +418,10 @@ export interface ConfirmationRequest {
 export interface LoopDetectionConfirmationRequest {
   onComplete: (result: { userSelection: 'disable' | 'keep' }) => void;
 }
+
+export interface ActiveHook {
+  name: string;
+  eventName: string;
+  index?: number;
+  total?: number;
+}