@chinchillaenterprises/mcp-dev-logger 2.1.0 → 2.3.1

package/dist/index.js

@@ -8,6 +8,7 @@ import { writeFileSync, readFileSync, existsSync, appendFileSync, copyFileSync,
 import { join, resolve } from "path";
 import { tmpdir } from "os";
 import { promisify } from "util";
+import { chromium } from "playwright";
 const execAsync = promisify(exec);
 // Schema definitions
 const StartLogStreamingArgsSchema = z.object({
@@ -47,6 +48,16 @@ const CheckRunningProcessesArgsSchema = z.object({
 const DiscoverLogsArgsSchema = z.object({
     sessionDate: z.string().optional().describe("Specific session date (YYYY-MM-DD) to discover logs for (defaults to most recent)")
 });
+const StartFrontendWithBrowserArgsSchema = z.object({
+    command: z.string().optional().describe("Dev command to run (default: npm run dev)"),
+    port: z.number().optional().describe("Port to wait for (default: auto-detect from output)"),
+    waitTimeout: z.number().optional().describe("Max time to wait for server in ms (default: 30000)"),
+    browserDelay: z.number().optional().describe("Delay after server ready in ms (default: 1000)"),
+    teachingMode: z.boolean().optional().describe("Enable teaching features (default: true)"),
+    processId: z.string().optional().describe("Custom process ID (default: frontend-with-browser)"),
+    env: z.record(z.string()).optional().describe("Environment variables"),
+    cwd: z.string().optional().describe("Working directory")
+});
 class DevLoggerServer {
     server;
     activeServers;
@@ -438,9 +449,13 @@ class DevLoggerServer {
             console.error('Log cleanup error:', error);
         }
     }
-    killAllProcesses() {
+    async killAllProcesses() {
         for (const [id, info] of this.activeServers) {
             try {
+                // Close browser if running
+                if (info.browser) {
+                    await info.browser.close();
+                }
                 if (info.process) {
                     // Remove all event listeners to prevent memory leaks
                     info.process.stdout?.removeAllListeners('data');
@@ -633,6 +648,93 @@ class DevLoggerServer {
                             }
                         }
                     }
+                },
+                {
+                    name: "dev_launch_test_browser",
+                    description: "Launch a TEST BROWSER for students to interact with. All console logs from this browser are captured automatically. Students should use THIS browser (not their regular browser) to test their app.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            processId: {
+                                type: "string",
+                                description: "Process ID to attach browser console to"
+                            },
+                            browserUrl: {
+                                type: "string",
+                                description: "URL to open in test browser (default: http://localhost:3000)"
+                            },
+                            teachingMode: {
+                                type: "boolean",
+                                description: "Enable teaching mode with DevTools open and slower actions (default: true)"
+                            },
+                            viewport: {
+                                type: "object",
+                                properties: {
+                                    width: { type: "number", default: 1280 },
+                                    height: { type: "number", default: 800 }
+                                },
+                                description: "Browser window size"
+                            },
+                            highlightErrors: {
+                                type: "boolean",
+                                description: "Add visual indicator when console errors occur (default: true)"
+                            }
+                        }
+                    }
+                },
+                {
+                    name: "dev_stop_browser_console",
+                    description: "Stop browser console capture for a specific process",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            processId: {
+                                type: "string",
+                                description: "Process ID to stop browser console capture for"
+                            }
+                        }
+                    }
+                },
+                {
+                    name: "dev_start_frontend_with_browser",
+                    description: "🚀 ONE-CLICK STUDENT WORKFLOW: Start frontend server AND automatically launch test browser when ready. Perfect for teaching environments - reduces setup from 3 commands to 1. Browser launches with DevTools open, error highlighting, and all console logs captured.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            command: {
+                                type: "string",
+                                description: "Dev command to run (default: npm run dev)"
+                            },
+                            port: {
+                                type: "number",
+                                description: "Port to wait for (default: auto-detect from output)"
+                            },
+                            waitTimeout: {
+                                type: "number",
+                                description: "Max time to wait for server in ms (default: 30000)"
+                            },
+                            browserDelay: {
+                                type: "number",
+                                description: "Delay after server ready in ms (default: 1000)"
+                            },
+                            teachingMode: {
+                                type: "boolean",
+                                description: "Enable teaching features (default: true)"
+                            },
+                            processId: {
+                                type: "string",
+                                description: "Custom process ID (default: frontend-with-browser)"
+                            },
+                            env: {
+                                type: "object",
+                                description: "Environment variables"
+                            },
+                            cwd: {
+                                type: "string",
+                                description: "Working directory"
+                            }
+                        }
+                    }
                 }
             ];
             return { tools };
