feat(cli): defer devtools startup and integrate with F12

packages/cli/src/gemini.tsx

@@ -519,10 +519,10 @@ export async function main() {
     adminControlsListner.setConfig(config);
 
     if (config.isInteractive() && settings.merged.general.devtools) {
-      const { registerActivityLogger } = await import(
+      const { setupInitialActivityLogger } = await import(
         './utils/devtoolsService.js'
       );
-      await registerActivityLogger(config);
+      await setupInitialActivityLogger(config);
     }
 
     // Register config for telemetry shutdown

packages/cli/src/nonInteractiveCli.test.ts

@@ -38,9 +38,9 @@ import type { LoadedSettings } from './config/settings.js';
 // Mock core modules
 vi.mock('./ui/hooks/atCommandProcessor.js');
 
-const mockRegisterActivityLogger = vi.hoisted(() => vi.fn());
+const mockSetupInitialActivityLogger = vi.hoisted(() => vi.fn());
 vi.mock('./utils/devtoolsService.js', () => ({
-  registerActivityLogger: mockRegisterActivityLogger,
+  setupInitialActivityLogger: mockSetupInitialActivityLogger,
 }));
 
 const mockCoreEvents = vi.hoisted(() => ({
@@ -286,7 +286,7 @@ describe('runNonInteractive', () => {
       prompt_id: 'prompt-id-activity-logger',
     });
 
-    expect(mockRegisterActivityLogger).toHaveBeenCalledWith(mockConfig);
+    expect(mockSetupInitialActivityLogger).toHaveBeenCalledWith(mockConfig);
     vi.unstubAllEnvs();
   });
 
@@ -309,7 +309,7 @@ describe('runNonInteractive', () => {
       prompt_id: 'prompt-id-activity-logger-off',
     });
 
-    expect(mockRegisterActivityLogger).not.toHaveBeenCalled();
+    expect(mockSetupInitialActivityLogger).not.toHaveBeenCalled();
     vi.unstubAllEnvs();
   });
 

packages/cli/src/nonInteractiveCli.ts

@@ -72,10 +72,10 @@ export async function runNonInteractive({
     });
 
     if (process.env['GEMINI_CLI_ACTIVITY_LOG_TARGET']) {
-      const { registerActivityLogger } = await import(
+      const { setupInitialActivityLogger } = await import(
         './utils/devtoolsService.js'
       );
-      await registerActivityLogger(config);
+      await setupInitialActivityLogger(config);
     }
 
     const { stdout: workingStdout } = createWorkingStdio();

packages/cli/src/ui/AppContainer.tsx

@@ -1528,7 +1528,34 @@ Logging in with Google... Restarting Gemini CLI to continue.
       }
 
       if (keyMatchers[Command.SHOW_ERROR_DETAILS](key)) {
-        setShowErrorDetails((prev) => !prev);
+        if (settings.merged.general.devtools) {
+          void (async () => {
+            try {
+              const { startDevToolsServer } = await import(
+                '../utils/devtoolsService.js'
+              );
+              const { openBrowserSecurely, shouldLaunchBrowser } = await import(
+                '@google/gemini-cli-core'
+              );
+              const url = await startDevToolsServer(config);
+              if (shouldLaunchBrowser()) {
+                try {
+                  await openBrowserSecurely(url);
+                } catch (e) {
+                  setShowErrorDetails((prev) => !prev);
+                  debugLogger.warn('Failed to open browser securely:', e);
+                }
+              } else {
+                setShowErrorDetails((prev) => !prev);
+              }
+            } catch (e) {
+              setShowErrorDetails(true);
+              debugLogger.error('Failed to start DevTools server:', e);
+            }
+          })();
+        } else {
+          setShowErrorDetails((prev) => !prev);
+        }
         return true;
       } else if (keyMatchers[Command.SUSPEND_APP](key)) {
         const undoMessage = isITerm2()
@@ -1661,6 +1688,7 @@ Logging in with Google... Restarting Gemini CLI to continue.
       lastOutputTimeRef,
       tabFocusTimeoutRef,
       showTransientMessage,
+      settings.merged.general.devtools,
     ],
   );
 

packages/cli/src/utils/activityLogger.test.ts

