gemini-cli-devtools 0.1.5 → 0.2.1

package/dist/src/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { EventEmitter } from 'node:events';
+import { type WebSocket } from 'ws';
+import type { NetworkLog, ConsoleLogPayload } from './types.js';
+export type { NetworkLog, ConsoleLogPayload, InspectorConsoleLog, } from './types.js';
+interface IncomingNetworkPayload extends Partial<NetworkLog> {
+    chunk?: {
+        index: number;
+        data: string;
+        timestamp: number;
+    };
+}
+export interface SessionInfo {
+    sessionId: string;
+    ws: WebSocket;
+    lastPing: number;
+}
+/**
+ * DevTools Viewer
+ *
+ * Receives logs via WebSocket from CLI sessions.
+ */
+export declare class DevTools extends EventEmitter {
+    private static instance;
+    private logs;
+    private consoleLogs;
+    private server;
+    private wss;
+    private sessions;
+    private heartbeatTimer;
+    private port;
+    private constructor();
+    static getInstance(): DevTools;
+    addInternalConsoleLog(payload: ConsoleLogPayload, sessionId?: string, timestamp?: number): void;
+    addInternalNetworkLog(payload: IncomingNetworkPayload, sessionId?: string, timestamp?: number): void;
+    getUrl(): string;
+    getPort(): number;
+    stop(): Promise<void>;
+    start(): Promise<string>;
+    private setupWebSocketServer;
+    private handleWebSocketMessage;
+}

package/dist/src/index.js

@@ -4,21 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import http from 'node:http';
-import { EventEmitter } from 'node:events';
-import { execFile } from 'node:child_process';
-import fs from 'node:fs';
-import path from 'node:path';
-import os from 'node:os';
+import { randomUUID } from 'node:crypto';
+import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { EventEmitter } from 'node:events';
 import { WebSocketServer } from 'ws';
