feat(devtools): migrate devtools package into monorepo

.gitignore

@@ -46,6 +46,7 @@ packages/*/coverage/
 # Generated files
 packages/cli/src/generated/
 packages/core/src/generated/
+packages/devtools/src/_client-assets.ts
 .integration-tests/
 packages/vscode-ide-companion/*.vsix
 packages/cli/download-ripgrep*/

esbuild.config.js

@@ -63,7 +63,7 @@ const external = [
   '@lydell/node-pty-win32-arm64',
   '@lydell/node-pty-win32-x64',
   'keytar',
-  'gemini-cli-devtools',
+  '@google/gemini-cli-devtools',
 ];
 
 const baseConfig = {

package.json

@@ -37,7 +37,7 @@
     "build:all": "npm run build && npm run build:sandbox && npm run build:vscode",
     "build:packages": "npm run build --workspaces",
     "build:sandbox": "node scripts/build_sandbox.js",
-    "bundle": "npm run generate && node esbuild.config.js && node scripts/copy_bundle_assets.js",
+    "bundle": "npm run generate && npm run build --workspace=@google/gemini-cli-devtools && node esbuild.config.js && node scripts/copy_bundle_assets.js",
     "test": "npm run test --workspaces --if-present",
     "test:ci": "npm run test:ci --workspaces --if-present && npm run test:scripts",
     "test:scripts": "vitest run --config ./scripts/tests/vitest.config.ts",
@@ -117,6 +117,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
     "react-devtools-core": "^6.1.2",
+    "react-dom": "^19.2.0",
     "semver": "^7.7.2",
     "strip-ansi": "^7.1.2",
     "ts-prune": "^0.10.3",
@@ -138,7 +139,6 @@
     "@lydell/node-pty-linux-x64": "1.1.0",
     "@lydell/node-pty-win32-arm64": "1.1.0",
     "@lydell/node-pty-win32-x64": "1.1.0",
-    "gemini-cli-devtools": "^0.2.1",
     "keytar": "^7.9.0",
     "node-pty": "^1.0.0"
   },

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

@@ -90,7 +90,7 @@ vi.mock('ws', () => ({
   default: MockWebSocket,
 }));
 
-vi.mock('gemini-cli-devtools', () => ({
+vi.mock('@google/gemini-cli-devtools', () => ({
   DevTools: {
     getInstance: () => mockDevToolsInstance,
   },

packages/cli/src/utils/devtoolsService.ts

@@ -19,7 +19,6 @@ interface IDevTools {
   getPort(): number;
 }
 
-const DEVTOOLS_PKG = 'gemini-cli-devtools';
 const DEFAULT_DEVTOOLS_PORT = 25417;
 const DEFAULT_DEVTOOLS_HOST = '127.0.0.1';
 const MAX_PROMOTION_ATTEMPTS = 3;
@@ -62,7 +61,7 @@ async function startOrJoinDevTools(
   defaultHost: string,
   defaultPort: number,
 ): Promise<{ host: string; port: number }> {
-  const mod = await import(DEVTOOLS_PKG);
+  const mod = await import('@google/gemini-cli-devtools');
   const devtools: IDevTools = mod.DevTools.getInstance();
   const url = await devtools.start();
   const actualPort = devtools.getPort();

packages/devtools/GEMINI.md

@@ -0,0 +1,85 @@
+# Gemini CLI DevTools
+
+Integrated Developer Tools for Gemini CLI, providing a Chrome DevTools-like
+interface for Network and Console inspection. Launched automatically when the
+`general.devtools` setting is enabled.
+
+## Features
+
+- **Network Inspector**: Real-time request/response logging with streaming
+  chunks and duration tracking
+- **Console Inspector**: Real-time console log viewing
+  (log/warn/error/debug/info)
+- **Session Management**: Multiple CLI session support with live connection
+  status
+- **Import/Export**: Import JSONL log files, export current session logs
+
+## How It Works
+
+When `general.devtools` is enabled, the CLI's `devtoolsService` automatically:
+
+1. Probes port 25417 for an existing DevTools instance
+2. If found, connects as a WebSocket client
+3. If not, starts a new DevTools server and connects to it
+4. If another instance races for the port, the loser connects to the winner
+
+No environment variables needed for normal use.
+
+## Architecture
+
+```
+gemini.tsx / nonInteractiveCli.ts
+         │  (dynamic import)
+         ▼
+  devtoolsService.ts          ← orchestration + DevTools lifecycle
+         │  (imports)
+         ▼
+  activityLogger.ts           ← pure logging (capture, file, WebSocket transport)
+         │  (events)
+         ▼
+  DevTools server (:25417)    ← this package (HTTP + WebSocket + SSE)
+         │  (SSE /events)
+         ▼
+  DevTools UI (React)         ← client/ compiled by esbuild
+```
+
+## Environment Variables
+
+| Variable                         | Description                                   |
+| -------------------------------- | --------------------------------------------- |
+| `GEMINI_CLI_ACTIVITY_LOG_TARGET` | File path for JSONL mode (optional, fallback) |
+
+## API Endpoints
+
+| Endpoint  | Method    | Description                                                                 |
+| --------- | --------- | --------------------------------------------------------------------------- |
+| `/ws`     | WebSocket | Log ingestion from CLI sessions (register, network, console)                |
+| `/events` | SSE       | Pushes snapshot on connect, then incremental network/console/session events |
+
+## Development
+
+```bash
+# Build everything (client + server)
+npm run build
+
+# Rebuild client only after UI changes
+npm run build:client
+```
+
+### Project Structure
+
+```
+packages/devtools/
+├── src/
+│   └── index.ts           # DevTools server (HTTP, WebSocket, SSE)
+├── client/
+│   ├── index.html
+│   └── src/
+│       ├── main.tsx        # React entry
+│       ├── App.tsx         # DevTools UI
+│       └── hooks.ts        # Data fetching hooks
+├── esbuild.client.js       # Client build script
+└── dist/                   # Build output
+    ├── src/index.js        # Compiled server
+    └── client/             # Bundled client assets
+```

packages/devtools/client/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gemini CLI DevTools</title>
+    <style>
+      html,
+      body,
+      #root {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+          Arial, sans-serif;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/assets/main.js"></script>
+  </body>
+</html>