@@ -843,6 +945,10 @@ class DevLoggerServer {
                                 };
                             }
                             try {
+                                // Close browser if running
+                                if (serverInfo.browser) {
+                                    await serverInfo.browser.close();
+                                }
                                 // Remove all event listeners to prevent memory leaks
                                 if (serverInfo.process) {
                                     serverInfo.process.stdout?.removeAllListeners('data');
@@ -890,6 +996,10 @@ class DevLoggerServer {
                             const stoppedProcesses = [];
                             for (const [processId, serverInfo] of this.activeServers) {
                                 try {
+                                    // Close browser if running
+                                    if (serverInfo.browser) {
+                                        await serverInfo.browser.close();
+                                    }
                                     // Remove all event listeners to prevent memory leaks
                                     if (serverInfo.process) {
                                         serverInfo.process.stdout?.removeAllListeners('data');
@@ -1233,6 +1343,707 @@ class DevLoggerServer {
                             throw new Error(`Failed to discover logs: ${error instanceof Error ? error.message : String(error)}`);
                         }
                     }
+                    case "dev_launch_test_browser": {
+                        const validatedArgs = z.object({
+                            processId: z.string().optional(),
+                            browserUrl: z.string().optional(),
+                            teachingMode: z.boolean().optional(),
+                            viewport: z.object({
+                                width: z.number().default(1280),
+                                height: z.number().default(800)
+                            }).optional(),
+                            highlightErrors: z.boolean().optional()
+                        }).parse(args);
+                        try {
+                            // Find the process to attach to
+                            const processId = this.findProcessOrDefault(validatedArgs.processId);
+                            if (!processId) {
+                                return {
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: JSON.stringify({
+                                                status: "error",
+                                                message: "No dev server process found. Start a dev server first with dev_start_log_streaming"
+                                            }, null, 2)
+                                        }
+                                    ]
+                                };
+                            }
+                            const serverInfo = this.activeServers.get(processId);
+                            // Check if browser already running for this process
+                            if (serverInfo.browser) {
+                                return {
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: JSON.stringify({
+                                                status: "already_running",
+                                                message: `Browser console capture already active for process '${processId}'`
+                                            }, null, 2)
+                                        }
+                                    ]
+                                };
+                            }
+                            // Launch browser with student-friendly defaults
+                            const teachingMode = validatedArgs.teachingMode !== false;
+                            const viewport = validatedArgs.viewport || { width: 1280, height: 800 };
+                            const browser = await chromium.launch({
+                                headless: false, // Always visible for students
+                                slowMo: teachingMode ? 50 : 0, // Slow down actions in teaching mode
+                                devtools: teachingMode, // Open DevTools in teaching mode
+                                args: [
+                                    `--window-size=${viewport.width},${viewport.height}`,
+                                    '--window-position=100,100',
+                                    '--disable-features=RendererCodeIntegrity' // Prevent some security warnings
+                                ]
+                            });
+                            const context = await browser.newContext({
+                                viewport: viewport,
+                                ignoreHTTPSErrors: true // Common in dev environments
+                            });
+                            const page = await context.newPage();
+                            // Add page title to identify this as the test browser
+                            await page.evaluate(() => {
+                                // @ts-ignore - browser context
+                                document.title = '🧪 TEST BROWSER - Console Logs Captured';
+                            });
+                            // Set up console event handler with student-friendly features
+                            const highlightErrors = validatedArgs.highlightErrors !== false;
+                            page.on('console', (msg) => {
+                                const msgType = msg.type();
+                                const timestamp = new Date().toISOString();
+                                const args = msg.args();
+                                // Format console message
+                                let messageText = msg.text();
+                                // Visual feedback for errors in teaching mode
+                                if (highlightErrors && msgType === 'error') {
+                                    page.evaluate(() => {
+                                        // @ts-ignore - browser context
+                                        const flash = document.createElement('div');
+                                        flash.style.cssText = `
+                      position: fixed;
+                      top: 0;
+                      left: 0;
+                      right: 0;
+                      bottom: 0;
+                      border: 5px solid red;
+                      pointer-events: none;
+                      z-index: 999999;
+                      animation: flash 0.5s ease-in-out;
+                    `;
+                                        flash.innerHTML = `
+                      <div style="
+                        background: red;
+                        color: white;
+                        padding: 10px;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        text-align: center;
+                        font-family: monospace;
+                      ">⚠️ Console Error Detected - Check Logs!</div>
+                    `;
+                                        // @ts-ignore - browser context
+                                        document.body.appendChild(flash);
+                                        setTimeout(() => flash.remove(), 2000);
+                                    }).catch(() => { });
+                                }
+                                // Try to get better formatting for objects
+                                if (args.length > 0) {
+                                    Promise.all(args.map(arg => arg.jsonValue().catch(() => arg.toString())))
+                                        .then(values => {
+                                        const formattedMsg = values.map(v => typeof v === 'object' ? JSON.stringify(v, null, 2) : String(v)).join(' ');
+                                        const logEntry = `[${timestamp}] [${processId}] [BROWSER] [${msgType.toUpperCase()}] ${formattedMsg}\n`;
+                                        appendFileSync(serverInfo.outputFile, logEntry);
+                                        // Also log to terminal for immediate feedback
+                                        if (msgType === 'error' || msgType === 'warning') {
+                                            console.error(`[STUDENT BROWSER] ${msgType === 'warning' ? 'WARN' : msgType.toUpperCase()}: ${formattedMsg}`);
+                                        }
+                                    })
+                                        .catch(() => {
+                                        // Fallback to simple text
+                                        const logEntry = `[${timestamp}] [${processId}] [BROWSER] [${msgType.toUpperCase()}] ${messageText}\n`;
+                                        appendFileSync(serverInfo.outputFile, logEntry);
+                                    });
+                                }
+                                else {
+                                    const logEntry = `[${timestamp}] [${processId}] [BROWSER] [${msgType.toUpperCase()}] ${messageText}\n`;
+                                    appendFileSync(serverInfo.outputFile, logEntry);
+                                }
+                            });
+                            // Handle page errors (including hydration errors)
+                            page.on('pageerror', (error) => {
+                                const timestamp = new Date().toISOString();
+                                const logEntry = `[${timestamp}] [${processId}] [BROWSER] [PAGE ERROR] ${error.message}\n${error.stack}\n`;
+                                appendFileSync(serverInfo.outputFile, logEntry);
+                                // Visual feedback for page errors
+                                page.evaluate(() => {
+                                    // @ts-ignore - browser context
+                                    const errorBanner = document.createElement('div');
+                                    errorBanner.style.cssText = `
+                    position: fixed;
+                    top: 40px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    background: #dc2626;
+                    color: white;
+                    padding: 12px 24px;
+                    border-radius: 6px;
+                    font-family: monospace;
+                    font-size: 14px;
+                    z-index: 999999;
+                    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+                    animation: slideDown 0.3s ease-out;
+                  `;
+                                    errorBanner.textContent = '⚠️ JavaScript Error - Check Console & Logs';
+                                    // @ts-ignore - browser context
+                                    const style = document.createElement('style');
+                                    style.textContent = `
+                    @keyframes slideDown {
+                      from { transform: translate(-50%, -100%); opacity: 0; }
+                      to { transform: translate(-50%, 0); opacity: 1; }
+                    }
+                  `;
+                                    // @ts-ignore - browser context
+                                    document.head.appendChild(style);
+                                    // @ts-ignore - browser context
+                                    document.body.appendChild(errorBanner);
+                                    setTimeout(() => errorBanner.remove(), 5000);
+                                }).catch(() => { });
+                            });
+                            // Handle unhandled promise rejections
+                            await page.addInitScript(() => {
+                                // @ts-ignore - browser context
+                                window.addEventListener('unhandledrejection', (event) => {
+                                    console.error('Unhandled Promise Rejection:', event.reason);
+                                });
+                            });
+                            // Handle network response errors
+                            page.on('response', (response) => {
+                                if (response.status() >= 400) {
+                                    const timestamp = new Date().toISOString();
+                                    const logEntry = `[${timestamp}] [${processId}] [BROWSER] [NETWORK ERROR] ${response.status()} ${response.statusText()} - ${response.url()}\n`;
+                                    appendFileSync(serverInfo.outputFile, logEntry);
+                                }
+                            });
+                            // Navigate to URL
+                            const browserUrl = validatedArgs.browserUrl || "http://localhost:3000";
+                            try {
+                                await page.goto(browserUrl, { waitUntil: 'domcontentloaded' });
+                                // Add student instruction banner
+                                if (teachingMode) {
+                                    await page.evaluate(() => {
+                                        // @ts-ignore - browser context
+                                        const banner = document.createElement('div');
+                                        banner.id = 'test-browser-banner';
+                                        banner.style.cssText = `
+                      position: fixed;
+                      top: 0;
+                      left: 0;
+                      right: 0;
+                      background: #4CAF50;
+                      color: white;
+                      padding: 10px;
+                      text-align: center;
+                      z-index: 99999;
+                      font-family: monospace;
+                      font-size: 14px;
+                      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+                    `;
+                                        banner.innerHTML = `
+                      🧪 TEST BROWSER - All console logs are being captured! 
+                      <button onclick="this.parentElement.style.display='none'" style="
+                        margin-left: 20px;
+                        background: transparent;
+                        border: 1px solid white;
+                        color: white;
+                        padding: 2px 10px;
+                        cursor: pointer;
+                      ">Hide</button>
+                    `;
+                                        // @ts-ignore - browser context
+                                        document.body.prepend(banner);
+                                    }).catch(() => { });
+                                }
+                            }
+                            catch (error) {
+                                const timestamp = new Date().toISOString();
+                                const logEntry = `[${timestamp}] [${processId}] [BROWSER] [NAVIGATION ERROR] Failed to navigate to ${browserUrl}: ${error}\n`;
+                                appendFileSync(serverInfo.outputFile, logEntry);
+                            }
+                            // Update server info
+                            serverInfo.browser = browser;
+                            serverInfo.page = page;
+                            serverInfo.browserUrl = browserUrl;
+                            serverInfo.consoleCapture = true;
+                            // Log browser start
+                            const timestamp = new Date().toISOString();
+                            const logEntry = `[${timestamp}] [${processId}] [BROWSER] Console capture started for ${browserUrl}\n`;
+                            appendFileSync(serverInfo.outputFile, logEntry);
+                            return {
+                                content: [
+                                    {
+                                        type: "text",
+                                        text: JSON.stringify({
+                                            status: "started",
+                                            processId: processId,
+                                            browserUrl: browserUrl,
+                                            teachingMode: teachingMode,
+                                            message: `🧪 TEST BROWSER LAUNCHED!\n\n` +
+                                                `👉 IMPORTANT: Students should use THIS browser window (not their regular browser)\n` +
+                                                `📝 All console logs are being captured to: ${serverInfo.outputFile}\n` +
+                                                `🔍 DevTools is ${teachingMode ? 'OPEN' : 'CLOSED'} for debugging\n` +
+                                                `⚠️  Errors will ${highlightErrors ? 'flash red' : 'not flash'} on screen\n\n` +
+                                                `Students can now interact with the app at: ${browserUrl}`
+                                        }, null, 2)
+                                    }
+                                ]
+                            };
+                        }
+                        catch (error) {
+                            throw new Error(`Failed to start browser console capture: ${error instanceof Error ? error.message : String(error)}`);
+                        }
+                    }
+                    case "dev_stop_browser_console": {
+                        const validatedArgs = z.object({
+                            processId: z.string().optional()
+                        }).parse(args);
+                        try {
+                            const processId = this.findProcessOrDefault(validatedArgs.processId);
+                            if (!processId) {
+                                return {
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: JSON.stringify({
+                                                status: "error",
+                                                message: "No process found"
+                                            }, null, 2)
+                                        }
+                                    ]
+                                };
+                            }
+                            const serverInfo = this.activeServers.get(processId);
+                            if (!serverInfo || !serverInfo.browser) {
+                                return {
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: JSON.stringify({
+                                                status: "not_running",
+                                                message: `No browser console capture running for process '${processId}'`
+                                            }, null, 2)
+                                        }
+                                    ]
+                                };
+                            }
+                            // Close browser
+                            await serverInfo.browser.close();
+                            // Clear browser info
+                            serverInfo.browser = undefined;
+                            serverInfo.page = undefined;
+                            serverInfo.browserUrl = undefined;
+                            serverInfo.consoleCapture = false;
+                            // Log browser stop
+                            const timestamp = new Date().toISOString();
+                            const logEntry = `[${timestamp}] [${processId}] [BROWSER] Console capture stopped\n`;
+                            appendFileSync(serverInfo.outputFile, logEntry);
+                            return {
+                                content: [
+                                    {
+                                        type: "text",
+                                        text: JSON.stringify({
+                                            status: "stopped",
+                                            processId: processId,
+                                            message: `Browser console capture stopped for process '${processId}'`
+                                        }, null, 2)
+                                    }
+                                ]
+                            };
+                        }
+                        catch (error) {
+                            throw new Error(`Failed to stop browser console capture: ${error instanceof Error ? error.message : String(error)}`);
+                        }
+                    }
+                    case "dev_start_frontend_with_browser": {
+                        const validatedArgs = StartFrontendWithBrowserArgsSchema.parse(args);
+                        // Defaults
+                        const command = validatedArgs.command || "npm run dev";
+                        const processId = validatedArgs.processId || "frontend-with-browser";
+                        const cwd = resolve(validatedArgs.cwd || process.cwd());
+                        const waitTimeout = validatedArgs.waitTimeout || 30000;
+                        const browserDelay = validatedArgs.browserDelay || 1000;
+                        const teachingMode = validatedArgs.teachingMode !== false; // default true
+                        try {
+                            // Check if process already exists
+                            if (this.activeServers.has(processId)) {
+                                throw new Error(`Process '${processId}' is already running. Stop it first or use a different processId.`);
+                            }
+                            // Step 1: Start the dev server
+                            const outputFile = this.createStructuredLogPath(command, undefined, "frontend");
+                            this.cleanupOldLogs(3);
+                            const [program, ...cmdArgs] = command.split(' ');
+                            // Initial log entry
+                            writeFileSync(outputFile, `[${new Date().toISOString()}] Starting: ${command} (Process ID: ${processId})\n`);
+                            appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] ✅ Starting development server...\n`);
+                            // Spawn the process
+                            const devProcess = spawn(program, cmdArgs, {
+                                cwd: cwd,
+                                env: { ...process.env, ...validatedArgs.env },
+                                detached: true,
+                                stdio: ['ignore', 'pipe', 'pipe']
+                            });
+                            const serverInfo = {
+                                process: devProcess,
+                                command: command,
+                                cwd: cwd,
+                                outputFile: outputFile,
+                                startTime: new Date(),
+                                pid: devProcess.pid,
+                                processId: processId
+                            };
+                            this.activeServers.set(processId, serverInfo);
+                            // Variables for port detection
+                            let detectedPort = validatedArgs.port || null;
+                            let serverReady = false;
+                            let outputBuffer = "";
+                            // Common port patterns
+                            const portPatterns = [
+                                /(?:Local|Listening|ready).*?(\d{4})/i,
+                                /localhost:(\d{4})/,
+                                /port\s*:?\s*(\d{4})/i,
+                                /on\s+http:\/\/localhost:(\d{4})/i,
+                                /Server running at.*?:(\d{4})/i
+                            ];
+                            // Ready indicators
+                            const readyPatterns = [
+                                /Local:\s*http:\/\/localhost/i,
+                                /ready on http:\/\/localhost/i,
+                                /Server running at/i,
+                                /Listening on port/i,
+                                /started server on/i,
+                                /Ready in \d+ms/i,
+                                /compiled successfully/i
+                            ];
+                            // Create promise for server ready detection
+                            const serverReadyPromise = new Promise((resolve, reject) => {
+                                const timeout = setTimeout(() => {
+                                    reject(new Error(`Server did not start within ${waitTimeout}ms`));
+                                }, waitTimeout);
+                                const checkOutput = (data) => {
+                                    const text = data.toString();
+                                    outputBuffer += text;
+                                    // Check for port if not detected
+                                    if (!detectedPort) {
+                                        for (const pattern of portPatterns) {
+                                            const match = outputBuffer.match(pattern);
+                                            if (match && match[1]) {
+                                                detectedPort = parseInt(match[1]);
+                                                appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] 🔍 Detected port: ${detectedPort}\n`);
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    // Check for ready state
+                                    if (!serverReady) {
+                                        for (const pattern of readyPatterns) {
+                                            if (pattern.test(outputBuffer)) {
+                                                serverReady = true;
+                                                clearTimeout(timeout);
+                                                // If we have a port, resolve immediately
+                                                if (detectedPort) {
+                                                    resolve(detectedPort);
+                                                }
+                                                else {
+                                                    // Try common ports
+                                                    const commonPorts = [3000, 3001, 5173, 8080, 4200];
+                                                    detectedPort = commonPorts[0]; // Default to 3000
+                                                    appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] ⚠️  Could not detect port, defaulting to ${detectedPort}\n`);
+                                                    resolve(detectedPort);
+                                                }
+                                                break;
+                                            }
+                                        }
+                                    }
+                                };
+                                // Attach listeners
+                                devProcess.stdout?.on('data', checkOutput);
+                                devProcess.stderr?.on('data', checkOutput);
+                            });
+                            // Stream stdout to file
+                            devProcess.stdout?.on('data', (data) => {
+                                const timestamp = new Date().toISOString();
+                                const logEntry = `[${timestamp}] [${processId}] ${data}`;
+                                appendFileSync(outputFile, logEntry);
+                            });
+                            // Stream stderr to file
+                            devProcess.stderr?.on('data', (data) => {
+                                const timestamp = new Date().toISOString();
+                                const logEntry = `[${timestamp}] [${processId}] [ERROR] ${data}`;
+                                appendFileSync(outputFile, logEntry);
+                            });
+                            // Handle process exit
+                            devProcess.on('exit', (code, signal) => {
+                                const timestamp = new Date().toISOString();
+                                const exitMessage = `[${timestamp}] [${processId}] Process exited with code ${code} and signal ${signal}\n`;
+                                appendFileSync(outputFile, exitMessage);
+                                this.activeServers.delete(processId);
+                                this.saveState();
+                            });
+                            // Handle process errors
+                            devProcess.on('error', (error) => {
+                                const timestamp = new Date().toISOString();
+                                const errorMessage = `[${timestamp}] [${processId}] Process error: ${error.message}\n`;
+                                appendFileSync(outputFile, errorMessage);
+                            });
+                            this.saveState();
+                            // Step 2: Wait for server to be ready
+                            let port;
+                            try {
+                                port = await serverReadyPromise;
+                                appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] ✅ Server ready on http://localhost:${port}\n`);
+                            }
+                            catch (error) {
+                                // Server didn't start properly, clean up
+                                const failedServerInfo = this.activeServers.get(processId);
+                                if (failedServerInfo) {
+                                    try {
+                                        // Close browser if it exists
+                                        if (failedServerInfo.browser) {
+                                            await failedServerInfo.browser.close();
+                                        }
+                                        // Remove all event listeners to prevent memory leaks
+                                        if (failedServerInfo.process) {
+                                            failedServerInfo.process.stdout?.removeAllListeners('data');
+                                            failedServerInfo.process.stderr?.removeAllListeners('data');
+                                            failedServerInfo.process.removeAllListeners('exit');
+                                            failedServerInfo.process.removeAllListeners('error');
+                                        }
+                                        // Kill the process
+                                        if (failedServerInfo.pid) {
+                                            process.kill(failedServerInfo.pid, 'SIGTERM');
+                                        }
+                                    }
+                                    catch (killError) {
+                                        // Ignore errors during cleanup
+                                    }
+                                    this.activeServers.delete(processId);
+                                    this.saveState();
+                                }
+                                throw error;
+                            }
+                            // Step 3: Wait a bit more for stability
+                            appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] ⏳ Waiting ${browserDelay}ms before launching browser...\n`);
+                            await new Promise(resolve => setTimeout(resolve, browserDelay));
+                            // Step 4: Launch the test browser
+                            try {
+                                appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] ✅ Launching test browser...\n`);
+                                const browser = await chromium.launch({
+                                    headless: false,
+                                    slowMo: teachingMode ? 50 : 0,
+                                    devtools: teachingMode,
+                                    args: ['--window-size=1280,800', '--window-position=100,100']
+                                });
+                                const context = await browser.newContext({
+                                    viewport: { width: 1280, height: 800 }
+                                });
+                                const page = await context.newPage();
+                                // Add banner to identify test browser
+                                await page.addInitScript(() => {
+                                    // @ts-ignore - browser context
+                                    const banner = document.createElement('div');
+                                    banner.id = 'test-browser-banner';
+                                    banner.innerHTML = '🧪 TEST BROWSER - All console logs are being captured 📝';
+                                    banner.style.cssText = `
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    background: #22c55e;
+                    color: white;
+                    padding: 8px;
+                    text-align: center;
+                    font-family: monospace;
+                    font-size: 14px;
+                    z-index: 999999;
+                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+                  `;
+                                    // @ts-ignore - browser context
+                                    if (document.readyState === 'loading') {
+                                        // @ts-ignore - browser context
+                                        document.addEventListener('DOMContentLoaded', () => {
+                                            // @ts-ignore - browser context
+                                            document.body.insertBefore(banner, document.body.firstChild);
+                                        });
+                                    }
+                                    else {
+                                        // @ts-ignore - browser context
+                                        document.body.insertBefore(banner, document.body.firstChild);
+                                    }
+                                });
+                                // Set up console capture
+                                page.on('console', (msg) => {
+                                    const timestamp = new Date().toISOString();
+                                    const msgType = msg.type().toUpperCase();
+                                    const msgText = msg.text();
+                                    const logEntry = `[${timestamp}] [${processId}] [BROWSER] [${msgType}] ${msgText}\n`;
+                                    appendFileSync(outputFile, logEntry);
+                                    // Flash red on errors
+                                    if (msgType === 'ERROR') {
+                                        page.evaluate(() => {
+                                            // @ts-ignore - browser context
+                                            const flash = document.createElement('div');
+                                            flash.style.cssText = `
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        background: rgba(239, 68, 68, 0.3);
+                        z-index: 999998;
+                        pointer-events: none;
+                        animation: errorFlash 0.5s ease-out;
+                      `;
+                                            // @ts-ignore - browser context
+                                            const style = document.createElement('style');
+                                            style.textContent = `
+                        @keyframes errorFlash {
+                          0% { opacity: 1; }
+                          100% { opacity: 0; }
+                        }
+                      `;
+                                            // @ts-ignore - browser context
+                                            document.head.appendChild(style);
+                                            // @ts-ignore - browser context
+                                            document.body.appendChild(flash);
+                                            setTimeout(() => flash.remove(), 500);
+                                        }).catch(() => { }); // Ignore errors from flashing
+                                    }
+                                });
+                                // Handle page errors (including hydration errors)
+                                page.on('pageerror', (error) => {
+                                    const timestamp = new Date().toISOString();
+                                    const logEntry = `[${timestamp}] [${processId}] [BROWSER] [PAGE ERROR] ${error.message}\n${error.stack}\n`;
+                                    appendFileSync(outputFile, logEntry);
+                                    // Visual feedback for page errors
+                                    page.evaluate(() => {
+                                        // @ts-ignore - browser context
+                                        const errorBanner = document.createElement('div');
+                                        errorBanner.style.cssText = `
+                      position: fixed;
+                      top: 40px;
+                      left: 50%;
+                      transform: translateX(-50%);
+                      background: #dc2626;
+                      color: white;
+                      padding: 12px 24px;
+                      border-radius: 6px;
+                      font-family: monospace;
+                      font-size: 14px;
+                      z-index: 999999;
+                      box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+                      animation: slideDown 0.3s ease-out;
+                    `;
+                                        errorBanner.textContent = '⚠️ JavaScript Error - Check Console & Logs';
+                                        // @ts-ignore - browser context
+                                        const style = document.createElement('style');
+                                        style.textContent = `
+                      @keyframes slideDown {
+                        from { transform: translate(-50%, -100%); opacity: 0; }
+                        to { transform: translate(-50%, 0); opacity: 1; }
+                      }
+                    `;
+                                        // @ts-ignore - browser context
+                                        document.head.appendChild(style);
+                                        // @ts-ignore - browser context
+                                        document.body.appendChild(errorBanner);
+                                        setTimeout(() => errorBanner.remove(), 5000);
+                                    }).catch(() => { });
+                                });
+                                // Handle unhandled promise rejections
+                                await page.addInitScript(() => {
+                                    // @ts-ignore - browser context
+                                    window.addEventListener('unhandledrejection', (event) => {
+                                        console.error('Unhandled Promise Rejection:', event.reason);
+                                    });
+                                });
+                                // Handle network response errors
+                                page.on('response', (response) => {
+                                    if (response.status() >= 400) {
+                                        const timestamp = new Date().toISOString();
+                                        const logEntry = `[${timestamp}] [${processId}] [BROWSER] [NETWORK ERROR] ${response.status()} ${response.statusText()} - ${response.url()}\n`;
+                                        appendFileSync(outputFile, logEntry);
+                                    }
+                                });
+                                // Navigate to the app
+                                const browserUrl = `http://localhost:${port}`;
+                                await page.goto(browserUrl, { waitUntil: 'domcontentloaded' });
+                                // Update server info with browser details
+                                serverInfo.browser = browser;
+                                serverInfo.page = page;
+                                serverInfo.browserUrl = browserUrl;
+                                serverInfo.consoleCapture = true;
+                                // Log success
+                                const successMessage = `
+🎯 TEST BROWSER LAUNCHED!
+
+👉 Use the browser window that just opened (with green banner)
+📝 All console logs are being saved
+🔍 DevTools is open for debugging
+⚠️  Errors will flash red on screen
+
+Happy debugging! 🚀
+`;
+                                appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] [BROWSER] Console capture started for ${browserUrl}\n`);
+                                appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] ${successMessage}\n`);
+                                return {
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: JSON.stringify({
+                                                status: "success",
+                                                message: successMessage.trim(),
+                                                processId: processId,
+                                                serverPid: devProcess.pid,
+                                                serverUrl: `http://localhost:${port}`,
+                                                logFile: outputFile,
+                                                browserStatus: "launched",
+                                                teachingMode: teachingMode
+                                            }, null, 2)
+                                        }
+                                    ]
+                                };
+                            }
+                            catch (browserError) {
+                                // Browser launch failed, but server is running
+                                const errorMsg = browserError instanceof Error ? browserError.message : String(browserError);
+                                appendFileSync(outputFile, `[${new Date().toISOString()}] [${processId}] [ERROR] Failed to launch browser: ${errorMsg}\n`);
+                                return {
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: JSON.stringify({
+                                                status: "partial_success",
+                                                message: `Server started successfully on http://localhost:${port}, but browser launch failed`,
+                                                error: errorMsg,
+                                                processId: processId,
+                                                serverPid: devProcess.pid,
+                                                serverUrl: `http://localhost:${port}`,
+                                                logFile: outputFile,
+                                                browserStatus: "failed",
+                                                manualInstructions: "Open http://localhost:" + port + " in your browser manually"
+                                            }, null, 2)
+                                        }
+                                    ]
+                                };
+                            }
+                        }
+                        catch (error) {
+                            throw new Error(`Failed to start frontend with browser: ${error instanceof Error ? error.message : String(error)}`);
+                        }
+                    }
                     default:
                         throw new Error(`Unknown tool: ${name}`);
                 }