Fix logging and virtual list. (#23080)

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(