feat: Patch console.debug and display only in debug mode

- Patches `console.debug` in `ConsolePatcher.tsx` to capture debug messages.
- Updates `ConsoleOutput` to only display debug messages when `debugMode` is enabled.
- Passes `debugMode` prop from `App.tsx` to `ConsoleOutput`.

Fixes https://github.com/google-gemini/gemini-cli/issues/397

2 files changed, 22 insertions, 4 deletions

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index e607955a..70ece34f 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -409,7 +409,7 @@ export const App = ({
           cliVersion={cliVersion}
           geminiMdFileCount={geminiMdFileCount}
         />
-        <ConsoleOutput />
+        <ConsoleOutput debugMode={config.getDebugMode()} />
       </Box>
     </Box>
   );
diff --git a/packages/cli/src/ui/components/ConsolePatcher.tsx b/packages/cli/src/ui/components/ConsolePatcher.tsx
index 7070fbe4..366aef43 100644
--- a/packages/cli/src/ui/components/ConsolePatcher.tsx
+++ b/packages/cli/src/ui/components/ConsolePatcher.tsx
@@ -10,7 +10,7 @@ import util from 'util';
 
 interface ConsoleMessage {
   id: Key;
-  type: 'log' | 'warn' | 'error';
+  type: 'log' | 'warn' | 'error' | 'debug';
   content: string;
 }
 
@@ -18,16 +18,24 @@ interface ConsoleMessage {
 // This ensures IDs are unique across messages.
 let messageIdCounter = 0;
 
-export const ConsoleOutput: React.FC = () => {
+interface ConsoleOutputProps {
+  debugMode: boolean;
+}
+
+export const ConsoleOutput: React.FC<ConsoleOutputProps> = ({ debugMode }) => {
   const [messages, setMessages] = useState<ConsoleMessage[]>([]);
 
   useEffect(() => {
     const originalConsoleLog = console.log;
     const originalConsoleWarn = console.warn;
     const originalConsoleError = console.error;
+    const originalConsoleDebug = console.debug;
 
     const formatArgs = (args: unknown[]): string => util.format(...args);
-    const addMessage = (type: 'log' | 'warn' | 'error', args: unknown[]) => {
+    const addMessage = (
+      type: 'log' | 'warn' | 'error' | 'debug',
+      args: unknown[],
+    ) => {
       setMessages((prevMessages) => [
         ...prevMessages,
         {
@@ -42,17 +50,23 @@ export const ConsoleOutput: React.FC = () => {
     console.log = (...args: unknown[]) => addMessage('log', args);
     console.warn = (...args: unknown[]) => addMessage('warn', args);
     console.error = (...args: unknown[]) => addMessage('error', args);
+    console.debug = (...args: unknown[]) => addMessage('debug', args);
 
     return () => {
       console.log = originalConsoleLog;
       console.warn = originalConsoleWarn;
       console.error = originalConsoleError;
+      console.debug = originalConsoleDebug;
     };
   }, []);
 
   return (
     <Box flexDirection="column">
       {messages.map((msg) => {
+        if (msg.type === 'debug' && !debugMode) {
+          return null;
+        }
+
         const textProps: { color?: string } = {};
         let prefix = '';
 
@@ -65,6 +79,10 @@ export const ConsoleOutput: React.FC = () => {
             textProps.color = 'red';
             prefix = 'ERROR: ';
             break;
+          case 'debug':
+            textProps.color = 'gray';
+            prefix = 'DEBUG: ';
+            break;
           case 'log':
           default:
             prefix = 'LOG: ';