gemini-cli-devtools 0.0.1 → 0.1.1

package/dist/src/index.js

@@ -9,6 +9,15 @@ import fs from 'node:fs';
 import path from 'node:path';
 import os from 'node:os';
 import { fileURLToPath } from 'node:url';
+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/');
+})();
 /**
  * DevTools Viewer
  *
@@ -19,6 +28,8 @@ export class DevTools extends EventEmitter {
     logs = [];
     consoleLogs = [];
     server = null;
+    wss = null;
+    sessions = new Map();
     port = 25417;
     watchedFiles = new Map(); // filePath -> lastSize
     constructor() {
@@ -180,7 +191,14 @@ export class DevTools extends EventEmitter {
         return `http://127.0.0.1:${this.port}`;
     }
     getClientPath() {
-        return path.join(path.dirname(fileURLToPath(import.meta.url)), '../client');
+        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');
     }
     start() {
         return new Promise((resolve) => {
@@ -191,40 +209,8 @@ export class DevTools extends EventEmitter {
             const clientPath = this.getClientPath();
             this.server = http.createServer((req, res) => {
                 res.setHeader('Access-Control-Allow-Origin', '*');
-                if (req.url === '/' || req.url === '/index.html') {
-                    fs.readFile(path.join(clientPath, 'index.html'), (err, data) => {
-                        if (err) {
-                            res.writeHead(500);
-                            res.end('Error loading client');
-                        }
-                        else {
-                            res.writeHead(200, { 'Content-Type': 'text/html' });
-                            res.end(data);
-                        }
-                    });
-                }
-                else if (req.url?.startsWith('/assets/')) {
-                    const assetPath = path.join(clientPath, req.url);
-                    fs.readFile(assetPath, (err, data) => {
-                        if (err) {
-                            res.writeHead(404);
-                            res.end('Not Found');
-                        }
-                        else {
-                            const ext = path.extname(assetPath);
-                            let contentType = 'text/plain';
-                            if (ext === '.js')
-                                contentType = 'application/javascript';
-                            if (ext === '.css')
-                                contentType = 'text/css';
-                            if (ext === '.svg')
-                                contentType = 'image/svg+xml';
-                            res.writeHead(200, { 'Content-Type': contentType });
-                            res.end(data);
-                        }
-                    });
-                }
-                else if (req.url === '/logs') {
+                // API routes
+                if (req.url === '/logs') {
                     res.writeHead(200, { 'Content-Type': 'application/json' });
                     res.end(JSON.stringify(this.logs));
                 }
@@ -232,6 +218,11 @@ export class DevTools extends EventEmitter {
                     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') {
                     res.writeHead(200, {
                         'Content-Type': 'text/event-stream',
@@ -240,13 +231,45 @@ export class DevTools extends EventEmitter {
                     });
                     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);
                     req.on('close', () => {
                         this.off('update', l1);
                         this.off('console-update', l2);
+                        this.off('session-update', l3);
                     });
                 }
+                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 (isDev) {
+                    // Dev mode: proxy to Vite
+                    this.proxyToVite(req, res);
+                }
+                else {
+                    // Production: serve static files
+                    this.serveStatic(req, res, clientPath);
+                }
             });
             this.server.on('error', (e) => {
                 if (typeof e === 'object' &&
@@ -258,8 +281,130 @@ export class DevTools extends EventEmitter {
                 }
             });
             this.server.listen(this.port, '127.0.0.1', () => {
+                this.setupWebSocketServer();
                 resolve(this.getUrl());
             });
         });
     }
+    setupWebSocketServer() {
+        if (!this.server)
+            return;
+        this.wss = new WebSocketServer({ server: this.server, path: '/ws' });
+        this.wss.on('connection', (ws) => {
+            let sessionId = null;
+            ws.on('message', (data) => {
+                try {
+                    const message = JSON.parse(data.toString());
+                    // Handle registration first
+                    if (message.type === 'register') {
+                        sessionId = message.sessionId;
+                        this.sessions.set(sessionId, {
+                            sessionId,
+                            ws,
+                            lastPing: Date.now(),
+                        });
+                        console.log(`📡 WebSocket registered: ${sessionId}`);
+                        // Notify session update
+                        this.emit('session-update');
+                        // Send registration acknowledgement
+                        ws.send(JSON.stringify({
+                            type: 'registered',
+                            sessionId,
+                            timestamp: Date.now(),
+                        }));
+                    }
+                    else if (sessionId) {
+                        this.handleWebSocketMessage(sessionId, message);
+                    }
+                }
+                catch (err) {
+                    console.error('Invalid WebSocket message:', err);
+                }
+            });
+            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);
+            });
+        });
+        // Heartbeat mechanism
+        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);
+                }
+                else {
+                    // Send ping
+                    session.ws.send(JSON.stringify({ type: 'ping', timestamp: now }));
+                }
+            });
+        }, 10000);
+    }
+    handleWebSocketMessage(sessionId, message) {
+        const session = this.sessions.get(sessionId);
+        if (!session)
+            return;
+        switch (message.type) {
+            case 'pong':
+                session.lastPing = Date.now();
+                break;
+            case 'console':
+                this.addInternalConsoleLog(message.payload, sessionId, message.timestamp);
+                break;
+            case 'network':
+                this.addInternalNetworkLog(message.payload, sessionId, message.timestamp);
+                break;
+            default:
+                console.warn(`Unknown message type: ${message.type}`);
+        }
+    }
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gemini-cli-devtools",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "type": "module",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -8,6 +8,7 @@
     "gemini-cli-devtools": "dist/src/bin.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"
   },
@@ -19,14 +20,18 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "ws": "^8.16.0"
   },
   "devDependencies": {
     "@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"
+    "@types/node": "^20.11.24",
+    "concurrently": "^8.2.2",
+    "tsx": "^4.7.0"
   }
 }