@@ -0,0 +1,135 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ActivityLogger, type NetworkLog } from './activityLogger.js';
+import type { ConsoleLogPayload } from '@google/gemini-cli-core';
+
+describe('ActivityLogger', () => {
+  let logger: ActivityLogger;
+
+  beforeEach(() => {
+    logger = ActivityLogger.getInstance();
+    logger.clearBufferedLogs();
+  });
+
+  it('buffers the last 10 requests with all their events grouped', () => {
+    // Emit 15 requests, each with an initial + response event
+    for (let i = 0; i < 15; i++) {
+      const initial: NetworkLog = {
+        id: `req-${i}`,
+        timestamp: i * 2,
+        method: 'GET',
+        url: 'http://example.com',
+        headers: {},
+        pending: true,
+      };
+      logger.emitNetworkEvent(initial);
+      logger.emitNetworkEvent({
+        id: `req-${i}`,
+        pending: false,
+        response: {
+          status: 200,
+          headers: {},
+          body: 'ok',
+          durationMs: 10,
+        },
+      });
+    }
+
+    const logs = logger.getBufferedLogs();
+    // 10 requests * 2 events each = 20 events
+    expect(logs.network.length).toBe(20);
+    // Oldest kept should be req-5 (first 5 evicted)
+    expect(logs.network[0].id).toBe('req-5');
+    // Last should be req-14
+    expect(logs.network[19].id).toBe('req-14');
+  });
+
+  it('keeps all chunk events for a buffered request', () => {
+    // One request with many chunks
+    logger.emitNetworkEvent({
+      id: 'chunked',
+      timestamp: 1,
+      method: 'POST',
+      url: 'http://example.com',
+      headers: {},
+      pending: true,
+    });
+    for (let i = 0; i < 5; i++) {
+      logger.emitNetworkEvent({
+        id: 'chunked',
+        pending: true,
+        chunk: { index: i, data: `chunk-${i}`, timestamp: 2 + i },
+      });
+    }
+    logger.emitNetworkEvent({
+      id: 'chunked',
+      pending: false,
+      response: { status: 200, headers: {}, body: 'done', durationMs: 50 },
+    });
+
+    const logs = logger.getBufferedLogs();
+    // 1 initial + 5 chunks + 1 response = 7 events, all for 'chunked'
+    expect(logs.network.length).toBe(7);
+    expect(logs.network.every((l) => l.id === 'chunked')).toBe(true);
+  });
+
+  it('buffers only the last 10 console logs', () => {
+    for (let i = 0; i < 15; i++) {
+      const log: ConsoleLogPayload = { content: `log-${i}`, type: 'log' };
+      logger.logConsole(log);
+    }
+
+    const logs = logger.getBufferedLogs();
+    expect(logs.console.length).toBe(10);
+    expect(logs.console[0].content).toBe('log-5');
+    expect(logs.console[9].content).toBe('log-14');
+  });
+
+  it('getBufferedLogs is non-destructive', () => {
+    logger.logConsole({ content: 'test', type: 'log' });
+    const first = logger.getBufferedLogs();
+    const second = logger.getBufferedLogs();
+    expect(first.console.length).toBe(1);
+    expect(second.console.length).toBe(1);
+  });
+
+  it('clearBufferedLogs empties both buffers', () => {
+    logger.logConsole({ content: 'test', type: 'log' });
+    logger.emitNetworkEvent({
+      id: 'r1',
+      timestamp: 1,
+      method: 'GET',
+      url: 'http://example.com',
+      headers: {},
+    });
+    logger.clearBufferedLogs();
+    const logs = logger.getBufferedLogs();
+    expect(logs.console.length).toBe(0);
+    expect(logs.network.length).toBe(0);
+  });
+
+  it('drainBufferedLogs returns and clears atomically', () => {
+    logger.logConsole({ content: 'drain-test', type: 'log' });
+    logger.emitNetworkEvent({
+      id: 'r1',
+      timestamp: 1,
+      method: 'GET',
+      url: 'http://example.com',
+      headers: {},
+    });
+
+    const drained = logger.drainBufferedLogs();
+    expect(drained.console.length).toBe(1);
+    expect(drained.network.length).toBe(1);
+
+    // Buffer should now be empty
+    const after = logger.getBufferedLogs();
+    expect(after.console.length).toBe(0);
+    expect(after.network.length).toBe(0);
+  });
+});