-const VITE_DEV_PORT = 5174;
-// Check if running in dev mode by looking for src directory (not in npm package)
-const isDev = (() => {
-    const srcDir = path.dirname(fileURLToPath(import.meta.url));
-    // In dev: src/index.ts -> srcDir is "src"
-    // In prod: dist/src/index.js -> srcDir is "dist/src"
-    return srcDir.endsWith('/src') && !srcDir.includes('/dist/');
-})();
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const indexHtml = readFileSync(join(__dirname, '../../client/index.html'), 'utf-8');
+const mainJs = readFileSync(join(__dirname, '../client/main.js'), 'utf-8');
 /**
  * DevTools Viewer
  *
@@ -31,6 +25,7 @@ export class DevTools extends EventEmitter {
     server = null;
     wss = null;
     sessions = new Map();
+    heartbeatTimer = null;
     port = 25417;
     constructor() {
         super();
@@ -41,22 +36,17 @@ export class DevTools extends EventEmitter {
         }
         return DevTools.instance;
     }
-    getNetworkLogs() {
-        return this.logs;
-    }
-    getConsoleLogs() {
-        return this.consoleLogs;
-    }
     addInternalConsoleLog(payload, sessionId, timestamp) {
-        this.consoleLogs.push({
+        const entry = {
             ...payload,
-            id: Math.random().toString(36).substring(7),
+            id: randomUUID(),
             sessionId,
             timestamp: timestamp || Date.now(),
-        });
+        };
+        this.consoleLogs.push(entry);
         if (this.consoleLogs.length > 5000)
             this.consoleLogs.shift();
-        this.emit('console-update');
+        this.emit('console-update', entry);
     }
     addInternalNetworkLog(payload, sessionId, timestamp) {
         if (!payload.id)
@@ -68,7 +58,6 @@ export class DevTools extends EventEmitter {
             if (payload.chunk) {
                 const chunks = existing.chunks || [];
                 chunks.push(payload.chunk);
-                console.log(`[DevTools] Received chunk ${payload.chunk.index} for request ${payload.id}, total chunks: ${chunks.length}`);
                 this.logs[existingIndex] = {
                     ...existing,
                     chunks,
@@ -86,31 +75,47 @@ export class DevTools extends EventEmitter {
                         : existing.response,
                 };
             }
+            this.emit('update', this.logs[existingIndex]);
         }
         else if (payload.url) {
-            this.logs.push({
+            const entry = {
                 ...payload,
                 sessionId,
                 timestamp: timestamp || Date.now(),
                 chunks: payload.chunk ? [payload.chunk] : undefined,
-            });
+            };
+            this.logs.push(entry);
             if (this.logs.length > 2000)
                 this.logs.shift();
+            this.emit('update', entry);
         }
-        this.emit('update');
     }
     getUrl() {
         return `http://127.0.0.1:${this.port}`;
     }
-    getClientPath() {
-        const srcDir = path.dirname(fileURLToPath(import.meta.url));
-        // When running with tsx from src/, look for dist/client
-        // When running compiled from dist/src/, look for ../client
-        const distClient = path.join(srcDir, '../dist/client');
-        if (fs.existsSync(distClient)) {
-            return distClient;
-        }
-        return path.join(srcDir, '../client');
+    getPort() {
+        return this.port;
+    }
+    stop() {
+        return new Promise((resolve) => {
+            if (this.heartbeatTimer) {
+                clearInterval(this.heartbeatTimer);
+                this.heartbeatTimer = null;
+            }
+            if (this.wss) {
+                this.wss.close();
+                this.wss = null;
+            }
+            if (this.server) {
+                this.server.close(() => resolve());
+                this.server = null;
+            }
+            else {
+                resolve();
+            }
+            // Reset singleton so a fresh start() is possible
+            DevTools.instance = undefined;
+        });
     }
     start() {
         return new Promise((resolve) => {
@@ -118,100 +123,53 @@ export class DevTools extends EventEmitter {
                 resolve(this.getUrl());
                 return;
             }
-            const clientPath = this.getClientPath();
             this.server = http.createServer((req, res) => {
                 res.setHeader('Access-Control-Allow-Origin', '*');
                 // API routes
-                if (req.url === '/logs') {
-                    res.writeHead(200, { 'Content-Type': 'application/json' });
-                    res.end(JSON.stringify(this.logs));
-                }
-                else if (req.url === '/console-logs') {
-                    res.writeHead(200, { 'Content-Type': 'application/json' });
-                    res.end(JSON.stringify(this.consoleLogs));
-                }
-                else if (req.url === '/sessions') {
-                    res.writeHead(200, { 'Content-Type': 'application/json' });
-                    const sessionIds = Array.from(this.sessions.keys());
-                    res.end(JSON.stringify(sessionIds));
-                }
-                else if (req.url === '/events') {
+                if (req.url === '/events') {
                     res.writeHead(200, {
                         'Content-Type': 'text/event-stream',
                         'Cache-Control': 'no-cache',
                         Connection: 'keep-alive',
                     });
-                    const l1 = () => res.write(`event: update\ndata: \n\n`);
-                    const l2 = () => res.write(`event: console-update\ndata: \n\n`);
-                    const l3 = () => res.write(`event: session-update\ndata: \n\n`);
-                    this.on('update', l1);
-                    this.on('console-update', l2);
-                    this.on('session-update', l3);
+                    // Send full snapshot on connect
+                    const snapshot = JSON.stringify({
+                        networkLogs: this.logs,
+                        consoleLogs: this.consoleLogs,
+                        sessions: Array.from(this.sessions.keys()),
+                    });
+                    res.write(`event: snapshot\ndata: ${snapshot}\n\n`);
+                    // Incremental updates
+                    const onNetwork = (log) => {
+                        res.write(`event: network\ndata: ${JSON.stringify(log)}\n\n`);
+                    };
+                    const onConsole = (log) => {
+                        res.write(`event: console\ndata: ${JSON.stringify(log)}\n\n`);
+                    };
+                    const onSession = () => {
+                        const sessions = Array.from(this.sessions.keys());
+                        res.write(`event: session\ndata: ${JSON.stringify(sessions)}\n\n`);
+                    };
+                    this.on('update', onNetwork);
+                    this.on('console-update', onConsole);
+                    this.on('session-update', onSession);
                     req.on('close', () => {
-                        this.off('update', l1);
-                        this.off('console-update', l2);
-                        this.off('session-update', l3);
+                        this.off('update', onNetwork);
+                        this.off('console-update', onConsole);
+                        this.off('session-update', onSession);
                     });
                 }
-                else if (req.method === 'POST' && req.url === '/ingest') {
-                    let body = '';
-                    req.on('data', (chunk) => (body += chunk));
-                    req.on('end', () => {
-                        try {
-                            const entry = JSON.parse(body);
-                            if (entry.type === 'console') {
-                                this.addInternalConsoleLog(entry.payload, entry.sessionId, entry.timestamp);
-                            }
-                            else if (entry.type === 'network') {
-                                this.addInternalNetworkLog(entry.payload, entry.sessionId, entry.timestamp);
-                            }
-                            res.writeHead(200);
-                            res.end('OK');
-                        }
-                        catch {
-                            res.writeHead(400);
-                            res.end('Invalid JSON');
-                        }
-                    });
+                else if (req.url === '/' || req.url === '/index.html') {
+                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    res.end(indexHtml);
                 }
-                else if (req.method === 'POST' && req.url === '/api/to-textproto') {
-                    let body = '';
-                    req.on('data', (chunk) => (body += chunk));
-                    req.on('end', () => {
-                        const tmpIn = path.join(os.tmpdir(), `req-${Date.now()}.json`);
-                        fs.writeFileSync(tmpIn, body);
-                        const script = `
-import sys
-sys.path.insert(0, '/tmp/proto_gen')
-from google.cloud.aiplatform.v1 import prediction_service_pb2
-from google.protobuf.json_format import Parse
-from google.protobuf import text_format
-import json
-
-with open(sys.argv[1]) as f:
-    msg = Parse(f.read(), prediction_service_pb2.GenerateContentRequest(), ignore_unknown_fields=True)
-print(text_format.MessageToString(msg, as_utf8=True), end='')
-`;
-                        execFile('/tmp/proto_venv/bin/python3', ['-c', script, tmpIn], { maxBuffer: 10 * 1024 * 1024 }, (err, stdout, stderr) => {
-                            fs.unlinkSync(tmpIn);
-                            if (err) {
-                                res.writeHead(500, { 'Content-Type': 'text/plain' });
-                                res.end(stderr || err.message);
-                            }
-                            else {
-                                res.writeHead(200, { 'Content-Type': 'text/plain' });
-                                res.end(stdout);
-                            }
-                        });
-                    });
-                }
-                else if (isDev) {
-                    // Dev mode: proxy to Vite
-                    this.proxyToVite(req, res);
+                else if (req.url === '/assets/main.js') {
+                    res.writeHead(200, { 'Content-Type': 'application/javascript' });
+                    res.end(mainJs);
                 }
                 else {
-                    // Production: serve static files
-                    this.serveStatic(req, res, clientPath);
+                    res.writeHead(404);
+                    res.end('Not Found');
                 }
             });
             this.server.on('error', (e) => {
@@ -246,7 +204,6 @@ print(text_format.MessageToString(msg, as_utf8=True), end='')
                             ws,
                             lastPing: Date.now(),
                         });
-                        console.log(`📡 WebSocket registered: ${sessionId}`);
                         // Notify session update
                         this.emit('session-update');
                         // Send registration acknowledgement
@@ -260,28 +217,25 @@ print(text_format.MessageToString(msg, as_utf8=True), end='')
                         this.handleWebSocketMessage(sessionId, message);
                     }
                 }
-                catch (err) {
-                    console.error('Invalid WebSocket message:', err);
+                catch {
+                    // Invalid WebSocket message
                 }
             });
             ws.on('close', () => {
                 if (sessionId) {
-                    console.log(`📡 WebSocket disconnected: ${sessionId}`);
                     this.sessions.delete(sessionId);
-                    this.emit('session-disconnected', sessionId);
                     this.emit('session-update');
                 }
             });
-            ws.on('error', (err) => {
-                console.error(`WebSocket error:`, err);
+            ws.on('error', () => {
+                // WebSocket error — no action needed
             });
         });
         // Heartbeat mechanism
-        setInterval(() => {
+        this.heartbeatTimer = setInterval(() => {
             const now = Date.now();
             this.sessions.forEach((session, sessionId) => {
                 if (now - session.lastPing > 30000) {
-                    console.log(`⚠️ Session ${sessionId} timeout, closing...`);
                     session.ws.close();
                     this.sessions.delete(sessionId);
                 }
@@ -307,47 +261,7 @@ print(text_format.MessageToString(msg, as_utf8=True), end='')
                 this.addInternalNetworkLog(message.payload, sessionId, message.timestamp);
                 break;
             default:
-                console.warn(`Unknown message type: ${message.type}`);
+                break;
         }
     }
-    proxyToVite(req, res) {
-        const proxyReq = http.request({
-            hostname: '127.0.0.1',
-            port: VITE_DEV_PORT,
-            path: req.url,
-            method: req.method,
-            headers: req.headers,
-        }, (proxyRes) => {
-            res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
-            proxyRes.pipe(res);
-        });
-        proxyReq.on('error', () => {
-            res.writeHead(502);
-            res.end('Vite dev server not ready');
-        });
-        req.pipe(proxyReq);
-    }
-    serveStatic(req, res, clientPath) {
-        const url = req.url === '/' ? '/index.html' : req.url || '/index.html';
-        const filePath = path.join(clientPath, url);
-        fs.readFile(filePath, (err, data) => {
-            if (err) {
-                res.writeHead(404);
-                res.end('Not Found');
-                return;
-            }
-            const ext = path.extname(filePath);
-            const contentTypes = {
-                '.html': 'text/html',
-                '.js': 'application/javascript',
-                '.css': 'text/css',
-                '.svg': 'image/svg+xml',
-                '.json': 'application/json',
-            };
-            res.writeHead(200, {
-                'Content-Type': contentTypes[ext] || 'text/plain',
-            });
-            res.end(data);
-        });
-    }
 }

package/dist/src/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export interface NetworkLog {
+    id: string;
+    sessionId?: string;
+    timestamp: number;
+    method: string;
+    url: string;
+    headers: Record<string, string | string[] | undefined>;
+    body?: string;
+    pending?: boolean;
+    chunks?: Array<{
+        index: number;
+        data: string;
+        timestamp: number;
+    }>;
+    response?: {
+        status: number;
+        headers: Record<string, string | string[] | undefined>;
+        body?: string;
+        durationMs: number;
+    };
+    error?: string;
+}
+export interface ConsoleLogPayload {
+    type: 'log' | 'warn' | 'error' | 'debug' | 'info';
+    content: string;
+}
+export interface InspectorConsoleLog extends ConsoleLogPayload {
+    id: string;
+    sessionId?: string;
+    timestamp: number;
+}

package/dist/src/types.js

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "gemini-cli-devtools",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
-  "bin": {
-    "gemini-cli-devtools": "dist/src/bin.js"
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    }
   },
   "scripts": {
-    "dev": "concurrently -k \"vite --port 5174\" \"tsx watch src/bin.ts\"",
-    "build": "npm run build:client && tsc --outDir dist/src --module ESNext --target ESNext --moduleResolution bundler src/index.ts src/bin.ts",
-    "build:client": "vite build"
+    "build": "npm run build:client && tsc --outDir dist/src --declaration --module ESNext --target ESNext --moduleResolution bundler src/index.ts",
+    "build:client": "node esbuild.client.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "client/index.html"
   ],
   "engines": {
     "node": ">=20"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {
+    "@types/node": "^20.11.24",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/ws": "^8.5.10",
-    "@vitejs/plugin-react": "^4.2.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.0",
-    "@types/node": "^20.11.24",
-    "concurrently": "^8.2.2",
-    "tsx": "^4.7.0"
+    "esbuild": "^0.24.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3"
   }
 }