Fix logging and virtual list. (#23080)

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

@@ -183,7 +183,6 @@ const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
     ideContextState: null,
     geminiMdFileCount: 0,
     renderMarkdown: true,
-    filteredConsoleMessages: [],
     history: [],
     sessionStats: {
       sessionId: 'test-session',
@@ -757,13 +756,6 @@ describe('Composer', () => {
     it('shows DetailedMessagesDisplay when showErrorDetails is true', async () => {
       const uiState = createMockUIState({
         showErrorDetails: true,
-        filteredConsoleMessages: [
-          {
-            type: 'error',
-            content: 'Test error',
-            count: 1,
-          },
-        ],
       });
 
       const { lastFrame } = await renderComposer(uiState);

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

@@ -422,7 +422,6 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
         <OverflowProvider>
           <Box flexDirection="column">
             <DetailedMessagesDisplay
-              messages={uiState.filteredConsoleMessages}
               maxHeight={
                 uiState.constrainHeight ? debugConsoleMaxHeight : undefined
               }

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

@@ -6,11 +6,16 @@
 
 import { renderWithProviders } from '../../test-utils/render.js';
 import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import type { ConsoleMessageItem } from '../types.js';
 import { Box } from 'ink';
 import type React from 'react';
 import { createMockSettings } from '../../test-utils/settings.js';
+import { useConsoleMessages } from '../hooks/useConsoleMessages.js';
+
+vi.mock('../hooks/useConsoleMessages.js', () => ({
+  useConsoleMessages: vi.fn(),
+}));
 
 vi.mock('./shared/ScrollableList.js', () => ({
   ScrollableList: ({
@@ -29,14 +34,15 @@ vi.mock('./shared/ScrollableList.js', () => ({
 }));
 
 describe('DetailedMessagesDisplay', () => {
+  beforeEach(() => {
+    vi.mocked(useConsoleMessages).mockReturnValue({
+      consoleMessages: [],
+      clearConsoleMessages: vi.fn(),
+    });
+  });
   it('renders nothing when messages are empty', async () => {
     const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
-      <DetailedMessagesDisplay
-        messages={[]}
-        maxHeight={10}
-        width={80}
-        hasFocus={false}
-      />,
+      <DetailedMessagesDisplay maxHeight={10} width={80} hasFocus={false} />,
       {
         settings: createMockSettings({ ui: { errorVerbosity: 'full' } }),
       },
@@ -53,14 +59,13 @@ describe('DetailedMessagesDisplay', () => {
       { type: 'error', content: 'Error message', count: 1 },
       { type: 'debug', content: 'Debug message', count: 1 },
     ];
+    vi.mocked(useConsoleMessages).mockReturnValue({
+      consoleMessages: messages,
+      clearConsoleMessages: vi.fn(),
+    });
 
     const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
-      <DetailedMessagesDisplay
-        messages={messages}
-        maxHeight={20}
-        width={80}
-        hasFocus={true}
-      />,
+      <DetailedMessagesDisplay maxHeight={20} width={80} hasFocus={true} />,
       {
         settings: createMockSettings({ ui: { errorVerbosity: 'full' } }),
       },
@@ -76,14 +81,13 @@ describe('DetailedMessagesDisplay', () => {
     const messages: ConsoleMessageItem[] = [
       { type: 'error', content: 'Error message', count: 1 },
     ];
+    vi.mocked(useConsoleMessages).mockReturnValue({
+      consoleMessages: messages,
+      clearConsoleMessages: vi.fn(),
+    });
 
     const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
-      <DetailedMessagesDisplay
-        messages={messages}
-        maxHeight={20}
-        width={80}
-        hasFocus={true}
-      />,
+      <DetailedMessagesDisplay maxHeight={20} width={80} hasFocus={true} />,
       {
         settings: createMockSettings({ ui: { errorVerbosity: 'low' } }),
       },
@@ -97,14 +101,13 @@ describe('DetailedMessagesDisplay', () => {
     const messages: ConsoleMessageItem[] = [
       { type: 'error', content: 'Error message', count: 1 },
     ];
+    vi.mocked(useConsoleMessages).mockReturnValue({
+      consoleMessages: messages,
+      clearConsoleMessages: vi.fn(),
+    });
 
     const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
-      <DetailedMessagesDisplay
-        messages={messages}
-        maxHeight={20}
-        width={80}
-        hasFocus={true}
-      />,
+      <DetailedMessagesDisplay maxHeight={20} width={80} hasFocus={true} />,
       {
         settings: createMockSettings({ ui: { errorVerbosity: 'full' } }),
       },
@@ -118,14 +121,13 @@ describe('DetailedMessagesDisplay', () => {
     const messages: ConsoleMessageItem[] = [
       { type: 'log', content: 'Repeated message', count: 5 },
     ];
+    vi.mocked(useConsoleMessages).mockReturnValue({
+      consoleMessages: messages,
+      clearConsoleMessages: vi.fn(),
+    });
 
     const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
-      <DetailedMessagesDisplay
-        messages={messages}
-        maxHeight={10}
-        width={80}
-        hasFocus={false}
-      />,
+      <DetailedMessagesDisplay maxHeight={10} width={80} hasFocus={false} />,
       {
         settings: createMockSettings({ ui: { errorVerbosity: 'full' } }),
       },

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

@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
 import type { ConsoleMessageItem } from '../types.js';
@@ -13,9 +13,10 @@ import {
   ScrollableList,
   type ScrollableListRef,
 } from './shared/ScrollableList.js';
+import { useConsoleMessages } from '../hooks/useConsoleMessages.js';
+import { useConfig } from '../contexts/ConfigContext.js';
 
 interface DetailedMessagesDisplayProps {
-  messages: ConsoleMessageItem[];
   maxHeight: number | undefined;
   width: number;
   hasFocus: boolean;
@@ -25,9 +26,19 @@ const iconBoxWidth = 3;
 
 export const DetailedMessagesDisplay: React.FC<
   DetailedMessagesDisplayProps
-> = ({ messages, maxHeight, width, hasFocus }) => {
+> = ({ maxHeight, width, hasFocus }) => {
   const scrollableListRef = useRef<ScrollableListRef<ConsoleMessageItem>>(null);
 
+  const { consoleMessages } = useConsoleMessages();
+  const config = useConfig();
+
+  const messages = useMemo(() => {
+    if (config.getDebugMode()) {
+      return consoleMessages;
+    }
+    return consoleMessages.filter((msg) => msg.type !== 'debug');
+  }, [consoleMessages, config]);
+
   const borderAndPadding = 3;
 
   const estimatedItemHeight = useCallback(

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

@@ -23,7 +23,7 @@ exports[`DetailedMessagesDisplay > renders messages correctly 1`] = `
 │ ℹ  Log message                                                               │
 │ ⚠  Warning message                                                           │
 │ ✖  Error message                                                             │
-│ 🔍 Debug message                                                             │
+│                                                                              │
 │                                                                              │
 │                                                                              │
 │                                                                              │